From c926263d19a327dfba6743a3d8f50acf13e9dc3e Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Thu, 11 Dec 2025 23:11:43 +0100
Subject: [PATCH 01/12] Remove button group resize observer

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 .../fieldtypes/ButtonGroupFieldtype.vue       | 34 -------------------
 1 file changed, 34 deletions(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index 36e89887648..d3ef10b7d6d 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -18,7 +18,6 @@
 <script>
 import Fieldtype from './Fieldtype.vue';
 import HasInputOptions from './HasInputOptions.js';
-import ResizeObserver from 'resize-observer-polyfill';
 import { Button, ButtonGroup } from '@/components/ui';
 
 export default {
@@ -28,20 +27,6 @@ export default {
         ButtonGroup
     },
 
-    data() {
-        return {
-            resizeObserver: null,
-        };
-    },
-
-    mounted() {
-        this.setupResizeObserver();
-    },
-
-    beforeUnmount() {
-        this.resizeObserver.disconnect();
-    },
-
     computed: {
         options() {
             return this.normalizeInputOptions(this.meta.options || this.config.options);
@@ -60,25 +45,6 @@ export default {
             this.update(this.value == newValue && this.config.clearable ? null : newValue);
         },
 
-        setupResizeObserver() {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.handleWrappingOfNode(this.$refs.buttonGroup.$el);
-            });
-            this.resizeObserver.observe(this.$refs.buttonGroup.$el);
-        },
-
-        handleWrappingOfNode(node) {
-            const lastEl = node.lastChild;
-
-            if (!lastEl) return;
-
-            node.classList.remove('btn-vertical');
-
-            if (lastEl.offsetTop > node.clientTop) {
-                node.classList.add('btn-vertical');
-            }
-        },
-
         focus() {
             this.$refs.button[0].focus();
         },

From 6537e7597a6bde2f3a616ee3c47bcce30338ce5d Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Thu, 11 Dec 2025 23:50:01 +0100
Subject: [PATCH 02/12] Add auto orientation option to button groups

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 58 ++++++++++++++++++++-
 1 file changed, 56 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 8cd1c7146ac..c0f6f693847 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         :class="[
-            'group/button flex flex-wrap [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
+            'group/button flex flex-wrap relative [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
             '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
             '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
             '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
@@ -10,7 +10,7 @@
             '[&>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
             'dark:[&_button]:ring-0',
             'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
-            'shadow-ui-sm rounded-lg'
+            'shadow-ui-sm rounded-lg',
         ]"
         data-ui-button-group
     >
@@ -18,6 +18,56 @@
     </div>
 </template>
 
+<script>
+export default {
+    props: {
+        orientation: {
+            type: String,
+            default: 'horizontal',
+        },
+    },
+
+    data() {
+        return {
+            resizeObserver: null,
+        };
+    },
+
+    mounted() {
+        this.$el.dataset.orientation = this.orientation;
+        if (this.orientation === 'auto') {
+            this.observeOrientation();
+        }
+    },
+
+    beforeUnmount() {
+        this.unobserveOrientation();
+    },
+
+    methods: {
+        observeOrientation() {
+            this.resizeObserver = new ResizeObserver(() => this.checkOrientation(this.$el));
+            this.resizeObserver.observe(this.$el);
+        },
+
+        unobserveOrientation() {
+            this.resizeObserver?.disconnect();
+        },
+
+        checkOrientation(node) {
+            delete node.dataset.orientation;
+
+            const child = node.lastElementChild;
+            if (!child) return;
+
+            node.dataset.orientation = child.offsetTop > node.clientTop
+                ? 'vertical'
+                : 'horizontal';
+        },
+    },
+};
+</script>
+
 <style>
     [data-ui-button-group] [data-ui-group-target] {
 
@@ -36,4 +86,8 @@
             }
         }
     }
+
+    [data-ui-button-group][data-orientation='vertical'] {
+        @apply flex! flex-col;
+    }
 </style>

