@swiftwc/ui 0.0.0-dev.0 → 0.0.0-dev.100

package/scss/components/_scroll-view.scss

@@ -0,0 +1,134 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  scroll-view {
+    navigation-stack > &,
+    navigation-split-view > &,
+    [is='sidebar-view'] > &,
+    body-view > &,
+    [is='full-screen'] > &,
+    [is='sheet-view'] > & {
+      &:has(~ tool-bar > [slot^='top-bar']),
+      &:has(> [slot^='top-bar']) {
+        :where(&) {
+          scroll-padding-top: var(--navigation-bar-block-size);
+        }
+
+        :where(& > *:not([slot])) {
+          // margin-block-start: var(--navigation-bar-block-size);
+        }
+      }
+
+      &:has(~ tool-bar > [slot^='bottom-bar']),
+      &:has(> [slot^='bottom-bar']) {
+        :where(&) {
+          scroll-padding-bottom: var(--tool-bar-block-size);
+        }
+
+        :where(& > *:not([slot])) {
+          margin-block-end: var(--tool-bar-block-size);
+        }
+      }
+
+      :where(&) {
+        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);
+        padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
+
+        container: scroll-view / size; //inline-size;
+
+        background-color: var(--face,);
+        color: var(--text,);
+
+        box-shadow: var(--scroll-view-box-shadow,);
+
+        transform: var(--scroll-view-translate,);
+
+        // --scroll-view-box-shadow: var(--screen-box-shadow);
+
+        // place-items: center;
+        //
+        // box-shadow:
+        //   2px 0 6px oklch(0 0 0 / 48%),
+        //   6px 0 16px oklch(0 0 0 / 67%) !important;
+
+        // grid-auto-rows: minmax(0, max-content);
+        // grid-template-rows: 100% 1px;
+        @include mixins.make-scrollable;
+
+        &::before {
+          block-size: calc(100% + var(--safe-area-inset-bottom) + 1px); //????? FIXME:
+
+          // outline: #c4e412 solid 10px;
+          // box-shadow: inset 0 0 0 6px #c4e412;
+        }
+
+        // @include mixins.make-toolbar-pseudos;
+        @include mixins.create-v-scroll-view;
+      }
+
+      &[navigation-bar-title-display-mode='large'] {
+        :where(&) {
+          > [slot='top-bar-principal'] {
+            opacity: 0;
+
+            visibility: collapse;
+          }
+        }
+      }
+
+      // &:has(list-view section-view[js-stuck], [is='form-view'] section-view[js-stuck]) {
+      //   :where(&) {
+      //     --navbar-backdrop-inset-block-end: -25px;
+      //   }
+      // }
+
+      sticky-container {
+        :where(&) {
+          @include mixins.make-toolbar-pseudos(bottom);
+
+          &:after {
+            display: none;
+          }
+        }
+      }
+
+      @supports (container-type: scroll-state) {
+        &:has(sticky-container[stuck]) {
+          :where(&)::part(scroll-view-navbar):before {
+            mask-image: none !important;
+          }
+        }
+      }
+
+      @supports not (container-type: scroll-state) {
+        &:has(sticky-container) {
+          :where(&)::part(scroll-view-navbar):before {
+            mask-image: none !important;
+          }
+        }
+      }
+    }
+  }
+
+  @include mixins.if-ipad-sheet-fits {
+    [is='sheet-view'] {
+      :where(& scroll-view:not(scroll-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/_search-view.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+@use '../mixins';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='search-view'] {
+    :where(&) {
+      height: 30px;
+      // outline: red solid 3px;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,);
+
+      border-radius: var(--pill-border-radius);
+
+      padding-inline: 1rem;
+
+      appearance: none;
+
+      outline: none;
+    }
+  }
+}

package/scss/components/_section-view.scss

@@ -0,0 +1,120 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  section-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto minmax(max-content, 1fr) auto; //0.1px auto minmax(max-content, 1fr) auto;
+      grid-template-areas:
+        'header'
+        'main'
+        'footer';
+      // 'sentinel'
+
+      gap: 0.5rem;
+
+      &::part(section-header-stack),
+      &::part(section-footer-stack) {
+        pointer-events: none;
+        //   outline: solid magenta 4px;
+        //   padding-block: 10px;
+      }
+
+      &::part(section-header-stack) {
+        grid-area: header;
+      }
+
+      &::part(section-main-stack) {
+        grid-area: main;
+      }
+
+      &::part(section-footer-stack) {
+        grid-area: footer;
+      }
+
+      &::part(section-header-stack) {
+        order: -1;
+      }
+    }
+
+    :where(&:has(> [slot='header']):not(:has(> [slot='footer']))) {
+      grid-template-rows: auto minmax(max-content, 1fr); //0.1px auto minmax(max-content, 1fr);
+      grid-template-areas:
+        'header'
+        'main';
+    } // 'sentinel'
+
+    :where(&:has(> [slot='footer']):not(:has(> [slot='header']))) {
+      grid-template-rows: minmax(max-content, 1fr) auto; //0.1px minmax(max-content, 1fr) auto;
+      grid-template-areas:
+        'main'
+        'footer';
+    } //'sentinel'
+
+    :where(&:not(:has(> [slot='footer'])):not(:has(> [slot='header']))) {
+      grid-template-rows: minmax(max-content, 1fr);
+      grid-template-areas: 'main';
+    } //'sentinel'
+
+    :where(&:not(:has(> [slot='header'])))::part(section-header-stack) {
+      display: none;
+    }
+
+    :where(&:not(:has(> [slot='footer'])))::part(section-footer-stack) {
+      display: none;
+    }
+
+    // :where(& > *) {
+    //   display: grid;
+    // }
+
+    // :where(&:has(~ :not([slot]))) {
+    //   margin-bottom: 3rem;
+    // }
+
+    // :where(&:not(& &))::part(section-header-stack) {
+    // :where(&)::part(section-header-stack) {
+    // display: var(--section--headerstack-display, grid);
+    // }
+
+    // :where(&:not(& &))::part(section-footer-stack) {
+    // :where(&)::part(section-footer-stack) {
+    // display: var(--section--footerstack-display, grid);
+    // }
+
+    /*  :where(&:not(& &))::part(section-footer-stack),
+    :where(&:not(& &))::part(section-header-stack) {
+      // pointer-events: none;
+
+      // outline: red solid 1px;
+
+      padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--toolbaritempadistart, 0px))
+        calc(var(--list--root-padding-inline, 0px) + var(--toolbaritempadiend, 0px));
+
+      margin-inline: calc(var(--list--root-padding-inline) * -1);
+    }
+
+    // :where(&:not(& &) [slot='header'] span) {
+    //   backdrop-filter: blur(10px);
+    // }
+
+    :where(&:not(& &))::part(section-header-stack) {
+      top: var(--navigation-bar-block-size);
+
+      position: sticky;
+
+      backdrop-filter: blur(20px);
+
+      // background: rgba(255, 255, 255, 0.5);
+
+      text-shadow: 0 0 5px var(--face);
+    } */
+
+    // :where(&:not(& &))::part(section-main-stack) {
+    //   background-color: var(--groupedface,);
+
+    //   border-radius: var(--toolbaritemradius,);
+    // }
+  }
+}

