@vaadin/details 24.8.0-alpha8 → 25.0.0-alpha1

package/README.md

@@ -29,29 +29,6 @@ Once installed, import the component in your application:
 import '@vaadin/details';
 ```
 
-## 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/details/vaadin-details.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/details/theme/material/vaadin-details.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/details/theme/lumo/vaadin-details.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/details/src/vaadin-details.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/details",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-details-summary-base-styles.d.ts",
+    "!src/vaadin-details-summary-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -31,23 +33,20 @@
     "Vaadin",
     "vaadin-details",
     "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.0-alpha8",
-    "@vaadin/button": "24.8.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
+    "@vaadin/a11y-base": "25.0.0-alpha1",
+    "@vaadin/button": "25.0.0-alpha1",
+    "@vaadin/component-base": "25.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha8",
-    "@vaadin/test-runner-commands": "24.8.0-alpha8",
+    "@vaadin/chai-plugins": "25.0.0-alpha1",
+    "@vaadin/test-runner-commands": "25.0.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
+  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
 }

package/src/vaadin-details-summary-core-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 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 detailsSummary: (partName?: string) => CSSResult;

package/src/vaadin-details-summary-core-styles.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 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 detailsSummary = () => css`
+  :host {
+    display: block;
+    outline: none;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+`;

package/src/vaadin-details-summary.js

@@ -3,11 +3,13 @@
  * 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 { ButtonMixin } from '@vaadin/button/src/vaadin-button-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 { detailsSummary } from './vaadin-details-summary-core-styles.js';
 
 /**
  * The details summary element.
@@ -39,33 +41,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * @mixes DirMixin
  * @mixes ThemableMixin
  */
-class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-details-summary';
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          outline: none;
-          white-space: nowrap;
-          -webkit-user-select: none;
-          user-select: none;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        :host([disabled]) {
-          pointer-events: none;
-        }
-      </style>
-      <span part="toggle" aria-hidden="true"></span>
-      <div part="content"><slot></slot></div>
-    `;
+  static get styles() {
+    return detailsSummary();
   }
 
   static get properties() {
@@ -79,6 +61,14 @@ class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))
       },
     };
   }
+
+  /** @protected */
+  render() {
+    return html`
+      <span part="toggle" aria-hidden="true"></span>
+      <div part="content"><slot></slot></div>
+    `;
+  }
 }
 
 defineCustomElement(DetailsSummary);

package/src/vaadin-details.d.ts

@@ -3,7 +3,6 @@
  * Copyright (c) 2019 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
@@ -53,7 +52,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
+declare class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof DetailsEventMap>(
     type: K,
     listener: (this: Details, ev: DetailsEventMap[K]) => void,

package/src/vaadin-details.js

@@ -4,10 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-details-summary.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.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 { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
 
@@ -47,32 +47,38 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes DetailsBaseMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
+class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-details';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
 
-        :host([hidden]) {
-          display: none !important;
-        }
+      :host([hidden]) {
+        display: none !important;
+      }
 
-        [part='content'] {
-          display: none;
-        }
+      [part='content'] {
+        display: none;
+      }
 
-        :host([opened]) [part='content'] {
-          display: block;
-        }
-      </style>
+      :host([opened]) [part='content'] {
+        display: block;
+      }
+    `;
+  }
 
+  /** @protected */
+  render() {
+    return html`
       <slot name="summary"></slot>
 
       <div part="content">
@@ -82,10 +88,6 @@ class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(ControllerMixi
       <slot name="tooltip"></slot>
     `;
   }
-
-  static get is() {
-    return 'vaadin-details';
-  }
 }
 
 defineCustomElement(Details);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.8.0-alpha8",
+  "version": "25.0.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/src/vaadin-lit-details-summary.d.ts

@@ -1,6 +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/
- */
-export * from './vaadin-details-summary.js';

package/src/vaadin-lit-details-summary.js

@@ -1,70 +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 { css, html, LitElement } from 'lit';
-import { ButtonMixin } from '@vaadin/button/src/vaadin-button-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';
-
-/**
- * LitElement based version of `<vaadin-details-summary>` 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 DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-details-summary';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        outline: none;
-        white-space: nowrap;
-        -webkit-user-select: none;
-        user-select: none;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      :host([disabled]) {
-        pointer-events: none;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * When true, the element is opened.
-       */
-      opened: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-    };
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <span part="toggle" aria-hidden="true"></span>
-      <div part="content"><slot></slot></div>
-    `;
-  }
-}
-
-defineCustomElement(DetailsSummary);
-
-export { DetailsSummary };

package/src/vaadin-lit-details.d.ts

@@ -1,6 +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/
- */
-export * from './vaadin-details.js';

package/src/vaadin-lit-details.js

@@ -1,64 +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-details-summary.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 { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-details>` 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 Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-details';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-      }
-
-      :host([hidden]) {
-        display: none !important;
-      }
-
-      [part='content'] {
-        display: none;
-      }
-
-      :host([opened]) [part='content'] {
-        display: block;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <slot name="summary"></slot>
-
-      <div part="content">
-        <slot></slot>
-      </div>
-
-      <slot name="tooltip"></slot>
-    `;
-  }
-}
-
-defineCustomElement(Details);
-
-export { Details };

