@birdycom/omniacss 0.11.0 → 0.11.2

package/scss/utilities/_shapes.scss

@@ -1,72 +1,72 @@
-// SCSS Document
-// File: src/scss/utilities/_shapes.scss
-// Description: clip-path, shape-outside and shape-margin utilities (CSS Shapes / CSS Masking).
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .clip-* classes (geometric clip paths) and .shape-* classes (text wrap around floats).
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
-// Note: shape-outside only has effect on floated elements (e.g. use with .float-left).
-// Map: clip-path basic shapes -> polygons -> shape() -> clip border -> shape-outside -> shape-margin
-
-/* Clip path — basic shapes */
-.clip-none { clip-path: none; }
-.clip-circle { clip-path: circle(50%); }
-.clip-ellipse { clip-path: ellipse(50% 40%); }
-.clip-inset-4 { clip-path: inset(4px); }
-.clip-inset-8 { clip-path: inset(8px round 8px); }
-
-/* Clip path — polygons */
-.clip-polygon-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
-.clip-polygon-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
-.clip-polygon-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
-.clip-polygon-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
-.clip-polygon-arrow-right { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }
-.clip-polygon-chevron { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
-
-/* Clip path — shape() function (CSS Shapes Level 2, responsive curves) */
-.clip-shape-wave {
-  clip-path: shape(from 0% 0%, line to 100% 0%, line to 100% 85%, curve to 0% 85% with 50% 115%, close);
-}
-
-/* Clip path — reference box */
-.clip-border-box { clip-path: border-box; }
-.clip-padding-box { clip-path: padding-box; }
-.clip-content-box { clip-path: content-box; }
-
-/* Clip border — a border that follows the clip-path of the child element.
-   A normal border/outline is clipped away by clip-path, so put .clip-border-* on a wrapper.
-   Color = currentcolor of the wrapper (e.g. .text-dodgerblue-20); the clipped child needs an opaque background. */
-.clip-border,
-.clip-border-2,
-.clip-border-4 {
-  --oc-clip-border-color: currentcolor;
-}
-.clip-border {
-  filter: drop-shadow(1px 0 0 var(--oc-clip-border-color)) drop-shadow(-1px 0 0 var(--oc-clip-border-color))
-    drop-shadow(0 1px 0 var(--oc-clip-border-color)) drop-shadow(0 -1px 0 var(--oc-clip-border-color));
-}
-.clip-border-2 {
-  filter: drop-shadow(2px 0 0 var(--oc-clip-border-color)) drop-shadow(-2px 0 0 var(--oc-clip-border-color))
-    drop-shadow(0 2px 0 var(--oc-clip-border-color)) drop-shadow(0 -2px 0 var(--oc-clip-border-color));
-}
-.clip-border-4 {
-  filter: drop-shadow(4px 0 0 var(--oc-clip-border-color)) drop-shadow(-4px 0 0 var(--oc-clip-border-color))
-    drop-shadow(0 4px 0 var(--oc-clip-border-color)) drop-shadow(0 -4px 0 var(--oc-clip-border-color));
-}
-
-/* Shape outside — wrap inline content around a float */
-.shape-none { shape-outside: none; }
-.shape-circle { shape-outside: circle(50%); }
-.shape-ellipse { shape-outside: ellipse(50% 40%); }
-.shape-margin-box { shape-outside: margin-box; }
-.shape-border-box { shape-outside: border-box; }
-.shape-padding-box { shape-outside: padding-box; }
-.shape-content-box { shape-outside: content-box; }
-
-/* Shape margin */
-.shape-m-0 { shape-margin: 0; }
-.shape-m-1 { shape-margin: 0.25rem; }
-.shape-m-2 { shape-margin: 0.5rem; }
-.shape-m-4 { shape-margin: 1rem; }
+// SCSS Document
+// File: src/scss/utilities/_shapes.scss
+// Description: clip-path, shape-outside and shape-margin utilities (CSS Shapes / CSS Masking).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .clip-* classes (geometric clip paths) and .shape-* classes (text wrap around floats).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
+// Note: shape-outside only has effect on floated elements (e.g. use with .float-left).
+// Map: clip-path basic shapes -> polygons -> shape() -> clip border -> shape-outside -> shape-margin
+
+/* Clip path — basic shapes */
+.clip-none { clip-path: none; }
+.clip-circle { clip-path: circle(50%); }
+.clip-ellipse { clip-path: ellipse(50% 40%); }
+.clip-inset-4 { clip-path: inset(4px); }
+.clip-inset-8 { clip-path: inset(8px round 8px); }
+
+/* Clip path — polygons */
+.clip-polygon-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
+.clip-polygon-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
+.clip-polygon-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
+.clip-polygon-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
+.clip-polygon-arrow-right { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); }
+.clip-polygon-chevron { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
+
+/* Clip path — shape() function (CSS Shapes Level 2, responsive curves) */
+.clip-shape-wave {
+  clip-path: shape(from 0% 0%, line to 100% 0%, line to 100% 85%, curve to 0% 85% with 50% 115%, close);
+}
+
+/* Clip path — reference box */
+.clip-border-box { clip-path: border-box; }
+.clip-padding-box { clip-path: padding-box; }
+.clip-content-box { clip-path: content-box; }
+
+/* Clip border — a border that follows the clip-path of the child element.
+   A normal border/outline is clipped away by clip-path, so put .clip-border-* on a wrapper.
+   Color = currentcolor of the wrapper (e.g. .text-dodgerblue-20); the clipped child needs an opaque background. */
+.clip-border,
+.clip-border-2,
+.clip-border-4 {
+  --oc-clip-border-color: currentcolor;
+}
+.clip-border {
+  filter: drop-shadow(1px 0 0 var(--oc-clip-border-color)) drop-shadow(-1px 0 0 var(--oc-clip-border-color))
+    drop-shadow(0 1px 0 var(--oc-clip-border-color)) drop-shadow(0 -1px 0 var(--oc-clip-border-color));
+}
+.clip-border-2 {
+  filter: drop-shadow(2px 0 0 var(--oc-clip-border-color)) drop-shadow(-2px 0 0 var(--oc-clip-border-color))
+    drop-shadow(0 2px 0 var(--oc-clip-border-color)) drop-shadow(0 -2px 0 var(--oc-clip-border-color));
+}
+.clip-border-4 {
+  filter: drop-shadow(4px 0 0 var(--oc-clip-border-color)) drop-shadow(-4px 0 0 var(--oc-clip-border-color))
+    drop-shadow(0 4px 0 var(--oc-clip-border-color)) drop-shadow(0 -4px 0 var(--oc-clip-border-color));
+}
+
+/* Shape outside — wrap inline content around a float */
+.shape-none { shape-outside: none; }
+.shape-circle { shape-outside: circle(50%); }
+.shape-ellipse { shape-outside: ellipse(50% 40%); }
+.shape-margin-box { shape-outside: margin-box; }
+.shape-border-box { shape-outside: border-box; }
+.shape-padding-box { shape-outside: padding-box; }
+.shape-content-box { shape-outside: content-box; }
+
+/* Shape margin */
+.shape-m-0 { shape-margin: 0; }
+.shape-m-1 { shape-margin: 0.25rem; }
+.shape-m-2 { shape-margin: 0.5rem; }
+.shape-m-4 { shape-margin: 1rem; }

package/scss/utilities/_sizing_logical.scss

@@ -1,99 +1,99 @@
-// SCSS Document
-// File: src/scss/utilities/_sizing_logical.scss
-// Description: Size keywords (3xs … 7xl, line-height units) and the logical size scale (inline-size, block-size,
-//              min/max in both axes) that complete the width/height families of _sizing.scss and _layout_extras.scss.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.4.0
-// Framework: OmniaCSS
-// Purpose: Generate .w-3xs … .w-7xl, .min-w-3xs …, .max-w-3xs/2xs, .{w,h,size,min-w,min-h,max-w,max-h}-lh/rlh,
-//          .inline-size-{n}, .block-size-{n}, .min-inline-size-*, .max-inline-size-*, .min-block-size-*, .max-block-size-*.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
-// Note: Same quarter-rem scale as .size-{n} (size-4 = 1rem), so logical and physical icon/box sizes line up.
-@use "sass:string";
-
-// Map: size keywords -> line-height units -> logical scale -> logical min/max
-
-$_container-sizes: (
-  '3xs': 16rem, '2xs': 18rem, 'xs': 20rem, 'sm': 24rem, 'md': 28rem, 'lg': 32rem, 'xl': 36rem,
-  '2xl': 42rem, '3xl': 48rem, '4xl': 56rem, '5xl': 64rem, '6xl': 72rem, '7xl': 80rem
-);
-
-/* Size keywords — container-like widths (same values as .max-w-xs … .max-w-7xl) */
-@each $key, $value in $_container-sizes {
-  .w-#{$key} { width: $value; }
-  .min-w-#{$key} { min-width: $value; }
-  .inline-size-#{$key} { inline-size: $value; }
-  .min-inline-size-#{$key} { min-inline-size: $value; }
-  .max-inline-size-#{$key} { max-inline-size: $value; }
-}
-.max-w-3xs { max-width: 16rem; }
-.max-w-2xs { max-width: 18rem; }
-
-/* Line-height units — size a box in lines of text (lh) or root lines (rlh) */
-@each $unit in (lh, rlh) {
-  $one: string.unquote("1#{$unit}"); // "1#{$unit}" without quotes would compile to "1 lh"
-  .w-#{$unit} { width: $one; }
-  .h-#{$unit} { height: $one; }
-  .size-#{$unit} { width: $one; height: $one; }
-  .min-w-#{$unit} { min-width: $one; }
-  .min-h-#{$unit} { min-height: $one; }
-  .max-w-#{$unit} { max-width: $one; }
-  .max-h-#{$unit} { max-height: $one; }
-  .inline-size-#{$unit} { inline-size: $one; }
-  .block-size-#{$unit} { block-size: $one; }
-}
-/* Several lines: .h-3lh (exactly three lines), .max-h-5lh (clip after five lines), .min-h-2lh (reserve two lines) */
-@each $n in (2, 3, 4, 5, 6, 8, 10) {
-  .h-#{$n}lh { height: #{$n}lh; }
-  .min-h-#{$n}lh { min-height: #{$n}lh; }
-  .max-h-#{$n}lh { max-height: #{$n}lh; }
-  .block-size-#{$n}lh { block-size: #{$n}lh; }
-}
-
-/* Small / large / dynamic viewport units (svh = toolbars shown, lvh = toolbars hidden, dvh = follows them) */
-.h-svh { height: 100svh; }
-.h-lvh { height: 100lvh; }
-.min-h-svh { min-height: 100svh; }
-.min-h-lvh { min-height: 100lvh; }
-.max-h-svh { max-height: 100svh; }
-.max-h-lvh { max-height: 100lvh; }
-.w-svw { width: 100svw; }
-.w-lvw { width: 100lvw; }
-.min-w-dvw { min-width: 100dvw; }
-.max-w-dvw { max-width: 100dvw; }
-
-/* Logical size scale: inline-size-{n} / block-size-{n} (n * 0.25rem) */
-$_logical-scale: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96);
-@each $n in $_logical-scale {
-  $v: #{$n * 0.25}rem;
-  @if $n == 0 { $v: 0; }
-  .inline-size-#{$n} { inline-size: $v; }
-  .block-size-#{$n} { block-size: $v; }
-  .min-inline-size-#{$n} { min-inline-size: $v; }
-  .min-block-size-#{$n} { min-block-size: $v; }
-  .max-inline-size-#{$n} { max-inline-size: $v; }
-  .max-block-size-#{$n} { max-block-size: $v; }
-}
-@each $axis in (inline, block) {
-  .#{$axis}-size-px { #{$axis}-size: 1px; }
-  .min-#{$axis}-size-px { min-#{$axis}-size: 1px; }
-  .max-#{$axis}-size-px { max-#{$axis}-size: 1px; }
-  .#{$axis}-size-screen { #{$axis}-size: 100v#{string.slice($axis, 1, 1)}; }
-  .#{$axis}-size-stretch { #{$axis}-size: stretch; }
-}
-
-/* Logical min/max keywords with the -size spelling (the shorter .min-inline-* names stay available) */
-@each $k, $v in ('full': 100%, 'fit': fit-content, 'min': min-content, 'max': max-content) {
-  .min-inline-size-#{$k} { min-inline-size: $v; }
-  .min-block-size-#{$k} { min-block-size: $v; }
-  @if $k != 'full' {
-    .max-block-size-#{$k} { max-block-size: $v; }
-  }
-}
-.max-block-size-full { max-block-size: 100%; }
-.max-inline-size-none { max-inline-size: none; }
-.max-block-size-none { max-block-size: none; }
-.max-inline-size-fit { max-inline-size: fit-content; }
-.max-inline-size-min { max-inline-size: min-content; }
-.max-inline-size-max { max-inline-size: max-content; }
+// SCSS Document
+// File: src/scss/utilities/_sizing_logical.scss
+// Description: Size keywords (3xs … 7xl, line-height units) and the logical size scale (inline-size, block-size,
+//              min/max in both axes) that complete the width/height families of _sizing.scss and _layout_extras.scss.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .w-3xs … .w-7xl, .min-w-3xs …, .max-w-3xs/2xs, .{w,h,size,min-w,min-h,max-w,max-h}-lh/rlh,
+//          .inline-size-{n}, .block-size-{n}, .min-inline-size-*, .max-inline-size-*, .min-block-size-*, .max-block-size-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+// Note: Same quarter-rem scale as .size-{n} (size-4 = 1rem), so logical and physical icon/box sizes line up.
+@use "sass:string";
+
+// Map: size keywords -> line-height units -> logical scale -> logical min/max
+
+$_container-sizes: (
+  '3xs': 16rem, '2xs': 18rem, 'xs': 20rem, 'sm': 24rem, 'md': 28rem, 'lg': 32rem, 'xl': 36rem,
+  '2xl': 42rem, '3xl': 48rem, '4xl': 56rem, '5xl': 64rem, '6xl': 72rem, '7xl': 80rem
+);
+
+/* Size keywords — container-like widths (same values as .max-w-xs … .max-w-7xl) */
+@each $key, $value in $_container-sizes {
+  .w-#{$key} { width: $value; }
+  .min-w-#{$key} { min-width: $value; }
+  .inline-size-#{$key} { inline-size: $value; }
+  .min-inline-size-#{$key} { min-inline-size: $value; }
+  .max-inline-size-#{$key} { max-inline-size: $value; }
+}
+.max-w-3xs { max-width: 16rem; }
+.max-w-2xs { max-width: 18rem; }
+
+/* Line-height units — size a box in lines of text (lh) or root lines (rlh) */
+@each $unit in (lh, rlh) {
+  $one: string.unquote("1#{$unit}"); // "1#{$unit}" without quotes would compile to "1 lh"
+  .w-#{$unit} { width: $one; }
+  .h-#{$unit} { height: $one; }
+  .size-#{$unit} { width: $one; height: $one; }
+  .min-w-#{$unit} { min-width: $one; }
+  .min-h-#{$unit} { min-height: $one; }
+  .max-w-#{$unit} { max-width: $one; }
+  .max-h-#{$unit} { max-height: $one; }
+  .inline-size-#{$unit} { inline-size: $one; }
+  .block-size-#{$unit} { block-size: $one; }
+}
+/* Several lines: .h-3lh (exactly three lines), .max-h-5lh (clip after five lines), .min-h-2lh (reserve two lines) */
+@each $n in (2, 3, 4, 5, 6, 8, 10) {
+  .h-#{$n}lh { height: #{$n}lh; }
+  .min-h-#{$n}lh { min-height: #{$n}lh; }
+  .max-h-#{$n}lh { max-height: #{$n}lh; }
+  .block-size-#{$n}lh { block-size: #{$n}lh; }
+}
+
+/* Small / large / dynamic viewport units (svh = toolbars shown, lvh = toolbars hidden, dvh = follows them) */
+.h-svh { height: 100svh; }
+.h-lvh { height: 100lvh; }
+.min-h-svh { min-height: 100svh; }
+.min-h-lvh { min-height: 100lvh; }
+.max-h-svh { max-height: 100svh; }
+.max-h-lvh { max-height: 100lvh; }
+.w-svw { width: 100svw; }
+.w-lvw { width: 100lvw; }
+.min-w-dvw { min-width: 100dvw; }
+.max-w-dvw { max-width: 100dvw; }
+
+/* Logical size scale: inline-size-{n} / block-size-{n} (n * 0.25rem) */
+$_logical-scale: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96);
+@each $n in $_logical-scale {
+  $v: #{$n * 0.25}rem;
+  @if $n == 0 { $v: 0; }
+  .inline-size-#{$n} { inline-size: $v; }
+  .block-size-#{$n} { block-size: $v; }
+  .min-inline-size-#{$n} { min-inline-size: $v; }
+  .min-block-size-#{$n} { min-block-size: $v; }
+  .max-inline-size-#{$n} { max-inline-size: $v; }
+  .max-block-size-#{$n} { max-block-size: $v; }
+}
+@each $axis in (inline, block) {
+  .#{$axis}-size-px { #{$axis}-size: 1px; }
+  .min-#{$axis}-size-px { min-#{$axis}-size: 1px; }
+  .max-#{$axis}-size-px { max-#{$axis}-size: 1px; }
+  .#{$axis}-size-screen { #{$axis}-size: 100v#{string.slice($axis, 1, 1)}; }
+  .#{$axis}-size-stretch { #{$axis}-size: stretch; }
+}
+
+/* Logical min/max keywords with the -size spelling (the shorter .min-inline-* names stay available) */
+@each $k, $v in ('full': 100%, 'fit': fit-content, 'min': min-content, 'max': max-content) {
+  .min-inline-size-#{$k} { min-inline-size: $v; }
+  .min-block-size-#{$k} { min-block-size: $v; }
+  @if $k != 'full' {
+    .max-block-size-#{$k} { max-block-size: $v; }
+  }
+}
+.max-block-size-full { max-block-size: 100%; }
+.max-inline-size-none { max-inline-size: none; }
+.max-block-size-none { max-block-size: none; }
+.max-inline-size-fit { max-inline-size: fit-content; }
+.max-inline-size-min { max-inline-size: min-content; }
+.max-inline-size-max { max-inline-size: max-content; }

