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

package/scss/components/_tab-bar.scss

@@ -1,137 +1,254 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
-  [is='tab-bar'] {
-    @include mixins.reset-dialog;
+@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;
+
+    position-anchor: #{$anchor-name};
+    // position-area: center;
+    inset: anchor(#{$anchor-name} top) auto auto anchor(#{$anchor-name} left);
 
-    // dowh
-    overflow: clip;
-    width: fit-content;
-    height: auto;
+    inline-size: anchor-size();
+    block-size: anchor-size();
 
-    position: fixed; // show always
+    border-radius: var(--pill-border-radius);
 
-    background: #ffffff9e;
-    backdrop-filter: blur(4px);
+    z-index: -1;
+  }
+}
 
-    box-shadow:
-      0 0 0 1px #fff inset,
-      0px 0px 4px 2px #0000001c;
+@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);
+}
 
-    transition: all #{vars.$sidebar-transition-duration} ease-out allow-discrete;
+@mixin make-iphone-tabbar($selector) {
+  #{$selector} & {
+    :where(&) {
+      --tab-bar-width: 100lvw;
 
-    touch-action: none; // important for backdrop pans!
+      inset: auto 0 0 0;
 
-    navigation-bar,
-    bottom-bar {
-      padding-inline: 0;
+      @include mixins.make-toolbar-pseudos(top);
     }
 
+    > [is='form-view'] {
+      :where(&) {
+        margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
 
-    @include mixins.if-iphone-portrait {
-      max-width: var(--tab-bar-iphone-max-width);
-      height: var(--tab-bar-iphone-height);
-      // left: 50%;
-      border-radius: var(--tab-bar-iphone-border-radius);
-      inset: auto auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) 50%;
-      transform: translateX(-50%);
-      //
-      grid-auto-flow: column;
+        max-inline-size: var(--iphone-tabbar-max-inline-size);
+        block-size: var(--iphone-tabbar-block-size);
 
-      &:not([open]) {
-        tool-bar {
-          display: none;
-        }
+        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);
 
-    @include mixins.if-ipad-portrait {
-      width: var(--tab-bar-ipad-width);
-      height: var(--tab-bar-ipad-height);
+        margin-block-start: max(var(--safe-area-inset-top), var(--sidebar-block-spacing));
 
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto auto 50%;
-      transform: translateX(-50%);
+        max-inline-size: var(--ipad-tabbar-max-inline-size);
+        block-size: var(--ipad-tabbar-block-size);
 
-      border-radius: var(--tab-bar-ipad-border-radius);
+        border-radius: var(--ipad-tabbar-border-radius);
 
-      grid-auto-flow: column;
+        // @include make-floating-tabbar;
 
-      // transition: all 250ms ease-out allow-discrete;
+        // overflow: clip;
 
-      &:not([open]) {
-        tool-bar {
-          display: none;
-        }
+        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;
       }
 
-      &[open] {
-        // @include mixins.make-navbar;
+      :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%));
+    }
+  }
+}
+
+@layer #{vars.$tab-components-layer} {
+  [is='tab-bar'] {
+    :where(&) {
+      @include mixins.reset-dialog;
 
-        inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+      // dowh
+      // overflow: clip;
+      inline-size: var(--tab-bar-width,);
+      block-size: var(--tab-bar-height,);
 
-        height: auto; // override topbar
-        transform: translateX(0);
-        width: var(--tab-bar-sidebar-width);
+      position: fixed; // show always
 
-        border-radius: var(--tab-bar-sidebar-border-radius);
+      transform: var(--tab-bar-translate,) var(--tab-bar-scale,);
 
-        grid-auto-flow: row;
+      grid-auto-flow: column;
 
-        &>* {
-          @include mixins.span-all;
+      place-content: center;
 
-          --safe-area-inset-top: 0px !important; // reset navbar > span
-          --safe-area-inset-bottom: 0px !important; // reset navbar > span
-        }
+      touch-action: none; // important for backdrop pans!
+
+      pointer-events: none;
+
+      --tab-bar-width: fit-content;
+      --tab-bar-height: auto;
+    }
 
-        // animation: slide-in 250ms ease-out forwards;
+    > [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;
+
+        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;
       }
     }
 
-    @include mixins.if-iphone-landscape {
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) -100%;
+    // ANCHOR
 
-      width: var(--tab-bar-sidebar-width);
+    @media (pointer: coarse) {
+      @include make-iphone-tabbar("tab-view[tab-view-style='tab-bar-only']");
+    }
 
-      border-radius: var(--tab-bar-sidebar-border-radius);
+    @media (pointer: fine) {
+      @include make-ipad-tabbar("tab-view[tab-view-style='tab-bar-only']");
+    }
+
+    // ANCHOR
 
-      &[open] {
-        left: max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
-        // transform: translateX(0);
+    @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'])");
+    }
 
-        --tabview-padding-inline-start: 0px !important; // override tab-view prop
+    // ANCHOR
 
-        >scroll-view {
-          --canvas-bg: #ffffff9e;
+    @media (orientation: landscape) {
+      tab-view:not([tab-view-style='tab-bar-only']) & {
+        :where(&) {
+          display: none; // visibility: collapse;
         }
       }
     }
 
-    @include mixins.if-ipad-landscape {
-      // grid-area: aside;
-      // position: relative;
-      // margin: 10px;
-      // height: 100svh;
-      inset: max(var(--safe-area-inset-top), var(--tab-bar-sidebar-spacing)) auto max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing)) max(var(--safe-area-inset-left), var(--tab-bar-sidebar-spacing));
+    // @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%));
+    //     }
+    //   }
+    // }
+  }
 
-      width: var(--tab-bar-sidebar-width);
+  // ANCHOR
 
-      // max-height: calc(
-      //   var(--100lvh, 100lvh) - max(
-      //       var(--safe-area-inset-top),
-      //       var(--tab-bar-sidebar-spacing)
-      //     ) - max(var(--safe-area-inset-bottom), var(--tab-bar-sidebar-spacing))
-      // );
+  tab-view > [is='sidebar-view'] > scroll-view {
+    @include make-pseudo-tracking-thumb(--tab-view-sidebar-selection); // NOTE: before is already taken!
 
-      border-radius: var(--tab-bar-sidebar-border-radius);
+    :where(&)::after {
+      background-color: white;
+      box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
+    }
+  }
 
-      overflow: clip;
+  @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;
+    }
+  }
 
-      // animation: slide-in 250ms ease-out forwards;
+  @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;
+        }
+      }
+    }
+  }
+}