From a3c35bf48f0afab05d3699e074f4d97201e4d56f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 10:56:52 +0100
Subject: [PATCH 1/7] Switch transition to animation so we can control the
 inner section

---
 .../js/components/ui/Publish/Sections.vue     | 118 ++++++++++++++++--
 1 file changed, 108 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 52d344cca0..8fd5bc387d 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -74,18 +74,116 @@ function toggleSection(section) {
                 />
             </PanelHeader>
             <div
-                style="--tw-ease: ease;"
-                class="h-auto visible transition-[height,visibility] duration-[250ms,2s]"
-                :class="{ 'h-0! invisible! overflow-clip': section.collapsed }"
+                class="publish-section-collapsible grid"
+                :class="section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded'"
             >
-                <Card :class="{ 'p-0!': asConfig }">
-                    <FieldsProvider :fields="section.fields">
-                        <slot :section="section">
-                            <Fields />
-                        </slot>
-                    </FieldsProvider>
-                </Card>
+                <div class="publish-section-collapsible__inner min-h-0">
+                    <Card :class="{ 'p-0!': asConfig }">
+                        <FieldsProvider :fields="section.fields">
+                            <slot :section="section">
+                                <Fields />
+                            </slot>
+                        </FieldsProvider>
+                    </Card>
+                </div>
             </div>
         </Panel>
     </div>
 </template>
+
+<style scoped>
+.publish-section-collapsible--expanded {
+    animation: publish-section-expand 250ms ease forwards;
+    grid-template-rows: 1fr;
+}
+
+.publish-section-collapsible--collapsed {
+    animation: publish-section-collapse 250ms ease forwards;
+    grid-template-rows: 0fr;
+}
+
+.publish-section-collapsible--expanded .publish-section-collapsible__inner {
+    animation:
+        publish-section-expand-visibility 0ms 0ms forwards,
+        publish-section-expand-overflow 0ms 250ms forwards;
+    overflow: clip;
+}
+
+.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
+    /* border: 3px solid blue!important; */
+    animation:
+        publish-section-collapse-overflow 0ms 250ms forwards,
+        publish-section-collapse-visibility 0ms 250ms forwards;
+    overflow: clip;
+}
+
+@keyframes publish-section-expand {
+    from {
+        grid-template-rows: 0fr;
+    }
+
+    to {
+        grid-template-rows: 1fr;
+    }
+}
+
+@keyframes publish-section-expand-visibility {
+    to {
+        visibility: visible;
+    }
+}
+
+@keyframes publish-section-expand-overflow {
+    to {
+        overflow: visible;
+    }
+}
+
+@keyframes publish-section-collapse {
+    from {
+        grid-template-rows: 1fr;
+    }
+
+    to {
+        grid-template-rows: 0fr;
+    }
+}
+
+@keyframes publish-section-collapse-overflow {
+    to {
+        overflow: clip;
+    }
+}
+
+@keyframes publish-section-collapse-visibility {
+    to {
+        visibility: hidden;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .publish-section-collapsible--expanded,
+    .publish-section-collapsible--collapsed {
+        animation: none;
+    }
+
+    .publish-section-collapsible--expanded {
+        grid-template-rows: 1fr;
+    }
+
+    .publish-section-collapsible--collapsed {
+        grid-template-rows: 0fr;
+    }
+
+    .publish-section-collapsible--expanded .publish-section-collapsible__inner {
+        visibility: visible;
+        overflow: visible;
+    }
+
+    .publish-section-collapsible--collapsed .publish-section-collapsible__inner {
+        animation: none;
+        visibility: hidden;
+        overflow: clip;
+    }
+}
+</style>

From cd5ec00cc663d385f9d5ab02b6df1b7cacdcba85 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 11:35:34 +0100
Subject: [PATCH 2/7] Tidy

---
 .../js/components/ui/Publish/Sections.vue     | 58 +++++++++++--------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 8fd5bc387d..67106a567d 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -92,54 +92,55 @@ function toggleSection(section) {
 </template>
 
 <style scoped>
+[class*="publish-section-collapsible"] {
+    --speed: 250ms;
+    --timing: ease;
+}
+
 .publish-section-collapsible--expanded {
-    animation: publish-section-expand 250ms ease forwards;
-    grid-template-rows: 1fr;
+    /* We can animate collapse/expand using grid rows */
+    animation: expand-rows var(--speed) var(--timing) forwards;
 }
 
 .publish-section-collapsible--collapsed {
-    animation: publish-section-collapse 250ms ease forwards;
-    grid-template-rows: 0fr;
+    animation: collapse-rows var(--speed) var(--timing) forwards;
 }
 
 .publish-section-collapsible--expanded .publish-section-collapsible__inner {
     animation:
-        publish-section-expand-visibility 0ms 0ms forwards,
-        publish-section-expand-overflow 0ms 250ms forwards;
+        make-visible 0ms 0ms forwards,
+        unset-overflow 0ms var(--speed) forwards;
     overflow: clip;
 }
 
 .publish-section-collapsible--collapsed .publish-section-collapsible__inner {
-    /* border: 3px solid blue!important; */
     animation:
-        publish-section-collapse-overflow 0ms 250ms forwards,
-        publish-section-collapse-visibility 0ms 250ms forwards;
+        clip-overflow 0ms var(--speed) forwards,
+        make-invisible 0ms var(--speed) forwards;
     overflow: clip;
 }
 
-@keyframes publish-section-expand {
+@keyframes make-visible {
     from {
-        grid-template-rows: 0fr;
+        visibility: hidden;
     }
 
     to {
-        grid-template-rows: 1fr;
+        visibility: visible;
     }
 }
 
-@keyframes publish-section-expand-visibility {
-    to {
+@keyframes make-invisible {
+    from {
         visibility: visible;
     }
-}
 
-@keyframes publish-section-expand-overflow {
     to {
-        overflow: visible;
+        visibility: hidden;
     }
 }
 
-@keyframes publish-section-collapse {
+@keyframes collapse-rows {
     from {
         grid-template-rows: 1fr;
     }
@@ -149,21 +150,33 @@ function toggleSection(section) {
     }
 }
 
-@keyframes publish-section-collapse-overflow {
+@keyframes expand-rows {
+    from {
+        grid-template-rows: 0fr;
+    }
+
+    to {
+        grid-template-rows: 1fr;
+    }
+}
+
+@keyframes clip-overflow {
     to {
         overflow: clip;
     }
 }
 
-@keyframes publish-section-collapse-visibility {
+@keyframes unset-overflow {
     to {
-        visibility: hidden;
+        overflow: visible;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
     .publish-section-collapsible--expanded,
-    .publish-section-collapsible--collapsed {
+    .publish-section-collapsible--collapsed,
+    .publish-section-collapsible--expanded .publish-section-collapsible__inner,
+    .publish-section-collapsible--collapsed .publish-section-collapsible__inner {
         animation: none;
     }
 
@@ -181,7 +194,6 @@ function toggleSection(section) {
     }
 
     .publish-section-collapsible--collapsed .publish-section-collapsible__inner {
-        animation: none;
         visibility: hidden;
         overflow: clip;
     }

From eccf06600158cf902f319dcd476273865738ffa6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 11:42:34 +0100
Subject: [PATCH 3/7] Tidy

---
 .../js/components/ui/Publish/Sections.vue     | 88 +++----------------
 1 file changed, 10 insertions(+), 78 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 67106a567d..f10da31212 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -95,6 +95,10 @@ function toggleSection(section) {
 [class*="publish-section-collapsible"] {
     --speed: 250ms;
     --timing: ease;
+
+    @media (prefers-reduced-motion: reduce) {
+        --speed: 0ms;
+    }
 }
 
 .publish-section-collapsible--expanded {
@@ -120,82 +124,10 @@ function toggleSection(section) {
     overflow: clip;
 }
 
-@keyframes make-visible {
-    from {
-        visibility: hidden;
-    }
-
-    to {
-        visibility: visible;
-    }
-}
-
-@keyframes make-invisible {
-    from {
-        visibility: visible;
-    }
-
-    to {
-        visibility: hidden;
-    }
-}
-
-@keyframes collapse-rows {
-    from {
-        grid-template-rows: 1fr;
-    }
-
-    to {
-        grid-template-rows: 0fr;
-    }
-}
-
-@keyframes expand-rows {
-    from {
-        grid-template-rows: 0fr;
-    }
-
-    to {
-        grid-template-rows: 1fr;
-    }
-}
-
-@keyframes clip-overflow {
-    to {
-        overflow: clip;
-    }
-}
-
-@keyframes unset-overflow {
-    to {
-        overflow: visible;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .publish-section-collapsible--expanded,
-    .publish-section-collapsible--collapsed,
-    .publish-section-collapsible--expanded .publish-section-collapsible__inner,
-    .publish-section-collapsible--collapsed .publish-section-collapsible__inner {
-        animation: none;
-    }
-
-    .publish-section-collapsible--expanded {
-        grid-template-rows: 1fr;
-    }
-
-    .publish-section-collapsible--collapsed {
-        grid-template-rows: 0fr;
-    }
-
-    .publish-section-collapsible--expanded .publish-section-collapsible__inner {
-        visibility: visible;
-        overflow: visible;
-    }
-
-    .publish-section-collapsible--collapsed .publish-section-collapsible__inner {
-        visibility: hidden;
-        overflow: clip;
-    }
-}
+@keyframes make-visible   { from { visibility: hidden; } to { visibility: visible; } }
+@keyframes make-invisible { from { visibility: visible; } to { visibility: hidden; } }
+@keyframes collapse-rows  { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
+@keyframes expand-rows    { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
+@keyframes clip-overflow  { to { overflow: clip; } }
+@keyframes unset-overflow { to { overflow: visible; } }
 </style>

From ebe5e950569d2d850d889c496e09520756f97900 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 11:56:13 +0100
Subject: [PATCH 4/7] Do not animate until clicked to prevent animating as the
 page loads

---
 .../js/components/ui/Publish/Sections.vue     | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index f10da31212..38af0d4d76 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -7,7 +7,6 @@ import {
     Heading,
     Subheading,
     Card,
-    Icon,
 } from '@ui';
 import FieldsProvider from './FieldsProvider.vue';
 import Fields from './Fields.vue';
@@ -15,8 +14,6 @@ import ShowField from '@/components/field-conditions/ShowField.js';
 import { injectContainerContext } from './Container.vue';
 import markdown from '@/util/markdown.js';
 import { computed } from 'vue';
-import { Primitive } from 'reka-ui';
-import { Motion } from 'motion-v';
 
 const { blueprint, container, visibleValues, extraValues, revealerValues, asConfig, hiddenFields, setHiddenField } = injectContainerContext();
 const tab = injectTabContext();
@@ -43,6 +40,7 @@ function renderInstructions(instructions) {
 
 function toggleSection(section) {
     if (section.collapsible) {
+        section.collapsibleAnimated = true;
         section.collapsed = !section.collapsed;
     }
 }
@@ -75,7 +73,10 @@ function toggleSection(section) {
             </PanelHeader>
             <div
                 class="publish-section-collapsible grid"
-                :class="section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded'"
+                :class="[
+                    section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded',
+                    { 'publish-section-collapsible--animate': section.collapsibleAnimated },
+                ]"
             >
                 <div class="publish-section-collapsible__inner min-h-0">
                     <Card :class="{ 'p-0!': asConfig }">
@@ -92,7 +93,7 @@ function toggleSection(section) {
 </template>
 
 <style scoped>
-[class*="publish-section-collapsible"] {
+[class*='publish-section-collapsible'] {
     --speed: 250ms;
     --timing: ease;
 
@@ -101,23 +102,40 @@ function toggleSection(section) {
     }
 }
 
-.publish-section-collapsible--expanded {
-    /* We can animate collapse/expand using grid rows */
+.publish-section-collapsible--expanded:not(.publish-section-collapsible--animate) {
+    grid-template-rows: 1fr;
+}
+
+.publish-section-collapsible--collapsed:not(.publish-section-collapsible--animate) {
+    grid-template-rows: 0fr;
+}
+
+.publish-section-collapsible--expanded:not(.publish-section-collapsible--animate) .publish-section-collapsible__inner {
+    visibility: visible;
+    overflow: visible;
+}
+
+.publish-section-collapsible--collapsed:not(.publish-section-collapsible--animate) .publish-section-collapsible__inner {
+    visibility: hidden;
+    overflow: clip;
+}
+
+.publish-section-collapsible--animate.publish-section-collapsible--expanded {
     animation: expand-rows var(--speed) var(--timing) forwards;
 }
 
-.publish-section-collapsible--collapsed {
+.publish-section-collapsible--animate.publish-section-collapsible--collapsed {
     animation: collapse-rows var(--speed) var(--timing) forwards;
 }
 
-.publish-section-collapsible--expanded .publish-section-collapsible__inner {
+.publish-section-collapsible--animate.publish-section-collapsible--expanded .publish-section-collapsible__inner {
     animation:
         make-visible 0ms 0ms forwards,
         unset-overflow 0ms var(--speed) forwards;
     overflow: clip;
 }
 
-.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
+.publish-section-collapsible--animate.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
     animation:
         clip-overflow 0ms var(--speed) forwards,
         make-invisible 0ms var(--speed) forwards;

From 889b54ad9c9d0732c4959a0f2613e8f341e1198b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 11:57:59 +0100
Subject: [PATCH 5/7] Temporarily revert

---
 .../js/components/ui/Publish/Sections.vue     | 38 +++++--------------
 1 file changed, 10 insertions(+), 28 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 38af0d4d76..f10da31212 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -7,6 +7,7 @@ import {
     Heading,
     Subheading,
     Card,
+    Icon,
 } from '@ui';
 import FieldsProvider from './FieldsProvider.vue';
 import Fields from './Fields.vue';
@@ -14,6 +15,8 @@ import ShowField from '@/components/field-conditions/ShowField.js';
 import { injectContainerContext } from './Container.vue';
 import markdown from '@/util/markdown.js';
 import { computed } from 'vue';
+import { Primitive } from 'reka-ui';
+import { Motion } from 'motion-v';
 
 const { blueprint, container, visibleValues, extraValues, revealerValues, asConfig, hiddenFields, setHiddenField } = injectContainerContext();
 const tab = injectTabContext();
@@ -40,7 +43,6 @@ function renderInstructions(instructions) {
 
 function toggleSection(section) {
     if (section.collapsible) {
-        section.collapsibleAnimated = true;
         section.collapsed = !section.collapsed;
     }
 }
@@ -73,10 +75,7 @@ function toggleSection(section) {
             </PanelHeader>
             <div
                 class="publish-section-collapsible grid"
-                :class="[
-                    section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded',
-                    { 'publish-section-collapsible--animate': section.collapsibleAnimated },
-                ]"
+                :class="section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded'"
             >
                 <div class="publish-section-collapsible__inner min-h-0">
                     <Card :class="{ 'p-0!': asConfig }">
@@ -93,7 +92,7 @@ function toggleSection(section) {
 </template>
 
 <style scoped>
-[class*='publish-section-collapsible'] {
+[class*="publish-section-collapsible"] {
     --speed: 250ms;
     --timing: ease;
 
@@ -102,40 +101,23 @@ function toggleSection(section) {
     }
 }
 
-.publish-section-collapsible--expanded:not(.publish-section-collapsible--animate) {
-    grid-template-rows: 1fr;
-}
-
-.publish-section-collapsible--collapsed:not(.publish-section-collapsible--animate) {
-    grid-template-rows: 0fr;
-}
-
-.publish-section-collapsible--expanded:not(.publish-section-collapsible--animate) .publish-section-collapsible__inner {
-    visibility: visible;
-    overflow: visible;
-}
-
-.publish-section-collapsible--collapsed:not(.publish-section-collapsible--animate) .publish-section-collapsible__inner {
-    visibility: hidden;
-    overflow: clip;
-}
-
-.publish-section-collapsible--animate.publish-section-collapsible--expanded {
+.publish-section-collapsible--expanded {
+    /* We can animate collapse/expand using grid rows */
     animation: expand-rows var(--speed) var(--timing) forwards;
 }
 
-.publish-section-collapsible--animate.publish-section-collapsible--collapsed {
+.publish-section-collapsible--collapsed {
     animation: collapse-rows var(--speed) var(--timing) forwards;
 }
 
-.publish-section-collapsible--animate.publish-section-collapsible--expanded .publish-section-collapsible__inner {
+.publish-section-collapsible--expanded .publish-section-collapsible__inner {
     animation:
         make-visible 0ms 0ms forwards,
         unset-overflow 0ms var(--speed) forwards;
     overflow: clip;
 }
 
-.publish-section-collapsible--animate.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
+.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
     animation:
         clip-overflow 0ms var(--speed) forwards,
         make-invisible 0ms var(--speed) forwards;

From dc5d3f792fd93412f0daa4c26f3a1b119cb4d2dc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 12:03:54 +0100
Subject: [PATCH 6/7] Only set the animation speed when the panel is hovered to
 prevent the animation triggering on page load.

---
 resources/js/components/ui/Publish/Sections.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index f10da31212..86afc52066 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -93,7 +93,11 @@ function toggleSection(section) {
 
 <style scoped>
 [class*="publish-section-collapsible"] {
-    --speed: 250ms;
+    --speed: 0ms;
+    /* Only setting the animation speed when the panel is hovered prevents the animation triggering on page load. */
+    [data-ui-panel]:hover & {
+        --speed: 250ms;
+    }
     --timing: ease;
 
     @media (prefers-reduced-motion: reduce) {

From 65e890cc4d1417546a8cf92f37b5b3c8cecb3bb7 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 15 May 2026 14:13:29 +0100
Subject: [PATCH 7/7] Improve animation smoothness, so the panel doesn't "flash
 in" when expanded

---
 resources/js/components/ui/Publish/Sections.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/ui/Publish/Sections.vue b/resources/js/components/ui/Publish/Sections.vue
index 86afc52066..895e92105b 100644
--- a/resources/js/components/ui/Publish/Sections.vue
+++ b/resources/js/components/ui/Publish/Sections.vue
@@ -115,9 +115,7 @@ function toggleSection(section) {
 }
 
 .publish-section-collapsible--expanded .publish-section-collapsible__inner {
-    animation:
-        make-visible 0ms 0ms forwards,
-        unset-overflow 0ms var(--speed) forwards;
+    animation: calc(var(--speed) * 2) var(--timing) section-fade-in both;
     overflow: clip;
 }
 
@@ -128,10 +126,9 @@ function toggleSection(section) {
     overflow: clip;
 }
 
-@keyframes make-visible   { from { visibility: hidden; } to { visibility: visible; } }
+@keyframes section-fade-in { from { opacity: 0%; } to { opacity: 100%; } }
 @keyframes make-invisible { from { visibility: visible; } to { visibility: hidden; } }
 @keyframes collapse-rows  { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
 @keyframes expand-rows    { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
 @keyframes clip-overflow  { to { overflow: clip; } }
-@keyframes unset-overflow { to { overflow: visible; } }
 </style>