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

package/scss/components/_sidebar-view.scss

@@ -0,0 +1,53 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='sidebar-view'] {
+    :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;
+        }
+      }
+    }
+
+    :where(& > *) {
+      @include mixins.span-all;
+    }
+
+    &[open] {
+      :where(&) {
+        @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
+      }
+
+      // @starting-style {
+      //   :where(&) {
+      //     transform: translateY(var(--view-transition-dialog-offscreen-y));
+      //   }
+      // }
+    }
+  }
+}
+
+@layer #{vars.$final-layer} {
+  [is='sidebar-view'] {
+    :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;
+      }
+    }
+  }
+}

package/scss/components/_tab-bar.scss

@@ -0,0 +1,260 @@
+@use '../vars';
+@use '../mixins';
+
+@mixin make-pseudo-tracking-thumb($anchor-name) {
+  :where(&)::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    touch-action: none;
+
+    position-anchor: #{$anchor-name};
+    // position-area: center;
+    inset: anchor(#{$anchor-name} top) auto auto anchor(#{$anchor-name} left);
+
+    inline-size: anchor-size();
+    block-size: anchor-size();
+
+    border-radius: var(--pill-border-radius);
+
+    z-index: -1;
+  }
+}
+
+@mixin make-floating-tabbar {
+  background: light-dark(
+    var(--liquid-glass-bg),
+    var(--liquid-glass-bg-dark)
+  ); //light-dark(oklch(var(--sidebar-bg-lch) / var(--sidebar-bg-alpha)), oklch(var(--sidebar-bg-lch-dark) / var(--sidebar-bg-alpha-dark)));
+  backdrop-filter: var(--liquid-glass-backdrop-filter);
+  box-shadow: var(--liquid-glass-box-shadow);
+}
+
+@mixin make-iphone-tabbar($selector) {
+  #{$selector} & {
+    :where(&) {
+      --tab-bar-width: 100lvw;
+
+      inset: auto 0 0 0;
+
+      @include mixins.make-toolbar-pseudos(top);
+    }
+
+    > [is='form-view'] {
+      :where(&) {
+        margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
+
+        max-inline-size: var(--iphone-tabbar-max-inline-size);
+        block-size: var(--iphone-tabbar-block-size);
+
+        border-radius: var(--iphone-tabbar-border-radius);
+
+        // @include make-floating-tabbar;
+
+        // overflow: clip;
+
+        padding-block: var(--iphone-tabbar-block-padding-start) var(--iphone-tabbar-block-padding-end);
+        padding-inline: var(--iphone-tabbar-inline-padding-start) var(--iphone-tabbar-inline-padding-end);
+
+        // overflow: auto clip;
+
+        --label-flow: vertical;
+        --label-line-limit: 2;
+        --label-truncation-mode: tail;
+      }
+
+      :where(& button) {
+        min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
+        place-items: center;
+        place-content: center;
+        border-radius: inherit;
+      }
+    }
+  }
+}
+
+@mixin make-ipad-tabbar($selector) {
+  #{$selector} & {
+    :where(&) {
+      --tab-bar-width: 100lvw;
+
+      inset: 0 0 auto 0;
+    }
+
+    > [is='form-view'] {
+      :where(&) {
+        grid-auto-columns: minmax(max-content, 1fr);
+
+        margin-block-start: max(var(--safe-area-inset-top), var(--sidebar-block-spacing));
+
+        max-inline-size: var(--ipad-tabbar-max-inline-size);
+        block-size: var(--ipad-tabbar-block-size);
+
+        border-radius: var(--ipad-tabbar-border-radius);
+
+        // @include make-floating-tabbar;
+
+        // overflow: clip;
+
+        scroll-padding-left: calc(var(--sidebar-toggle-padding-inline-start, 0px) + var(--ipad-tabbar-block-padding-start) + var(--ipad-tabbar-block-padding-end));
+
+        // overflow: auto clip;
+
+        padding-block: var(--ipad-tabbar-block-padding-start) var(--ipad-tabbar-block-padding-end);
+        padding-inline: var(--ipad-tabbar-inline-padding-start) var(--ipad-tabbar-inline-padding-end);
+
+        --label-line-limit: 1;
+        --label-truncation-mode: tail;
+      }
+
+      :where(& button) {
+        min-inline-size: calc(var(--ipad-tabbar-block-size) + 0.1rem);
+        place-items: center;
+        place-content: center;
+        max-inline-size: max(15vw, 200px);
+        border-radius: inherit;
+      }
+    }
+  }
+
+  #{$selector} [is='sidebar-view'][open] ~ & > [is='form-view'] {
+    :where(&) {
+      transform: translateY(calc(calc(max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) * -1) - 150%));
+
+      // SAFARI FIX
+      @media (prefers-reduced-motion: no-preference) {
+        animation: ipad_form_view_slide_up_offedge var(--sidebar-transition-duration) ease forwards;
+      }
+    }
+  }
+}
+
+@layer #{vars.$tab-components-layer} {
+  [is='tab-bar'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      // dowh
+      // overflow: clip;
+      inline-size: var(--tab-bar-width,);
+      block-size: var(--tab-bar-height,);
+
+      position: fixed; // show always
+
+      transform: var(--tab-bar-translate,) var(--tab-bar-scale,);
+
+      grid-auto-flow: column;
+
+      place-content: center;
+
+      touch-action: none; // important for backdrop pans!
+
+      pointer-events: none;
+
+      --tab-bar-width: fit-content;
+      --tab-bar-height: auto;
+    }
+
+    > [is='form-view'] {
+      @include make-pseudo-tracking-thumb(--tab-view-tabbar-selection); // NOTE: before is already taken!
+
+      :where(&) {
+        @include mixins.contain-overscroll;
+
+        pointer-events: all;
+
+        touch-action: none; // important for backdrop pans!
+
+        grid-auto-flow: column;
+        grid-template-rows: minmax(0, 1fr);
+
+        margin-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+
+        @include make-floating-tabbar;
+
+        overflow: auto clip;
+      }
+    }
+
+    // ANCHOR
+
+    @media (pointer: coarse) {
+      @include make-iphone-tabbar("tab-view[tab-view-style='tab-bar-only']");
+    }
+
+    @media (pointer: fine) {
+      @include make-ipad-tabbar("tab-view[tab-view-style='tab-bar-only']");
+    }
+
+    // ANCHOR
+
+    @include mixins.if-iphone-portrait {
+      @include make-iphone-tabbar("tab-view:not([tab-view-style='tab-bar-only'])");
+    }
+
+    @include mixins.if-ipad-portrait {
+      @include make-ipad-tabbar("tab-view:not([tab-view-style='tab-bar-only'])");
+    }
+
+    // ANCHOR
+
+    @media (orientation: landscape) {
+      tab-view:not([tab-view-style='tab-bar-only']) & {
+        :where(&) {
+          display: none; // visibility: collapse;
+        }
+      }
+    }
+
+    // @include mixins.if-iphone-landscape {
+    //   @include make-iphone-tabbar("tab-view:not([tab-view-style='tab-bar-only'])");
+
+    //   tab-view:not([tab-view-style='tab-bar-only']) & {
+    //     :where(& > [is='form-view']) {
+    //       transform: translateY(calc(max(var(--safe-area-inset-top), var(--sidebar-spacing)) + 120%));
+    //     }
+    //   }
+    // }
+
+    // @include mixins.if-ipad-landscape {
+    //   @include make-ipad-tabbar("tab-view:not([tab-view-style='tab-bar-only'])");
+
+    //   tab-view:not([tab-view-style='tab-bar-only']) & {
+    //     :where(& > [is='form-view']) {
+    //       transform: translateY(calc(calc(max(var(--safe-area-inset-top), var(--sidebar-spacing)) * -1) - 150%));
+    //     }
+    //   }
+    // }
+  }
+
+  // ANCHOR
+
+  tab-view > [is='sidebar-view'] > scroll-view {
+    @include make-pseudo-tracking-thumb(--tab-view-sidebar-selection); // NOTE: before is already taken!
+
+    :where(&)::after {
+      background-color: white;
+      box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where(tab-view[js-aftertabreveal] > [is='tab-bar'] > [is='form-view'])::after,
+    :where(tab-view[js-aftertabreveal] > [is='sidebar-view'] > scroll-view)::after {
+      transition:
+        block-size var(--tabbar-after-tabreveal-duration) ease-out allow-discrete,
+        inline-size var(--tabbar-after-tabreveal-duration) ease-out allow-discrete,
+        inset var(--tabbar-after-tabreveal-duration) ease-out allow-discrete;
+    }
+  }
+
+  @include mixins.if-ipad-landscape {
+    tab-view:not([tab-view-style='tab-bar-only']) > [is='sidebar-view'] {
+      :where(&) {
+        margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
+      }
+    }
+  }
+}

