@swiftwc/ui 0.0.0-dev.65 → 0.0.0-dev.67

package/scss/components/_picker-view.scss

@@ -110,66 +110,65 @@ $picker-ifs: (
       border-radius: var(--picker--stack-grid-border-radius,);
       border: var(--picker--stack-grid-border,);
       color: var(--picker--stack-grid-color,);
-    }
 
-    // > :not([slot]) {
-    //   :where(&) {
-    //     place-self: var(--picker--input-stack-child-place-self,);
-    //   }
-    // }
+      &::part(picker-stack) {
+        // grid-auto-flow: column;
+        grid-template-columns: var(--picker--stack-grid-template-columns,); //minmax(30%, 1fr) auto;
 
-    :where(&)::part(picker-stack) {
-      // grid-auto-flow: column;
-      grid-template-columns: var(--picker--stack-grid-template-columns,); //minmax(30%, 1fr) auto;
+        grid-template-rows: var(--picker--stack-grid-template-rows,); //minmax(0, 1fr);
+        row-gap: var(--picker--stack-row-gap,);
 
-      grid-template-rows: var(--picker--stack-grid-template-rows,); //minmax(0, 1fr);
-      row-gap: var(--picker--stack-row-gap,);
+        column-gap: var(--picker--stack-column-gap,);
 
-      column-gap: var(--picker--stack-column-gap,);
+        // display: var(--picker--stack-display,);
 
-      // display: var(--picker--stack-display,);
+        // flex-wrap: var(--picker--stack-flex-wrap,);
 
-      // flex-wrap: var(--picker--stack-flex-wrap,);
+        // justify-content: var(--picker--stack-justify-content,);
 
-      // justify-content: var(--picker--stack-justify-content,);
+        // grid-template-columns: var(--picker--stack-grid-template-columns,);
 
-      // grid-template-columns: var(--picker--stack-grid-template-columns,);
+        // grid-template-rows: minmax(0, 1fr);
 
-      // grid-template-rows: minmax(0, 1fr);
+        // column-gap: 1rem;
 
-      // column-gap: 1rem;
-
-      // // wire these to mimic componentize
-      // padding-inline: var(--picker--stack-grid-padding-inline,);
-      // padding-block: var(--picker--stack-grid-padding-block,);
-      // background: var(--picker--stack-grid-background,);
-      // border-radius: var(--picker--stack-grid-border-radius,);
-      // border: var(--picker--stack-grid-border,);
-      // color: var(--picker--stack-grid-color,);
-    }
+        // // wire these to mimic componentize
+        // padding-inline: var(--picker--stack-grid-padding-inline,);
+        // padding-block: var(--picker--stack-grid-padding-block,);
+        // background: var(--picker--stack-grid-background,);
+        // border-radius: var(--picker--stack-grid-border-radius,);
+        // border: var(--picker--stack-grid-border,);
+        // color: var(--picker--stack-grid-color,);
+      }
 
-    :where(&)::part(picker-input-stack) {
-      text-align: var(--picker--input-stack-text-align,);
-      // flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
+      &::part(picker-input-stack) {
+        text-align: var(--picker--input-stack-text-align,);
+        // flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
 
-      // max-width: var(--picker--input-stack-max-width,); //70%;
-    }
+        // max-width: var(--picker--input-stack-max-width,); //70%;
+      }
 
-    :where(&)::part(picker-label-stack) {
-      display: var(--picker--labelstack-display, none); // display: none;
+      &::part(picker-label-stack) {
+        display: var(--picker--labelstack-display, none); // display: none;
 
-      color: var(--secondary);
+        color: var(--secondary);
 
-      --label-truncation-mode: tail;
+        --label-truncation-mode: tail;
 
-      --label-line-limit: 1;
-    }
+        --label-line-limit: 1;
+      }
 
-    :where(&) {
       --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
 
       --picker--stack-grid-template-rows: minmax(0, 1fr);
     }
