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

package/scss/transitions/_dialog.scss

@@ -2,8 +2,12 @@
 @use '../mixins';
 
 @layer #{vars.$transitions-layer} {
+  [is='sheet-view']:not([open]) {
+    z-index: var(--top-layer-polyfill-z-index);
+  }
+
   [is='sheet-view'][open] {
-    transform: translateY(var(--view-transition-dialog-onscreen-y));
+    --sheet-view-translate: translateY(var(--view-transition-dialog-onscreen-y));
 
     @include mixins.if-ipad-sheet-fits {
       @include mixins.if-2col-split-view-fits {
@@ -13,19 +17,11 @@
       }
     }
 
-    &::backdrop {
-      background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
-    }
-
-    @starting-style {
-      &::backdrop {
-        background-color: transparent;
-      }
-    }
+    @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
 
     @starting-style {
       & {
-        transform: translateY(var(--view-transition-dialog-offscreen-y));
+        --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
       }
     }
   }

package/scss/transitions/_disclosure-group.scss

@@ -0,0 +1,35 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='disclosure-group'] {
+      :where(&)::details-content {
+        transition:
+          block-size var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing),
+          content-visibility var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+        will-change: block-size, content-visibility;
+      }
+
+      // :where(& > summary > [slot='marker']) {
+      :where(& > summary)::after {
+        transition: transform var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+        will-change: transform;
+      }
+
+      @supports not (interpolate-size: allow-keywords) {
+        :where(&) {
+          transition: grid-template-rows var(--disclosure-group-animation-duration) allow-discrete var(--disclosure-group-animation-easing);
+          will-change: grid-template-rows;
+        }
+        // :where(&)::details-content {
+        //   transition:
+        //     max-block-size var(#{vars.$disclosure-group-animation-duration-css-prop}) allow-discrete var(--disclosure-group-animation-easing),
+        //     block-size var(#{vars.$disclosure-group-animation-duration-css-prop}) allow-discrete var(--disclosure-group-animation-easing),
+        //     transform var(#{vars.$disclosure-group-animation-duration-css-prop}) allow-discrete var(--disclosure-group-animation-easing);
+        //   will-change: max-block-size, block-size, transform;
+        // }
+      }
+    }
+  }
+}

package/scss/transitions/_fwd.navbar.scss

@@ -23,24 +23,19 @@
   tool-bar-item-group {
     &.fwn {
       // BUG: Safari doesn't enforce scaling without this here again redundantly!
-      @include mixins.vt-toolbar-item-offscreen-keyframe;
-
-      // @starting-style {
-      // transform: scale(1);
-      // opacity: 1;
-      // }
+      // @include mixins.vt-toolbar-cell-offscreen-keyframe;
     }
 
     &.fwnn {
-      @include mixins.vt-toolbar-item-onscreen-keyframe;
+      @include mixins.vt-toolbar-cell-onscreen-keyframe;
 
       @starting-style {
-        @include mixins.vt-toolbar-item-offscreen-keyframe;
+        @include mixins.vt-toolbar-cell-offscreen-keyframe;
       }
     }
 
     &.fwnn.fwn {
-      @include mixins.vt-toolbar-item-offscreen-keyframe;
+      @include mixins.vt-toolbar-cell-offscreen-keyframe;
     }
   }
 }

package/scss/transitions/_fwd.scss

@@ -4,51 +4,21 @@
   scroll-view {
     // Make sure old/outgoing elements can NOT be interacted with (new elements are already stacked higher)
     &.#{vars.$vt-fwd-class-name} {
-      // view-transition-name: match-element;
-      // view-transition-class: scroll-view;
-
       pointer-events: none;
-
-      // transform: translateX(-70%);
-
-      // @starting-style {
-      // transform: translateX(0%);
-      // }
     }
 
     &.fwdd {
-      // view-transition-name: targeted-scroll-view;
-      // view-transition-class: none;
+      --scroll-view-translate: translateX(var(--view-transition-principal-x));
 
-      transform: translateX(var(--view-transition-principal-x));
+      --scroll-view-box-shadow: var(--screen-box-shadow);
 
       @starting-style {
-        transform: translateX(var(--view-transition-trailing-x));
+        --scroll-view-translate: translateX(var(--view-transition-trailing-x));
       }
     }
 
     &.fwdd.#{vars.$vt-fwd-class-name} {
