@birdycom/omniacss 0.0.0-stage → 0.11.0

package/scss/utilities/_space_divide.scss

@@ -0,0 +1,85 @@
+// SCSS Document
+// File: src/scss/utilities/_space_divide.scss
+// Description: Space and divide between children — .space-x/y-{n} (gap via margin) and .divide-x/y (rule between children),
+//              both with a *-reverse switch for reversed flex rows/columns.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .space-x-{n}, .space-y-{n}, .space-x-reverse, .space-y-reverse, .divide-x[-{w}], .divide-y[-{w}],
+//          .divide-x-reverse, .divide-y-reverse, .divide-{solid|dashed|dotted|double|none}, .divide-current,
+//          .divide-transparent and .divide-{omnia color}.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline
+// Note: Logical properties, so rows follow the writing direction (RTL included). Prefer .gap-* in flex/grid layouts;
+//       use these for block flow, lists and reversed flex containers.
+// Map: space scale -> space-x/y -> reverse -> divide width -> divide style -> divide color
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+$_space-scale: (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16);
+$_between: '> :not([hidden]) ~ :not([hidden])';
+
+/* Space between children: margin on every child except the first */
+@each $n in $_space-scale {
+  $v: #{$n * 0.25}rem;
+  @if $n == 0 { $v: 0; }
+  .space-x-#{$n} #{$_between} {
+    margin-inline-start: calc(#{$v} * (1 - var(--oc-space-x-reverse, 0)));
+    margin-inline-end: calc(#{$v} * var(--oc-space-x-reverse, 0));
+  }
+  .space-y-#{$n} #{$_between} {
+    margin-block-start: calc(#{$v} * (1 - var(--oc-space-y-reverse, 0)));
+    margin-block-end: calc(#{$v} * var(--oc-space-y-reverse, 0));
+  }
+}
+.space-x-px #{$_between} {
+  margin-inline-start: calc(1px * (1 - var(--oc-space-x-reverse, 0)));
+  margin-inline-end: calc(1px * var(--oc-space-x-reverse, 0));
+}
+.space-y-px #{$_between} {
+  margin-block-start: calc(1px * (1 - var(--oc-space-y-reverse, 0)));
+  margin-block-end: calc(1px * var(--oc-space-y-reverse, 0));
+}
+
+/* Reverse: use with flex-row-reverse / flex-col-reverse so the space stays between the children */
+.space-x-reverse #{$_between} { --oc-space-x-reverse: 1; }
+.space-y-reverse #{$_between} { --oc-space-y-reverse: 1; }
+
+/* Divide: a rule between the children (default width 1px, solid, 20% of the text color) */
+@each $axis, $start, $end in ('x', 'inline-start', 'inline-end'), ('y', 'block-start', 'block-end') {
+  $axis-name: block;
+  @if $axis == 'x' { $axis-name: inline; }
+  .divide-#{$axis} #{$_between} {
+    border-#{$axis-name}-style: var(--oc-divide-style, solid);
+    border-#{$axis-name}-color: var(--oc-divide-color, color-mix(in oklab, currentcolor 20%, transparent));
+    border-#{$start}-width: calc(1px * (1 - var(--oc-divide-#{$axis}-reverse, 0)));
+    border-#{$end}-width: calc(1px * var(--oc-divide-#{$axis}-reverse, 0));
+  }
+  @each $w in (0, 2, 4, 8) {
+    .divide-#{$axis}-#{$w} #{$_between} {
+      border-#{$axis-name}-style: var(--oc-divide-style, solid);
+      border-#{$axis-name}-color: var(--oc-divide-color, color-mix(in oklab, currentcolor 20%, transparent));
+      border-#{$start}-width: calc(#{$w}px * (1 - var(--oc-divide-#{$axis}-reverse, 0)));
+      border-#{$end}-width: calc(#{$w}px * var(--oc-divide-#{$axis}-reverse, 0));
+    }
+  }
+  .divide-#{$axis}-reverse #{$_between} { --oc-divide-#{$axis}-reverse: 1; }
+}
+
+/* Divide style and color are set on the container and inherited by the children */
+@each $style in (solid, dashed, dotted, double) {
+  .divide-#{$style} { --oc-divide-style: #{$style}; }
+}
+.divide-none { --oc-divide-style: none; }
+.divide-current { --oc-divide-color: currentcolor; }
+.divide-transparent { --oc-divide-color: transparent; }
+
+@each $group, $families in $omnia-colors {
+  @each $family, $colors in $families {
+    @each $color, $props in $colors {
+      .divide-#{string.to-lower-case(#{$color})} { --oc-divide-color: var(--color-#{string.to-lower-case(#{$color})}-50); }
+    }
+  }
+}

