@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.81

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,17 @@
 @use '../vars';
+@use 'sass:string';
+@use 'sass:list';
+@use '../mixins';
+
+$v-stack-templates: ((auto minmax(0, 1fr)), (auto auto minmax(0, 1fr)), (auto auto auto minmax(0, 1fr)), (auto auto auto auto minmax(0, 1fr)));
 
 @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 +19,7 @@
     // :where(& > *) {
     // max-width: 100%;
     // }
+
+    @include mixins.make-template($v-stack-templates, grid-template-rows);
   }
 }

package/scss/final/_touch-glass.scss

@@ -25,6 +25,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 +70,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 '../vars';
+@use '../functions';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+
+@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
 

package/scss/mixins/_index.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../functions';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:list';
@@ -110,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) {
@@ -201,6 +209,19 @@
   border-radius: var(--#{$prefix}radiustl#{','}) var(--#{$prefix}radiustr#{','}) var(--#{$prefix}radiusbr#{','}) var(--#{$prefix}radiusbl#{','});
 }
 
+@mixin takeover-color-vars($prefix) {
+  --secondary: var(--#{$prefix}text);
+  --blue: var(--#{$prefix}text);
+  --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);
+  --accentColorEffective: var(--#{$prefix}text);
+}
+
 @mixin vt-toolbar-cell-offscreen-keyframe() {
   --toolbar-cell-scale: scale(var(--view-transition-toolbar-cell-offscreen-scale));
   --toolbar-cell-filter: blur(10px);
@@ -231,6 +252,12 @@
   }
 }
 
+@mixin set-label-font($value) {
+  --label--titlestack-font-size: var(--label-#{$value}-font-size);
+  --label--titlestack-line-height: var(--label-#{$value}-line-height);
+  --label--titlestack-font-weight: var(--label-#{$value}-font-weight);
+}
+
 @mixin if-iphone-landscape {
   @media (max-width: #{vars.$ipad-landscape-bp-max}) and (orientation: landscape) {
     @content;
@@ -285,6 +312,25 @@
   }
 }
 
+@mixin if-content-view-list {
+  @include if-2col-split-view-fits {
+    // is content-view!
+    navigation-split-view > scroll-view & {
+      @content;
+    }
+    // is content-view!
+    navigation-split-view:has(> [is='sidebar-view'])[preferred-compact-column='content']:not([column-visibility='double-column']) > body-view > scroll-view & {
+      @content;
+    }
+  }
+  // is content-view!
+  @include if-3col-split-view-fits {
+    navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column']) > body-view > scroll-view & {
+      @content;
+    }
+  }
+}
+
 // Mixin for plain CSS (linear)
 @mixin write-props($props) {
   @each $prop, $val in $props {
@@ -349,6 +395,22 @@
   }
 }
 
+@mixin make-template($tokens, $prop) {
+  @each $template in $tokens {
+    $parts: string.split('#{$template}', ', ');
+    $result: '';
+    @each $part in $parts {
+      $result: $result + '#{$part},';
+    }
+    $result: string.slice($result, 1, string.length($result) - 1);
+    $final-result: functions.str-replace($result, 'minmax(0,1fr)', 'spacer');
+    @debug $final-result, $template;
+    :where(&[template='#{$final-result}']) {
+      #{$prop}: $template;
+    }
+  }
+}
+
 @mixin generate-color-tokens($tokens) {
   $media-variants: (
     base: '',

package/scss/placeholders/_buttons.scss

@@ -8,13 +8,15 @@
 
       place-content: center;
 
+      position: relative;
+
       // SECTION: componentize
       @include mixins.componentize(btn);
 
-      --btnpadistart: var(--regular-btn-padding);
-      --btnpadiend: var(--regular-btn-padding);
-      --btnpadbstart: var(--regular-btn-padding);
-      --btnpadbend: var(--regular-btn-padding);
+      // --btnpadistart: var(--regular-btn-padding);
+      // --btnpadiend: var(--regular-btn-padding);
+      // --btnpadbstart: var(--regular-btn-padding);
+      // --btnpadbend: var(--regular-btn-padding);
 
       --btnradiustl: var(--regular-btn-border-radius);
       --btnradiustr: var(--regular-btn-border-radius);
@@ -22,13 +24,16 @@
       --btnradiusbr: var(--regular-btn-border-radius);
     }
 
+    @include mixins.takeover-button-slots;
+
     @each $size, $media in vars.$button-sizes {
-      @if (regular != $size) {
-        :where(&[control-size='#{$size}']) {
-          --btnpadistart: var(--#{$size}-btn-padding);
-          --btnpadiend: var(--#{$size}-btn-padding);
-          --btnpadbstart: var(--#{$size}-btn-padding);
-          --btnpadbend: var(--#{$size}-btn-padding);
+      // @if (regular != $size) {
+      &[control-size='#{$size}'] {
+        :where(&) {
+          // --btnpadistart: var(--#{$size}-btn-padding);
+          // --btnpadiend: var(--#{$size}-btn-padding);
+          // --btnpadbstart: var(--#{$size}-btn-padding);
+          // --btnpadbend: var(--#{$size}-btn-padding);
 
           --btnradiustl: var(--#{$size}-btn-border-radius);
           --btnradiustr: var(--#{$size}-btn-border-radius);
@@ -36,6 +41,15 @@
           --btnradiusbr: var(--#{$size}-btn-border-radius);
         }
       }
+      // }
+    }
+
+    &[control-size='small'] {
+      --label-font: callout;
+    }
+
+    &[control-size='mini'] {
+      --label-font: caption;
     }
   }
 }
@@ -54,6 +68,26 @@
   }
 }
 
+// @layer #{vars.$utils-layer} {
+//   %button {
+//     > [slot] {
+//       :where(&) {
+//         position: absolute;
+//       }
+//     }
+//     // &:has(> [slot='overlay'] > [slot='overlay']) {
+//     //   :where(&) {
+//     // display: grid;
+//     //   }
+//     // }
+//     &:not(:has(> :not([slot]))) > [slot='placeholder'] {
+//       :where(&) {
+//         position: relative;
+//       }
+//     }
+//   }
+// }
+
 @layer #{vars.$ui-layer} {
   // SECTION: componentize
   %button {