@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.41

package/scss/components/_navigation-stack.scss

@@ -1,11 +1,11 @@
 @use '../vars';
 
-@layer #{vars.$components-layer} {
+@layer #{vars.$nav-components-layer} {
   navigation-stack {
-    // grid-area: main;
-    touch-action: none;
-    height: var(--100lvh, 100lvh);
-    // height: 100lvh;
-    // overflow: clip;
+    :where(&) {
+      touch-action: none;
+
+      block-size: var(--100lvh, 100lvh);
+    }
   }
 }

package/scss/components/_navigation-title.scss

@@ -0,0 +1,10 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  navigation-title {
+    :where(&) {
+      display: grid; //contents;
+    }
+  }
+}

package/scss/components/_picker-view.scss

@@ -0,0 +1,131 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+@use 'sass:map';
+
+$picker-ifs: (
+  menu: (
+    --picker--labelstack-display: grid,
+    --picker--stack-grid-template-columns: auto minmax(0, 1fr),
+  ),
+);
+
+$picker-elses: (
+  --picker--stack-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
+);
+
+@mixin make-button-affordance() {
+  position: relative;
+
+  grid-auto-flow: column;
+  grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
+  column-gap: var(--picker-affordance-col-gap);
+
+  @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
+
+  &::before {
+    display: grid;
+
+    block-size: var(--picker-affordance-size);
+    inline-size: var(--picker-affordance-size);
+
+    background-color: var(--menuitemtext, var(--text));
+
+    transform: var(--tablecol--after-rotate,);
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform 100ms ease-out;
+      will-change: transform;
+    }
+
+    opacity: 0;
+  }
+
+  &[aria-selected='true']::before {
+    opacity: 1;
+  }
+}
+
+@layer #{vars.$components-layer} {
+  picker-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(picker-stack) {
+      grid-template-columns: var(--picker--stack-grid-template-columns,);
+
+      grid-template-rows: minmax(0, 1fr);
+    }
+
+    :where(&)::part(picker-label-stack) {
+      display: var(--picker--labelstack-display, none); // display: none;
+    }
+
+    :where(&) {
+      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+      @include mixins.write-props($picker-elses);
+    }
+
+    :where(tool-bar-item &) {
+      // --picker--labelstack-display: none;
+      // --picker--stack-grid-template-columns: minmax(0, 1fr);
+    }
+
+    :where(form &) {
+      // --picker--labelstack-display: grid;
+      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    :where(& menu-view > menu-view > label-view[slot='label']) {
+      @container style(--picker-style: menu) {
+        margin-inline-start: 2rem;
+      }
+    }
+    :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
+      @container style(--picker-style: menu) {
+        @include make-button-affordance;
+      }
+    }
+
+    // SECTION: ifs
+    @supports (x: #{string.unquote('if(else:red)')}) {
+      :where(&) {
+        @include mixins.write-ifs(--picker-style, $picker-ifs, $picker-elses);
+      }
+    }
+
+    // SECTION: ifs polyfill
+    @supports not (x: #{string.unquote('if(else:red)')}) {
+      :where(&:not([picker-style])) {
+        @each $v in vars.$picker-styles {
+          @container style(--picker-style: #{$v}) {
+            @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+          }
+        }
+      }
+      @each $v in vars.$picker-styles {
+        :where(&[picker-style='#{$v}']) {
+          :where(& menu-view > menu-view > label-view[slot='label']) {
+            margin-inline-start: 2rem;
+          }
+
+          :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
+            @include make-button-affordance;
+          }
+
+          @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+        }
+      }
+    }
+
+    // SECTION: attrs finally
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&) {
+        --picker-style: attr(picker-style type(<custom-ident>), inherit);
+      }
+    }
+  }
+}

package/scss/components/_plain-button.scss

