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.
This commit is contained in:
Florian Schroedl
2026-03-03 17:12:29 +01:00
parent 0dd8a9c8bf
commit 1b4929224b
7 changed files with 38 additions and 27 deletions

View File

@@ -25,27 +25,24 @@
class (str " " class))
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))
[:details base-attrs
[:summary {:class "accordion-trigger"} title]
(into [:div {:class "accordion-content"}] 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
[:summary {:class ["accordion-trigger"]} title]
[:div {:class ["accordion-content"]}]]
children))
[:details base-attrs
[:summary {:class ["accordion-trigger"]} title]
(into [:div {:class ["accordion-content"]}] 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
[:summary {:class "accordion-trigger"} title]
[:div {:class "accordion-content"}]]
children))))
[:details base-attrs
[:summary {:class "accordion-trigger"} title]
(into [:div {:class "accordion-content"}] children)])))