-      transform: translateX(var(--view-transition-leading-x));
+      --scroll-view-translate: translateX(var(--view-transition-leading-x));
     }
-
-    // [is='sheet-view'] > &.fwdd {
-    //   transform: translateY(0);
-
-    //   @starting-style {
-    //     transform: translateY(100lvh);
-    //   }
-    // }
   }
-
-  // .fwd ~ [is='sheet-view']::backdrop {
-  //   background-color: rgba(0, 0, 0, 0.5);
-
-  //   @starting-style {
-  //     background-color: rgba(0, 0, 0, 0);
-  //   }
-  // }
-
-  // scroll-view.bwdd.fwd {
-  //   transform: translateX(var(--view-transition-leading-x));
-  // }
 }

package/scss/transitions/_glass-button.scss

@@ -0,0 +1,12 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='glass-button'] {
+      :where(&) {
+        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+      }
+    }
+  }
+}

package/scss/transitions/_glass-prominent-button.scss

@@ -0,0 +1,12 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='glass-prominent-button'] {
+      :where(&) {
+        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+      }
+    }
+  }
+}

package/scss/transitions/_index.scss

@@ -1,18 +1,19 @@
 @use '../vars';
+@use '../mixins';
 
 @layer #{vars.$transitions-layer} {
-  // ::view-transition-old(root),
-  // ::view-transition-new(root) {
-  //   animation-duration: 15s;
-  // }
-  // ::view-transition-old(root) {
-  //   animation: 15s ease-out both slide-to-left;
-  // }
-
-  // ::view-transition-new(root) {
-  //   animation: 15s ease-out both slide-from-right;
-  // }
   @media (prefers-reduced-motion: no-preference) {
+    // ::view-transition-old(root),
+    // ::view-transition-new(root) {
+    //   animation-duration: 15s;
+    // }
+    // ::view-transition-old(root) {
+    //   animation: 15s ease-out both slide-to-left;
+    // }
+
+    // ::view-transition-new(root) {
+    //   animation: 15s ease-out both slide-from-right;
+    // }
     scroll-view {
       &.#{vars.$vt-fwd-class-name},
       &.fwdd,
@@ -20,12 +21,10 @@
       &.bwdd {
         transition:
           transform var(--view-transition-duration) ease-out allow-discrete,
-          padding-inline-start #{vars.$sidebar-transition-duration} ease-out
-            allow-discrete,
-          margin-inline-start #{vars.$sidebar-transition-duration} ease-out
-            allow-discrete;
+          padding-inline-start var(--sidebar-transition-duration) ease-out allow-discrete,
+          margin-inline-start var(--sidebar-transition-duration) ease-out allow-discrete;
 
-        will-change: transform, padding-inline-start, margin-inline-start;
+        will-change: transform, padding-inline-start, margin-inline-start, scroll-position;
       }
     }
 
@@ -41,142 +40,35 @@
           filter var(--view-transition-duration) ease-out allow-discrete;
 
         will-change: transform, opacity, filter;
-        // > * {
-        // transition: filter var(--view-transition-duration) ease-out allow-discrete;
-        // will-change: filter;
-        // }
+      }
+      // > * {
+      // transition: filter var(--view-transition-duration) ease-out allow-discrete;
+      // will-change: filter;
+      // }
+      // }
+    }
+
+    tool-bar-item,
+    tool-bar-item-group {
+      :where(&) {
+        transition:
+          transform var(--touchglass-transition-duration) ease-out allow-discrete,
+          filter var(--touchglass-transition-duration) ease-out allow-discrete;
+
+        will-change: transform, filter;
       }
     }
 
     [is='sheet-view'] {
       transition:
-        transform var(--view-transition-duration) allow-discrete,
-        overlay var(--view-transition-duration) allow-discrete,
-        display var(--view-transition-duration) allow-discrete;
+        transform var(--view-transition-duration) ease-out allow-discrete,
+        overlay var(--view-transition-duration) ease-out allow-discrete,
+        display var(--view-transition-duration) ease-out allow-discrete;
       // transition: background-color var(--view-transition-duration) ease-out
       //   allow-discrete;
       will-change: transform, overlay, display;
 
-      &::backdrop {
-        transition:
-          display var(--view-transition-duration) allow-discrete,
-          overlay var(--view-transition-duration) allow-discrete,
-          background-color var(--view-transition-duration);
-        will-change: background-color, overlay, display;
-      }
-
-      &[open] {
-        transform: translateY(var(--view-transition-dialog-onscreen-y));
-
-        &::backdrop {
-          background-color: var(--view-transition-dialog-onscreen-backdrop-bg);
-        }
-
-        @starting-style {
-          &::backdrop {
-            background-color: transparent;
-          }
-        }
-
-        @starting-style {
-          & {
-            transform: translateY(var(--view-transition-dialog-offscreen-y));
-          }
-        }
-      }
+      @include mixins.make-backdrop-transitionable;
     }
   }
