@swiftwc/ui 0.0.0-dev.113 → 0.0.0-dev.115

package/generated/internal/class/navigation-path.js

@@ -2,7 +2,7 @@
  * Gets current host (closest)
  */
 function closestHost(any) {
-    return any?.closest('body-view,[is=sheet-view],navigation-stack,navigation-split-view') ?? undefined;
+    return any?.closest('content-view,[is=sheet-view],navigation-stack,navigation-split-view') ?? undefined;
 }
 export class NavigationPath {
     #component;
@@ -49,7 +49,7 @@ export class NavigationPath {
     }
     #querySlot() {
         this.#slot =
-            this.#component?.querySelector(':scope>body-view:not([hidden]),:scope>[is=sheet-view]:not([hidden]),:scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])') ?? null;
+            this.#component?.querySelector(':scope>content-view:not([hidden]),:scope>[is=sheet-view]:not([hidden]),:scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])') ?? null;
     }
     hydrate() {
         this.#queryBody();

package/generated/internal/privateNamespace.d.ts

@@ -1,7 +1,7 @@
 import type * as Components from '../components';
 import { NavigationPath } from '../internal/class/navigation-path';
 type TransitionType = 'forwards' | 'backwards' | 'reload';
-export type NavigationHost = Components.BodyView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
+export type NavigationHost = Components.ContentView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
 export type NavigationToolbarConfiguration = Components.ToolBarItem | Components.ToolBarItemGroup;
 export type NavigationPage = Components.SidebarView | Components.ScrollView;
 export declare function queryInsertPosition(frame?: NavigationHost): "afterend" | "beforebegin";

package/generated/internal/privateNamespace.js

@@ -4,7 +4,7 @@ import { Snapshot } from '../snapshot';
 export function queryInsertPosition(frame) {
     if ('NAVIGATION-SPLIT-VIEW' === frame?.tagName)
         return 'beforebegin'; // lookFor = 'previousElementSibling'
-    else if ('NAVIGATION-SPLIT-VIEW' === frame?.parentElement?.tagName && frame?.parentElement.querySelector(':scope>[is=sidebar-view]') && 'BODY-VIEW' === frame?.tagName)
+    else if ('NAVIGATION-SPLIT-VIEW' === frame?.parentElement?.tagName && frame?.parentElement.querySelector(':scope>[is=sidebar-view]') && 'CONTENT-VIEW' === frame?.tagName)
         return 'beforebegin'; // lookFor = 'previousElementSibling'
     return 'afterend'; // lookFor = 'nextElementSibling'
 }
@@ -71,8 +71,8 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
             oldToolbar.classList.add('fwn'); // prepare navbs
         // prepare new
         const toolbarExclusion = 0 < modalViews.length
-            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,body-view ~ tool-bar)')
-            : (value, index, array) => value.parentElement?.matches('tool-bar:not(body-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
+            ? (value, index, array) => value.parentElement?.matches('tool-bar:not(dialog tool-bar,content-view ~ tool-bar)')
+            : (value, index, array) => value.parentElement?.matches('tool-bar:not(content-view ~ tool-bar)'), bodyExclusion = 0 < modalViews.length ? (item) => item.body?.matches('scroll-view:not(dialog scroll-view)') : (value, index, array) => value;
         for (const bti of newToolbars?.filter?.(toolbarExclusion) ?? [])
             bti.classList.add('fwnn'); // for (const ti of newToolbars ?? []) ti.classList.add('fwnn') //
         for (const bt of tos?.filter?.(bodyExclusion) ?? []) {

package/html-data/en.json

@@ -11,16 +11,6 @@
       ],
       "description": "A dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.\n---\n\n```ts\ninterface AlertDialogSignature {}\n\nclass AlertDialog extends HTMLDialogElement<AlertDialogSignature> {}\n\ndeclare global {\n  interface HTMLDialogElement {\n    is: 'alert-dialog' // <dialog is=\"alert-dialog\"></dialog>\n  }\n}\n\n```\n"
     },