@@ -0,0 +1,18 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='plain-button'] {
+    @extend %button;
+
+    :where(&) {
+    }
+  }
+}
+@layer #{vars.$utils-layer} {
+  [is='plain-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

package/scss/components/_progress-view.scss

@@ -0,0 +1,98 @@
+@use '../vars';
+
+// @property --progress-view-style {
+//   syntax: 'circular | linear';
+//   inherits: false;
+//   initial-value: circular;
+// }
+@property --progress-view-style-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@layer #{vars.$components-layer} {
+  progress-view {
+    :where(&) {
+      transition: --progress-view-style-index 1ms step-start;
+
+      grid-template-columns: minmax(0, 1fr);
+
+      place-items: center;
+      place-content: center;
+
+      gap: 0.3rem;
+
+      &::part(progress-line-control) {
+        background-color: var(--gray3);
+
+        inline-size: 100%;
+        block-size: 5px;
+
+        border-radius: var(--pill-border-radius);
+
+        border-left: solid 40px var(--accentColorEffective, var(--accentColor));
+      }
+
+      &::part(progress-circular-control) {
+        position: relative;
+
+        inline-size: 2rem;
+        block-size: 2rem;
+      }
+
+      &::part(progress-circular-blade) {
+        position: absolute;
+        inset: 32.5% auto auto 42.5%;
+        inline-size: 12.5%;
+        block-size: 32.5%;
+        background-color: var(--accentColorEffective, var(--secondary));
+        border-radius: var(--pill-border-radius);
+        will-change: opacity;
+        @media (prefers-reduced-motion: no-preference) {
+          animation: progressViewCircular 1s linear infinite;
+        }
+      }
+      &::part(progress-circular-blade-1) {
+        transform: rotate(45deg) translateY(-100%);
+        animation-delay: -1.625s;
+      }
+      &::part(progress-circular-blade-2) {
+        transform: rotate(90deg) translateY(-100%);
+        animation-delay: -1.5s;
+      }
+      &::part(progress-circular-blade-3) {
+        transform: rotate(135deg) translateY(-100%);
+        animation-delay: -1.375s;
+      }
+      &::part(progress-circular-blade-4) {
+        transform: rotate(180deg) translateY(-100%);
+        animation-delay: -1.25s;
+      }
+      &::part(progress-circular-blade-5) {
+        transform: rotate(225deg) translateY(-100%);
+        animation-delay: -1.125s;
+      }
+      &::part(progress-circular-blade-6) {
+        transform: rotate(270deg) translateY(-100%);
+        animation-delay: -1s;
+      }
+      &::part(progress-circular-blade-7) {
+        transform: rotate(315deg) translateY(-100%);
+        animation-delay: -0.875s;
+      }
+      &::part(progress-circular-blade-8) {
+        transform: rotate(360deg) translateY(-100%);
+        animation-delay: -0.75s;
+      }
+    }
+
+    @each $k, $v in (circular: 0, linear: 1) {
+      &[progress-view-style='#{$k}'] {
+        :where(&) {
+          --progress-view-style-index: #{$v};
+        }
+      }
+    }
+  }
+}

package/scss/components/_scroll-view-proxy.scss

@@ -0,0 +1,79 @@
+@use '../vars';
+@use '../mixins';
+@use 'sass:string';
+@use 'sass:map';
+
+@layer #{vars.$components-layer} {
+  // NOTE: A wrapper to {hv}-stack
+  scroll-view-proxy {
+    :where(&) {
+      display: contents;
+    }
+
+    &:has(> v-stack, > h-stack) {
+      > v-stack,
+      > h-stack {
+        :where(&) {
+          position: relative;
+
+          @include mixins.contain-overscroll;
+
+          scrollbar-width: thin;
+
+          container: scroll-view-proxy / inline-size;
+        }
+
+        :where(& > :not([slot])) {
+          scroll-snap-stop: normal;
+
+          scroll-snap-align: center;
+        }
+
+        :where(&[distribution='leading'] > :not([slot])) {
+          scroll-snap-align: start;
+        }
+
+        // :where(&) {
+        //   &::before {
+        //     @include mixins.span-all;
+        //     content: '';
+        //     display: inline-grid;
+        //     block-size: 1px;
+        //     inline-size: 1px;
+        //     z-index: -1;
+        //     pointer-events: none;
+        //     position: absolute;
+        //   }
+        // }
+      }
+
+      > v-stack {
+        :where(&) {
+          overflow: clip auto;
+
+          scroll-snap-type: block mandatory;
+
+          // &::before {
+          //   block-size: calc(100cqb + 1px); // creates overflow
+          // }
+        }
+      }
+
+      > h-stack {
+        :where(&) {
+          overflow: auto clip;
+
+          scroll-snap-type: inline mandatory;
+
+          // &::before {
+          //   inline-size: calc(100cqi + 1px); // creates overflow
+          // }
+        }
+
+        :where(&[padding]) {
+          scroll-padding-inline: 1rem;
+        }
+      }
+    }
+  }
+}

