@birdycom/omniacss 0.0.0-stage → 0.11.0

package/scss/utilities/_motion_transforms.scss

@@ -0,0 +1,167 @@
+// SCSS Document
+// File: src/scss/utilities/_motion_transforms.scss
+// Map: transition -> animation -> transform -> rotate/scale/skew/translate -> perspective
+
+/* Transition property — with a default duration and easing as longhands, so .duration-*, .ease-* and .delay-* (below) override them */
+.transition-none { transition-property: none; }
+.transition-all { transition-property: all; }
+.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; }
+.transition-opacity { transition-property: opacity; }
+.transition-shadow { transition-property: box-shadow; }
+.transition-transform { transition-property: transform, translate, scale, rotate; }
+:is(.transition-all, .transition-colors, .transition-opacity, .transition-shadow, .transition-transform) {
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Transition duration */
+.duration-75 { transition-duration: 75ms; }
+.duration-100 { transition-duration: 100ms; }
+.duration-150 { transition-duration: 150ms; }
+.duration-200 { transition-duration: 200ms; }
+.duration-300 { transition-duration: 300ms; }
+.duration-500 { transition-duration: 500ms; }
+.duration-700 { transition-duration: 700ms; }
+.duration-1000 { transition-duration: 1000ms; }
+
+/* Transition timing */
+.ease-linear { transition-timing-function: linear; }
+.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* Transition delay */
+.delay-0 { transition-delay: 0ms; }
+.delay-75 { transition-delay: 75ms; }
+.delay-100 { transition-delay: 100ms; }
+.delay-150 { transition-delay: 150ms; }
+.delay-200 { transition-delay: 200ms; }
+.delay-300 { transition-delay: 300ms; }
+.delay-500 { transition-delay: 500ms; }
+
+/* Animation */
+@keyframes oc-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes oc-ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes oc-pulse {
+  50% { opacity: .5; }
+}
+@keyframes oc-bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+.animate-none { animation: none; }
+.animate-spin { animation: oc-spin 1s linear infinite; }
+.animate-ping { animation: oc-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-pulse { animation: oc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-bounce { animation: oc-bounce 1s infinite; }
+
+/* Transform core */
+/* Rotate, scale and translate use the individual transform properties (rotate / scale / translate),
+   so every class works on its own and they combine freely. Skew has no own property: it uses transform. */
+.transform {
+  transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0));
+}
+.transform-none { transform: none; }
+
+/* Rotate */
+.rotate-0 { --oc-rotate: 0deg; rotate: 0deg; }
+.rotate-45 { --oc-rotate: 45deg; rotate: 45deg; }
+.rotate-90 { --oc-rotate: 90deg; rotate: 90deg; }
+.rotate-180 { --oc-rotate: 180deg; rotate: 180deg; }
+
+/* Scale */
+.scale-0 { --oc-scale-x: 0; --oc-scale-y: 0; scale: 0; }
+.scale-50 { --oc-scale-x: .5; --oc-scale-y: .5; scale: .5; }
+.scale-75 { --oc-scale-x: .75; --oc-scale-y: .75; scale: .75; }
+.scale-90 { --oc-scale-x: .9; --oc-scale-y: .9; scale: .9; }
+.scale-95 { --oc-scale-x: .95; --oc-scale-y: .95; scale: .95; }
+.scale-100 { --oc-scale-x: 1; --oc-scale-y: 1; scale: 1; }
+.scale-105 { --oc-scale-x: 1.05; --oc-scale-y: 1.05; scale: 1.05; }
+.scale-110 { --oc-scale-x: 1.1; --oc-scale-y: 1.1; scale: 1.1; }
+.scale-125 { --oc-scale-x: 1.25; --oc-scale-y: 1.25; scale: 1.25; }
+.scale-150 { --oc-scale-x: 1.5; --oc-scale-y: 1.5; scale: 1.5; }
+
+/* Skew */
+.skew-x-0 { --oc-skew-x: 0deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-x-3 { --oc-skew-x: 3deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-x-6 { --oc-skew-x: 6deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-x-12 { --oc-skew-x: 12deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-0 { --oc-skew-y: 0deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-3 { --oc-skew-y: 3deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-6 { --oc-skew-y: 6deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+.skew-y-12 { --oc-skew-y: 12deg; transform: skewX(var(--oc-skew-x, 0)) skewY(var(--oc-skew-y, 0)); }
+
+/* Translate */
+.translate-x-0 { --oc-translate-x: 0; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-1 { --oc-translate-x: 0.25rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-2 { --oc-translate-x: 0.5rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-4 { --oc-translate-x: 1rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-8 { --oc-translate-x: 2rem; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-x-full { --oc-translate-x: 100%; translate: var(--oc-translate-x) var(--oc-translate-y, 0) var(--oc-translate-z, 0); }
+.translate-y-0 { --oc-translate-y: 0; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-1 { --oc-translate-y: 0.25rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-2 { --oc-translate-y: 0.5rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-4 { --oc-translate-y: 1rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-8 { --oc-translate-y: 2rem; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+.translate-y-full { --oc-translate-y: 100%; translate: var(--oc-translate-x, 0) var(--oc-translate-y) var(--oc-translate-z, 0); }
+
+/* Transform origin and style */
+.origin-center { transform-origin: center; }
+.origin-top { transform-origin: top; }
+.origin-top-right { transform-origin: top right; }
+.origin-right { transform-origin: right; }
+.origin-bottom-right { transform-origin: bottom right; }
+.origin-bottom { transform-origin: bottom; }
+.origin-bottom-left { transform-origin: bottom left; }
+.origin-left { transform-origin: left; }
+.origin-top-left { transform-origin: top left; }
+
+.transform-flat { transform-style: flat; }
+.transform-3d { transform-style: preserve-3d; }
+
+/* Backface visibility */
+.backface-visible { backface-visibility: visible; }
+.backface-hidden { backface-visibility: hidden; }
+
+/* Perspective */
+.perspective-none { perspective: none; }
+.perspective-250 { perspective: 250px; }
+.perspective-500 { perspective: 500px; }
+.perspective-750 { perspective: 750px; }
+.perspective-1000 { perspective: 1000px; }
+
+.perspective-origin-center { perspective-origin: center; }
+.perspective-origin-top { perspective-origin: top; }
+.perspective-origin-bottom { perspective-origin: bottom; }
+.perspective-origin-left { perspective-origin: left; }
+.perspective-origin-right { perspective-origin: right; }
+
+/* Hover variants — the transform changes on :hover, so .transition-* / .duration-* / .ease-* become visible.
+   Example: <div class="transition-transform duration-300 ease-out hover:scale-110"> */
+@each $key, $value in ("105": 1.05, "110": 1.1, "125": 1.25, "150": 1.5) {
+  .hover\:scale-#{$key}:hover { scale: $value; }
+}
+@each $key in (12, 45, 90, 180) {
+  .hover\:rotate-#{$key}:hover { rotate: #{$key}deg; }
+}
+@each $key, $value in ("1": 0.25rem, "2": 0.5rem, "4": 1rem, "8": 2rem) {
+  .hover\:translate-x-#{$key}:hover { translate: $value var(--oc-translate-y, 0); }
+  .hover\:-translate-y-#{$key}:hover { translate: var(--oc-translate-x, 0) calc(#{$value} * -1); }
+}
+@each $key in (6, 12) {
+  .hover\:skew-x-#{$key}:hover { transform: skewX(#{$key}deg); }
+  .hover\:skew-y-#{$key}:hover { transform: skewY(#{$key}deg); }
+}
+.hover\:opacity-50:hover { opacity: 0.5; }
+
+/* Group hover: hover the parent (.group) to change the child. */
+@each $key, $value in ("110": 1.1, "125": 1.25) {
+  .group:hover .group-hover\:scale-#{$key} { scale: $value; }
+}
+.group:hover .group-hover\:translate-x-full { translate: 100% 0; }
+.group:hover .group-hover\:rotate-180 { rotate: 180deg; }

package/scss/utilities/_overflow.scss

@@ -0,0 +1,41 @@
+// SCSS Document
+// File: src/scss/utilities/_overflow.scss
+// Map: overflow -> overflow-axis -> overscroll behavior -> overscroll axis
+
+@use "../utilities/" as *;
+
+/* Overflow utilities */
+
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-clip { overflow: clip; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll { overflow: scroll; }
+
+/* Overflow axis utilities */
+
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-clip { overflow-x: clip; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-scroll { overflow-x: scroll; }
+
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-clip { overflow-y: clip; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-scroll { overflow-y: scroll; }
+
+/* Overscroll behavior utilities */
+
+.overscroll-auto { overscroll-behavior: auto; }
+.overscroll-contain { overscroll-behavior: contain; }
+.overscroll-none { overscroll-behavior: none; }
+
+.overscroll-x-auto { overscroll-behavior-x: auto; }
+.overscroll-x-contain { overscroll-behavior-x: contain; }
+.overscroll-x-none { overscroll-behavior-x: none; }
+
+.overscroll-y-auto { overscroll-behavior-y: auto; }
+.overscroll-y-contain { overscroll-behavior-y: contain; }
+.overscroll-y-none { overscroll-behavior-y: none; }

package/scss/utilities/_position.scss

@@ -0,0 +1,49 @@
+// SCSS Document 
+// File: src/utilities/_position.scss
+// Description: Position property 
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Property: position
+// Values: absolute, fixed, static, sticky, relative
+
+@use '../utilities/' as *;
+
+  /* The Position property */
+
+///
+/// The position Property
+/// @group Position
+///
+
+///
+/// The position property specifies the type of positioning method used for an element.
+/// @group Position
+/// @name position
+/// @link src/scss/utilities/_position.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require $posvalues
+/// @example scss - position class
+///   @each $posvalues-prop in $posvalues {
+///     .#{$posvalues-prop} {
+///       position: $posvalues-prop;
+///     }
+///   }  
+/// @example html - use position class
+///   <div class="absolute">
+///
+///   </div>  
+@each $posvalues-prop in $posvalues {
+
+  .#{$posvalues-prop} {
+
+    position: $posvalues-prop;
+
+    }
+  }    
+/* End Position property */

package/scss/utilities/_responsive.scss

@@ -0,0 +1,272 @@
+// File: src/scss/utilities/_responsive.scss
+// Description: Responsive variant utilities for key layout, display and spacing classes.
+// Breakpoints: sm (>=36rem), md (>=50rem), lg (>=64rem)
+// Pattern: .{prefix}\:{utility} e.g. sm\:hidden, md\:flex, lg\:grid-cols-3
+// Copyright: 2021-2026 Birdycom
+// Autor: Serge Cools
+// Version: 0.1.6
+// Framework: OmniaCSS
+// Note: Only the most commonly needed utilities get responsive variants
+//       to keep output size manageable. Values match _media_query.scss breakpoints.
+
+// ---------------------------------------------------------------------------
+// Responsive breakpoints (same values as layout/_media_query.scss)
+// ---------------------------------------------------------------------------
+$_responsive-breakpoints: (
+  'sm': 36rem,
+  'md': 50rem,
+  'lg': 64rem
+);
+
+// ---------------------------------------------------------------------------
+// Generate responsive variants inside each breakpoint media query.
+// Utilities are grouped by category for readability.
+// ---------------------------------------------------------------------------
+@each $prefix, $min-width in $_responsive-breakpoints {
+  @media (min-width: $min-width) {
+
+    // -----------------------------------------------------------------------
+    // Display utilities
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:block { display: block; }
+    .#{$prefix}\:hidden { display: none; }
+    .#{$prefix}\:flex { display: flex; }
+    .#{$prefix}\:inline-flex { display: inline-flex; }
+    .#{$prefix}\:grid { display: grid; }
+    .#{$prefix}\:inline-grid { display: inline-grid; }
+    .#{$prefix}\:inline-block { display: inline-block; }
+    .#{$prefix}\:inline { display: inline; }
+    .#{$prefix}\:table { display: table; }
+    .#{$prefix}\:table-cell { display: table-cell; }
+    .#{$prefix}\:table-row { display: table-row; }
+    .#{$prefix}\:contents { display: contents; }
+
+    // -----------------------------------------------------------------------
+    // Flex direction
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:flex-row { flex-direction: row; }
+    .#{$prefix}\:flex-row-reverse { flex-direction: row-reverse; }
+    .#{$prefix}\:flex-col { flex-direction: column; }
+    .#{$prefix}\:flex-col-reverse { flex-direction: column-reverse; }
+
+    // Flex wrap
+    .#{$prefix}\:wrap { flex-wrap: wrap; }
+    .#{$prefix}\:nowrap { flex-wrap: nowrap; }
+    .#{$prefix}\:wrap-reverse { flex-wrap: wrap-reverse; }
+
+    // Flex grow / shrink
+    .#{$prefix}\:grow { flex-grow: 1; }
+    .#{$prefix}\:grow-0 { flex-grow: 0; }
+    .#{$prefix}\:shrink { flex-shrink: 1; }
+    .#{$prefix}\:shrink-0 { flex-shrink: 0; }
+
+    // Flex shorthand
+    .#{$prefix}\:flex-1 { flex: 1 1 0%; }
+    .#{$prefix}\:flex-auto { flex: 1 1 auto; }
+    .#{$prefix}\:flex-initial { flex: 0 1 auto; }
+    .#{$prefix}\:flex-none { flex: none; }
+
+    // -----------------------------------------------------------------------
+    // Grid template columns (1-12)
+    // -----------------------------------------------------------------------
+    @for $i from 1 through 12 {
+      .#{$prefix}\:grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+    .#{$prefix}\:grid-cols-none { grid-template-columns: none; }
+
+    // Grid template rows (1-6)
+    @for $i from 1 through 6 {
+      .#{$prefix}\:grid-rows-#{$i} {
+        grid-template-rows: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+
+    // Grid column span
+    .#{$prefix}\:col-auto { grid-column: auto; }
+    .#{$prefix}\:col-span-full { grid-column: 1 / -1; }
+    @for $i from 1 through 12 {
+      .#{$prefix}\:col-span-#{$i} { grid-column: span #{$i} / span #{$i}; }
+    }
+
+    // -----------------------------------------------------------------------
+    // Width utilities (fractional + keywords)
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:w-full { width: 100%; }
+    .#{$prefix}\:w-auto { width: auto; }
+    .#{$prefix}\:w-screen { width: 100vw; }
+    .#{$prefix}\:w-min { width: min-content; }
+    .#{$prefix}\:w-max { width: max-content; }
+    .#{$prefix}\:w-fit { width: fit-content; }
+    .#{$prefix}\:w-1\/2 { width: 50%; }
+    .#{$prefix}\:w-1\/3 { width: 33.333333%; }
+    .#{$prefix}\:w-2\/3 { width: 66.666667%; }
+    .#{$prefix}\:w-1\/4 { width: 25%; }
+    .#{$prefix}\:w-3\/4 { width: 75%; }
+    .#{$prefix}\:w-1\/5 { width: 20%; }
+    .#{$prefix}\:w-2\/5 { width: 40%; }
+    .#{$prefix}\:w-3\/5 { width: 60%; }
+    .#{$prefix}\:w-4\/5 { width: 80%; }
+    .#{$prefix}\:w-1\/6 { width: 16.666667%; }
+    .#{$prefix}\:w-5\/6 { width: 83.333333%; }
+
+    // Height utilities (keywords)
+    .#{$prefix}\:h-full { height: 100%; }
+    .#{$prefix}\:h-auto { height: auto; }
+    .#{$prefix}\:h-screen { height: 100vh; }
+    .#{$prefix}\:h-min { height: min-content; }
+    .#{$prefix}\:h-max { height: max-content; }
+    .#{$prefix}\:h-fit { height: fit-content; }
+
+    // Max-width utilities
+    .#{$prefix}\:max-w-none { max-width: none; }
+    .#{$prefix}\:max-w-full { max-width: 100%; }
+    .#{$prefix}\:max-w-screen { max-width: 100vw; }
+    .#{$prefix}\:max-w-sm { max-width: 24rem; }
+    .#{$prefix}\:max-w-md { max-width: 28rem; }
+    .#{$prefix}\:max-w-lg { max-width: 32rem; }
+    .#{$prefix}\:max-w-xl { max-width: 36rem; }
+    .#{$prefix}\:max-w-2xl { max-width: 42rem; }
+    .#{$prefix}\:max-w-4xl { max-width: 56rem; }
+    .#{$prefix}\:max-w-7xl { max-width: 80rem; }
+
+    // -----------------------------------------------------------------------
+    // Text alignment
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:text-left { text-align: left; }
+    .#{$prefix}\:text-center { text-align: center; }
+    .#{$prefix}\:text-right { text-align: right; }
+    .#{$prefix}\:text-justify { text-align: justify; }
+
+    // -----------------------------------------------------------------------
+    // Position
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:static { position: static; }
+    .#{$prefix}\:relative { position: relative; }
+    .#{$prefix}\:absolute { position: absolute; }
+    .#{$prefix}\:fixed { position: fixed; }
+    .#{$prefix}\:sticky { position: sticky; }
+
+    // -----------------------------------------------------------------------
+    // Visibility
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:visible { visibility: visible; }
+    .#{$prefix}\:invisible { visibility: hidden; }
+
+    // -----------------------------------------------------------------------
+    // Overflow
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:overflow-auto { overflow: auto; }
+    .#{$prefix}\:overflow-hidden { overflow: hidden; }
+    .#{$prefix}\:overflow-visible { overflow: visible; }
+    .#{$prefix}\:overflow-scroll { overflow: scroll; }
+
+    // -----------------------------------------------------------------------
+    // Alignment (justify + align)
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:justify-start { justify-content: flex-start; }
+    .#{$prefix}\:justify-end { justify-content: flex-end; }
+    .#{$prefix}\:justify-center { justify-content: center; }
+    .#{$prefix}\:justify-between { justify-content: space-between; }
+    .#{$prefix}\:justify-around { justify-content: space-around; }
+    .#{$prefix}\:justify-evenly { justify-content: space-evenly; }
+
+    .#{$prefix}\:align-items-start { align-items: flex-start; }
+    .#{$prefix}\:align-items-end { align-items: flex-end; }
+    .#{$prefix}\:align-items-center { align-items: center; }
+    .#{$prefix}\:align-items-baseline { align-items: baseline; }
+    .#{$prefix}\:align-items-stretch { align-items: stretch; }
+
+    .#{$prefix}\:align-self-auto { align-self: auto; }
+    .#{$prefix}\:align-self-start { align-self: flex-start; }
+    .#{$prefix}\:align-self-end { align-self: flex-end; }
+    .#{$prefix}\:align-self-center { align-self: center; }
+    .#{$prefix}\:align-self-stretch { align-self: stretch; }
+
+    // -----------------------------------------------------------------------
+    // Gap (key sizes: 0, 1, 2, 4, 6, 8 in rem-based steps)
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:gap-0 { gap: 0; }
+    .#{$prefix}\:gap-1 { gap: 0.25rem; }
+    .#{$prefix}\:gap-2 { gap: 0.5rem; }
+    .#{$prefix}\:gap-3 { gap: 0.75rem; }
+    .#{$prefix}\:gap-4 { gap: 1rem; }
+    .#{$prefix}\:gap-6 { gap: 1.5rem; }
+    .#{$prefix}\:gap-8 { gap: 2rem; }
+    .#{$prefix}\:gap-12 { gap: 3rem; }
+
+    // -----------------------------------------------------------------------
+    // Padding (key sizes)
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:p-0 { padding: 0; }
+    .#{$prefix}\:p-1 { padding: 0.25rem; }
+    .#{$prefix}\:p-2 { padding: 0.5rem; }
+    .#{$prefix}\:p-4 { padding: 1rem; }
+    .#{$prefix}\:p-6 { padding: 1.5rem; }
+    .#{$prefix}\:p-8 { padding: 2rem; }
+
+    .#{$prefix}\:px-0 { padding-left: 0; padding-right: 0; }
+    .#{$prefix}\:px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+    .#{$prefix}\:px-4 { padding-left: 1rem; padding-right: 1rem; }
+    .#{$prefix}\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+    .#{$prefix}\:px-8 { padding-left: 2rem; padding-right: 2rem; }
+
+    .#{$prefix}\:py-0 { padding-top: 0; padding-bottom: 0; }
+    .#{$prefix}\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+    .#{$prefix}\:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+    .#{$prefix}\:py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
+    .#{$prefix}\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
+
+    // -----------------------------------------------------------------------
+    // Margin (key sizes)
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:m-0 { margin: 0; }
+    .#{$prefix}\:m-auto { margin: auto; }
+    .#{$prefix}\:m-1 { margin: 0.25rem; }
+    .#{$prefix}\:m-2 { margin: 0.5rem; }
+    .#{$prefix}\:m-4 { margin: 1rem; }
+    .#{$prefix}\:m-8 { margin: 2rem; }
+
+    .#{$prefix}\:mx-auto { margin-left: auto; margin-right: auto; }
+    .#{$prefix}\:mx-0 { margin-left: 0; margin-right: 0; }
+    .#{$prefix}\:mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
+    .#{$prefix}\:mx-4 { margin-left: 1rem; margin-right: 1rem; }
+
+    .#{$prefix}\:my-0 { margin-top: 0; margin-bottom: 0; }
+    .#{$prefix}\:my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
+    .#{$prefix}\:my-4 { margin-top: 1rem; margin-bottom: 1rem; }
+
+    .#{$prefix}\:mt-0 { margin-top: 0; }
+    .#{$prefix}\:mt-2 { margin-top: 0.5rem; }
+    .#{$prefix}\:mt-4 { margin-top: 1rem; }
+    .#{$prefix}\:mt-8 { margin-top: 2rem; }
+
+    .#{$prefix}\:mb-0 { margin-bottom: 0; }
+    .#{$prefix}\:mb-2 { margin-bottom: 0.5rem; }
+    .#{$prefix}\:mb-4 { margin-bottom: 1rem; }
+    .#{$prefix}\:mb-8 { margin-bottom: 2rem; }
+
+    // -----------------------------------------------------------------------
+    // Order
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:order-first { order: -9999; }
+    .#{$prefix}\:order-last { order: 9999; }
+    .#{$prefix}\:order-none { order: 0; }
+    @for $i from 1 through 12 {
+      .#{$prefix}\:order-#{$i} { order: #{$i}; }
+    }
+
+    // -----------------------------------------------------------------------
+    // Opacity (key values)
+    // -----------------------------------------------------------------------
+    .#{$prefix}\:opacity-0 { opacity: 0; }
+    .#{$prefix}\:opacity-25 { opacity: 0.25; }
+    .#{$prefix}\:opacity-50 { opacity: 0.5; }
+    .#{$prefix}\:opacity-75 { opacity: 0.75; }
+    .#{$prefix}\:opacity-100 { opacity: 1; }
+
+  } // end @media
+} // end @each
+
+/* End responsive utilities */

package/scss/utilities/_scroll_animations.scss

@@ -0,0 +1,80 @@
+// SCSS Document
+// File: src/scss/utilities/_scroll_animations.scss
+// Description: Scroll-driven animation utilities — drive animations by scroll progress instead of time.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .timeline-*, .animate-range-*, .scroll-timeline-*, .view-timeline-* classes
+//          and ready-to-use .animate-scroll-* / .animate-view-* presets.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
+// Note: presets are wrapped in @supports so browsers without support keep the element fully visible.
+// Map: animation-timeline -> animation-range -> named timelines -> timeline-scope -> presets
+
+/* Animation timeline */
+.timeline-auto { animation-timeline: auto; }
+.timeline-none { animation-timeline: none; }
+.timeline-scroll { animation-timeline: scroll(); }
+.timeline-scroll-x { animation-timeline: scroll(x); }
+.timeline-scroll-root { animation-timeline: scroll(root); }
+.timeline-view { animation-timeline: view(); }
+.timeline-view-x { animation-timeline: view(x); }
+.timeline-oc { animation-timeline: --oc-timeline; }
+
+/* Animation range */
+.animate-range-normal { animation-range: normal; }
+.animate-range-cover { animation-range: cover; }
+.animate-range-contain { animation-range: contain; }
+.animate-range-entry { animation-range: entry; }
+.animate-range-exit { animation-range: exit; }
+.animate-range-entry-half { animation-range: entry 0% entry 50%; }
+
+/* Named scroll and view timelines */
+.scroll-timeline-oc { scroll-timeline: --oc-timeline block; }
+.scroll-timeline-oc-x { scroll-timeline: --oc-timeline inline; }
+.view-timeline-oc { view-timeline: --oc-timeline block; }
+.view-timeline-oc-x { view-timeline: --oc-timeline inline; }
+
+/* Timeline scope — expose a named timeline to siblings/descendants */
+.timeline-scope-oc { timeline-scope: --oc-timeline; }
+.timeline-scope-none { timeline-scope: none; }
+
+/* Presets */
+@keyframes oc-scroll-progress {
+  from { transform: scaleX(0); }
+  to { transform: scaleX(1); }
+}
+@keyframes oc-view-fade-in {
+  from { opacity: 0; transform: translateY(2rem); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes oc-view-zoom-in {
+  from { opacity: 0; transform: scale(0.8); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@supports (animation-timeline: scroll()) {
+  .animate-scroll-progress {
+    transform-origin: 0 50%;
+    animation: oc-scroll-progress linear both;
+    animation-timeline: scroll(root);
+  }
+  .animate-view-fade-in {
+    animation: oc-view-fade-in linear both;
+    animation-timeline: view();
+    animation-range: entry 0% cover 30%;
+  }
+  .animate-view-zoom-in {
+    animation: oc-view-zoom-in linear both;
+    animation-timeline: view();
+    animation-range: entry 0% cover 30%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll-progress,
+  .animate-view-fade-in,
+  .animate-view-zoom-in {
+    animation: none;
+  }
+}

package/scss/utilities/_scroll_spacing.scss

@@ -0,0 +1,33 @@
+// SCSS Document
+// File: src/scss/utilities/_scroll_spacing.scss
+// Description: Completes scroll-margin and scroll-padding: every side (t, r, b, l, x, y) on the same steps as .scroll-m-4.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .scroll-{m|p}-{12|16}, .scroll-{m|p}{t|r|b|l|x|y}-{0|1|2|8|12|16}.
+// Note: .scroll-{m|p}{s|e}-* (logical) live in _layout_extras.scss; the -4 steps and .scroll-{m|p}-{0|1|2|4|8} in _interactivity.scss.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin
+// Map: scroll-margin sides -> scroll-padding sides -> scrollbar
+
+$_scroll-steps: ('0': 0, '1': 0.25rem, '2': 0.5rem, '4': 1rem, '8': 2rem, '12': 3rem, '16': 4rem);
+$_scroll-sides: (
+  't': (top), 'r': (right), 'b': (bottom), 'l': (left),
+  'x': (left, right), 'y': (top, bottom)
+);
+
+@each $prop, $letter in ('margin': 'm', 'padding': 'p') {
+  @each $key, $value in $_scroll-steps {
+    @if $key != '0' and $key != '1' and $key != '2' and $key != '4' and $key != '8' {
+      .scroll-#{$letter}-#{$key} { scroll-#{$prop}: $value; }
+    }
+    @each $side, $edges in $_scroll-sides {
+      // .scroll-m{x|y|t|r|b|l}-4 already exist (_interactivity.scss): skip the exact duplicates
+      @if $key != '4' {
+        .scroll-#{$letter}#{$side}-#{$key} {
+          @each $edge in $edges { scroll-#{$prop}-#{$edge}: $value; }
+        }
+      }
+    }
+  }
+}