+
+    // > :not([slot]) {
+    //   :where(&) {
+    //     place-self: var(--picker--input-stack-child-place-self,);
+    //   }
+    // }
+
     // :where(&) {
     // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
     // @include mixins.write-props($picker-elses); NOT Needed for now since all defaults/fallbacks are already the elses

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

@@ -16,8 +16,6 @@
         :where(&) {
           position: relative;
 
-          @include mixins.contain-overscroll;
-
           scrollbar-width: thin;
 
           container: scroll-view-proxy / inline-size;
@@ -53,6 +51,8 @@
 
           scroll-snap-type: block mandatory;
 
+          @include mixins.contain-overscroll(block);
+
           // &::before {
           //   block-size: calc(100cqb + 1px); // creates overflow
           // }
@@ -65,6 +65,8 @@
 
           scroll-snap-type: inline mandatory;
 
+          @include mixins.contain-overscroll(inline);
+
           // &::before {
           //   inline-size: calc(100cqi + 1px); // creates overflow
           // }

package/scss/components/_section-view.scss

@@ -13,6 +13,29 @@
       // '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']))) {
@@ -42,24 +65,6 @@
       display: none;
     }
 
-    :where(&)::part(section-header-stack),
-    :where(&)::part(section-footer-stack) {
-      pointer-events: none;
-      //   outline: solid magenta 4px;
-      //   padding-block: 10px;
-    }
-
-    :where(&)::part(section-header-stack) {
-      grid-area: header;
-    }
-
-    :where(&)::part(section-main-stack) {
-      grid-area: main;
-    }
-
-    :where(&)::part(section-footer-stack) {
-      grid-area: footer;
-    }
     // :where(& > *) {
     //   display: grid;
     // }
@@ -68,10 +73,6 @@
     //   margin-bottom: 3rem;
     // }
 
-    :where(&)::part(section-header-stack) {
-      order: -1;
-    }
-
     // :where(&:not(& &))::part(section-header-stack) {
     // :where(&)::part(section-header-stack) {
     // display: var(--section--headerstack-display, grid);

package/scss/components/_table-view.scss

@@ -92,12 +92,12 @@ $table-elses: (
           border-top: 1px solid var(--separator);
         }
 
-        :where(&)::part(table-header-leading-stack),
-        :where(&)::part(table-header-principal-stack),
-        :where(&)::part(table-header-trailing-stack),
-        :where(&)::part(table-footer-leading-stack),
-        :where(&)::part(table-footer-principal-stack),
-        :where(&)::part(table-footer-trailing-stack) {
+        &::part(table-header-leading-stack),
+        &::part(table-header-principal-stack),
+        &::part(table-header-trailing-stack),
+        &::part(table-footer-leading-stack),
+        &::part(table-footer-principal-stack),
+        &::part(table-footer-trailing-stack) {
           grid-auto-flow: column;
           grid-template-columns: minmax(0, 1fr);
 

package/scss/components/_text-field.scss

@@ -9,49 +9,49 @@
 
       // padding-inline: var(--toolbaritempadistart,) var(--toolbaritempadiend,);
       // padding-block: var(--toolbaritempadbstart,) var(--toolbaritempadbend,);
-    }
 
-    :where(&)::part(text-field-stack) {
-      // display: grid;
+      &::part(text-field-stack) {
+        // display: grid;
 
-      grid-template-columns: auto minmax(0, 1fr);
+        grid-template-columns: auto minmax(0, 1fr);
 
-      grid-template-rows: minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr);
 
-      column-gap: var(--labeled-content-column-gap);
-    }
+        column-gap: var(--labeled-content-column-gap);
+      }
 
-    :where(&)::part(text-field-label-stack) {
-      // display: grid;
+      &::part(text-field-label-stack) {
+        // display: grid;
 
-      color: var(--secondary);
-    }
+        color: var(--secondary);
+      }
 
-    :where(&)::part(text-field-input-stack) {
-      // display: grid;
+      &::part(text-field-input-stack) {
+        // display: grid;
 
-      place-items: stretch;
-      place-content: stretch;
-    }
+        place-items: stretch;
+        place-content: stretch;
+      }
 