package/scss/components/_scroll-view-toolbars.scss

@@ -0,0 +1,126 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  scroll-view {
+    :where(&) {
+      &::part(scroll-view-navbar),
+      &::part(scroll-view-toolbar) {
+        // background-color: red;
+        position: sticky;
+        inline-size: 100%;
+
+        place-items: center;
+        place-content: center;
+        // grid-template-columns: 1fr auto 1fr;
+
+        grid-template-columns: minmax(0, 1fr);
+
+        grid-area: toolbar;
+
+        pointer-events: none;
+
+        visibility: collapse;
+      }
+    }
+  }
+
+  scroll-view:has(~ tool-bar > [slot^='top-bar']),
+  scroll-view:has(> [slot^='top-bar']) {
+    :where(&)::part(scroll-view-navbar) {
+      visibility: visible;
+    }
+  }
+
+  scroll-view:has(~ tool-bar > [slot^='bottom-bar']),
+  scroll-view:has(> [slot^='bottom-bar']) {
+    :where(&)::part(scroll-view-toolbar) {
+      visibility: visible;
+    }
+  }
+
+  scroll-view {
+    :where(&) {
+      &::part(scroll-view-navbar-stack),
+      &::part(scroll-view-toolbar-stack) {
+        grid-template-columns: 1fr auto 1fr;
+        pointer-events: all;
+
+        column-gap: var(--toolbar-col-gap);
+
+        &::before,
+        &::after {
+          content: '';
+          display: grid;
+          pointer-events: none !important;
+        }
+      }
+
+      &::part(scroll-view-navbar) {
+        top: 0;
+        block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
+        padding-block-start: var(--safe-area-inset-top);
+        transform: translateY(calc(var(--safe-area-inset-top) * -1));
+
+        @media (pointer: fine) {
+          & {
+            justify-items: start;
+          }
+        }
+
+        @include mixins.make-toolbar-pseudos(bottom);
+      }
+
+      &::part(scroll-view-toolbar) {
+        top: calc(100% - var(--tool-bar-block-size) - var(--safe-area-inset-bottom));
+
+        block-size: calc(var(--safe-area-inset-bottom) + var(--tool-bar-block-size));
+        padding-block-end: var(--safe-area-inset-bottom);
+        transform: translateY(var(--safe-area-inset-bottom));
+
+        @include mixins.make-toolbar-pseudos(top);
+      }
+
+      &::part(scroll-view-navbar-stack) {
+        @media (pointer: fine) {
+          & {
+            grid-template-columns: max-content auto 1fr;
+          }
+        }
+
+        &::before {
+          inline-size: calc(var(--navbar-padding-inline-start, 0px) + var(--navbar-safe-area-inset-left, 0px) + var(--toolbar-col-gap, 0px));
+        }
+
+        &::after {
+          inline-size: calc(var(--navbar-padding-inline-end, 0px) + var(--navbar-safe-area-inset-right, 0px) + var(--toolbar-col-gap, 0px));
+        }
+      }
+
+      &::part(scroll-view-toolbar-stack) {
+        &::before {
+          inline-size: calc(var(--toolbar-padding-inline-start) + var(--toolbar-safe-area-inset-left, 0px) + var(--toolbar-col-gap, 0px));
+        }
+
+        &::after {
+          inline-size: calc(var(--toolbar-padding-inline-end) + var(--toolbar-safe-area-inset-right, 0px) + var(--toolbar-col-gap, 0px));
+        }
+      }
+    }
+
+    // force measurer to take into account possible sidebar toggles
+    // &:not(dialog &) {
+    //   :where(&) {
+    //     &::part(#{vars.$scroll-view-navbar-stack-part-name}) {
+    //       &::before {
+    //         inline-size: calc(var(--navbar-padding-inline-start, 0px) + var(#{vars.$sidebar-toggle-padding-inline-start-css-prop}, 0px));
+    //         // width: calc(
+    //         //   var(--navbar-padding-inline-start, 0px) + var(#{vars.$sidebar-toggle-padding-inline-start-css-prop}, 0px) +
+    //         //     max(var(--safe-area-inset-left), var(--sidebar-spacing, 0px))
+    //         // );
+    //       }
+    //     }
+    //   }
+    // }
+  }
+}

