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

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

@@ -1,218 +1,359 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+@mixin force-disable-col-view-transitions {
+  > scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    &.bwd,
+    &.fwdd,
+    & ~ tool-bar .bwn,
+    & ~ tool-bar .fwnn {
+      transition-duration: 0ms; // !important;
+    }
+  }
+}
+
+@layer #{vars.$nav-components-layer} {
   navigation-split-view {
-    touch-action: none;
+    :where(&) {
+      touch-action: none;
+
+      block-size: var(--100lvh, 100lvh);
+
+      --nav-split-view--content-inline-size: var(--nav-split-view-content-inline-size,);
+
+      --nav-split-view--detail-placeholder-inset: 0 0 0 var(--nav-split-view--content-inline-size);
+      --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view--content-inline-size));
+      --nav-split-view--detail-placeholder-visibility: visible;
+    }
+
+    // ANCHOR Z_INDEX STYLES
+    // Use ifnot to apply negative z-indexes to old views
+    // z-index rules get discarded in larger viewports
 
-    height: var(--100lvh, 100lvh);
+    @include mixins.if-2col-split-view-fits {
+      // special case for sv inside a tabview>more
+      scroll-view:has(~ &:not([hidden])) {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            opacity: 0;
+            pointer-events: none;
+          }
+        }
+      }
+    }
 