-    :where(&)::part(text-field-form-input) {
-      // display: grid;
+      &::part(text-field-form-input) {
+        // display: grid;
 
-      text-align: end;
+        text-align: end;
 
-      appearance: none;
+        appearance: none;
 
-      border: 0;
+        border: 0;
 
-      outline: 0;
+        outline: 0;
 
-      padding: 0;
+        padding: 0;
 
-      // padding-block: 0.1rem;
+        // padding-block: 0.1rem;
 
-      // padding-inline: 0.3rem;
+        // padding-inline: 0.3rem;
 
-      background-color: transparent;
+        background-color: transparent;
+      }
     }
   }
 }

package/scss/components/_toggle-view.scss

@@ -0,0 +1,79 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  toggle-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+
+      grid-template-rows: minmax(0, 1fr);
+
+      --toggle--trigger-bg: lightgray;
+
+      &::part(toggle-stack) {
+        grid-template-columns: auto minmax(0, 1fr);
+
+        grid-template-rows: minmax(0, 1fr);
+
+        column-gap: var(--labeled-content-column-gap);
+      }
+
+      &::part(toggle-label-stack) {
+        color: var(--secondary);
+      }
+
+      &::part(toggle-input-stack) {
+        place-items: stretch;
+
+        place-content: stretch;
+      }
+
+      &::part(toggle-form-input):focus {
+        outline: blue solid 5px;
+      }
+
+      &::part(toggle-form-input) {
+        text-align: end;
+
+        position: relative;
+
+        display: grid;
+        outline: red solid 3px;
+        border-radius: 2rem;
+        inline-size: 4rem;
+        block-size: 1rem;
+        background: var(--toggle--trigger-bg);
+
+        // appearance: none;
+
+        // border: 0;
+
+        // outline: 0;
+
+        // padding: 0;
+
+        // background-color: transparent;
+      }
+
+      &::part(toggle-form-input)::before {
+        content: '';
+
+        display: grid;
+
+        position: absolute;
+        inset: 0 auto auto 0;
+        inline-size: 1rem;
+        block-size: 1rem;
+        border-radius: 1rem;
+        // background: yellow;
+
+        backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+        box-shadow: var(--liquid-glass-box-shadow);
+      }
+    }
+
+    &[aria-checked='true'] {
+      --toggle--trigger-bg: green;
+    }
+  }
+}

package/scss/components/_tool-bar.scss

@@ -16,80 +16,80 @@
         'top-bar'
         'spacer'
         'bottom-bar';
-    }
 
-    :where(& > *:not(sidebar-toggle), & > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
-      backdrop-filter: var(--liquid-glass-backdrop-filter);
-      box-shadow: var(--toolbar-cell-box-shadow);
+      &::part(top-bar),
+      &::part(bottom-bar) {
+        position: relative; // SAFARI BUG
 
-      min-inline-size: var(--toolbar-cell-min-size);
+        padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
+        pointer-events: none;
 
-      // tfo
-      transform: var(--toolbar-cell-scale,);
-      filter: var(--toolbar-cell-filter,);
-      opacity: var(--toolbar-cell-opacity,);
+        grid-template-columns: auto 1fr auto;
+        column-gap: var(--toolbar-col-gap);
+        // grid-auto-rows: 40px;
 
-      // min-width: calc(var(--tool-bar-block-size) - var(--toolbar-cell-block-padding-start) - var(--toolbar-cell-block-padding-end));
-    }
+        grid-template-rows: var(--toolbar-cell-min-size);
 
-    :where(&)::part(top-bar),
-    :where(&)::part(bottom-bar) {
-      position: relative; // SAFARI BUG
+        // place-items: center;
+        place-content: center; // middle of y axis
+      }
 
-      padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
-      pointer-events: none;
+      &::part(top-bar) {
+        // padding-inline: calc(
+        //     var(--safe-area-inset-left, 0px) + var(--navbar-area-inset-left, 0px)
+        //   )
+        //   calc(
+        //     var(--safe-area-inset-right, 0px) + var(--navbar-area-inset-right, 0px)
+        //   );
 
-      grid-template-columns: auto 1fr auto;
-      column-gap: var(--toolbar-col-gap);
-      // grid-auto-rows: 40px;
+        grid-area: top-bar;
 
-      grid-template-rows: var(--toolbar-cell-min-size);
+        block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
 
-      // place-items: center;
-      place-content: center; // middle of y axis
-    }
+        padding-block-start: var(--safe-area-inset-top);
+      }
 
