@birdycom/omniacss 0.0.0-stage → 0.11.1

package/scss/utilities/_index.scss

@@ -0,0 +1,22 @@
+// SCSS Document 
+// File: src/scss/utilities/_index.scss
+// Description: file for using @forward and @use in are utilities map 
+// Copyright: 2021-2022 Birdycom
+// Autor: Serge Cools
+// Version: 0.2.0
+// Framework: OmniaCSS
+
+
+@forward "../variables/variables";
+@forward "../config/omniacss.config";
+@forward "../functions/functions";
+@forward "../variables/modifiers";
+@forward "../variables/variables_effects";
+@forward "../variables/color_tone";
+@forward "../variables/variables_colors_omnia";
+@forward "../variables/variables_colors_ral";
+@forward "../variables/variables_colors_html";
+@forward "../variables/variables_typography";
+@forward "../variables/variables_layout";
+@forward "../variables/variables_flex_grid";
+@forward "../variables/mixins";

package/scss/utilities/_interactivity.scss

@@ -0,0 +1,198 @@
+// SCSS Document
+// File: src/scss/utilities/_interactivity.scss
+// Map: accent/appearance/caret/scheme/cursor/pointer -> resize/scroll -> touch/select/will-change
+//      -> field-sizing -> base-select -> reading-flow -> scroll-markers -> overflow-anchor -> print
+
+/* Accent color */
+.accent-auto { accent-color: auto; }
+.accent-blue { accent-color: var(--color-vividblue-95); }
+.accent-red { accent-color: var(--color-red-60); }
+.accent-green { accent-color: var(--color-green-40); }
+
+/* Appearance */
+.appearance-none { appearance: none; }
+.appearance-auto { appearance: auto; }
+
+/* Caret color */
+.caret-auto { caret-color: auto; }
+.caret-transparent { caret-color: transparent; }
+.caret-blue { caret-color: var(--color-vividblue-95); }
+.caret-red { caret-color: var(--color-red-60); }
+.caret-green { caret-color: var(--color-green-40); }
+
+/* Color scheme */
+.scheme-normal { color-scheme: normal; }
+.scheme-light { color-scheme: light; }
+.scheme-dark { color-scheme: dark; }
+.scheme-light-dark { color-scheme: light dark; }
+.scheme-only-light { color-scheme: only light; }
+
+/* Cursor */
+.cursor-auto { cursor: auto; }
+.cursor-default { cursor: default; }
+.cursor-pointer { cursor: pointer; }
+.cursor-wait { cursor: wait; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-help { cursor: help; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+.cursor-crosshair { cursor: crosshair; }
+
+/* Pointer events */
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+
+/* Resize */
+.resize-none { resize: none; }
+.resize { resize: both; }
+.resize-x { resize: horizontal; }
+.resize-y { resize: vertical; }
+
+/* Scroll behavior */
+.scroll-auto { scroll-behavior: auto; }
+.scroll-smooth { scroll-behavior: smooth; }
+
+/* Scroll margin */
+.scroll-m-0 { scroll-margin: 0; }
+.scroll-m-1 { scroll-margin: 0.25rem; }
+.scroll-m-2 { scroll-margin: 0.5rem; }
+.scroll-m-4 { scroll-margin: 1rem; }
+.scroll-m-8 { scroll-margin: 2rem; }
+.scroll-mx-4 { scroll-margin-left: 1rem; scroll-margin-right: 1rem; }
+.scroll-my-4 { scroll-margin-top: 1rem; scroll-margin-bottom: 1rem; }
+.scroll-mt-4 { scroll-margin-top: 1rem; }
+.scroll-mr-4 { scroll-margin-right: 1rem; }
+.scroll-mb-4 { scroll-margin-bottom: 1rem; }
+.scroll-ml-4 { scroll-margin-left: 1rem; }
+
+/* Scroll padding */
+.scroll-p-0 { scroll-padding: 0; }
+.scroll-p-1 { scroll-padding: 0.25rem; }
+.scroll-p-2 { scroll-padding: 0.5rem; }
+.scroll-p-4 { scroll-padding: 1rem; }
+.scroll-p-8 { scroll-padding: 2rem; }
+.scroll-px-4 { scroll-padding-left: 1rem; scroll-padding-right: 1rem; }
+.scroll-py-4 { scroll-padding-top: 1rem; scroll-padding-bottom: 1rem; }
+.scroll-pt-4 { scroll-padding-top: 1rem; }
+.scroll-pr-4 { scroll-padding-right: 1rem; }
+.scroll-pb-4 { scroll-padding-bottom: 1rem; }
+.scroll-pl-4 { scroll-padding-left: 1rem; }
+
+/* Scroll snap */
+.snap-start { scroll-snap-align: start; }
+.snap-end { scroll-snap-align: end; }
+.snap-center { scroll-snap-align: center; }
+.snap-align-none { scroll-snap-align: none; }
+.snap-normal { scroll-snap-stop: normal; }
+.snap-always { scroll-snap-stop: always; }
+.snap-none { scroll-snap-type: none; }
+.snap-x { scroll-snap-type: x mandatory; }
+.snap-y { scroll-snap-type: y mandatory; }
+.snap-both { scroll-snap-type: both mandatory; }
+.snap-proximity { scroll-snap-type: both proximity; }
+
+/* Touch action */
+.touch-auto { touch-action: auto; }
+.touch-none { touch-action: none; }
+.touch-pan-x { touch-action: pan-x; }
+.touch-pan-left { touch-action: pan-left; }
+.touch-pan-right { touch-action: pan-right; }
+.touch-pan-y { touch-action: pan-y; }
+.touch-pan-up { touch-action: pan-up; }
+.touch-pan-down { touch-action: pan-down; }
+.touch-pinch-zoom { touch-action: pinch-zoom; }
+.touch-manipulation { touch-action: manipulation; }
+
+/* User select */
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+.select-all { user-select: all; }
+.select-auto { user-select: auto; }
+
+/* Will change */
+.will-change-auto { will-change: auto; }
+.will-change-scroll { will-change: scroll-position; }
+.will-change-contents { will-change: contents; }
+.will-change-transform { will-change: transform; }
+
+/* Color scheme — only dark */
+.scheme-only-dark { color-scheme: only dark; }
+
+/* Field sizing — let form controls grow with their content */
+.field-sizing-content { field-sizing: content; }
+.field-sizing-fixed { field-sizing: fixed; }
+
+/* Customizable select */
+.appearance-base-select { appearance: base-select; }
+.appearance-base-select::picker(select) { appearance: base-select; }
+
+/* Reading flow — keyboard/screen reader order follows the visual layout */
+.reading-flow-normal { reading-flow: normal; }
+.reading-flow-flex-visual { reading-flow: flex-visual; }
+.reading-flow-flex-flow { reading-flow: flex-flow; }
+.reading-flow-grid-rows { reading-flow: grid-rows; }
+.reading-flow-grid-columns { reading-flow: grid-columns; }
+.reading-flow-grid-order { reading-flow: grid-order; }
+.reading-flow-source-order { reading-flow: source-order; }
+
+/* Scroll markers — CSS-only carousel navigation dots */
+.scroll-markers-none { scroll-marker-group: none; }
+.scroll-markers-before { scroll-marker-group: before; }
+.scroll-markers-after { scroll-marker-group: after; }
+/* Default look of the generated dots (Omnia colors); the active one follows the scroll position. */
+:is(.scroll-markers-before, .scroll-markers-after)::scroll-marker-group {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  padding: 0.6rem;
+}
+:is(.scroll-markers-before, .scroll-markers-after) > *::scroll-marker {
+  content: "";
+  display: block;
+  inline-size: 0.7rem;
+  block-size: 0.7rem;
+  border-radius: 50%;
+  background: oklch(from var(--color-mistblue-80) l c h / 0.6);
+}
+:is(.scroll-markers-before, .scroll-markers-after) > *::scroll-marker:target-current {
+  background: var(--color-vividblue-80);
+}
+
+/* Scroll buttons — CSS-only previous/next arrows on a scroll container (::scroll-button()) */
+.scroll-buttons {
+  anchor-name: --oc-scroller;
+  anchor-scope: --oc-scroller;
+}
+.scroll-buttons::scroll-button(*) {
+  position: absolute;
+  position-anchor: --oc-scroller;
+  top: anchor(center);
+  translate: 0 -50%;
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  border: 0;
+  border-radius: 50%;
+  background: oklch(from var(--color-mistblue-95) l c h / 0.75);
+  color: var(--color-white-50);
+  font-size: 1rem;
+  cursor: pointer;
+}
+.scroll-buttons::scroll-button(*):disabled { opacity: 0.3; cursor: default; }
+.scroll-buttons::scroll-button(*):focus-visible { outline: 2px solid var(--color-vividblue-80); outline-offset: 2px; }
+.scroll-buttons::scroll-button(inline-start) { content: "\2039" / "Previous"; left: calc(anchor(left) + 0.5rem); }
+.scroll-buttons::scroll-button(inline-end) { content: "\203A" / "Next"; right: calc(anchor(right) + 0.5rem); }
+
+/* Overflow anchor — scroll anchoring */
+.overflow-anchor-auto { overflow-anchor: auto; }
+.overflow-anchor-none { overflow-anchor: none; }
+
+/* Print color adjust */
+.print-exact { print-color-adjust: exact; }
+.print-economy { print-color-adjust: economy; }
+
+/* Will change — opacity */
+.will-change-opacity { will-change: opacity; }

package/scss/utilities/_layering.scss

@@ -0,0 +1,24 @@
+// SCSS Document
+// File: src/scss/utilities/_layering.scss
+// Map: isolation -> visibility -> z-index
+
+/* Isolation utilities */
+
+.isolate { isolation: isolate; }
+.isolation-auto { isolation: auto; }
+
+/* Visibility utilities */
+
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+.collapse { visibility: collapse; }
+
+/* Z-index utilities */
+
+.z-auto { z-index: auto; }
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-20 { z-index: 20; }
+.z-30 { z-index: 30; }
+.z-40 { z-index: 40; }
+.z-50 { z-index: 50; }

package/scss/utilities/_layout_extras.scss

@@ -0,0 +1,171 @@
+// SCSS Document
+// File: src/scss/utilities/_layout_extras.scss
+// Description: Layout properties that were still missing: inset shorthand, logical inset/min/max sizes,
+//              flex-flow, grid areas, margin-trim, logical overflow/overscroll/scroll spacing, safe areas,
+//              zoom, container shorthand, all, empty-cells, image-orientation and background-position axes.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .inset-*, .inset-x-*, .inset-y-*, .inset-bs-*/.inset-be-*, .min-inline-*/.max-block-* …,
+//          .flex-flow-*, .grid-areas-*, .area-*, .margin-trim-*, .overflow-inline-*/.overflow-block-*,
+//          .overflow-clip-margin-*, .overscroll-inline-*/.overscroll-block-*, .scroll-m-inline-*, .scroll-ms-*, .scroll-p-block-* …,
+//          .p-safe*/.m-safe*, .zoom-*, .cq-card, .all-*, .empty-cells-*, .image-orientation-*, .bg-pos-x-*/.bg-pos-y-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/inset
+// Map: inset -> logical inset/sizes -> flex-flow -> grid areas -> margin-trim -> overflow axes -> overscroll axes
+//      -> logical scroll spacing -> safe areas -> zoom -> container -> all -> empty-cells -> image-orientation -> bg axes
+
+$_space: ('0': 0, '1': 0.25rem, '2': 0.5rem, '4': 1rem, '8': 2rem, 'auto': auto, 'full': 100%);
+
+/* Inset shorthand (top/right/bottom/left at once) */
+@each $k, $v in $_space {
+  .inset-#{$k} { inset: $v; }
+  .inset-x-#{$k} { left: $v; right: $v; }
+  .inset-y-#{$k} { top: $v; bottom: $v; }
+  .inset-bs-#{$k} { inset-block-start: $v; }
+  .inset-be-#{$k} { inset-block-end: $v; }
+}
+
+/* Logical min/max sizes */
+@each $k, $v in ('0': 0, 'full': 100%, 'fit': fit-content, 'min': min-content, 'max': max-content, 'none': none) {
+  @if $k != 'none' {
+    .min-inline-#{$k} { min-inline-size: $v; }
+    .min-block-#{$k} { min-block-size: $v; }
+  }
+  @if $k != '0' {
+    .max-inline-#{$k} { max-inline-size: $v; }
+    .max-block-#{$k} { max-block-size: $v; }
+  }
+}
+
+/* Flex flow (direction + wrap in one) */
+.flex-flow-row { flex-flow: row nowrap; }
+.flex-flow-row-wrap { flex-flow: row wrap; }
+.flex-flow-col { flex-flow: column nowrap; }
+.flex-flow-col-wrap { flex-flow: column wrap; }
+.flex-flow-row-reverse-wrap { flex-flow: row-reverse wrap; }
+
+/* Grid template areas + grid-area (named layout) */
+.grid-areas-holy-grail {
+  grid-template-areas: "header header" "sidebar main" "footer footer";
+  grid-template-columns: minmax(10rem, 1fr) 3fr;
+}
+.grid-areas-stack { grid-template-areas: "header" "main" "sidebar" "footer"; }
+.grid-areas-none { grid-template-areas: none; }
+.grid-template-none { grid-template: none; }
+.grid-none { grid: none; }
+@each $area in (header, sidebar, main, footer) {
+  .area-#{$area} { grid-area: $area; }
+}
+.area-auto { grid-area: auto; }
+.area-full { grid-area: 1 / 1 / -1 / -1; }
+
+/* Margin trim — remove child margins at the container edges */
+.margin-trim-none { margin-trim: none; }
+.margin-trim-block { margin-trim: block; }
+.margin-trim-inline { margin-trim: inline; }
+
+/* Logical overflow axes */
+@each $v in (auto, hidden, clip, visible, scroll) {
+  .overflow-inline-#{$v} { overflow-inline: $v; }
+  .overflow-block-#{$v} { overflow-block: $v; }
+}
+.overflow-clip-margin-0 { overflow-clip-margin: 0; }
+.overflow-clip-margin-2 { overflow-clip-margin: 0.5rem; }
+.overflow-clip-margin-4 { overflow-clip-margin: 1rem; }
+.overflow-clip-margin-content { overflow-clip-margin: content-box; }
+
+/* Logical overscroll behavior */
+@each $v in (auto, contain, none) {
+  .overscroll-inline-#{$v} { overscroll-behavior-inline: $v; }
+  .overscroll-block-#{$v} { overscroll-behavior-block: $v; }
+}
+
+/* Logical scroll margin / padding (s = inline-start, e = inline-end, bs/be = block-start/end) */
+@each $k, $v in ('0': 0, '2': 0.5rem, '4': 1rem, '8': 2rem) {
+  .scroll-m-inline-#{$k} { scroll-margin-inline: $v; }
+  .scroll-m-block-#{$k} { scroll-margin-block: $v; }
+  .scroll-ms-#{$k} { scroll-margin-inline-start: $v; }
+  .scroll-me-#{$k} { scroll-margin-inline-end: $v; }
+  .scroll-mbs-#{$k} { scroll-margin-block-start: $v; }
+  .scroll-mbe-#{$k} { scroll-margin-block-end: $v; }
+  .scroll-p-inline-#{$k} { scroll-padding-inline: $v; }
+  .scroll-p-block-#{$k} { scroll-padding-block: $v; }
+  .scroll-ps-#{$k} { scroll-padding-inline-start: $v; }
+  .scroll-pe-#{$k} { scroll-padding-inline-end: $v; }
+  .scroll-pbs-#{$k} { scroll-padding-block-start: $v; }
+  .scroll-pbe-#{$k} { scroll-padding-block-end: $v; }
+}
+
+/* Safe areas (notch / home indicator) — needs <meta name="viewport" content="viewport-fit=cover"> */
+.p-safe { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
+.pt-safe { padding-top: env(safe-area-inset-top); }
+.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
+.pl-safe { padding-left: env(safe-area-inset-left); }
+.pr-safe { padding-right: env(safe-area-inset-right); }
+.mb-safe { margin-bottom: env(safe-area-inset-bottom); }
+.h-screen-safe { height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
+
+/* Zoom */
+@each $z in (50, 75, 100, 125, 150) {
+  .zoom-#{$z} { zoom: #{$z * 1%}; }
+}
+
+/* Container shorthand (name / type) */
+.cq-card { container: card / inline-size; }
+.cq-main { container: main / inline-size; }
+.cq-sidebar { container: sidebar / inline-size; }
+
+/* all — reset every property */
+.all-initial { all: initial; }
+.all-inherit { all: inherit; }
+.all-unset { all: unset; }
+.all-revert { all: revert; }
+.all-revert-layer { all: revert-layer; }
+
+/* Table empty cells */
+.empty-cells-show { empty-cells: show; }
+.empty-cells-hide { empty-cells: hide; }
+
+/* Image orientation (EXIF) */
+.image-orientation-from-image { image-orientation: from-image; }
+.image-orientation-none { image-orientation: none; }
+
+/* Background position per axis */
+@each $k, $v in ('left': left, 'center': center, 'right': right, '0': 0%, '50': 50%, '100': 100%) {
+  .bg-pos-x-#{$k} { background-position-x: $v; }
+}
+@each $k, $v in ('top': top, 'center': center, 'bottom': bottom, '0': 0%, '50': 50%, '100': 100%) {
+  .bg-pos-y-#{$k} { background-position-y: $v; }
+}
+
+/* Mask shorthand — fade out content */
+.mask-reset { mask: none; }
+.mask-fade-b { mask: linear-gradient(#000 60%, transparent); }
+.mask-fade-r { mask: linear-gradient(to right, #000 60%, transparent); }
+.mask-fade-x { mask: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }
+
+/* Paged media — named pages for print (@page landscape sets the sheet orientation) */
+.page-auto { page: auto; }
+.page-landscape { page: landscape; }
+@page landscape {
+  size: landscape;
+}
+
+/* position-try shorthand (order + fallbacks) */
+.anchor-try-most-height-flip { position-try: most-height flip-block, flip-inline; }
+
+/* SVG geometry properties (responsive shapes inside <svg>) */
+@each $k, $v in ('0': 0, '25': 25%, '50': 50%, '100': 100%) {
+  .cx-#{$k} { cx: $v; }
+  .cy-#{$k} { cy: $v; }
+  .x-#{$k} { x: $v; }
+  .y-#{$k} { y: $v; }
+}
+.r-25 { r: 25%; }
+.r-50 { r: 50%; }
+.rx-0 { rx: 0; }
+.rx-4 { rx: 4px; }
+.ry-0 { ry: 0; }
+.ry-4 { ry: 4px; }
+.d-none { display: none; }

package/scss/utilities/_layout_flow.scss

@@ -0,0 +1,210 @@
+// SCSS Document
+// File: src/scss/utilities/_layout_flow.scss
+// Map: columns -> break -> box-decoration -> float/clear -> object -> inset -> order
+//      -> column rule/span/fill -> orphans/widows -> image-rendering -> dynamic-range-limit
+
+/* Columns */
+.columns-1 { columns: 1; }
+.columns-2 { columns: 2; }
+.columns-3 { columns: 3; }
+.columns-4 { columns: 4; }
+.columns-5 { columns: 5; }
+.columns-6 { columns: 6; }
+.columns-auto { columns: auto; }
+.columns-3xs { columns: 16rem; }
+.columns-2xs { columns: 18rem; }
+.columns-xs { columns: 20rem; }
+.columns-sm { columns: 24rem; }
+.columns-md { columns: 28rem; }
+.columns-lg { columns: 32rem; }
+
+/* Break before/after/inside */
+.break-before-auto { break-before: auto; }
+.break-before-avoid { break-before: avoid; }
+.break-before-all { break-before: all; }
+.break-before-page { break-before: page; }
+.break-before-column { break-before: column; }
+.break-before-left { break-before: left; }
+.break-before-right { break-before: right; }
+
+.break-after-auto { break-after: auto; }
+.break-after-avoid { break-after: avoid; }
+.break-after-all { break-after: all; }
+.break-after-page { break-after: page; }
+.break-after-column { break-after: column; }
+.break-after-left { break-after: left; }
+.break-after-right { break-after: right; }
+
+.break-inside-auto { break-inside: auto; }
+.break-inside-avoid { break-inside: avoid; }
+.break-inside-avoid-page { break-inside: avoid-page; }
+.break-inside-avoid-column { break-inside: avoid-column; }
+
+/* Box decoration break */
+.box-decoration-slice { box-decoration-break: slice; }
+.box-decoration-clone { box-decoration-break: clone; }
+
+/* Float and clear */
+.float-start { float: inline-start; }
+.float-end { float: inline-end; }
+.float-right { float: right; }
+.float-left { float: left; }
+.float-none { float: none; }
+
+.clear-start { clear: inline-start; }
+.clear-end { clear: inline-end; }
+.clear-left { clear: left; }
+.clear-right { clear: right; }
+.clear-both { clear: both; }
+.clear-none { clear: none; }
+
+/* Object fit and position */
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
+.object-fill { object-fit: fill; }
+.object-none { object-fit: none; }
+.object-scale-down { object-fit: scale-down; }
+
+.object-center { object-position: center; }
+.object-top { object-position: top; }
+.object-bottom { object-position: bottom; }
+.object-left { object-position: left; }
+.object-right { object-position: right; }
+.object-left-top { object-position: left top; }
+.object-left-bottom { object-position: left bottom; }
+.object-right-top { object-position: right top; }
+.object-right-bottom { object-position: right bottom; }
+
+/* Inset (top/right/bottom/left) */
+.top-auto { top: auto; }
+.top-0 { top: 0; }
+.top-1 { top: 0.25rem; }
+.top-2 { top: 0.5rem; }
+.top-4 { top: 1rem; }
+.top-8 { top: 2rem; }
+.top-1\/2 { top: 50%; }
+.top-1\/3 { top: 33.333333%; }
+.top-2\/3 { top: 66.666667%; }
+.top-1\/4 { top: 25%; }
+.top-3\/4 { top: 75%; }
+.top-full { top: 100%; }
+
+.right-auto { right: auto; }
+.right-0 { right: 0; }
+.right-1 { right: 0.25rem; }
+.right-2 { right: 0.5rem; }
+.right-4 { right: 1rem; }
+.right-8 { right: 2rem; }
+.right-1\/2 { right: 50%; }
+.right-1\/3 { right: 33.333333%; }
+.right-2\/3 { right: 66.666667%; }
+.right-1\/4 { right: 25%; }
+.right-3\/4 { right: 75%; }
+.right-full { right: 100%; }
+
+.bottom-auto { bottom: auto; }
+.bottom-0 { bottom: 0; }
+.bottom-1 { bottom: 0.25rem; }
+.bottom-2 { bottom: 0.5rem; }
+.bottom-4 { bottom: 1rem; }
+.bottom-8 { bottom: 2rem; }
+.bottom-1\/2 { bottom: 50%; }
+.bottom-1\/3 { bottom: 33.333333%; }
+.bottom-2\/3 { bottom: 66.666667%; }
+.bottom-1\/4 { bottom: 25%; }
+.bottom-3\/4 { bottom: 75%; }
+.bottom-full { bottom: 100%; }
+
+.left-auto { left: auto; }
+.left-0 { left: 0; }
+.left-1 { left: 0.25rem; }
+.left-2 { left: 0.5rem; }
+.left-4 { left: 1rem; }
+.left-8 { left: 2rem; }
+.left-1\/2 { left: 50%; }
+.left-1\/3 { left: 33.333333%; }
+.left-2\/3 { left: 66.666667%; }
+.left-1\/4 { left: 25%; }
+.left-3\/4 { left: 75%; }
+.left-full { left: 100%; }
+
+/* Order */
+.order-first { order: -9999; }
+.order-last { order: 9999; }
+.order-none { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-9 { order: 9; }
+.order-10 { order: 10; }
+.order-11 { order: 11; }
+.order-12 { order: 12; }
+
+/* Column count / width aliases (documented in docs/columns) */
+.cols-1 { column-count: 1; }
+.cols-2 { column-count: 2; }
+.cols-3 { column-count: 3; }
+.cols-4 { column-count: 4; }
+.cols-5 { column-count: 5; }
+.cols-6 { column-count: 6; }
+.cols-auto { column-count: auto; }
+.col-w-auto { column-width: auto; }
+.col-w-16 { column-width: 16rem; }
+.col-w-20 { column-width: 20rem; }
+.col-w-24 { column-width: 24rem; }
+
+/* Column rule, span and fill */
+.col-rule-none { column-rule-style: none; }
+.col-rule-solid { column-rule-style: solid; }
+.col-rule-dashed { column-rule-style: dashed; }
+.col-rule-dotted { column-rule-style: dotted; }
+.col-rule-1 { column-rule-width: 1px; }
+.col-rule-2 { column-rule-width: 2px; }
+.col-rule-4 { column-rule-width: 4px; }
+.col-rule-current { column-rule-color: currentcolor; }
+.col-span-all { column-span: all; }
+.col-span-none { column-span: none; }
+.col-fill-auto { column-fill: auto; }
+.col-fill-balance { column-fill: balance; }
+
+/* Break avoid page/column */
+.break-before-avoid-page { break-before: avoid-page; }
+.break-before-avoid-column { break-before: avoid-column; }
+.break-after-avoid-page { break-after: avoid-page; }
+.break-after-avoid-column { break-after: avoid-column; }
+
+/* Box decoration break aliases */
+.decoration-slice { box-decoration-break: slice; }
+.decoration-clone { box-decoration-break: clone; }
+
+/* Orphans and widows */
+.orphans-1 { orphans: 1; }
+.orphans-2 { orphans: 2; }
+.orphans-3 { orphans: 3; }
+.orphans-4 { orphans: 4; }
+.widows-1 { widows: 1; }
+.widows-2 { widows: 2; }
+.widows-3 { widows: 3; }
+.widows-4 { widows: 4; }
+
+/* Object position aliases */
+.object-top-left { object-position: top left; }
+.object-top-right { object-position: top right; }
+.object-bottom-left { object-position: bottom left; }
+.object-bottom-right { object-position: bottom right; }
+
+/* Image rendering */
+.image-auto { image-rendering: auto; }
+.image-smooth { image-rendering: smooth; }
+.image-crisp { image-rendering: crisp-edges; }
+.image-pixelated { image-rendering: pixelated; }
+
+/* Dynamic range limit (HDR images/video) */
+.dynamic-range-standard { dynamic-range-limit: standard; }
+.dynamic-range-constrained { dynamic-range-limit: constrained; }
+.dynamic-range-no-limit { dynamic-range-limit: no-limit; }

package/scss/utilities/_mask_extras.scss

@@ -0,0 +1,62 @@
+// SCSS Document
+// File: src/scss/utilities/_mask_extras.scss
+// Description: More mask utilities — edge fades, composable linear/radial masks with stop positions, and the missing
+//              position, size, clip and mode keywords next to the .mask-* classes of _effects_advanced.scss.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.4.0
+// Framework: OmniaCSS
+// Purpose: Generate .mask-fade-{t|l|y}, .mask-linear-{deg}, .mask-radial-{circle|ellipse}, .mask-from-{n}, .mask-to-{n},
+//          .mask-position-{side|corner}, .mask-size-{n}, .mask-clip-no-clip, .mask-mode-match-source, .mask-composite-*.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
+// Note: .mask-linear-* / .mask-radial-* fade from opaque to transparent between --oc-mask-from and --oc-mask-to;
+//       move the stops with .mask-from-{n} / .mask-to-{n}: class="mask-linear-180 mask-from-60".
+// Map: edge fades -> composable gradient masks -> position -> size -> clip and mode
+
+/* Edge fades (.mask-fade-b, -r and -x live in _layout_extras.scss) */
+.mask-fade-t { mask: linear-gradient(to top, black 60%, transparent); }
+.mask-fade-l { mask: linear-gradient(to left, black 60%, transparent); }
+.mask-fade-y { mask: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
+
+/* Composable gradient masks */
+@each $deg in (0, 45, 90, 135, 180, 225, 270, 315) {
+  .mask-linear-#{$deg} {
+    mask-image: linear-gradient(#{$deg}deg, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+  }
+}
+.mask-radial-circle {
+  mask-image: radial-gradient(circle, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+}
+.mask-radial-ellipse {
+  mask-image: radial-gradient(ellipse, black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+}
+.mask-conic {
+  mask-image: conic-gradient(black var(--oc-mask-from, 0%), transparent var(--oc-mask-to, 100%));
+}
+@each $n in (0, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) {
+  .mask-from-#{$n} { --oc-mask-from: #{$n}%; }
+  .mask-to-#{$n} { --oc-mask-to: #{$n}%; }
+}
+
+/* Mask position */
+$_mask-positions: ('left': left, 'right': right, 'left-top': left top, 'right-top': right top, 'left-bottom': left bottom, 'right-bottom': right bottom);
+@each $key, $value in $_mask-positions {
+  .mask-position-#{$key} { mask-position: $value; }
+}
+
+/* Mask repeat */
+.mask-repeat-x { mask-repeat: repeat-x; }
+.mask-repeat-y { mask-repeat: repeat-y; }
+.mask-repeat-space { mask-repeat: space; }
+.mask-repeat-round { mask-repeat: round; }
+
+/* Mask size in percent and rem */
+@each $n in (25, 50, 75, 100) {
+  .mask-size-#{$n} { mask-size: #{$n}%; }
+}
+
+/* Mask clip, mode, composite and reset */
+.mask-clip-no-clip { mask-clip: no-clip; }
+.mask-clip-text { mask-clip: text; }
+.mask-mode-match-source { mask-mode: match-source; }
+.mask-composite-source-over { mask-composite: add; }