@vaadin/accordion 24.8.4 → 25.0.0-alpha10

package/README.md

@@ -35,29 +35,6 @@ Once installed, import the component in your application:
 import '@vaadin/accordion';
 ```
 
-## Themes
-
-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/main/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:
-
-```js
-import '@vaadin/accordion/theme/material/vaadin-accordion.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/accordion/theme/lumo/vaadin-accordion.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/accordion/src/vaadin-accordion.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -31,29 +33,26 @@
     "Vaadin",
     "vaadin-accordion",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.4",
-    "@vaadin/component-base": "~24.8.4",
-    "@vaadin/details": "~24.8.4",
-    "@vaadin/vaadin-lumo-styles": "~24.8.4",
-    "@vaadin/vaadin-material-styles": "~24.8.4",
-    "@vaadin/vaadin-themable-mixin": "~24.8.4",
+    "@vaadin/a11y-base": "25.0.0-alpha10",
+    "@vaadin/component-base": "25.0.0-alpha10",
+    "@vaadin/details": "25.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.4",
-    "@vaadin/test-runner-commands": "~24.8.4",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha10",
+    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
+  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
 }

package/src/styles/vaadin-accordion-heading-base-styles.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+import { detailsSummary } from '@vaadin/details/src/styles/vaadin-details-summary-base-styles.js';
+
+export const accordionHeading = [
+  detailsSummary('vaadin-accordion-heading'),
+  css`
+    button {
+      align-items: center;
+      appearance: none;
+      background: transparent;
+      border: 0;
+      color: inherit;
+      cursor: inherit;
+      display: flex;
+      font: inherit;
+      gap: inherit;
+      outline: none;
+      padding: 0;
+      touch-action: manipulation;
+    }
+  `,
+];

package/src/styles/vaadin-accordion-heading-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const accordionHeading: CSSResult;

package/src/styles/vaadin-accordion-panel-base-styles.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const accordionPanel = css`
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='content'] {
+    box-sizing: border-box;
+  }
+
+  :host(:not([opened])) [part='content'] {
+    display: none !important;
+  }
+
+  :host([focus-ring]) {
+    --_focus-ring: 1;
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const accordionPanel: CSSResult;

package/src/vaadin-accordion-heading.js

@@ -3,14 +3,14 @@
  * Copyright (c) 2019 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 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-core-styles.js';
-
-registerStyles('vaadin-accordion-heading', accordionHeading, { moduleId: 'vaadin-accordion-heading-styles' });
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { accordionHeading } from './styles/vaadin-accordion-heading-core-styles.js';
 
 /**
  * The accordion heading element.
@@ -51,18 +51,17 @@ registerStyles('vaadin-accordion-heading', accordionHeading, { moduleId: 'vaadin
  * @mixes DirMixin
  * @mixes ThemableMixin
  */
-class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-accordion-heading';
   }
 
-  static get template() {
-    return html`
-      <button id="button" part="content" disabled$="[[disabled]]" aria-expanded$="[[__updateAriaExpanded(opened)]]">
-        <span part="toggle" aria-hidden="true"></span>
-        <slot></slot>
-      </button>
-    `;
+  static get shadowRootOptions() {
+    return { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  }
+
+  static get styles() {
+    return accordionHeading;
   }
 
   static get properties() {
@@ -73,21 +72,20 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
       opened: {
         type: Boolean,
         reflectToAttribute: true,
+        sync: true,
         value: false,
       },
     };
   }
 
-  /**
-   * @param {DocumentFragment} dom
-   * @return {null}
-   * @protected
-   * @override
-   */
-  _attachDom(dom) {
-    const root = this.attachShadow({ mode: 'open', delegatesFocus: true });
-    root.appendChild(dom);
-    return root;
+  /** @protected */
+  render() {
+    return html`
+      <button id="button" part="content" ?disabled="${this.disabled}" aria-expanded="${this.opened ? 'true' : 'false'}">
+        <span part="toggle" aria-hidden="true"></span>
+        <slot></slot>
+      </button>
+    `;
   }
 
   /** @protected */
@@ -100,11 +98,6 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
       this.setAttribute('role', 'heading');
     }
   }
-
-  /** @private */
-  __updateAriaExpanded(opened) {
-    return opened ? 'true' : 'false';
-  }
 }
 
 defineCustomElement(AccordionHeading);

package/src/vaadin-accordion-panel.js

@@ -4,15 +4,14 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-accordion-heading.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { html, LitElement } from 'lit';
 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 { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { accordionPanel } from './styles/vaadin-accordion-panel-core-styles.js';
 import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
 
-registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-accordion-panel-styles' });
-
 /**
  * The accordion panel element.
  *
@@ -40,15 +39,19 @@ registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-acc
  * @customElement
  * @extends HTMLElement
  * @mixes AccordionPanelMixin
- * @mixes ControllerMixin
  * @mixes ThemableMixin
  */
-class AccordionPanel extends AccordionPanelMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
+class AccordionPanel extends AccordionPanelMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-accordion-panel';
   }
 
-  static get template() {
+  static get styles() {
+    return accordionPanel;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <slot name="summary"></slot>
 

package/src/vaadin-accordion.d.ts

@@ -38,7 +38,7 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  * Only one panel can be opened at a time, opening a new one forces
  * previous panel to close and hide its content.
  *
- * ```
+ * ```html
  * <vaadin-accordion>
  *   <vaadin-accordion-panel>
  *     <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
@@ -56,15 +56,6 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  * See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
  * documentation for the available state attributes and stylable shadow parts.
  *
- * **Note:** You can apply the theme to `<vaadin-accordion>` component itself,
- * especially by using the following CSS selector:
- *
- * ```
- * :host ::slotted(vaadin-accordion-panel) {
- *   margin-bottom: 5px;
- * }
- * ```
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.

package/src/vaadin-accordion.js

@@ -4,9 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-accordion-panel.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { AccordionMixin } from './vaadin-accordion-mixin.js';
 
@@ -22,7 +23,7 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * Only one panel can be opened at a time, opening a new one forces
  * previous panel to close and hide its content.
  *
- * ```
+ * ```html
  * <vaadin-accordion>
  *   <vaadin-accordion-panel>
  *     <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
@@ -40,15 +41,6 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
  * documentation for the available state attributes and stylable shadow parts.
  *
- * **Note:** You can apply the theme to `<vaadin-accordion>` component itself,
- * especially by using the following CSS selector:
- *
- * ```
- * :host ::slotted(vaadin-accordion-panel) {
- *   margin-bottom: 5px;
- * }
- * ```
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
@@ -60,24 +52,26 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
+class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-accordion';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
 
-        :host([hidden]) {
-          display: none !important;
-        }
-      </style>
-      <slot></slot>
+      :host([hidden]) {
+        display: none !important;
+      }
     `;
   }
 
