From 387bdfaabfeded3e1d05898af6824913ad78786e Mon Sep 17 00:00:00 2001
From: evnchn <evanchan040511@gmail.com>
Date: Sun, 18 Jan 2026 10:26:11 +0000
Subject: [PATCH 1/4] Avoid expansion-item stutters by respecting Quasar
 expectations during animation

---
 nicegui/static/nicegui.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/nicegui/static/nicegui.css b/nicegui/static/nicegui.css
index e72eda655..83de2ce66 100644
--- a/nicegui/static/nicegui.css
+++ b/nicegui/static/nicegui.css
@@ -67,12 +67,12 @@
 }
 
 /* HACK: avoid stutter when expansion item is toggled */
-.nicegui-expansion .q-expansion-item__content {
+.nicegui-expansion .q-expansion-item__content[style*="height"] {
   padding: 0 var(--nicegui-default-padding);
+  display: block;
 }
-.nicegui-expansion .q-expansion-item__content::before,
-.nicegui-expansion .q-expansion-item__content::after {
-  content: ""; /* the gap compensates for the missing vertical padding */
+.nicegui-expansion .q-expansion-item__content[style*="height"] > * {
+  margin: var(--nicegui-default-padding) 0;
 }
 
 /* revert Tailwind's CSS reset for ui.editor and ui.markdown */

From 18adaa916f7c02d6722b25331cfe92983b6b75b1 Mon Sep 17 00:00:00 2001
From: Falko Schindler <falko@zauberzeug.com>
Date: Fri, 23 Jan 2026 08:07:43 +0100
Subject: [PATCH 2/4] fix width of children during animation

---
 nicegui/static/nicegui.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/nicegui/static/nicegui.css b/nicegui/static/nicegui.css
index 83de2ce66..b62abc5b4 100644
--- a/nicegui/static/nicegui.css
+++ b/nicegui/static/nicegui.css
@@ -73,6 +73,7 @@
 }
 .nicegui-expansion .q-expansion-item__content[style*="height"] > * {
   margin: var(--nicegui-default-padding) 0;
+  width: max-content;
 }
 
 /* revert Tailwind's CSS reset for ui.editor and ui.markdown */

From d14ea3e8ef80f483d74dfc0be88f831286412128 Mon Sep 17 00:00:00 2001
From: Falko Schindler <falko@zauberzeug.com>
Date: Fri, 23 Jan 2026 11:26:04 +0100
Subject: [PATCH 3/4] introduce a custom Vue component instead

---
 nicegui/elements/expansion.js |  9 +++++++++
 nicegui/elements/expansion.py |  5 +++--
 nicegui/static/nicegui.css    | 12 +-----------
 3 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 nicegui/elements/expansion.js

diff --git a/nicegui/elements/expansion.js b/nicegui/elements/expansion.js
new file mode 100644
index 000000000..3cdf524c4
--- /dev/null
+++ b/nicegui/elements/expansion.js
@@ -0,0 +1,9 @@
+export default {
+  template: `
+    <q-expansion-item ref="qRef">
+      <div class="nicegui-expansion-content">
+        <slot></slot>
+      </div>
+    </q-expansion-item>
+  `,
+};
diff --git a/nicegui/elements/expansion.py b/nicegui/elements/expansion.py
index 7a4e6c86b..c28196d20 100644
--- a/nicegui/elements/expansion.py
+++ b/nicegui/elements/expansion.py
@@ -8,7 +8,8 @@
 from .mixins.value_element import ValueElement
 
 
-class Expansion(IconElement, TextElement, ValueElement, DisableableElement, default_classes='nicegui-expansion'):
+class Expansion(IconElement, TextElement, ValueElement, DisableableElement,
+                component='expansion.js', default_classes='nicegui-expansion'):
 
     @resolve_defaults
     def __init__(self,
@@ -30,7 +31,7 @@ def __init__(self,
         :param value: whether the expansion should be opened on creation (default: `False`)
         :param on_value_change: callback to execute when value changes
         """
-        super().__init__(tag='q-expansion-item', icon=icon, text=text, value=value, on_value_change=on_value_change)
+        super().__init__(icon=icon, text=text, value=value, on_value_change=on_value_change)
         self._props.set_optional('caption', caption)
         self._props.set_optional('group', group)
 
diff --git a/nicegui/static/nicegui.css b/nicegui/static/nicegui.css
index b62abc5b4..9d1ab091f 100644
--- a/nicegui/static/nicegui.css
+++ b/nicegui/static/nicegui.css
@@ -18,7 +18,7 @@
 .nicegui-tab-panel,
 .nicegui-card,
 .nicegui-carousel-slide,
-.nicegui-expansion .q-expansion-item__content,
+.nicegui-expansion-content,
 .nicegui-scroll-area .q-scrollarea__content {
   display: flex;
   flex-direction: column;
@@ -66,16 +66,6 @@
   gap: 8px;
 }
 
-/* HACK: avoid stutter when expansion item is toggled */
-.nicegui-expansion .q-expansion-item__content[style*="height"] {
-  padding: 0 var(--nicegui-default-padding);
-  display: block;
-}
-.nicegui-expansion .q-expansion-item__content[style*="height"] > * {
-  margin: var(--nicegui-default-padding) 0;
-  width: max-content;
-}
-
 /* revert Tailwind's CSS reset for ui.editor and ui.markdown */
 .nicegui-editor .q-editor__content h1,
 .nicegui-markdown h1 {

From bdb28f0dac4cae2d50ecc13a5bd63308671433ea Mon Sep 17 00:00:00 2001
From: Falko Schindler <falko@zauberzeug.com>
Date: Fri, 23 Jan 2026 13:14:51 +0100
Subject: [PATCH 4/4] add back non-default slots

---
 nicegui/elements/expansion.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/nicegui/elements/expansion.js b/nicegui/elements/expansion.js
index 3cdf524c4..c689b8916 100644
--- a/nicegui/elements/expansion.js
+++ b/nicegui/elements/expansion.js
@@ -1,9 +1,18 @@
 export default {
   template: `
     <q-expansion-item ref="qRef">
+      <template v-for="(_, name) in nonDefaultSlots" :key="name" v-slot:[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}" />
+      </template>
       <div class="nicegui-expansion-content">
         <slot></slot>
       </div>
     </q-expansion-item>
   `,
+  computed: {
+    nonDefaultSlots() {
+      const { default: _, ...rest } = this.$slots;
+      return rest;
+    },
+  },
 };