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

package/scss/components/_tool-bar.scss

@@ -3,88 +3,151 @@
 
 @layer #{vars.$components-layer} {
   tool-bar {
-    // background-color: red;
-    position: sticky;
-    width: 100%;
+    :where(&) {
+      pointer-events: none;
 
-    place-items: center;
-    place-content: center;
-    // grid-template-columns: 1fr auto 1fr;
+      touch-action: none;
 
-    pointer-events: none;
+      color: var(--text,);
 
-    > span {
-      display: grid;
-      grid-template-columns: 1fr auto 1fr;
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto 1fr auto;
+      grid-template-areas:
+        'top-bar'
+        'spacer'
+        'bottom-bar';
+    }
 
-      &::before,
-      &::after {
-        content: '';
-        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);
 
-      &::before {
-        height: 20px;
-        background: green;
-      }
+      min-inline-size: var(--toolbar-cell-min-size);
 
-      &::after {
-        height: 20px;
-        background: darkgoldenrod;
-      }
+      // tfo
+      transform: var(--toolbar-cell-scale,);
+      filter: var(--toolbar-cell-filter,);
+      opacity: var(--toolbar-cell-opacity,);
+
+      // min-width: calc(var(--tool-bar-block-size) - var(--toolbar-cell-block-padding-start) - var(--toolbar-cell-block-padding-end));
     }
 
-    @media (pointer: fine) {
-      & {
-        justify-content: start;
-      }
+    :where(&)::part(top-bar),
+    :where(&)::part(bottom-bar) {
+      position: relative; // SAFARI BUG
+
+      padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
+      pointer-events: none;
+
+      grid-template-columns: auto 1fr auto;
+      column-gap: var(--toolbar-col-gap);
+      // grid-auto-rows: 40px;
+
+      grid-template-rows: var(--toolbar-cell-min-size);
+
+      // place-items: center;
+      place-content: center; // middle of y axis
     }
-  }
 
-  tool-bar[slot='navigation-bar'] {
-    top: 0;
-    height: calc(var(--safe-area-inset-top) + var(--navigation-bar-height));
-    padding-block-start: var(--safe-area-inset-top);
-    transform: translateY(calc(var(--safe-area-inset-top) * -1));
-
-    > span {
-      &::before {
-        width: calc(
-          var(--navbar-padding-inline-start, 0px) +
-            var(--toolbar-area-inset-left, 0px)
-        );
-      }
+    :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)
+      //   );
 
-      &::after {
-        width: var(--navbar-padding-inline-end, 0px);
-      }
+      grid-area: top-bar;
+
+      block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
+
+      padding-block-start: var(--safe-area-inset-top);
     }
 
-    // > div {
-    @include mixins.make-navbar(bottom);
-    // height: calc(var(--safe-area-inset-top) + 50px);
-    // }
-  }
+    :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)
+      //   );
 
-  tool-bar[slot='bottom-bar'] {
-    top: calc(100% - var(--tool-bar-height) - var(--safe-area-inset-bottom));
-    // background-color: red;
-    height: calc(var(--safe-area-inset-bottom) + var(--tool-bar-height));
-    padding-block-end: var(--safe-area-inset-bottom);
-    transform: translateY(var(--safe-area-inset-bottom));
+      grid-area: bottom-bar;
 
-    > span {
-      &::before {
-        width: var(--toolbar-padding-inline-start);
+      block-size: calc(var(--safe-area-inset-bottom) + var(--tool-bar-block-size));
+
+      padding-block-end: var(--safe-area-inset-bottom);
+    }
+
+    :where(&)::part(toolbar-leading-stack),
+    :where(&)::part(toolbar-principal-stack),
+    :where(&)::part(toolbar-trailing-stack) {
+      display: grid;
+
+      grid-auto-flow: column;
+      grid-template-columns: minmax(0, 1fr);
+
+      column-gap: var(--toolbar-col-gap);
+
+      padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
+    }
+
+    @include mixins.if-ipad-sheet-fits {
+      :where([is='sheet-view'] &)::part(top-bar),
+      :where([is='sheet-view'] &)::part(bottom-bar) {
+        --safe-area-inset-left: 0px;
+
+        --safe-area-inset-right: 0px;
+      }
+
+      :where([is='sheet-view'] &)::part(top-bar) {
+        --safe-area-inset-top: 0px;
       }
 
-      &::after {
-        width: var(--toolbar-padding-inline-end);
+      :where([is='sheet-view'] &)::part(bottom-bar) {
+        --safe-area-inset-bottom: 0px;
       }
     }
 
-    // > div {
-    @include mixins.make-navbar(top);
-    // }
+    // 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='image']) {
+        :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='image']) {
+          :where(&) {
+            --label-style: icon-only;
+          }
+        }
+      }
+    }
   }
 }
