@swiftwc/ui 0.0.0-dev.2 → 0.0.0-dev.20

package/scss/components/_sidebar-toggle.scss

@@ -0,0 +1,121 @@
+@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 {
+    tab-view:not([tab-view-style='tab-bar-only']) > &, // this is landscape toggle
+    navigation-split-view > & {
+      :where(&) {
+        position: fixed;
+
+        inset: max(env(safe-area-inset-top), var(--sidebar-block-spacing)) auto auto 0; //max(env(safe-area-inset-left), var(--sidebar-spacing));
+
+        padding-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing));
+
+        block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
+
+        // 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 {
+      :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 {
+      @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;
+      }
+    }
+
+    @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
+
+    @include mixins.ifnot-2col-split-view-fits {
+      :where(navigation-split-view > &) {
+        display: none;
+      }
+    }
+
+    @include mixins.if-3col-split-view-fits {
+      :where(navigation-split-view > &) {
+        display: none;
+      }
+    }
+
+    @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

@@ -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,255 @@
+@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%));
+    }
+  }
+}
+
+@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;
+        }
+      }
+    }
+  }
+}