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

package/scss/components/_disclosure-group.scss

@@ -0,0 +1,80 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='disclosure-group'] {
+    display: grid;
+
+    overflow: clip;
+
+    summary {
+      list-style: none;
+    }
+    // summary::marker {
+    //   color: blue;
+    //   display: none;
+    //   content: '→';
+    //   // content: "66";
+    //   list-style-type: square;
+    //   position: absolute;
+    //   background-color: red;
+    // }
+
+    &::details-content {
+      background: transparent !important;
+      block-size: 0;
+
+      // display: grid;
+
+      transition:
+        block-size var(#{vars.$disclosure-group-animation-duration-css-prop})
+          allow-discrete var(--disclosure-group-animation-easing),
+        content-visibility
+          var(#{vars.$disclosure-group-animation-duration-css-prop})
+          allow-discrete var(--disclosure-group-animation-easing);
+      will-change: block-size, content-visibility;
+    }
+
+    > *:not(summary) {
+      margin: 0 !important;
+    }
+
+    &[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(#{vars.$disclosure-group-animation-duration-css-prop})
+            allow-discrete var(--disclosure-group-animation-easing),
+          transform var(#{vars.$disclosure-group-animation-duration-css-prop})
+            allow-discrete var(--disclosure-group-animation-easing);
+        will-change: max-height, transform;
+
+        max-height: 0;
+      }
+
+      &[open] {
+        &::details-content {
+          max-height: calc(
+            var(#{vars.$disclosure-group-contents-height-css-prop}, 100vh) +
+              100px
+          );
+        }
+      }
+
+      &.#{vars.$disclosure-group-animation-close-class} {
+        &::details-content {
+          max-height: 0 !important;
+        }
+      }
+    }
+  }
+}

package/scss/components/_full-screen.scss

@@ -0,0 +1,13 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='full-screen'] {
+    @include mixins.reset-dialog;
+
+    // dowh
+    overflow: clip;
+    width: 100lvw;
+    height: var(--100lvh, 100lvh);
+  }
+}

package/scss/components/_index.scss

@@ -0,0 +1,24 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  // all is a grid
+  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;
+  }
+}

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

@@ -0,0 +1,364 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  navigation-split-view {
+    touch-action: none;
+
+    height: var(--100lvh, 100lvh);
+
+    // 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'] {
+        z-index: -1;
+      }
+
+      &:has(> [is='sidebar-view']) {
+        > body-view ~ [is='sidebar-view'] {
+          z-index: -2;
+        }
+
+        > 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) {
+            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;
+          // }
+        }
+      }
+    }
+
+    @include mixins.if-3col-split-view-fits {
+      &:has(> dialog[is='sidebar-view']) {
+        &[column-visibility='double-column'] {
+          > body-view > body-view ~ scroll-view {
+            z-index: -1;
+          }
+        }
+      }
+    }
+
+    // COMPACT | EXPANDED
+    // | |  <->  |
+    @include mixins.if-2col-split-view-fits {
+      // compact col
+      > scroll-view,
+      > [is='sidebar-view'],
+      > navigation-bar,
+      > bottom-bar {
+        width: var(--nav-split-view-content-width);
+
+        --safe-area-inset-right: 0px; // Reset right paddings of compact col
+      }
+
+      // 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;
+        }
+      }
+    }
+
+    // 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;
+
+          --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));
+        }
+
+        // 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
+
+          margin-inline-start: max(
+            env(safe-area-inset-left),
+            var(--tab-bar-sidebar-spacing)
+          ); // float
+
+          --safe-area-inset-left: 0px; // now a floating
+        }
+
+        // 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))
+            );
+          }
+        }
+      }
+    }
+
+    // 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);
+          }
+
+          // 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);
+
+              --safe-area-inset-left: 0px;
+            }
+
+            > 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-left: max(
+                env(safe-area-inset-left),
+                var(--tab-bar-sidebar-spacing)
+              );
+
+              width: var(--nav-split-view-content-width);
+            }
+          }
+        }
+      }
+    }
+
+    // SIDEBAR | COMPACT | EXPANDED
+    @include mixins.if-3col-split-view-fits {
+      &:has(> dialog[is='sidebar-view']) {
+        &: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;
+            }
+
+            // container of details col (trailing)
+            > 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
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@layer #{vars.$final-layer} {
+  navigation-split-view {
+    // COMPACT | EXPANDED
+    @include mixins.if-2col-split-view-fits {
+      // Cancel transitions as it is now a compact col
+      > scroll-view,
+      > [is='sidebar-view'] > scroll-view {
+        transform: translateX(0px) !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;
+        }
+      }
+
+      // Cancel animations
+      > navigation-bar,
+      > bottom-bar {
+        > tool-bar-item,
+        > tool-bar-item-group {
+          @include mixins.vt-toolbar-item-onscreen-keyframe(true);
+        }
+      }
+    }
+
+    // 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;
+            }
+
+            // 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;
+
+    // > 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;
+            }
+
+            // 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);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/components/_navigation-stack.scss

