@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.8

package/scss/components/_sheet-view.scss

@@ -3,58 +3,91 @@
 
 @layer #{vars.$components-layer} {
   [is='sheet-view'] {
-    @include mixins.reset-dialog;
+    :where(&) {
+      @include mixins.reset-dialog;
 
-    // dowh
-    overflow: clip;
-    width: 100lvw;
-    height: var(--100lvh, 100lvh);
+      // dowh
+      overflow: clip;
+      width: 100lvw;
+      height: var(--100lvh, 100lvh);
 
-    transform: translateY(var(--view-transition-dialog-offscreen-y));
+      transform: var(--sheet-view-translate,);
 
-    &::backdrop {
-      background-color: transparent;
+      --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
+
+      :where(&[fine-presentation-large-adaptation='bottom-bar'] > tool-bar > [slot^='top-bar-']) {
+        --label-style: icon-only;
+      }
+
+      @media (pointer: coarse) and (orientation: portrait) {
+        clip-path: inset(var(--safe-area-inset-top) 0 0 0 round 2rem 2rem 0 0);
+      }
     }
 
     @include mixins.if-ipad-sheet-fits {
-      max-width: #{vars.$ipad-sheet-view-width};
+      :where(&) {
+        clip-path: none;
 
-      aspect-ratio: #{vars.$ipad-sheet-view-aspect-ratio};
+        max-width: #{vars.$ipad-sheet-view-inline-size};
 
-      border-radius: 26px;
+        aspect-ratio: #{vars.$ipad-sheet-view-aspect-ratio};
 
-      margin: var(--safe-area-inset-top) var(--safe-area-inset-right)
-        var(--safe-area-inset-bottom) var(--safe-area-inset-left);
+        border-radius: 26px;
 
-      height: auto;
+        margin: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
 
-      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
-          )
-      );
+        height: auto;
 
-      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
-          )
-      );
+        inset-inline-start: calc(
+          var(--inset-inline-start-resettor, 1) *
+            calc(50lvw - calc(#{vars.$ipad-sheet-view-inline-size} / 2) - calc(calc(var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 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)
-          );
+        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));
+      }
+
+      :where(& scroll-view) {
+        border-radius: 26px;
+      }
+
+      // NOTE: Safari-only mod for closing animation
+      @supports not selector(:open) {
+        &:has(&:not([open])) {
+          :where(&) {
+            overflow: visible;
+          }
+          scroll-view:has(~ body-view) {
+            &,
+            & ~ tool-bar {
+              :where(&) {
+                opacity: 0;
+              }
+            }
+          }
         }
 
-        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)
-          );
+        :where(& &:not([open])) {
+          inset-inline-start: 0;
+
+          inset-block-start: 0;
         }
       }
+
+      @include mixins.if-2col-split-view-fits {
+        // navigation-split-view & {
+        //   margin-inline-start: calc(
+        //     var(--safe-area-inset-left) - var(--nav-split-view-content-inline-size)
+        //   );
+        // }
+
+        // navigation-split-view[visibility='three-column'] & {
+        //   margin-inline-start: calc(
+        //     var(--safe-area-inset-left) - var(
+        //         --nav-split-view-content-inline-size
+        //       ) - var(--nav-split-view-sidebar-inline-size)
+        //   );
+        // }
+      }
     }
   }
 }

package/scss/components/_sidebar-toggle.scss

@@ -1,61 +1,124 @@
 @use '../vars';
 @use '../mixins';
 