package/scss/components/_tab-item.scss

@@ -0,0 +1,25 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$tab-components-layer} {
+  [is='tab-item'] {
+    :where(&) {
+      //
+    }
+
+    [is='sidebar-view'] &[aria-selected='true']:not([is='disclosure-group']:not([open]) &),
+    [is='sidebar-view'] [is='disclosure-group']:not([open]):has(> &[aria-selected='true']) > summary {
+      :where(&) {
+        anchor-name: --tab-view-sidebar-selection;
+      }
+    }
+
+    [is='tab-bar'] & {
+      &[aria-selected='true'] {
+        :where(&) {
+          anchor-name: --tab-view-tabbar-selection;
+        }
+      }
+    }
+  }
+}

package/scss/components/_tab-view.scss

@@ -0,0 +1,312 @@
+@use '../vars';
+@use '../mixins';
+
+@property --adaptable-tab-bar-placement-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@mixin make-iphone-tabview($selector) {
+  #{$selector} {
+    :where(&) {
+      --adaptable-tab-bar-placement: bottom-bar;
+      --adaptable-tab-bar-placement-index: 0;
+    }
+  }
+
+  scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    #{$selector} navigation-stack > &,
+    #{$selector} navigation-split-view > &,
+    #{$selector} body-view > & {
+      &,
+      & ~ tool-bar {
+        :where(&) {
+          --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+        }
+      }
+    }
+  }
+  #{$selector} navigation-split-view > [is='sidebar-view'] > scroll-view {
+    @include mixins.ifnot-2col-split-view-fits {
+      &,
+      & ~ tool-bar {
+        :where(&) {
+          --safe-area-inset-bottom: max(env(safe-area-inset-bottom), var(--sidebar-block-spacing));
+        }
+      }
+    }
+  }
+
+  scroll-view:not(:has(~ tool-bar > [slot^='bottom-bar'])):not(:has(> [slot^='bottom-bar'])) {
+    :where(#{$selector} navigation-stack > &),
+    :where(#{$selector} navigation-split-view > &),
+    :where(#{$selector} body-view > &) {
+      --safe-area-inset-bottom: calc(max(env(safe-area-inset-bottom), var(--sidebar-block-spacing)) + var(--iphone-tabbar-block-size));
+    }
+
+    :where(#{$selector} navigation-split-view > [is='sidebar-view'] > &) {
+      @include mixins.ifnot-2col-split-view-fits {
+        --safe-area-inset-bottom: calc(max(env(safe-area-inset-bottom), var(--sidebar-block-spacing)) + var(--iphone-tabbar-block-size));
+      }
+    }
+  }
+}
+
+@mixin make-ipad-tabview($selector) {
+  #{$selector} {
+    :where(&) {
+      --adaptable-tab-bar-placement: top-bar;
+      --adaptable-tab-bar-placement-index: 1;
+    }
+  }
+
+  scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    #{$selector} navigation-stack > &,
+    #{$selector} navigation-split-view > &,
+    #{$selector} body-view > & {
+      &,
+      & ~ tool-bar {
+        :where(&) {
+          --safe-area-inset-top: calc(max(env(safe-area-inset-top), var(--sidebar-block-spacing)) + var(--ipad-tabbar-block-size));
+        }
+      }
+    }
+  }
+  :where(#{$selector} navigation-split-view > [is='sidebar-view']) {
+    padding-block-start: calc(max(env(safe-area-inset-top), var(--sidebar-block-spacing)) + var(--ipad-tabbar-block-size));
+  }
+}
+
+@layer #{vars.$tab-components-layer} {
+  tab-view {
+    // // more navstack is only for portrait mobile!
+    // & > navigation-stack > scroll-view:has(~ navigation-split-view) {
+    //   &,
+    //   & ~ tool-bar {
+    //     :where(&) {
+    //       display: none;
+    //     }
+    //   }
+    // }
+
+    :where(&) {
+      grid-template-columns: subgrid; // inherits columns from container
+      grid-template-rows: subgrid; // inherits rows if needed
+
+      // css-style-observer
+      transition: --adaptable-tab-bar-placement-index 1ms step-start;
+    }
+
+    :where(& > navigation-stack[hidden], & > navigation-split-view[hidden]) {
+      z-index: -1;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      @media (pointer: coarse) {
+        :where(& > navigation-stack, & > navigation-split-view) {
+          transform: scale(1);
+          transform-origin: bottom;
+          transition: transform 100ms ease-out allow-discrete;
+          @starting-style {
+            transform: scale(0.99);
+          }
+        }
+      }
+    }
+
+    > [is='sidebar-view'] {
+      @include mixins.make-floating-sidebar;
+
+      :where(&) {
+        margin-inline-start: calc(var(--nav-split-view-sidebar-inline-size) * -1); // hide off screen
+      }
+    }
+  }
+
+  // body:has(tab-view input[type='checkbox']:checked) {
+  // grid-template: 'aside main' 1fr / 300px minmax(0, 1fr);
+  // }
+
+  // if iphone
+  @media (pointer: coarse) {
+    @include make-iphone-tabview("tab-view[tab-view-style='tab-bar-only']");
+  }
+
+  // if iphone landscape OR ipad landscape
+  @media (orientation: landscape) {
+    scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
+      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            --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));
+          }
+        }
+      }
+    }
+    tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > [is='sidebar-view'] > scroll-view {
+      @include mixins.ifnot-2col-split-view-fits {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            --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));
+          }
+        }
+      }
+    }
+  }
+
+  @include mixins.if-iphone-portrait {
+    @include make-iphone-tabview("tab-view:not([tab-view-style='tab-bar-only'])");
+  }
+
+  @include mixins.if-iphone-landscape {
+    tab-view:not([tab-view-style='tab-bar-only']) {
+      :where(&) {
+        --adaptable-tab-bar-placement: ornament;
+        --adaptable-tab-bar-placement-index: 3;
+      }
+    }
+
+    scroll-view {
+      tab-view:not([tab-view-style='tab-bar-only']) &:not(dialog scroll-view):not(scroll-view scroll-view) {
+        :where(&) {
+          grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
+
+          // force navbar visibility bc/ of sidebartoggle shown
+          &::part(scroll-view-navbar) {
+            visibility: visible;
+          }
+        }
+
+        // move ONLY navbar to the side
+        @include mixins.create-sidebar-measure;
+      }
+
+      // APPLY FOR NSV
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > [is='sidebar-view']:not([open]) > & {
+        @include mixins.ifnot-2col-split-view-fits {
+          @include mixins.create-sidebar-measure;
+        }
+        @include mixins.if-2col-split-view-fits {
+          @include mixins.create-sidebar-measure(true);
+        }
+      }
+    }
+
+    tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view {
+      // DISCARDS
+      @include mixins.if-2col-split-view-fits {
+        &:not(:has(> [is='sidebar-view'])) {
+          > body-view {
+            scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+              @include mixins.discard-sidebar-measures;
+            }
+          }
+        }
+        &:has(> [is='sidebar-view']) {
+          &:not([column-visibility='double-column']) {
+            &:not([preferred-compact-column='content']) {
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  @include mixins.discard-sidebar-measures;
+                }
+              }
+            }
+            &[preferred-compact-column='content'] {
+              @include mixins.ifnot-3col-split-view-fits {
+                > body-view {
+                  > body-view {
+                    scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                      @include mixins.discard-sidebar-measures;
+                    }
+                  }
+                }
+              }
+            }
+            @include mixins.if-3col-split-view-fits {
+              > body-view {
+                scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                  @include mixins.discard-sidebar-measures;
+                }
+              }
+            }
+          }
+          &[column-visibility='double-column'] {
+            > body-view {
+              scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+                @include mixins.discard-sidebar-measures;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include mixins.if-ipad-landscape {
+    tab-view:not([tab-view-style='tab-bar-only']) {
+      :where(&) {
+        --adaptable-tab-bar-placement: sidebar;
+        --adaptable-tab-bar-placement-index: 4;
+      }
+    }
+
+    // custom override for nested nav
+    tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view {
+      &:not(:has(> [is='sidebar-view'])) {
+        --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
+
+        > body-view {
+          --sidebar-inline-size: 0px;
+          --sidebar-inline-spacing: 0px;
+        }
+      }
+    }
+
+    scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-stack > &,
+      tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view > &,
+      tab-view:not([tab-view-style='tab-bar-only']) body-view > & {
+        &,
+        & ~ tool-bar {
+          :where(&) {
+            --safe-area-inset-left: calc(max(env(safe-area-inset-left), var(--sidebar-inline-spacing)) + var(--sidebar-inline-size));
+          }
+        }
+      }
+    }
+
+    // custom override for nested nav
+    // tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) {
+    //   --nav-split-view--content-inline-size: calc(var(--nav-split-view-content-inline-size) + var(--sidebar-inline-size, 0px));
+    // }
+    // scroll-view:not(dialog scroll-view):not(scroll-view scroll-view) {
+    //   tab-view:not([tab-view-style='tab-bar-only']) navigation-split-view:not(:has(> [is='sidebar-view'])) > body-view & {
+    //     &,
+    //     & ~ tool-bar {
+    //       :where(&) {
+    //         --safe-area-inset-left: 0px;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+}
+
+@layer #{vars.$final-layer} {
+  @media (pointer: fine) {
+    @include make-ipad-tabview("tab-view[tab-view-style='tab-bar-only']");
+  }
+
+  @include mixins.if-ipad-portrait {
+    @include make-ipad-tabview("tab-view:not([tab-view-style='tab-bar-only'])");
+  }
+}