From b61030d8fd7c7d98dd49638f0d33efe678988f01 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Thu, 11 Dec 2025 23:50:11 +0100
Subject: [PATCH 03/12] Make button group fieldtype auto orientation

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/fieldtypes/ButtonGroupFieldtype.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
index d3ef10b7d6d..c1fd6ac7323 100644
--- a/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
+++ b/resources/js/components/fieldtypes/ButtonGroupFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <ButtonGroup ref="buttonGroup">
+    <ButtonGroup orientation="auto" ref="buttonGroup">
         <Button
             v-for="(option, $index) in options"
             ref="button"

From 2fbce2313dadd6c8cf2e44461ffb28492bffbae6 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 00:02:57 +0100
Subject: [PATCH 04/12] Add horizontal orientation styles

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 29 +++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index c0f6f693847..f2cef2f736d 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -2,15 +2,26 @@
     <div
         :class="[
             'group/button flex flex-wrap relative [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
-            '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-            '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
-            '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
-            '[&>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
-            '[&>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
-            '[&>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
             'dark:[&_button]:ring-0',
             'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
             'shadow-ui-sm rounded-lg',
+
+            // Horizontal orientation
+            '[&[data-orientation=horizontal]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+            '[&[data-orientation=horizontal]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
+            '[&[data-orientation=horizontal]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
+            '[&[data-orientation=horizontal]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
+            '[&[data-orientation=horizontal]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
+            '[&[data-orientation=horizontal]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
+
+            // Vertical orientation
+            '[&[data-orientation=vertical]]:flex-col',
+            '[&[data-orientation=vertical]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+            '[&[data-orientation=vertical]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-b-none',
+            '[&[data-orientation=vertical]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-t-none',
+            '[&[data-orientation=vertical]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
+            '[&[data-orientation=vertical]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-b-none',
+            '[&[data-orientation=vertical]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-t-none',
         ]"
         data-ui-button-group
     >
@@ -87,7 +98,9 @@ export default {
         }
     }
 
