@swiftwc/ui 0.0.0-dev.66 → 0.0.0-dev.68

package/scss/components/_menu-view.scss

@@ -5,74 +5,76 @@
 
 @layer #{vars.$components-layer} {
   menu-view {
-    :where(&)::part(menu-summary) {
-      transform: var(--menu--summary-scale,);
+    :where(&) {
+      &::part(menu-summary) {
+        transform: var(--menu--summary-scale,);
 
-      filter: var(--menu--summary-filter,);
-    }
+        filter: var(--menu--summary-filter,);
+      }
 
-    :where(&)::part(menu-scrollable) {
-      @include mixins.make-scrollable(true);
+      &::part(menu-scrollable) {
+        @include mixins.make-scrollable(true);
 
-      padding: var(--menu-padding);
-    }
+        padding: var(--menu-padding);
+      }
 
-    :where(&)::part(menu-form) {
-      // min-inline-size: 200px; // FIXME: del this
-      inline-size: max-content; //var(--menu-inline-size);
-      block-size: min-content;
+      &::part(menu-form) {
+        // min-inline-size: 200px; // FIXME: del this
+        inline-size: max-content; //var(--menu-inline-size);
+        block-size: min-content;
 
-      max-inline-size: var(--menu-max-inline-size,);
-      max-block-size: var(--menu-max-block-size,);
+        max-inline-size: var(--menu-max-inline-size,);
+        max-block-size: var(--menu-max-block-size,);
 
-      overflow: clip auto;
-      border-radius: inherit;
+        overflow: clip auto;
+        border-radius: inherit;
 
-      background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
-      // border: transparent solid 20px; //make sure bezel is not covered
+        background-color: light-dark(var(--menu-bg), var(--menu-bg-dark));
+        // border: transparent solid 20px; //make sure bezel is not covered
 
-      @include mixins.make-scrollable;
-      @include mixins.contain-overscroll;
+        @include mixins.make-scrollable;
+        @include mixins.contain-overscroll;
 
-      // touch-action: all;
+        // touch-action: all;
 
-      --menu--dialog-max-inline-size: anchor-size();
-      --menu--dialog-max-block-size: anchor-size();
-    }
+        --menu--dialog-max-inline-size: anchor-size();
+        --menu--dialog-max-block-size: anchor-size();
+      }
 
-    :where(&)::part(menu-dialog) {
-      @include mixins.reset-dialog;
+      &::part(menu-dialog) {
+        @include mixins.reset-dialog;
 
-      color: var(--text,);
+        color: var(--text,);
 
-      touch-action: none;
+        touch-action: none;
 
-      position: fixed;
+        position: fixed;
 
-      inline-size: fit-content;
-      block-size: fit-content;
-      height: auto; // safari
-      max-inline-size: var(--menu--dialog-max-inline-size,);
-      max-block-size: var(--menu--dialog-max-block-size,);
+        inline-size: fit-content;
+        block-size: fit-content;
+        height: auto; // safari
+        max-inline-size: var(--menu--dialog-max-inline-size,);
+        max-block-size: var(--menu--dialog-max-block-size,);
 
-      margin-block: var(--menu--dialog-margin-block,);
-      margin-inline: var(--menu--dialog-margin-inline,);
+        margin-block: var(--menu--dialog-margin-block,);
+        margin-inline: var(--menu--dialog-margin-inline,);
 
-      transform: var(--menu--dialog-scale,);
+        transform: var(--menu--dialog-scale,);
 
-      // position-anchor: --my-anchor; // overriden
-      position-area: center;
+        // position-anchor: --my-anchor; // overriden
+        position-area: center;
 
-      overflow: clip;
-      border-radius: calc(var(--menu-item-border-radius) + var(--menu-padding));
+        overflow: clip;
+        border-radius: calc(var(--menu-item-border-radius) + var(--menu-padding));
 
-      backdrop-filter: var(--liquid-glass-backdrop-filter,);
-      box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
+        backdrop-filter: var(--liquid-glass-backdrop-filter,);
+        box-shadow: var(--menu-popover-box-shadow,); //0 0 10px 10px black;
 
-      // finally
-      --menu--dialog-scale: scale(0);
-      --menu--summary-scale: ;
-      --menu--summary-filter: ;
+        // finally
+        --menu--dialog-scale: scale(0);
+        --menu--summary-scale: ;
+        --menu--summary-filter: ;
+      }
     }
 
     &[open] {
@@ -104,9 +106,11 @@
     // &[open] > &[open],
     // &[open]:not(tool-bar-item &) {
     &[open]:not(tool-bar-item > &) {
-      --menu--summary-scale: scale(0.01);
+      :where(&) {
+        --menu--summary-scale: scale(0.01);
 
-      --menu--summary-filter: blur(10px);
+        --menu--summary-filter: blur(10px);
+      }
     }
 
     // :where(& > *) {

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) {