feat: add aura accordion and details theme variants (#10253)

jouni · web-flow · commit 656dc0743fc1 · 2025-09-29T11:35:26.000+03:00
diff --git a/packages/aura/aura.css b/packages/aura/aura.css
@@ -6,6 +6,7 @@
 @import './src/surface.css';
 @import './src/typography.css';
 
+@import './src/components/accordion-details.css';
 @import './src/components/app-layout.css';
 @import './src/components/avatar.css';
 @import './src/components/button.css';
diff --git a/packages/aura/src/components/accordion-details.css b/packages/aura/src/components/accordion-details.css
@@ -0,0 +1,37 @@
+:is(vaadin-details, vaadin-accordion-panel):not([theme~='no-padding'])::part(content) {
+  padding: var(--vaadin-padding-container);
+  padding-top: 0;
+}
+
+:is(vaadin-details, vaadin-accordion-panel):not([theme~='no-padding'], [theme~='reverse'])::part(content) {
+  margin-inline-start: calc(var(--vaadin-icon-size, 1lh) + var(--vaadin-details-summary-gap, var(--vaadin-gap-s)));
+}
+
+:is(vaadin-details, vaadin-accordion-panel)[theme~='reverse'] {
+  [slot='summary']::part(content) {
+    width: 100%;
+  }
+
+  [slot='summary']::part(toggle) {
+    order: 1;
+    margin-inline-start: auto;
+  }
+}
+
+:is(vaadin-details, vaadin-accordion-panel)[theme~='filled'] {
+  background: var(--aura-surface) padding-box;
+  border-radius: var(--vaadin-radius-m);
+  border: 1px solid var(--vaadin-border-color-secondary);
+
+  &:has(+ :is(vaadin-details, vaadin-accordion-panel)[theme~='filled']) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  & + :is(vaadin-details, vaadin-accordion-panel)[theme~='filled'] {
+    margin-top: -1px;
+    border-top-color: transparent;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
diff --git a/packages/aura/src/surface.css b/packages/aura/src/surface.css
@@ -6,11 +6,13 @@
 :is(:root, :host),
 .aura-surface,
 .aura-surface-solid,
+vaadin-accordion-panel[theme~='filled'],
 vaadin-app-layout::part(navbar),
 vaadin-app-layout::part(drawer),
 vaadin-button,
 vaadin-card,
 vaadin-checkbox::part(checkbox),
+vaadin-details[theme~='filled'],
 vaadin-master-detail-layout::part(detail),
 vaadin-menu-bar-button,
 vaadin-message-input,
