From 433b62e31d8718bf146a1493247bcc86012c2d9f Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 20 Jul 2026 11:26:05 -0500
Subject: [PATCH] refactor(collapsible): rewrite DkCollapsible on v0
 Collapsible

Replace the native <details> hand-roll with the Collapsible compound
(Root / Activator / Cue / Content). Keeps the same activator slot and
theme tokens; open state is local via defineModel (default true).
---
 src/components/DkCollapsible.vue | 68 +++++++++++++++++---------------
 src/pages/DashboardPage.vue      |  1 -
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/src/components/DkCollapsible.vue b/src/components/DkCollapsible.vue
index cb9664a..d7c8ed2 100644
--- a/src/components/DkCollapsible.vue
+++ b/src/components/DkCollapsible.vue
@@ -1,34 +1,36 @@
 <script setup lang="ts">
+  import { Collapsible } from '@vuetify/v0'
+
   defineOptions({ name: 'DkCollapsible' })
 
-  const { open = false } = defineProps<{
-    open?: boolean
-  }>()
+  // Unbound v-model keeps local open state; default true matches sidebar sections.
+  const open = defineModel<boolean>('open', { default: true })
 </script>
 
 <template>
-  <details class="dk-collapsible" :open="open">
-    <summary class="dk-collapsible__trigger">
+  <Collapsible.Root v-model="open" class="dk-collapsible">
+    <Collapsible.Activator class="dk-collapsible__trigger">
       <slot name="activator" />
-      <svg
-        class="dk-collapsible__icon"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <polyline points="6 9 12 15 18 9" />
-      </svg>
-    </summary>
+      <Collapsible.Cue class="dk-collapsible__icon" as="span">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </Collapsible.Cue>
+    </Collapsible.Activator>
 
-    <div class="dk-collapsible__content">
+    <Collapsible.Content class="dk-collapsible__content">
       <slot />
-    </div>
-  </details>
+    </Collapsible.Content>
+  </Collapsible.Root>
 </template>
 
 <style scoped>
@@ -40,31 +42,33 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    width: 100%;
     padding: 0.75rem 1rem;
     cursor: pointer;
     font-weight: 500;
+    font: inherit;
     color: var(--v0-theme-text);
-    list-style: none;
+    background: transparent;
+    border: none;
+    text-align: left;
   }
 
   .dk-collapsible__icon {
     margin-left: auto;
-  }
-
-  .dk-collapsible__trigger::-webkit-details-marker {
-    display: none;
-  }
-
-  .dk-collapsible__icon {
-    transition: transform 0.2s ease;
+    display: inline-flex;
     color: var(--v0-theme-muted);
+    transition: transform 0.2s ease;
   }
 
-  .dk-collapsible[open] .dk-collapsible__icon {
+  .dk-collapsible__icon[data-state='open'] {
     transform: rotate(180deg);
   }
 
   .dk-collapsible__content {
     padding: 0 1rem 0.75rem;
   }
+
+  .dk-collapsible__content[hidden] {
+    display: none;
+  }
 </style>
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index 88bd8f1..7287120 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -90,7 +90,6 @@
           <DkCollapsible
             v-for="section in sidebarSections"
             :key="section.label"
-            open
           >
             <template #activator>
               <svg class="dk-icon" viewBox="0 0 24 24" width="16" height="16">