+
+// @layer #{vars.$final-layer} {
+//   tool-bar-item[slot^='top-bar'],
+//   tool-bar-item-group[slot^='top-bar'] {
+//     :where(& menu-view, & tool-bar-item-group[slot^='top-bar'] menu-view)::part(menu-dialog) {
+//       // position-area: center block-end;
+//     }
+//   }
+
+//   tool-bar-item[slot^='bottom-bar'],
+//   tool-bar-item-group[slot^='bottom-bar'] {
+//     :where(& menu-view, & menu-view)::part(menu-dialog) {
+//       // position-area: center block-start;
+//     }
+//   }
+// }

package/scss/components/_v-divider.scss

@@ -0,0 +1,13 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  v-divider {
+    :where(&) {
+      inline-size: 1px;
+
+      block-size: 100%;
+
+      background-color: var(--separator);
+    }
+  }
+}

package/scss/components/_v-flex-stack.scss

@@ -0,0 +1,29 @@
+@use '../vars';
+
+@layer #{vars.$components-layer} {
+  v-flex-stack {
+    :where(&) {
+      display: flex;
+      flex-flow: column nowrap;
+
+      place-items: center;
+      place-content: center;
+    }
+
+    :where(& > *) {
+      max-inline-size: 100%;
+    }
+
+    // > spacer {
+    //   :where(&) {
+    //     flex-grow: 1;
+    //   }
+    // }
+
+    > [frame-height='infinity'] {
+      :where(&) {
+        flex-grow: 1;
+      }
+    }
+  }
+}

package/scss/components/_v-keyboard.scss

@@ -2,11 +2,13 @@
 
 @layer #{vars.$components-layer} {
   v-keyboard {
-    position: fixed;
+    :where(&) {
+      position: fixed;
 
-    inset: 0lvh auto auto 0lvw;
+      inset: 0lvh auto auto 0lvw;
 
-    width: 100lvw;
-    height: 100lvh;
+      inline-size: 100lvw; //width
+      block-size: 100lvh; //height
+    }
   }
 }

package/scss/components/_v-stack.scss

@@ -1,19 +1,25 @@
 @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 {
-    place-items: center;
-    grid-template-columns: minmax(0, 1fr);
-    box-shadow: inset 0 0 0 2px magenta;
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
 
-    place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
-    // scroll-view:has(> tool-bar[slot='navigation-bar']) & {
-    //   margin-top: var(--navigation-bar-height);
-    // }
+      gap: 1rem;
+    }
 
-    // scroll-view:has(> tool-bar[slot='bottom-bar']) & {
-    //   margin-bottom: var(--tool-bar-height);
+    // :where(& > *) {
+    // max-width: 100%;
     // }
+
+    @include mixins.make-template($v-stack-templates, grid-template-rows);
   }
 }

package/scss/final/_touch-glass.scss

