From 9c43ba0d6a41dd35aa037634ba29bc66388f6364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=9E=E5=8F=AF=20=C2=B7=20YU=20KE?= <1798456934@qq.com>
Date: Mon, 7 Sep 2026 21:58:04 +0800
Subject: [PATCH] fix(@vben-core/shadcn-ui): preserve radio outlines in
 collapsible (#8376)

* style(@vben-core/shadcn-ui): format collapsible test

* fix(@vben-core/shadcn-ui): preserve collapsible outlines
---
 .changeset/tidy-radios-collapsible.md         |  5 ++
 .../collapsible/__tests__/collapsible.test.ts | 47 +++++++++++++++++++
 .../components/collapsible/collapsible.vue    |  2 +-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tidy-radios-collapsible.md
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/components/collapsible/__tests__/collapsible.test.ts

diff --git a/.changeset/tidy-radios-collapsible.md b/.changeset/tidy-radios-collapsible.md
new file mode 100644
index 000000000..e2a1782ae
--- /dev/null
+++ b/.changeset/tidy-radios-collapsible.md
@@ -0,0 +1,5 @@
+---
+'@vben-core/shadcn-ui': patch
+---
+
+fix(@vben-core/shadcn-ui): preserve outlines inside collapsible content
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/__tests__/collapsible.test.ts b/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/__tests__/collapsible.test.ts
new file mode 100644
index 000000000..eaa5d2572
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/__tests__/collapsible.test.ts
@@ -0,0 +1,47 @@
+import { createApp, defineComponent, h, nextTick, ref } from 'vue';
+
+import { afterEach, describe, expect, it } from 'vitest';
+
+import VbenCollapsible from '../collapsible.vue';
+
+let activeApp: ReturnType<typeof createApp> | undefined;
+
+afterEach(() => {
+  activeApp?.unmount();
+  activeApp = undefined;
+  document.body.innerHTML = '';
+});
+
+describe('VbenCollapsible', () => {
+  it('keeps a one-pixel paint buffer around animated content', async () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+
+    const open = ref(true);
+    const Consumer = defineComponent(
+      () => () =>
+        h(
+          VbenCollapsible,
+          { open: open.value },
+          {
+            collapsibleContent: () => h('div', { class: 'content-probe' }),
+          },
+        ),
+    );
+
+    activeApp = createApp(Consumer);
+    activeApp.mount(host);
+    await nextTick();
+
+    const content = host.querySelector('[class~="-mx-px"]');
+    expect(content).toBeInstanceOf(HTMLElement);
+    if (!(content instanceof HTMLElement)) return;
+
+    expect(content.classList.contains('px-px')).toBe(true);
+    expect(content.classList.contains('overflow-hidden')).toBe(true);
+
+    open.value = false;
+    await nextTick();
+    expect(content.getAttribute('data-state')).toBe('closed');
+  });
+});
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue b/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue
index d17d6ba7d..9876bb35b 100755
--- a/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue
@@ -71,7 +71,7 @@ defineExpose({
     <slot name="visibleContent" :open></slot>
 
     <CollapsibleContent
-      class="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden justify-start"
+      class="data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up -mx-px overflow-hidden px-px justify-start"
     >
       <slot name="collapsibleContent" :open></slot>
     </CollapsibleContent>