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

package/scss/transitions/_alert-dialog.scss

@@ -0,0 +1,18 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='alert-dialog'] {
+      :where(&) {
+        transition:
+          display var(--touchglass-transition-duration) allow-discrete ease-out,
+          overlay var(--touchglass-transition-duration) allow-discrete ease-out,
+          transform var(--touchglass-transition-duration) allow-discrete ease-out,
+          opacity var(--touchglass-transition-duration) allow-discrete ease-out;
+        // transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+        will-change: transform, overlay, display, opacity;
+      }
+    }
+  }
+}

package/scss/transitions/_confirmation-dialog.scss

@@ -6,6 +6,9 @@
     [is='confirmation-dialog'] {
       :where(&) {
         // transition:
+        //   inset var(--menu-animation-duration) allow-discrete ease-out,
+        //   width var(--menu-animation-duration) allow-discrete ease-out,
+        //   height var(--menu-animation-duration) allow-discrete ease-out,
         //   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,
@@ -14,6 +17,11 @@
         transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
         // will-change: block-size, inline-size, transform, overlay, display;
       }
+
+      :where(& > *) {
+        transition: transform var(--touchglass-transition-duration) allow-discrete ease-out;
+        will-change: transform;
+      }
     }
   }
 }

package/scss/transitions/_fine-tooltip.scss

@@ -0,0 +1,21 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    fine-tooltip {
+      :where(&) {
+        transition:
+          opacity 150ms allow-discrete ease-out,
+          transform 150ms allow-discrete ease-out;
+        transition-delay: 200ms;
+        will-change: opacity, transform;
+      }
+
+      :where(&[closing]) {
+        transition-duration: 100ms;
+        transition-delay: 0ms;
+      }
+    }
+  }
+}

package/scss/transitions/_menu-view.scss

@@ -4,22 +4,24 @@
 @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-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;
+        &::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/_progress-view.scss

@@ -0,0 +1,23 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    progress-view {
+      :where(&) {
+        //
+      }
+    }
+  }
+  @keyframes progressViewCircular {
+    0% {
+      opacity: 0.85;
+    }
+    50% {
+      opacity: 0.25;
+    }
+    100% {
+      opacity: 0.25;
+    }
+  }
+}

package/scss/transitions/_sheet-view.scss

@@ -0,0 +1,30 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  [is='sheet-view'] {
+    &:not([open]) {
+      z-index: var(--top-layer-polyfill-z-index);
+    }
+
+    &[open] {
+      --sheet-view-translate: translateY(var(--view-transition-dialog-onscreen-y));
+
+      @include mixins.if-ipad-sheet-fits {
+        @include mixins.if-2col-split-view-fits {
+          navigation-split-view & {
+            margin-inline-start: var(--safe-area-inset-left);
+          }
+        }
+      }
+
+      @include mixins.add-dialog-backdrop-transition-frames(var(--view-transition-dialog-onscreen-backdrop-bg));
+
+      @starting-style {
+        & {
+          --sheet-view-translate: translateY(var(--view-transition-dialog-offscreen-y));
+        }
+      }
+    }
+  }
+}

package/scss/transitions/_tab-bar.scss

@@ -3,11 +3,6 @@
 @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;
@@ -17,3 +12,9 @@
     }
   }
 }
+
+@keyframes ipad_form_view_slide_up_offedge {
+  to {
+    opacity: 0;
+  }
+}

package/scss/utils/_background.scss

@@ -0,0 +1,52 @@
+@use 'sass:math';
+@use 'sass:string';
+@use '../vars';
+
+@layer #{vars.$utils-layer} {
+  list-view,
+  [is='form-view'] {
+    :where(&[background='system-background']) {
+      --list--host-background-color: var(--background);
+    }
+
+    :where(&[list-row-background='system-tertiary-grouped-background']) {
+      --list--item-background-color: var(--tertiaryGroupedBackground);
+    }
+
+    :where(&[list-row-background='system-quaternary-grouped-background']) {
+      --list--item-background-color: var(--quaternaryGroupedBackground);
+    }
+  }
+
+  // naviation-stack,
+  // navigation-split-view,
+  // scroll-view {
+  //   :where(&[background='system-grouped-background']) {
+  //     --face: var(--groupedBackground);
+  //   }
+  // }
+
+  [is='sheet-view'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'] {
+    list-view,
+    [is='form-view'] {
+      :where(&[background='system-background']) {
+        --list--host-background-color: var(--secondaryBackground);
+      }
+
+      :where(&[list-row-background='system-tertiary-grouped-background']) {
+        --list--item-background-color: var(--quaternaryGroupedBackground);
+      }
+
+      :where(&[list-row-background='system-quaternary-grouped-background']) {
+        --list--item-background-color: var(--quaintaryGroupedBackground);
+      }
+    }
+
+    // :where(& scroll-view[background='system-grouped-background']) {
+    //   --face: var(--groupedBackground);
+    // }
+  }
+}

