@swiftwc/ui 0.0.0-dev.0 → 0.0.0-dev.100

package/scss/transitions/_bwd.scss

@@ -0,0 +1,39 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  scroll-view {
+    &.bwd {
+      --scroll-view-translate: translateX(var(--view-transition-trailing-x));
+
+      --scroll-view-box-shadow: var(--screen-box-shadow);
+    }
+
+    &.bwdd {
+      // visibility: visible;
+
+      // Inert nested landmarks of destination so that destination can be interacted with
+      // Make sure old/outgoing elements can NOT be interacted with (new elements are stacked lower)
+      ~ body-view,
+      ~ navigation-stack,
+      ~ navigation-split-view {
+        pointer-events: none;
+      }
+
+      // IMPORTANT: This requires `!important` bc/ css does not enforce this over the general keep-things-stacked-offscreen rule.
+      --scroll-view-translate: translateX(var(--view-transition-principal-x));
+    }
+
+    &.bwdd.bwd {
+      --scroll-view-translate: translateX(var(--view-transition-trailing-x));
+    }
+  }
+
+  // NOTE: Cannot force root scroll-view to be interacted with! Tabbar gets below the stack.
+  // navigation-split-view > .bwdd {
+  //   z-index: 0;
+  // }
+  navigation-split-view > body-view:has(~ .bwdd) {
+    pointer-events: none;
+    // z-index: 1;
+  }
+}

package/scss/transitions/_confirmation-dialog.scss

@@ -0,0 +1,27 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [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,
+        //   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;
+      }
+
+      :where(& > *) {
+        transition: transform var(--touchglass-transition-duration) allow-discrete ease-out;
+        will-change: transform;
+      }
+    }
+  }
+}

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/_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/_fwd.navbar.scss

@@ -0,0 +1,41 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  // principal-stack > tool-bar-item {
+  //   position: absolute;
+  //   transition: transform 2s ease-out;
+  // }
+
+  // ::slotted(tool-bar-item) {
+  //   background-color: red;
+  // }
+
+  // toolbar {
+  //   display: grid;
+  //   grid-auto-flow: column;
+  //   column-gap: 10px;
+  //   grid-column: 1 / -1; // span all columns
+  //   grid-row: 1 / -1; // span all rows
+  // }
+
+  tool-bar-item,
+  tool-bar-item-group {
+    &.fwn {
+      // BUG: Safari doesn't enforce scaling without this here again redundantly!
+      // @include mixins.vt-toolbar-cell-offscreen-keyframe;
+    }
+
+    &.fwnn {
+      @include mixins.vt-toolbar-cell-onscreen-keyframe;
+
+      @starting-style {
+        @include mixins.vt-toolbar-cell-offscreen-keyframe;
+      }
+    }
+
+    &.fwnn.fwn {
+      @include mixins.vt-toolbar-cell-offscreen-keyframe;
+    }
+  }
+}

package/scss/transitions/_fwd.scss

@@ -0,0 +1,24 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  scroll-view {
+    // Make sure old/outgoing elements can NOT be interacted with (new elements are already stacked higher)
+    &.#{vars.$vt-fwd-class-name} {
+      pointer-events: none;
+    }
+
+    &.fwdd {
+      --scroll-view-translate: translateX(var(--view-transition-principal-x));
+
+      --scroll-view-box-shadow: var(--screen-box-shadow);
+
+      @starting-style {
+        --scroll-view-translate: translateX(var(--view-transition-trailing-x));
+      }
+    }
+
+    &.fwdd.#{vars.$vt-fwd-class-name} {
+      --scroll-view-translate: 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

@@ -0,0 +1,74 @@
+@use '../vars';
+@use '../mixins';
+
+@layer #{vars.$transitions-layer} {
+  @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,
+      &.bwd,
+      &.bwdd {
+        transition:
+          transform var(--view-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, scroll-position;
+      }
+    }
+
+    tool-bar-item,
+    tool-bar-item-group {
+      &.fwn,
+      &.fwnn,
+      &.bwn,
+      &.bwnn {
+        transition:
+          transform var(--view-transition-duration) ease-out allow-discrete,
+          opacity var(--view-transition-duration) ease-out allow-discrete,
+          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;
+      // }
+      // }
+    }
+
+    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) 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;
+
+      @include mixins.make-backdrop-transitionable;
+    }
+  }
+}

package/scss/transitions/_menu-view.scss

@@ -0,0 +1,28 @@
+@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;
+        }
+
+        &::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/_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/_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,20 @@
+@use '../vars';
+
+@layer #{vars.$transitions-layer} {
+  @media (prefers-reduced-motion: no-preference) {
+    [is='tab-bar'] {
+      > [is='form-view'] {
+        :where(&) {
+          transition: transform var(--sidebar-transition-duration) ease-out allow-discrete;
+          will-change: transform;
+        }
+      }
+    }
+  }
+}
+
+@keyframes ipad_form_view_slide_up_offedge {
+  to {
+    opacity: 0;
+  }
+}

package/scss/utils/_frame.scss

@@ -0,0 +1,103 @@
+@use 'sass:math';
+@use '../vars';
+
+$self-map: (
+  leading: start,
+  center: center,
+  trailing: end,
+  fill: stretch,
+);
+
+@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\: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;
+    }
+  }
+
+  // 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]) {
+      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;
+      }
+    }
+  }
+}
+
+@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

@@ -0,0 +1,54 @@
+@use '../vars';
+@use '../maps';
+
+@layer #{vars.$utils-layer} {
+  [background-style='grouped'] {
+    :where(&) {
+      --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(--secondaryGroupedBackground);
+        // --tertiaryBackground: var(--tertiaryGroupedBackground);
+      }
+    }
+  }
+
+  @each $k, $v in maps.$foreground-tokens {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
+    }
+  }
+
+  @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

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

package/scss/utils/_spacing.scss

@@ -0,0 +1,25 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use '../vars';
+
+@layer #{vars.$utils-layer} {
+  // general utils
+  @for $i from 0 through 50 {
+    :where([padding-horizontal='#{$i}']) {
+      padding-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([padding-vertical='#{$i}']) {
+      padding-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-horizontal='#{$i}']) {
+      margin-inline: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+
+    :where([margin-vertical='#{$i}']) {
+      margin-block: #{math.div(math.round(math.div($i, 10) * 10), 10)}rem;
+    }
+  }
+}