-    {
-      "name": "body-view",
-      "references": [
-        {
-          "name": "Documentation",
-          "url": "https://swiftwc.github.io/ui/web-components/body-view"
-        }
-      ],
-      "description": "A container view that wraps a scroll view, marking it as a screen your app can navigate to.\n---\n\n```ts\ninterface BodyViewSignature {}\n\nclass BodyView extends HTMLElement<BodyViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'body-view': BodyView // <body-view></body-view>\n  }\n}\n\n```\n"
-    },
     {
       "name": "bordered-button",
       "references": [
@@ -141,6 +131,16 @@
       ],
       "description": "A message with a title and extra information that you show when part of your app can’t be used.\n---\n\n```ts\ninterface ContentUnavailableSignature {\n  Attributes: {\n    search?: string\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    description: HTMLElement[]\n    actions: HTMLElement[]\n  }\n}\n\nclass ContentUnavailable extends HTMLElement<ContentUnavailableSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'content-unavailable': ContentUnavailable // <content-unavailable></content-unavailable>\n  }\n}\n\n```\n\n### **Examples:**\n**Example:**\n```html\n<content-unavailable search></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable search=\"foo\"></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n  <label-view title=\"No Mail\">\n    <i class=\"ph ph-tray\" slot=\"icon\" foreground=\"secondary\"></i>\n  </label-view>\n  <label-view\n    title=\"New mails you receive will appear here.\"\n    foreground=\"secondary\"\n    slot=\"description\"\n  ></label-view>\n  <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n    <label-view title=\"Switch Account\"></label-view>\n  </button>\n</content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n  <label-view title=\"No Mail\">\n    <svg slot=\"icon\" foreground=\"secondary\" ...>...</svg>\n  </label-view>\n  <label-view\n    title=\"New mails you receive will appear here.\"\n    foreground=\"secondary\"\n    slot=\"description\"\n  ></label-view>\n  <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n    <label-view title=\"Switch Account\"></label-view>\n  </button>\n</content-unavailable>\n\n```\n"
     },
