fix(accordion): place children inside content div and add group wrapper

Children were appended to the outer <details> element instead of inside
the .accordion-content div, causing text to render outside the accordion
box. Also adds .accordion-group wrapper to eliminate parent gap between
stacked items, and styles content with smaller font and muted color.

dev/hiccup/src/dev/hiccup.clj

@@ -76,9 +76,10 @@
 ;; ── Accordion ───────────────────────────────────────────────────────
 (defn accordion-demo []
   (section "Accordion"
+    [:div {:class "accordion-group"}
      (accordion/accordion {:title "What is this framework?"} "A cross-target component library.")
      (accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call functions.")
-    (accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")))
+     (accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")]))
 
 ;; ── Table ───────────────────────────────────────────────────────────
 (defn table-demo []

dev/replicant/src/dev/replicant.cljs

@@ -77,9 +77,10 @@
 ;; ── Accordion ───────────────────────────────────────────────────────
 (defn accordion-demo []
   (section "Accordion"
+    [:div {:class ["accordion-group"]}
      (accordion/accordion {:title "What is this framework?"} "A cross-target component library.")
      (accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call functions.")
-    (accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")))
+     (accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")]))
 
 ;; ── Table ───────────────────────────────────────────────────────────
 (defn table-demo []

dev/squint/src/dev/squint.cljs

@@ -85,9 +85,10 @@
 ;; ── Accordion ───────────────────────────────────────────────────────
 (defn accordion-demo []
   (section "Accordion"
+    [:div {:class "accordion-group"}
      (accordion/accordion {:title "What is this framework?"} "A cross-target component library.")
      (accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call functions.")
-    (accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")))
+     (accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")]))
 
 ;; ── Table ───────────────────────────────────────────────────────────
 (defn table-demo []

src/ui/accordion.cljc

@@ -25,27 +25,24 @@
                      class (str " " class))
            base-attrs (cond-> (merge {:class classes} attrs)
                         open (assoc :open true))]
-       (into [:details base-attrs
+       [:details base-attrs
         [:summary {:class "accordion-trigger"} title]
-              [:div {:class "accordion-content"}]]
+        (into [:div {:class "accordion-content"}] children)])
-             children))
 
      :cljs
      (let [cls (accordion-class-list {})
            classes (cond-> cls class (conj class))
            base-attrs (cond-> (merge {:class classes} attrs)
                         open (assoc :open true))]
-       (into [:details base-attrs
+       [:details base-attrs
         [:summary {:class ["accordion-trigger"]} title]
-              [:div {:class ["accordion-content"]}]]
+        (into [:div {:class ["accordion-content"]}] children)])
-             children))
 
      :clj
      (let [classes (cond-> (accordion-classes {})
                      class (str " " class))
            base-attrs (cond-> (merge {:class classes} attrs)
                         open (assoc :open true))]
-       (into [:details base-attrs
+       [:details base-attrs
         [:summary {:class "accordion-trigger"} title]
-              [:div {:class "accordion-content"}]]
+        (into [:div {:class "accordion-content"}] children)])))
-             children))))

src/ui/accordion.css

@@ -1,3 +1,8 @@
+.accordion-group {
+  display: flex;
+  flex-direction: column;
+}
+
 .accordion {
   border: var(--border-0);
   border-radius: var(--radius-md);
@@ -67,4 +72,6 @@
 
 .accordion-content {
   padding: var(--size-4);
+  font-size: var(--font-sm);
+  color: var(--fg-1);
 }

src/ui/card.css

@@ -35,13 +35,17 @@
 .card-body {
 }
 
+.card-body > *:first-child { margin-top: 0; }
+.card-body > *:last-child { margin-bottom: 0; }
+
 .card-footer {
   display: flex;
   justify-content: flex-end;
   gap: var(--size-2);
 }
 
-.card-footer .btn {
+.card-footer .btn,
+.dialog-footer .btn {
   padding: var(--size-2) var(--size-4);
   font-size: var(--font-base);
   line-height: var(--size-5);

src/ui/dialog.css

@@ -17,6 +17,8 @@
 .dialog[open] {
   display: flex;
   flex-direction: column;
+  gap: var(--size-3);
+  padding: var(--size-6);
 }
 
 .dialog::backdrop {
@@ -28,8 +30,6 @@
   display: flex;
   flex-direction: column;
   gap: var(--size-1);
-  padding: var(--size-6);
-  padding-bottom: 0;
 }
 
 .dialog-header h1,
@@ -48,14 +48,14 @@
 }
 
 .dialog-body {
-  padding: var(--size-6);
   overflow-y: auto;
 }
 
+.dialog-body > *:first-child { margin-top: 0; }
+.dialog-body > *:last-child { margin-bottom: 0; }
+
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
   gap: var(--size-2);
-  padding: var(--size-6);
-  padding-top: 0;
 }