[6.x] Merge external class attrs through twMerge in UI components (#14379)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: jasonvarga

resources/js/components/ui/Badge.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from './Icon/Icon.vue';
 import { Link } from '@inertiajs/vue3';
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps({
     /** Appended text */
     append: { type: [String, Number, Boolean, null], default: null },
@@ -30,6 +32,7 @@ const props = defineProps({
     text: { type: [String, Number, Boolean, null], default: null },
 });
 
+const attrs = useAttrs();
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 const tag = computed(() => {
@@ -78,12 +81,17 @@ const badgeClasses = computed(() => {
         asButton: props.href ?? props.as == 'button' ? true : false,
     });
 
-    return twMerge(classes);
+    return twMerge(classes, attrs.class);
+});
+
+const restAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+    return rest;
 });
 </script>
 
 <template>
-    <component :is="tag" :class="badgeClasses" :href="props.href" :target="target" data-ui-badge>
+    <component :is="tag" v-bind="restAttrs" :class="badgeClasses" :href="props.href" :target="target" data-ui-badge>
         <span v-if="props.prepend" class="font-medium border-e border-inherit ps-0.5 pe-1.5">{{ prepend }}</span>
         <Icon v-if="icon" :name="icon" />
         <slot v-if="hasDefaultSlot" />

resources/js/components/ui/Button/Button.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useAttrs, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import Icon from '../Icon/Icon.vue';
 import { Link } from '@inertiajs/vue3';
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps({
     /** The element or component this component should render as */
     as: { type: String, default: null },
@@ -35,6 +37,7 @@ const props = defineProps({
     variant: { type: String, default: 'default' },
 });
 
+const attrs = useAttrs();
 const slots = useSlots();
 const hasDefaultSlot = !!slots.default;
 const tag = computed(() => {
@@ -109,13 +112,19 @@ const buttonClasses = computed(() => {
         iconOnly: iconOnly.value,
     });
 
-    return twMerge(classes);
+    return twMerge(classes, attrs.class);
+});
+
+const restAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+    return rest;
 });
 </script>
 
 <template>
     <component
         :is="tag"
+        v-bind="restAttrs"
         :class="buttonClasses"
         :disabled="disabled || loading"
         :data-ui-group-target="['subtle', 'ghost'].includes(props.variant) ? null : true"

resources/js/components/ui/Toggle/Item.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { computed, inject, useSlots } from 'vue';
+import { computed, inject, useAttrs, useSlots } from 'vue';
 import { cva } from 'cva';
 import { twMerge } from 'tailwind-merge';
 import { ToggleGroupItem } from 'reka-ui';
 import Icon from '../Icon/Icon.vue';
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps({
     /** Value of the toggle item */
     value: { type: String, required: true },
@@ -18,6 +20,7 @@ const props = defineProps({
     ariaDescribedby: { type: String, default: null },
 });
 
+const attrs = useAttrs();
 const variant = inject('toggleVariant', 'default');
 const size = inject('toggleSize', 'base');
 
@@ -78,12 +81,18 @@ const toggleItemClasses = computed(() => {
         iconOnly: iconOnly.value,
     });
 
-    return twMerge(classes);
+    return twMerge(classes, attrs.class);
+});
+
+const restAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+    return rest;
 });
 </script>
 
 <template>
     <ToggleGroupItem
+        v-bind="restAttrs"
         :value="value"
         :aria-label="accessibleLabel"
         :aria-describedby="ariaDescribedby"