package/scss/utilities/_starting_style.scss

@@ -1,53 +1,53 @@
-// SCSS Document
-// File: src/scss/utilities/_starting_style.scss
-// Description: Entry/exit transition utilities — @starting-style, transition-behavior and interpolate-size.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .starting-* classes (initial state before first render), .transition-discrete
-//          and .interpolate-size-* so popovers, dialogs and <details> can animate in/out with CSS only.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
-// Note: combine with a transition utility (e.g. .transition .duration-300) on the same element.
-// Map: @starting-style -> transition-behavior -> interpolate-size -> details-content
-
-/* Starting style — values used before the element's first style update */
-.starting-opacity-0 {
-  @starting-style { opacity: 0; }
-}
-.starting-scale-95 {
-  @starting-style { scale: 0.95; }
-}
-.starting-translate-y-2 {
-  @starting-style { translate: 0 0.5rem; }
-}
-.starting-translate-y-n2 {
-  @starting-style { translate: 0 -0.5rem; }
-}
-.starting-translate-x-full {
-  @starting-style { translate: 100% 0; }
-}
-
-/* Transition behavior — allow transitions on discrete properties (display, overlay, content-visibility) */
-.transition-normal { transition-behavior: normal; }
-.transition-discrete { transition-behavior: allow-discrete; }
-
-/* Interpolate size — animate to/from intrinsic sizes like height: auto */
-.interpolate-size-numeric { interpolate-size: numeric-only; }
-.interpolate-size-keywords { interpolate-size: allow-keywords; }
-
-/* Details content — animate the open/close of <details> */
-.details-animate::details-content {
-  block-size: 0;
-  overflow: clip;
-  transition: block-size 300ms ease, content-visibility 300ms allow-discrete;
-}
-.details-animate[open]::details-content {
-  block-size: auto;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .details-animate::details-content {
-    transition: none;
-  }
-}
+// SCSS Document
+// File: src/scss/utilities/_starting_style.scss
+// Description: Entry/exit transition utilities — @starting-style, transition-behavior and interpolate-size.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .starting-* classes (initial state before first render), .transition-discrete
+//          and .interpolate-size-* so popovers, dialogs and <details> can animate in/out with CSS only.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
+// Note: combine with a transition utility (e.g. .transition .duration-300) on the same element.
+// Map: @starting-style -> transition-behavior -> interpolate-size -> details-content
+
+/* Starting style — values used before the element's first style update */
+.starting-opacity-0 {
+  @starting-style { opacity: 0; }
+}
+.starting-scale-95 {
+  @starting-style { scale: 0.95; }
+}
+.starting-translate-y-2 {
+  @starting-style { translate: 0 0.5rem; }
+}
+.starting-translate-y-n2 {
+  @starting-style { translate: 0 -0.5rem; }
+}
+.starting-translate-x-full {
+  @starting-style { translate: 100% 0; }
+}
+
+/* Transition behavior — allow transitions on discrete properties (display, overlay, content-visibility) */
+.transition-normal { transition-behavior: normal; }
+.transition-discrete { transition-behavior: allow-discrete; }
+
+/* Interpolate size — animate to/from intrinsic sizes like height: auto */
+.interpolate-size-numeric { interpolate-size: numeric-only; }
+.interpolate-size-keywords { interpolate-size: allow-keywords; }
+
+/* Details content — animate the open/close of <details> */
+.details-animate::details-content {
+  block-size: 0;
+  overflow: clip;
+  transition: block-size 300ms ease, content-visibility 300ms allow-discrete;
+}
+.details-animate[open]::details-content {
+  block-size: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .details-animate::details-content {
+    transition: none;
+  }
+}