package/scss/utils/_frame.scss

@@ -1,5 +1,12 @@
-@use '../vars';
 @use 'sass:math';
+@use '../vars';
+
+$self-map: (
+  leading: start,
+  center: center,
+  trailing: end,
+  fill: stretch,
+);
 
 @layer #{vars.$utils-layer} {
   :where([frame\:width='infinity']) {
@@ -9,53 +16,47 @@
     max-inline-size: 100%;
   }
   @for $i from 0 through 100 {
+    :where([frame\:width='#{$i}']) {
+      max-inline-size: #{$i}rem;
+    }
     :where([frame\:max-width='#{$i}']) {
       max-inline-size: #{$i}rem;
     }
+    :where([frame\:width='#{$i}cqi']) {
+      max-inline-size: #{$i}cqi;
+    }
     :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;
-  // }
+  // per-child override — analogous to SwiftUI's .frame(alignment:) on one child.
+  // only direct children matter here since only direct children are grid items.
+
+  // v-stack/ALL: cross axis is inline (horizontal) -> justify-self (grid is by default auto-flow-row)
+  scroll-view,
+  v-stack {
+    @each $k, $v in $self-map {
+      :where(& > [frame\:alignment='#{$k}']) {
+        justify-self: #{$v};
+      }
+      :where(& > [frame\:anchor='#{$k}']) {
+        align-self: #{$v};
+      }
+    }
+  }
+
+  // // h-stack: cross axis is block (vertical) -> align-self
+  h-stack {
+    @each $k, $v in $self-map {
+      :where(& > [frame\:alignment='#{$k}']) {
+        align-self: #{$v};
+      }
+      :where(& > [frame\:anchor='#{$k}']) {
+        justify-self: #{$v};
+      }
+    }
+  }
 
   @media (prefers-reduced-motion: no-preference) {
     :where([slow]) {
@@ -82,3 +83,21 @@
     }
   }
 }
+
+@layer #{vars.$components-layer} {
+  // readable 2/2
+  v-stack {
+    :where(&[readable]) {
+      inline-size: 100%; //->[frame\:width='infinity']
+      justify-self: center; //->[frame\:alignment='center'];
+    }
+    @for $i from 0 through 100 {
+      :where(&[readable='#{$i}']) {
+        max-inline-size: #{$i}rem; //->[frame:max-width='{length}'`]
+      }
+      :where(&[readable='#{$i}cqi']) {
+        max-inline-size: #{$i}cqi; //->[frame:max-width='{length}'`]
+      }
+    }
+  }
+}

package/scss/utils/_index.scss

@@ -1,68 +1,57 @@
 @use '../vars';
+@use '../maps';
 
 @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);
+  [background-style='grouped'] {
+    @media (pointer: coarse) {
+      :where(&) {
+        // --face: var(--groupedBackground);
+        --background: var(--groupedBackground);
+        --secondaryBackground: var(--secondaryGroupedBackground);
+        --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+        --face: var(--background);
+        // --face2: var(--secondaryBackground);
+        // --face3: var(--tertiaryBackground);
+      }
+
+      // FIXME: feat-sheet 2/3
+      [is='sheet-view'] &,
+      [is='full-screen'] &,
+      [is='confirmation-dialog'] &,
+      [is='alert-dialog'] & {
+        :where(&) {
+          // --background: var(--secondaryGroupedBackground);
+          // --secondaryBackground: var(--tertiaryGroupedBackground);
+          // --tertiaryBackground: var(--quaternaryGroupedBackground);
+        }
+      }
     }
   }
 
-  [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);
+  @each $k, $v in maps.$foreground-tokens {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
     }
   }
 
-  [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);
+  @each $tint in maps.$tint-names {
+    [tint='#{"" + $tint}'],
+    [list-item-tint='#{"" + $tint}'] {
+      :where(&) {
+        --accentColorEffective: var(--#{$tint});
+        --accentColorEffective4: var(--#{$tint}4);
+
+        --accentColor: var(--#{$tint});
+        --accentColor2: var(--#{$tint}2);
+        --accentColor3: var(--#{$tint}3);
+        --accentColor4: var(--#{$tint}4);
+        --accentColor5: var(--#{$tint}5);
+      }
+
+      // :where(&[is='bordered-button']) {
+      //   --accentSubtle: var(--red4);
+      // }
     }
   }
 }

package/scss/utils/_scroll-view.scss

@@ -1,6 +1,6 @@
-@use '../vars';
 @use 'sass:math';
 @use 'sass:string';
+@use '../vars';
 
 @layer #{vars.$utils-layer} {
   scroll-view {

package/scss/utils/_spacing.scss

@@ -1,7 +1,7 @@
-@use '../vars';
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:list';
+@use '../vars';
 
 @layer #{vars.$utils-layer} {
   // general utils