@birdycom/omniacss 0.11.0 → 0.11.2

package/scss/utilities/_typography_advanced.scss

@@ -1,124 +1,124 @@
-// SCSS Document
-// File: src/scss/utilities/_typography_advanced.scss
-// Map: smoothing/stretch/clamp/list-image/text-overflow/wrap/indent/overflow-wrap/hyphens/content/quotes/counters/line-height keywords
-
-/* Font smoothing */
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.subpixel-antialiased {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
-/* Font stretch */
-.font-stretch-ultra-condensed { font-stretch: ultra-condensed; }
-.font-stretch-extra-condensed { font-stretch: extra-condensed; }
-.font-stretch-condensed { font-stretch: condensed; }
-.font-stretch-semi-condensed { font-stretch: semi-condensed; }
-.font-stretch-normal { font-stretch: normal; }
-.font-stretch-semi-expanded { font-stretch: semi-expanded; }
-.font-stretch-expanded { font-stretch: expanded; }
-.font-stretch-extra-expanded { font-stretch: extra-expanded; }
-.font-stretch-ultra-expanded { font-stretch: ultra-expanded; }
-
-/* Line clamp */
-.line-clamp-none {
-  overflow: visible;
-  display: block;
-  -webkit-box-orient: horizontal;
-  -webkit-line-clamp: unset;
-}
-.line-clamp-1,
-.line-clamp-2,
-.line-clamp-3,
-.line-clamp-4,
-.line-clamp-5,
-.line-clamp-6 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-.line-clamp-1 { -webkit-line-clamp: 1; }
-.line-clamp-2 { -webkit-line-clamp: 2; }
-.line-clamp-3 { -webkit-line-clamp: 3; }
-.line-clamp-4 { -webkit-line-clamp: 4; }
-.line-clamp-5 { -webkit-line-clamp: 5; }
-.line-clamp-6 { -webkit-line-clamp: 6; }
-
-/* List style image */
-.list-image-none { list-style-image: none; }
-.list-image-check { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23059669' d='M10.3 3.3 5 8.6 1.7 5.3l1.1-1.1L5 6.4l4.2-4.2z'/%3E%3C/svg%3E"); }
-.list-image-dot { list-style-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%233b82f6%22/%3E%3C/svg%3E'); }
-
-/* Text overflow */
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.text-ellipsis { text-overflow: ellipsis; }
-.text-clip { text-overflow: clip; }
-
-/* Text wrap */
-.text-wrap { text-wrap: wrap; }
-.text-nowrap { text-wrap: nowrap; }
-.text-balance { text-wrap: balance; }
-.text-pretty { text-wrap: pretty; }
-
-/* Text indent */
-.indent-0 { text-indent: 0; }
-.indent-1 { text-indent: 0.25rem; }
-.indent-2 { text-indent: 0.5rem; }
-.indent-4 { text-indent: 1rem; }
-.indent-8 { text-indent: 2rem; }
-
-/* Overflow wrap */
-.wrap-normal { overflow-wrap: normal; }
-.wrap-break-word { overflow-wrap: break-word; }
-.wrap-anywhere { overflow-wrap: anywhere; }
-
-/* Hyphens */
-.hyphens-none { hyphens: none; }
-.hyphens-manual { hyphens: manual; }
-.hyphens-auto { hyphens: auto; }
-
-/* Content helpers */
-.content-none::before,
-.content-none::after { content: none; }
-.content-empty::before,
-.content-empty::after { content: ""; }
-.content-open-quote::before { content: open-quote; }
-.content-close-quote::after { content: close-quote; }
-.content-attr::before { content: attr(data-oc-content); }
-
-/* Quotes */
-.quotes-none { quotes: none; }
-.quotes-auto { quotes: auto; }
-.quotes-french { quotes: "\00AB" "\00BB" "\2039" "\203A"; }
-.quotes-german { quotes: "\201E" "\201C" "\201A" "\2018"; }
-.quotes-english { quotes: "\201C" "\201D" "\2018" "\2019"; }
-
-/* Counters — reset/increment the "oc" counter and print it with ::before */
-.counter-reset { counter-reset: oc; }
-.counter-reset-none { counter-reset: none; }
-.counter-increment { counter-increment: oc; }
-.counter-increment-none { counter-increment: none; }
-.counter-set-0 { counter-set: oc 0; }
-.content-counter::before { content: counter(oc) ". "; }
-.content-counters::before { content: counters(oc, ".") " "; }
-
-/* List style type — newer predefined counter styles */
-.list-disclosure-open { list-style-type: disclosure-open; }
-.list-disclosure-closed { list-style-type: disclosure-closed; }
-.list-l-armenian { list-style-type: lower-armenian; }
-.list-cjk-decimal { list-style-type: cjk-decimal; }
-
-/* Line height keywords — unitless, scale with the font size (the .lineheight-{n} classes are fixed rem values) */
-.lineheight-none { line-height: 1; }
-.lineheight-tight { line-height: 1.25; }
-.lineheight-snug { line-height: 1.375; }
-.lineheight-relaxed { line-height: 1.625; }
-.lineheight-loose { line-height: 2; }
-.lineheight-normal { line-height: normal; }
+// SCSS Document
+// File: src/scss/utilities/_typography_advanced.scss
+// Map: smoothing/stretch/clamp/list-image/text-overflow/wrap/indent/overflow-wrap/hyphens/content/quotes/counters/line-height keywords
+
+/* Font smoothing */
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
+/* Font stretch */
+.font-stretch-ultra-condensed { font-stretch: ultra-condensed; }
+.font-stretch-extra-condensed { font-stretch: extra-condensed; }
+.font-stretch-condensed { font-stretch: condensed; }
+.font-stretch-semi-condensed { font-stretch: semi-condensed; }
+.font-stretch-normal { font-stretch: normal; }
+.font-stretch-semi-expanded { font-stretch: semi-expanded; }
+.font-stretch-expanded { font-stretch: expanded; }
+.font-stretch-extra-expanded { font-stretch: extra-expanded; }
+.font-stretch-ultra-expanded { font-stretch: ultra-expanded; }
+
+/* Line clamp */
+.line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: unset;
+}
+.line-clamp-1,
+.line-clamp-2,
+.line-clamp-3,
+.line-clamp-4,
+.line-clamp-5,
+.line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.line-clamp-1 { -webkit-line-clamp: 1; }
+.line-clamp-2 { -webkit-line-clamp: 2; }
+.line-clamp-3 { -webkit-line-clamp: 3; }
+.line-clamp-4 { -webkit-line-clamp: 4; }
+.line-clamp-5 { -webkit-line-clamp: 5; }
+.line-clamp-6 { -webkit-line-clamp: 6; }
+
+/* List style image */
+.list-image-none { list-style-image: none; }
+.list-image-check { list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23059669' d='M10.3 3.3 5 8.6 1.7 5.3l1.1-1.1L5 6.4l4.2-4.2z'/%3E%3C/svg%3E"); }
+.list-image-dot { list-style-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%228%22 height=%228%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223%22 fill=%22%233b82f6%22/%3E%3C/svg%3E'); }
+
+/* Text overflow */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip { text-overflow: clip; }
+
+/* Text wrap */
+.text-wrap { text-wrap: wrap; }
+.text-nowrap { text-wrap: nowrap; }
+.text-balance { text-wrap: balance; }
+.text-pretty { text-wrap: pretty; }
+
+/* Text indent */
+.indent-0 { text-indent: 0; }
+.indent-1 { text-indent: 0.25rem; }
+.indent-2 { text-indent: 0.5rem; }
+.indent-4 { text-indent: 1rem; }
+.indent-8 { text-indent: 2rem; }
+
+/* Overflow wrap */
+.wrap-normal { overflow-wrap: normal; }
+.wrap-break-word { overflow-wrap: break-word; }
+.wrap-anywhere { overflow-wrap: anywhere; }
+
+/* Hyphens */
+.hyphens-none { hyphens: none; }
+.hyphens-manual { hyphens: manual; }
+.hyphens-auto { hyphens: auto; }
+
+/* Content helpers */
+.content-none::before,
+.content-none::after { content: none; }
+.content-empty::before,
+.content-empty::after { content: ""; }
+.content-open-quote::before { content: open-quote; }
+.content-close-quote::after { content: close-quote; }
+.content-attr::before { content: attr(data-oc-content); }
+
+/* Quotes */
+.quotes-none { quotes: none; }
+.quotes-auto { quotes: auto; }
+.quotes-french { quotes: "\00AB" "\00BB" "\2039" "\203A"; }
+.quotes-german { quotes: "\201E" "\201C" "\201A" "\2018"; }
+.quotes-english { quotes: "\201C" "\201D" "\2018" "\2019"; }
+
+/* Counters — reset/increment the "oc" counter and print it with ::before */
+.counter-reset { counter-reset: oc; }
+.counter-reset-none { counter-reset: none; }
+.counter-increment { counter-increment: oc; }
+.counter-increment-none { counter-increment: none; }
+.counter-set-0 { counter-set: oc 0; }
+.content-counter::before { content: counter(oc) ". "; }
+.content-counters::before { content: counters(oc, ".") " "; }
+
+/* List style type — newer predefined counter styles */
+.list-disclosure-open { list-style-type: disclosure-open; }
+.list-disclosure-closed { list-style-type: disclosure-closed; }
+.list-l-armenian { list-style-type: lower-armenian; }
+.list-cjk-decimal { list-style-type: cjk-decimal; }
+
+/* Line height keywords — unitless, scale with the font size (the .lineheight-{n} classes are fixed rem values) */
+.lineheight-none { line-height: 1; }
+.lineheight-tight { line-height: 1.25; }
+.lineheight-snug { line-height: 1.375; }
+.lineheight-relaxed { line-height: 1.625; }
+.lineheight-loose { line-height: 2; }
+.lineheight-normal { line-height: normal; }

package/scss/utilities/_typography_modern.scss

@@ -1,83 +1,83 @@
-// SCSS Document
-// File: src/scss/utilities/_typography_modern.scss
-// Description: Modern typography utilities — text-box trimming, whitespace collapsing, CJK spacing,
-//              initial letters, emphasis marks and font rendering controls.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .text-box-*, .text-stable, .whitespace-collapse-*, .text-spacing-trim-*, .text-autospace-*,
-//          .hanging-*, .initial-letter-*, .emphasis-*, .font-optical-*, .font-kerning-*, .tab-* and .break-auto-phrase.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/text-box
-// Note: complements _typography_advanced.scss (text-wrap, line-clamp, hyphens, ...).
-// Map: text-box -> text-wrap-style -> white-space-collapse -> CJK spacing -> hanging punctuation
-//      -> initial-letter -> text-emphasis -> font rendering -> tab-size -> word-break
-
-/* Text box — trim the space above cap height and below the baseline */
-.text-box-normal { text-box: normal; }
-.text-box-trim { text-box: trim-both cap alphabetic; }
-.text-box-trim-start { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
-.text-box-trim-end { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
-.text-box-trim-ex { text-box: trim-both ex alphabetic; }
-
-/* Text wrap style */
-.text-stable { text-wrap-style: stable; }
-.text-wrap-auto { text-wrap-style: auto; }
-
-/* White space collapse */
-.whitespace-collapse { white-space-collapse: collapse; }
-.whitespace-preserve { white-space-collapse: preserve; }
-.whitespace-preserve-breaks { white-space-collapse: preserve-breaks; }
-.whitespace-preserve-spaces { white-space-collapse: preserve-spaces; }
-.whitespace-break-spaces { white-space-collapse: break-spaces; }
-
-/* Text spacing trim (CJK punctuation) */
-.text-spacing-trim-normal { text-spacing-trim: normal; }
-.text-spacing-trim-auto { text-spacing-trim: auto; }
-.text-spacing-trim-space-all { text-spacing-trim: space-all; }
-.text-spacing-trim-space-first { text-spacing-trim: space-first; }
-
-/* Text autospace (space between CJK and Latin/numbers) */
-.text-autospace-normal { text-autospace: normal; }
-.text-autospace-auto { text-autospace: auto; }
-.text-autospace-none { text-autospace: no-autospace; }
-
-/* Hanging punctuation */
-.hanging-none { hanging-punctuation: none; }
-.hanging-first { hanging-punctuation: first; }
-.hanging-last { hanging-punctuation: last; }
-.hanging-first-last { hanging-punctuation: first allow-end last; }
-
-/* Initial letter (drop caps) — applied to ::first-letter */
-.initial-letter-normal::first-letter { initial-letter: normal; }
-.initial-letter-2::first-letter { initial-letter: 2; }
-.initial-letter-3::first-letter { initial-letter: 3; }
-.initial-letter-3-2::first-letter { initial-letter: 3 2; }
-
-/* Text emphasis */
-.emphasis-none { text-emphasis: none; }
-.emphasis-dot { text-emphasis: filled dot; }
-.emphasis-circle { text-emphasis: filled circle; }
-.emphasis-open-circle { text-emphasis: open circle; }
-.emphasis-sesame { text-emphasis: filled sesame; }
-.emphasis-triangle { text-emphasis: filled triangle; }
-.emphasis-over { text-emphasis-position: over right; }
-.emphasis-under { text-emphasis-position: under right; }
-
-/* Font rendering */
-.font-optical-auto { font-optical-sizing: auto; }
-.font-optical-none { font-optical-sizing: none; }
-.font-kerning-auto { font-kerning: auto; }
-.font-kerning-normal { font-kerning: normal; }
-.font-kerning-none { font-kerning: none; }
-.font-synthesis-none { font-synthesis: none; }
-.font-palette-light { font-palette: light; }
-.font-palette-dark { font-palette: dark; }
-
-/* Tab size */
-.tab-2 { tab-size: 2; }
-.tab-4 { tab-size: 4; }
-.tab-8 { tab-size: 8; }
-
-/* Word break — phrase-aware line breaking (Japanese) */
-.break-auto-phrase { word-break: auto-phrase; }
+// SCSS Document
+// File: src/scss/utilities/_typography_modern.scss
+// Description: Modern typography utilities — text-box trimming, whitespace collapsing, CJK spacing,
+//              initial letters, emphasis marks and font rendering controls.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .text-box-*, .text-stable, .whitespace-collapse-*, .text-spacing-trim-*, .text-autospace-*,
+//          .hanging-*, .initial-letter-*, .emphasis-*, .font-optical-*, .font-kerning-*, .tab-* and .break-auto-phrase.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/text-box
+// Note: complements _typography_advanced.scss (text-wrap, line-clamp, hyphens, ...).
+// Map: text-box -> text-wrap-style -> white-space-collapse -> CJK spacing -> hanging punctuation
+//      -> initial-letter -> text-emphasis -> font rendering -> tab-size -> word-break
+
+/* Text box — trim the space above cap height and below the baseline */
+.text-box-normal { text-box: normal; }
+.text-box-trim { text-box: trim-both cap alphabetic; }
+.text-box-trim-start { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
+.text-box-trim-end { text-box-trim: trim-end; text-box-edge: cap alphabetic; }
+.text-box-trim-ex { text-box: trim-both ex alphabetic; }
+
+/* Text wrap style */
+.text-stable { text-wrap-style: stable; }
+.text-wrap-auto { text-wrap-style: auto; }
+
+/* White space collapse */
+.whitespace-collapse { white-space-collapse: collapse; }
+.whitespace-preserve { white-space-collapse: preserve; }
+.whitespace-preserve-breaks { white-space-collapse: preserve-breaks; }
+.whitespace-preserve-spaces { white-space-collapse: preserve-spaces; }
+.whitespace-break-spaces { white-space-collapse: break-spaces; }
+
+/* Text spacing trim (CJK punctuation) */
+.text-spacing-trim-normal { text-spacing-trim: normal; }
+.text-spacing-trim-auto { text-spacing-trim: auto; }
+.text-spacing-trim-space-all { text-spacing-trim: space-all; }
+.text-spacing-trim-space-first { text-spacing-trim: space-first; }
+
+/* Text autospace (space between CJK and Latin/numbers) */
+.text-autospace-normal { text-autospace: normal; }
+.text-autospace-auto { text-autospace: auto; }
+.text-autospace-none { text-autospace: no-autospace; }
+
+/* Hanging punctuation */
+.hanging-none { hanging-punctuation: none; }
+.hanging-first { hanging-punctuation: first; }
+.hanging-last { hanging-punctuation: last; }
+.hanging-first-last { hanging-punctuation: first allow-end last; }
+
+/* Initial letter (drop caps) — applied to ::first-letter */
+.initial-letter-normal::first-letter { initial-letter: normal; }
+.initial-letter-2::first-letter { initial-letter: 2; }
+.initial-letter-3::first-letter { initial-letter: 3; }
+.initial-letter-3-2::first-letter { initial-letter: 3 2; }
+
+/* Text emphasis */
+.emphasis-none { text-emphasis: none; }
+.emphasis-dot { text-emphasis: filled dot; }
+.emphasis-circle { text-emphasis: filled circle; }
+.emphasis-open-circle { text-emphasis: open circle; }
+.emphasis-sesame { text-emphasis: filled sesame; }
+.emphasis-triangle { text-emphasis: filled triangle; }
+.emphasis-over { text-emphasis-position: over right; }
+.emphasis-under { text-emphasis-position: under right; }
+
+/* Font rendering */
+.font-optical-auto { font-optical-sizing: auto; }
+.font-optical-none { font-optical-sizing: none; }
+.font-kerning-auto { font-kerning: auto; }
+.font-kerning-normal { font-kerning: normal; }
+.font-kerning-none { font-kerning: none; }
+.font-synthesis-none { font-synthesis: none; }
+.font-palette-light { font-palette: light; }
+.font-palette-dark { font-palette: dark; }
+
+/* Tab size */
+.tab-2 { tab-size: 2; }
+.tab-4 { tab-size: 4; }
+.tab-8 { tab-size: 8; }
+
+/* Word break — phrase-aware line breaking (Japanese) */
+.break-auto-phrase { word-break: auto-phrase; }

package/scss/utilities/_view_transitions.scss

@@ -1,64 +1,64 @@
-// SCSS Document
-// File: src/scss/utilities/_view_transitions.scss
-// Description: View Transitions utilities — name and group elements for animated view changes.
-// Copyright: 2021-2026 Birdycom
-// Author: Serge Cools
-// Version: 0.3.0
-// Framework: OmniaCSS
-// Purpose: Generate .vt-name-*, .vt-class-* classes and the opt-in mixin for cross-document transitions.
-// Reference: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
-// Note: @view-transition { navigation: auto; } is a global at-rule. It is NOT emitted by default;
-//       include the mixin view-transition-navigation() in your own stylesheet to opt in.
-// Map: view-transition-name -> view-transition-class -> pseudo-element animations -> opt-in mixin
-
-/* View transition name — each name must be unique on the page */
-.vt-name-none { view-transition-name: none; }
-.vt-name-auto { view-transition-name: auto; }
-.vt-name-match-element { view-transition-name: match-element; }
-.vt-name-hero { view-transition-name: hero; }
-.vt-name-header { view-transition-name: header; }
-.vt-name-main { view-transition-name: main; }
-.vt-name-media { view-transition-name: media; }
-
-/* View transition class — share transition styles between named elements */
-.vt-class-card { view-transition-class: card; }
-.vt-class-fade { view-transition-class: fade; }
-.vt-class-slide { view-transition-class: slide; }
-
-/* Preset animations for the classes above */
-::view-transition-group(*.fade) {
-  animation-duration: 200ms;
-}
-::view-transition-old(*.slide) {
-  animation: oc-vt-slide-out 250ms ease-in both;
-}
-::view-transition-new(*.slide) {
-  animation: oc-vt-slide-in 250ms ease-out both;
-}
-
-@keyframes oc-vt-slide-out {
-  to { opacity: 0; transform: translateX(-2rem); }
-}
-@keyframes oc-vt-slide-in {
-  from { opacity: 0; transform: translateX(2rem); }
-}
-
-/* Respect reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(*),
-  ::view-transition-old(*),
-  ::view-transition-new(*) {
-    animation: none !important;
-  }
-}
-
-/// Opt in to cross-document (MPA) view transitions.
-/// @group ViewTransitions
-/// @example scss
-///   @use 'utilities/view_transitions' as vt;
-///   @include vt.view-transition-navigation;
-@mixin view-transition-navigation {
-  @view-transition {
-    navigation: auto;
-  }
-}
+// SCSS Document
+// File: src/scss/utilities/_view_transitions.scss
+// Description: View Transitions utilities — name and group elements for animated view changes.
+// Copyright: 2021-2026 Birdycom
+// Author: Serge Cools
+// Version: 0.3.0
+// Framework: OmniaCSS
+// Purpose: Generate .vt-name-*, .vt-class-* classes and the opt-in mixin for cross-document transitions.
+// Reference: https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
+// Note: @view-transition { navigation: auto; } is a global at-rule. It is NOT emitted by default;
+//       include the mixin view-transition-navigation() in your own stylesheet to opt in.
+// Map: view-transition-name -> view-transition-class -> pseudo-element animations -> opt-in mixin
+
+/* View transition name — each name must be unique on the page */
+.vt-name-none { view-transition-name: none; }
+.vt-name-auto { view-transition-name: auto; }
+.vt-name-match-element { view-transition-name: match-element; }
+.vt-name-hero { view-transition-name: hero; }
+.vt-name-header { view-transition-name: header; }
+.vt-name-main { view-transition-name: main; }
+.vt-name-media { view-transition-name: media; }
+
+/* View transition class — share transition styles between named elements */
+.vt-class-card { view-transition-class: card; }
+.vt-class-fade { view-transition-class: fade; }
+.vt-class-slide { view-transition-class: slide; }
+
+/* Preset animations for the classes above */
+::view-transition-group(*.fade) {
+  animation-duration: 200ms;
+}
+::view-transition-old(*.slide) {
+  animation: oc-vt-slide-out 250ms ease-in both;
+}
+::view-transition-new(*.slide) {
+  animation: oc-vt-slide-in 250ms ease-out both;
+}
+
+@keyframes oc-vt-slide-out {
+  to { opacity: 0; transform: translateX(-2rem); }
+}
+@keyframes oc-vt-slide-in {
+  from { opacity: 0; transform: translateX(2rem); }
+}
+
+/* Respect reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+/// Opt in to cross-document (MPA) view transitions.
+/// @group ViewTransitions
+/// @example scss
+///   @use 'utilities/view_transitions' as vt;
+///   @include vt.view-transition-navigation;
+@mixin view-transition-navigation {
+  @view-transition {
+    navigation: auto;
+  }
+}