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

@@ -0,0 +1,5 @@
+---
+'@vben-core/shadcn-ui': patch
+---
+
+fix(@vben-core/shadcn-ui): preserve outlines inside collapsible content

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');
+  });
+});

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>