-  /* scroll-view {
-    view-transition-name: match-element;
-    view-transition-class: scroll-view;
-    // contain: paint;
-
-    &:not(:has(~ body-view)) {
-      view-transition-name: targeted-scroll-view;
-      view-transition-class: none;
-      // contain: layout;
-      // background-color: red;
-    }
-  }
-
-  tool-bar-item {
-    view-transition-name: match-element;
-    view-transition-class: tool-bar-item;
-    // contain: paint;
-  }
-  navigation-bar:not(:has(~ body-view)) > tool-bar-item {
-    view-transition-name: match-element;
-    view-transition-class: targeted-toolbar-items;
-    // contain: layout;
-    // background-color: red;
-  } */
-
-  // :root::view-transition-old(*.scroll-view) {
-  //   animation: var(--view-transition-duration) ease-out both slide-to-left;
-  // }
-  // :root::view-transition-new(*.scroll-view) {
-  //   animation: var(--view-transition-duration) ease-out both slide-to-left;
-  // }
-  // :root::view-transition-old(targeted-scroll-view) {
-  //   animation: var(--view-transition-duration) ease-out both slide-from-right;
-  // }
-  // :root::view-transition-new(targeted-scroll-view) {
-  //   animation: var(--view-transition-duration) ease-out both slide-from-right;
-  // }
-  //
-  /* :root::view-transition-old(*.tool-bar-item) {
-    animation: var(--view-transition-duration) ease-out both shrink-to-tiny;
-  }
-  :root::view-transition-new(*.tool-bar-item) {
-    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
-  }
-  :root::view-transition-old(*.targeted-toolbar-items) {
-    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
-  }
-  :root::view-transition-new(*.targeted-toolbar-items) {
-    animation: var(--view-transition-duration) ease-out both expand-from-tiny;
-  } */
-
-  // html:active-view-transition-type(forwards, backwards) {
-  //   :root {
-  //     view-transition-name: none;
-  //   }
-
-  //   .fwdd {
-  //     view-transition-name: content;
-  //   }
-  // }
-
-  // html:active-view-transition-type(forwards) {
-  //   &::view-transition-old(content) {
-  //     animation: 5s ease-out both slide-to-left;
-  //   }
-  //   &::view-transition-new(content) {
-  //     animation: 5s ease-out both slide-from-right;
-  //   }
-  // }
 }
