From f4895ee27ed6304d6147844e9c64fd935ad9d4d2 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 21 Feb 2026 13:31:48 +0100
Subject: o-card: add "collapsible" modifier

---
 src/objects/_card.scss | 50 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

(limited to 'src/objects')

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 5ae203d..056fea2 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -262,7 +262,7 @@
 					border-start-end-radius:   0;
 					border-end-start-radius:   props.get(vars.$rounding);
 				}
-    
+
 				&:last-child {
 					border-start-end-radius: props.get(vars.$rounding);
 					border-end-start-radius: 0;
@@ -279,5 +279,53 @@
 				}
 			}
 		}
+
+		@include bem.modifier('collapsible') {
+			display: block;
+			interpolate-size: allow-keywords;
+
+			@include bem.elem("header") {
+				display:     flex;
+				align-items: center;
+				gap:         1em;
+				cursor:      pointer;
+
+				&::before {
+					margin:      0;
+					inline-size: 1em;
+					font-size:   0.8em;
+					content:     "▶";
+				}
+			}
+
+			&::details-content {
+				opacity:    0;
+				block-size: 0;
+				overflow-y: clip;
+				transition:
+					content-visibility 0.2s allow-discrete,
+					opacity 0.2s ease,
+					block-size 0.2s ease;
+			}
+
+			&[open] {
+				@include bem.elem("header") {
+					&::before {
+						content: "▼";
+					}
+				}
+
+				&::details-content {
+					opacity:    1;
+					block-size: auto;
+				}
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				&::details-content {
+					transition: none;
+				}
+			}
+		}
 	}
 }
-- 
cgit v1.2.3-70-g09d2