-  static get is() {
-    return 'vaadin-accordion';
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
   }
 }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "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.4/#/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```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-alpha10/#/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.",
           "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.4",
+  "version": "25.0.0-alpha10",
   "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.4/#/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```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-alpha10/#/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.",
           "extension": true,
           "attributes": [
             {

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

@@ -1,73 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { html, LitElement } from 'lit';
-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 { 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-core-styles.js';
-
-/**
- * LitElement based version of `<vaadin-accordion-heading>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-accordion-heading';
-  }
-
-  static get shadowRootOptions() {
-    return { ...LitElement.shadowRootOptions, delegatesFocus: true };
-  }
-
-  static get styles() {
-    return accordionHeading;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * When true, the element is opened.
-       */
-      opened: {
-        type: Boolean,
-        reflectToAttribute: true,
-        value: false,
-      },
-    };
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <button id="button" part="content" ?disabled="${this.disabled}" aria-expanded="${this.opened ? 'true' : 'false'}">
-        <span part="toggle" aria-hidden="true"></span>
-        <slot></slot>
-      </button>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // By default, if the user hasn't provided a custom role,
-    // the role attribute is set to "heading".
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'heading');
-    }
-  }
-}
-
-defineCustomElement(AccordionHeading);
-
-export { AccordionHeading };

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

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-lit-accordion-heading.js';
-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';
-
-/**
- * LitElement based version of `<vaadin-accordion-panel>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class AccordionPanel extends AccordionPanelMixin(ThemableMixin(PolylitMixin(LitElement))) {
-  static get is() {
-    return 'vaadin-accordion-panel';
-  }
-
-  static get styles() {
-    return accordionPanel;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <slot name="summary"></slot>
-
-      <div part="content">
-        <slot></slot>
-      </div>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-}
-
-defineCustomElement(AccordionPanel);
-
-export { AccordionPanel };

package/src/vaadin-lit-accordion.js

@@ -1,48 +0,0 @@
-/**
- * @license
- * Copyright (c) 2019 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import './vaadin-lit-accordion-panel.js';
-import { css, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { AccordionMixin } from './vaadin-accordion-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-accordion>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- */
-class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-accordion';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-defineCustomElement(Accordion);
-
-export { Accordion };

package/theme/lumo/vaadin-lit-accordion-heading.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-accordion-heading-styles.js';
-import '../../src/vaadin-lit-accordion-heading.js';

package/theme/lumo/vaadin-lit-accordion-heading.js

@@ -1,2 +0,0 @@
-import './vaadin-accordion-heading-styles.js';
-import '../../src/vaadin-lit-accordion-heading.js';

package/theme/lumo/vaadin-lit-accordion-panel.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-lit-accordion-heading.js';
-import './vaadin-accordion-panel-styles.js';
-import '../../src/vaadin-lit-accordion-panel.js';

package/theme/lumo/vaadin-lit-accordion-panel.js

@@ -1,3 +0,0 @@
-import './vaadin-lit-accordion-heading.js';
-import './vaadin-accordion-panel-styles.js';
-import '../../src/vaadin-lit-accordion-panel.js';