package/theme/lumo/vaadin-lit-details-summary.d.ts

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

package/theme/lumo/vaadin-lit-details-summary.js

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

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

@@ -1,3 +0,0 @@
-import './vaadin-lit-details-summary.js';
-import './vaadin-details-styles.js';
-import '../../src/vaadin-lit-details.js';

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

@@ -1,3 +0,0 @@
-import './vaadin-lit-details-summary.js';
-import './vaadin-details-styles.js';
-import '../../src/vaadin-lit-details.js';

package/theme/material/vaadin-details-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const details: import("lit").CSSResult;
-export { details };

package/theme/material/vaadin-details-styles.js

@@ -1,24 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/shadow.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const details = css`
-  :host {
-    font-family: var(--material-font-family);
-    box-shadow: var(--material-shadow-elevation-2dp);
-    outline: none;
-  }
-
-  :host([focus-ring]) ::slotted([slot='summary']) {
-    background-color: var(--material-secondary-background-color);
-  }
-
-  [part='content'] {
-    padding: 8px 24px 24px;
-  }
-`;
-
-registerStyles('vaadin-details', details, { moduleId: 'material-details' });
-
-export { details };

package/theme/material/vaadin-details-summary-styles.d.ts

@@ -1,5 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-declare const detailsSummary: import("lit").CSSResult;
-export { detailsSummary };

package/theme/material/vaadin-details-summary-styles.js

@@ -1,106 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import '@vaadin/vaadin-material-styles/font-icons.js';
-import '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const detailsSummary = css`
-  :host {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    position: relative;
-    outline: none;
-    min-height: 48px;
-    padding: 0 24px;
-    box-sizing: border-box;
-    font-weight: 500;
-    font-size: var(--material-small-font-size);
-    background-color: var(--material-background-color);
-    color: var(--material-body-text-color);
-    cursor: default;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  :host([disabled]) {
-    color: var(--material-disabled-text-color);
-    background-color: var(--material-disabled-color);
-  }
-
-  [part='content'] {
-    margin: 0;
-    position: relative;
-  }
-
-  [part='toggle'] {
-    position: relative;
-    order: 1;
-    margin-inline-start: auto;
-    right: -8px;
-    width: 24px;
-    height: 24px;
-    padding: 4px;
-    color: var(--material-secondary-text-color);
-    line-height: 24px;
-    text-align: center;
-    transform: rotate(90deg);
-    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
-  }
-
-  [part='toggle']::before {
-    font-family: 'material-icons';
-    font-size: 24px;
-    width: 24px;
-    display: inline-block;
-    content: var(--material-icons-chevron-right);
-  }
-
-  [part='toggle']::after {
-    display: inline-block;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: var(--material-disabled-text-color);
-    transform: scale(0);
-    opacity: 0;
-    transition:
-      transform 0s 0.8s,
-      opacity 0.8s;
-    will-change: transform, opacity;
-  }
-
-  :host([disabled]) [part='toggle'] {
-    color: var(--material-disabled-color);
-  }
-
-  :host([active]:not([disabled])) [part='toggle']::after {
-    transition-duration: 0.08s, 0.01s;
-    transition-delay: 0s, 0s;
-    transform: scale(1.25);
-    opacity: 0.15;
-  }
-
-  :host([opened]) [part='toggle'] {
-    transform: rotate(270deg);
-  }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) [part='toggle'] {
-    right: 8px;
-  }
-
-  :host([dir='rtl']) [part='toggle']::after {
-    left: auto;
-    right: 0;
-  }
-`;
-
-registerStyles('vaadin-details-summary', detailsSummary, { moduleId: 'material-details-summary' });
-
-export { detailsSummary };

package/theme/material/vaadin-details-summary.d.ts

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

package/theme/material/vaadin-details-summary.js

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

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

@@ -1,3 +0,0 @@
-import './vaadin-details-summary.js';
-import './vaadin-details-styles.js';
-import '../../src/vaadin-details.js';

package/theme/material/vaadin-details.js

@@ -1,3 +0,0 @@
-import './vaadin-details-summary.js';
-import './vaadin-details-styles.js';
-import '../../src/vaadin-details.js';

package/theme/material/vaadin-lit-details-summary.d.ts

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

package/theme/material/vaadin-lit-details-summary.js

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

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

@@ -1,3 +0,0 @@
-import './vaadin-lit-details-summary.js';
-import './vaadin-details-styles.js';
-import '../../src/vaadin-lit-details.js';

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

@@ -1,3 +0,0 @@
-import './vaadin-lit-details-summary.js';
-import './vaadin-details-styles.js';
-import '../../src/vaadin-lit-details.js';

package/vaadin-lit-details-summary.d.ts

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

package/vaadin-lit-details-summary.js

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

package/vaadin-lit-details.d.ts

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

package/vaadin-lit-details.js

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