+    {
+      "name": "content-view",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/content-view"
+        }
+      ],
+      "description": "A container view that wraps a scroll view, marking it as a screen your app can navigate to.\n---\n\n```ts\ninterface ContentViewSignature {}\n\nclass ContentView extends HTMLElement<ContentViewSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'content-view': ContentView // <content-view></content-view>\n  }\n}\n\n```\n"
+    },
     {
       "name": "date-picker",
       "references": [
@@ -1438,6 +1438,14 @@
     {
       "name": "Foreground",
       "values": [
+        {
+          "name": "black",
+          "description": "Applies the system black color (`--black`)"
+        },
+        {
+          "name": "white",
+          "description": "Applies the system white color (`--white`)"
+        },
         {
           "name": "primary",
           "description": "Applies the system primary color (`--primary`)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.113",
+  "version": "0.0.0-dev.115",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_components.scss

@@ -60,7 +60,7 @@
 
 // @forward 'components/button-view';
 
-@forward 'components/body-view';
+@forward 'components/content-view';
 
 @forward 'components/navigation-large-title';
 @forward 'components/navigation-title';

package/scss/_maps.scss

@@ -263,6 +263,8 @@ $button-sizes-map: (
 $tint-names: gray, blue, red, green, orange, purple;
 
 $foreground-tokens: (
+  black: --black,
+  white: --white,
   primary: --primary,
   secondary: --secondary,
   blue: --blue,

package/scss/base/_layout.scss

@@ -3,7 +3,7 @@
 @use '../placeholders';
 
 @layer #{vars.$components-layer} {
-  body-view,
+  content-view,
   navigation-stack,
   navigation-split-view,
   [is='full-screen'],
@@ -23,11 +23,11 @@
   }
 
   navigation-stack:has(> navigation-stack:not([hidden]),> navigation-split-view:not([hidden])),
-  navigation-stack:has(> body-view),
-  navigation-split-view:has(> body-view),
-  dialog:has(> body-view),
-  // body-view:has(> dialog),
-  body-view:has(> body-view) {
+  navigation-stack:has(> content-view),
+  navigation-split-view:has(> content-view),
+  dialog:has(> content-view),
+  // content-view:has(> dialog),
+  content-view:has(> content-view) {
     > scroll-view,
     > [is='sidebar-view'] > scroll-view {
       :where(&) {
@@ -55,7 +55,7 @@
 
   // NOTE: Going all the way back from deeply nested views forces an empty landing page.
   // NOTE: Refactor this to add a content-visibility:visible when bwd/fwd classes are present.
-  // :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+  // :is(navigation-stack, dialog, content-view):has(> content-view > content-view) {
   //   > scroll-view,
   //   > tool-bar {
   //     :where(&) {

package/scss/colors/_index.scss

@@ -639,7 +639,7 @@ $colors: map.merge(
   [is='full-screen'],
   [is='confirmation-dialog'],
   [is='alert-dialog'],
-  body-view,
+  content-view,
   navigation-split-view,
   navigation-split-view > [is='sidebar-view'],
   navigation-stack {

package/scss/components/{_body-view.scss → _content-view.scss}

@@ -2,7 +2,7 @@
 @use '../mixins';
 
 @layer #{vars.$components-layer} {
-  // body-view {
+  // content-view {
   //   :where(&) {
   //   }
   // }

package/scss/components/_detail-placeholder.scss

@@ -105,7 +105,7 @@
     @include mixins.if-2col-split-view-fits {
       // also hide when in 2col mode with detail view
       &:not(:has(> [is='sidebar-view'])) {
-        &:has(> body-view) {
+        &:has(> content-view) {
           detail-placeholder {
             :where(&) {
               --nav-split-view--detail-placeholder-visibility: collapse;
@@ -117,7 +117,7 @@
         &:not([column-visibility='double-column']) {
           // hide when no content view
           &[preferred-compact-column='content'] {
-            &:not(:has(> body-view)) {
+            &:not(:has(> content-view)) {
               detail-placeholder {
                 :where(&) {
                   --nav-split-view--detail-placeholder-visibility: collapse;
@@ -127,7 +127,7 @@
           }
           // also hide when in 3col mode with detail view
           @include mixins.if-3col-split-view-fits {
-            &:has(> body-view > body-view) {
+            &:has(> content-view > content-view) {
               detail-placeholder {
                 :where(&) {
                   --nav-split-view--detail-placeholder-visibility: collapse;
@@ -139,7 +139,7 @@
 
         // also hide when in 2col mode with detail view
         &[column-visibility='double-column'] {
-          &:has(> body-view) {
+          &:has(> content-view) {
             detail-placeholder {
               :where(&) {
                 --nav-split-view--detail-placeholder-visibility: collapse;

package/scss/components/_form-view.scss

@@ -152,7 +152,7 @@ $form-elses: (
           :where(navigation-split-view [is='sidebar-view'] &[form-style]) {
             @include mixins.write-props(map.get($form-ifs, sidebar));
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             @include mixins.write-props(map.get($form-ifs, inset));
           }
         }
@@ -167,7 +167,7 @@ $form-elses: (
           :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
             --form-style: sidebar;
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             --form-style: inset;
           }
         }

package/scss/components/_index.scss

@@ -9,7 +9,7 @@
   navigation-large-title,
   navigation-title,
   scroll-view,
-  body-view,
+  content-view,
   tab-view,
   image-view,
   list-view,

package/scss/components/_list-view.scss

@@ -151,7 +151,7 @@ $list-elses: (
           :where(navigation-split-view [is='sidebar-view'] &[list-style]) {
             @include mixins.write-props(map.get($list-ifs, sidebar));
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             @include mixins.write-props(map.get($list-ifs, inset));
           }
         }
@@ -166,7 +166,7 @@ $list-elses: (
           :where(navigation-split-view:has(> [is='sidebar-view']) > [is='sidebar-view'] &[list-style]) {
             --list-style: sidebar;
           }
-          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > body-view > scroll-view &[preferred-expanded-style]) {
+          :where(navigation-split-view > scroll-view &[preferred-expanded-style], navigation-split-view > content-view > scroll-view &[preferred-expanded-style]) {
             --list-style: inset;
           }
         }

package/scss/components/_navigation-split-view.scss

@@ -49,16 +49,16 @@
         z-index: -1;
       }
 
-      :where(& > body-view ~ scroll-view, & > body-view ~ [is='sidebar-view']) {
+      :where(& > content-view ~ scroll-view, & > content-view ~ [is='sidebar-view']) {
         z-index: -1;
       }
 
       &:has(> [is='sidebar-view']) {
-        :where(& > body-view ~ [is='sidebar-view']) {
+        :where(& > content-view ~ [is='sidebar-view']) {
           z-index: -2;
         }
 
-        :where(& > body-view > body-view ~ scroll-view) {
+        :where(& > content-view > content-view ~ scroll-view) {
           z-index: -1;
         }
       }
@@ -67,12 +67,12 @@
     &:has(> [is='sidebar-view']) {
       @include mixins.ifnot-3col-split-view-fits {
         &:not([preferred-compact-column='content']) {
-          :where(& > body-view > body-view ~ scroll-view) {
+          :where(& > content-view > content-view ~ scroll-view) {
             z-index: -1;
           }
         }
 
-        // body-view > body-view {
+        // content-view > content-view {
         // clip-path: inset(
         //   0 0 0 var(--nav-split-view-content-inline-size)
         // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
@@ -82,7 +82,7 @@
 
       @include mixins.if-2col-split-view-fits {
         &[column-visibility='double-column'] {
-          :where(& > body-view > body-view ~ scroll-view) {
+          :where(& > content-view > content-view ~ scroll-view) {
             z-index: -1;
           }
         }
@@ -143,7 +143,7 @@
         }
       }
 
-      > body-view {
+      > content-view {
         scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
           &,
           & ~ tool-bar {
@@ -215,7 +215,7 @@
           // }
         }
 
-        > body-view {
+        > content-view {
           scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
             &,
             & ~ tool-bar {
@@ -250,7 +250,7 @@
               }
 
               // move descendants to left edge of screen
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   &,
                   & ~ tool-bar {
@@ -309,7 +309,7 @@
             // &:has(> dialog[is='sidebar-view']) {
             // &:not([column-visibility='double-column']) {
             // container of content col (principal)
-            > body-view {
+            > content-view {
               // cancel animations
               > scroll-view {
                 ~ tool-bar {
@@ -343,7 +343,7 @@
               }
 
               // container of details col (trailing)
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   &,
                   & ~ tool-bar {
@@ -377,7 +377,7 @@
         --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important
       }
 
-      > body-view {
+      > content-view {
         @include force-disable-col-view-transitions;
       }
 
@@ -389,12 +389,12 @@
           @include mixins.ifnot-3col-split-view-fits {
             &[preferred-compact-column='content'] {
               // move descendants to right
-              > body-view {
+              > content-view {
                 > scroll-view {
                   --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important;
                 }
 
-                > body-view {
+                > content-view {
                   @include force-disable-col-view-transitions;
                 }
               }
@@ -406,13 +406,13 @@
           // SIDEBAR | COMPACT | EXPANDED
           @include mixins.if-3col-split-view-fits {
             // container of compact col (middle)
-            > body-view {
+            > content-view {
               // Fix position as compact col in the middle
               > scroll-view {
                 --scroll-view-translate: translateX(var(--view-transition-principal-x)); // !important;
               }
 
-              > body-view {
+              > content-view {
                 @include force-disable-col-view-transitions;
               }
             }

package/scss/components/_scroll-view.scss

@@ -6,7 +6,7 @@
     navigation-stack > &,
     navigation-split-view > &,
     [is='sidebar-view'] > &,
-    body-view > &,
+    content-view > &,
     [is='full-screen'] > &,
     [is='sheet-view'] > & {
       &:has(~ tool-bar > [slot^='top-bar']),

package/scss/components/_sheet-view.scss

@@ -66,7 +66,7 @@
           :where(&) {
             overflow: visible;
           }
-          scroll-view:has(~ body-view) {
+          scroll-view:has(~ content-view) {
             &,
             & ~ tool-bar {
               :where(&) {

package/scss/components/_tab-view.scss

@@ -18,7 +18,7 @@
   scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
     #{$selector} navigation-stack > &,
     #{$selector} navigation-split-view > &,
-    #{$selector} body-view > & {
+    #{$selector} content-view > & {
       &,
       & ~ tool-bar {
         :where(&) {
@@ -41,7 +41,7 @@
   scroll-view:not(:has(~ tool-bar > [slot^='bottom-bar'])):not(:has(> [slot^='bottom-bar'])) {
     :where(#{$selector} navigation-stack > &),
     :where(#{$selector} navigation-split-view > &),
-    :where(#{$selector} body-view > &) {
+    :where(#{$selector} content-view > &) {
       --safe-area-inset-bottom: calc(max(env(safe-area-inset-bottom), var(--sidebar-block-spacing)) + var(--iphone-tabbar-block-size));
     }
 
@@ -64,7 +64,7 @@
   scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
     #{$selector} navigation-stack > &,
     #{$selector} navigation-split-view > &,
-    #{$selector} body-view > & {
+    #{$selector} content-view > & {
       &,
       & ~ tool-bar {
         :where(&) {
@@ -146,7 +146,7 @@
     scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
       tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
       tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
-      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+      tab-view:not([tab-view-style='tab-bar-only']) content-view > & {
         &,
         & ~ tool-bar {
           :where(&) {
@@ -213,7 +213,7 @@
       // DISCARDS
       @include mixins.if-2col-split-view-fits {
         &:not(:has(> [is='sidebar-view'])) {
-          > body-view {
+          > content-view {
             scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
               @include mixins.discard-sidebar-measures;
             }
@@ -222,7 +222,7 @@
         &:has(> [is='sidebar-view']) {
           &:not([column-visibility='double-column']) {
             &:not([preferred-compact-column='content']) {
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   @include mixins.discard-sidebar-measures;
                 }
@@ -230,8 +230,8 @@
             }
             &[preferred-compact-column='content'] {
               @include mixins.ifnot-3col-split-view-fits {
-                > body-view {
-                  > body-view {
+                > content-view {
+                  > content-view {
                     scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                       @include mixins.discard-sidebar-measures;
                     }
@@ -240,7 +240,7 @@
               }
             }
             @include mixins.if-3col-split-view-fits {
-              > body-view {
+              > content-view {
                 scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                   @include mixins.discard-sidebar-measures;
                 }
@@ -248,7 +248,7 @@
             }
           }
           &[column-visibility='double-column'] {
-            > body-view {
+            > content-view {
               scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
                 @include mixins.discard-sidebar-measures;
               }
@@ -272,7 +272,7 @@
       &:not(:has(> [is='sidebar-view'])) {
         --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
 
-        > body-view {
+        > content-view {
           --sidebar-inline-size: 0px;
           --sidebar-inline-spacing: 0px;
         }
@@ -282,7 +282,7 @@
     scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
       tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
       tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
-      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+      tab-view:not([tab-view-style='tab-bar-only']) content-view > & {
         &,
         & ~ tool-bar {
           :where(&) {
@@ -297,7 +297,7 @@
     //   --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
     // }
     // scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
-    //   tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) > body-view & {
+    //   tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) > content-view & {
     //     &,
     //     & ~ tool-bar {
     //       :where(&) {

package/scss/mixins/_index.scss

@@ -325,13 +325,13 @@
       @content;
     }
     // is content-view!
-    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > body-view > scroll-view & {
+    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > content-view > scroll-view & {
       @content;
     }
   }
   // is content-view!
   @include if-3col-split-view-fits {
-    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > body-view > scroll-view & {
+    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > content-view > scroll-view & {
       @content;
     }
   }

package/scss/transitions/_bwd.scss

@@ -13,7 +13,7 @@
 
       // Inert nested landmarks of destination so that destination can be interacted with
       // Make sure old/outgoing elements can NOT be interacted with (new elements are stacked lower)
-      ~ body-view,
+      ~ content-view,
       ~ navigation-stack,
       ~ navigation-split-view {
         pointer-events: none;
@@ -32,7 +32,7 @@
   // navigation-split-view > .bwdd {
   //   z-index: 0;
   // }
-  navigation-split-view > body-view:has(~ .bwdd) {
+  navigation-split-view > content-view:has(~ .bwdd) {
     pointer-events: none;
     // z-index: 1;
   }