package/scss/utilities/_spacing_margin.scss

@@ -0,0 +1,199 @@
+// SCSS Document 
+// File: src/utilities/_spacing_margin.scss
+// Description: margin properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: margin, margin-inline, margin-inline-start, margin-inline-end, margin-block, margin-block-start, margin-block-end
+// Values: value in rem, auto
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+/* The Margin property */
+
+// loop true the $sizes list and make the new css-elements 
+// $sizesrem-prop is the first set from the list-item ( "size-1" ), the text before the :-sign
+// $sizesrem-value is the second set from the list item ( $base-size * 0.125 ), the text after the :-sign
+
+/* The Margin property */
+
+///
+/// The position property specifies the type of positioning method used for an element.
+/// @group Margin
+/// @name margin
+/// @link src/scss/utilities/_spacing_margin.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// To use on `<p>`, `<ul>`, `<ol>`, `<pre>`, `<table>`, `<blockquote>`, etc.
+///
+/// Outputs `margin-top` and `margin-bottom`.
+/// 
+/// Applies to:	all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter and ::first-line.
+/// 
+/// @example scss - margin class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   $run: 0;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///   $result: omnia-generate-sizing($min-group, 'margin', true, $run);
+///   $min-group: map.get($result,1);
+///   $run: map.get($result,6); 
+///   .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+///     #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'t'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'r'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'b'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'l'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'h'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)};
+///     #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'v'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)};
+///     #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+///   }  
+/// };
+/// @example html - use the margin-top class
+///   <div class="container mt-5">
+///     <h2>Voorbeeld set margin top with a lenght of 5rem</h2>
+///   </div>
+//
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+$run: 0;
+@while $min-group <= $SPACING-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'margin', true, $run);
+
+  $min-group: map.get($result,1); 
+  $run: map.get($result,6);
+  // margin 
+  .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+
+    #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+      
+  }
+  // margin-top
+  .#{string.slice(map.get($result,5),1,1)+'t'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)}
+     
+  }
+  // margin-right
+  .#{string.slice(map.get($result,5),1,1)+'r'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+  // margin-bottom
+  .#{string.slice(map.get($result,5),1,1)+'b'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }
+  // margin-left
+  .#{string.slice(map.get($result,5),1,1)+'l'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+  // margin horizontal
+  .#{string.slice(map.get($result,5),1,1)+'h'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)};
+    #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+  // margin vertical
+  .#{string.slice(map.get($result,5),1,1)+'v'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)};
+    #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+};
+
+  // margin new version CSS
+///
+/// The position property specifies the type of positioning method used for an element.
+/// @group Margin
+/// @name margin inline, inline-start, inline-end, block, block-start, block-end
+/// @link src/scss/utilities/_spacing_margin.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter and ::first-line.
+///
+/// @require $sides -inline, inline-start, inline-end, block, block-start, block-end
+/// 
+/// @example scss - margin-inline class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   $run: 0;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///     $result: omnia-generate-sizing($min-group, 'margin', true, $run);
+///     $min-group: map.get($result,1); 
+///     $run: map.get($result,6);
+///     @each $sides-prop in $sides {
+///       .#{string.slice(map.get($result,5),1,1)}-#{$sides-prop}-#{map.get($result,2)} {
+///         #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///       }
+///     }
+///   };
+/// @example html - use the padding class
+///   <div class="container p-5">
+///     <h2>Voorbeeld padding p-5 </h2>
+///   </div>
+//
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+$run: 0;
+@while $min-group <= $SPACING-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'margin', true, $run);
+  
+  $min-group: map.get($result,1); 
+  $run: map.get($result,6);
+  
+  @each $sides-prop in $sides {
+   
+    .#{string.slice(map.get($result,5),1,1)}-#{$sides-prop}-#{map.get($result,2)} {
+
+      #{map.get($result,5)}-#{$sides-prop}: map.get($result,3) + #{map.get($result,4)}
+      
+    }
+  }
+ 
+};
+
+/* Margin with var(--spacing): .m-var-0 … .m-var-10 (value = calc(var(--spacing) * n)). Uses same --spacing as padding. */
+@for $n from 0 through 10 {
+  @if $n == 0 {
+    .m-var-0 { margin: 0; }
+    .mt-var-0 { margin-top: 0; }
+    .mr-var-0 { margin-right: 0; }
+    .mb-var-0 { margin-bottom: 0; }
+    .ml-var-0 { margin-left: 0; }
+    .mh-var-0 { margin-left: 0; margin-right: 0; }
+    .mv-var-0 { margin-top: 0; margin-bottom: 0; }
+  } @else {
+    .m-var-#{$n} { margin: calc(var(--spacing) * #{$n}); }
+    .mt-var-#{$n} { margin-top: calc(var(--spacing) * #{$n}); }
+    .mr-var-#{$n} { margin-right: calc(var(--spacing) * #{$n}); }
+    .mb-var-#{$n} { margin-bottom: calc(var(--spacing) * #{$n}); }
+    .ml-var-#{$n} { margin-left: calc(var(--spacing) * #{$n}); }
+    .mh-var-#{$n} { margin-left: calc(var(--spacing) * #{$n}); margin-right: calc(var(--spacing) * #{$n}); }
+    .mv-var-#{$n} { margin-top: calc(var(--spacing) * #{$n}); margin-bottom: calc(var(--spacing) * #{$n}); }
+  }
+}
+
+  /* End Margin property */