-
-// @keyframes slide-from-right {
-//   from {
-//     transform: translateX(100%);
-//   }
-// }
-
-// @keyframes slide-to-left {
-//   to {
-//     transform: translateX(-70%);
-//   }
-// }
-
-// @keyframes expand-from-tiny {
-//   from {
-//     transform: scale(0);
-//   }
-// }
-
-// @keyframes shrink-to-tiny {
-//   to {
-//     transform: scale(0);
-//   }
-// }

package/scss/transitions/_menu-view.scss

@@ -0,0 +1,26 @@
+@use '../vars';
+@use '../mixins';
+
+@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-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/transitions/_navigation-split-view.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    navigation-split-view {
+      @include mixins.if-2col-split-view-fits {
+        &:has(> [is='sidebar-view']) {
+          @include mixins.if-3col-split-view-fits {
+            > [is='sidebar-view'] {
+              :where(&) {
+                // transition:
+                //   filter var(--touchglass-transition-duration) allow-discrete ease-out,
+                //   transform var(--touchglass-transition-duration) allow-discrete ease-out;
+                // will-change: filter, transform;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/scss/transitions/_sidebar-view.scss

@@ -0,0 +1,36 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='sidebar-view'] {
+      // Between 2col and 3col AND preferred-compact-column rule ON, apply transitions
+      @include mixins.if-2col-split-view-fits {
+        :where(navigation-split-view:has(> [is='sidebar-view']) &) {
+          transition:
+            filter var(--touchglass-transition-duration) ease-out allow-discrete,
+            transform var(--touchglass-transition-duration) ease-out allow-discrete;
+          will-change: transform; // BUG: do NOT add filter here, it breaks webkit backdrop-filter
+        }
+
+        @include mixins.ifnot-3col-split-view-fits {
+          :where(navigation-split-view:has(> [is='sidebar-view']):not([column-visibility='double-column'])[preferred-compact-column='content'] &) {
+            transition:
+              filter var(--touchglass-transition-duration) ease-out allow-discrete,
+              transform var(--touchglass-transition-duration) ease-out allow-discrete,
+              margin-inline-start var(--sidebar-transition-duration) ease-out allow-discrete;
+            will-change: transform, margin-inline-start; // BUG: do NOT add filter here, it breaks webkit backdrop-filter
+          }
+        }
+      }
+      // Always
+      :where(tab-view:has(> [is='sidebar-view']) > &) {
+        transition:
+          filter var(--touchglass-transition-duration) ease-out allow-discrete,
+          transform var(--touchglass-transition-duration) ease-out allow-discrete,
+          margin-inline-start var(--sidebar-transition-duration) ease-out allow-discrete;
+        will-change: transform, margin-inline-start; // BUG: do NOT add filter here, it breaks webkit backdrop-filter
+      }
+    }
+  }
+}

package/scss/transitions/_tab-bar.scss

@@ -0,0 +1,19 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='tab-bar'] {
+      // :where(&) {
+      //   transition: inset var(--sidebar-transition-duration) ease-out allow-discrete;
+      //   will-change: inset;
+      // }
+
+      > [is='form-view'] {
+        :where(&) {
+          transition: transform var(--sidebar-transition-duration) ease-out allow-discrete;
+          will-change: transform;
+        }
+      }
+    }
+  }
+}

package/scss/utils/_frame.scss

