@swiftwc/ui 0.0.0-dev.3 → 0.0.0-dev.5

package/generated/styles.css

@@ -1,8 +1,1305 @@
-@layer base, components, transitions;
+@layer final {
+  #console {
+    position: fixed;
+    left: 30%;
+    bottom: 50%;
+    z-index: 999999999;
+  }
+  #tb {
+    position: fixed;
+    box-shadow: inset 0 0 0 12px greenyellow;
+    top: env(titlebar-area-y);
+    width: env(titlebar-area-width);
+    left: env(titlebar-area-x);
+    height: env(titlebar-area-height);
+    z-index: 999999999;
+  }
+  #sa {
+    position: fixed;
+    box-shadow: inset 0 0 0 10px green;
+    inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+    z-index: 999999999;
+  }
+  #kb {
+    display: grid;
+    position: fixed;
+    box-shadow: inset 0 0 0 8px red;
+    background-color: rosybrown;
+    top: env(keyboard-inset-top, var(--keyboard-inset-top));
+    /* right: env(keyboard-inset-right, 0); */
+    left: env(keyboard-inset-left, 0);
+    /* bottom: env(keyboard-inset-bottom, 0px); */
+    height: env(keyboard-inset-height, var(--keyboard-inset-height));
+    width: env(keyboard-inset-width, 100lvw);
+    z-index: 999999999;
+  }
+  #dv {
+    position: fixed;
+    box-shadow: inset 0 0 0 6px blue;
+    top: 0vh;
+    left: 0vw;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999999999;
+  }
+  #sv {
+    position: fixed;
+    box-shadow: inset 0 0 0 4px magenta;
+    top: 0svh;
+    left: 0svw;
+    width: 100svw;
+    height: 100svh;
+    z-index: 999999999;
+  }
+  #lv {
+    position: fixed;
+    box-shadow: inset 0 0 0 2px maroon;
+    top: 0lvh;
+    left: 0lvw;
+    width: 100lvw;
+    height: 100lvh;
+    z-index: 999999999;
+  }
+}
+@layer components {
+  :root {
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+    --tool-bar-height: 4rem;
+    --tab-bar-iphone-max-width: 90svw;
+    --tab-bar-iphone-height: var(--tool-bar-height);
+    --tab-bar-iphone-border-radius: 9999px;
+    --tab-bar-ipad-width: 21rem;
+    --tab-bar-ipad-height: 3rem;
+    --tab-bar-ipad-border-radius: 9999px;
+    --tab-bar-sidebar-width: 20rem;
+    --tab-bar-sidebar-border-radius: 1rem;
+    --tab-bar-sidebar-spacing: 1rem;
+    --navigation-bar-height: 4rem;
+    --nav-split-view-sidebar-width: 20rem;
+    --nav-split-view-content-width: 25rem;
+    --primary-text: black;
+    --primary-bg: aliceblue;
+    --secondary-bg: burlywood;
+    --view-transition-leading-x: -50%;
+    --view-transition-principal-x: 0%;
+    --view-transition-trailing-x: 100%;
+    --view-transition-toolbar-cell-onscreen-scale: 1;
+    --view-transition-toolbar-cell-offscreen-scale: 0;
+    --view-transition-dialog-onscreen-y: 0lvh;
+    --view-transition-dialog-onscreen-backdrop-bg: rgb(0 0 0 / 25%);
+    --view-transition-dialog-offscreen-y: 100lvh;
+    --view-transition-duration: 500ms;
+    --pill-border-radius: 99999px;
+    --toolbar-col-gap: 0.6rem;
+    --toolbar-cell-bg: white;
+    --toolbar-cell-inline-padding: 0.3rem;
+    --toolbar-cell-block-padding: 0.3rem;
+    --toolbar-cell-border-radius: var(--pill-border-radius);
+    --toolbar-cell-focus-bg: lightpink;
+    --toolbar-cell-active-bg: gray;
+    --disclosure-group-animation-duration: 500ms;
+    --disclosure-group-animation-easing: ease-out;
+  }
+}
+@layer base, components, colors, actions, transitions, final;
 @layer base {
+  :root {
+    interpolate-size: allow-keywords;
+  }
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
+  body {
+    background-color: var(--primary-bg);
+  }
+  body {
+    display: grid;
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    touch-action: none !important;
+  }
+  html::before {
+    content: "disclosure-group-animation-close-class=close&disclosure-group-animation-duration-css-prop=--disclosure-group-animation-duration&disclosure-group-contents-height-css-prop=--disclosure-group-contents-height&vt-fwd-class-name=fwd";
+    display: none;
+  }
+}
+@layer components {
+  body-view,
+  navigation-stack,
+  navigation-split-view,
+  dialog[is=full-screen],
+  dialog[is=sheet-view] {
+    position: relative;
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+  }
+  body-view > *:not([slot]),
+  navigation-stack > *:not([slot]),
+  navigation-split-view > *:not([slot]),
+  dialog[is=full-screen] > *:not([slot]),
+  dialog[is=sheet-view] > *:not([slot]) {
+    grid-column: 1/-1;
+    grid-row: 1/-1;
+  }
+  navigation-stack:has(> navigation-stack:not([hidden])) > scroll-view,
+  navigation-stack:has(> navigation-stack:not([hidden])) [is=sidebar-view] > scroll-view,
+  navigation-stack:has(> body-view) > scroll-view,
+  navigation-stack:has(> body-view) [is=sidebar-view] > scroll-view,
+  navigation-split-view:has(> body-view) > scroll-view,
+  navigation-split-view:has(> body-view) [is=sidebar-view] > scroll-view,
+  dialog:has(> body-view) > scroll-view,
+  dialog:has(> body-view) [is=sidebar-view] > scroll-view,
+  body-view:has(> body-view) > scroll-view,
+  body-view:has(> body-view) [is=sidebar-view] > scroll-view {
+    transform: translateX(var(--view-transition-leading-x));
+  }
+  navigation-stack:has(> navigation-stack:not([hidden])) > navigation-bar > tool-bar-item, navigation-stack:has(> navigation-stack:not([hidden])) > bottom-bar > tool-bar-item, navigation-stack:has(> navigation-stack:not([hidden])) > navigation-bar > tool-bar-item-group, navigation-stack:has(> navigation-stack:not([hidden])) > bottom-bar > tool-bar-item-group,
+  navigation-stack:has(> body-view) > navigation-bar > tool-bar-item,
+  navigation-stack:has(> body-view) > bottom-bar > tool-bar-item,
+  navigation-stack:has(> body-view) > navigation-bar > tool-bar-item-group,
+  navigation-stack:has(> body-view) > bottom-bar > tool-bar-item-group,
+  navigation-split-view:has(> body-view) > navigation-bar > tool-bar-item,
+  navigation-split-view:has(> body-view) > bottom-bar > tool-bar-item,
+  navigation-split-view:has(> body-view) > navigation-bar > tool-bar-item-group,
+  navigation-split-view:has(> body-view) > bottom-bar > tool-bar-item-group,
+  dialog:has(> body-view) > navigation-bar > tool-bar-item,
+  dialog:has(> body-view) > bottom-bar > tool-bar-item,
+  dialog:has(> body-view) > navigation-bar > tool-bar-item-group,
+  dialog:has(> body-view) > bottom-bar > tool-bar-item-group,
+  body-view:has(> body-view) > navigation-bar > tool-bar-item,
+  body-view:has(> body-view) > bottom-bar > tool-bar-item,
+  body-view:has(> body-view) > navigation-bar > tool-bar-item-group,
+  body-view:has(> body-view) > bottom-bar > tool-bar-item-group {
+    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+  }
+}
+@layer components {
+  navigation-stack:not([hidden]),
+  navigation-split-view:not([hidden]),
+  scroll-view,
+  body-view,
+  tab-view,
+  [is=sidebar-view],
+  [is=tab-bar],
+  [is=full-screen],
+  [is=sheet-view],
+  tool-bar-item,
+  tool-bar-item-group,
+  sidebar-toggle,
+  navigation-bar,
+  bottom-bar,
+  tab-bar-stack,
+  v-stack,
+  tool-bar {
+    display: grid;
+  }
+}
+@layer components {
+  v-keyboard {
+    position: fixed;
+    inset: 0lvh auto auto 0lvw;
+    width: 100lvw;
+    height: 100lvh;
+  }
+}
+@layer components {
+  [is=disclosure-group] {
+    display: grid;
+    overflow: clip;
+  }
+  [is=disclosure-group] summary {
+    list-style: none;
+  }
+  [is=disclosure-group]::details-content {
+    background: transparent !important;
+    block-size: 0;
+    transition: block-size var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing), content-visibility var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+    will-change: block-size, content-visibility;
+  }
+  [is=disclosure-group] > *:not(summary) {
+    margin: 0 !important;
+  }
+  [is=disclosure-group][open]::details-content {
+    block-size: auto;
+  }
+  @supports not (interpolate-size: allow-keywords) {
+    [is=disclosure-group]::details-content {
+      block-size: auto !important;
+      transition: max-height var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing), transform var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+      will-change: max-height, transform;
+      max-height: 0;
+    }
+    [is=disclosure-group][open]::details-content {
+      max-height: calc(var(--disclosure-group-contents-height, 100vh) + 100px);
+    }
+    [is=disclosure-group].close::details-content {
+      max-height: 0 !important;
+    }
+  }
+}
+@layer components {}
+@layer components {
+  tab-view {
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+  body {
+    grid-template-rows: 1fr;
+    grid-template-columns: minmax(0px, 1fr);
+  }
+  @media (orientation: landscape) {
+    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
+      --safe-area-inset-top: max(
+        env(safe-area-inset-top),
+        var(--tab-bar-sidebar-spacing)
+      );
+      --safe-area-inset-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--tab-bar-sidebar-spacing)
+      );
+    }
+    tab-view navigation-split-view > [is=sidebar-view] > scroll-view {
+      --safe-area-inset-top: max(
+        env(safe-area-inset-top),
+        var(--tab-bar-sidebar-spacing)
+      );
+      --safe-area-inset-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--tab-bar-sidebar-spacing)
+      );
+    }
+  }
+  @media (max-width: 42.9999rem) and (orientation: portrait) {
+    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
+      --safe-area-inset-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--tab-bar-sidebar-spacing)
+      );
+    }
+    tab-view navigation-split-view > [is=sidebar-view] > scroll-view {
+      --safe-area-inset-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--tab-bar-sidebar-spacing)
+      );
+    }
+  }
+  @media (max-width: 67.9999rem) and (orientation: landscape) {
+    tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
+      --safe-area-inset-left: var(--tabview-padding-inline-start, 0px);
+    }
+  }
+  @media (min-width: 43rem) and (orientation: portrait) {
+    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
+      --safe-area-inset-top: calc(
+        max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
+          var(--tab-bar-ipad-height)
+      );
+    }
+    tab-view navigation-split-view > [is=sidebar-view] > scroll-view {
+      --safe-area-inset-top: calc(
+        max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) +
+          var(--tab-bar-ipad-height)
+      );
+    }
+  }
+  @media (min-width: 68rem) and (orientation: landscape) {
+    tab-view navigation-stack > scroll-view:not(dialog scroll-view), tab-view navigation-split-view > scroll-view:not(dialog scroll-view), tab-view body-view > scroll-view:not(dialog scroll-view), tab-view scroll-view:not(dialog scroll-view) ~ navigation-bar, tab-view scroll-view:not(dialog scroll-view) ~ bottom-bar {
+      --safe-area-inset-left: calc(
+        max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing)) +
+          var(--tab-bar-sidebar-width)
+      );
+    }
+  }
+}
+@layer components {
+  [is=tab-bar] {
+    inset-inline: 0px;
+    inset-block: 0px;
+    margin: 0px;
+    border: none;
+    padding: 0px;
+    background-color: transparent;
+    color: var(--primary-text);
+    max-width: 100lvw;
+    max-height: 100lvh;
+    outline: none;
+    overflow: clip;
+    width: fit-content;
+    height: auto;
+    position: fixed;
+    background: rgba(255, 255, 255, 0.6196078431);
+    backdrop-filter: blur(4px);
+    box-shadow: 0 0 0 1px #fff inset, 0px 0px 4px 2px rgba(0, 0, 0, 0.1098039216);
+    transition: all 250ms ease-out allow-discrete;
+    touch-action: none;
+  }
+  [is=tab-bar] navigation-bar,
+  [is=tab-bar] bottom-bar {
+    padding-inline: 0;
+  }
+  @media (max-width: 42.9999rem) and (orientation: portrait) {
+    [is=tab-bar] {
+      max-width: var(--tab-bar-iphone-max-width);
+      height: var(--tab-bar-iphone-height);
+      border-radius: var(--tab-bar-iphone-border-radius);
+      inset: auto auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) 50%;
+      transform: translateX(-50%);
+      grid-auto-flow: column;
+    }
+    [is=tab-bar]:not([open]) tool-bar {
+      display: none;
+    }
+  }
+  @media (min-width: 43rem) and (orientation: portrait) {
+    [is=tab-bar] {
+      width: var(--tab-bar-ipad-width);
+      height: var(--tab-bar-ipad-height);
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto auto 50%;
+      transform: translateX(-50%);
+      border-radius: var(--tab-bar-ipad-border-radius);
+      grid-auto-flow: column;
+    }
+    [is=tab-bar]:not([open]) tool-bar {
+      display: none;
+    }
+    [is=tab-bar][open] {
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+      height: auto;
+      transform: translateX(0);
+      width: var(--tab-bar-sidebar-width);
+      border-radius: var(--tab-bar-sidebar-border-radius);
+      grid-auto-flow: row;
+    }
+    [is=tab-bar][open] > * {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+      --safe-area-inset-top: 0px !important;
+      --safe-area-inset-bottom: 0px !important;
+    }
+  }
+  @media (max-width: 67.9999rem) and (orientation: landscape) {
+    [is=tab-bar] {
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) -100%;
+      width: var(--tab-bar-sidebar-width);
+      border-radius: var(--tab-bar-sidebar-border-radius);
+    }
+    [is=tab-bar][open] {
+      left: max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+      --tabview-padding-inline-start: 0px !important;
+    }
+    [is=tab-bar][open] > scroll-view {
+      --canvas-bg: #ffffff9e;
+    }
+  }
+  @media (min-width: 68rem) and (orientation: landscape) {
+    [is=tab-bar] {
+      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+      width: var(--tab-bar-sidebar-width);
+      border-radius: var(--tab-bar-sidebar-border-radius);
+      overflow: clip;
+    }
+  }
+}
+@layer components {
+  @media (max-width: 42.9999rem) and (orientation: portrait) {
+    [is=tab-bar] > scroll-view {
+      grid-auto-flow: column;
+    }
+    tab-bar-stack {
+      grid-auto-flow: column;
+      margin-block: 0 !important;
+    }
+  }
+  @media (min-width: 43rem) and (orientation: portrait) {
+    tab-bar-stack {
+      grid-auto-flow: column;
+    }
+    [is=tab-bar][open] tab-bar-stack {
+      grid-auto-flow: row;
+      align-content: start;
+      row-gap: 0.5rem;
+    }
+    [is=tab-bar]:not([open]) tab-bar-stack {
+      margin-block: 0 !important;
+    }
+    [is=tab-bar] > scroll-view {
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+      grid-auto-flow: column;
+      overflow: auto clip;
+    }
+    [is=tab-bar][open] > scroll-view {
+      grid-auto-flow: row;
+      overflow: clip auto;
+    }
+    [is=tab-bar][open] > scroll-view > * {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
+    [is=tab-bar][open] > scroll-view::before {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+      content: "";
+      display: block;
+      height: calc(100% + 1px); /* creates overflow */
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+  @media (max-width: 67.9999rem) and (orientation: landscape) {
+    tab-bar-stack {
+      align-content: start;
+      row-gap: 0.5rem;
+    }
+    [is=tab-bar] > scroll-view {
+      overflow: clip auto;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+    [is=tab-bar] > scroll-view > * {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
+    [is=tab-bar] > scroll-view::before {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+      content: "";
+      display: block;
+      height: calc(100% + 1px); /* creates overflow */
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+  @media (min-width: 68rem) and (orientation: landscape) {
+    tab-bar-stack {
+      align-content: start;
+      row-gap: 0.5rem;
+    }
+    [is=tab-bar] > scroll-view {
+      overflow: clip auto;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+    }
+    [is=tab-bar] > scroll-view > * {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+    }
+    [is=tab-bar] > scroll-view::before {
+      grid-column: 1/-1;
+      grid-row: 1/-1;
+      content: "";
+      display: block;
+      height: calc(100% + 1px); /* creates overflow */
+      z-index: -1;
+      pointer-events: none;
+    }
+  }
+}
+@layer components {
+  sidebar-toggle {
+    background-color: coral;
+    place-items: center;
+    place-content: center;
+  }
+  tab-view > sidebar-toggle, navigation-split-view > sidebar-toggle {
+    position: fixed;
+    inset: max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto auto var(--safe-area-inset-left);
+    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
+  }
+  @media (max-width: 42.9999rem) and (orientation: portrait) {
+    [is=tab-bar] > sidebar-toggle, tab-view > sidebar-toggle {
+      display: none;
+    }
+  }
+  @media (min-width: 43rem) and (orientation: portrait) {
+    [is=tab-bar] > sidebar-toggle {
+      width: 30px;
+      order: -1;
+    }
+    [is=tab-bar][open] > sidebar-toggle {
+      position: sticky;
+      inset: 0 auto auto 0;
+      height: var(--navigation-bar-height);
+    }
+    tab-view > sidebar-toggle {
+      display: none;
+    }
+  }
+  @media (max-width: 67.9999rem) and (orientation: landscape) {
+    [is=tab-bar] > sidebar-toggle {
+      display: none;
+    }
+  }
+  @media (min-width: 68rem) and (orientation: landscape) {
+    [is=tab-bar] > sidebar-toggle, tab-view > sidebar-toggle {
+      display: none;
+    }
+  }
+}
+@layer components {
+  [is=full-screen] {
+    inset-inline: 0px;
+    inset-block: 0px;
+    margin: 0px;
+    border: none;
+    padding: 0px;
+    background-color: transparent;
+    color: var(--primary-text);
+    max-width: 100lvw;
+    max-height: 100lvh;
+    outline: none;
+    overflow: clip;
+    width: 100lvw;
+    height: var(--100lvh, 100lvh);
+  }
+}
+@layer components {
+  [is=sheet-view] {
+    inset-inline: 0px;
+    inset-block: 0px;
+    margin: 0px;
+    border: none;
+    padding: 0px;
+    background-color: transparent;
+    color: var(--primary-text);
+    max-width: 100lvw;
+    max-height: 100lvh;
+    outline: none;
+    overflow: clip;
+    width: 100lvw;
+    height: var(--100lvh, 100lvh);
+    transform: translateY(var(--view-transition-dialog-offscreen-y));
+  }
+  [is=sheet-view]::backdrop {
+    background-color: transparent;
+  }
+  @media (min-width: 37rem) and (min-height: 27.75rem) {
+    [is=sheet-view] {
+      max-width: 37rem;
+      aspect-ratio: 1.3333333333;
+      border-radius: 26px;
+      margin: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
+      height: auto;
+      inset-inline-start: calc(50lvw - 37rem / 2 - (var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2);
+      inset-block-start: calc(50lvh - 27.75rem / 2 - (var(--safe-area-inset-top) + var(--safe-area-inset-bottom)) / 2);
+    }
+  }
+  @media (min-width: 37rem) and (min-height: 27.75rem) and (min-width: 43rem) {
+    navigation-split-view [is=sheet-view] {
+      margin-inline-start: calc(var(--safe-area-inset-left) - var(--nav-split-view-content-width));
+    }
+    navigation-split-view[visibility=three-column] [is=sheet-view] {
+      margin-inline-start: calc(var(--safe-area-inset-left) - var(--nav-split-view-content-width) - var(--nav-split-view-sidebar-width));
+    }
+  }
+}
+@layer components {
+  navigation-stack {
+    touch-action: none;
+    height: var(--100lvh, 100lvh);
+  }
+}
+@layer components {
+  navigation-split-view {
+    touch-action: none;
+    height: var(--100lvh, 100lvh);
+  }
+  @media (max-width: 42.9999rem) {
+    navigation-split-view > body-view ~ scroll-view,
+    navigation-split-view > body-view ~ [is=sidebar-view] {
+      z-index: -1;
+    }
+    navigation-split-view:has(> [is=sidebar-view]) > body-view ~ [is=sidebar-view] {
+      z-index: -2;
+    }
+    navigation-split-view:has(> [is=sidebar-view]) > body-view > body-view ~ scroll-view {
+      z-index: -1;
+    }
+  }
+  @media (max-width: 55.9999rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view > body-view ~ scroll-view {
+      z-index: -1;
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] body-view:has(> body-view) > scroll-view:not(dialog scroll-view) {
+      z-index: -1;
+    }
+  }
+  @media (min-width: 56rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view])[column-visibility=double-column] > body-view > body-view ~ scroll-view {
+      z-index: -1;
+    }
+  }
+  @media (min-width: 43rem) {
+    navigation-split-view > scroll-view,
+    navigation-split-view > [is=sidebar-view],
+    navigation-split-view > navigation-bar,
+    navigation-split-view > bottom-bar {
+      width: var(--nav-split-view-content-width);
+      --safe-area-inset-right: 0px;
+    }
+    navigation-split-view > body-view scroll-view:not(dialog scroll-view),
+    navigation-split-view > body-view navigation-bar:not(dialog navigation-bar),
+    navigation-split-view > body-view bottom-bar:not(dialog bottom-bar) {
+      margin-inline-start: var(--nav-split-view-content-width);
+      --safe-area-inset-left: 0px;
+    }
+  }
+  @media (min-width: 43rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view]) > [is=sidebar-view] > scroll-view {
+      --canvas-bg: #ffffff9e;
+      --safe-area-inset-top: 0px;
+      --safe-area-inset-bottom: 0px;
+      border-radius: var(--tab-bar-sidebar-border-radius);
+      margin-block: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing));
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view]) > scroll-view,
+    navigation-split-view:has(> dialog[is=sidebar-view]) > [is=sidebar-view],
+    navigation-split-view:has(> dialog[is=sidebar-view]) > navigation-bar,
+    navigation-split-view:has(> dialog[is=sidebar-view]) > bottom-bar {
+      width: var(--nav-split-view-sidebar-width);
+      margin-inline-start: max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+      --safe-area-inset-left: 0px;
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view scroll-view:not(dialog scroll-view),
+    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view navigation-bar:not(dialog navigation-bar),
+    navigation-split-view:has(> dialog[is=sidebar-view]) > body-view bottom-bar:not(dialog bottom-bar) {
+      margin-inline-start: 0px;
+      --safe-area-inset-left: calc(
+        var(--nav-split-view-sidebar-width) +
+          max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing))
+      );
+    }
+  }
+  @media (min-width: 43rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > scroll-view,
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > [is=sidebar-view],
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > navigation-bar,
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > bottom-bar {
+      margin-inline-start: calc(var(--nav-split-view-sidebar-width) * -1);
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view scroll-view:not(dialog scroll-view),
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view navigation-bar:not(dialog navigation-bar),
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view bottom-bar:not(dialog bottom-bar) {
+      margin-inline-start: var(--nav-split-view-content-width);
+      --safe-area-inset-left: 0px;
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > scroll-view:not(dialog scroll-view),
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > navigation-bar:not(dialog navigation-bar),
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > bottom-bar:not(dialog bottom-bar) {
+      margin-inline-start: 0px;
+      --safe-area-inset-left: max(
+        env(safe-area-inset-left),
+        var(--tab-bar-sidebar-spacing)
+      );
+      width: var(--nav-split-view-content-width);
+    }
+  }
+  @media (min-width: 56rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view,
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > navigation-bar,
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > bottom-bar {
+      width: calc(var(--nav-split-view-content-width) + var(--nav-split-view-sidebar-width));
+      --safe-area-inset-right: 0px;
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view scroll-view:not(dialog scroll-view),
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view navigation-bar:not(dialog navigation-bar),
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > body-view bottom-bar:not(dialog bottom-bar) {
+      --safe-area-inset-left: 0px;
+      margin-inline-start: calc(var(--nav-split-view-sidebar-width) + var(--nav-split-view-content-width));
+    }
+  }
+}
+@layer final {
+  @media (min-width: 43rem) {
+    navigation-split-view > scroll-view,
+    navigation-split-view > [is=sidebar-view] > scroll-view {
+      transform: translateX(0px) !important;
+    }
+    navigation-split-view > body-view > scroll-view:not(dialog scroll-view).bwd,
+    navigation-split-view > body-view > scroll-view:not(dialog scroll-view).fwdd,
+    navigation-split-view > body-view > navigation-bar:not(dialog navigation-bar) .bwn,
+    navigation-split-view > body-view > bottom-bar:not(dialog bottom-bar) .bwn,
+    navigation-split-view > body-view > navigation-bar:not(dialog navigation-bar) .fwnn,
+    navigation-split-view > body-view > bottom-bar:not(dialog bottom-bar) .fwnn {
+      transition-duration: 0ms !important;
+    }
+    navigation-split-view > navigation-bar > tool-bar-item,
+    navigation-split-view > navigation-bar > tool-bar-item-group,
+    navigation-split-view > bottom-bar > tool-bar-item,
+    navigation-split-view > bottom-bar > tool-bar-item-group {
+      transform: scale(var(--view-transition-toolbar-cell-onscreen-scale)) !important;
+      filter: none !important;
+      opacity: 1 !important;
+    }
+  }
+  @media (min-width: 43rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] > body-view > scroll-view {
+      transform: translateX(0px) !important;
+    }
+  }
+  @media (min-width: 56rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > scroll-view {
+      transform: translateX(0px) !important;
+    }
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > navigation-bar > tool-bar-item,
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > navigation-bar > tool-bar-item-group,
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > bottom-bar > tool-bar-item,
+    navigation-split-view:has(> dialog[is=sidebar-view]):not([column-visibility=double-column]) > body-view > bottom-bar > tool-bar-item-group {
+      transform: scale(var(--view-transition-toolbar-cell-onscreen-scale)) !important;
+      filter: none !important;
+      opacity: 1 !important;
+    }
+  }
+}
+@layer components {
+  navigation-bar,
+  bottom-bar {
+    position: absolute;
+    box-shadow: inset 0 0 4px red;
+    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+    pointer-events: none;
+    grid-template-columns: auto 1fr auto;
+  }
+  navigation-bar > *,
+  bottom-bar > * {
+    pointer-events: all;
+    align-self: center;
+  }
+  navigation-bar {
+    inset: 0 0 auto 0;
+    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
+    padding-block-start: var(--safe-area-inset-top);
+  }
+  bottom-bar {
+    inset: auto 0 0 0;
+    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
+    padding-block-end: var(--safe-area-inset-bottom);
+  }
+  ::part(toolbar-leading-stack),
+  ::part(toolbar-principal-stack),
+  ::part(toolbar-trailing-stack) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: var(--toolbar-col-gap);
+  }
+  @media (min-width: 37rem) and (min-height: 27.75rem) {
+    [is=sheet-view] navigation-bar,
+    [is=sheet-view] bottom-bar {
+      --safe-area-inset-left: 0px;
+      --safe-area-inset-right: 0px;
+    }
+    [is=sheet-view] navigation-bar {
+      --safe-area-inset-top: 0px;
+    }
+    [is=sheet-view] bottom-bar {
+      --safe-area-inset-bottom: 0px;
+    }
+  }
+}
+@layer components {
+  [is=sidebar-view] {
+    inset-inline: 0px;
+    inset-block: 0px;
+    margin: 0px;
+    border: none;
+    padding: 0px;
+    background-color: transparent;
+    color: var(--primary-text);
+    max-width: 100lvw;
+    max-height: 100lvh;
+    outline: none;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+  @media (prefers-reduced-motion: no-preference) and (min-width: 43rem) {
+    navigation-split-view:has(> dialog[is=sidebar-view])[preferred-compact-column=content] [is=sidebar-view] {
+      transition: margin-inline-start 250ms ease-out allow-discrete;
+    }
+  }
+  [is=sidebar-view]::backdrop {
+    background-color: transparent;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [is=sidebar-view]::backdrop {
+      transition: display var(--view-transition-duration) allow-discrete, overlay var(--view-transition-duration) allow-discrete, background-color var(--view-transition-duration);
+      will-change: background-color, overlay, display;
+    }
+  }
+  [is=sidebar-view][open]::backdrop {
+    background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+  }
+  @starting-style {
+    [is=sidebar-view][open]::backdrop {
+      background-color: transparent;
+    }
+  }
+  @starting-style {
+    [is=sidebar-view][open] {
+      transform: translateY(var(--view-transition-dialog-offscreen-y));
+    }
+  }
+}
+@layer final {
+  [is=sidebar-view][open] {
+    margin-inline-start: 0px !important;
+  }
+}
+@layer components {
+  scroll-view:has(> tool-bar[slot=navigation-bar]) > *:not([slot]) {
+    margin-block-start: var(--navigation-bar-height);
+  }
+  scroll-view:has(> tool-bar[slot=bottom-bar]) > *:not([slot]) {
+    margin-block-end: var(--tool-bar-height);
+  }
+  navigation-stack > scroll-view,
+  navigation-split-view > scroll-view,
+  navigation-split-view > [is=sidebar-view] > scroll-view,
+  body-view > scroll-view,
+  [is=full-screen] > scroll-view,
+  [is=sheet-view] > scroll-view {
+    box-shadow: inset 0 0 0 2px cyan;
+    overflow: clip auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
+    container: scroll-view/inline-size;
+    background-color: var(--canvas-bg);
+    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+  }
+  navigation-stack > scroll-view > *,
+  navigation-split-view > scroll-view > *,
+  navigation-split-view > [is=sidebar-view] > scroll-view > *,
+  body-view > scroll-view > *,
+  [is=full-screen] > scroll-view > *,
+  [is=sheet-view] > scroll-view > * {
+    grid-column: 1/-1;
+    grid-row: 1/-1;
+  }
+  navigation-stack > scroll-view::before,
+  navigation-split-view > scroll-view::before,
+  navigation-split-view > [is=sidebar-view] > scroll-view::before,
+  body-view > scroll-view::before,
+  [is=full-screen] > scroll-view::before,
+  [is=sheet-view] > scroll-view::before {
+    grid-column: 1/-1;
+    grid-row: 1/-1;
+    content: "";
+    display: block;
+    height: calc(100% + 1px); /* creates overflow */
+    z-index: -1;
+    pointer-events: none;
+  }
+  @media (min-width: 37rem) and (min-height: 27.75rem) {
+    [is=sheet-view] scroll-view {
+      --safe-area-inset-top: 0px;
+      --safe-area-inset-right: 0px;
+      --safe-area-inset-bottom: 0px;
+      --safe-area-inset-left: 0px;
+    }
+  }
+}
+@layer components {
+  v-stack {
+    place-items: center;
+    grid-template-columns: minmax(0, 1fr);
+    box-shadow: inset 0 0 0 2px magenta;
+    place-content: center;
+  }
+}
+@layer components {
+  tool-bar {
+    position: sticky;
+    width: 100%;
+    place-items: center;
+    place-content: center;
+    pointer-events: none;
+  }
+  tool-bar > span {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+  tool-bar > span::before, tool-bar > span::after {
+    content: "";
+    display: grid;
+  }
+  tool-bar > span::before {
+    height: 20px;
+    background: green;
+  }
+  tool-bar > span::after {
+    height: 20px;
+    background: darkgoldenrod;
+  }
+  @media (pointer: fine) {
+    tool-bar {
+      justify-content: start;
+    }
+  }
+  tool-bar[slot=navigation-bar] {
+    top: 0;
+    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
+    padding-block-start: var(--safe-area-inset-top);
+    transform: translateY(calc(var(--safe-area-inset-top) * -1));
+  }
+  tool-bar[slot=navigation-bar] > span::before {
+    width: calc(var(--navbar-padding-inline-start, 0px) + var(--toolbar-area-inset-left, 0px));
+  }
+  tool-bar[slot=navigation-bar] > span::after {
+    width: var(--navbar-padding-inline-end, 0px);
+  }
+  tool-bar[slot=navigation-bar]:before, tool-bar[slot=navigation-bar]:after {
+    backface-visibility: hidden;
+    content: "";
+    inset: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: -1;
+  }
+  tool-bar[slot=navigation-bar]:before {
+    backdrop-filter: blur(2px);
+    mask-image: linear-gradient(to bottom, #000 50%, rgba(0, 0, 0, 0) 100%);
+  }
+  tool-bar[slot=navigation-bar]:after {
+    background-image: linear-gradient(to bottom, var(--canvas-bg) 0, rgba(0, 0, 0, 0) 100%);
+  }
+  tool-bar[slot=bottom-bar] {
+    top: calc(100% - var(--tool-bar-height) - var(--safe-area-inset-bottom));
+    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
+    padding-block-end: var(--safe-area-inset-bottom);
+    transform: translateY(var(--safe-area-inset-bottom));
+  }
+  tool-bar[slot=bottom-bar] > span::before {
+    width: var(--toolbar-padding-inline-start);
+  }
+  tool-bar[slot=bottom-bar] > span::after {
+    width: var(--toolbar-padding-inline-end);
+  }
+  tool-bar[slot=bottom-bar]:before, tool-bar[slot=bottom-bar]:after {
+    backface-visibility: hidden;
+    content: "";
+    inset: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: -1;
+  }
+  tool-bar[slot=bottom-bar]:before {
+    backdrop-filter: blur(2px);
+    mask-image: linear-gradient(to top, #000 50%, rgba(0, 0, 0, 0) 100%);
+  }
+  tool-bar[slot=bottom-bar]:after {
+    background-image: linear-gradient(to top, var(--canvas-bg) 0, rgba(0, 0, 0, 0) 100%);
+  }
+}
+@layer components {
+  tool-bar-item,
+  tab-item {
+    --component-bg: var(--toolbar-cell-bg);
+    --component-padding-inline: var(--toolbar-cell-inline-padding);
+    --component-padding-block: var(--toolbar-cell-block-padding);
+    --component-border-radius: var(--toolbar-cell-border-radius);
+    --component-border-width: 0;
+  }
+  tool-bar-item button,
+  tool-bar-item input,
+  tab-item button,
+  tab-item input {
+    appearance: none;
+    -webkit-appearance: none;
+    border: var(--component-border-width);
+    background-color: var(--component-bg);
+    padding-inline: var(--component-padding-inline);
+    padding-block: var(--component-padding-block);
+    border-radius: var(--component-border-radius);
+    min-width: 25px;
+  }
+}
+@layer colors {
+  tool-bar-item button:not(:disabled):not([readonly]):focus-visible,
+  tool-bar-item input:not(:disabled):not([readonly]):focus-visible,
+  tab-item button:not(:disabled):not([readonly]):focus-visible,
+  tab-item input:not(:disabled):not([readonly]):focus-visible {
+    background-color: var(--toolbar-cell-focus-bg);
+  }
+  @media (pointer: fine) {
+    tool-bar-item button:not(:disabled):not([readonly]):hover,
+    tool-bar-item input:not(:disabled):not([readonly]):hover,
+    tab-item button:not(:disabled):not([readonly]):hover,
+    tab-item input:not(:disabled):not([readonly]):hover {
+      background-color: var(--toolbar-cell-focus-bg);
+    }
+  }
+}
+@layer actions {
+  tool-bar-item button:not(:disabled):not([readonly]):active,
+  tool-bar-item input:not(:disabled):not([readonly]):active,
+  tab-item button:not(:disabled):not([readonly]):active,
+  tab-item input:not(:disabled):not([readonly]):active {
+    background-color: var(--toolbar-cell-active-bg);
+  }
+}
+@layer components {
+  tool-bar-item-group {
+    grid-auto-flow: column;
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: var(--toolbar-col-gap);
+    background-color: var(--toolbar-cell-bg);
+    padding-inline: var(--toolbar-cell-inline-padding);
+    padding-block: var(--toolbar-cell-block-padding);
+    border-radius: var(--toolbar-cell-border-radius);
+    border-width: 0;
+  }
+}
+@layer components {
+  [is=borderless-button] {
+    display: grid;
+    place-items: center;
+    place-content: center;
+  }
+}
+@layer transitions {
+  @media (prefers-reduced-motion: no-preference) {
+    scroll-view.fwd, scroll-view.fwdd, scroll-view.bwd, scroll-view.bwdd {
+      transition: transform var(--view-transition-duration) ease-out allow-discrete, padding-inline-start 250ms ease-out allow-discrete, margin-inline-start 250ms ease-out allow-discrete;
+      will-change: transform, padding-inline-start, margin-inline-start;
+    }
+    tool-bar-item.fwn, tool-bar-item.fwnn, tool-bar-item.bwn, tool-bar-item.bwnn,
+    tool-bar-item-group.fwn,
+    tool-bar-item-group.fwnn,
+    tool-bar-item-group.bwn,
+    tool-bar-item-group.bwnn {
+      transition: transform var(--view-transition-duration) ease-out allow-discrete, opacity var(--view-transition-duration) ease-out allow-discrete, filter var(--view-transition-duration) ease-out allow-discrete;
+      will-change: transform, opacity, filter;
+    }
+    [is=sheet-view] {
+      transition: transform var(--view-transition-duration) allow-discrete, overlay var(--view-transition-duration) allow-discrete, display var(--view-transition-duration) allow-discrete;
+      will-change: transform, overlay, display;
+    }
+    [is=sheet-view]::backdrop {
+      transition: display var(--view-transition-duration) allow-discrete, overlay var(--view-transition-duration) allow-discrete, background-color var(--view-transition-duration);
+      will-change: background-color, overlay, display;
+    }
+    [is=sheet-view][open] {
+      transform: translateY(var(--view-transition-dialog-onscreen-y));
+    }
+    [is=sheet-view][open]::backdrop {
+      background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+    }
+    @starting-style {
+      [is=sheet-view][open]::backdrop {
+        background-color: transparent;
+      }
+    }
+    @starting-style {
+      [is=sheet-view][open] {
+        transform: translateY(var(--view-transition-dialog-offscreen-y));
+      }
+    }
+  }
+  /* scroll-view {
+    view-transition-name: match-element;
+    view-transition-class: scroll-view;
+    // contain: paint;
+
+    &:not(:has(~ body-view)) {
+      view-transition-name: targeted-scroll-view;
+      view-transition-class: none;
+      // contain: layout;
+      // background-color: red;
+    }
+  }
+
+  tool-bar-item {
+    view-transition-name: match-element;
+    view-transition-class: tool-bar-item;
+    // contain: paint;
+  }
+  navigation-bar:not(:has(~ body-view)) > tool-bar-item {
+    view-transition-name: match-element;
+    view-transition-class: targeted-toolbar-items;
+    // contain: layout;
+    // background-color: red;
+  } */
+  /* :root::view-transition-old(*.tool-bar-item) {
+    animation: var(--view-transition-duration) ease-out both shrink-to-tiny;
+  }
+  :root::view-transition-new(*.tool-bar-item) {
+    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
+  }
+  :root::view-transition-old(*.targeted-toolbar-items) {
+    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
+  }
+  :root::view-transition-new(*.targeted-toolbar-items) {
+    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
+  } */
+}
+@layer transitions {
+  scroll-view.fwd {
+    pointer-events: none;
+  }
+  scroll-view.fwdd {
+    transform: translateX(var(--view-transition-principal-x));
+  }
+  @starting-style {
+    scroll-view.fwdd {
+      transform: translateX(var(--view-transition-trailing-x));
+    }
+  }
+  scroll-view.fwdd.fwd {
+    transform: translateX(var(--view-transition-leading-x));
+  }
+}
+@layer transitions {
+  scroll-view.bwd {
+    transform: translateX(var(--view-transition-trailing-x));
+  }
+  scroll-view.bwdd ~ body-view,
+  scroll-view.bwdd ~ navigation-stack,
+  scroll-view.bwdd ~ navigation-split-view {
+    pointer-events: none;
+  }
+  scroll-view.bwdd {
+    transform: translateX(var(--view-transition-principal-x));
+  }
+  scroll-view.bwdd.bwd {
+    transform: translateX(var(--view-transition-trailing-x));
+  }
+  navigation-split-view > body-view:has(~ .bwdd) {
+    pointer-events: none;
+  }
+}
+@layer transitions {
+  tool-bar-item.fwn,
+  tool-bar-item-group.fwn {
+    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    filter: blur(10px);
+    opacity: 0;
+  }
+  tool-bar-item.fwnn,
+  tool-bar-item-group.fwnn {
+    transform: scale(var(--view-transition-toolbar-cell-onscreen-scale));
+    filter: none;
+    opacity: 1;
+  }
+  @starting-style {
+    tool-bar-item.fwnn,
+    tool-bar-item-group.fwnn {
+      transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+      filter: blur(10px);
+      opacity: 0;
+    }
+  }
+  tool-bar-item.fwnn.fwn,
+  tool-bar-item-group.fwnn.fwn {
+    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    filter: blur(10px);
+    opacity: 0;
+  }
+}
+@layer transitions {
+  tool-bar-item.bwn,
+  tool-bar-item-group.bwn {
+    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    filter: blur(10px);
+    opacity: 0;
+  }
+  tool-bar-item.bwnn,
+  tool-bar-item-group.bwnn {
+    transform: scale(var(--view-transition-toolbar-cell-onscreen-scale));
+    filter: none;
+    opacity: 1;
+  }
+  tool-bar-item.bwnn.bwn,
+  tool-bar-item-group.bwnn.bwn {
+    transform: scale(var(--view-transition-toolbar-cell-offscreen-scale));
+    filter: blur(10px);
+    opacity: 0;
+  }
+}
+@layer transitions {
+  [is=sheet-view][open] {
+    transform: translateY(var(--view-transition-dialog-onscreen-y));
+  }
+  @media (min-width: 37rem) and (min-height: 27.75rem) and (min-width: 43rem) {
+    navigation-split-view [is=sheet-view][open] {
+      margin-inline-start: var(--safe-area-inset-left);
+    }
+  }
+  [is=sheet-view][open]::backdrop {
+    background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+  }
+  @starting-style {
+    [is=sheet-view][open]::backdrop {
+      background-color: transparent;
+    }
+  }
+  @starting-style {
+    [is=sheet-view][open] {
+      transform: translateY(var(--view-transition-dialog-offscreen-y));
+    }
+  }
+}
+@layer colors {
+  navigation-stack,
+  navigation-split-view,
+  body-view {
+    --canvas-bg: var(--primary-bg);
+  }
+  [is=sheet-view],
+  [is=full-screen] {
+    --canvas-bg: var(--secondary-bg);
+  }
+  body-view {
+    --primary-bg: oklch(0.984 0.019 200.873);
+    --secondary-bg: oklch(0.984 0.019 200.873);
+  }
+  body-view > body-view {
+    --primary-bg: oklch(0.956 0.045 203.388);
+    --secondary-bg: oklch(0.956 0.045 203.388);
+  }
+  body-view > body-view > body-view {
+    --primary-bg: oklch(0.917 0.08 205.041);
+    --secondary-bg: oklch(0.917 0.08 205.041);
+  }
+  body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.865 0.127 207.078);
+    --secondary-bg: oklch(0.865 0.127 207.078);
+  }
+  body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.789 0.154 211.53);
+    --secondary-bg: oklch(0.789 0.154 211.53);
+  }
+  body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.715 0.143 215.221);
+    --secondary-bg: oklch(0.715 0.143 215.221);
+  }
+  body-view > body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.609 0.126 221.723);
+    --secondary-bg: oklch(0.609 0.126 221.723);
+  }
+  body-view > body-view > body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.52 0.105 223.128);
+    --secondary-bg: oklch(0.52 0.105 223.128);
+  }
+  body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.45 0.085 224.283);
+    --secondary-bg: oklch(0.45 0.085 224.283);
+  }
+  body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.398 0.07 227.392);
+    --secondary-bg: oklch(0.398 0.07 227.392);
+  }
+  body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view > body-view {
+    --primary-bg: oklch(0.302 0.056 229.695);
+    --secondary-bg: oklch(0.302 0.056 229.695);
+  }
 }