From cf183a1e9719aa65c14420b51769cdef2ff484eb Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 10:04:58 +0000
Subject: [PATCH 01/24] wip

---
 resources/js/components/ui/Modal/Modal.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index a41225154e8..27bbe17dfc3 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -42,16 +42,15 @@ const modalClasses = cva({
     ],
 })({});
 
-const hasModalTitleComponent = hasComponent('ModalTitle');
-const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
-
-const instance = getCurrentInstance();
-
 const modal = ref(null);
 const mounted = ref(false);
 const visible = ref(false);
 const escBinding = ref(null);
 
+const instance = getCurrentInstance();
+const hasModalTitleComponent = hasComponent('ModalTitle');
+const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
+
 const portal = computed(() => modal.value ? `#portal-target-${modal.value.id}` : null);
 
 function open() {
@@ -61,9 +60,7 @@ function open() {
 
     nextTick(() => {
         mounted.value = true;
-
         nextTick(() => visible.value = true);
-
 	    updateOpen(true);
     });
 }

From d0cc323444f16115d460875db6db239fb0f47352 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 10:19:56 +0000
Subject: [PATCH 02/24] convert stack to composition api

---
 resources/js/components/ui/Stack/Stack.vue | 296 ++++++++++-----------
 1 file changed, 136 insertions(+), 160 deletions(-)

diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 7afa41e40f5..a7685a9a1fb 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -1,3 +1,138 @@
+<script setup>
+import {ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance} from 'vue';
+import { stacks, events, keys, config } from '@/api';
+import wait from '@/util/wait.js';
+
+const emit = defineEmits(['closed', 'opened']);
+
+const props = defineProps({
+	// todo: add open state
+
+	// todo: don't require a name?
+	name: { type: String, required: true },
+
+	// todo: should this exist on the Modal too?
+	beforeClose: { type: Function, default: () => true },
+
+	// todo: should these not be variants?
+	narrow: { type: Boolean },
+	half: { type: Boolean },
+	full: { type: Boolean },
+});
+
+const stack = ref(null);
+const mounted = ref(false);
+const visible = ref(false);
+const isHovering = ref(false);
+const escBinding = ref(null);
+const windowInnerWidth = ref(window.innerWidth);
+
+const instance = getCurrentInstance();
+const portal = computed(() => stack.value ? `#portal-target-${stack.value.id}` : null);
+const depth = computed(() => stack.value.data.depth);
+const isTopStack = computed(() => stacks.count() === depth.value);
+
+const offset = computed(() => {
+	if (isTopStack.value && props.narrow) {
+		return windowInnerWidth.value - 450;
+	} else if (isTopStack.value && props.half) {
+		return windowInnerWidth.value / 2;
+	}
+
+	// max of 200px, min of 80px
+	return Math.max(450 / (stacks.count() + 1), 80);
+});
+
+const leftOffset = computed(() => {
+	if (props.full) {
+		return 0;
+	}
+
+	if (isTopStack.value && (props.narrow || props.half)) {
+		return offset.value;
+	}
+
+	return offset.value * depth.value;
+});
+
+const hasChild = computed(() => stacks.count() > depth.value);
+const direction = computed(() => config.get('direction', 'ltr'));
+
+const clickedHitArea = () => {
+	if (!visible.value) {
+		return;
+	}
+	events.$emit(`stacks.hit-area-clicked`, depth.value - 1);
+	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
+};
+
+const mouseEnterHitArea = () => {
+	if (!visible.value) {
+		return;
+	}
+	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseenter`);
+};
+
+const mouseOutHitArea = () => {
+	if (!visible.value) {
+		return;
+	}
+	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
+};
+
+const runCloseCallback = () => {
+	const shouldClose = props.beforeClose();
+
+	if (!shouldClose) return false;
+
+	close();
+
+	return true;
+};
+
+const close = () => {
+	visible.value = false;
+	wait(300).then(() => {
+		mounted.value = false;
+		emit('closed');
+	});
+};
+
+const handleResize = () => {
+	windowInnerWidth.value = window.innerWidth;
+};
+
+onMounted(() => {
+	stack.value = stacks.add(instance.proxy);
+
+	events.$on(`stacks.${depth.value}.hit-area-mouseenter`, () => (isHovering.value = true));
+	events.$on(`stacks.${depth.value}.hit-area-mouseout`, () => (isHovering.value = false));
+	escBinding.value = keys.bindGlobal('esc', close);
+
+	window.addEventListener('resize', handleResize);
+
+	mounted.value = true;
+	nextTick(() => {
+		visible.value = true;
+		emit('opened');
+	});
+});
+
+onUnmounted(() => {
+	stack.value.destroy();
+	events.$off(`stacks.${depth.value}.hit-area-mouseenter`);
+	events.$off(`stacks.${depth.value}.hit-area-mouseout`);
+	escBinding.value.destroy();
+
+	window.removeEventListener('resize', handleResize);
+});
+
+defineExpose({
+	close,
+	runCloseCallback,
+});
+</script>
+
 <template>
     <teleport :to="portal" :order="depth" v-if="mounted">
         <div class="vue-portal-target stack">
@@ -37,163 +172,4 @@
             </div>
         </div>
     </teleport>
-</template>
-
-<script>
-export default {
-    emits: ['closed', 'opened'],
-
-    props: {
-        name: {
-            type: String,
-            required: true,
-        },
-        beforeClose: {
-            type: Function,
-            default: () => true,
-        },
-        narrow: {
-            type: Boolean,
-        },
-        half: {
-            type: Boolean,
-        },
-        full: {
-            type: Boolean,
-        },
-    },
-
-    data() {
-        return {
-            stack: null,
-            mounted: false,
-            visible: false,
-            isHovering: false,
-            escBinding: null,
-            windowInnerWidth: window.innerWidth,
-        };
-    },
-
-    computed: {
-        portal() {
-            return this.stack ? `#portal-target-${this.stack.id}` : null;
-        },
-
-        depth() {
-            return this.stack.data.depth;
-        },
-
-        id() {
-            return `${this.name}-${this.$.uid}`;
-        },
-
-        offset() {
-            if (this.isTopStack && this.narrow) {
-                return this.windowInnerWidth - 450;
-            } else if (this.isTopStack && this.half) {
-                return this.windowInnerWidth / 2;
-            }
-
-            // max of 200px, min of 80px
-            return Math.max(450 / (this.$stacks.count() + 1), 80);
-        },
-
-        leftOffset() {
-            if (this.full) {
-                return 0;
-            }
-
-            if (this.isTopStack && (this.narrow || this.half)) {
-                return this.offset;
-            }
-
-            return this.offset * this.depth;
-        },
-
-        hasChild() {
-            return this.$stacks.count() > this.depth;
-        },
-
-        isTopStack() {
-            return this.$stacks.count() === this.depth;
-        },
-
-        direction() {
-            return this.$config.get('direction', 'ltr');
-        },
-    },
-
-    created() {
-        this.stack = this.$stacks.add(this);
-
-        this.$events.$on(`stacks.${this.depth}.hit-area-mouseenter`, () => (this.isHovering = true));
-        this.$events.$on(`stacks.${this.depth}.hit-area-mouseout`, () => (this.isHovering = false));
-        this.escBinding = this.$keys.bindGlobal('esc', this.close);
-
-        window.addEventListener('resize', this.handleResize);
-    },
-
-    unmounted() {
-        this.stack.destroy();
-        this.$events.$off(`stacks.${this.depth}.hit-area-mouseenter`);
-        this.$events.$off(`stacks.${this.depth}.hit-area-mouseout`);
-        this.escBinding.destroy();
-
-        window.removeEventListener('resize', this.handleResize);
-    },
-
-    methods: {
-        clickedHitArea() {
-            if (!this.visible) {
-                return;
-            }
-            this.$events.$emit(`stacks.hit-area-clicked`, this.depth - 1);
-            this.$events.$emit(`stacks.${this.depth - 1}.hit-area-mouseout`);
-        },
-
-        mouseEnterHitArea() {
-            if (!this.visible) {
-                return;
-            }
-            this.$events.$emit(`stacks.${this.depth - 1}.hit-area-mouseenter`);
-        },
-
-        mouseOutHitArea() {
-            if (!this.visible) {
-                return;
-            }
-            this.$events.$emit(`stacks.${this.depth - 1}.hit-area-mouseout`);
-        },
-
-        runCloseCallback() {
-            const shouldClose = this.beforeClose();
-
-            if (!shouldClose) return false;
-
-            this.close();
-
-            return true;
-        },
-
-        close() {
-            this.visible = false;
-            this.$wait(300).then(() => {
-                this.mounted = false;
-                this.$emit('closed');
-            });
-        },
-
-        handleResize() {
-            this.windowInnerWidth = window.innerWidth;
-        },
-    },
-
-    mounted() {
-        this.mounted = true;
-        this.$nextTick(() => {
-            this.visible = true;
-            this.$emit('opened');
-        });
-    },
-};
-</script>
+</template>
\ No newline at end of file

From 0958c666ede0688a558495e5c85683475f7a3d8a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 11:09:16 +0000
Subject: [PATCH 03/24] wip

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

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 27bbe17dfc3..5ccc873b5f3 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -50,7 +50,6 @@ const escBinding = ref(null);
 const instance = getCurrentInstance();
 const hasModalTitleComponent = hasComponent('ModalTitle');
 const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