package/scss/components/_scroll-view.scss

@@ -2,78 +2,126 @@
 @use '../mixins';
 
 @layer #{vars.$components-layer} {
-  // [is='sidebar-view'] {
-  //   @include mixins.reset-dialog;
-
-  //   // dowh
-  //   overflow: clip;
-  //   width: 100%;
-  //   height: 100%;
-  //   position: static;
-  // }
-
-  // v-stack,
-  // tab-bar-stack {
-  scroll-view:has(> tool-bar[slot='navigation-bar']) > *:not([slot]) {
-    margin-block-start: var(--navigation-bar-height);
-  }
+  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);
+        }
 
-  scroll-view:has(> tool-bar[slot='bottom-bar']) > *:not([slot]) {
-    margin-block-end: var(--tool-bar-height);
-  }
-  // }
-
-  navigation-stack > scroll-view,
-  navigation-split-view > scroll-view,
-  navigation-split-view > [is='sidebar-view'] > scroll-view,
-  body-view > scroll-view,
-  [is='full-screen'] > scroll-view,
-  [is='sheet-view'] > scroll-view {
-    box-shadow: inset 0 0 0 2px cyan;
-
-    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);
-    container: scroll-view / inline-size;
-    background-color: var(--canvas-bg);
-    // place-items: center;
-    //
-
-    padding-inline: var(--safe-area-inset-left) var(--safe-area-inset-right);
-
-    // grid-auto-rows: minmax(0, max-content);
-    // grid-template-rows: 100% 1px;
-    @include mixins.make-scrollable;
-
-    // @include mixins.make-navbar;
-
-    // &:has(> tool-bar[slot='navigation-bar']) {
-    //   margin-top: var(--navigation-bar-height);
-    // }
-
-    // &:has(> tool-bar[slot='bottom-bar']) {
-    //   margin-bottom: var(--tool-bar-height);
-    // }
-  }
+        :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;
 
-  // navigation-split-view scroll-view {
-  //   margin-inline-start: 400px;
-  // }
+        // grid-auto-rows: minmax(0, max-content);
+        // grid-template-rows: 100% 1px;
+        @include mixins.make-scrollable;
 
-  // navigation-split-view > scroll-view {
-  //   width: 400px;
-  //   margin-inline-start: 0;
-  //   transform: none !important;
-  // }
+        &::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'] {
-      scroll-view {
+      :where(& scroll-view:not(scroll-view scroll-view)) {
         --safe-area-inset-top: 0px;
         --safe-area-inset-right: 0px;
         --safe-area-inset-bottom: 0px;

package/scss/components/_search-view.scss

@@ -0,0 +1,18 @@
+@use '../vars';
+@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;
+    }
+  }
+}