-    // use ifnot so that z-index rules get discarded in larger viewports
     @include mixins.ifnot-2col-split-view-fits {
-      > body-view ~ scroll-view,
-      > body-view ~ [is='sidebar-view'] {
+      // special case for sv inside a tabview>more
+      :where(scroll-view:has(~ &:not([hidden]))) {
+        z-index: -1;
+      }
+
+      :where(& > body-view ~ scroll-view, & > body-view ~ [is='sidebar-view']) {
         z-index: -1;
       }
 
       &:has(> [is='sidebar-view']) {
-        > body-view ~ [is='sidebar-view'] {
+        :where(& > body-view ~ [is='sidebar-view']) {
           z-index: -2;
         }
 
-        > body-view > body-view ~ scroll-view {
+        :where(& > body-view > body-view ~ scroll-view) {
           z-index: -1;
         }
       }
     }
 
-    @include mixins.ifnot-3col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
-        > body-view > body-view ~ scroll-view {
-          z-index: -1;
-        }
-
-        &[preferred-compact-column='content'] {
-          body-view:has(> body-view) > scroll-view:not(dialog scroll-view) {
+    &:has(> [is='sidebar-view']) {
+      @include mixins.ifnot-3col-split-view-fits {
+        &:not([preferred-compact-column='content']) {
+          :where(& > body-view > body-view ~ scroll-view) {
             z-index: -1;
           }
-
-          // body-view > body-view {
-          // clip-path: inset(
-          //   0 0 0 var(--nav-split-view-content-width)
-          // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
-          // }
         }
+
+        // body-view > body-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;
+        // }
+        // }
       }
-    }
 
-    @include mixins.if-3col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
+      @include mixins.if-2col-split-view-fits {
         &[column-visibility='double-column'] {
-          > body-view > body-view ~ scroll-view {
+          :where(& > body-view > body-view ~ scroll-view) {
             z-index: -1;
           }
         }
       }
     }
 
-    // COMPACT | EXPANDED
-    // | |  <->  |
+    // @include mixins.ifnot-2col-split-view-fits {
+    //   &:has(> [is='sidebar-view']) {
+    //     :where(& > [is='sidebar-view']) {
+    //       --list-style: unset;
+    //       --form-style: unset;
+    //     }
+    //     // :where(& > [is='sidebar-view'] > scroll-view) {
+    //     // --scroll-view-box-shadow: none;
+    //     // }
+    //   }
+    // }
+
+    // ANCHOR 2_COL COMPACT-DEFAULTS
+
     @include mixins.if-2col-split-view-fits {
-      // compact col
+      // content col appears (either 1st-child or 2nd child in case of collapsed sidebar)
       > scroll-view,
-      > [is='sidebar-view'],
-      > navigation-bar,
-      > bottom-bar {
-        width: var(--nav-split-view-content-width);
+      > tool-bar,
+      > [is='sidebar-view'] {
+        :where(&) {
+          --safe-area-inset-right: 0px; // reset end padding
+        }
+      }
+
+      // Fix 1stChildElement as a content view
+      > scroll-view {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            inline-size: var(--nav-split-view--content-inline-size);
+          }
+        }
+      }
 
-        --safe-area-inset-right: 0px; // Reset right paddings of compact col
+      // Cancel animations
+      > scroll-view,
+      > [is='sidebar-view'] > scroll-view {
+        ~ tool-bar {
+          > tool-bar-item,
+          > tool-bar-item-group {
+            :where(&) {
+              @include mixins.vt-toolbar-cell-onscreen-keyframe;
+            }
+          }
+        }
+      }
+
+      > scroll-view {
+        :where(&) {
+          border-right: solid 1px var(--separator);
+          // --scroll-view-box-shadow: none;
+        }
       }
 
-      // container of details col
       > body-view {
-        // details col (content|details)
-        scroll-view:not(dialog scroll-view),
-        navigation-bar:not(dialog navigation-bar),
-        bottom-bar:not(dialog bottom-bar) {
-          margin-inline-start: var(
-            --nav-split-view-content-width
-          ); // beautiful vts
-
-          // Reset left paddings of expanded col
-          --safe-area-inset-left: 0px;
+        scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+          &,
+          & ~ tool-bar {
+            :where(&) {
+              // add margin to make vts precise
+              margin-inline-start: var(--nav-split-view--content-inline-size);
+            }
+          }
         }
       }
-    }
 
-    // SIDEBAR | EXPANDED
-    @include mixins.if-2col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
-        // sidebar col: turn into floating sidebar
-        > [is='sidebar-view'] > scroll-view {
-          --canvas-bg: #ffffff9e;
+      // ANCHOR 3_COL COMPACT-DEFAULTS
 
-          --safe-area-inset-top: 0px;
-          --safe-area-inset-bottom: 0px;
+      // SIDEBAR | EXPANDED
+      &:has(> [is='sidebar-view']) {
+        > [is='sidebar-view'] {
+          // :where(&) {
+          @include mixins.make-floating-sidebar;
+          // turn 1stChildElement into floating sidebar
+          // inline-size: var(--nav-split-view-sidebar-inline-size); // override
 
-          border-radius: var(--tab-bar-sidebar-border-radius);
+          // margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-spacing)); // float
 
-          margin-block: max(
-              var(--safe-area-inset-top),
-              var(--tab-bar-sidebar-spacing)
-            )
-            max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing));
-        }
+          // --safe-area-inset-left: 0px; // now a floating
 
-        // sidebar col: re-size + turn into a floating sidebar
-        > scroll-view,
-        > [is='sidebar-view'],
-        > navigation-bar,
-        > bottom-bar {
-          width: var(--nav-split-view-sidebar-width); // override
+          // overflow: visible;
 
-          margin-inline-start: max(
-            env(safe-area-inset-left),
-            var(--tab-bar-sidebar-spacing)
-          ); // float
+          // restyle scroll-view of floating sidebar
 
-          --safe-area-inset-left: 0px; // now a floating
-        }
+          //was padding-block
+          // padding-block: max(var(--safe-area-inset-top), var(--sidebar-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-spacing));
 
-        // container of expanded col (trailing)
-        > body-view {
-          scroll-view:not(dialog scroll-view),
-          navigation-bar:not(dialog navigation-bar),
-          bottom-bar:not(dialog bottom-bar) {
-            margin-inline-start: 0px; // override
-
-            --safe-area-inset-left: calc(
-              var(--nav-split-view-sidebar-width) +
-                max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing))
-            );
-          }
-        }
-      }
-    }
+          // overflow: clip;
 
