feat: port details and accordion Lumo styles to CSS files (#9278)

vursen · web-flow · commit 8ecd3138096e · 2025-05-26T16:04:20.000+03:00
diff --git a/dev/accordion.html b/dev/accordion.html
@@ -9,6 +9,7 @@
 
     <script type="module">
       import '@vaadin/accordion';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
     </script>
   </head>
 
diff --git a/dev/details.html b/dev/details.html
@@ -9,6 +9,7 @@
 
     <script type="module">
       import '@vaadin/details';
+      import '@vaadin/vaadin-lumo-styles/lumo.css';
     </script>
   </head>
 
diff --git a/packages/accordion/src/vaadin-accordion-heading.js b/packages/accordion/src/vaadin-accordion-heading.js
@@ -8,6 +8,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { accordionHeading } from './vaadin-accordion-heading-core-styles.js';
 
@@ -50,7 +51,7 @@ import { accordionHeading } from './vaadin-accordion-heading-core-styles.js';
  * @mixes DirMixin
  * @mixes ThemableMixin
  */
-class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class AccordionHeading extends ActiveMixin(DirMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-accordion-heading';
   }
diff --git a/packages/accordion/src/vaadin-accordion-panel.js b/packages/accordion/src/vaadin-accordion-panel.js
@@ -7,6 +7,7 @@ import './vaadin-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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-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';
@@ -40,7 +41,7 @@ import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
  * @mixes AccordionPanelMixin
  * @mixes ThemableMixin
  */
-class AccordionPanel extends AccordionPanelMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class AccordionPanel extends AccordionPanelMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-accordion-panel';
   }
diff --git a/packages/accordion/src/vaadin-accordion.js b/packages/accordion/src/vaadin-accordion.js
@@ -8,6 +8,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { AccordionMixin } from './vaadin-accordion-mixin.js';
 
@@ -61,7 +62,7 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+class Accordion extends AccordionMixin(CSSInjectionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-accordion';
   }
diff --git a/packages/accordion/test/visual/lumo/accordion-panel.test.js b/packages/accordion/test/visual/lumo/accordion-panel.test.js
@@ -1,6 +1,8 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/lumo/vaadin-accordion.js';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/accordion-panel.css';
+import '../../../vaadin-accordion-panel.js';
 
 describe('accordion-panel', () => {
   let div, element;
diff --git a/packages/accordion/test/visual/lumo/accordion.test.js b/packages/accordion/test/visual/lumo/accordion.test.js
@@ -1,6 +1,8 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/lumo/vaadin-accordion.js';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/accordion.css';
+import '../../../vaadin-accordion.js';
 
 describe('accordion', () => {
   let div, element;
diff --git a/packages/details/src/vaadin-details-summary.js b/packages/details/src/vaadin-details-summary.js
@@ -8,6 +8,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { detailsSummary } from './vaadin-details-summary-core-styles.js';
 
@@ -41,7 +42,7 @@ import { detailsSummary } from './vaadin-details-summary-core-styles.js';
  * @mixes DirMixin
  * @mixes ThemableMixin
  */
-class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class DetailsSummary extends ButtonMixin(DirMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-details-summary';
   }
diff --git a/packages/details/src/vaadin-details.js b/packages/details/src/vaadin-details.js
@@ -8,6 +8,7 @@ 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 { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
 
@@ -51,7 +52,7 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class Details extends DetailsBaseMixin(ElementMixin(CSSInjectionMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-details';
   }
diff --git a/packages/details/test/visual/lumo/details.test.js b/packages/details/test/visual/lumo/details.test.js
@@ -1,6 +1,8 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
-import '../../../theme/lumo/vaadin-details.js';
+import '@vaadin/vaadin-lumo-styles/props.css';
+import '@vaadin/vaadin-lumo-styles/components/details.css';
+import '../../../vaadin-details.js';
 
 describe('details', () => {
   let div, element;
diff --git a/packages/vaadin-lumo-styles/components.css b/packages/vaadin-lumo-styles/components.css
@@ -3,9 +3,12 @@
  * Copyright (c) 2017 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+@import './components/accordion.css';
 @import './components/button.css';
 @import './components/combo-box.css';
 @import './components/date-picker.css';
+@import './components/details-summary.css';
+@import './components/details.css';
 @import './components/email-field.css';
 @import './components/icon.css';
 @import './components/input-container.css';
diff --git a/packages/vaadin-lumo-styles/components/accordion-heading.css b/packages/vaadin-lumo-styles/components/accordion-heading.css
@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import '../src/mixins/base-layer-reset.css' vaadin-accordion-heading;
+@import '../src/components/details-summary.css' vaadin-accordion-heading;
+@import '../src/components/accordion-heading.css' vaadin-accordion-heading;
+
+html {
+  --vaadin-accordion-heading-css-inject: 1;
+}
diff --git a/packages/vaadin-lumo-styles/components/accordion-panel.css b/packages/vaadin-lumo-styles/components/accordion-panel.css
@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './accordion-heading.css';
+
+@import '../src/mixins/base-layer-reset.css' vaadin-accordion-panel;
+@import '../src/components/details.css' vaadin-accordion-panel;
+@import '../src/components/accordion-panel.css' vaadin-accordion-panel;
+
+html {
+  --vaadin-accordion-panel-css-inject: 1;
+}
diff --git a/packages/vaadin-lumo-styles/components/accordion.css b/packages/vaadin-lumo-styles/components/accordion.css
@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './accordion-heading.css';
+@import './accordion-panel.css';
diff --git a/packages/vaadin-lumo-styles/components/details-summary.css b/packages/vaadin-lumo-styles/components/details-summary.css
@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import '../src/mixins/base-layer-reset.css' vaadin-details-summary;
+@import '../src/components/details-summary.css' vaadin-details-summary;
+
+html {
+  --vaadin-details-summary-css-inject: 1;
+}
diff --git a/packages/vaadin-lumo-styles/components/details.css b/packages/vaadin-lumo-styles/components/details.css
@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+@import './details-summary.css';
+
+@import '../src/components/details.css' vaadin-details;
+
+html {
+  --vaadin-details-css-inject: 1;
+}
diff --git a/packages/vaadin-lumo-styles/src/components/accordion-heading.css b/packages/vaadin-lumo-styles/src/components/accordion-heading.css
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  display: block;
+  outline: none;
+  -webkit-user-select: none;
+  user-select: none;
+  padding: 0;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: inherit;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: initial;
+  color: inherit;
+  border: initial;
+  outline: none;
+  font: inherit;
+  text-align: inherit;
+}
+
+[part='content'] {
+  padding: var(--lumo-space-s) 0;
+}
+
+:host([theme~='filled']) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
diff --git a/packages/vaadin-lumo-styles/src/components/accordion-panel.css b/packages/vaadin-lumo-styles/src/components/accordion-panel.css
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+:host {
+  display: block;
+  margin: 0;
+  border-bottom: solid 1px var(--lumo-contrast-10pct);
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+[part='content'] {
+  display: none;
+  overflow: hidden;
+}
+
+:host([opened]) [part='content'] {
+  display: block;
+  overflow: visible;
+}
+
+:host(:last-child) {
+  border-bottom: none;
+}
+
+:host([theme~='filled']) {
+  border-bottom: none;
+}
+
+:host([theme~='filled']:not(:last-child)) {
+  margin-bottom: 2px;
+}
diff --git a/packages/vaadin-lumo-styles/src/components/details-summary.css b/packages/vaadin-lumo-styles/src/components/details-summary.css
diff --git a/packages/vaadin-lumo-styles/src/components/details.css b/packages/vaadin-lumo-styles/src/components/details.css
