@vaadin/details 24.8.4 → 25.0.0-alpha10

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.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-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.4",
-    "@vaadin/button": "~24.8.4",
-    "@vaadin/component-base": "~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/button": "25.0.0-alpha10",
+    "@vaadin/component-base": "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-details-summary-base-styles.js

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright (c) 2025 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@vaadin/component-base/src/style-props.js';
+import { css, unsafeCSS } from 'lit';
+
+export const detailsSummary = (partName = 'vaadin-details-summary') => css`
+  :host {
+    align-items: center;
+    background: var(--${unsafeCSS(partName)}-background, transparent);
+    background-origin: border-box;
+    border: var(--${unsafeCSS(partName)}-border, none);
+    border-radius: var(--${unsafeCSS(partName)}-border-radius, var(--vaadin-radius-m));
+    box-sizing: border-box;
+    color: var(--${unsafeCSS(partName)}-text-color, var(--vaadin-color));
+    cursor: var(--vaadin-clickable-cursor);
+    display: flex;
+    font-size: var(--${unsafeCSS(partName)}-font-size, inherit);
+    font-weight: var(--${unsafeCSS(partName)}-font-weight, 500);
+    gap: var(--${unsafeCSS(partName)}-gap, 0 var(--vaadin-gap-container-inline));
+    height: var(--${unsafeCSS(partName)}-height, auto);
+    outline: calc(var(--vaadin-focus-ring-width) * var(--_focus-ring, 0)) solid var(--vaadin-focus-ring-color);
+    outline-offset: 1px;
+    padding: var(--${unsafeCSS(partName)}-padding, var(--vaadin-padding-container));
+    -webkit-tap-highlight-color: transparent;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  :host([focus-ring]) {
+    --_focus-ring: 1;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='toggle'] {
+    color: var(--vaadin-color-subtle);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    [part='toggle'] {
+      transition-property: rotate;
+      transition-duration: 150ms;
+      animation: delay-initial-transition 1ms;
+    }
+
+    @keyframes delay-initial-transition {
+      0% {
+        rotate: 0deg;
+      }
+    }
+  }
+
+  [part='toggle']::before {
+    background: currentColor;
+    content: '';
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-chevron-down);
+    width: var(--vaadin-icon-size, 1lh);
+    rotate: -90deg;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: var(--vaadin-disabled-cursor);
+  }
+
+  :host([dir='rtl']) [part='toggle']::before {
+    scale: -1;
+  }
+
+  :host([opened]) [part='toggle'] {
+    rotate: 90deg;
+  }
+
+  :host([dir='rtl'][opened]) [part='toggle'] {
+    rotate: -90deg;
+  }
+
+  @media (forced-colors: active) {
+    [part='toggle']::before {
+      background: CanvasText;
+    }
+
+    :host([disabled]) {
+      color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) [part='toggle']::before {
+      background: GrayText;
+    }
+  }
+`;

package/src/styles/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.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 { 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 { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { detailsSummary } from './vaadin-details-summary-core-styles.js';
-
-registerStyles('vaadin-details-summary', detailsSummary(), { moduleId: 'vaadin-details-summary-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 { detailsSummary } from './styles/vaadin-details-summary-core-styles.js';
 
 /**
  * The details summary element.
@@ -42,16 +42,13 @@ registerStyles('vaadin-details-summary', detailsSummary(), { moduleId: 'vaadin-d
  * @mixes DirMixin
  * @mixes ThemableMixin
  */
-class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolymerElement))) {
+class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-details-summary';
   }
 
-  static get template() {
-    return html`
-      <span part="toggle" aria-hidden="true"></span>
-      <div part="content"><slot></slot></div>
-    `;
+  static get styles() {
+    return detailsSummary();
   }
 
   static get properties() {
@@ -65,6 +62,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';
@@ -23,7 +22,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
  * `<vaadin-details>` is a Web Component which the creates an
  * expandable panel similar to `<details>` HTML element.
  *
- * ```
+ * ```html
  * <vaadin-details>
  *   <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
  *   <div>
@@ -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,11 @@
  * 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 { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
 
@@ -15,7 +16,7 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
  * `<vaadin-details>` is a Web Component which the creates an
  * expandable panel similar to `<details>` HTML element.
  *
- * ```
+ * ```html
  * <vaadin-details>
  *   <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
  *   <div>
@@ -47,32 +48,44 @@ 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(LumoInjectionMixin(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;
+      }
+    `;
+  }
 
+  static get lumoInjector() {
+    return {
+      includeBaseStyles: true,
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
       <slot name="summary"></slot>
 
       <div part="content">
@@ -82,10 +95,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.4",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -74,7 +74,7 @@
         },
         {
           "name": "vaadin-details",
-          "description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```\n<vaadin-details>\n  <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n  <div>\n    Toggle using mouse, Enter and Space keys.\n  </div>\n</vaadin-details>\n```\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 details content.\n\nThe following attributes are exposed 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```html\n<vaadin-details>\n  <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n  <div>\n    Toggle using mouse, Enter and Space keys.\n  </div>\n</vaadin-details>\n```\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 details content.\n\nThe following attributes are exposed 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/details",
-  "version": "24.8.4",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -37,7 +37,7 @@
         },
         {
           "name": "vaadin-details",
-          "description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```\n<vaadin-details>\n  <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n  <div>\n    Toggle using mouse, Enter and Space keys.\n  </div>\n</vaadin-details>\n```\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 details content.\n\nThe following attributes are exposed 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```html\n<vaadin-details>\n  <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n  <div>\n    Toggle using mouse, Enter and Space keys.\n  </div>\n</vaadin-details>\n```\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 details content.\n\nThe following attributes are exposed 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {

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

@@ -1,55 +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 { 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';
-
-/**
- * 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 detailsSummary();
-  }
-
-  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.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';