-    // SIDEBAR | EXPANDED
-    @include mixins.if-2col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
-        // SIDEBAR | COMPACT | EXPANDED
-        &[preferred-compact-column='content'] {
-          > scroll-view,
-          > [is='sidebar-view'],
-          > navigation-bar,
-          > bottom-bar {
-            margin-inline-start: calc(var(--nav-split-view-sidebar-width) * -1);
-          }
+          // height: calc(100% - max(var(--safe-area-inset-top), var(--sidebar-spacing)) - max(var(--safe-area-inset-bottom), var(--sidebar-spacing)));
 
-          // move descendants to right
-          > body-view {
-            scroll-view:not(dialog scroll-view),
-            navigation-bar:not(dialog navigation-bar),
-            bottom-bar:not(dialog bottom-bar) {
-              margin-inline-start: var(--nav-split-view-content-width);
+          // backdrop-filter: var(--liquid-glass-backdrop-filter);
+          // box-shadow: var(--liquid-glass-box-shadow);
 
-              --safe-area-inset-left: 0px;
-            }
+          // border-radius: var(--sidebar-border-radius);
+          // }
+
+          // > scroll-view {
+          //   :where(&) {
+          //     // --canvas: oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
 
-            > scroll-view:not(dialog scroll-view),
-            > navigation-bar:not(dialog navigation-bar),
-            > bottom-bar:not(dialog bottom-bar) {
-              margin-inline-start: 0px;
+          //     // --safe-area-inset-top: 0px;
+          //     // --safe-area-inset-bottom: 0px;
 
-              --safe-area-inset-left: max(
-                env(safe-area-inset-left),
-                var(--tab-bar-sidebar-spacing)
-              );
+          //     // border-radius: var(--sidebar-border-radius);
+
+          //     // backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+          //     // --scroll-view-box-shadow: var(--liquid-glass-box-shadow);
+          //   }
+
+          //   // :where(& ~ tool-bar) {
+          //   // --safe-area-inset-top: 0px;
+          //   // max(
+          //   //   env(safe-area-inset-top),
+          //   //   var(--sidebar-spacing)
+          //   // );
+          //   // --safe-area-inset-bottom: 0px;
+          //   // max(
+          //   //   env(safe-area-inset-bottom),
+          //   //   var(--sidebar-spacing)
+          //   // );
+          //   // }
+          // }
+        }
+
+        > body-view {
+          scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+            &,
+            & ~ tool-bar {
+              :where(&) {
+                // override/reset added margin
+                margin-inline-start: 0px;
 
-              width: var(--nav-split-view-content-width);
+                // add start padding instead
+                --safe-area-inset-left: calc(var(--nav-split-view-sidebar-inline-size) + max(env(safe-area-inset-left), var(--sidebar-inline-spacing)));
+
+                --safe-area-inset-top: max(env(safe-area-inset-top), var(--sidebar-block-spacing));
+
+                --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+              }
             }
           }
         }
-      }
-    }
 
-    // SIDEBAR | COMPACT | EXPANDED
-    @include mixins.if-3col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
+        // ANCHOR 3_COL FOR COMPACT-DEFAULTS
+
         &:not([column-visibility='double-column']) {
-          // container of content col (principal)
-          > body-view {
-            // clip-path: inset(
-            //   0 0 0 var(--nav-split-view-sidebar-width)
-            // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
-
-            // shrink 2nd-child
-            > scroll-view,
-            > navigation-bar,
-            > bottom-bar {
-              width: calc(
-                var(--nav-split-view-content-width) +
-                  var(--nav-split-view-sidebar-width)
-              ); // shrink to be now a col
-
-              --safe-area-inset-right: 0px;
+          // compact-view-only: apply preferred-compact-column rule
+          @include mixins.ifnot-3col-split-view-fits {
+            // &:has(> dialog[is='sidebar-view']) {
+            &[preferred-compact-column='content'] {
+              > scroll-view,
+              > tool-bar,
+              > [is='sidebar-view'] {
+                :where(&) {
+                  margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+                }
+              }
+
+              // move descendants to left edge of screen
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  &,
+                  & ~ tool-bar {
+                    :where(&) {
+                      margin-inline-start: var(--nav-split-view--content-inline-size);
+
+                      --safe-area-inset-left: 0px;
+                    }
+                  }
+                }
+
+                :where(& > scroll-view) {
+                  border-right: solid 1px var(--separator);
+                  // --scroll-view-box-shadow: none;
+                }
+
+                > scroll-view {
+                  ~ tool-bar {
+                    > tool-bar-item,
+                    > tool-bar-item-group {
+                      :where(&) {
+                        @include mixins.vt-toolbar-cell-onscreen-keyframe; //(true);
+                      }
+                    }
+                  }
+                }
+
+                > scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  &,
+                  & ~ tool-bar {
+                    :where(&) {
+                      inline-size: var(--nav-split-view--content-inline-size);
+
+                      margin-inline-start: 0px;
+
+                      --safe-area-inset-left: env(safe-area-inset-left);
+
+                      --safe-area-inset-right: 0px;
+
+                      // #{vars.$sidebar-toggle-padding-inline-start-css-prop}: inherit;
+                    }
+                  }
+
+                  // move ONLY navbar to the side
+                  @include mixins.create-sidebar-measure;
+                }
+              }
             }
+          }
 
