o-card: add "collapsible" modifier

1 files changed, 49 insertions, 1 deletions

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;
+                                }
+                        }
+                }
         }
 }