package/scss/components/_sheet-view.scss

@@ -0,0 +1,103 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  [is='sheet-view'] {
+    :where(&) {
+      @include mixins.reset-dialog;
+
+      // dowh
+      overflow: clip;
+      width: 100lvw;
+      height: var(--100lvh, 100lvh);
+
+      transform: var(--sheet-view-translate,);
+
+      --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
+
+      // :where(&[fine-presentation-large-adaptation='bottom-bar'] > tool-bar > [slot^='top-bar-']) {
+      // // FIXME: Add live tooltip
+      // // NOTE: By default toolbars items dialogs have only icons, (except if they define/force w/ labelStyle)
+      // :where(& > tool-bar > [slot='top-bar-leading'], & > tool-bar > [slot='top-bar-trailing']) {
+      //   --label-style: icon-only;
+      // }
+
+      // // NOTE: By default bottombar items dialogs on iphone have only icons, (except if they define/force w/ labelStyle)
+      // @media (pointer: coarse) {
+      //   :where(& > tool-bar > [slot^='bottom-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 {
+      :where(&) {
+        clip-path: none;
+
+        max-width: #{vars.$ipad-sheet-view-inline-size};
+
+        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(
+          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))
+        );
+
+        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) {
+      @supports (hanging-punctuation: first) {
+        &:has(&:not([open])) {
+          :where(&) {
+            overflow: visible;
+          }
+          scroll-view:has(~ body-view) {
+            &,
+            & ~ tool-bar {
+              :where(&) {
+                opacity: 0;
+              }
+            }
+          }
+        }
+
+        :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

@@ -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: 25rem) {
+      :where(&) {
+        position: relative;
+        top: unset;
+      }
+    }
+  }
+}