@@ -0,0 +1,11 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  navigation-stack {
+    // grid-area: main;
+    touch-action: none;
+    height: var(--100lvh, 100lvh);
+    // height: 100lvh;
+    // overflow: clip;
+  }
+}

package/scss/components/_scroll-view.scss

@@ -0,0 +1,86 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  // [is='sidebar-view'] {
+  //   @include mixins.reset-dialog;
+
+  //   // dowh
+  //   overflow: clip;
+  //   width: 100%;
+  //   height: 100%;
+  //   position: static;
+  // }
+
+  // v-stack,
+  // tab-bar-stack {
+  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;
+    @include mixins.contain-overscroll;
+
+    // overflow-y: auto;
+    // overflow-x: clip;
+    // 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);
+    // place-items: center;
+    //
+
+    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+
+    // grid-auto-rows: minmax(0, max-content);
+    // grid-template-rows: 100% 1px;
+    @include mixins.make-scrollable;
+
+    // @include mixins.make-navbar;
+
+    // &:has(> tool-bar[slot='navigation-bar']) {
+    //   margin-top: var(--navigation-bar-height);
+    // }
+
+    // &:has(> tool-bar[slot='bottom-bar']) {
+    //   margin-bottom: var(--tool-bar-height);
+    // }
+  }
+
+  // navigation-split-view scroll-view {
+  //   margin-inline-start: 400px;
+  // }
+
+  // navigation-split-view > scroll-view {
+  //   width: 400px;
+  //   margin-inline-start: 0;
+  //   transform: none !important;
+  // }
+
+  @include mixins.if-ipad-sheet-fits {
+    [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;
+        // padding-inline: 0px; //var(--edge-inset-inline-start)          var(--edge-inset-inline-end);
+        // padding-block: 0px; //var(--edge-inset-block-start) var(--edge-inset-block-end);
+      }
+    }
+  }
+}

package/scss/components/_sheet-view.scss

@@ -0,0 +1,60 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='sheet-view'] {
+    @include mixins.reset-dialog;
+
+    // dowh
+    overflow: clip;
+    width: 100lvw;
+    height: var(--100lvh, 100lvh);
+
+    transform: translateY(var(--view-transition-dialog-offscreen-y));
+
+    &::backdrop {
+      background-color: transparent;
+    }
+
+    @include mixins.if-ipad-sheet-fits {
+      max-width: #{vars.$ipad-sheet-view-width};
+
+      aspect-ratio: #{vars.$ipad-sheet-view-aspect-ratio};
+
+      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 - calc(#{vars.$ipad-sheet-view-width} / 2) - calc(
+            calc(var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2
+          )
+      );
+
+      inset-block-start: calc(
+        50lvh - calc(#{vars.$ipad-sheet-view-height} / 2) - calc(
+            calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom)) / 2
+          )
+      );
+
+      @include mixins.if-2col-split-view-fits {
+        navigation-split-view & {
+          margin-inline-start: calc(
+            var(--safe-area-inset-left) - var(--nav-split-view-content-width)
+          );
+        }
+
+        navigation-split-view[visibility='three-column'] & {
+          margin-inline-start: calc(
+            var(--safe-area-inset-left) - var(
+                --nav-split-view-content-width
+              ) - var(--nav-split-view-sidebar-width)
+          );
+        }
+      }
+    }
+  }
+}

package/scss/components/_sidebar-toggle.scss

@@ -0,0 +1,61 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  sidebar-toggle {
+    background-color: coral;
+
+    place-items: center;
+    place-content: center;
+
+    tab-view > &,
+    navigation-split-view > & {
+      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));
+    }
+
+    @include mixins.if-iphone-portrait {
+      [is='tab-bar'] > &,
+      tab-view > & {
+        display: none;
+      }
+    }
+
+    @include mixins.if-ipad-portrait {
+      [is='tab-bar'] > & {
+        // position: sticky;
+        // left: 0;
+        // top: 0;
+        width: 30px;
+        order: -1;
+      }
+
+      [is='tab-bar'][open] > & {
+        position: sticky;
+        inset: 0 auto auto 0;
+        height: var(--navigation-bar-height);
+      }
+
+      tab-view > & {
+        display: none;
+      }
+    }
+
+    @include mixins.if-iphone-landscape {
+      [is='tab-bar'] > & {
+        display: none;
+      }
+    }
+
+    @include mixins.if-ipad-landscape {
+      [is='tab-bar'] > &,
+      tab-view > & {
+        display: none;
+      }
+    }
+  }
+}