@birdycom/omniacss 0.0.0-stage → 0.11.1

package/scss/utilities/_containment.scss

@@ -0,0 +1,82 @@
+// SCSS Document
+// File: src/scss/utilities/_containment.scss
+// Description: Container queries, containment and content-visibility utilities (CSS Containment Level 2/3).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .container-*, .cq-name-*, .contain-*, .content-{auto,visible,hidden}, .contain-intrinsic-*
+//          and container query variants (.cq-xs\:flex, .cq-md\:grid-cols-3, ...).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
+// Note: .cq-inline / .cq-normal stay in _container.scss (backwards compatible aliases).
+// Map: container-type -> container-name -> contain -> content-visibility -> intrinsic size -> @container variants
+
+/* Container type — makes an element a query container */
+.container-normal { container-type: normal; }
+.container-size { container-type: size; }
+.container-inline-size { container-type: inline-size; }
+.container-scroll-state { container-type: scroll-state; }
+.cq-size { container-type: size; }
+.cq-scroll-state { container-type: scroll-state; }
+
+/* Container name — target a specific container in @container rules */
+.cq-name-none { container-name: none; }
+.cq-name-main { container-name: main; }
+.cq-name-sidebar { container-name: sidebar; }
+.cq-name-card { container-name: card; }
+
+/* Contain — isolate layout, paint, style and size calculations */
+.contain-none { contain: none; }
+.contain-strict { contain: strict; }
+.contain-content { contain: content; }
+.contain-size { contain: size; }
+.contain-inline-size { contain: inline-size; }
+.contain-layout { contain: layout; }
+.contain-style { contain: style; }
+.contain-paint { contain: paint; }
+
+/* Content visibility — skip rendering work for off-screen content */
+.content-visible { content-visibility: visible; }
+.content-auto { content-visibility: auto; }
+.content-hidden { content-visibility: hidden; }
+
+/* Contain intrinsic size — placeholder size for content-visibility: auto */
+.contain-intrinsic-none { contain-intrinsic-size: none; }
+.contain-intrinsic-auto-sm { contain-intrinsic-size: auto 200px; }
+.contain-intrinsic-auto-md { contain-intrinsic-size: auto 500px; }
+.contain-intrinsic-auto-lg { contain-intrinsic-size: auto 1000px; }
+
+// ---------------------------------------------------------------------------
+// Container query variants — same idea as _responsive.scss, but based on the
+// nearest query container (.container-inline-size / .cq-inline) instead of
+// the viewport. Pattern: .cq-{size}\:{utility}
+// ---------------------------------------------------------------------------
+$_cq-breakpoints: (
+  'xs': 20rem,
+  'sm': 24rem,
+  'md': 28rem,
+  'lg': 32rem,
+  'xl': 36rem
+);
+
+@each $prefix, $min-width in $_cq-breakpoints {
+  @container (min-width: #{$min-width}) {
+    // Display
+    .cq-#{$prefix}\:block { display: block; }
+    .cq-#{$prefix}\:hidden { display: none; }
+    .cq-#{$prefix}\:flex { display: flex; }
+    .cq-#{$prefix}\:grid { display: grid; }
+    .cq-#{$prefix}\:inline-flex { display: inline-flex; }
+
+    // Flex direction
+    .cq-#{$prefix}\:flex-row { flex-direction: row; }
+    .cq-#{$prefix}\:flex-col { flex-direction: column; }
+
+    // Grid template columns (1-6)
+    @for $i from 1 through 6 {
+      .cq-#{$prefix}\:grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+  }
+}

package/scss/utilities/_corner_shape.scss

@@ -0,0 +1,30 @@
+// SCSS Document
+// File: src/scss/utilities/_corner_shape.scss
+// Description: corner-shape utilities — shape of box corners within border-radius (CSS Borders Level 4).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.2.1
+// Framework: OmniaCSS
+// Purpose: Generate .corner-* classes for corner-shape (round, scoop, bevel, notch, square, squircle).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/corner-shape
+// Note: corner-shape only has effect when border-radius is set (e.g. use with .rounded-lg).
+
+/* Corner shape — modifies the shape of rounded corners (border-radius). Experimental; check browser support. */
+.corner-round {
+  corner-shape: round;
+}
+.corner-scoop {
+  corner-shape: scoop;
+}
+.corner-bevel {
+  corner-shape: bevel;
+}
+.corner-notch {
+  corner-shape: notch;
+}
+.corner-square {
+  corner-shape: square;
+}
+.corner-squircle {
+  corner-shape: squircle;
+}

package/scss/utilities/_css_functions.scss

@@ -0,0 +1,34 @@
+// SCSS Document
+// File: src/scss/utilities/_css_functions.scss
+// Description: Utilities built on modern CSS functions: tree counting (sibling-index(), sibling-count()) for
+//              staggered motion and fanned layouts, and color-mix() alpha steps of currentColor.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.8.2
+// Framework: OmniaCSS
+// Purpose: Progressive enhancement — without sibling-index() the delay/rotation is invalid and falls back to 0.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index
+// Map: stagger -> fan -> currentColor alpha
+
+/* Stagger — each child waits (index - 1) × --oc-stagger before its transition or animation starts */
+@each $ms in (30, 60, 100, 150, 250) {
+  .stagger-#{$ms} { --oc-stagger: #{$ms}ms; }
+}
+.delay-stagger { transition-delay: calc((sibling-index() - 1) * var(--oc-stagger, 60ms)); }
+.delay-stagger-reverse { transition-delay: calc((sibling-count() - sibling-index()) * var(--oc-stagger, 60ms)); }
+.animate-delay-stagger { animation-delay: calc((sibling-index() - 1) * var(--oc-stagger, 60ms)); }
+
+/* Fan — rotate siblings around the middle one, like cards in a hand (set on each child) */
+.fan {
+  rotate: calc((sibling-index() - (sibling-count() + 1) / 2) * var(--oc-fan, 6deg));
+  transform-origin: 50% 140%;
+}
+@each $deg in (3, 6, 10, 15) {
+  .fan-#{$deg} { --oc-fan: #{$deg}deg; }
+}
+
+/* currentColor alpha — tint a background or border with the text color (works with every text-* color) */
+@each $n in (5, 10, 15, 20, 30, 40, 50, 60, 70, 80) {
+  .bg-current-#{$n} { background-color: color-mix(in oklch, currentColor $n * 1%, transparent); }
+  .border-current-#{$n} { border-color: color-mix(in oklch, currentColor $n * 1%, transparent); }
+}

package/scss/utilities/_dark_mode.scss

@@ -0,0 +1,117 @@
+// File: src/scss/utilities/_dark_mode.scss
+// Description: Dark mode variant utilities using dark: prefix.
+// Supports two strategies:
+//   1. Class-based: add .dark class to <html> or <body>
+//   2. Media-based: prefers-color-scheme: dark (automatic)
+// Default strategy: class-based (.dark ancestor selector)
+// Pattern: .dark .dark\:{utility} e.g. dark\:bg-gray-900, dark\:text-white
+// Copyright: 2021-2026 Birdycom
+// Autor: Serge Cools
+// Version: 0.1.6
+// Framework: OmniaCSS
+@use "shadow_tokens" as *;
+
+// ---------------------------------------------------------------------------
+// Class-based dark mode (.dark ancestor on html/body)
+// Usage: <html class="dark"> or toggle via JS
+// ---------------------------------------------------------------------------
+
+// Background colors for dark mode
+.dark .dark\:bg-black { background-color: var(--color-black-60); }
+.dark .dark\:bg-white { background-color: var(--color-white-2); }
+.dark .dark\:bg-gray-50 { background-color: var(--color-snow-50); }
+.dark .dark\:bg-gray-100 { background-color: var(--color-linen-30); }
+.dark .dark\:bg-gray-200 { background-color: var(--color-silver-2); }
+.dark .dark\:bg-gray-300 { background-color: var(--color-silver-20); }
+.dark .dark\:bg-gray-400 { background-color: var(--color-gray-20); }
+.dark .dark\:bg-gray-500 { background-color: var(--color-black-2); }
+.dark .dark\:bg-gray-600 { background-color: var(--color-duskblue-20); }
+.dark .dark\:bg-gray-700 { background-color: var(--color-shallowblue-30); }
+.dark .dark\:bg-gray-800 { background-color: var(--color-shallowblue-40); }
+.dark .dark\:bg-gray-900 { background-color: var(--color-shallowblue-50); }
+.dark .dark\:bg-gray-950 { background-color: var(--color-black-40); }
+.dark .dark\:bg-transparent { background-color: transparent; }
+
+// Semantic surface colors for dark mode
+.dark .dark\:bg-surface { background-color: var(--color-shallowblue-50); }
+.dark .dark\:bg-surface-soft { background-color: var(--color-shallowblue-40); }
+.dark .dark\:bg-surface-raised { background-color: var(--color-shallowblue-30); }
+
+// Text colors for dark mode
+.dark .dark\:text-white { color: var(--color-white-2); }
+.dark .dark\:text-black { color: var(--color-black-60); }
+.dark .dark\:text-gray-50 { color: var(--color-snow-50); }
+.dark .dark\:text-gray-100 { color: var(--color-linen-30); }
+.dark .dark\:text-gray-200 { color: var(--color-silver-2); }
+.dark .dark\:text-gray-300 { color: var(--color-silver-20); }
+.dark .dark\:text-gray-400 { color: var(--color-gray-20); }
+.dark .dark\:text-gray-500 { color: var(--color-black-2); }
+.dark .dark\:text-gray-600 { color: var(--color-duskblue-20); }
+.dark .dark\:text-gray-700 { color: var(--color-shallowblue-30); }
+.dark .dark\:text-gray-800 { color: var(--color-shallowblue-40); }
+.dark .dark\:text-gray-900 { color: var(--color-shallowblue-50); }
+
+// Semantic text colors
+.dark .dark\:text-muted { color: var(--color-gray-20); }
+.dark .dark\:text-soft { color: var(--color-silver-20); }
+.dark .dark\:text-primary { color: var(--color-silver-2); }
+
+// Border colors for dark mode
+.dark .dark\:border-gray-200 { border-color: var(--color-silver-2); }
+.dark .dark\:border-gray-300 { border-color: var(--color-silver-20); }
+.dark .dark\:border-gray-500 { border-color: var(--color-black-2); }
+.dark .dark\:border-gray-600 { border-color: var(--color-duskblue-20); }
+.dark .dark\:border-gray-700 { border-color: var(--color-shallowblue-30); }
+.dark .dark\:border-gray-800 { border-color: var(--color-shallowblue-40); }
+.dark .dark\:border-transparent { border-color: transparent; }
+
+// Opacity for dark mode
+.dark .dark\:opacity-0 { opacity: 0; }
+.dark .dark\:opacity-25 { opacity: 0.25; }
+.dark .dark\:opacity-50 { opacity: 0.5; }
+.dark .dark\:opacity-75 { opacity: 0.75; }
+.dark .dark\:opacity-100 { opacity: 1; }
+
+// Shadow utilities for dark mode (softer shadows on dark backgrounds)
+.dark .dark\:shadow-none { box-shadow: none; }
+.dark .dark\:shadow-sm { box-shadow: #{$oc-dark-shadow-sm}; }
+.dark .dark\:shadow-md { box-shadow: #{$oc-dark-shadow-md}; }
+.dark .dark\:shadow-lg { box-shadow: #{$oc-dark-shadow-lg}; }
+
+// Ring / outline for dark mode
+.dark .dark\:outline-gray-600 { outline-color: var(--color-duskblue-20); }
+.dark .dark\:outline-gray-700 { outline-color: var(--color-shallowblue-30); }
+
+// Display overrides (e.g. show/hide elements in dark mode)
+.dark .dark\:hidden { display: none; }
+.dark .dark\:block { display: block; }
+
+// ---------------------------------------------------------------------------
+// Media-based dark mode (automatic, respects OS preference)
+// These use @media (prefers-color-scheme: dark) for auto-detection.
+// Classes use the auto-dark: prefix.
+// ---------------------------------------------------------------------------
+
+@media (prefers-color-scheme: dark) {
+  // Background
+  .auto-dark\:bg-gray-800 { background-color: var(--color-shallowblue-40); }
+  .auto-dark\:bg-gray-900 { background-color: var(--color-shallowblue-50); }
+  .auto-dark\:bg-gray-950 { background-color: var(--color-black-40); }
+  .auto-dark\:bg-surface { background-color: var(--color-shallowblue-50); }
+
+  // Text
+  .auto-dark\:text-white { color: var(--color-white-2); }
+  .auto-dark\:text-gray-100 { color: var(--color-linen-30); }
+  .auto-dark\:text-gray-200 { color: var(--color-silver-2); }
+  .auto-dark\:text-gray-300 { color: var(--color-silver-20); }
+  .auto-dark\:text-muted { color: var(--color-gray-20); }
+
+  // Border
+  .auto-dark\:border-gray-700 { border-color: var(--color-shallowblue-30); }
+  .auto-dark\:border-gray-800 { border-color: var(--color-shallowblue-40); }
+
+  // Shadow
+  .auto-dark\:shadow-none { box-shadow: none; }
+}
+
+/* End dark mode utilities */

package/scss/utilities/_display.scss

@@ -0,0 +1,58 @@
+// SCSS Document 
+// File: src/scss/utilities/_flexbox.scss
+// Description: CSS Display properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: display
+// Values: inline, block, contents, inline-block, list-item, run-in, none
+
+@use '../utilities/' as *;
+
+/* The Display properties */
+
+///
+/// The Display Property
+/// @group Display
+///
+
+///
+/// Definition and Usage
+/// The display property specifies the display behavior (the type of rendering box) of an element.
+///
+/// In HTML, the default display property value is taken from the HTML specifications or /// from the browser/user default style sheet. The default value in XML is inline, 
+/// including SVG elements.
+/// @group Display
+/// @name display
+/// @link src/scss/utilities/_display.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require $display
+/// @example scss - display class
+///    .block {
+///       display: block;
+///     }
+/// @example html - use display class
+///   <div class="block">
+///
+///   </div> 
+@each $display-prop in $display {
+  .#{$display-prop}{
+
+    display: $display-prop;
+
+  }
+}
+/* Box-sizing — controls how the total width and height is calculated. */
+
+// box-border: width and height include padding and border (most common)
+.box-border { box-sizing: border-box; }
+
+// box-content: width and height exclude padding and border (browser default)
+.box-content { box-sizing: content-box; }
+
+/* End Display property */

package/scss/utilities/_drop_shadow_colors.scss

@@ -0,0 +1,26 @@
+// SCSS Document
+// File: src/scss/utilities/_drop_shadow_colors.scss
+// Description: Color classes for the drop-shadow filter (.drop-shadow-sm … -lg read --oc-shadow-color).
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .drop-shadow-current, .drop-shadow-transparent and .drop-shadow-{omnia color} (also hover: via the engine).
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow
+// Note: class="drop-shadow-lg drop-shadow-vividblue" — the color class only sets --oc-shadow-color,
+//       the size class draws the shadow with a 25-30% alpha of that color.
+// Map: keywords -> every Omnia color
+
+@use "sass:string";
+@use '../utilities/' as *;
+
+.drop-shadow-current { --oc-shadow-color: currentcolor; }
+.drop-shadow-transparent { --oc-shadow-color: transparent; }
+
+@each $group, $families in $omnia-colors {
+  @each $family, $colors in $families {
+    @each $color, $props in $colors {
+      .drop-shadow-#{string.to-lower-case(#{$color})} { --oc-shadow-color: var(--color-#{string.to-lower-case(#{$color})}-50); }
+    }
+  }
+}

package/scss/utilities/_effects.scss

@@ -0,0 +1,50 @@
+// SCSS Document 
+// File: src/utilities/_effects.scss
+// Description: CSS effects properties
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+// Properties: opacity, box shadow
+// Values: Decoration
+
+@use '../utilities/' as *;
+
+/* The Opacity properties */
+
+///
+/// The Text Decoration Property
+/// @group Opacity
+///
+
+///
+/// The text-decoration-line property sets the Text decoration.
+/// @group Opacity
+/// @name opacity
+/// @link src/scss/utilities/_variables_text.scss
+/// @since 1.0.0 
+/// @author Serge Cools
+///
+/// Applies to:	all elements
+///
+/// @require {variable} $opacity
+/// @example scss - opacity class
+///   @each $opacity-prop, $opacity-value in $opacity {
+///     .#{$opacity-prop}{
+///       opacity: $opacity-value
+///     }
+///   }
+/// @example html - use text decoration line class
+///   <div class="underline opacity-50">
+///     <p>this line have text decoration line </p>
+///   </div> 
+///   <div class="hover:underline">
+///     <p>this line have text decoration line </p>
+///   </div> 
+@each $opacity-prop, $opacity-value in $opacity {
+  .#{$opacity-prop}{
+
+    opacity: $opacity-value
+
+  }
+}

package/scss/utilities/_effects_advanced.scss

@@ -0,0 +1,102 @@
+// SCSS Document
+// File: src/scss/utilities/_effects_advanced.scss
+// Map: box-shadow -> text-shadow -> blend -> mask
+@use "sass:string";
+@use "shadow_tokens" as *;
+
+/* Box shadow */
+.shadow-none { box-shadow: none; }
+// Shadows are light-dark() aware: on a dark color-scheme the shadow alpha is much stronger and a faint
+// light ring + top highlight lifts the surface edge, so elevation stays visible on dark backgrounds.
+.shadow-sm { box-shadow: 0 1px 2px 0 oc-sh(0.08, 0.6) + $oc-shadow-edge; }
+.shadow { box-shadow: 0 1px 3px 0 oc-sh(0.12, 0.65), 0 1px 2px -1px oc-sh(0.1, 0.55) + $oc-shadow-edge; }
+.shadow-md { box-shadow: 0 4px 6px -1px oc-sh(0.15, 0.7), 0 2px 4px -2px oc-sh(0.12, 0.6) + $oc-shadow-edge; }
+.shadow-lg { box-shadow: 0 10px 15px -3px oc-sh(0.18, 0.75), 0 4px 6px -4px oc-sh(0.14, 0.65) + $oc-shadow-edge-hi; }
+.shadow-xl { box-shadow: 0 20px 25px -5px oc-sh(0.22, 0.8), 0 8px 10px -6px oc-sh(0.16, 0.7) + $oc-shadow-edge-hi; }
+.shadow-2xl { box-shadow: 0 25px 50px -12px oc-sh(0.35, 0.9) + $oc-shadow-edge-hi; }
+.shadow-inner { box-shadow: inset 0 2px 4px 0 oc-sh(0.12, 0.6); }
+/* Colored shadows: set the shadow color (Omnia palette) for any .shadow-* class — clearly visible on dark backgrounds */
+.shadow-blue { --oc-shadow-color: var(--color-vividblue-80); }
+.shadow-cyan { --oc-shadow-color: var(--color-skycyan-80); }
+.shadow-purple { --oc-shadow-color: var(--color-purple-20); }
+.shadow-green { --oc-shadow-color: var(--color-green-40); }
+.shadow-red { --oc-shadow-color: var(--color-red-40); }
+.shadow-black { --oc-shadow-color: var(--color-black-50); }
+/* Glow: soft colored light around the element (uses the shadow color, default Omnia blue) */
+.shadow-glow { box-shadow: 0 0 0 1px oklch(from var(--oc-shadow-color, var(--color-vividblue-80)) l c h / 0.35), 0 0 32px -4px oklch(from var(--oc-shadow-color, var(--color-vividblue-80)) l c h / 0.6); }
+.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px oc-sh(0.18, 0.75), 0 4px 6px -4px oc-sh(0.14, 0.65) + $oc-shadow-edge-hi; }
+.hover\:shadow-glow:hover { box-shadow: 0 0 0 1px oklch(from var(--oc-shadow-color, var(--color-vividblue-80)) l c h / 0.35), 0 0 32px -4px oklch(from var(--oc-shadow-color, var(--color-vividblue-80)) l c h / 0.6); }
+
+/* Text shadow */
+.text-shadow-none { text-shadow: none; }
+.text-shadow-sm { text-shadow: 0 1px 1px oklch(from var(--oc-shadow-color, var(--color-black-50)) l c h / 0.25); }
+.text-shadow { text-shadow: 0 1px 2px oklch(from var(--oc-shadow-color, var(--color-black-50)) l c h / 0.35); }
+.text-shadow-md { text-shadow: 0 2px 4px oklch(from var(--oc-shadow-color, var(--color-black-50)) l c h / 0.4); }
+.text-shadow-lg { text-shadow: 0 4px 8px oklch(from var(--oc-shadow-color, var(--color-black-50)) l c h / 0.45); }
+
+/* Mix blend mode */
+.mix-blend-normal { mix-blend-mode: normal; }
+.mix-blend-multiply { mix-blend-mode: multiply; }
+.mix-blend-screen { mix-blend-mode: screen; }
+.mix-blend-overlay { mix-blend-mode: overlay; }
+.mix-blend-darken { mix-blend-mode: darken; }
+.mix-blend-lighten { mix-blend-mode: lighten; }
+.mix-blend-color-dodge { mix-blend-mode: color-dodge; }
+.mix-blend-color-burn { mix-blend-mode: color-burn; }
+.mix-blend-hard-light { mix-blend-mode: hard-light; }
+.mix-blend-soft-light { mix-blend-mode: soft-light; }
+.mix-blend-difference { mix-blend-mode: difference; }
+.mix-blend-exclusion { mix-blend-mode: exclusion; }
+.mix-blend-hue { mix-blend-mode: hue; }
+.mix-blend-saturation { mix-blend-mode: saturation; }
+.mix-blend-color { mix-blend-mode: color; }
+.mix-blend-luminosity { mix-blend-mode: luminosity; }
+
+/* Background blend mode */
+.bg-blend-normal { background-blend-mode: normal; }
+.bg-blend-multiply { background-blend-mode: multiply; }
+.bg-blend-screen { background-blend-mode: screen; }
+.bg-blend-overlay { background-blend-mode: overlay; }
+.bg-blend-darken { background-blend-mode: darken; }
+.bg-blend-lighten { background-blend-mode: lighten; }
+.bg-blend-color-dodge { background-blend-mode: color-dodge; }
+.bg-blend-color-burn { background-blend-mode: color-burn; }
+.bg-blend-hard-light { background-blend-mode: hard-light; }
+.bg-blend-soft-light { background-blend-mode: soft-light; }
+.bg-blend-difference { background-blend-mode: difference; }
+.bg-blend-exclusion { background-blend-mode: exclusion; }
+
+/* Mask family */
+.mask-none { mask-image: none; -webkit-mask-image: none; }
+.mask-image-linear { mask-image: linear-gradient(to right, transparent, black); -webkit-mask-image: linear-gradient(to right, transparent, black); }
+.mask-image-radial { mask-image: radial-gradient(circle, black 50%, transparent 70%); -webkit-mask-image: radial-gradient(circle, black 50%, transparent 70%); }
+
+.mask-clip-border { mask-clip: border-box; -webkit-mask-clip: border; }
+.mask-clip-padding { mask-clip: padding-box; -webkit-mask-clip: padding; }
+.mask-clip-content { mask-clip: content-box; -webkit-mask-clip: content; }
+
+.mask-origin-border { mask-origin: border-box; -webkit-mask-origin: border-box; }
+.mask-origin-padding { mask-origin: padding-box; -webkit-mask-origin: padding-box; }
+.mask-origin-content { mask-origin: content-box; -webkit-mask-origin: content-box; }
+
+.mask-position-center { mask-position: center; -webkit-mask-position: center; }
+.mask-position-top { mask-position: top; -webkit-mask-position: top; }
+.mask-position-bottom { mask-position: bottom; -webkit-mask-position: bottom; }
+
+.mask-repeat { mask-repeat: repeat; -webkit-mask-repeat: repeat; }
+.mask-no-repeat { mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
+
+.mask-size-auto { mask-size: auto; -webkit-mask-size: auto; }
+.mask-size-contain { mask-size: contain; -webkit-mask-size: contain; }
+.mask-size-cover { mask-size: cover; -webkit-mask-size: cover; }
+
+.mask-mode-alpha { mask-mode: alpha; }
+.mask-mode-luminance { mask-mode: luminance; }
+
+.mask-type-alpha { mask-type: alpha; }
+.mask-type-luminance { mask-type: luminance; }
+
+.mask-composite-add { mask-composite: add; -webkit-mask-composite: source-over; }
+.mask-composite-subtract { mask-composite: subtract; -webkit-mask-composite: source-out; }
+.mask-composite-intersect { mask-composite: intersect; -webkit-mask-composite: source-in; }
+.mask-composite-exclude { mask-composite: exclude; -webkit-mask-composite: xor; }

package/scss/utilities/_experimental_css.scss

@@ -0,0 +1,149 @@
+// SCSS Document
+// File: src/scss/utilities/_experimental_css.scss
+// Description: Newest CSS features that are (still) implemented in one browser engine: gap decorations,
+//              caret shape/animation, interactivity, interest invokers, scroll targets, reading-order, overlay,
+//              text-size-adjust, object-view-box, text-decoration-inset, view-transition-group and per-corner shapes.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Progressive enhancement only — every class is ignored by browsers without support.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_gaps
+// Map: gap decorations -> caret -> interactivity -> interest delay -> scroll targets -> reading-order -> overlay
+//      -> text-size-adjust -> object-view-box -> text-decoration-inset -> view-transition-group -> per-corner shapes
+//      -> intrinsic sizes -> mask border -> shape-image-threshold -> font-width
+
+/* Gap decorations — lines drawn in the gaps of grid, flex and multi-column layouts */
+.rule-solid { rule-style: solid; }
+.rule-dashed { rule-style: dashed; }
+.rule-dotted { rule-style: dotted; }
+.rule-1 { rule-width: 1px; }
+.rule-2 { rule-width: 2px; }
+.rule-current { rule-color: currentcolor; }
+.row-rule-solid { row-rule-style: solid; }
+.row-rule-1 { row-rule-width: 1px; }
+.row-rule-current { row-rule-color: currentcolor; }
+.rule-break-none { rule-break: none; }
+.rule-break-spanning-item { rule-break: spanning-item; }
+.rule-break-intersection { rule-break: intersection; }
+.rule-inset-0 { rule-inset: 0; }
+.rule-inset-2 { rule-inset: 0.5rem; }
+.column-rule-solid-1 { column-rule: 1px solid currentcolor; }
+
+/* Caret shape and animation (text input cursor) */
+.caret-shape-auto { caret-shape: auto; }
+.caret-shape-bar { caret-shape: bar; }
+.caret-shape-block { caret-shape: block; }
+.caret-shape-underscore { caret-shape: underscore; }
+.caret-animation-auto { caret-animation: auto; }
+.caret-animation-manual { caret-animation: manual; }
+
+/* Interactivity — make a subtree inert from CSS */
+.interactivity-auto { interactivity: auto; }
+.interactivity-inert { interactivity: inert; }
+
+/* Interest invokers (hover/focus to show a popover) */
+.interest-delay-0 { interest-delay: 0s; }
+.interest-delay-short { interest-delay: 0.2s 0.1s; }
+.interest-delay-normal { interest-delay: normal; }
+
+/* Scroll targets — initial scroll position and scroll-spy groups */
+.scroll-initial-target-nearest { scroll-initial-target: nearest; }
+.scroll-initial-target-none { scroll-initial-target: none; }
+.scroll-target-group-auto { scroll-target-group: auto; }
+.scroll-target-group-none { scroll-target-group: none; }
+
+/* Reading order of individual items (works with reading-flow on the parent) */
+.reading-order-first { reading-order: -1; }
+.reading-order-0 { reading-order: 0; }
+.reading-order-last { reading-order: 1; }
+
+/* Overlay (top layer) — transition it with .transition-discrete for exit animations */
+.overlay-auto { overlay: auto; }
+.overlay-none { overlay: none; }
+
+/* Text size adjust (mobile text inflation) */
+.text-size-adjust-none { -webkit-text-size-adjust: none; text-size-adjust: none; }
+.text-size-adjust-auto { -webkit-text-size-adjust: auto; text-size-adjust: auto; }
+.text-size-adjust-100 { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+
+/* Object view box — crop/zoom a replaced element */
+.object-view-box-none { object-view-box: none; }
+.object-view-box-center { object-view-box: inset(25%); }
+
+/* Text decoration inset — shorten underlines at both ends */
+.decoration-inset-0 { text-decoration-inset: 0; }
+.decoration-inset-auto { text-decoration-inset: auto; }
+.decoration-inset-2 { text-decoration-inset: 0.125em; }
+
+/* View transition group */
+.vt-group-normal { view-transition-group: normal; }
+.vt-group-contain { view-transition-group: contain; }
+.vt-group-nearest { view-transition-group: nearest; }
+
+/* Per-corner shapes (combine with .round-*) */
+.corner-t-bevel { corner-top-shape: bevel; }
+.corner-b-bevel { corner-bottom-shape: bevel; }
+.corner-l-scoop { corner-left-shape: scoop; }
+.corner-r-scoop { corner-right-shape: scoop; }
+.corner-tl-notch { corner-top-left-shape: notch; }
+.corner-tr-notch { corner-top-right-shape: notch; }
+.corner-bl-squircle { corner-bottom-left-shape: squircle; }
+.corner-br-squircle { corner-bottom-right-shape: squircle; }
+
+/* Intrinsic sizes per axis (with content-visibility: auto) */
+.contain-intrinsic-w-auto-md { contain-intrinsic-width: auto 300px; }
+.contain-intrinsic-h-auto-md { contain-intrinsic-height: auto 500px; }
+.contain-intrinsic-inline-auto-md { contain-intrinsic-inline-size: auto 300px; }
+.contain-intrinsic-block-auto-md { contain-intrinsic-block-size: auto 500px; }
+
+/* Mask border and shape image threshold */
+.mask-border-none { mask-border: none; }
+.mask-border-gradient {
+  mask-border-source: linear-gradient(#000, transparent);
+  mask-border-slice: 30 fill;
+  mask-border-width: 30px;
+  mask-border-repeat: stretch;
+  mask-border-outset: 0;
+}
+.shape-image-threshold-0 { shape-image-threshold: 0; }
+.shape-image-threshold-50 { shape-image-threshold: 0.5; }
+
+/* Font width (new name of font-stretch) */
+.font-width-condensed { font-width: condensed; }
+.font-width-normal { font-width: normal; }
+.font-width-expanded { font-width: expanded; }
+
+/* Gap decoration shorthands and longhands */
+.rule-line { rule: 1px solid currentcolor; }
+.row-rule-line { row-rule: 1px solid currentcolor; }
+.column-rule-break-intersection { column-rule-break: intersection; }
+.row-rule-break-intersection { row-rule-break: intersection; }
+.column-rule-inset-2 { column-rule-inset: 0.5rem; }
+.row-rule-inset-2 { row-rule-inset: 0.5rem; }
+.rule-overlap-row { rule-overlap: row-over-column; }
+.rule-overlap-column { rule-overlap: column-over-row; }
+.rule-visibility-around { rule-visibility-items: around; }
+
+/* Multi-column wrapping into rows */
+.column-wrap-wrap { column-wrap: wrap; }
+.column-height-sm { column-height: 10rem; }
+
+/* Logical per-corner shapes */
+.corner-ss-bevel { corner-start-start-shape: bevel; }
+.corner-ee-bevel { corner-end-end-shape: bevel; }
+.corner-inline-start-scoop { corner-inline-start-shape: scoop; }
+.corner-block-end-notch { corner-block-end-shape: notch; }
+
+/* Misc newest */
+.font-synthesis-position-none { font-synthesis-position: none; }
+.decoration-skip-spaces-all { text-decoration-skip-spaces: all; }
+.decoration-skip-spaces-none { text-decoration-skip-spaces: none; }
+.text-fit-grow { text-fit: grow; }
+.text-fit-shrink { text-fit: shrink; }
+.vt-scope-all { view-transition-scope: all; }
+.interest-delay-start-0 { interest-delay-start: 0s; }
+.interest-delay-end-0 { interest-delay-end: 0s; }
+.stroke-color-current { stroke-color: currentcolor; }
+.speak-as-spell-out { speak-as: spell-out; }
+.speak-as-digits { speak-as: digits; }