@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/scss/components/_toggle-view.scss

@@ -0,0 +1,171 @@
+@use 'sass:string';
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$components-layer} {
+  toggle-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
+
+      grid-template-rows: minmax(0, 1fr);
+
+      --toggle--track-padding: 0.2rem;
+      --toggle--track-bg: var(--toggle--track-off-bg);
+
+      --toggle--track-inline-size: var(--toggle-inline-size);
+
+      --toggle--dot-size: var(--toggle-block-size);
+
+      --toggle--dot-inset-inline-start: 0;
+      --toggle--dot-inset-inline-end: 100%;
+
+      --toggle--dot-translate-x: 0px;
+
+      --toggle--dot-transition-duration: 200ms;
+      --toggle--dot-scale: scale(1);
+
+      // --toggle--track-brightness: brightness(1);
+
+      &::part(toggle-stack) {
+        grid-template-columns: minmax(0, 1fr) auto;
+
+        grid-template-rows: minmax(0, 1fr);
+
+        column-gap: var(--labeled-content-column-gap);
+      }
+
+      // &::part(toggle-label-stack) {
+      //   // color: var(--secondary);
+      //   padding-inline-start: var(--toggle-padding-inline-start,);
+      // }
+
+      &::part(toggle-input-stack) {
+        // place-items: end;
+        align-items: center;
+        justify-items: end;
+
+        place-content: stretch;
+        align-self: flex-start;
+
+        cursor: pointer;
+
+        padding-inline: var(--toggle--track-padding);
+        padding-block: var(--toggle--track-padding);
+        border-radius: var(--toggle-border-radius);
+        background: var(--toggle--track-bg);
+
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
+      }
+
+      &::part(toggle-track) {
+        container: toggle-track / size;
+
+        text-align: end;
+
+        position: relative;
+
+        outline: none;
+
+        border-radius: var(--pill-border-radius);
+
+        inline-size: var(--toggle--track-inline-size);
+        block-size: var(--toggle--dot-size);
+
+        touch-action: none; // prevent scrolling while dragging
+
+        transition: background-color var(--toggle--dot-transition-duration) ease-out;
+
+        &:focus {
+          --toggle--dot-bg: light-dark(var(--toggle-dot-focus-bg), var(--toggle-dot-focus-bg-dark));
+
+          // outline: black solid 2px;
+          // outline-offset: 4px;
+          // --toggle--track-bg: gray;
+          // --toggle--track-brightness: brightness(0.9);
+        }
+        &:active {
+          --toggle--dot-bg: light-dark(var(--toggle-dot-active-bg), var(--toggle-dot-active-bg-dark));
+        }
+
+        &::before {
+          content: '';
+
+          display: grid;
+
+          position: absolute;
+
+          inset: 0 var(--toggle--dot-inset-inline-end) auto var(--toggle--dot-inset-inline-start);
+
+          inline-size: var(--toggle--dot-size);
+          block-size: var(--toggle--dot-size);
+
+          border-radius: var(--toggle-border-radius);
+
+          backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+          box-shadow: var(--toggle-dot-box-shadow);
+
+          background: var(--toggle--dot-bg);
+
+          transition:
+            inset-inline-start var(--toggle--dot-transition-duration) ease-out,
+            inset-inline-end var(--toggle--dot-transition-duration) ease-out,
+            transform var(--toggle--dot-transition-duration) ease-out,
+            scale var(--toggle--dot-press-duration, 200ms) ease-out;
+
+          transform: translateX(var(--toggle--dot-translate-x));
+          scale: var(--toggle--dot-scale,);
+
+          transform-origin: center;
+        }
+      }
+    }
+
+    form & {
+      :where(&)::part(toggle-label-stack) {
+        color: var(--secondary);
+      }
+    }
+
+    &[aria-checked='true'] {
+      :where(&) {
+        --toggle--track-bg: var(--toggle--track-on-bg);
+
+        --toggle--dot-inset-inline-start: calc(100% - var(--toggle--dot-size));
+        --toggle--dot-inset-inline-end: 0;
+
+        &::window-inactive {
+          --toggle--track-bg: var(--toggle--track-off-bg);
+        }
+      }
+
+      &[js-window-inactive] {
+        :where(&) {
+          --toggle--track-bg: var(--toggle--track-off-bg);
+        }
+      }
+    }
+
+    > :nth-child(n + 2 of [slot='label']) {
+      :where(&) {
+        --label-font: callout;
+
+        @supports not (x: #{string.unquote('if(else:red)')}) {
+          @include mixins.set-label-font(callout);
+        }
+
+        // toggle-view:not(form toggle-view) & {
+        //   color: var(--secondary);
+        // }
+      }
+    }
+
+    &:not(form &) {
+      > :nth-child(n + 2 of [slot='label']) {
+        :where(&) {
+          color: var(--secondary);
+        }
+      }
+    }
+  }
+}

package/scss/components/_tool-bar-item.scss