@@ -0,0 +1,84 @@
+@use '../vars';
+@use 'sass:math';
+
+@layer #{vars.$utils-layer} {
+  :where([frame\:width='infinity']) {
+    inline-size: 100%;
+  }
+  :where([frame\:max-width='infinity']) {
+    max-inline-size: 100%;
+  }
+  @for $i from 0 through 100 {
+    :where([frame\:max-width='#{$i}']) {
+      max-inline-size: #{$i}rem;
+    }
+    :where([frame\:max-width='#{$i}cqi']) {
+      max-inline-size: #{$i}cqi;
+    }
+  }
+
+  // :where([frame-width='infinity']) {
+  //   place-items: stretch; //justify-self: stretch;
+  // }
+  // :where([frame-alignment='leading']) {
+  //   align-self: start;
+  // }
+  // :where([frame-alignment='center']) {
+  //   align-self: center;
+  // }
+  // :where([frame-alignment='trailing']) {
+  //   align-self: end;
+  // }
+  // :where([alignment='start']) {
+  //   place-items: start;
+  // }
+  // :where([alignment='fill']) {
+  //   place-items: stretch;
+  // }
+  // :where([content='start']) {
+  //   place-content: start;
+  // }
+  // :where([justify-content='start']) {
+  //   justify-content: start;
+  // }
+  // :where([justify-content='start']) {
+  //   justify-content: start;
+  // }
+  // :where([spacer='top']) {
+  //   margin-top: auto;
+  // }
+  // :where([distribution='start']) {
+  //   place-content: start;
+  // }
+  // :where([distribution='space-between']) {
+  //   place-content: space-between;
+  // }
+  // :where(spacer) {
+  //   margin: auto;
+  // }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :where([slow]) {
+      visibility: visible;
+
+      transition: opacity 250ms ease-out allow-discrete;
+      will-change: opacity;
+    }
+
+    :where([slow='hide']) {
+      opacity: 0;
+
+      @starting-style {
+        opacity: 1;
+      }
+    }
+
+    :where([slow='show']) {
+      opacity: 1;
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}

package/scss/utils/_index.scss

@@ -0,0 +1,68 @@
+@use '../vars';
+
+@layer #{vars.$utils-layer} {
+  :where([background-style='grouped']) {
+    --background: var(--groupedBackground);
+    --secondaryBackground: var(--secondaryGroupedBackground);
+    --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+    --face: var(--background);
+    // --face2: var(--secondaryBackground);
+    // --face3: var(--tertiaryBackground);
+  }
+
+  :where([foreground='secondary']) {
+    color: var(--secondary);
+  }
+
+  :where([foreground='blue']) {
+    color: var(--blue);
+  }
+
+  :where([foreground='blue.secondary']) {
+    color: var(--blue2);
+  }
+
+  [tint='gray'] {
+    :where(&) {
+      --accentColor: var(--gray);
+      --accentColor2: var(--gray2);
+      --accentColor3: var(--gray3);
+      --accentColor4: var(--gray4);
+      --accentColor5: var(--gray5);
+    }
+
+    :where(&[is='bordered-button']) {
+      // --accentEmphasis: light-dark(color-mix(in oklch, var(--gray) 50%, var(--black)), color-mix(in oklch, var(--gray) 50%, var(--white)));
+      --accentSubtle: var(--gray4);
+    }
+  }
+
+  [tint='blue'] {
+    :where(&) {
+      --accentColor: var(--blue);
+      --accentColor2: var(--blue2);
+      --accentColor3: var(--blue3);
+      --accentColor4: var(--blue4);
+      --accentColor5: var(--blue5);
+    }
+
+    :where(&[is='bordered-button']) {
+      --accentSubtle: var(--blue4);
+    }
+  }
+
+  [tint='red'] {
+    :where(&) {
+      --accentColor: var(--red);
+      --accentColor2: var(--red2);
+      --accentColor3: var(--red3);
+      --accentColor4: var(--red4);
+      --accentColor5: var(--red5);
+    }
+
+    :where(&[is='bordered-button']) {
+      --accentSubtle: var(--red4);
+    }
+  }
+}

package/scss/utils/_scroll-view.scss

@@ -0,0 +1,14 @@
+@use '../vars';
+@use 'sass:math';
+@use 'sass:string';
+
+@layer #{vars.$utils-layer} {
+  scroll-view {
+    @supports (x: #{string.unquote('attr(x type(*))')}) {
+      // :where(&[background='infinity']) {
+      // :where(&) {
+      //   --face: attr(background type(<color>), inherit);
+      // }
+    }
+  }
+}