-            // container of details col (trailing)
+          // ANCHOR 3_COL DEFAULTS
+
+          // SIDEBAR | COMPACT | EXPANDED
+          @include mixins.if-3col-split-view-fits {
+            // container of compact col (middle)
+            // &:has(> dialog[is='sidebar-view']) {
+            // &:not([column-visibility='double-column']) {
+            // container of content col (principal)
             > body-view {
-              scroll-view:not(dialog scroll-view),
-              navigation-bar:not(dialog navigation-bar),
-              bottom-bar:not(dialog bottom-bar) {
-                // --safe-area-inset-left: calc(
-                //   var(--nav-split-view-sidebar-width) +
-                //     var(--nav-split-view-content-width) +
-                //     max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing))
-                // ); // override
-
-                // margin-inline-start: 0px;
-                --safe-area-inset-left: 0px; // override
-
-                margin-inline-start: calc(
-                  var(--nav-split-view-sidebar-width) +
-                    var(--nav-split-view-content-width)
-                ); // override
+              // cancel animations
+              > scroll-view {
+                ~ tool-bar {
+                  > tool-bar-item,
+                  > tool-bar-item-group {
+                    :where(&) {
+                      @include mixins.vt-toolbar-cell-onscreen-keyframe; //(true);
+                    }
+                  }
+                }
+              }
+              // clip-path: inset(
+              //   0 0 0 var(--nav-split-view-sidebar-inline-size)
+              // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
+
+              // shrink 2nd-child
+              > scroll-view {
+                &,
+                & ~ tool-bar {
+                  :where(&) {
+                    inline-size: calc(var(--nav-split-view--content-inline-size) + var(--nav-split-view-sidebar-inline-size)); // shrink to be now a col
+
+                    --safe-area-inset-right: 0px;
+                  }
+                }
+              }
+
+              :where(& > scroll-view) {
+                border-right: solid 1px var(--separator);
+                // --scroll-view-box-shadow: none;
+              }
+
+              // container of details col (trailing)
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  &,
+                  & ~ tool-bar {
+                    :where(&) {
+                      --safe-area-inset-left: 0px; // override
+
+                      margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) + var(--nav-split-view--content-inline-size)); // override
+                    }
+                  }
+                }
               }
             }
           }