@@ -0,0 +1,91 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$final-layer} {
+  @media (pointer: coarse) {
+    [is='glass-button'],
+    [is='glass-prominent-button'] {
+      :where(&[touch-glass]) {
+        --btn--scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+    }
+
+    menu-view {
+      :where(&[touch-glass])::part(menu-dialog) {
+        --menu--dialog-scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+    }
+
+    [is='confirmation-dialog'] {
+      :where(&[touch-glass]) {
+        --confirmation--dialog-scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+    }
+
+    [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);
+        transition-duration: 100ms;
+      }
+    }
+
+    [is='tab-bar'] {
+      @include mixins.if-iphone-portrait {
+        :where(&[touch-glass]) {
+          --tab-bar-scale: scale(1.02);
+          transition-duration: 100ms;
+        }
+      }
+      @include mixins.if-iphone-landscape {
+        :where(&[touch-glass]) {
+          --tab-bar-scale: scale(1.02);
+          transition-duration: 100ms;
+        }
+      }
+      @include mixins.if-ipad-landscape {
+        :where(&[touch-glass]) {
+          --tab-bar-scale: scale(1.02);
+          transition-duration: 100ms;
+        }
+      }
+    }
+
+    navigation-split-view {
+      &:has(> [is='sidebar-view']) {
+        @include mixins.if-2col-split-view-fits {
+          :where(& > [is='sidebar-view'][touch-glass]) {
+            --sidebar-view-scale: scale(1.02);
+            transition-duration: 100ms;
+          }
+        }
+      }
+    }
+
+    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/index.scss

@@ -1,14 +1,18 @@
 @use 'vars';
 @use 'mixins';
 
-@forward 'dev';
-
 @forward 'base';
 
+@forward 'placeholders';
+
 @forward 'components';
 
+@forward 'utils';
+
 @forward 'transitions';
 
 @forward 'colors';
 
+@forward 'final';
+
 @debug '@swiftwc/ui/scss ⚡️ loaded';

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

@@ -0,0 +1,89 @@
+@mixin reset-dialog {
+  // :where(&) {
+  // position: absolute;
+  inset-inline: 0px;
+  inset-block: 0px; //inset-inline-start: 0px;
+  // width: fit-content;
+  // height: fit-content;
+  margin: 0px; //margin-top: auto;
+  border: none; //border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;
+  padding: 0px; //padding-top: 1em;
+  background-color: transparent; //background-color: canvas;
+  color: transparent; //color: canvastext;
+  // display: none;
+
+  // dialog:modal {
+  // position: fixed;
+  // overflow-x: auto;
+  // overflow-y: auto;
+  // inset-block-start: 0px;
+  max-width: 100lvw; //max-width: calc(100% - 2em - 6px);
+  max-height: 100lvh; //max-height: calc(100% - 2em - 6px);
+  // visibility: visible;
+  // }
+
+  outline: none;
+
+  &::backdrop {
+    background-color: transparent;
+  }
+  // }
+}
+
+@mixin make-backdrop-transitionable {
+  &::backdrop {
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        display var(--view-transition-duration) ease-out allow-discrete,
+        overlay var(--view-transition-duration) ease-out allow-discrete,
+        background-color var(--view-transition-duration) ease-out allow-discrete;
+      will-change: background-color, overlay, display;
+    }
+  }
+}
+
+@mixin add-dialog-backdrop-transition-frames($new-background-color) {
+  &::backdrop {
+    background-color: $new-background-color;
+  }
+  // must be after above rule!
+  @starting-style {
+    &::backdrop {
+      background-color: transparent;
+    }
+  }
+}
+
+@mixin make-floating-sidebar {
+  :where(&) {
+    inline-size: var(--nav-split-view-sidebar-inline-size); // override
+
+    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
+
+    padding-block: max(var(--safe-area-inset-top), var(--sidebar-block-spacing)) max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
+
+    border-radius: var(--sidebar-border-radius);
+  }
+
+  > scroll-view {
+    &,
+    & ~ tool-bar {
+      :where(&) {
+        --safe-area-inset-top: 0px;
+        --safe-area-inset-bottom: 0px;
+      }
+    }
+    :where(&) {
+      border-radius: var(--sidebar-border-radius);
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+
+      --scroll-view-box-shadow: var(--liquid-glass-box-shadow);
+    }
+  }
+}