-
 const portal = computed(() => modal.value ? `#portal-target-${modal.value.id}` : null);
 
 function open() {
@@ -81,8 +80,6 @@ function dismiss() {
     close();
 }
 
-provide('closeModal', close);
-
 function updateOpen(value) {
     if (isUsingOpenProp.value) {
         emit('update:open', value);
@@ -107,6 +104,8 @@ defineExpose({
     open,
     close,
 });
+
+provide('closeModal', close);
 </script>
 
 <template>

From 2b660db7681ac1056ba7c3701505400369065f8b Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 11:09:40 +0000
Subject: [PATCH 04/24] refactor open states

---
 .../js/components/portals/PortalTargets.vue   |   2 +-
 resources/js/components/ui/Stack/Stack.vue    | 114 ++++++++++++------
 2 files changed, 78 insertions(+), 38 deletions(-)

diff --git a/resources/js/components/portals/PortalTargets.vue b/resources/js/components/portals/PortalTargets.vue
index 341aaaa6f4b..c67ba390e10 100644
--- a/resources/js/components/portals/PortalTargets.vue
+++ b/resources/js/components/portals/PortalTargets.vue
@@ -31,7 +31,7 @@ export default {
         initStacks() {
             this.$events.$on('stacks.hit-area-clicked', (depth) => {
                 for (let count = this.$stacks.count(); count > depth; count--) {
-                    if (!this.$stacks.stacks()[count - 1].data.vm.runCloseCallback()) {
+                    if (!this.$stacks.stacks()[count - 1].data.vm?.$.exposed.runCloseCallback()) {
                         return;
                     }
                 }
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index a7685a9a1fb..14d19d07793 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -1,17 +1,31 @@
 <script setup>
-import {ref, computed, onMounted, onUnmounted, nextTick, getCurrentInstance} from 'vue';
+import {
+	ref,
+	computed,
+	onMounted,
+	onUnmounted,
+	nextTick,
+	getCurrentInstance,
+	useSlots,
+	watch,
+	onBeforeUnmount, provide
+} from 'vue';
 import { stacks, events, keys, config } from '@/api';
 import wait from '@/util/wait.js';
+import {hasComponent} from "@/composables/has-component.js";
 
-const emit = defineEmits(['closed', 'opened']);
+// todo: use CVA for this component instead of CSS classes
+
+const slots = useSlots();
+const emit = defineEmits(['update:open']);
 
 const props = defineProps({
-	// todo: add open state
+	// title: { type: String, default: '' },
+	// icon: { type: [String, null], default: null },
 
-	// todo: don't require a name?
-	name: { type: String, required: true },
+	open: { type: Boolean, default: false },
 
-	// todo: should this exist on the Modal too?
+	// todo: refactor where we use this
 	beforeClose: { type: Function, default: () => true },
 
 	// todo: should these not be variants?
@@ -28,6 +42,8 @@ const escBinding = ref(null);
 const windowInnerWidth = ref(window.innerWidth);
 
 const instance = getCurrentInstance();
+// const hasModalTitleComponent = hasComponent('ModalTitle');
+const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
 const portal = computed(() => stack.value ? `#portal-target-${stack.value.id}` : null);
 const depth = computed(() => stack.value.data.depth);
 const isTopStack = computed(() => stacks.count() === depth.value);
@@ -59,27 +75,26 @@ const hasChild = computed(() => stacks.count() > depth.value);
 const direction = computed(() => config.get('direction', 'ltr'));
 
 const clickedHitArea = () => {
-	if (!visible.value) {
-		return;
-	}
+	if (!visible.value) return;
+
 	events.$emit(`stacks.hit-area-clicked`, depth.value - 1);
 	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
 };
 
 const mouseEnterHitArea = () => {
-	if (!visible.value) {
-		return;
-	}
+	if (!visible.value) return;
+
 	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseenter`);
 };
 
 const mouseOutHitArea = () => {
-	if (!visible.value) {
-		return;
-	}
+	if (!visible.value) return;
+
 	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
 };
 
+const windowResized = () => windowInnerWidth.value = window.innerWidth;
+
 const runCloseCallback = () => {
 	const shouldClose = props.beforeClose();
 
@@ -90,50 +105,75 @@ const runCloseCallback = () => {
 	return true;
 };
 
-const close = () => {
-	visible.value = false;
-	wait(300).then(() => {
-		mounted.value = false;
-		emit('closed');
-	});
-};
-
-const handleResize = () => {
-	windowInnerWidth.value = window.innerWidth;
-};
-
-onMounted(() => {
-	stack.value = stacks.add(instance.proxy);
+function open() {
+	if (!stack.value) stack.value = stacks.add(instance.proxy);
 
 	events.$on(`stacks.${depth.value}.hit-area-mouseenter`, () => (isHovering.value = true));
 	events.$on(`stacks.${depth.value}.hit-area-mouseout`, () => (isHovering.value = false));
+
 	escBinding.value = keys.bindGlobal('esc', close);
 
-	window.addEventListener('resize', handleResize);
+	window.addEventListener('resize', windowResized);
 
-	mounted.value = true;
 	nextTick(() => {
-		visible.value = true;
-		emit('opened');
+		mounted.value = true;
+		nextTick(() => visible.value = true);
+		updateOpen(true);
 	});
+}
+
+function close() {
+	visible.value = false;
+
+	events.$off(`stacks.${depth.value}.hit-area-mouseenter`);
+	events.$off(`stacks.${depth.value}.hit-area-mouseout`);
+
+	window.removeEventListener('resize', windowResized);
+
+	wait(300).then(() => {
+		mounted.value = false;
+		updateOpen(false);
+	});
+}
+
+function updateOpen(value) {
+	if (isUsingOpenProp.value) {
+		emit('update:open', value);
+	}
+}
+
+watch(
+	() => props.open,
+	(value) => value ? open() : close(),
+);
+
+onMounted(() => {
+	if (props.open) open();
 });
 
-onUnmounted(() => {
-	stack.value.destroy();
+onBeforeUnmount(() => {
 	events.$off(`stacks.${depth.value}.hit-area-mouseenter`);
 	events.$off(`stacks.${depth.value}.hit-area-mouseout`);
-	escBinding.value.destroy();
 
-	window.removeEventListener('resize', handleResize);
+	window.removeEventListener('resize', windowResized);
+
+	stack.value?.destroy();
+	escBinding.value?.destroy();
 });
 
 defineExpose({
+	open,
 	close,
 	runCloseCallback,
 });
+
+provide('closeStack', close);
 </script>
 
 <template>
+	<div v-if="slots.trigger" @click="open">
+		<slot name="trigger" />
+	</div>
     <teleport :to="portal" :order="depth" v-if="mounted">
         <div class="vue-portal-target stack">
             <div

From 1066aacbf326c350e780c77923f3e50e664ed108 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 11:33:53 +0000
Subject: [PATCH 05/24] add beforeClose prop for modals

---
 resources/js/components/ui/Modal/Modal.vue | 13 +++++++++++++
 resources/js/components/ui/Stack/Stack.vue | 22 ++++++++++------------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 5ccc873b5f3..5903ba9c3fc 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -20,6 +20,7 @@ const props = defineProps({
     title: { type: String, default: '' },
     icon: { type: [String, null], default: null },
     open: { type: Boolean, default: false },
+	beforeClose: { type: Function, default: () => true },
     dismissible: { type: Boolean, default: true },
 });
 
@@ -75,6 +76,7 @@ function close() {
 
 function dismiss() {
     if (!props.dismissible) return;
+	if (!runCloseCallback()) return;
 
     emit('dismissed');
     close();
@@ -86,6 +88,16 @@ function updateOpen(value) {
     }
 }
 
+function runCloseCallback() {
+	const shouldClose = props.beforeClose();
+
+	if (!shouldClose) return false;
+
+	close();
+
+	return true;
+}
+
 watch(
     () => props.open,
     (value) => value ? open() : close(),
@@ -103,6 +115,7 @@ onBeforeUnmount(() => {
 defineExpose({
     open,
     close,
+	runCloseCallback,
 });
 
 provide('closeModal', close);
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 14d19d07793..064cf19da71 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -24,8 +24,6 @@ const props = defineProps({
 	// icon: { type: [String, null], default: null },
 
 	open: { type: Boolean, default: false },
-
-	// todo: refactor where we use this
 	beforeClose: { type: Function, default: () => true },
 
 	// todo: should these not be variants?
@@ -95,16 +93,6 @@ const mouseOutHitArea = () => {
 
 const windowResized = () => windowInnerWidth.value = window.innerWidth;
 
-const runCloseCallback = () => {
-	const shouldClose = props.beforeClose();
-
-	if (!shouldClose) return false;
-
-	close();
-
-	return true;
-};
-
 function open() {
 	if (!stack.value) stack.value = stacks.add(instance.proxy);
 
@@ -142,6 +130,16 @@ function updateOpen(value) {
 	}
 }
 
+function runCloseCallback() {
+	const shouldClose = props.beforeClose();
+
+	if (!shouldClose) return false;
+
+	close();
+
+	return true;
+}
+
 watch(
 	() => props.open,
 	(value) => value ? open() : close(),

From b816f60bcc9d51f2d76686db524edae48d6967d6 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 11:40:24 +0000
Subject: [PATCH 06/24] Move the stack's close callback logic into the stack
 component

---
 .../js/components/portals/PortalTargets.vue   | 22 -------------------
 resources/js/components/ui/Stack/Stack.vue    |  2 +-
 2 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/resources/js/components/portals/PortalTargets.vue b/resources/js/components/portals/PortalTargets.vue
index c67ba390e10..a7adbcad6c2 100644
--- a/resources/js/components/portals/PortalTargets.vue
+++ b/resources/js/components/portals/PortalTargets.vue
@@ -20,27 +20,5 @@ export default {
             return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
         },
     },
-
-    watch: {
-        hasStacks(hasStacks) {
-            hasStacks ? this.initStacks() : this.destroyStacks();
-        },
-    },
-
-    methods: {
-        initStacks() {
-            this.$events.$on('stacks.hit-area-clicked', (depth) => {
-                for (let count = this.$stacks.count(); count > depth; count--) {
-                    if (!this.$stacks.stacks()[count - 1].data.vm?.$.exposed.runCloseCallback()) {
-                        return;
-                    }
-                }
-            });
-        },
-
-        destroyStacks() {
-            this.$events.$off('stacks.hit-area-clicked');
-        },
-    },
 };
 </script>
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 064cf19da71..9eaf7ef8615 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -74,8 +74,8 @@ const direction = computed(() => config.get('direction', 'ltr'));
 
 const clickedHitArea = () => {
 	if (!visible.value) return;
+	if (!runCloseCallback()) return;
 
-	events.$emit(`stacks.hit-area-clicked`, depth.value - 1);
 	events.$emit(`stacks.${depth.value - 1}.hit-area-mouseout`);
 };
 

From 1ffe942a609e35f4d60b851a89e00dc2211cbf3c Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 11:46:32 +0000
Subject: [PATCH 07/24] wip

---
 resources/js/components/ui/Stack/Stack.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 9eaf7ef8615..9c3e9e4b654 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -14,8 +14,6 @@ import { stacks, events, keys, config } from '@/api';
 import wait from '@/util/wait.js';
 import {hasComponent} from "@/composables/has-component.js";
 
-// todo: use CVA for this component instead of CSS classes
-
 const slots = useSlots();
 const emit = defineEmits(['update:open']);
 

From 71c48535e41c68e60aea872875d2c4d664ed44ae Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 12:40:35 +0000
Subject: [PATCH 08/24] only emit an event if the state actually changes

---
 resources/js/components/ui/Modal/Modal.vue | 2 +-
 resources/js/components/ui/Stack/Stack.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 5903ba9c3fc..40f49988c00 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -83,7 +83,7 @@ function dismiss() {
 }
 
 function updateOpen(value) {
-    if (isUsingOpenProp.value) {
+	if (isUsingOpenProp.value && props.open !== value) {
         emit('update:open', value);
     }
 }
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 9c3e9e4b654..c3ab453f21b 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -123,7 +123,7 @@ function close() {
 }
 
 function updateOpen(value) {
-	if (isUsingOpenProp.value) {
+	if (isUsingOpenProp.value && props.open !== value) {
 		emit('update:open', value);
 	}
 }

From 24e8c5bc9ebf217fdd9c56797dc0571e03c94b08 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 12:41:06 +0000
Subject: [PATCH 09/24] replace `close` slot prop with StackClose component

---
 packages/cms/src/ui.js                     |  1 +
 resources/js/bootstrap/cms/ui.js           |  1 +
 resources/js/components/ui/Stack/Close.vue | 14 ++++++++++++++
 resources/js/components/ui/Stack/Stack.vue |  2 +-
 resources/js/components/ui/index.js        |  1 +
 resources/js/tests/Package.test.js         |  1 +
 6 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/ui/Stack/Close.vue

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 79cc9f3dab0..709342e9bed 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -96,6 +96,7 @@ export const {
     Switch,
     TabContent,
     Stack,
+    StackClose,
     Table,
     TableCell,
     TableColumn,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index a7f761a726a..6ba338cd020 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -96,6 +96,7 @@ export {
     Switch,
     TabContent,
     Stack,
+    StackClose,
     Table,
     TableCell,
     TableColumn,
diff --git a/resources/js/components/ui/Stack/Close.vue b/resources/js/components/ui/Stack/Close.vue
new file mode 100644
index 00000000000..1dca2373dae
--- /dev/null
+++ b/resources/js/components/ui/Stack/Close.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { inject } from 'vue';
+import Button from '../Button/Button.vue';
+
+const closeStack = inject('closeStack');
+</script>
+
+<template>
+	<div data-ui-modal-close @click="closeStack">
+		<slot>
+			<Button variant="ghost" size="sm" icon="x" class="absolute top-3 right-2" />
+		</slot>
+	</div>
+</template>
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index c3ab453f21b..e4f6b53960d 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -202,7 +202,7 @@ provide('closeStack', close);
                             { '-translate-x-4 rtl:translate-x-4': isHovering }
                         ]"
                     >
-                        <slot name="default" :depth="depth" :close="close" />
+                        <slot :depth="depth" />
                     </div>
                 </transition>
             </div>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index b970d3b6a21..9b96ef2ad02 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -65,6 +65,7 @@ export { default as Subheading } from './Subheading.vue';
 export { default as Switch } from './Switch.vue';
 export { default as TabContent } from './Tabs/Content.vue';
 export { default as Stack } from './Stack/Stack.vue';
+export { default as StackClose } from './Stack/Close.vue';
 export { default as Table } from './Table/Table.vue';
 export { default as TableCell } from './Table/Cell.vue';
 export { default as TableColumn } from './Table/Column.vue';
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 4ad26cf7b84..33c98b0868e 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -175,6 +175,7 @@ it('exports ui', async () => {
         'TabList',
         'TabTrigger',
         'Stack',
+        'StackClose',
         'Table',
         'TableCell',
         'TableColumn',

From cf2b0d2f184f98bac51bfbc5aa6398ce4eabbb5d Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 12:51:32 +0000
Subject: [PATCH 10/24] add `opened` event to modals & stacks to allow parent
 components to focus inputs

---
 resources/js/components/ui/Modal/Modal.vue | 8 ++++++--
 resources/js/components/ui/Stack/Stack.vue | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 40f49988c00..ebe180c4a59 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -13,7 +13,7 @@ defineOptions({
 
 const attrs = useAttrs();
 const slots = useSlots();
-const emit = defineEmits(['update:open', 'dismissed']);
+const emit = defineEmits(['update:open', 'opened', 'dismissed']);
 
 const props = defineProps({
     blur: { type: Boolean, default: true },
@@ -60,8 +60,12 @@ function open() {
 
     nextTick(() => {
         mounted.value = true;
-        nextTick(() => visible.value = true);
 	    updateOpen(true);
+
+	    nextTick(() => {
+		    visible.value = true;
+			emit('opened');
+	    });
     });
 }
 
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index e4f6b53960d..53940c70a81 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -15,7 +15,7 @@ import wait from '@/util/wait.js';
 import {hasComponent} from "@/composables/has-component.js";
 
 const slots = useSlots();
-const emit = defineEmits(['update:open']);
+const emit = defineEmits(['update:open', 'opened']);
 
 const props = defineProps({
 	// title: { type: String, default: '' },
@@ -103,8 +103,12 @@ function open() {
 
 	nextTick(() => {
 		mounted.value = true;
-		nextTick(() => visible.value = true);
 		updateOpen(true);
+
+		nextTick(() => {
+			visible.value = true;
+			emit('opened');
+		});
 	});
 }
 

From 7fe29f52893692b2b1361a02308a6bbdcda4943a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 12:51:45 +0000
Subject: [PATCH 11/24] wip

---
 resources/js/components/ui/Stack/Stack.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 53940c70a81..5d94a8323b6 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -41,7 +41,7 @@ const instance = getCurrentInstance();
 // const hasModalTitleComponent = hasComponent('ModalTitle');
 const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
 const portal = computed(() => stack.value ? `#portal-target-${stack.value.id}` : null);
-const depth = computed(() => stack.value.data.depth);
+const depth = computed(() => stack.value?.data.depth);
 const isTopStack = computed(() => stacks.count() === depth.value);
 
 const offset = computed(() => {

From dbfc4fcf30d13ddceb10f4aabe2eb9518ddbd9bb Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 14:39:42 +0000
Subject: [PATCH 12/24] update stack usage

---
 .../js/components/assets/Editor/Editor.vue    | 10 ++++---
 resources/js/components/blueprints/Fields.vue | 26 +++++++------------
 .../js/components/blueprints/ImportField.vue  |  2 +-
 .../js/components/blueprints/LinkFields.vue   | 16 +++++++-----
 .../js/components/blueprints/RegularField.vue |  7 ++---
 .../js/components/blueprints/Section.vue      |  4 +--
 resources/js/components/blueprints/Tab.vue    | 16 +++++++-----
 .../DeleteLocalizationConfirmation.vue        |  2 +-
 .../js/components/entries/PublishActions.vue  | 12 +++++----
 .../js/components/entries/PublishForm.vue     | 14 ++++------
 .../fieldtypes/assets/AssetsFieldtype.vue     | 18 +++++--------
 .../js/components/fieldtypes/bard/Image.vue   | 16 +++++-------
 .../fieldtypes/bard/LinkToolbar.vue           | 13 ++++------
 .../fieldtypes/markdown/MarkdownFieldtype.vue | 25 ++++++++++--------
 .../inputs/relationship/InlinePublishForm.vue | 10 ++++---
 .../inputs/relationship/RelationshipInput.vue |  9 ++++---
 resources/js/components/nav/ItemEditor.vue    |  7 ++---
 resources/js/components/nav/SectionEditor.vue | 12 ++++++---
 .../components/revision-history/History.vue   |  9 +++++--
 .../js/components/structures/PageEditor.vue   | 22 +++++++++++-----
 .../two-factor/RecoveryCodesModal.vue         |  2 +-
 resources/js/components/two-factor/Setup.vue  |  2 +-
 .../js/components/ui/Listing/Filters.vue      |  6 +++--
 23 files changed, 137 insertions(+), 123 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 5aa9cfd552e..4f31ea7055f 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <ui-stack name="asset-editor" :before-close="shouldClose" :full="true" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack full open ref="stack" :before-close="shouldClose" @update:open="$emit('closed')">
         <div
             class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-dark-800"
             :class="isImage ? 'is-image' : 'is-file'"
@@ -22,7 +22,7 @@
                             {{ asset.path }}
                         </span>
                     </button>
-                    <ui-button variant="ghost" icon="x" class="absolute top-1.5 end-1.5" round @click="confirmClose(close)" :aria-label="__('Close Editor')" />
+                    <ui-button variant="ghost" icon="x" class="absolute top-1.5 end-1.5" round @click="confirmClose()" :aria-label="__('Close Editor')" />
                 </header>
 
                 <div class="flex flex-1 grow flex-col overflow-auto md:flex-row md:justify-between">
@@ -174,7 +174,7 @@
             @cancel="closingWithChanges = false"
         />
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
@@ -188,6 +188,7 @@ import {
     PublishContainer,
     PublishTabs,
     Icon,
+	Stack,
 } from '@ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 
@@ -204,6 +205,7 @@ export default {
         PublishContainer,
         PublishTabs,
         Icon,
+	    Stack,
     },
 
     props: {
@@ -435,7 +437,7 @@ export default {
         },
 
         confirmClose(close) {
-            if (this.shouldClose()) close();
+            if (this.shouldClose()) this.$refs.stack.close();
         },
 
         confirmCloseWithChanges() {
diff --git a/resources/js/components/blueprints/Fields.vue b/resources/js/components/blueprints/Fields.vue
index c5c0be5a30f..19a00a36e23 100644
--- a/resources/js/components/blueprints/Fields.vue
+++ b/resources/js/components/blueprints/Fields.vue
@@ -33,21 +33,11 @@
             <ui-button icon="add-circle" :text="__('Create Field')" @click="createField" />
         </div>
 
-        <ui-stack
-            name="fieldtype-selector"
-            v-if="isSelectingNewFieldtype"
-            @closed="isSelectingNewFieldtype = false"
-            v-slot="{ close }"
-        >
-            <fieldtype-selector @closed="close" @selected="fieldtypeSelected" />
-        </ui-stack>
-
-        <ui-stack
-            name="field-settings"
-            v-if="pendingCreatedField != null"
-            @closed="pendingCreatedField = null"
-            v-slot="{ close }"
-        >
+        <Stack v-model:open="isSelectingNewFieldtype">
+            <fieldtype-selector @closed="isSelectingNewFieldtype = false" @selected="fieldtypeSelected" />
+        </Stack>
+
+        <Stack :open="pendingCreatedField != null" @update:open="pendingCreatedField = null">
             <field-settings
                 ref="settings"
                 :type="pendingCreatedField.config.type"
@@ -57,9 +47,9 @@
                 :suggestable-condition-fields="suggestableConditionFields"
                 :is-inside-set="isInsideSet"
                 @committed="fieldCreated"
-                @closed="close"
+                @closed="pendingCreatedField = null"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
@@ -71,6 +61,7 @@ import LinkFields from './LinkFields.vue';
 import FieldtypeSelector from '../fields/FieldtypeSelector.vue';
 import FieldSettings from '../fields/Settings.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
+import { Stack } from '@/components/ui';
 
 export default {
     mixins: [CanDefineLocalizable],
@@ -81,6 +72,7 @@ export default {
         LinkFields,
         FieldtypeSelector,
         FieldSettings,
+	    Stack,
     },
 
     props: {
diff --git a/resources/js/components/blueprints/ImportField.vue b/resources/js/components/blueprints/ImportField.vue
index 3fa62520e5e..378f519718b 100644
--- a/resources/js/components/blueprints/ImportField.vue
+++ b/resources/js/components/blueprints/ImportField.vue
@@ -16,7 +16,7 @@
                         </div>
                         <div class="flex items-center gap-2">
                             <ui-button size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
-                            <ui-stack name="field-settings" v-if="isEditing" @closed="editorClosed">
+                            <ui-stack :open="isEditing" @update:open="editorClosed">
                                 <field-settings
                                     ref="settings"
                                     :id="field._id"
diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index 7b8cd480f15..ac56daaf66e 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -1,12 +1,16 @@
 <template>
     <div>
-        <ui-button icon="link" @click="open = true" :text="__('Link Existing')" />
+        <Stack narrow v-model:open="open">
+	        <template #trigger>
+		        <Button icon="link" :text="__('Link Existing')" />
+	        </template>
 
-        <ui-stack narrow v-if="open" @closed="open = false" name="field-linker" v-slot="{ close }">
             <div class="h-full overflow-auto bg-white dark:bg-gray-800 p-3 rounded-l-xl">
                 <header class="flex items-center justify-between pl-3">
                     <Heading :text="__('Link Fields')" size="lg" icon="fieldsets" />
-                    <Button type="button" icon="x" variant="subtle" @click="close" />
+	                <StackClose>
+		                <Button type="button" icon="x" variant="subtle" />
+	                </StackClose>
                 </header>
 
                 <div class="flex-1 overflow-auto px-3 py-4">
@@ -90,17 +94,17 @@
                     />
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
 <script>
 import uniqid from 'uniqid';
-import { Combobox, Button, Input, Heading, Field } from '@/components/ui';
+import { Combobox, Button, Input, Heading, Field, Stack, StackClose } from '@/components/ui';
 import { usePage } from '@inertiajs/vue3';
 
 export default {
-    components: { Heading, Combobox, Button, Input, Field },
+    components: { Heading, Combobox, Button, Input, Field, Stack, StackClose },
 
     props: {
         excludeFieldset: String,
diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index d5406ab8b31..994879c85d5 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -31,7 +31,7 @@
                         <ui-button inset size="sm" icon="trash" variant="subtle" @click.prevent="$emit('deleted')" v-tooltip="__('Remove')" />
                     </div>
 
-                    <ui-stack name="field-settings" v-if="isEditing" @closed="editorClosed">
+                    <Stack :open="isEditing" @update:open="editorClosed">
                         <field-settings
                             ref="settings"
                             :id="field._id"
@@ -45,7 +45,7 @@
                             @committed="settingsUpdated"
                             @closed="editorClosed"
                         />
-                    </ui-stack>
+                    </Stack>
                 </div>
             </div>
         </div>
@@ -59,7 +59,7 @@ import WidthSelector from '../fields/WidthSelector.vue';
 import CanDefineLocalizable from '../fields/CanDefineLocalizable';
 import titleize from '../../util/titleize';
 import deslugify from '../../util/deslugify';
-import { Icon } from '@/components/ui';
+import { Icon, Stack } from '@/components/ui';
 
 export default {
     mixins: [Field, CanDefineLocalizable],
@@ -68,6 +68,7 @@ export default {
         FieldSettings,
         WidthSelector,
         Icon,
+	    Stack,
     },
 
     props: ['suggestableConditionFields'],
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index 5ce43a539d7..a969ba2df36 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -36,9 +36,9 @@
 
         <ui-stack
             narrow
-            v-if="editingSection"
+            :open="editingSection !== false"
+            @update:open="editCancelled"
             @opened="() => $nextTick(() => $refs.displayInput.focus())"
-            @closed="editCancelled"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 dark:bg-dark-800">
                 <header class="py-2 -mx-6 px-6 border-b border-gray-200 dark:border-gray-700 mb-5">
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index f00b9819fc2..4c94719db82 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -24,11 +24,11 @@
             </DropdownMenu>
         </Dropdown>
 
-        <ui-stack
+        <Stack
             narrow
-            v-if="editing"
+            :open="editing"
             @opened="() => $nextTick(() => $refs.title.focus())"
-            @closed="editCancelled"
+            @update:open="editCancelled"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 dark:bg-dark-800">
                 <header class="py-2 -mx-6 px-6 border-b border-gray-200 dark:border-gray-700 mb-5">
@@ -36,7 +36,9 @@
                         <ui-heading size="lg">
                             {{ editText }}
                         </ui-heading>
-                        <ui-button icon="x" variant="ghost" class="-me-2" @click="editCancelled" />
+	                    <StackClose>
+                            <ui-button icon="x" variant="ghost" class="-me-2" />
+	                    </StackClose>
                     </div>
                 </header>
                 <div class="space-y-6">
@@ -75,15 +77,15 @@
                     </div>
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
     </TabTrigger>
 </template>
 
 <script>
-import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input } from '@/components/ui';
+import { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose } from '@/components/ui';
 
 export default {
-    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input },
+    components: { TabTrigger, Dropdown, DropdownMenu, DropdownItem, Icon, Field, Input, Stack, StackClose },
 
     props: {
         tab: {
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 3bbbc7be192..9a9dd77d44f 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="__('Delete')" :open="true" @update:open="$emit('cancel')">
+    <Modal :title="__('Delete')" open @update:open="$emit('cancel')">
         <p>Are you sure you want to delete this?</p>
 
         <Field
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 4751ed45417..b2e18d1e1cb 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -1,11 +1,13 @@
 <template>
-    <ui-stack narrow name="publish-options" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack narrow open @update:open="$emit('closed')">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <header
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
             >
                 <Heading size="lg">{{ __('Publish') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
+	            <StackClose>
+                    <Button icon="x" variant="ghost" class="-me-2" />
+	            </StackClose>
             </header>
 
             <div class="flex-1 overflow-auto">
@@ -45,14 +47,14 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading } from '@/components/ui';
+import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack, StackClose } from '@/components/ui';
 
 export default {
-    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading },
+    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack, StackClose },
 
     props: {
         actions: Object,
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index 941bd98c96a..ea2964b03b4 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -192,21 +192,15 @@
             </LivePreview>
         </PublishContainer>
 
-        <ui-stack
-            name="revision-history"
-            v-if="showRevisionHistory"
-            @closed="showRevisionHistory = false"
-            :narrow="true"
-            v-slot="{ close }"
-        >
+        <Stack ref="revisionHistoryStack" narrow v-model:open="showRevisionHistory">
             <revision-history
                 :index-url="actions.revisions"
                 :restore-url="actions.restore"
                 :reference="initialReference"
                 :can-restore-revisions="!readOnly"
-                @closed="close"
+                @closed="$refs.revisionHistoryStack.close()"
             />
-        </ui-stack>
+        </Stack>
 
         <publish-actions
             v-if="confirmingPublish"
@@ -279,6 +273,7 @@ import {
     PublishComponents,
     PublishLocalizations as LocalizationsCard,
     LivePreview,
+	Stack,
 } from '@ui';
 import resetValuesFromResponse from '@/util/resetValuesFromResponse.js';
 import { computed, ref } from 'vue';
@@ -314,6 +309,7 @@ export default {
         Subheading,
         Switch,
         Select,
+	    Stack,
     },
 
     props: {
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 457c62d2647..0f41509c58e 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -163,7 +163,7 @@
             </div>
         </uploader>
 
-        <ui-stack v-if="showSelector" name="asset-selector" @closed="closeSelector">
+        <Stack v-model:open="showSelector">
             <Selector
                 :container="container"
                 :folder="folder"
@@ -173,9 +173,9 @@
                 :query-scopes="queryScopes"
                 :columns="columns"
                 @selected="assetsSelected"
-                @closed="closeSelector"
+                @closed="showSelector = false"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
@@ -188,7 +188,7 @@ import Uploader from '../../assets/Uploader.vue';
 import Uploads from '../../assets/Uploads.vue';
 import { SortableList } from '../../sortable/Sortable';
 import { isEqual } from 'lodash-es';
-import { Button, Dropdown, DropdownMenu, DropdownItem } from '@/components/ui';
+import { Button, Dropdown, DropdownMenu, DropdownItem, Stack } from '@/components/ui';
 import ItemActions from '@/components/actions/ItemActions.vue';
 
 export default {
@@ -204,6 +204,7 @@ export default {
         DropdownMenu,
         DropdownItem,
         ItemActions,
+	    Stack,
     },
 
     mixins: [Fieldtype],
@@ -427,7 +428,7 @@ export default {
 
     events: {
         'close-selector'() {
-            this.closeSelector();
+            this.showSelector = false;
         },
     },
 
@@ -489,13 +490,6 @@ export default {
             this.showSelector = true;
         },
 
-        /**
-         * Close the asset selector modal
-         */
-        closeSelector() {
-            this.showSelector = false;
-        },
-
         /**
          * When an asset is updated in the editor
          */
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index 185e0c96499..83a4581a65c 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -37,7 +37,7 @@
                 />
             </div>
 
-            <ui-stack v-if="showingSelector" name="asset-selector" @closed="closeSelector">
+            <Stack v-model:open="showingSelector">
                 <selector
                     :container="extension.options.bard.meta.assets.container"
                     :folder="extension.options.bard.config.folder || '/'"
@@ -46,10 +46,9 @@
                     :max-files="1"
                     :columns="extension.options.bard.meta.assets.columns"
                     @selected="assetsSelected"
-                    @closed="closeSelector"
-                >
-                </selector>
-            </ui-stack>
+                    @closed="showingSelector = false"
+                />
+            </Stack>
 
             <asset-editor
                 v-if="editing"
@@ -69,7 +68,7 @@
 import Asset from '../assets/Asset';
 import { NodeViewWrapper } from '@tiptap/vue-3';
 import Selector from '../../assets/Selector.vue';
-import { Input, Button } from '@ui';
+import { Input, Button, Stack } from '@ui';
 import { containerContextKey } from '@/components/ui/Publish/Container.vue';
 
 export default {
@@ -80,6 +79,7 @@ export default {
         Selector,
         Input,
         Button,
+	    Stack,
     },
 
     inject: {
@@ -163,10 +163,6 @@ export default {
             this.showingSelector = true;
         },
 
-        closeSelector() {
-            this.showingSelector = false;
-        },
-
         assetsSelected(selections) {
             this.loading = true;
             this.assetId = selections[0];
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index fe51de4cdff..1ee60adc589 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -148,7 +148,7 @@
             @item-data-updated="entrySelected"
         />
 
-        <ui-stack v-if="showAssetSelector" name="asset-selector" @closed="closeAssetSelector">
+        <Stack v-model:open="showAssetSelector">
             <asset-selector
                 :container="config.container"
                 :folder="config.folder || '/'"
@@ -156,21 +156,22 @@
                 :selected="[]"
                 :max-files="1"
                 @selected="assetSelected"
-                @closed="closeAssetSelector"
+                @closed="showAssetSelector = false"
             />
-        </ui-stack>
+        </Stack>
     </div>
 </template>
 
 <script>
 import qs from 'qs';
 import AssetSelector from '../../assets/Selector.vue';
-import { Icon } from '@/components/ui';
+import { Icon, Stack } from '@/components/ui';
 
 export default {
     components: {
         AssetSelector,
         Icon,
+	    Stack,
     },
 
     props: {
@@ -420,10 +421,6 @@ export default {
             this.showAssetSelector = true;
         },
 
-        closeAssetSelector() {
-            this.showAssetSelector = false;
-        },
-
         assetSelected(data) {
             if (data.length) {
                 this.loadAssetData(data[0]);
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index dc3ef69b17a..1a321eb9221 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -132,7 +132,7 @@
                     </div>
                 </uploader>
 
-                <ui-stack v-if="showAssetSelector && !isReadOnly" name="markdown-asset-selector" @closed="closeAssetSelector">
+                <Stack v-if="!isReadOnly" :open="showAssetSelector">
                     <asset-selector
                         :container="container"
                         :folder="folder"
@@ -142,22 +142,23 @@
                         @selected="assetsSelected"
                         @closed="closeAssetSelector"
                     />
-                </ui-stack>
+                </Stack>
 
-                <ui-stack narrow name="markdownCheatSheet" v-if="showCheatsheet" @closed="showCheatsheet = false">
+                <Stack narrow v-model:open="showCheatsheet">
                     <div class="relative h-full overflow-auto bg-white p-6 dark:bg-gray-800 rounded-l-2xl">
-                        <Button
-                            icon="x"
-                            variant="ghost"
-                            class="sticky top-0 left-[100%] translate-x-[15%] translate-y-[-20%] bg-white dark:bg-gray-800"
-                            @click="showCheatsheet = false"
-                        />
+	                    <StackClose>
+	                        <Button
+	                            icon="x"
+	                            variant="ghost"
+	                            class="sticky top-0 left-[100%] translate-x-[15%] translate-y-[-20%] bg-white dark:bg-gray-800"
+	                        />
+	                    </StackClose>
                         <div class="prose prose-zinc prose-headings:font-medium prose-pre:prose-code:!text-white mx-auto max-w-3xl">
                             <h2 v-text="__('Markdown Cheatsheet')"></h2>
                             <div v-html="__('markdown.cheatsheet')"></div>
                         </div>
                     </div>
-                </ui-stack>
+                </Stack>
             </div>
         </div>
     </portal>
@@ -169,7 +170,7 @@ import { marked } from 'marked';
 import { markRaw } from 'vue';
 import { TextRenderer as PlainTextRenderer } from '@davidenke/marked-text-renderer';
 import throttle from '@/util/throttle.js';
-import { Button } from '@/components/ui';
+import { Button, Stack, StackClose } from '@/components/ui';
 
 import CodeMirror from 'codemirror/lib/codemirror';
 import 'codemirror/addon/edit/closebrackets';
@@ -244,6 +245,8 @@ export default {
         Uploader,
         Uploads,
         MarkdownToolbar,
+	    Stack,
+	    StackClose,
     },
 
     data() {
diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index debda937d9e..894f74eeca7 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <ui-stack
-            name="inline-editor"
+        <Stack
+	        open
             :before-close="shouldClose"
             :narrow="stackSize === 'narrow'"
             :half="stackSize === 'half'"
@@ -30,7 +30,7 @@
                     </template>
                 </component>
             </div>
-        </ui-stack>
+        </Stack>
 
         <confirmation-modal
             v-if="closingWithChanges"
@@ -45,13 +45,15 @@
 </template>
 
 <script>
-import { Button, Icon } from '@/components/ui';
+import { Button, Icon, Stack } from '@/components/ui';
 
 export default {
     components: {
         Button,
         Icon,
+	    Stack,
     },
+
     props: {
         component: String,
         componentProps: Object,
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index ad097200862..a0bbca9d93d 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -73,7 +73,7 @@
                 </div>
             </div>
 
-            <ui-stack name="item-selector" v-if="isSelecting" @closed="isSelecting = false" v-slot="{ close }">
+            <Stack v-model:open="isSelecting">
                 <ItemSelector
                     :name="name"
                     :filters-url="filtersUrl"
@@ -89,9 +89,9 @@
                     :type="config.type"
                     :tree="config.query_scopes?.length > 0 ? null : tree"
                     @selected="selectionsUpdated"
-                    @closed="close"
+                    @closed="isSelecting = false"
                 />
-            </ui-stack>
+            </Stack>
 
             <input v-if="name" type="hidden" :name="name" :value="JSON.stringify(value)" />
         </template>
@@ -104,7 +104,7 @@ import ItemSelector from './Selector.vue';
 import CreateButton from './CreateButton.vue';
 import { Sortable, Plugins } from '@shopify/draggable';
 import RelationshipSelectField from './SelectField.vue';
-import { Button, Icon } from '@/components/ui';
+import { Button, Icon, Stack } from '@/components/ui';
 
 export default {
     props: {
@@ -147,6 +147,7 @@ export default {
         RelationshipSelectField,
         Button,
         Icon,
+	    Stack,
     },
 
     data() {
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 8edbe9f55e2..7fcee388044 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <ui-stack narrow name="nav-item-editor" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack narrow open @closed="$emit('closed')" v-slot="{ close }">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
@@ -39,11 +39,11 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Button, Heading, Field, Input } from '@/components/ui';
+import { Button, Heading, Field, Input, Stack } from '@/components/ui';
 import { data_get } from '../../bootstrap/globals.js';
 
 export default {
@@ -52,6 +52,7 @@ export default {
         Heading,
         Field,
         Input,
+	    Stack,
     },
 
     emits: ['closed', 'updated'],
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index 575acc665ad..53bc7cd8348 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -1,11 +1,13 @@
 <template>
-    <ui-stack narrow name="nav-item-editor" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack narrow open @update:open="$emit('closed')">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
             >
                 <Heading size="lg">{{ creating ? __('Add Section') : __('Edit Section') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
+	            <StackClose>
+                    <Button icon="x" variant="ghost" class="-me-2" />
+	            </StackClose>
             </div>
 
             <div class="flex-1 overflow-auto">
@@ -18,11 +20,11 @@
                 </div>
             </div>
         </div>
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Button, Heading, Field, Input } from '@/components/ui';
+import { Button, Heading, Field, Input, Stack, StackClose } from '@/components/ui';
 
 export default {
     components: {
@@ -30,6 +32,8 @@ export default {
         Heading,
         Field,
         Input,
+	    Stack,
+	    StackClose,
     },
 
     emits: ['closed', 'updated'],
diff --git a/resources/js/components/revision-history/History.vue b/resources/js/components/revision-history/History.vue
index 4248504f9e0..42e7d12b37b 100644
--- a/resources/js/components/revision-history/History.vue
+++ b/resources/js/components/revision-history/History.vue
@@ -4,7 +4,9 @@
             class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
         >
             <Heading size="lg">{{ __('Revision History') }}</Heading>
-            <Button icon="x" variant="ghost" class="-me-2" @click="close" />
+	        <StackClose>
+                <Button icon="x" variant="ghost" class="-me-2" />
+	        </StackClose>
         </header>
 
         <div class="flex-1 overflow-auto">
@@ -39,14 +41,17 @@
 <script>
 import Revision from './Revision.vue';
 import DateFormatter from '@/components/DateFormatter.js';
-import { Heading, Button, Icon } from '@/components/ui';
+import { Heading, Button, Icon, StackClose } from '@/components/ui';
 
 export default {
+	emits: ['closed'],
+
     components: {
         Revision,
         Heading,
         Button,
         Icon,
+	    StackClose,
     },
 
     props: {
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 42c5e8ffd5e..450b1e4dd55 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -1,11 +1,19 @@
 <template>
-    <ui-stack narrow name="page-tree-linker" :before-close="shouldClose" @closed="$emit('closed')" v-slot="{ close }">
+    <Stack
+	    ref="stack"
+	    narrow
+	    open
+	    :before-close="shouldClose"
+	    @update:open="$emit('closed')"
+    >
         <div class="flex h-full flex-col bg-gray-100 dark:bg-gray-850">
             <header
                 class="flex items-center justify-between border-b bg-white py-2 text-lg font-medium shadow-md dark:border-dark-950 dark:bg-dark-600 ltr:pl-6 ltr:pr-3 rtl:pl-3 rtl:pr-6"
             >
                 <Heading size="lg">{{ headerText }}</Heading>
-                <Button icon="x" variant="ghost" @click="close" />
+	            <StackClose>
+		            <Button icon="x" variant="ghost" />
+	            </StackClose>
             </header>
 
             <div v-if="loading" class="relative flex-1 overflow-auto">
@@ -44,7 +52,7 @@
                 class="flex flex-wrap flex-row-reverse gap-2 items-end justify-between border-t bg-gray-200 p-4 dark:border-dark-900 dark:bg-dark-600"
             >
                 <div class="flex flex-wrap justify-end" v-if="!readOnly">
-                    <Button variant="ghost" class="me-2" :text="__('Cancel')" @click="confirmClose(close)" />
+                    <Button variant="ghost" class="me-2" :text="__('Cancel')" @click="confirmClose" />
                     <Button variant="primary" :text="__('Apply')" @click="submit" />
                 </div>
                 <div v-if="type === 'entry'">
@@ -62,11 +70,11 @@
             @confirm="confirmCloseWithChanges"
             @cancel="closingWithChanges = false"
         />
-    </ui-stack>
+    </Stack>
 </template>
 
 <script>
-import { Heading, Button, PublishContainer, Icon } from '@/components/ui';
+import { Heading, Button, PublishContainer, Icon, Stack, StackClose } from '@/components/ui';
 import { flatten } from 'lodash-es';
 import { computed, ref } from 'vue';
 import { Pipeline, Request } from '@ui/Publish/SavePipeline.js';
@@ -80,6 +88,8 @@ export default {
         Button,
         PublishContainer,
         Icon,
+	    Stack,
+	    StackClose,
     },
 
     props: {
@@ -239,7 +249,7 @@ export default {
         },
 
         confirmClose(close) {
-            if (this.shouldClose()) close();
+            if (this.shouldClose()) this.$refs.stack.close();
         },
 
         confirmCloseWithChanges() {
diff --git a/resources/js/components/two-factor/RecoveryCodesModal.vue b/resources/js/components/two-factor/RecoveryCodesModal.vue
index 0ffc5fb413a..9206ec90e04 100644
--- a/resources/js/components/two-factor/RecoveryCodesModal.vue
+++ b/resources/js/components/two-factor/RecoveryCodesModal.vue
@@ -46,7 +46,7 @@ function copyToClipboard() {
 </script>
 
 <template>
-    <Modal :title="__('Recovery Codes')" :open="true" @update:open="$emit('cancel')">
+    <Modal :title="__('Recovery Codes')" open @update:open="$emit('cancel')">
         <div>
             <div v-if="loading" class="flex items-center justify-center text-center">
                 <Icon name="loading" />
diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
index d80f411c3bd..02170209365 100644
--- a/resources/js/components/two-factor/Setup.vue
+++ b/resources/js/components/two-factor/Setup.vue
@@ -52,7 +52,7 @@ function complete() {
 </script>
 
 <template>
-    <Modal v-if="setupModalOpen" :title="__('Set up Two Factor Authentication')" :open="true" @update:model-value="$emit('cancel')">
+    <Modal v-if="setupModalOpen" :title="__('Set up Two Factor Authentication')" open @update:model-value="$emit('cancel')">
         <div>
             <div v-if="loading" class="flex items-center justify-center text-center">
                 <Icon name="loading" />
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index ada70bda772..0b9a2793930 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -6,6 +6,7 @@ import {
     PanelHeader,
     Card,
     Heading,
+	Stack,
 } from '@ui';
 import { injectListingContext } from '../Listing/Listing.vue';
 import { computed, ref, watch, nextTick } from 'vue';
@@ -87,6 +88,7 @@ function handleStackClosed() {
     }
 
     open.value = false;
+
     nextTick(() => {
         requestAnimationFrame(() => {
             const wrapper = filtersButtonWrapperRef.value;
@@ -113,7 +115,7 @@ function handleStackClosed() {
             </Button>
         </div>
 
-        <ui-stack half name="filters" v-if="open" @closed="handleStackClosed">
+        <Stack half :open="open" @update:open="handleStackClosed">
             <div ref="stackContentRef" class="flex-1 p-3 bg-white dark:bg-gray-800 h-full overflow-auto rounded-l-2xl relative">
                 <Button
                     icon="x"
@@ -157,7 +159,7 @@ function handleStackClosed() {
                     <Button variant="primary" :text="__('Done')" @click="handleStackClosed" />
                 </div>
             </div>
-        </ui-stack>
+        </Stack>
 
         <Button
             v-for="(badge, handle, index) in fieldFilterBadges"

From e61903e623377ac4c27ebbd8db99703b2f9ade06 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 15:26:36 +0000
Subject: [PATCH 13/24] merge `narrow`/`half`/`full` props into new `size` prop

---
 .../js/components/blueprints/LinkFields.vue      |  2 +-
 resources/js/components/blueprints/Section.vue   |  4 ++--
 resources/js/components/blueprints/Tab.vue       |  4 ++--
 .../js/components/entries/PublishActions.vue     |  2 +-
 resources/js/components/entries/PublishForm.vue  |  2 +-
 .../fieldtypes/markdown/MarkdownFieldtype.vue    |  2 +-
 resources/js/components/nav/ItemEditor.vue       |  2 +-
 resources/js/components/nav/SectionEditor.vue    |  2 +-
 .../js/components/portals/PortalTargets.vue      |  2 +-
 .../js/components/structures/PageEditor.vue      |  2 +-
 resources/js/components/ui/Listing/Filters.vue   |  2 +-
 resources/js/components/ui/Stack/Stack.vue       | 16 ++++++----------
 12 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/resources/js/components/blueprints/LinkFields.vue b/resources/js/components/blueprints/LinkFields.vue
index ac56daaf66e..0571f35d1ef 100644
--- a/resources/js/components/blueprints/LinkFields.vue
+++ b/resources/js/components/blueprints/LinkFields.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <Stack narrow v-model:open="open">
+        <Stack size="narrow" v-model:open="open">
 	        <template #trigger>
 		        <Button icon="link" :text="__('Link Existing')" />
 	        </template>
diff --git a/resources/js/components/blueprints/Section.vue b/resources/js/components/blueprints/Section.vue
index a969ba2df36..24f8950239e 100644
--- a/resources/js/components/blueprints/Section.vue
+++ b/resources/js/components/blueprints/Section.vue
@@ -35,7 +35,7 @@
         </ui-panel>
 
         <ui-stack
-            narrow
+	        size="narrow"
             :open="editingSection !== false"
             @update:open="editCancelled"
             @opened="() => $nextTick(() => $refs.displayInput.focus())"
@@ -182,7 +182,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 
diff --git a/resources/js/components/blueprints/Tab.vue b/resources/js/components/blueprints/Tab.vue
index 4c94719db82..e4b5dd219f4 100644
--- a/resources/js/components/blueprints/Tab.vue
+++ b/resources/js/components/blueprints/Tab.vue
@@ -25,7 +25,7 @@
         </Dropdown>
 
         <Stack
-            narrow
+	        size="narrow"
             :open="editing"
             @opened="() => $nextTick(() => $refs.title.focus())"
             @update:open="editCancelled"
@@ -136,7 +136,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index b2e18d1e1cb..4a418438224 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -1,5 +1,5 @@
 <template>
-    <Stack narrow open @update:open="$emit('closed')">
+    <Stack size="narrow" open @update:open="$emit('closed')">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <header
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index ea2964b03b4..aeedb4de864 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -192,7 +192,7 @@
             </LivePreview>
         </PublishContainer>
 
-        <Stack ref="revisionHistoryStack" narrow v-model:open="showRevisionHistory">
+        <Stack ref="revisionHistoryStack" size="narrow" v-model:open="showRevisionHistory">
             <revision-history
                 :index-url="actions.revisions"
                 :restore-url="actions.restore"
diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index 1a321eb9221..ca6c3c2b5ca 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
@@ -144,7 +144,7 @@
                     />
                 </Stack>
 
-                <Stack narrow v-model:open="showCheatsheet">
+                <Stack size="narrow" v-model:open="showCheatsheet">
                     <div class="relative h-full overflow-auto bg-white p-6 dark:bg-gray-800 rounded-l-2xl">
 	                    <StackClose>
 	                        <Button
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 7fcee388044..d2c6aa47e61 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <Stack narrow open @closed="$emit('closed')" v-slot="{ close }">
+    <Stack size="narrow" open @closed="$emit('closed')" v-slot="{ close }">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index 53bc7cd8348..5a5a2809c32 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <Stack narrow open @update:open="$emit('closed')">
+    <Stack size="narrow" open @update:open="$emit('closed')">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
diff --git a/resources/js/components/portals/PortalTargets.vue b/resources/js/components/portals/PortalTargets.vue
index a7adbcad6c2..cd84cb78001 100644
--- a/resources/js/components/portals/PortalTargets.vue
+++ b/resources/js/components/portals/PortalTargets.vue
@@ -17,7 +17,7 @@ export default {
 
         isSoloNarrowStack() {
             const stacks = this.$stacks.stacks();
-            return stacks.length === 1 && stacks[0]?.data?.vm?.narrow === true;
+            return stacks.length === 1 && stacks[0]?.data?.vm?.size === 'narrow';
         },
     },
 };
diff --git a/resources/js/components/structures/PageEditor.vue b/resources/js/components/structures/PageEditor.vue
index 450b1e4dd55..fc5dda67f60 100644
--- a/resources/js/components/structures/PageEditor.vue
+++ b/resources/js/components/structures/PageEditor.vue
@@ -1,7 +1,7 @@
 <template>
     <Stack
 	    ref="stack"
-	    narrow
+	    size="narrow"
 	    open
 	    :before-close="shouldClose"
 	    @update:open="$emit('closed')"
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 0b9a2793930..cb533f37abb 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -115,7 +115,7 @@ function handleStackClosed() {
             </Button>
         </div>
 
-        <Stack half :open="open" @update:open="handleStackClosed">
+        <Stack size="half" :open="open" @update:open="handleStackClosed">
             <div ref="stackContentRef" class="flex-1 p-3 bg-white dark:bg-gray-800 h-full overflow-auto rounded-l-2xl relative">
                 <Button
                     icon="x"
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 5d94a8323b6..39ed3eedb3a 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -23,11 +23,7 @@ const props = defineProps({
 
 	open: { type: Boolean, default: false },
 	beforeClose: { type: Function, default: () => true },
-
-	// todo: should these not be variants?
-	narrow: { type: Boolean },
-	half: { type: Boolean },
-	full: { type: Boolean },
+	size: { type: String, default: 'full' },
 });
 
 const stack = ref(null);
@@ -45,9 +41,9 @@ const depth = computed(() => stack.value?.data.depth);
 const isTopStack = computed(() => stacks.count() === depth.value);
 
 const offset = computed(() => {
-	if (isTopStack.value && props.narrow) {
+	if (isTopStack.value && props.size === 'narrow') {
 		return windowInnerWidth.value - 450;
-	} else if (isTopStack.value && props.half) {
+	} else if (isTopStack.value && props.size === 'half') {
 		return windowInnerWidth.value / 2;
 	}
 
@@ -56,11 +52,11 @@ const offset = computed(() => {
 });
 
 const leftOffset = computed(() => {
-	if (props.full) {
+	if (props.size === 'full') {
 		return 0;
 	}
 
-	if (isTopStack.value && (props.narrow || props.half)) {
+	if (isTopStack.value && (props.size === 'narrow' || props.size === 'half')) {
 		return offset.value;
 	}
 
@@ -202,7 +198,7 @@ provide('closeStack', close);
                         v-if="visible"
                         class="stack-content fixed flex flex-col sm:end-1.5 overflow-auto bg-white dark:bg-gray-850 rounded-xl shadow-[0_8px_5px_-6px_rgba(0,0,0,0.1),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.15)] dark:shadow-[0_5px_20px_rgba(0,0,0,.5)] transition-transform duration-150 ease-out"
                         :class="[
-                            full ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',
+                            size === 'full' ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',
                             { '-translate-x-4 rtl:translate-x-4': isHovering }
                         ]"
                     >

From 4064c36dfa985c80049bb69c8d7a2ddf5dd57173 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 15:52:04 +0000
Subject: [PATCH 14/24] wip

---
 resources/js/components/nav/ItemEditor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index d2c6aa47e61..24f4e72a47d 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,5 +1,4 @@
 <template>
-    <Stack size="narrow" open @closed="$emit('closed')" v-slot="{ close }">
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div
                 class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
@@ -8,6 +7,7 @@
                 <Button icon="x" variant="ghost" class="-me-2" @click="close" />
             </div>
 
+    <Stack size="narrow" open @update:open="$emit('closed')">
             <div class="flex-1 overflow-auto">
                 <div class="p-3 flex flex-col space-y-6">
                     <Field id="display" :label="__('Display')" required>

From b1a2e9f4e8a61b48eec46e37ea98c01ce43fb952 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 16:31:34 +0000
Subject: [PATCH 15/24] stacks shouldn't be full by default

---
 resources/js/components/assets/Editor/Editor.vue | 2 +-
 resources/js/components/ui/Stack/Stack.vue       | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 4f31ea7055f..44a4828c4fa 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <Stack full open ref="stack" :before-close="shouldClose" @update:open="$emit('closed')">
+    <Stack size="full" open ref="stack" :before-close="shouldClose" @update:open="$emit('closed')">
         <div
             class="asset-editor relative flex h-full flex-col rounded-sm bg-gray-100 dark:bg-dark-800"
             :class="isImage ? 'is-image' : 'is-file'"
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 39ed3eedb3a..8d7bfce7369 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 
 	open: { type: Boolean, default: false },
 	beforeClose: { type: Function, default: () => true },
-	size: { type: String, default: 'full' },
+	size: { type: String, default: null },
 });
 
 const stack = ref(null);
@@ -41,8 +41,7 @@ const depth = computed(() => stack.value?.data.depth);
 const isTopStack = computed(() => stacks.count() === depth.value);
 
 const offset = computed(() => {
-	if (isTopStack.value && props.size === 'narrow') {
-		return windowInnerWidth.value - 450;
+	if (isTopStack.value && props.size === 'narrow') {		return windowInnerWidth.value - 450;
 	} else if (isTopStack.value && props.size === 'half') {
 		return windowInnerWidth.value / 2;
 	}

From e60e828d132947490bc515cc21e89e5b704a1f08 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 16:38:59 +0000
Subject: [PATCH 16/24] Wire up stack title prop

---
 packages/cms/src/ui.js                        |  1 +
 resources/js/bootstrap/cms/ui.js              |  1 +
 .../js/components/entries/PublishActions.vue  | 17 +++--------
 .../js/components/entries/PublishForm.vue     |  7 ++++-
 resources/js/components/nav/ItemEditor.vue    | 11 ++------
 resources/js/components/nav/SectionEditor.vue | 19 +++++--------
 .../components/revision-history/History.vue   | 12 +-------
 resources/js/components/ui/Stack/Stack.vue    | 28 ++++++++++++++-----
 resources/js/components/ui/Stack/Title.vue    | 11 ++++++++
 resources/js/components/ui/index.js           |  1 +
 resources/js/tests/Package.test.js            |  1 +
 11 files changed, 56 insertions(+), 53 deletions(-)
 create mode 100644 resources/js/components/ui/Stack/Title.vue

diff --git a/packages/cms/src/ui.js b/packages/cms/src/ui.js
index 709342e9bed..2887e1304e4 100644
--- a/packages/cms/src/ui.js
+++ b/packages/cms/src/ui.js
@@ -97,6 +97,7 @@ export const {
     TabContent,
     Stack,
     StackClose,
+    StackTitle,
     Table,
     TableCell,
     TableColumn,
diff --git a/resources/js/bootstrap/cms/ui.js b/resources/js/bootstrap/cms/ui.js
index 6ba338cd020..0b9720aa25b 100644
--- a/resources/js/bootstrap/cms/ui.js
+++ b/resources/js/bootstrap/cms/ui.js
@@ -97,6 +97,7 @@ export {
     TabContent,
     Stack,
     StackClose,
+    StackTitle,
     Table,
     TableCell,
     TableColumn,
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 4a418438224..203d978b545 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -1,15 +1,6 @@
 <template>
-    <Stack size="narrow" open @update:open="$emit('closed')">
-        <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <header
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ __('Publish') }}</Heading>
-	            <StackClose>
-                    <Button icon="x" variant="ghost" class="-me-2" />
-	            </StackClose>
-            </header>
-
+    <Stack size="narrow" :title="__('Publish')" open @update:open="$emit('closed')">
+	    <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div class="flex-1 overflow-auto">
                 <div class="loading flex h-full items-center justify-center" v-if="saving">
                     <Icon name="loading" />
@@ -51,10 +42,10 @@
 </template>
 
 <script>
-import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack, StackClose } from '@/components/ui';
+import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack } from '@/components/ui';
 
 export default {
-    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack, StackClose },
+    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading, Stack },
 
     props: {
         actions: Object,
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index aeedb4de864..67b1fc170a1 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -192,7 +192,12 @@
             </LivePreview>
         </PublishContainer>
 
-        <Stack ref="revisionHistoryStack" size="narrow" v-model:open="showRevisionHistory">
+        <Stack
+	        ref="revisionHistoryStack"
+	        size="narrow"
+	        :title="__('Revision History')"
+	        v-model:open="showRevisionHistory"
+        >
             <revision-history
                 :index-url="actions.revisions"
                 :restore-url="actions.restore"
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 24f4e72a47d..9d4769b0aa6 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -1,13 +1,6 @@
 <template>
-        <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <div
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ creating ? __('Add Nav Item') : __('Edit Nav Item') }}</Heading>
-                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
-            </div>
-
-    <Stack size="narrow" open @update:open="$emit('closed')">
+    <Stack size="narrow" :title="creating ? __('Add Nav Item') : __('Edit Nav Item')" open @update:open="$emit('closed')">
+        <div class="m-2 mt-0 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
             <div class="flex-1 overflow-auto">
                 <div class="p-3 flex flex-col space-y-6">
                     <Field id="display" :label="__('Display')" required>
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index 5a5a2809c32..2e25c854a6f 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -1,15 +1,11 @@
 <template>
-    <Stack size="narrow" open @update:open="$emit('closed')">
+    <Stack
+	    size="narrow"
+	    :title="creating ? __('Add Section') : __('Edit Section')"
+	    open
+	    @update:open="$emit('closed')"
+    >
         <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-            <div
-                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-            >
-                <Heading size="lg">{{ creating ? __('Add Section') : __('Edit Section') }}</Heading>
-	            <StackClose>
-                    <Button icon="x" variant="ghost" class="-me-2" />
-	            </StackClose>
-            </div>
-
             <div class="flex-1 overflow-auto">
                 <div class="p-3 flex flex-col space-y-6">
                     <Field id="display" :label="__('Display')" required>
@@ -24,7 +20,7 @@
 </template>
 
 <script>
-import { Button, Heading, Field, Input, Stack, StackClose } from '@/components/ui';
+import { Button, Heading, Field, Input, Stack } from '@/components/ui';
 
 export default {
     components: {
@@ -33,7 +29,6 @@ export default {
         Field,
         Input,
 	    Stack,
-	    StackClose,
     },
 
     emits: ['closed', 'updated'],
diff --git a/resources/js/components/revision-history/History.vue b/resources/js/components/revision-history/History.vue
index 42e7d12b37b..b23d1058f5b 100644
--- a/resources/js/components/revision-history/History.vue
+++ b/resources/js/components/revision-history/History.vue
@@ -1,14 +1,5 @@
 <template>
     <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
-        <header
-            class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
-        >
-            <Heading size="lg">{{ __('Revision History') }}</Heading>
-	        <StackClose>
-                <Button icon="x" variant="ghost" class="-me-2" />
-	        </StackClose>
-        </header>
-
         <div class="flex-1 overflow-auto">
             <div class="loading flex h-full items-center justify-center" v-if="loading">
                 <Icon name="loading" />
@@ -41,7 +32,7 @@
 <script>
 import Revision from './Revision.vue';
 import DateFormatter from '@/components/DateFormatter.js';
-import { Heading, Button, Icon, StackClose } from '@/components/ui';
+import { Heading, Button, Icon } from '@/components/ui';
 
 export default {
 	emits: ['closed'],
@@ -51,7 +42,6 @@ export default {
         Heading,
         Button,
         Icon,
-	    StackClose,
     },
 
     props: {
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 8d7bfce7369..ce10d2d03da 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -3,24 +3,25 @@ import {
 	ref,
 	computed,
 	onMounted,
-	onUnmounted,
 	nextTick,
 	getCurrentInstance,
 	useSlots,
 	watch,
-	onBeforeUnmount, provide
+	onBeforeUnmount,
+	provide
 } from 'vue';
 import { stacks, events, keys, config } from '@/api';
 import wait from '@/util/wait.js';
 import {hasComponent} from "@/composables/has-component.js";
+import { Button, Heading } from "@ui";
+import Icon from "@ui/Icon/Icon.vue";
 
 const slots = useSlots();
 const emit = defineEmits(['update:open', 'opened']);
 
 const props = defineProps({
-	// title: { type: String, default: '' },
-	// icon: { type: [String, null], default: null },
-
+	title: { type: String, default: '' },
+	icon: { type: [String, null], default: null },
 	open: { type: Boolean, default: false },
 	beforeClose: { type: Function, default: () => true },
 	size: { type: String, default: null },
@@ -34,14 +35,15 @@ const escBinding = ref(null);
 const windowInnerWidth = ref(window.innerWidth);
 
 const instance = getCurrentInstance();
-// const hasModalTitleComponent = hasComponent('ModalTitle');
+const hasStackTitleComponent = hasComponent('StackTitle');
 const isUsingOpenProp = computed(() => instance?.vnode.props?.hasOwnProperty('open'));
 const portal = computed(() => stack.value ? `#portal-target-${stack.value.id}` : null);
 const depth = computed(() => stack.value?.data.depth);
 const isTopStack = computed(() => stacks.count() === depth.value);
 
 const offset = computed(() => {
-	if (isTopStack.value && props.size === 'narrow') {		return windowInnerWidth.value - 450;
+	if (isTopStack.value && props.size === 'narrow') {
+		return windowInnerWidth.value - 450;
 	} else if (isTopStack.value && props.size === 'half') {
 		return windowInnerWidth.value / 2;
 	}
@@ -201,6 +203,18 @@ provide('closeStack', close);
                             { '-translate-x-4 rtl:translate-x-4': isHovering }
                         ]"
                     >
+	                    <div
+		                    v-if="!hasStackTitleComponent && (title || icon)"
+		                    data-ui-stack-title
+		                    class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
+	                    >
+		                    <div class="flex items-center gap-2">
+			                    <Icon :name="icon" v-if="icon" class="size-4" />
+			                    <Heading size="lg" :text="title" />
+		                    </div>
+		                    <Button icon="x" variant="ghost" class="-me-2" @click="close" />
+	                    </div>
+
                         <slot :depth="depth" />
                     </div>
                 </transition>
diff --git a/resources/js/components/ui/Stack/Title.vue b/resources/js/components/ui/Stack/Title.vue
new file mode 100644
index 00000000000..61710ea9aab
--- /dev/null
+++ b/resources/js/components/ui/Stack/Title.vue
@@ -0,0 +1,11 @@
+<script setup>
+defineOptions({
+	name: 'StackTitle',
+});
+</script>
+
+<template>
+	<div data-ui-stack-title>
+		<slot />
+	</div>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 9b96ef2ad02..c4a93ee3cde 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -66,6 +66,7 @@ export { default as Switch } from './Switch.vue';
 export { default as TabContent } from './Tabs/Content.vue';
 export { default as Stack } from './Stack/Stack.vue';
 export { default as StackClose } from './Stack/Close.vue';
+export { default as StackTitle } from './Stack/Title.vue';
 export { default as Table } from './Table/Table.vue';
 export { default as TableCell } from './Table/Cell.vue';
 export { default as TableColumn } from './Table/Column.vue';
diff --git a/resources/js/tests/Package.test.js b/resources/js/tests/Package.test.js
index 33c98b0868e..b1b5ec2c713 100644
--- a/resources/js/tests/Package.test.js
+++ b/resources/js/tests/Package.test.js
@@ -176,6 +176,7 @@ it('exports ui', async () => {
         'TabTrigger',
         'Stack',
         'StackClose',
+        'StackTitle',
         'Table',
         'TableCell',
         'TableColumn',

From 12dcd82a5a35243f160c3f917c16d8c7c12bc35f Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 16:40:16 +0000
Subject: [PATCH 17/24] don't think we're using this anywhere. remove.

---
 resources/js/components/ui/Stack/Stack.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index ce10d2d03da..763bf7dac59 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -215,7 +215,7 @@ provide('closeStack', close);
 		                    <Button icon="x" variant="ghost" class="-me-2" @click="close" />
 	                    </div>
 
-                        <slot :depth="depth" />
+                        <slot />
                     </div>
                 </transition>
             </div>

From 4ebf86da577fe237e8e0f8035c3b2963c9e138e9 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 16:41:03 +0000
Subject: [PATCH 18/24] add data attribute

---
 resources/js/components/ui/Stack/Stack.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 763bf7dac59..71b8f778eb3 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -197,6 +197,7 @@ provide('closeStack', close);
                 <transition name="stack-slide">
                     <div
                         v-if="visible"
+                        data-ui-stack-content
                         class="stack-content fixed flex flex-col sm:end-1.5 overflow-auto bg-white dark:bg-gray-850 rounded-xl shadow-[0_8px_5px_-6px_rgba(0,0,0,0.1),_0_3px_8px_0_rgba(0,0,0,0.02),_0_30px_22px_-22px_rgba(39,39,42,0.15)] dark:shadow-[0_5px_20px_rgba(0,0,0,.5)] transition-transform duration-150 ease-out"
                         :class="[
                             size === 'full' ? 'inset-2 w-[calc(100svw-1rem)]' : 'inset-y-2',

From e433e200ea24c7d96ac63a1d231c21a86033e6cf Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 16:51:24 +0000
Subject: [PATCH 19/24] add stacks page to storybook docs

the examples themselves don't render. i've created an issue for that in linear.
---
 resources/js/stories/Stack.stories.ts | 109 ++++++++++++++++++++++++++
 resources/js/stories/docs/Stack.mdx   |  23 ++++++
 2 files changed, 132 insertions(+)
 create mode 100644 resources/js/stories/Stack.stories.ts
 create mode 100644 resources/js/stories/docs/Stack.mdx

diff --git a/resources/js/stories/Stack.stories.ts b/resources/js/stories/Stack.stories.ts
new file mode 100644
index 00000000000..5c9ea51a2be
--- /dev/null
+++ b/resources/js/stories/Stack.stories.ts
@@ -0,0 +1,109 @@
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Stack, StackClose, StackTitle} from '@ui';
+
+const meta = {
+    title: 'Components/Stack',
+    component: Stack,
+    argTypes: {
+        title: { control: 'text' },
+        icon: { control: 'text' },
+        blur: { control: 'boolean' },
+        dismissible: { control: 'boolean' },
+        open: { control: 'boolean' },
+    },
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const defaultCode = `
+<Stack title="That's Pretty Neat">
+    <template #trigger>
+        <Button text="How neat is that?" />
+    </template>
+</Stack>
+`;
+
+export const _DocsIntro: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: defaultCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, Button },
+        template: defaultCode,
+    }),
+};
+
+const customTitleCode = `
+<Stack>
+    <template #trigger>
+        <Button text="How neat is that?" />
+    </template>
+    <StackTitle class="text-center flex items-center justify-between">
+        <span>🍁</span>
+        <h2 class="font-serif text-xl">What's why they call it neature!</h2>
+        <span>🍁</span>
+    </StackTitle>
+</Stack>
+`;
+
+export const _CustomTitle: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: customTitleCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, StackTitle, Button },
+        template: customTitleCode,
+    }),
+};
+
+const closeButtonCode = `
+<Stack title="Hey look a close button" class="text-center">
+    <template #trigger>
+        <Button text="Open Says Me" />
+    </template>
+    <StackClose class="text-center">
+        <Button text="Close Says Me" />
+    </StackClose>
+</Stack>
+`;
+
+export const _CloseButton: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: closeButtonCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, StackClose, Button },
+        template: closeButtonCode,
+    }),
+};
+
+const iconCode = `
+<Stack title="That's Pretty Neat" icon="fire-flame-burn-hot">
+    <template #trigger>
+        <Button text="How neat is that?" />
+    </template>
+</Stack>
+`;
+
+export const _WithIcon: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: iconCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, Button },
+        template: iconCode,
+    }),
+};
\ No newline at end of file
diff --git a/resources/js/stories/docs/Stack.mdx b/resources/js/stories/docs/Stack.mdx
new file mode 100644
index 00000000000..a6589fa0bf1
--- /dev/null
+++ b/resources/js/stories/docs/Stack.mdx
@@ -0,0 +1,23 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as StackStories from '../Stack.stories';
+
+<Meta of={StackStories} />
+
+# Stack
+Stacks are a good way of adding a layer of UX to the Control Panel. Ideal for short forms or editing related content.
+<Canvas of={StackStories._DocsIntro} sourceState={'shown'} />
+
+## Title
+Titles are required for accessibility, but you don't have to use the `title` prop if you want to style it differently. You have full control of the style and content by using the `StackTitle` component.
+<Canvas of={StackStories._CustomTitle} sourceState={'shown'} />
+
+## Close Button
+You can use the `StackClose` component to close the stack.
+<Canvas of={StackStories._CloseButton} sourceState={'shown'} />
+
+## Icon
+You can add an icon to the title by passing the `icon` prop.
+<Canvas of={StackStories._WithIcon} sourceState={'shown'} />
+
+## Arguments
+<ArgTypes of={StackStories} />

From 1e7f6cfa609815504a7e44c80385da39a32e56d9 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 17:01:41 +0000
Subject: [PATCH 20/24] add stack example to the playground

---
 resources/js/pages/Playground.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/resources/js/pages/Playground.vue b/resources/js/pages/Playground.vue
index 3371589c8f6..74e456c3d6a 100644
--- a/resources/js/pages/Playground.vue
+++ b/resources/js/pages/Playground.vue
@@ -351,10 +351,23 @@ defineProps(['icons']);
                         <template #trigger>
                             <ui-button text="How neat is that?" />
                         </template>
+	                    <p>This is some very basic example text to show you what stacks look like with content.</p>
                     </ui-modal>
                 </div>
             </section>
 
+	        <section class="space-y-4">
+		        <ui-heading size="lg">Stack</ui-heading>
+		        <div class="flex">
+			        <ui-stack title="That's Pretty Neat">
+				        <template #trigger>
+					        <ui-button text="How neat is that?" />
+				        </template>
+				        <p>This is some very basic example text to show you what stacks look like with content.</p>
+			        </ui-stack>
+		        </div>
+	        </section>
+
             <section class="space-y-4">
                 <ui-heading size="lg">Popover</ui-heading>
                 <div class="flex">

From fc394334c65ca379095be8cf5ae45eb4674ce706 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 17:16:50 +0000
Subject: [PATCH 21/24] ensure portal & esc binding are properly destroyed when
 stack is closed

---
 resources/js/components/ui/Stack/Stack.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 71b8f778eb3..55afb2d3a06 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -10,7 +10,7 @@ import {
 	onBeforeUnmount,
 	provide
 } from 'vue';
-import { stacks, events, keys, config } from '@/api';
+import { stacks, portals, events, keys, config } from '@/api';
 import wait from '@/util/wait.js';
 import {hasComponent} from "@/composables/has-component.js";
 import { Button, Heading } from "@ui";
@@ -117,6 +117,12 @@ function close() {
 
 	window.removeEventListener('resize', windowResized);
 
+	stack.value?.destroy();
+	stack.value = null;
+
+	escBinding.value?.destroy();
+	escBinding.value = null;
+
 	wait(300).then(() => {
 		mounted.value = false;
 		updateOpen(false);

From 70a94d84750c53e22ac8df10882664a2577ef344 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 15 Dec 2025 17:17:42 +0000
Subject: [PATCH 22/24] wip

---
 .../js/components/inputs/relationship/InlinePublishForm.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/InlinePublishForm.vue b/resources/js/components/inputs/relationship/InlinePublishForm.vue
index 894f74eeca7..32a9ef14838 100644
--- a/resources/js/components/inputs/relationship/InlinePublishForm.vue
+++ b/resources/js/components/inputs/relationship/InlinePublishForm.vue
@@ -6,7 +6,7 @@
             :narrow="stackSize === 'narrow'"
             :half="stackSize === 'half'"
             :full="stackSize === 'full'"
-            @closed="close"
+            @update:open="close"
         >
             <div class="h-full overflow-scroll overflow-x-auto bg-white px-6 rounded-l-xl dark:bg-dark-800">
                 <div v-if="loading" class="absolute inset-0 z-200 flex items-center justify-center text-center">

From fb45533291a06c1e1069879addaf22847904ecb8 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 16 Dec 2025 11:17:14 +0000
Subject: [PATCH 23/24] storybook docs

---
 resources/js/stories/Modal.stories.ts |  82 +++++++++++++++++----
 resources/js/stories/Stack.stories.ts | 100 +++++++++++++++++++++++---
 resources/js/stories/docs/Stack.mdx   |   8 ++-
 3 files changed, 168 insertions(+), 22 deletions(-)

diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index f4eca53718b..7fc3ac9b4ce 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -1,15 +1,58 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { Modal, ModalClose, ModalTitle, Button, Field, Input } from '@ui';
+import type {Meta, StoryObj} from '@storybook/vue3';
+import {Button, Field, Input, Modal, ModalClose, ModalTitle} from '@ui';
 
 const meta = {
     title: 'Components/Modal',
     component: Modal,
     argTypes: {
-        title: { control: 'text' },
-        icon: { control: 'text' },
-        blur: { control: 'boolean' },
-        dismissible: { control: 'boolean' },
-        open: { control: 'boolean' },
+        title: {
+            control: 'text',
+            description: 'Title displayed at the top of the modal.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon displayed at the top of the modal, next to the title. [See list of available icons](/?path=/docs/components-icon--docs#available-icons).',
+        },
+        open: {
+            control: 'boolean',
+            description: 'Controls the open state of the modal.',
+        },
+        beforeClose: {
+            control: 'boolean',
+            description: 'Callback that fires before the modal closes.',
+        },
+        blur: {
+            control: 'boolean',
+            description: 'Whether the backdrop of the modal should be blurred.',
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Whether the modal can be dismissed by the user.',
+        },
+        'update:open': {
+            action: 'update:open',
+            description: 'Event handler called when the open state changes.',
+            table: {
+                category: 'Events',
+                type: { summary: '(value: boolean) => void' },
+            }
+        },
+        'opened': {
+            action: 'opened',
+            description: 'Event handler called after the modal has opened.',
+            table: {
+                category: 'Events',
+                type: { summary: '() => void' },
+            }
+        },
+        'dismissed': {
+            action: 'dismissed',
+            description: 'Event handler called after the modal has been dismissed.',
+            table: {
+                category: 'Events',
+                type: { summary: '() => void' },
+            }
+        },
     },
 } satisfies Meta<typeof Modal>;
 
@@ -17,7 +60,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultCode = `
-<Modal title="That's Pretty Neat">
+<Modal v-model:open="isOpen" title="That's Pretty Neat">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -33,12 +76,15 @@ export const _DocsIntro: Story = {
     },
     render: () => ({
         components: { Modal, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: defaultCode,
     }),
 };
 
 const customTitleCode = `
-<Modal>
+<Modal v-model:open="isOpen">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -59,12 +105,15 @@ export const _CustomTitle: Story = {
     },
     render: () => ({
         components: { Modal, ModalTitle, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: customTitleCode,
     }),
 };
 
 const closeButtonCode = `
-<Modal title="Hey look a close button" class="text-center">
+<Modal v-model:open="isOpen" title="Hey look a close button" class="text-center">
     <template #trigger>
         <Button text="Open Says Me" />
     </template>
@@ -83,12 +132,15 @@ export const _CloseButton: Story = {
     },
     render: () => ({
         components: { Modal, ModalClose, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: closeButtonCode,
     }),
 };
 
 const iconCode = `
-<Modal title="That's Pretty Neat" icon="fire-flame-burn-hot">
+<Modal v-model:open="isOpen" title="That's Pretty Neat" icon="fire-flame-burn-hot">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -104,12 +156,15 @@ export const _WithIcon: Story = {
     },
     render: () => ({
         components: { Modal, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: iconCode,
     }),
 };
 
 const footerCode = `
-<Modal title="Create new user">
+<Modal v-model:open="isOpen" title="Create new user">
     <template #trigger>
         <Button text="Create User" variant="primary" />
     </template>
@@ -149,6 +204,9 @@ export const _WithFooter: Story = {
     },
     render: () => ({
         components: { Modal, ModalClose, Button, Field, Input },
+        data: () => {
+            return { isOpen: false }
+        },
         template: footerCode,
     }),
 };
diff --git a/resources/js/stories/Stack.stories.ts b/resources/js/stories/Stack.stories.ts
index 5c9ea51a2be..6b1e3b48dba 100644
--- a/resources/js/stories/Stack.stories.ts
+++ b/resources/js/stories/Stack.stories.ts
@@ -5,11 +5,42 @@ const meta = {
     title: 'Components/Stack',
     component: Stack,
     argTypes: {
-        title: { control: 'text' },
-        icon: { control: 'text' },
-        blur: { control: 'boolean' },
-        dismissible: { control: 'boolean' },
-        open: { control: 'boolean' },
+        title: {
+            control: 'text',
+            description: 'Title displayed at the top of the stack.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon displayed at the top of the modal, next to the title. [See list of available icons](/?path=/docs/components-icon--docs#available-icons).',
+        },
+        open: {
+            control: 'boolean',
+            description: 'Controls the open state of the stack.',
+        },
+        beforeClose: {
+            control: 'boolean',
+            description: 'Callback that fires before the stack closes.',
+        },
+        size: {
+            control: 'text',
+            description: 'Size of the stack. Options: `full`, `half`, `narrow`',
+        },
+        'update:open': {
+            action: 'update:open',
+            description: 'Event handler called when the open state changes.',
+            table: {
+                category: 'Events',
+                type: { summary: '(value: boolean) => void' },
+            },
+        },
+        'opened': {
+            action: 'opened',
+            description: 'Event handler called after the stack has opened.',
+            table: {
+                category: 'Events',
+                type: { summary: '() => void' },
+            },
+        },
     },
 } satisfies Meta<typeof Stack>;
 
@@ -17,7 +48,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const defaultCode = `
-<Stack title="That's Pretty Neat">
+<Stack v-model:open="isOpen" title="That's Pretty Neat">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -33,12 +64,15 @@ export const _DocsIntro: Story = {
     },
     render: () => ({
         components: { Stack, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: defaultCode,
     }),
 };
 
 const customTitleCode = `
-<Stack>
+<Stack v-model:open="isOpen">
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -59,12 +93,19 @@ export const _CustomTitle: Story = {
     },
     render: () => ({
         components: { Stack, StackTitle, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: customTitleCode,
     }),
 };
 
 const closeButtonCode = `
-<Stack title="Hey look a close button" class="text-center">
+<Stack 
+    v-model:open="isOpen" 
+    title="Hey look a close button" 
+    class="text-center"
+>
     <template #trigger>
         <Button text="Open Says Me" />
     </template>
@@ -83,12 +124,19 @@ export const _CloseButton: Story = {
     },
     render: () => ({
         components: { Stack, StackClose, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: closeButtonCode,
     }),
 };
 
 const iconCode = `
-<Stack title="That's Pretty Neat" icon="fire-flame-burn-hot">
+<Stack 
+    v-model:open="isOpen" 
+    title="That's Pretty Neat" 
+    icon="fire-flame-burn-hot"
+>
     <template #trigger>
         <Button text="How neat is that?" />
     </template>
@@ -104,6 +152,40 @@ export const _WithIcon: Story = {
     },
     render: () => ({
         components: { Stack, Button },
+        data: () => {
+            return { isOpen: false }
+        },
         template: iconCode,
     }),
+};
+
+const beforeCloseCode = `
+<Stack 
+    v-model:open="isOpen"
+    :before-close="() => {
+        if (confirm('Are you sure?')) {
+            return true; // let it close
+        } else {
+            return false; // prevent it from closing
+        }
+    }"
+>
+    <!-- -->
+</Stack>
+`;
+
+export const _BeforeClose: Story = {
+    tags: ['!dev'],
+    parameters: {
+        docs: {
+            source: { code: beforeCloseCode }
+        }
+    },
+    render: () => ({
+        components: { Stack, Button },
+        data: () => {
+            return { isOpen: false }
+        },
+        template: beforeCloseCode,
+    }),
 };
\ No newline at end of file
diff --git a/resources/js/stories/docs/Stack.mdx b/resources/js/stories/docs/Stack.mdx
index a6589fa0bf1..c2976b339bd 100644
--- a/resources/js/stories/docs/Stack.mdx
+++ b/resources/js/stories/docs/Stack.mdx
@@ -4,7 +4,9 @@ import * as StackStories from '../Stack.stories';
 <Meta of={StackStories} />
 
 # Stack
-Stacks are a good way of adding a layer of UX to the Control Panel. Ideal for short forms or editing related content.
+Stacks are a good way of adding a layer of UX to the Control Panel.
+
+For example, when editing a related entry while you're already editing another entry would open a second publish form over the top. Once you're done, the layer would close and return you to your original task, without you losing any progress, or needing to navigate away.
 <Canvas of={StackStories._DocsIntro} sourceState={'shown'} />
 
 ## Title
@@ -19,5 +21,9 @@ You can use the `StackClose` component to close the stack.
 You can add an icon to the title by passing the `icon` prop.
 <Canvas of={StackStories._WithIcon} sourceState={'shown'} />
 
+## Preventing Stacks from closing
+Before a Stack is closed, you have the opportunity to cancel it. For instance, if your Stack contains a form, you may want to give a warning about unsaved changes when the user tries to close it. To prevent closing of a Stack, you should pass in a function that returns false to stop closing and true to allow it.
+<Canvas of={StackStories._BeforeClose} sourceState={'shown'} />
+
 ## Arguments
 <ArgTypes of={StackStories} />

From 25caba007609ea130f021966fa4d14d7c402d6e5 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 19 Dec 2025 15:06:24 +0000
Subject: [PATCH 24/24] attempt to avoid merge conflicts when storybook pr is
 merged in

---
 resources/js/components/ui/Modal/Modal.vue |  6 ++
 resources/js/components/ui/Stack/Stack.vue |  5 ++
 resources/js/stories/Modal.stories.ts      | 76 ++++++++--------------
 resources/js/stories/Stack.stories.ts      | 54 +++++----------
 4 files changed, 56 insertions(+), 85 deletions(-)

diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index ebe180c4a59..e41316dad7b 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -16,11 +16,17 @@ const slots = useSlots();
 const emit = defineEmits(['update:open', 'opened', 'dismissed']);
 
 const props = defineProps({
+	/** When `true`, the modal's backdrop will be blurred */
     blur: { type: Boolean, default: true },
+	/** Title displayed at the top of the modal */
     title: { type: String, default: '' },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
     icon: { type: [String, null], default: null },
+	/** The controlled open state of the modal. */
     open: { type: Boolean, default: false },
+	/** Callback that fires before the modal closes. */
 	beforeClose: { type: Function, default: () => true },
+	/** When `true`, clicking outside the modal will dismiss it. */
     dismissible: { type: Boolean, default: true },
 });
 
diff --git a/resources/js/components/ui/Stack/Stack.vue b/resources/js/components/ui/Stack/Stack.vue
index 55afb2d3a06..c80b16a6c2d 100644
--- a/resources/js/components/ui/Stack/Stack.vue
+++ b/resources/js/components/ui/Stack/Stack.vue
@@ -20,10 +20,15 @@ const slots = useSlots();
 const emit = defineEmits(['update:open', 'opened']);
 
 const props = defineProps({
+	/** Title displayed at the top of the stack */
 	title: { type: String, default: '' },
+	/** Icon name. [Browse available icons](/?path=/story/components-icon--all-icons) */
 	icon: { type: [String, null], default: null },
+	/** The controlled open state of the stack. */
 	open: { type: Boolean, default: false },
+	/** Callback that fires before the stack closes. */
 	beforeClose: { type: Function, default: () => true },
+	/** Controls the size of the stack. Options: `narrow`, `half`, `full` */
 	size: { type: String, default: null },
 });
 
diff --git a/resources/js/stories/Modal.stories.ts b/resources/js/stories/Modal.stories.ts
index 7fc3ac9b4ce..f2378bc03d3 100644
--- a/resources/js/stories/Modal.stories.ts
+++ b/resources/js/stories/Modal.stories.ts
@@ -1,57 +1,35 @@
 import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Field, Input, Modal, ModalClose, ModalTitle} from '@ui';
+import PortalTargets from "@/components/portals/PortalTargets.vue";
 
 const meta = {
-    title: 'Components/Modal',
+    title: 'Overlays/Modal',
     component: Modal,
+    subcomponents: {
+        ModalTitle,
+        ModalClose,
+    },
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title displayed at the top of the modal.',
-        },
-        icon: {
-            control: 'text',
-            description: 'Icon displayed at the top of the modal, next to the title. [See list of available icons](/?path=/docs/components-icon--docs#available-icons).',
-        },
-        open: {
-            control: 'boolean',
-            description: 'Controls the open state of the modal.',
-        },
-        beforeClose: {
-            control: 'boolean',
-            description: 'Callback that fires before the modal closes.',
-        },
-        blur: {
-            control: 'boolean',
-            description: 'Whether the backdrop of the modal should be blurred.',
-        },
-        dismissible: {
-            control: 'boolean',
-            description: 'Whether the modal can be dismissed by the user.',
-        },
-        'update:open': {
-            action: 'update:open',
-            description: 'Event handler called when the open state changes.',
-            table: {
-                category: 'Events',
-                type: { summary: '(value: boolean) => void' },
-            }
-        },
         'opened': {
-            action: 'opened',
-            description: 'Event handler called after the modal has opened.',
+            description: 'Event handler called when the modal is opened.',
             table: {
-                category: 'Events',
+                category: 'events',
                 type: { summary: '() => void' },
-            }
+            },
         },
         'dismissed': {
-            action: 'dismissed',
-            description: 'Event handler called after the modal has been dismissed.',
+            description: 'Event handler called when the modal is dismissed.',
             table: {
-                category: 'Events',
+                category: 'events',
                 type: { summary: '() => void' },
-            }
+            },
+        },
+        'update:open': {
+            description: 'Event handler called when the open state of the modal changes.',
+            table: {
+                category: 'events',
+                type: { summary: '(value: boolean) => void' },
+            },
         },
     },
 } satisfies Meta<typeof Modal>;
@@ -75,11 +53,11 @@ export const _DocsIntro: Story = {
         }
     },
     render: () => ({
-        components: { Modal, Button },
+        components: { Modal, Button, PortalTargets },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
-        template: defaultCode,
+        template: `<div>${defaultCode}</div><PortalTargets />`,
     }),
 };
 
@@ -106,7 +84,7 @@ export const _CustomTitle: Story = {
     render: () => ({
         components: { Modal, ModalTitle, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: customTitleCode,
     }),
@@ -133,7 +111,7 @@ export const _CloseButton: Story = {
     render: () => ({
         components: { Modal, ModalClose, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: closeButtonCode,
     }),
@@ -157,7 +135,7 @@ export const _WithIcon: Story = {
     render: () => ({
         components: { Modal, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: iconCode,
     }),
@@ -205,8 +183,8 @@ export const _WithFooter: Story = {
     render: () => ({
         components: { Modal, ModalClose, Button, Field, Input },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: footerCode,
     }),
-};
+};
\ No newline at end of file
diff --git a/resources/js/stories/Stack.stories.ts b/resources/js/stories/Stack.stories.ts
index 6b1e3b48dba..5fe3c1ba8a7 100644
--- a/resources/js/stories/Stack.stories.ts
+++ b/resources/js/stories/Stack.stories.ts
@@ -2,43 +2,25 @@ import type {Meta, StoryObj} from '@storybook/vue3';
 import {Button, Stack, StackClose, StackTitle} from '@ui';
 
 const meta = {
-    title: 'Components/Stack',
+    title: 'Overlays/Stack',
     component: Stack,
+    subcomponents: {
+        StackTitle,
+        StackClose,
+    },
     argTypes: {
-        title: {
-            control: 'text',
-            description: 'Title displayed at the top of the stack.',
-        },
-        icon: {
-            control: 'text',
-            description: 'Icon displayed at the top of the modal, next to the title. [See list of available icons](/?path=/docs/components-icon--docs#available-icons).',
-        },
-        open: {
-            control: 'boolean',
-            description: 'Controls the open state of the stack.',
-        },
-        beforeClose: {
-            control: 'boolean',
-            description: 'Callback that fires before the stack closes.',
-        },
-        size: {
-            control: 'text',
-            description: 'Size of the stack. Options: `full`, `half`, `narrow`',
-        },
-        'update:open': {
-            action: 'update:open',
-            description: 'Event handler called when the open state changes.',
+        'opened': {
+            description: 'Event handler called when the stack is opened.',
             table: {
-                category: 'Events',
-                type: { summary: '(value: boolean) => void' },
+                category: 'events',
+                type: { summary: '() => void' },
             },
         },
-        'opened': {
-            action: 'opened',
-            description: 'Event handler called after the stack has opened.',
+        'update:open': {
+            description: 'Event handler called when the open state of the stack changes.',
             table: {
-                category: 'Events',
-                type: { summary: '() => void' },
+                category: 'events',
+                type: { summary: '(value: boolean) => void' },
             },
         },
     },
@@ -65,7 +47,7 @@ export const _DocsIntro: Story = {
     render: () => ({
         components: { Stack, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: defaultCode,
     }),
@@ -94,7 +76,7 @@ export const _CustomTitle: Story = {
     render: () => ({
         components: { Stack, StackTitle, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: customTitleCode,
     }),
@@ -125,7 +107,7 @@ export const _CloseButton: Story = {
     render: () => ({
         components: { Stack, StackClose, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: closeButtonCode,
     }),
@@ -153,7 +135,7 @@ export const _WithIcon: Story = {
     render: () => ({
         components: { Stack, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: iconCode,
     }),
@@ -184,7 +166,7 @@ export const _BeforeClose: Story = {
     render: () => ({
         components: { Stack, Button },
         data: () => {
-            return { isOpen: false }
+            return { isOpen: false };
         },
         template: beforeCloseCode,
     }),