-    :where(&)::part(top-bar) {
-      // padding-inline: calc(
-      //     var(--safe-area-inset-left, 0px) + var(--navbar-area-inset-left, 0px)
-      //   )
-      //   calc(
-      //     var(--safe-area-inset-right, 0px) + var(--navbar-area-inset-right, 0px)
-      //   );
+      &::part(bottom-bar) {
+        // padding-inline: calc(
+        //     var(--safe-area-inset-left, 0px) + var(--toolbar-area-inset-left, 0px)
+        //   )
+        //   calc(
+        //     var(--safe-area-inset-right, 0px) + var(--toolbar-area-inset-right, 0px)
+        //   );
 
-      grid-area: top-bar;
+        grid-area: bottom-bar;
 
-      block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
+        block-size: calc(var(--safe-area-inset-bottom) + var(--tool-bar-block-size));
 
-      padding-block-start: var(--safe-area-inset-top);
-    }
+        padding-block-end: var(--safe-area-inset-bottom);
+      }
 
-    :where(&)::part(bottom-bar) {
-      // padding-inline: calc(
-      //     var(--safe-area-inset-left, 0px) + var(--toolbar-area-inset-left, 0px)
-      //   )
-      //   calc(
-      //     var(--safe-area-inset-right, 0px) + var(--toolbar-area-inset-right, 0px)
-      //   );
+      &::part(toolbar-leading-stack),
+      &::part(toolbar-principal-stack),
+      &::part(toolbar-trailing-stack) {
+        display: grid;
 
-      grid-area: bottom-bar;
+        grid-auto-flow: column;
+        grid-template-columns: minmax(0, 1fr);
 
-      block-size: calc(var(--safe-area-inset-bottom) + var(--tool-bar-block-size));
+        column-gap: var(--toolbar-col-gap);
 
-      padding-block-end: var(--safe-area-inset-bottom);
+        padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
+      }
     }
 
-    :where(&)::part(toolbar-leading-stack),
-    :where(&)::part(toolbar-principal-stack),
-    :where(&)::part(toolbar-trailing-stack) {
-      display: grid;
+    :where(& > *:not(sidebar-toggle), & > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+      box-shadow: var(--toolbar-cell-box-shadow);
 
-      grid-auto-flow: column;
-      grid-template-columns: minmax(0, 1fr);
+      min-inline-size: var(--toolbar-cell-min-size);
 
-      column-gap: var(--toolbar-col-gap);
+      // tfo
+      transform: var(--toolbar-cell-scale,);
+      filter: var(--toolbar-cell-filter,);
+      opacity: var(--toolbar-cell-opacity,);
 
-      padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
+      // min-width: calc(var(--tool-bar-block-size) - var(--toolbar-cell-block-padding-start) - var(--toolbar-cell-block-padding-end));
     }
 
     @include mixins.if-ipad-sheet-fits {

package/scss/mixins/_index.scss

@@ -111,9 +111,16 @@
   }
 }
 
