649
649
}
650
650
.slot-accordion[data-done="true"] > summary { border-left: 4px solid var(--brass); }
651
651
652
-
Removed:
/* Unfold and collapse. The panel is a one-row grid whose track eases from 0fr to
653
-
Removed:
1fr; @starting-style supplies the 0fr starting state at the moment the
654
-
Removed:
<details> renders its content, so opening slides everywhere modern with no
655
-
Removed:
script. Where the browser can also interpolate the details content's own size
656
-
Removed:
(interpolate-size + ::details-content), closing slides too, so the slot
657
-
Removed:
leaving the exclusive group folds up as the chosen one unfolds. Elsewhere the
658
-
Removed:
close snaps: an un-rendered node cannot animate. Reduced motion disables
659
-
Removed:
all of it. */
660
-
Removed:
.slot-accordion {
661
-
Removed:
interpolate-size: allow-keywords;
662
-
Removed:
}
652
+
Added:
/* Unfold and collapse. ::details-content is the box the browser toggles for a
653
+
Added:
<details>; keep it rendered when closed and drive a grid row from 0fr to 1fr
654
+
Added:
off the [open] attribute, so both opening and closing ease in every browser
655
+
Added:
that has ::details-content. A first-render starting style would not do: a
656
+
Added:
closed panel stays in the tree with content-visibility hidden, so a toggle is
657
+
Added:
not a first render and @starting-style never fires. visibility keeps a closed
658
+
Added:
panel out of the tab order and the accessibility tree; it flips to visible at
659
+
Added:
the start of an open and to hidden at the end of a close. Browsers without
660
+
Added:
::details-content ignore all of this and snap. Reduced motion snaps too. */
663
661
.slot-accordion::details-content {
664
-
Removed:
block-size: 0;
665
-
Removed:
overflow: clip;
662
+
Added:
content-visibility: visible;
663
+
Added:
display: grid;
664
+
Added:
grid-template-rows: 0fr;
665
+
Added:
visibility: hidden;
666
666
transition:
667
-
Removed:
block-size 220ms ease,
668
-
Removed:
content-visibility 220ms allow-discrete;
667
+
Added:
grid-template-rows 220ms ease,
668
+
Added:
visibility 220ms;
669
669
}
670
670
.slot-accordion[open]::details-content {
671
-
Removed:
block-size: auto;
672
-
Removed:
}
673
-
Removed:
.slot-accordion > .slot-panel {
674
-
Removed:
display: grid;
675
671
grid-template-rows: 1fr;
676
-
Removed:
transition: grid-template-rows 220ms ease;
672
+
Added:
visibility: visible;
677
673
}
678
-
Removed:
.slot-accordion > .slot-panel > .slot-panel-body {
674
+
Added:
.slot-accordion > .slot-panel {
679
675
min-height: 0;
680
676
overflow: clip;
681
677
}
682
-
Removed:
@starting-style {
683
-
Removed:
.slot-accordion[open] > .slot-panel {
684
-
Removed:
grid-template-rows: 0fr;
685
-
Removed:
}
686
-
Removed:
}
687
678
@media (prefers-reduced-motion: reduce) {
688
679
.slot-accordion::details-content { transition: none; }
689
-
Removed:
.slot-accordion > .slot-panel { transition: none; }
680
+
Added:
}
690
681
}
691
682
}
692
683