@@ -29,15 +29,20 @@
       --toolbaritemradiusbl: var(--toolbar-cell-border-radius);
       --toolbaritemradiusbr: var(--toolbar-cell-border-radius);
       --toolbaritemborder: 0;
+
+      --menusummaryradiustl: var(--toolbar-cell-border-radius);
+      --menusummaryradiustr: var(--toolbar-cell-border-radius);
+      --menusummaryradiusbl: var(--toolbar-cell-border-radius);
+      --menusummaryradiusbr: var(--toolbar-cell-border-radius);
+      --menusummaryborder: 0;
     }
 
     :where(&:has([disabled])) {
       pointer-events: none;
     }
-  }
 
-  // NOTE: MUST be right-after the above `all: unset` in this SAME page!
-  tool-bar-item {
+    // NOTE: MUST be right-after the above `all: unset` in this SAME page!
+
     :where(& > button),
     :where(& > picker-view > menu-view)::part(menu-summary),
     :where(& > menu-view)::part(menu-summary) {
@@ -45,98 +50,45 @@
 
       place-content: center;
     }
-  }
 
-  // tool-bar-item[slot],
-  // tool-bar-item-group {
-  // @media (prefers-reduced-motion: no-preference) {
-  //   transition:
-  //     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;
-  //   will-change: transform, overlay, display;
-  // }
-  // }
-
-  // tool-bar-item {
-  // min-height: var(--toolbar-cell-min-size);
-  // min-width: var(--toolbar-cell-min-size);
-  // }
-}
+    > button {
+      @include mixins.takeover-button-slots;
 
-@layer #{vars.$colors-layer} {
-  // sidebar-toggle > button,
-  // tool-bar-item > button,
-  // tool-bar-item > input,
-  // [is='tab-item'],
-  // // list-view > button,
-  // menu-view > button,
-  // [is='disclosure-group'] > button,
-  // [is='disclosure-group'] > summary {
-  //   &:not(:disabled):not([readonly]) {
-  //     :where(&) {
-  //       @include mixins.add-focus-visible-state {
-  //         --toolbaritemface: light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
-  //       }
-  //     }
-  //   }
-  // }
-
-  menu-view {
-    @include mixins.add-focus-visible-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+      // [tint] &,
+      // &[tint] {
+      //   :where(&) {
+      //     // NOTE: Make everything inside prominent buttons white
+      //     --secondary: var(--btntext);
+      //     --blue: var(--btntext);
+
+      //     --accentColorEffective: var(--btntext);
+      //     --accentColor: var(--btntext);
+      //   }
+      // }
     }
-    @include mixins.add-hover-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemhighlightface,); //light-dark(var(--toolbar-cell-focus-bg), var(--toolbar-cell-focus-bg-dark));
+
+    // NOTE: add paddings to labels w/ text in toolbar items
+    > button:has(> label-view > :not([slot])),
+    > picker-view > menu-view:has(> label-view > :not([slot])),
+    > menu-view:has(> label-view > :not([slot])) {
+      :where(& > label-view) {
+        --label-padding-inline: 0.5rem;
+      }
     }
 
-    // &:not(:disabled):not([readonly]) {
-    //   > button {
+    // NOTE: on fine screens, toolbar icons are a little smaller
+    // @media (pointer: fine) {
+    //   > button > label-view,
+    //   > menu-view > label-view {
     //     :where(&) {
-    //       --toolbaritempadistart: 0.3rem;
-    //       --toolbaritempadiend: 0.3rem;
-    //       --toolbaritempadbstart: 0.3rem;
-    //       --toolbaritempadbend: 0.3rem;
+    //       --label-image-size: 1.8;
     //     }
     //   }
     // }
   }
-
-  // list-view > button,
-  // [is='form-view'] > button {
-  //   &:not(:disabled):not([readonly]) {
-  //     :where(&) {
-  //       --toolbaritempadistart: 0.3rem;
-  //       --toolbaritempadbstart: 0.3rem;
-  //     }
-  //   }
-  // }
 }
 
 @layer #{vars.$ui-layer} {
-  // sidebar-toggle > button,
-  // tool-bar-item > button,
-  // tool-bar-item > input,
-  // [is='tab-item'],
-  // // list-view > button,
-  // menu-view > button,
-  // [is='disclosure-group'] > summary,
-  // [is='disclosure-group'] > button {
-  //   // &:not(:disabled):not([readonly]) {
-  //   //   :where(&) {
-  //   @include mixins.add-active-state {
-  //     --toolbaritemface: light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-  //   }
-  //   //   }
-  //   // }
-  // }
-
-  menu-view {
-    @include mixins.add-active-state('::part(menu-summary)') {
-      --toolbaritemface: var(--toolbaritemactiveface,); //light-dark(var(--toolbar-cell-active-bg), var(--toolbar-cell-active-bg-dark));
-    }
-  }
-
   :where(tool-bar-item[slot]:has(menu-view[open])),
   :where(tool-bar-item-group:has(> tool-bar-item menu-view[open])) {
     --toolbar-cell-scale: var(--menu-host-offscreen-transform);

package/scss/components/_tool-bar.scss

@@ -16,85 +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 {
@@ -113,6 +108,31 @@
         --safe-area-inset-bottom: 0px;
       }
     }