-    [data-ui-button-group][data-orientation='vertical'] {
-        @apply flex! flex-col;
+    /* Vertical orientation border handling */
+    [data-ui-button-group][data-orientation='vertical'] [data-ui-group-target]:not(:first-child) {
+        border-inline-start-width: 1px;
+        border-top: 0;
     }
 </style>

From 725e36e07ca1f7507fd7c643751a2eb9f8f8e660 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 00:17:07 +0100
Subject: [PATCH 05/12] Clean up button group styles

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 27 +++++++++------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index f2cef2f736d..55bfe6821d8 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -81,26 +81,21 @@ export default {
 
 <style>
     [data-ui-button-group] [data-ui-group-target] {
-
         @apply shadow-none;
+    }
 
-        &:not(:first-child):not([data-floating-toolbar] &) {
-            border-inline-start: 0;
-        }
-
-        /* Account for button groups being split apart on small screens */
-        [data-floating-toolbar] & {
-            @media (width >= 1024px) {
-                &:not(:first-child) {
-                    border-inline-start: 0;
-                }
-            }
-        }
+    [data-ui-button-group][data-orientation='horizontal'] [data-ui-group-target]:not(:first-child) {
+        border-inline-start: 0;
     }
 
-    /* Vertical orientation border handling */
     [data-ui-button-group][data-orientation='vertical'] [data-ui-group-target]:not(:first-child) {
-        border-inline-start-width: 1px;
-        border-top: 0;
+        border-block-start: 0;
+    }
+
+    /* Floating toolbar on small screens: items are split apart, keep borders */
+    @media (width < 1024px) {
+        [data-floating-toolbar] [data-ui-button-group] [data-ui-group-target]:not(:first-child) {
+            border-inline-start: 1px;
+        }
     }
 </style>

From baf2ff3a55dca9d9e42444ef572014f9ed9bb396 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 10:53:02 +0100
Subject: [PATCH 06/12] Switch to component setup script

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 83 +++++++++++----------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 55bfe6821d8..5b969839e99 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -1,5 +1,6 @@
 <template>
     <div
+        ref="el"
         :class="[
             'group/button flex flex-wrap relative [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
             'dark:[&_button]:ring-0',
@@ -29,54 +30,58 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        orientation: {
-            type: String,
-            default: 'horizontal',
-        },
-    },
+<script setup>
+import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
 
-    data() {
-        return {
-            resizeObserver: null,
-        };
+const props = defineProps({
+    orientation: {
+        type: String,
+        default: 'horizontal',
     },
+});
 
-    mounted() {
-        this.$el.dataset.orientation = this.orientation;
-        if (this.orientation === 'auto') {
-            this.observeOrientation();
-        }
-    },
+const el = ref(null);
+let resizeObserver = null;
 
-    beforeUnmount() {
-        this.unobserveOrientation();
-    },
+function observeOrientation() {
+    resizeObserver = new ResizeObserver(() => checkOrientation());
+    resizeObserver.observe(el.value);
+}
 
-    methods: {
-        observeOrientation() {
-            this.resizeObserver = new ResizeObserver(() => this.checkOrientation(this.$el));
-            this.resizeObserver.observe(this.$el);
-        },
+function unobserveOrientation() {
+    resizeObserver?.disconnect();
+}
 
-        unobserveOrientation() {
-            this.resizeObserver?.disconnect();
-        },
+async function checkOrientation() {
+    const node = el.value;
+    if (!node) return;
 
-        checkOrientation(node) {
-            delete node.dataset.orientation;
+    // 1) Remove orientation to allow natural layout (grow + wrap)
+    delete node.dataset.orientation;
 
-            const child = node.lastElementChild;
-            if (!child) return;
+    // 2) Wait for Vue to commit DOM updates
+    await nextTick();
 
-            node.dataset.orientation = child.offsetTop > node.clientTop
-                ? 'vertical'
-                : 'horizontal';
-        },
-    },
-};
+    // 3) Force reflow and measure
+    const child = node.lastElementChild;
+    const orientation = child && child.offsetTop > node.clientTop
+        ? 'vertical'
+        : 'horizontal';
+
+    // 4) Apply the final orientation
+    node.dataset.orientation = orientation;
+}
+
+onMounted(() => {
+    el.value.dataset.orientation = props.orientation;
+    if (props.orientation === 'auto') {
+        observeOrientation();
+    }
+});
+
+onBeforeUnmount(() => {
+    unobserveOrientation();
+});
 </script>
 
 <style>

From 293d6a695d76588358f940c2f81a135774c38240 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 12:41:16 +0100
Subject: [PATCH 07/12] Add wrapper to allow observing resize

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 103 +++++++++++---------
 1 file changed, 57 insertions(+), 46 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 5b969839e99..b26092c43c6 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -1,38 +1,45 @@
 <template>
-    <div
-        ref="el"
-        :class="[
-            'group/button flex flex-wrap relative [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
-            'dark:[&_button]:ring-0',
-            'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
-            'shadow-ui-sm rounded-lg',
-
-            // Horizontal orientation
-            '[&[data-orientation=horizontal]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-            '[&[data-orientation=horizontal]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
-            '[&[data-orientation=horizontal]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
-            '[&[data-orientation=horizontal]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
-            '[&[data-orientation=horizontal]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
-            '[&[data-orientation=horizontal]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
-
-            // Vertical orientation
-            '[&[data-orientation=vertical]]:flex-col',
-            '[&[data-orientation=vertical]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-            '[&[data-orientation=vertical]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-b-none',
-            '[&[data-orientation=vertical]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-t-none',
-            '[&[data-orientation=vertical]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
-            '[&[data-orientation=vertical]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-b-none',
-            '[&[data-orientation=vertical]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-t-none',
-        ]"
-        data-ui-button-group
-    >
-        <slot />
+    <div ref="wrapper">
+        <div
+            ref="group"
+            :class="[
+                'group/button flex flex-wrap relative [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
+                'dark:[&_button]:ring-0',
+                'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
+                'shadow-ui-sm rounded-lg',
+
+                // Orientation determined: limit width to ensure shadow hugs content
+                '[&[data-orientation]]:inline-flex',
+
+                // Horizontal orientation
+                '[&[data-orientation=horizontal]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+                '[&[data-orientation=horizontal]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
+                '[&[data-orientation=horizontal]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
+                '[&[data-orientation=horizontal]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
+                '[&[data-orientation=horizontal]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
+                '[&[data-orientation=horizontal]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
+
+                // Vertical orientation
+                '[&[data-orientation=vertical]]:flex-col',
+                '[&[data-orientation=vertical]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+                '[&[data-orientation=vertical]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-b-none',
+                '[&[data-orientation=vertical]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-t-none',
+                '[&[data-orientation=vertical]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
+                '[&[data-orientation=vertical]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-b-none',
+                '[&[data-orientation=vertical]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-t-none',
+            ]"
+            data-ui-button-group
+        >
+            <slot />
+        </div>
     </div>
 </template>
 
 <script setup>
 import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
 
+import debounce from '@/util/debounce';
+
 const props = defineProps({
     orientation: {
         type: String,
@@ -40,42 +47,46 @@ const props = defineProps({
     },
 });
 
-const el = ref(null);
+const wrapper = ref(null);
+const group = ref(null);
 let resizeObserver = null;
 
 function observeOrientation() {
-    resizeObserver = new ResizeObserver(() => checkOrientation());
-    resizeObserver.observe(el.value);
+    resizeObserver = new ResizeObserver(() => checkOrientationDebounced());
+    resizeObserver.observe(wrapper.value);
 }
 
 function unobserveOrientation() {
     resizeObserver?.disconnect();
 }
 
-async function checkOrientation() {
-    const node = el.value;
-    if (!node) return;
-
+function checkOrientation() {
     // 1) Remove orientation to allow natural layout (grow + wrap)
-    delete node.dataset.orientation;
+    setOrientation(null);
 
-    // 2) Wait for Vue to commit DOM updates
-    await nextTick();
+    // 2) Force reflow and measure
+    const child = group.value.lastElementChild;
+    const vertical = child && child.offsetTop > group.value.clientTop;
 
-    // 3) Force reflow and measure
-    const child = node.lastElementChild;
-    const orientation = child && child.offsetTop > node.clientTop
-        ? 'vertical'
-        : 'horizontal';
+    // 3) Apply the final orientation
+    setOrientation(vertical ? 'vertical' : 'horizontal');
+}
 
-    // 4) Apply the final orientation
-    node.dataset.orientation = orientation;
+const checkOrientationDebounced = debounce(checkOrientation, 50);
+
+function setOrientation(value) {
+    if (value) {
+        group.value.dataset.orientation = value;
+    } else {
+        delete group.value.dataset.orientation;
+    }
 }
 
 onMounted(() => {
-    el.value.dataset.orientation = props.orientation;
     if (props.orientation === 'auto') {
         observeOrientation();
+    } else {
+        setOrientation(props.orientation);
     }
 });
 

From 75892340c7d6e58d250a899183c2b7f178d96185 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 14:32:45 +0100
Subject: [PATCH 08/12] Build button group classes using cva

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue   | 119 ++++++++----------
 .../js/components/ui/Listing/BulkActions.vue  |   2 +-
 2 files changed, 54 insertions(+), 67 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index b26092c43c6..552b436cd5b 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -1,35 +1,6 @@
 <template>
     <div ref="wrapper">
-        <div
-            ref="group"
-            :class="[
-                'group/button flex flex-wrap relative [[data-floating-toolbar]_&]:justify-center [[data-floating-toolbar]_&]:gap-1 [[data-floating-toolbar]_&]:lg:gap-x-0',
-                'dark:[&_button]:ring-0',
-                'max-lg:[[data-floating-toolbar]_&_button]:rounded-md!',
-                'shadow-ui-sm rounded-lg',
-
-                // Orientation determined: limit width to ensure shadow hugs content
-                '[&[data-orientation]]:inline-flex',
-
-                // Horizontal orientation
-                '[&[data-orientation=horizontal]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-                '[&[data-orientation=horizontal]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
-                '[&[data-orientation=horizontal]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
-                '[&[data-orientation=horizontal]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
-                '[&[data-orientation=horizontal]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
-                '[&[data-orientation=horizontal]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
-
-                // Vertical orientation
-                '[&[data-orientation=vertical]]:flex-col',
-                '[&[data-orientation=vertical]>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-                '[&[data-orientation=vertical]>[data-ui-group-target]:first-child:not(:last-child)]:rounded-b-none',
-                '[&[data-orientation=vertical]>[data-ui-group-target]:last-child:not(:first-child)]:rounded-t-none',
-                '[&[data-orientation=vertical]>*:not(:first-child):not(:last-child):not(:only-child)_[data-ui-group-target]]:rounded-none',
-                '[&[data-orientation=vertical]>*:first-child:not(:last-child)_[data-ui-group-target]]:rounded-b-none',
-                '[&[data-orientation=vertical]>*:last-child:not(:first-child)_[data-ui-group-target]]:rounded-t-none',
-            ]"
-            data-ui-button-group
-        >
+        <div ref="group" :class="groupClasses" data-ui-button-group>
             <slot />
         </div>
     </div>
@@ -37,6 +8,7 @@
 
 <script setup>
 import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { cva } from 'cva'
 
 import debounce from '@/util/debounce';
 
@@ -45,61 +17,76 @@ const props = defineProps({
         type: String,
         default: 'horizontal',
     },
+    gap: {
+        type: [String, Boolean],
+        default: false,
+    },
+    justify: {
+        type: String,
+        default: 'start',
+    },
 });
 
+const hasOverflow = ref(false);
+
+const groupClasses = computed(() => cva({
+    base: [
+        'group/button flex flex-wrap relative',
+        'dark:[&_button]:ring-0',
+    ],
+    variants: {
+        orientation: {
+            vertical: 'flex-col',
+        },
+        justify: {
+            center: 'justify-center',
+        },
+        gap: {
+            false: 'rounded-lg shadow-ui-sm [&_[data-ui-group-target]]:shadow-none',
+            true: 'gap-1',
+        },
+    },
+    compoundVariants: [
+        { orientation: 'auto', hasOverflow: true, class: 'flex-col' },
+        { gap: 'auto', hasOverflow: false, class: 'rounded-lg shadow-ui-sm [&_[data-ui-group-target]]:shadow-none' },
+        { gap: 'auto', hasOverflow: true, class: [
+            '[>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+            '[>:not(:first-child):not(:last-child)_[data-ui-group-target]]:rounded-none',
+        ] },
+    ],
+})({
+    gap: props.gap,
+    justify: props.justify,
+    orientation: props.orientation,
+    hasOverflow: hasOverflow.value,
+}))
+
 const wrapper = ref(null);
 const group = ref(null);
 let resizeObserver = null;
 
-function observeOrientation() {
-    resizeObserver = new ResizeObserver(() => checkOrientationDebounced());
-    resizeObserver.observe(wrapper.value);
-}
+function checkOverflow() {
+    // Allow natural layout (grow + wrap)
+    // ???
 
-function unobserveOrientation() {
-    resizeObserver?.disconnect();
-}
-
-function checkOrientation() {
-    // 1) Remove orientation to allow natural layout (grow + wrap)
-    setOrientation(null);
-
-    // 2) Force reflow and measure
+    // Force reflow and measure
     const child = group.value.lastElementChild;
-    const vertical = child && child.offsetTop > group.value.clientTop;
-
-    // 3) Apply the final orientation
-    setOrientation(vertical ? 'vertical' : 'horizontal');
-}
-
-const checkOrientationDebounced = debounce(checkOrientation, 50);
-
-function setOrientation(value) {
-    if (value) {
-        group.value.dataset.orientation = value;
-    } else {
-        delete group.value.dataset.orientation;
-    }
+    hasOverflow.value = child && child.offsetTop > group.value.clientTop;
 }
 
 onMounted(() => {
-    if (props.orientation === 'auto') {
-        observeOrientation();
-    } else {
-        setOrientation(props.orientation);
+    if (props.orientation === 'auto' || props.gap === 'auto') {
+        resizeObserver = new ResizeObserver(debounce(checkOverflow, 100));
+        resizeObserver.observe(wrapper.value);
     }
 });
 
 onBeforeUnmount(() => {
-    unobserveOrientation();
+    resizeObserver?.disconnect();
 });
 </script>
 
 <style>
-    [data-ui-button-group] [data-ui-group-target] {
-        @apply shadow-none;
-    }
-
     [data-ui-button-group][data-orientation='horizontal'] [data-ui-group-target]:not(:first-child) {
         border-inline-start: 0;
     }
diff --git a/resources/js/components/ui/Listing/BulkActions.vue b/resources/js/components/ui/Listing/BulkActions.vue
index 63ef6e7f578..c48bf1131be 100644
--- a/resources/js/components/ui/Listing/BulkActions.vue
+++ b/resources/js/components/ui/Listing/BulkActions.vue
@@ -52,7 +52,7 @@ function actionFailed(response) {
             :transition="{ duration: 0.2, ease: 'easeInOut' }"
         >
             <div class="[.nav-open_&]:translate-x-23 transition-transform duration-300 relative space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
-            <ButtonGroup>
+            <ButtonGroup gap="auto" justify="center">
                 <Button
                     class="text-blue-500!"
                     :text="__n(`Deselect :count item|Deselect all :count items`, selections.length)"

From 0ea4f817025c1811f8db2a9494dace89b4b7d374 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 15:17:06 +0100
Subject: [PATCH 09/12] Collapse vertically

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 137 ++++++++++++--------
 1 file changed, 82 insertions(+), 55 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 552b436cd5b..bb968adad50 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -1,14 +1,14 @@
 <template>
-    <div ref="wrapper">
-        <div ref="group" :class="groupClasses" data-ui-button-group>
+    <div ref="wrapper" :class="{ invisible: measuringOverflow }">
+        <div ref="group" :class="groupClasses" :data-measuring="measuringOverflow || undefined" data-ui-button-group>
             <slot />
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, nextTick, onMounted, onBeforeUnmount } from 'vue';
-import { cva } from 'cva'
+import { ref, computed, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { cva } from 'cva';
 
 import debounce from '@/util/debounce';
 
@@ -28,55 +28,91 @@ const props = defineProps({
 });
 
 const hasOverflow = ref(false);
+const needsOverflowObserver = props.orientation === 'auto' || props.gap === 'auto';
+const measuringOverflow = ref(needsOverflowObserver);
 
-const groupClasses = computed(() => cva({
-    base: [
-        'group/button flex flex-wrap relative',
-        'dark:[&_button]:ring-0',
-    ],
-    variants: {
-        orientation: {
-            vertical: 'flex-col',
-        },
-        justify: {
-            center: 'justify-center',
-        },
-        gap: {
-            false: 'rounded-lg shadow-ui-sm [&_[data-ui-group-target]]:shadow-none',
-            true: 'gap-1',
+const groupClasses = computed(() => {
+    const collapseHorizontally = [
+        'rounded-lg shadow-ui-sm [&_[data-ui-group-target]]:shadow-none',
+        '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+        '[&>:not(:first-child):not(:last-child)_[data-ui-group-target]]:rounded-none',
+        '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-e-none',
+        '[&>:first-child:not(:last-child)_[data-ui-group-target]]:rounded-e-none',
+        '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-s-none',
+        '[&>:last-child:not(:first-child)_[data-ui-group-target]]:rounded-s-none',
+        '[&>[data-ui-group-target]:not(:first-child)]:border-s-0',
+        '[&>:not(:first-child)_[data-ui-group-target]]:border-s-0',
+    ];
+
+    const collapseVertically = [
+        'flex-col',
+        'rounded-lg shadow-ui-sm [&_[data-ui-group-target]]:shadow-none',
+        '[&>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
+        '[&>:not(:first-child):not(:last-child)_[data-ui-group-target]]:rounded-none',
+        '[&>[data-ui-group-target]:first-child:not(:last-child)]:rounded-b-none',
+        '[&>:first-child:not(:last-child)_[data-ui-group-target]]:rounded-b-none',
+        '[&>[data-ui-group-target]:last-child:not(:first-child)]:rounded-t-none',
+        '[&>:last-child:not(:first-child)_[data-ui-group-target]]:rounded-t-none',
+        '[&>[data-ui-group-target]:not(:first-child)]:border-t-0',
+        '[&>:not(:first-child)_[data-ui-group-target]]:border-t-0',
+    ];
+
+    return cva({
+        base: [
+            'group/button flex flex-wrap relative',
+            'dark:[&_button]:ring-0',
+        ],
+        variants: {
+            orientation: {
+                vertical: collapseVertically,
+            },
+            justify: {
+                center: 'justify-center',
+            },
+            gap: {
+                true: 'gap-1',
+                false: [groupBordersgapNone],
+            },
         },
-    },
-    compoundVariants: [
-        { orientation: 'auto', hasOverflow: true, class: 'flex-col' },
-        { gap: 'auto', hasOverflow: false, class: 'rounded-lg shadow-ui-sm [&_[data-ui-group-target]]:shadow-none' },
-        { gap: 'auto', hasOverflow: true, class: [
-            '[>[data-ui-group-target]:not(:first-child):not(:last-child)]:rounded-none',
-            '[>:not(:first-child):not(:last-child)_[data-ui-group-target]]:rounded-none',
-        ] },
-    ],
-})({
-    gap: props.gap,
-    justify: props.justify,
-    orientation: props.orientation,
-    hasOverflow: hasOverflow.value,
-}))
+        compoundVariants: [
+            { orientation: 'auto', hasOverflow: false, class: collapseHorizontally },
+            { orientation: 'auto', hasOverflow: true, class: collapseVertically },
+            { orientation: 'horizontal', gap: 'auto', hasOverflow: true, class: 'gap-1' },
+            { orientation: 'horizontal', gap: 'auto', hasOverflow: false, class: collapseHorizontally },
+        ],
+    })({
+        gap: props.gap,
+        justify: props.justify,
+        orientation: props.orientation,
+        hasOverflow: hasOverflow.value,
+    });
+});
 
 const wrapper = ref(null);
 const group = ref(null);
 let resizeObserver = null;
 
-function checkOverflow() {
-    // Allow natural layout (grow + wrap)
-    // ???
+async function checkOverflow() {
+    if (!group.value?.children.length) return;
 
-    // Force reflow and measure
-    const child = group.value.lastElementChild;
-    hasOverflow.value = child && child.offsetTop > group.value.clientTop;
+    // Enter measuring mode: force horizontal wrap
+    measuringOverflow.value = true;
+    await nextTick();
+
+    // Check if any child has wrapped to a new line
+    const children = Array.from(group.value.children);
+    const firstTop = children[0].offsetTop;
+    const lastTop = children[children.length - 1].offsetTop;
+    hasOverflow.value = lastTop > firstTop;
+
+    // Exit measuring mode
+    measuringOverflow.value = false;
 }
 
 onMounted(() => {
-    if (props.orientation === 'auto' || props.gap === 'auto') {
-        resizeObserver = new ResizeObserver(debounce(checkOverflow, 100));
+    if (needsOverflowObserver) {
+        checkOverflow();
+        resizeObserver = new ResizeObserver(debounce(checkOverflow, 50));
         resizeObserver.observe(wrapper.value);
     }
 });
@@ -87,18 +123,9 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-    [data-ui-button-group][data-orientation='horizontal'] [data-ui-group-target]:not(:first-child) {
-        border-inline-start: 0;
-    }
-
-    [data-ui-button-group][data-orientation='vertical'] [data-ui-group-target]:not(:first-child) {
-        border-block-start: 0;
-    }
-
-    /* Floating toolbar on small screens: items are split apart, keep borders */
-    @media (width < 1024px) {
-        [data-floating-toolbar] [data-ui-button-group] [data-ui-group-target]:not(:first-child) {
-            border-inline-start: 1px;
-        }
+    /* Force horizontal wrap layout during measurement to detect overflow */
+    [data-ui-button-group][data-measuring] {
+        flex-direction: row !important;
+        flex-wrap: wrap !important;
     }
 </style>

From 3fea128ffc5ab40eb4db4343ce2c0ae975c0643c Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 15:22:09 +0100
Subject: [PATCH 10/12] Remove unsupported variant

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index bb968adad50..07aab2d8a6d 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -69,10 +69,6 @@ const groupClasses = computed(() => {
             justify: {
                 center: 'justify-center',
             },
-            gap: {
-                true: 'gap-1',
-                false: [groupBordersgapNone],
-            },
         },
         compoundVariants: [
             { orientation: 'auto', hasOverflow: false, class: collapseHorizontally },

From 4a9e1d1f3b149be447551167bd69cffda59a224e Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 15:29:42 +0100
Subject: [PATCH 11/12] Fix horizontal styles

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 07aab2d8a6d..7721419574b 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -73,6 +73,7 @@ const groupClasses = computed(() => {
         compoundVariants: [
             { orientation: 'auto', hasOverflow: false, class: collapseHorizontally },
             { orientation: 'auto', hasOverflow: true, class: collapseVertically },
+            { orientation: 'horizontal', gap: false, class: collapseHorizontally },
             { orientation: 'horizontal', gap: 'auto', hasOverflow: true, class: 'gap-1' },
             { orientation: 'horizontal', gap: 'auto', hasOverflow: false, class: collapseHorizontally },
         ],

From abcddc439b38df5b4ad9c841990f908aeff78676 Mon Sep 17 00:00:00 2001
From: Philipp Daun <post@philippdaun.net>
Date: Fri, 12 Dec 2025 15:29:53 +0100
Subject: [PATCH 12/12] Make sure shadows hug contents

Signed-off-by: Philipp Daun <post@philippdaun.net>
---
 resources/js/components/ui/Button/Group.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Button/Group.vue b/resources/js/components/ui/Button/Group.vue
index 7721419574b..3c14fb1e1bf 100644
--- a/resources/js/components/ui/Button/Group.vue
+++ b/resources/js/components/ui/Button/Group.vue
@@ -59,7 +59,7 @@ const groupClasses = computed(() => {
 
     return cva({
         base: [
-            'group/button flex flex-wrap relative',
+            'group/button inline-flex flex-wrap relative',
             'dark:[&_button]:ring-0',
         ],
         variants: {
@@ -122,7 +122,6 @@ onBeforeUnmount(() => {
 <style>
     /* Force horizontal wrap layout during measurement to detect overflow */
     [data-ui-button-group][data-measuring] {
-        flex-direction: row !important;
-        flex-wrap: wrap !important;
+        @apply flex! flex-row!;
     }
 </style>