package/scss/utilities/_spacing_padding.scss

@@ -0,0 +1,195 @@
+// SCSS Document 
+// File: src/utilities/_spacing_padding.scss
+// Description: Padding properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: padding, padding-inline, padding-inline-start, padding-inline-end, padding-block, padding-block-start, padding-block-end
+// Values: value in rem, auto
+
+@use "sass:string";
+@use "sass:map";
+@use '../utilities/' as *;
+
+// loop true the $sizes list and make the new css-elements 
+// $sizesrem-prop is the first set from the list-item ( "size-1" ), the text before the :-sign
+// $sizesrem-value is the second set from the list item ( $base-size * 0.125 ), the text after the :-sign
+
+/* The Padding property */
+
+///
+/// The position property specifies the type of positioning method used for an element.
+/// @group Padding
+/// @name padding
+/// @link src/scss/utilities/_spacing_padding.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
+///
+/// @example scss - padding class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   $run: 0;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///   $result: omnia-generate-sizing($min-group, 'padding', true, $run);
+///   $min-group: map.get($result,1); 
+///   $run: map.get($result,6);
+///   .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+///     #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'t'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'r'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'b'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'l'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'h'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)};
+///     #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+///   } 
+///   .#{string.slice(map.get($result,5),1,1)+'v'}-#{map.get($result,2)} {
+///     #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)};
+///     #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+///   }  
+/// };  
+/// @example html - use the padding class
+///   <div class="container p-5">
+///     <h2>Voorbeeld padding p-5 </h2>
+///   </div>
+//
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+$run: 0;
+@while $min-group <= $SPACING-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'padding', false, $run);
+
+  $min-group: map.get($result,1); 
+  $run: map.get($result,6);
+  // padding      
+  .#{string.slice(map.get($result,5),1,1)}-#{map.get($result,2)} {
+
+    #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+      
+  }
+  // padding-top
+  .#{string.slice(map.get($result,5),1,1)+'t'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)}
+     
+  }
+  // padding-right
+  .#{string.slice(map.get($result,5),1,1)+'r'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+  // padding-bottom
+  .#{string.slice(map.get($result,5),1,1)+'b'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }
+  // padding-left
+  .#{string.slice(map.get($result,5),1,1)+'l'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+  // padding horizontal
+  .#{string.slice(map.get($result,5),1,1)+'h'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-right'} : map.get($result,3) + #{map.get($result,4)};
+    #{map.get($result,5)+'-left'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+  // padding vertical
+  .#{string.slice(map.get($result,5),1,1)+'v'}-#{map.get($result,2)} {
+
+    #{map.get($result,5)+'-top'} : map.get($result,3) + #{map.get($result,4)};
+    #{map.get($result,5)+'-bottom'} : map.get($result,3) + #{map.get($result,4)}
+    
+  }  
+};
+  // padding new version CSS
+/// @group Padding
+/// @name padding 
+/// 
+/// @link src/scss/utilities/_spacing_padding.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// css property - inline, inline-start, inline-end, block, block-start, block-end
+/// 
+/// Applies to:	all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line.
+///
+/// @require $sides -inline, inline-start, inline-end, block, block-start, block-end
+/// @example scss - padding inline class
+///   $min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+///   $run: 0;
+///   @while $min-group <= $DEFAULT-BASE-SECOND-MAX-GROUP {
+///     $result: omnia-generate-sizing($min-group, 'padding', true, $run);
+///     $min-group: map.get($result,1); 
+///     $run: map.get($result,6);
+///     @each $sides-prop in $sides {
+///       .#{string.slice(map.get($result,5),1,1)}-#{$sides-prop}-#{map.get($result,2)} {
+///         #{map.get($result,5)} : map.get($result,3) + #{map.get($result,4)}
+///       }
+///     }
+///   }; 
+/// @example html - use the padding class
+///   <div class="container p-5">
+///     <h2>Voorbeeld padding p-5 </h2>
+///   </div>
+// 
+$min-group: $DEFAULT-BASE-FIRST-MIN-GROUP;
+$run: 0;
+@while $min-group <= $SPACING-SECOND-MAX-GROUP {
+
+  $result: omnia-generate-sizing($min-group, 'padding', true, $run);
+  
+  $min-group: map.get($result,1); 
+  $run: map.get($result,6);
+  
+  @each $sides-prop in $sides {
+   
+    .#{string.slice(map.get($result,5),1,1)}-#{$sides-prop}-#{map.get($result,2)} {
+
+      #{map.get($result,5)}-#{$sides-prop}: map.get($result,3) + #{map.get($result,4)}
+      
+    }
+  }
+ 
+};
+
+/* Padding with var(--spacing): .p-var-0 … .p-var-10 (value = calc(var(--spacing) * n)). Set --spacing on :root or component (e.g. 1rem). */
+:root {
+  --spacing: 1rem;
+}
+@for $n from 0 through 10 {
+  @if $n == 0 {
+    .p-var-0 { padding: 0; }
+    .pt-var-0 { padding-top: 0; }
+    .pr-var-0 { padding-right: 0; }
+    .pb-var-0 { padding-bottom: 0; }
+    .pl-var-0 { padding-left: 0; }
+    .ph-var-0 { padding-left: 0; padding-right: 0; }
+    .pv-var-0 { padding-top: 0; padding-bottom: 0; }
+  } @else {
+    .p-var-#{$n} { padding: calc(var(--spacing) * #{$n}); }
+    .pt-var-#{$n} { padding-top: calc(var(--spacing) * #{$n}); }
+    .pr-var-#{$n} { padding-right: calc(var(--spacing) * #{$n}); }
+    .pb-var-#{$n} { padding-bottom: calc(var(--spacing) * #{$n}); }
+    .pl-var-#{$n} { padding-left: calc(var(--spacing) * #{$n}); }
+    .ph-var-#{$n} { padding-left: calc(var(--spacing) * #{$n}); padding-right: calc(var(--spacing) * #{$n}); }
+    .pv-var-#{$n} { padding-top: calc(var(--spacing) * #{$n}); padding-bottom: calc(var(--spacing) * #{$n}); }
+  }
+}
+
+/* End Padding property */

package/scss/utilities/_starting_style.scss

@@ -0,0 +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;
+  }
+}