-@mixin contain-overscroll() {
-  overscroll-behavior: contain;
+@mixin contain-overscroll($axis: both) {
   -webkit-overflow-scrolling: touch;
+
+  @if $axis == inline {
+    overscroll-behavior-inline: contain;
+  } @else if $axis == block {
+    overscroll-behavior-block: contain;
+  } @else {
+    overscroll-behavior: contain;
+  }
 }
 
 @mixin make-toolbar-pseudos($dir: bottom) {
@@ -208,6 +215,7 @@
   --red: var(--#{$prefix}text);
   --green: var(--#{$prefix}text);
   --orange: var(--#{$prefix}text);
+  --purple: var(--#{$prefix}text);
 
   // NOTE: breaks list-item-tints
   --accentColor: var(--#{$prefix}text);

package/scss/placeholders/_lists.scss

@@ -352,24 +352,26 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
 
     // SECTION: style section heders/footers
     section-view:not(section-view section-view, menu-view *) {
-      :where(&)::part(section-footer-stack),
-      :where(&)::part(section-header-stack) {
-        // outline: magenta 4px solid;
-        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px)) calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
+      :where(&) {
+        &::part(section-footer-stack),
+        &::part(section-header-stack) {
+          // outline: magenta 4px solid;
+          padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px)) calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
 
-        margin-inline: calc(var(--list--root-padding-inline) * -1);
+          margin-inline: calc(var(--list--root-padding-inline) * -1);
 
-        padding-block: 1px;
-      }
+          padding-block: 1px;
+        }
 
-      :where(&)::part(section-header-stack) {
-        top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+        &::part(section-header-stack) {
+          top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
 
-        position: sticky;
+          position: sticky;
 
-        // backdrop-filter: blur(20px);
+          // backdrop-filter: blur(20px);
 
-        // text-shadow: 0 0 5px var(--face);
+          // text-shadow: 0 0 5px var(--face);
+        }
       }
     }
 

package/scss/transitions/_menu-view.scss

@@ -4,22 +4,24 @@
 @layer #{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     menu-view {
-      :where(&)::part(menu-summary) {
-        transition:
-          transform var(--touchglass-transition-duration) allow-discrete ease-out,
-          filter var(--touchglass-transition-duration) allow-discrete ease-out;
-        will-change: transform;
-      }
+      :where(&) {
+        &::part(menu-summary) {
+          transition:
+            transform var(--touchglass-transition-duration) allow-discrete ease-out,
+            filter var(--touchglass-transition-duration) allow-discrete ease-out;
+          will-change: transform;
+        }
 
-      :where(&)::part(menu-dialog) {
-        // transition:
-        //   block-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   display var(--menu-animation-duration) allow-discrete ease-out,
-        //   overlay var(--menu-animation-duration) allow-discrete ease-out,
-        //   transform var(--menu-animation-duration) allow-discrete ease-out;
-        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
-        // will-change: block-size, inline-size, transform, overlay, display;
+        &::part(menu-dialog) {
+          // transition:
+          //   block-size var(--menu-animation-duration) allow-discrete ease-out,
+          //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
+          //   display var(--menu-animation-duration) allow-discrete ease-out,
+          //   overlay var(--menu-animation-duration) allow-discrete ease-out,
+          //   transform var(--menu-animation-duration) allow-discrete ease-out;
+          transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+          // will-change: block-size, inline-size, transform, overlay, display;
+        }
       }
     }
   }

package/scss/utils/_index.scss

@@ -33,22 +33,27 @@
         red: --red,
         green: --green,
         orange: --orange,
+        purple: --purple,
         'blue.secondary': --blue2,
         'red.secondary': --red2,
         'green.secondary': --green2,
         'orange.secondary': --orange2,
+        'purple.secondary': --purple2,
         'blue.tertiary': --blue3,
         'red.tertiary': --red3,
         'green.tertiary': --green3,
         'orange.tertiary': --orange3,
+        'purple.tertiary': --purple3,
         'blue.quaternary': --blue4,
         'red.quaternary': --red4,
         'green.quaternary': --green4,
         'orange.quaternary': --orange4,
+        'purple.quaternary': --purple4,
         'blue.quinary': --blue5,
         'red.quinary': --red5,
         'green.quinary': --green5,
-        'orange.quinary': --orange5
+        'orange.quinary': --orange5,
+        'purple.quinary': --purple5
       )
   {
     :where([foreground='#{"" + $k}']) {