package/theme/lumo/vaadin-lit-accordion.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-accordion-panel.js';
-import '../../src/vaadin-lit-accordion.js';

package/theme/lumo/vaadin-lit-accordion.js

@@ -1,2 +0,0 @@
-import './vaadin-lit-accordion-panel.js';
-import '../../src/vaadin-lit-accordion.js';

package/theme/material/vaadin-accordion-heading-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';

package/theme/material/vaadin-accordion-heading-styles.js

@@ -1,44 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { detailsSummary } from '@vaadin/details/theme/material/vaadin-details-summary-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const accordionHeading = css`
-  :host(:not([opened]))::after {
-    content: '';
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 1px;
-    opacity: 1;
-    z-index: 1;
-    background-color: var(--material-divider-color);
-  }
-
-  :host([opened])::before {
-    opacity: 0;
-  }
-
-  [part='content'] {
-    font-weight: normal;
-  }
-
-  [part='content'] ::slotted(*) {
-    display: flex;
-    margin-right: 16px;
-    color: var(--material-body-text-color);
-  }
-
-  [part='content'] ::slotted([theme='primary']) {
-    flex-basis: 33.33%;
-    flex-shrink: 0;
-  }
-
-  [part='content'] ::slotted([theme='secondary']) {
-    color: var(--material-secondary-text-color);
-  }
-`;
-
-registerStyles('vaadin-accordion-heading', [detailsSummary, accordionHeading], {
-  moduleId: 'material-accordion-heading',
-});

package/theme/material/vaadin-accordion-heading.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-accordion-heading-styles.js';
-import '../../src/vaadin-accordion-heading.js';

package/theme/material/vaadin-accordion-heading.js

@@ -1,2 +0,0 @@
-import './vaadin-accordion-heading-styles.js';
-import '../../src/vaadin-accordion-heading.js';

package/theme/material/vaadin-accordion-panel-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';

package/theme/material/vaadin-accordion-panel-styles.js

@@ -1,17 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { details } from '@vaadin/details/theme/material/vaadin-details-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const accordionPanel = css`
-  :host([opened]:not(:first-child)) {
-    margin-top: 16px;
-  }
-
-  :host([opened]:not(:last-child)) {
-    margin-bottom: 16px;
-  }
-`;
-
-registerStyles('vaadin-accordion-panel', [details, accordionPanel], {
-  moduleId: 'material-accordion-panel',
-});

package/theme/material/vaadin-accordion-panel.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-accordion-heading.js';
-import './vaadin-accordion-panel-styles.js';
-import '../../src/vaadin-accordion-panel.js';

package/theme/material/vaadin-accordion-panel.js

@@ -1,3 +0,0 @@
-import './vaadin-accordion-heading.js';
-import './vaadin-accordion-panel-styles.js';
-import '../../src/vaadin-accordion-panel.js';

package/theme/material/vaadin-accordion.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-accordion-panel.js';
-import '../../src/vaadin-accordion.js';

package/theme/material/vaadin-accordion.js

@@ -1,2 +0,0 @@
-import './vaadin-accordion-panel.js';
-import '../../src/vaadin-accordion.js';

package/theme/material/vaadin-lit-accordion-heading.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-accordion-heading-styles.js';
-import '../../src/vaadin-lit-accordion-heading.js';

package/theme/material/vaadin-lit-accordion-heading.js

@@ -1,2 +0,0 @@
-import './vaadin-accordion-heading-styles.js';
-import '../../src/vaadin-lit-accordion-heading.js';

package/theme/material/vaadin-lit-accordion-panel.d.ts

@@ -1,3 +0,0 @@
-import './vaadin-lit-accordion-heading.js';
-import './vaadin-accordion-panel-styles.js';
-import '../../src/vaadin-lit-accordion-panel.js';

package/theme/material/vaadin-lit-accordion-panel.js

@@ -1,3 +0,0 @@
-import './vaadin-lit-accordion-heading.js';
-import './vaadin-accordion-panel-styles.js';
-import '../../src/vaadin-lit-accordion-panel.js';

package/theme/material/vaadin-lit-accordion.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-lit-accordion-panel.js';
-import '../../src/vaadin-lit-accordion.js';

package/theme/material/vaadin-lit-accordion.js

@@ -1,2 +0,0 @@
-import './vaadin-lit-accordion-panel.js';
-import '../../src/vaadin-lit-accordion.js';

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

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

package/vaadin-lit-accordion-heading.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-accordion-heading.js';
-export * from './src/vaadin-lit-accordion-heading.js';

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

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

package/vaadin-lit-accordion-panel.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-accordion-panel.js';
-export * from './src/vaadin-lit-accordion-panel.js';

package/vaadin-lit-accordion.d.ts

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

package/vaadin-lit-accordion.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-accordion.js';
-export * from './src/vaadin-lit-accordion.js';