+
+    // FIXME: Add live tooltip
+    // NOTE: By default top bar items with icons, prefer only icon to be shown, (except if they define/force w/ labelStyle)
+    > [slot^='top-bar-'],
+    > [slot='cancellation-action'],
+    > [slot='primary-action'],
+    > [slot='confirmation-action'],
+    > [slot='destructive-action'] {
+      // > label-view,
+      > button:has(> label-view > [slot='icon']) {
+        :where(&) {
+          --label-style: icon-only;
+        }
+      }
+    }
+    // NOTE: By default bottom bar items with icons on iphone, prefer only icon to be shown, (except if they define/force w/ labelStyle)
+    @media (pointer: coarse) {
+      > [slot^='bottom-bar-'] {
+        > button:has(> label-view > [slot='icon']) {
+          :where(&) {
+            --label-style: icon-only;
+          }
+        }
+      }
+    }
   }
 }
 

package/scss/components/_v-stack.scss

@@ -1,12 +1,16 @@
+@use 'sass:string';
+@use 'sass:list';
 @use '../vars';
+@use '../maps';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   v-stack {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
 
-      place-items: center;
-      place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
       gap: 1rem;
     }
@@ -14,5 +18,7 @@
     // :where(& > *) {
     // max-width: 100%;
     // }
+
+    @include mixins.make-template(maps.$stack-templates-list-vals, grid-template-rows);
   }
 }

package/scss/final/_touch-glass.scss

@@ -2,6 +2,13 @@
 @use '../mixins';
 
 @layer #{vars.$final-layer} {
+  toggle-view {
+    :where(&[touch-glass])::part(toggle-track) {
+      --toggle--dot-scale: 1.22;
+      --toggle--dot-press-duration: 100ms;
+    }
+  }
+
   @media (pointer: coarse) {
     [is='glass-button'],
     [is='glass-prominent-button'] {
@@ -25,6 +32,13 @@
       }
     }
 
+    [is='alert-dialog'] {
+      :where(&[touch-glass]) {
+        --alert--dialog-scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+    }
+
     tool-bar {
       :where(& > *[touch-glass]) {
         --toolbar-cell-scale: scale(1.07);
@@ -63,5 +77,22 @@
         }
       }
     }
+
+    tab-view {
+      :where(& > [is='sidebar-view'][touch-glass]) {
+        --sidebar-view-scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+
+      :where(& > sidebar-toggle > *[touch-glass]) {
+        --toolbar-cell-scale: scale(1.07);
+        transition-duration: 100ms;
+      }
+
+      :where(& > [is='sidebar-view'] > tool-bar > sidebar-toggle > *[touch-glass]) {
+        --toolbar-cell-scale: scale(1.07);
+        transition-duration: 100ms;
+      }
+    }
   }
 }

package/scss/mixins/_button.scss

@@ -0,0 +1,44 @@
+@mixin takeover-button-slots {
+  > [slot] {
+    :where(&) {
+      // take over NOTE: NO other propsm they break grids!! KISS pos+visibility+opacity
+      position: absolute;
+
+      inset: 0;
+
+      visibility: collapse;
+    }
+  }
+  > [slot='overlay'] {
+    :where(&) {
+      visibility: visible;
+    }
+  }
+  &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+    :where(&) {
+      position: relative;
+
+      visibility: visible;
+    }
+  }
+
+  &:has(> [slot='overlay']) {
+    > *:not([slot='overlay']) {
+      :where(&) {
+        opacity: 0;
+      }
+    }
+
+    > [slot='overlay'] {
+      :where(&) {
+        @media (prefers-reduced-motion: no-preference) {
+          transition: opacity ease-out 200ms;
+        }
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}

package/scss/mixins/_color.scss

@@ -0,0 +1,16 @@
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+@use '../vars';
+@use '../functions';
+
+@mixin wire-tinted-glass($prop) {
+  --#{$prop}face: light-dark(var(--accentColor), var(--accentColor));
+  --#{$prop}text: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+  --#{$prop}highlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
+  --#{$prop}highlighttext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+
+  --#{$prop}activeface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
+  --#{$prop}activetext: light-dark(oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none), oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none));
+}

package/scss/mixins/_dialog.scss

@@ -61,6 +61,7 @@
     margin-inline-start: max(env(safe-area-inset-left), var(--sidebar-inline-spacing)); // float
 
     --safe-area-inset-left: 0px; // now a floating
+    --safe-area-inset-right: 0px; // now a floating FIXME: Check new addition
 
     overflow: visible; // override