fix(card): reduce internal spacing and bump footer button size

Refactor card to use flex column with gap-based spacing instead of
per-section padding, tightening the space between header, body, and
footer from size-6 to size-3. Add .card-footer .btn override to
render buttons at font-base size.

src/ui/accordion.cljc

@@ -3,9 +3,8 @@
 
 (defn accordion-class-list
   "Generate a vector of CSS class strings for an accordion item."
-  [{:keys [open]}]
-  (cond-> ["accordion"]
-    open (conj "accordion--open")))
+  [_opts]
+  ["accordion"])
 
 (defn accordion-classes
   "Generate CSS class string for an accordion."
@@ -13,40 +12,40 @@
   (str/join " " (accordion-class-list opts)))
 
 (defn accordion
-  "Render an accordion (collapsible) item.
+  "Render an accordion (collapsible) item using native <details>/<summary>.
 
    Props:
      :title - trigger text
-     :open  - boolean, whether expanded
+     :open  - boolean, whether initially expanded
      :class - additional CSS classes
      :attrs - additional HTML attributes"
   [{:keys [title open class attrs] :as _props} & children]
   #?(:squint
-     (let [classes (cond-> (accordion-classes {:open open})
+     (let [classes (cond-> (accordion-classes {})
                      class (str " " class))
-           base-attrs (merge {:class classes} attrs)]
-       (into [:div base-attrs
-              [:div {:class "accordion-trigger"} title]]
-             (when open
-               [[:div {:class "accordion-content"}
-                 (into [:div] children)]])))
+           base-attrs (cond-> (merge {:class classes} attrs)
+                        open (assoc :open true))]
+       (into [:details base-attrs
+              [:summary {:class "accordion-trigger"} title]
+              [:div {:class "accordion-content"}]]
+             children))
 
      :cljs
-     (let [cls (accordion-class-list {:open open})
+     (let [cls (accordion-class-list {})
            classes (cond-> cls class (conj class))
-           base-attrs (merge {:class classes} attrs)]
-       (into [:div base-attrs
-              [:div {:class ["accordion-trigger"]} title]]
-             (when open
-               [[:div {:class ["accordion-content"]}
-                 (into [:div] children)]])))
+           base-attrs (cond-> (merge {:class classes} attrs)
+                        open (assoc :open true))]
+       (into [:details base-attrs
+              [:summary {:class ["accordion-trigger"]} title]
+              [:div {:class ["accordion-content"]}]]
+             children))
 
      :clj
-     (let [classes (cond-> (accordion-classes {:open open})
+     (let [classes (cond-> (accordion-classes {})
                      class (str " " class))
-           base-attrs (merge {:class classes} attrs)]
-       (into [:div base-attrs
-              [:div {:class "accordion-trigger"} title]]
-             (when open
-               [[:div {:class "accordion-content"}
-                 (into [:div] children)]])))))
+           base-attrs (cond-> (merge {:class classes} attrs)
+                        open (assoc :open true))]
+       (into [:details base-attrs
+              [:summary {:class "accordion-trigger"} title]
+              [:div {:class "accordion-content"}]]
+             children))))

src/ui/accordion.css

@@ -31,6 +31,14 @@
   user-select: none;
   color: var(--fg-0);
   transition: background-color 150ms ease;
+  list-style: none;
+}
+
+/* Hide default marker across browsers */
+.accordion-trigger::-webkit-details-marker,
+.accordion-trigger::marker {
+  display: none;
+  content: "";
 }
 
 .accordion-trigger:hover {
@@ -49,11 +57,11 @@
   transition: transform 150ms ease;
 }
 
-.accordion--open > .accordion-trigger {
+.accordion[open] > .accordion-trigger {
   border-bottom: var(--border-0);
 }
 
-.accordion--open > .accordion-trigger::after {
+.accordion[open] > .accordion-trigger::after {
   transform: rotate(180deg);
 }
 

src/ui/card.css

@@ -1,18 +1,20 @@
 .card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-3);
   background: var(--bg-1);
   color: var(--fg-0);
   border: var(--border-0);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-0);
   overflow: hidden;
+  padding: var(--size-6);
 }
 
 .card-header {
   display: flex;
   flex-direction: column;
   gap: var(--size-1);
-  padding: var(--size-6);
-  padding-bottom: 0;
 }
 
 .card-header h1,
@@ -31,13 +33,16 @@
 }
 
 .card-body {
-  padding: var(--size-6);
 }
 
 .card-footer {
   display: flex;
   justify-content: flex-end;
   gap: var(--size-2);
-  padding: var(--size-6);
-  padding-top: 0;
+}
+
+.card-footer .btn {
+  padding: var(--size-2) var(--size-4);
+  font-size: var(--font-base);
+  line-height: var(--size-5);
 }