@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.101

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

@@ -0,0 +1,424 @@
+@use '../vars';
+@use '../mixins';
+
+@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 {
+    :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
+
+    @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;
+          }
+        }
+      }
+    }
+
+    @include mixins.ifnot-2col-split-view-fits {
+      // 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']) {
+        :where(& > body-view ~ [is='sidebar-view']) {
+          z-index: -2;
+        }
+
+        :where(& > body-view > body-view ~ scroll-view) {
+          z-index: -1;
+        }
+      }
+    }
+
+    &: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-inline-size)
+        // ); // force clipping because it is now a floating element unable to hide bg = overflow: clip;
+        // }
+        // }
+      }
+
+      @include mixins.if-2col-split-view-fits {
+        &[column-visibility='double-column'] {
+          :where(& > body-view > body-view ~ scroll-view) {
+            z-index: -1;
+          }
+        }
+      }
+    }
+
+    // @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 {
+      // content col appears (either 1st-child or 2nd child in case of collapsed sidebar)
+      > scroll-view,
+      > 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);
+          }
+        }
+      }
+
+      // 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;
+        }
+      }
+
+      > body-view {
+        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);
+            }
+          }
+        }
+      }
+
+      // ANCHOR 3_COL COMPACT-DEFAULTS
+
+      // 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
+
+          // margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-spacing)); // float
+
+          // --safe-area-inset-left: 0px; // now a floating
+
+          // overflow: visible;
+
+          // restyle scroll-view of floating sidebar
+
+          //was padding-block
+          // padding-block: max(var(--safe-area-inset-top), var(--sidebar-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-spacing));
+
+          // overflow: clip;
+
+          // height: calc(100% - max(var(--safe-area-inset-top), var(--sidebar-spacing)) - max(var(--safe-area-inset-bottom), var(--sidebar-spacing)));
+
+          // backdrop-filter: var(--liquid-glass-backdrop-filter);
+          // box-shadow: var(--liquid-glass-box-shadow);
+
+          // border-radius: var(--sidebar-border-radius);
+          // }
+
+          // > scroll-view {
+          //   :where(&) {
+          //     // --canvas: oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha));
+
+          //     // --safe-area-inset-top: 0px;
+          //     // --safe-area-inset-bottom: 0px;
+
+          //     // 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;
+
+                // 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));
+              }
+            }
+          }
+        }
+
+        // ANCHOR 3_COL FOR COMPACT-DEFAULTS
+
+        &:not([column-visibility='double-column']) {
+          // 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;
+                }
+              }
+            }
+          }
+
+          // 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 {
+              // 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
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@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 an inert col
+      > scroll-view,
+      > [is='sidebar-view'] > scroll-view {
+        --scroll-view-translate: translateX(var(--view-transition-principal-x)); //!important
+      }
+
+      > body-view {
+        @include force-disable-col-view-transitions;
+      }
+
+      // ANCHOR 3_COL FOR COMPACT-DEFAULTS
+
+      // 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;
+                }
+              }
+            }
+          }
+
+          // ANCHOR 2_COL OVERRIDE FOR COMPACT VIEWS
+
+          // 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;
+              }
+
+              > body-view {
+                @include force-disable-col-view-transitions;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_navigation-stack.scss

@@ -0,0 +1,11 @@
+@use '../vars';
+
+@layer #{vars.$nav-components-layer} {
+  navigation-stack {
+    :where(&) {
+      touch-action: none;
+
+      block-size: var(--100lvh, 100lvh);
+    }
+  }
+}

package/scss/components/_navigation-title.scss

@@ -0,0 +1,10 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  navigation-title {
+    :where(&) {
+      // display: grid; //contents;
+    }
+  }
+}