+@mixin make-ipad-stoggle($selector) {
+  :where(#{$selector} [is='tab-bar'] > [is='form-view'] > &) {
+    position: sticky;
+
+    left: 0;
+
+    backdrop-filter: blur(20px);
+
+    border-radius: inherit;
+    // inline-size: fit-content;
+    // order: -1;
+  }
+
+  :where(#{$selector} > &) {
+    display: none;
+  }
+}
+
 @layer #{vars.$components-layer} {
   sidebar-toggle {
-    background-color: coral;
+    tab-view:not([tab-view-style='tab-bar-only']) > &, // this is landscape toggle
+    navigation-split-view > & {
+      :where(&) {
+        position: fixed;
 
-    place-items: center;
-    place-content: center;
+        inset: max(env(safe-area-inset-top), var(--sidebar-block-spacing)) auto auto 0; //max(env(safe-area-inset-left), var(--sidebar-spacing));
 
-    tab-view > &,
-    navigation-split-view > & {
-      position: fixed;
+        padding-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
 
-      inset: max(env(safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto
-        auto var(--safe-area-inset-left);
+        block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
 
-      height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
+        // place-items: center;
+
+        place-content: center;
+
+        grid-template-rows: var(--toolbar-cell-min-size);
+      }
+
+      :where(& > *) {
+        min-inline-size: var(--toolbar-cell-min-size);
+      }
+    }
+
+    @include mixins.if-ipad-portrait {
+      tab-view navigation-split-view > & {
+        inset-block-start: calc(max(env(safe-area-inset-top), var(--sidebar-block-spacing)) + var(--ipad-tabbar-block-size));
+      }
+    }
+
+    // ANCHOR: TABVIEW
+
+    @media (pointer: fine) {
+      @include make-ipad-stoggle("tab-view[tab-view-style='tab-bar-only']");
     }
 
     @include mixins.if-iphone-portrait {
-      [is='tab-bar'] > &,
-      tab-view > & {
+      :where(tab-view:not([tab-view-style='tab-bar-only']) [is='tab-bar'] > [is='form-view'] > &, tab-view:not([tab-view-style='tab-bar-only']) > &) {
         display: none;
       }
     }
 
     @include mixins.if-ipad-portrait {
-      [is='tab-bar'] > & {
-        // position: sticky;
-        // left: 0;
-        // top: 0;
-        width: 30px;
-        order: -1;
+      @include make-ipad-stoggle("tab-view:not([tab-view-style='tab-bar-only'])");
+    }
+
+    @include mixins.if-iphone-landscape {
+      :where(tab-view:not([tab-view-style='tab-bar-only']) [is='tab-bar'] > [is='form-view'] > &) {
+        display: none;
       }
+    }
 
-      [is='tab-bar'][open] > & {
-        position: sticky;
-        inset: 0 auto auto 0;
-        height: var(--navigation-bar-height);
+    @include mixins.if-ipad-landscape {
+      :where(
+        tab-view:not([tab-view-style='tab-bar-only']) [is='tab-bar'] > [is='form-view'] > &,
+        tab-view:not([tab-view-style='tab-bar-only']) > &,
+        tab-view:not([tab-view-style='tab-bar-only']) > [is='sidebar-view'] > tool-bar > &
+      ) {
+        display: none;
       }
+    }
+
+    // ANCHOR: NSPLITVIEW
 
-      tab-view > & {
+    @include mixins.ifnot-2col-split-view-fits {
+      :where(navigation-split-view > &) {
         display: none;
       }
     }
 
-    @include mixins.if-iphone-landscape {
-      [is='tab-bar'] > & {
+    @include mixins.if-3col-split-view-fits {
+      :where(navigation-split-view > &) {
         display: none;
       }
     }
 
-    @include mixins.if-ipad-landscape {
-      [is='tab-bar'] > &,
-      tab-view > & {
+    @include mixins.if-2col-split-view-fits {
+      :where(navigation-split-view:not(:has(> [is='sidebar-view'])) > &) {
+        display: none;
+      }
+
+      :where(
+        navigation-split-view:has(> [is='sidebar-view']):not([preferred-compact-column='content']) > &,
+        navigation-split-view:has(> [is='sidebar-view'])[column-visibility='double-column'] > &
+      ) {
         display: none;
       }
     }
+
+    // @include mixins.if-2col-split-view-fits {
+    //   @include mixins.if-3col-split-view-fits {
+    //     navigation-split-view:has(
+    //         > dialog[is='sidebar-view']
+    //       )[preferred-compact-column='content'] {
+    //       > & {
+    //         //
+    //       }
+    //     }
+    //   }
+    // }
   }
 }

package/scss/components/_sidebar-view.scss

@@ -3,61 +3,51 @@
 
 @layer #{vars.$components-layer} {
   [is='sidebar-view'] {
-    @include mixins.reset-dialog;
-
-    // dowh
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    @media (prefers-reduced-motion: no-preference) {
-      @include mixins.if-2col-split-view-fits {
-        navigation-split-view:has(
-            > dialog[is='sidebar-view']
-          )[preferred-compact-column='content']
-          & {
-          transition: margin-inline-start #{vars.$sidebar-transition-duration}
-            ease-out allow-discrete;
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      // dowh
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      @include mixins.make-backdrop-transitionable;
+
+      transform: var(--sidebar-view-scale,);
+
+      --list-style: sidebar;
+      --form-style: sidebar;
+
+      @include mixins.ifnot-2col-split-view-fits {
+        :where(navigation-split-view &) {
+          --list-style: unset;
+          --form-style: unset;
         }
       }
     }
 
-    &::backdrop {
-      background-color: transparent;
-
-      @media (prefers-reduced-motion: no-preference) {
-        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;
-      }
+    :where(& > *) {
+      @include mixins.span-all;
     }
 
     &[open] {
-      &::backdrop {
-        background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
+      :where(&) {
+        @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
       }
 
-      @starting-style {
-        &::backdrop {
-          background-color: transparent;
-        }
-      }
-
-      @starting-style {
-        & {
-          transform: translateY(var(--view-transition-dialog-offscreen-y));
-        }
-      }
+      // @starting-style {
+      //   :where(&) {
+      //     transform: translateY(var(--view-transition-dialog-offscreen-y));
+      //   }
+      // }
     }
   }
 }
 
 @layer #{vars.$final-layer} {
   [is='sidebar-view'] {
-    &[open] {
-      margin-inline-start: 0px !important;
+    :where(&[open]) {
+      margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
     }
   }
 }

package/scss/components/_sticky-container.scss

@@ -0,0 +1,42 @@
+@use '../vars';
+
+@property --stuck {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@layer #{vars.$components-layer} {
+  sticky-container {
+    :where(&) {
+      container-type: scroll-state;
+      position: sticky;
+
+      &::before {
+        content: ''; // needs dimensions
+        --stuck: 0;
+        transition: --stuck 1ms step-start;
+
+        @container scroll-state(stuck: top) {
+          // background: Highlight;
+          // color: HighlightText;
+
+          --stuck: 1;
+        }
+      }
+    }
+
+    &[edge='navbar'] {
+      :where(&) {
+        top: var(--navigation-bar-block-size);
+      }
+    }
+
+    @container (max-block-size: 400px) {
+      :where(&) {
+        position: relative;
+        top: unset;
+      }
+    }
+  }
+}