@@ -224,136 +365,55 @@
 
 @layer #{vars.$final-layer} {
   navigation-split-view {
+    // ANCHOR transitions
+
+    // ANCHOR 2_COL COMPACT-DEFAULTS
+
     // COMPACT | EXPANDED
     @include mixins.if-2col-split-view-fits {
-      // Cancel transitions as it is now a compact col
+      // Cancel transitions as it is now an inert col
       > scroll-view,
       > [is='sidebar-view'] > scroll-view {
-        transform: translateX(0px) !important;
+        --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important
       }
 
       > body-view {
-        > scroll-view:not(dialog scroll-view).bwd,
-        > scroll-view:not(dialog scroll-view).fwdd,
-        > navigation-bar:not(dialog navigation-bar) .bwn,
-        > bottom-bar:not(dialog bottom-bar) .bwn,
-        > navigation-bar:not(dialog navigation-bar) .fwnn,
-        > bottom-bar:not(dialog bottom-bar) .fwnn {
-          transition-duration: 0ms !important;
-        }
+        @include force-disable-col-view-transitions;
       }
 
-      // Cancel animations
-      > navigation-bar,
-      > bottom-bar {
-        > tool-bar-item,
-        > tool-bar-item-group {
-          @include mixins.vt-toolbar-item-onscreen-keyframe(true);
-        }
-      }
-    }
+      // ANCHOR 3_COL FOR COMPACT-DEFAULTS
 
-    // SIDEBAR | EXPANDED
-    @include mixins.if-2col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
-        &[preferred-compact-column='content'] {
-          // move descendants to right
-          > body-view {
-            > scroll-view {
-              transform: translateX(0px) !important;
+      // SIDEBAR | EXPANDED
+      &:has(> [is='sidebar-view']) {
+        &:not([column-visibility='double-column']) {
+          @include mixins.ifnot-3col-split-view-fits {
+            &[preferred-compact-column='content'] {
+              // move descendants to right
+              > body-view {
+                > scroll-view {
+                  --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important;
+                }
+
+                > body-view {
+                  @include force-disable-col-view-transitions;
+                }
+              }
             }
-
-            // scroll-view:not(dialog scroll-view),
-            // navigation-bar:not(dialog navigation-bar),
-            // bottom-bar:not(dialog bottom-bar) {
-            // margin-inline-start: var(--nav-split-view-content-width);
-            // }
-
-            // > scroll-view:not(dialog scroll-view),
-            // > navigation-bar:not(dialog navigation-bar),
-            // > bottom-bar:not(dialog bottom-bar) {
-            // transform: translateX(0px);
-
-            // margin-inline-start: 0px;
-
-            // width: unset;
-            // }
-
-            // > body-view {
-            // scroll-view:not(dialog scroll-view),
-            // navigation-bar:not(dialog navigation-bar),
-            // bottom-bar:not(dialog bottom-bar) {
-            // margin-inline-start: var(--nav-split-view-content-width);
-            // }
-            // }
           }
-        }
-      }
-    }
 
-    // @include mixins.ifnot-3col-split-view-fits {
-    // (sidebar|content|details)
-    // &:has(> dialog[is='sidebar-view']) {
-    // --view-transition-leading-x: -100lvw;
+          // ANCHOR 2_COL OVERRIDE FOR COMPACT VIEWS
 
-    // > body-view > body-view ~ scroll-view {
-    //   z-index: -1;
-    // }
-    //   }
-    // }
-
-    // SIDEBAR | COMPACT | EXPANDED
-    @include mixins.if-3col-split-view-fits {
-      &:has(> dialog[is='sidebar-view']) {
-        &:not([column-visibility='double-column']) {
-          // container of compact col (middle)
-          > body-view {
-            // Fix position as compact col in the middle
-            > scroll-view {
-              transform: translateX(0px) !important;
-            }
+          // SIDEBAR | COMPACT | EXPANDED
+          @include mixins.if-3col-split-view-fits {
+            // container of compact col (middle)
+            > body-view {
+              // Fix position as compact col in the middle
+              > scroll-view {
+                --scroll-view-translate: translateX(var(--view-transition-principal-x)); // !important;
+              }
 
-            // Fix position of compact col
-            // > scroll-view,
-            // > navigation-bar,
-            // > bottom-bar {
-            // margin-inline-start: calc(
-            //   var(--nav-split-view-sidebar-width) +
-            //     max(env(safe-area-inset-left), var(--tab-bar-sidebar-spacing))
-            // );
-            // }
-
-            // > body-view {
-            //   > scroll-view,
-            //   > navigation-bar,
-            //   > 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))
-            //     );
-            //   }
-            // }
-            // }
-
-            // // re-move descendants to the right
-            // > body-view {
-            // --view-transition-leading-x: unset;
-
-            // 2nd-child stays put
-            // > scroll-view,
-            // > navigation-bar,
-            // > bottom-bar {
-            // transform: translateX(0px);
-            // }
-
-            // cancel animations
-            > navigation-bar,
-            > bottom-bar {
-              > tool-bar-item,
-              > tool-bar-item-group {
-                @include mixins.vt-toolbar-item-onscreen-keyframe(true);
+              > body-view {
+                @include force-disable-col-view-transitions;
               }
             }
           }