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

package/scss/placeholders/_lists.scss

@@ -1,7 +1,9 @@
 @use '../vars';
 @use '../mixins';
 
-@layer #{vars.$components-layer} {
+$list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker-view, menu-view, menu-view *, whatever-name)';
+
+@layer #{vars.$list-components-layer} {
   %list {
     :where(&) {
       background-color: var(--list--host-background-color,);
@@ -13,9 +15,9 @@
     }
 
     // componentize buttons
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       // :where(&:is(summary:not([is='disclosure-group'] [is='disclosure-group'] summary))) {
       //   box-shadow: inset 0 0 4px magenta;
       // }
@@ -76,19 +78,18 @@
     //   }
     // }
 
-    // SECTION: wire gaps
-    :not([slot], section-view) ~ section-view {
-      :where(&) {
+    // SECTION: wire gaps between
+    // NOTE: apply gap to top of sections when adjacent to any
+    // :not([slot], section-view) ~ section-view:not([slot]),
+    // section-view:not([slot]) ~ section-view:not([slot]) {
+    :not([slot]) ~ section-view:not([slot]) {
+      :where(&:not(menu-view *)) {
         padding-block-start: var(--list--section-gap,);
       }
     }
-    section-view:not([slot]) ~ section-view {
-      :where(&) {
-        padding-block-start: var(--list--section-gap,);
-      }
-    }
-    section-view:has(~ :not([slot], section-view)) {
-      :where(&) {
+    // NOTE: apply to bottom of sections when they have non-section adjacents
+    section-view:not([slot]):has(~ :not([slot], section-view)) {
+      :where(&:not(menu-view *)) {
         padding-block-end: var(--list--section-gap,);
       }
     }
@@ -97,29 +98,32 @@
     // padding-bottom: calc(var(--list--section-gap, 0px) / 2);
     //   }
     // }
-    :not([slot], [is='disclosure-group']) ~ [is='disclosure-group'] {
-      :where(&) {
+    // NOTE: apply gap to top of details when adjacent to any(except summary)
+    // :not([slot], [is='disclosure-group'], summary) ~ [is='disclosure-group']:not([slot]) {
+    :not([slot], summary) ~ [is='disclosure-group']:not([slot]) {
+      :where(&:not(menu-view *)) {
         margin-block-start: var(--list--details-gap,);
       }
     }
-    [is='disclosure-group']:not([slot]) ~ [is='disclosure-group'] {
-      :where(&) {
-        margin-block-start: calc(var(--list--details-gap, 0px) / 2);
-      }
-    }
-    [is='disclosure-group']:has(~ :not([slot], [is='disclosure-group'])) {
-      :where(&) {
+    // [is='disclosure-group']:not([slot]) ~ [is='disclosure-group']:not([slot]) {
+    //   :where(&:not(menu-view *)) {
+    //     margin-block-start: calc(var(--list--details-gap, 0px) / 2);
+    //   }
+    // }
+    // NOTE: apply to bottom of details when they have non-details adjacents
+    [is='disclosure-group']:not([slot]):has(~ :not([slot], [is='disclosure-group'])) {
+      :where(&:not(menu-view *)) {
         margin-block-end: var(--list--details-gap,);
       }
     }
-    [is='disclosure-group']:has(~ [is='disclosure-group']:not([slot])) {
-      :where(&) {
-        margin-block-end: calc(var(--list--details-gap, 0px) / 2);
-      }
-    }
+    // [is='disclosure-group']:not([slot]):has(~ [is='disclosure-group']:not([slot])) {
+    //   :where(&:not(menu-view *)) {
+    //     margin-block-end: calc(var(--list--details-gap, 0px) / 2);
+    //   }
+    // }
 
     // SECTION: wire paddings
-    :where(&) {
+    :where(&:not(menu-view *)) {
       --itempadistart: var(--list--item-padding-inline-start, 0rem);
       --itempadiend: calc(var(--list--item-padding-inline-end, 0rem) + var(--list--accessories-size, 0rem));
       --itempadbstart: var(--list--item-padding-block-start,);
@@ -140,14 +144,11 @@
     }
 
     // SECTION: overwrites for details
-    [is='disclosure-group'] {
+    [is='disclosure-group']:not(menu-view *) {
       > :not(summary) {
         :where(&) {
           --itemface: var(--list--details-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selecteddetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
           --itemactiveface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--details-color, var(--list--item-color,));
@@ -158,14 +159,8 @@
       > summary {
         :where([is='disclosure-group'][open] &) {
           --itemface: var(--list--opendetails-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
-          --itemactiveface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
+          --itemactiveface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--opendetails-color, var(--list--item-color,));
           --itemhighlighttext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -186,20 +181,14 @@
             );
 
             --itemtext: var(--list--opensummary-color, var(--list--item-color,));
-            --itemhighlighttext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
-            --itemactivetext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
+            --itemhighlighttext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+            --itemactivetext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
           }
         }
       }
     }
-    > [is='disclosure-group'],
-    > section-view > [is='disclosure-group'] {
+    > [is='disclosure-group']:not(menu-view *),
+    > section-view > [is='disclosure-group']:not(menu-view *) {
       --disclosure-style: var(--list--rootsummary-marker-display,);
 
       > summary {
@@ -215,14 +204,8 @@
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--item-color,));
-          --itemhighlighttext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
-          --itemactivetext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
+          --itemhighlighttext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+          --itemactivetext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
 
           // overwrite extra stuff for rootsummary
           // outline: red solid 4px;
@@ -244,17 +227,11 @@
           --itemface: var(--list--rootsummary-background-color, var(--list--opensummary-background-color, var(--list--item-background-color,)));
           --itemhighlightface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
           --itemactiveface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--opensummary-color, var(--list--item-color,)));
@@ -271,9 +248,9 @@
     }
 
     // SECTION: add borders + arrows
-    > :not([slot]) ~ :not([slot], section-view),
-    section-view > :not([slot]) ~ :not([slot], section-view),
-    [is='disclosure-group'] > :not([slot]) ~ :not([slot], section-view) {
+    > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    section-view > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    [is='disclosure-group'] > :not([slot]) ~ :not([slot], section-view, menu-view *) {
       :where(&) {
         position: relative;
 
@@ -319,9 +296,9 @@
     }
 
     // SECTION: sharpen top corners
-    > :not([slot]) ~ :not([slot], section-view),
-    section-view > :not([slot]) ~ :not([slot], section-view),
-    [is='disclosure-group'] > :not([slot]) ~ :not([slot]) {
+    > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    section-view > :not([slot]) ~ :not([slot], section-view, menu-view *),
+    [is='disclosure-group'] > :not([slot]) ~ :not([slot], menu-view *) {
       :where(&) {
         // outline: yellow solid 5px;
         --itemradiustl: var(--list--adjacentitem-border-radius, var(--list--item-border-radius,)); //0 0;
@@ -340,10 +317,10 @@
     }
 
     // SECTION: sharpen bottom corners
-    > :not([slot]):has(~ :not([slot], section-view)),
-    section-view > :not([slot]):has(~ :not([slot], section-view)),
-    [is='disclosure-group'] > :not([slot], summary):has(~ :not([slot])),
-    [is='disclosure-group']:not([data-state='closed']) > summary {
+    > :not([slot]):has(~ :not([slot], section-view, menu-view *)),
+    section-view > :not([slot]):has(~ :not([slot], section-view, menu-view *)),
+    [is='disclosure-group'] > :not([slot], summary, menu-view *):has(~ :not([slot])),
+    [is='disclosure-group']:not([data-state='closed'], menu-view *) > summary {
       :where(&) {
         // outline: green solid 5px;
         --itemradiusbl: var(--list--adjacentitem-border-radius, var(--list--item-border-radius,)); //0 0;
@@ -374,31 +351,32 @@
     // }
 
     // SECTION: style section heders/footers
-    section-view:not(section-view section-view) {
-      :where(&)::part(section-footer-stack),
-      :where(&)::part(section-header-stack) {
-        // outline: magenta 4px solid;
-        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px))
-          calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
+    section-view:not(section-view section-view, menu-view *) {
+      :where(&) {
+        &::part(section-footer-stack),
+        &::part(section-header-stack) {
+          // outline: magenta 4px solid;
+          padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px)) calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
 
-        margin-inline: calc(var(--list--root-padding-inline) * -1);
+          margin-inline: calc(var(--list--root-padding-inline) * -1);
 
-        padding-block: 1px;
-      }
+          padding-block: 1px;
+        }
 
-      :where(&)::part(section-header-stack) {
-        top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+        &::part(section-header-stack) {
+          top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
 
-        position: sticky;
+          position: sticky;
 
-        // backdrop-filter: blur(20px);
+          // backdrop-filter: blur(20px);
 
-        // text-shadow: 0 0 5px var(--face);
+          // text-shadow: 0 0 5px var(--face);
+        }
       }
     }
 
     // SECTION: Enable 2-col layout
-    &[columns='2'] {
+    &[columns='2']:not(menu-view *) {
       :where(&) {
         --list--host-grid-template-columns: repeat(2, minmax(0, 1fr));
 
@@ -482,26 +460,11 @@
 
     // SECTION: add accessories
     // &:has(summary[marker-placement='leading']) {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
-      // --itempadistart: 4rem;
-
-      // --item-accessory-size: 24px;
-
-      // --list--item-grid-template-columns: minmax(0, 1fr) 50px;
-
-      // &:not(:is(button)) {
-      //   --list--accessories-display: none;
-      //   // --list--accessories-padding-inline-end: 24px;
-      // }
-
-      // &:is(button) {
-      // position: relative;
-      // display: grid;
-      // grid-template-columns: minmax(0, 1fr) 24px;
-
-      &:is(button) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
+      // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
+      &:is(navigation-split-view button[navigation-link], navigation-stack button[navigation-link]) {
         :where(&) {
           position: relative;
 
@@ -522,7 +485,6 @@
           }
         }
       }
-      // }
     }
     // }
     // [is='disclosure-group'] summary [slot='marker'] {
@@ -533,23 +495,62 @@
     //     --itempadistart: calc(calc(var(--root-font-size) * 1px) * var(--list--accessory-size) + var(--list--item-padding-inline-start, 0px));
     //   }
     // }
+
+    // SECTION: add tints
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
+      // NOTE: drill-in chevron show up only on nav-link buttons. Paddings and all other props have already been taken over!
+      // &:is(button:not([is='navigation-link'])) {
+      //   :where(&) {
+      //     --itemtext: blue;
+      //   }
+      // }
+      &:is(label-view[list-item-tint]) {
+        :where(&[list-item-tint] > [slot='icon']) {
+          color: var(--accentColor);
+        }
+      }
+      // &:is(button[list-item-tint='red']) {
+      //   :where(&) {
+      //     --itemtext: red;
+
+      //     --insetgroupedlist-highlighteditem-background-color:red;
+      //     --insetgroupedlist-highlighteditem-color:red;
+      //   }
+      // }
+    }
+
+    // // SECTION: add searchable
+    // > [slot='searchable'] {
+    //   :where(&) {
+    //     position: sticky;
+
+    //     top: 20px
+
+    //     background: red;
+    //   }
+    // }
   }
 }
 
 @layer #{vars.$colors-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       @include mixins.add-focus-visible-state {
         --itemface: var(--itemhighlightface,);
         --itemtext: var(--itemhighlighttext,);
 
         --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-        --secondary: var(--itemtext);
-        --blue: var(--itemtext);
+        > * {
+          @include mixins.takeover-color-vars(item);
+          // --secondary: var(--itemtext);
+          // --blue: var(--itemtext);
+        }
       }
     }
   }
@@ -558,9 +559,9 @@
 @layer #{vars.$ui-layer} {
   // componentize
   %list {
-    > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    section-view > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name),
-    [is='disclosure-group'] > :not([slot], section-view, [is='disclosure-group'], picker-view, menu-view, whatever-name) {
+    > #{$list-item-selector},
+    section-view > #{$list-item-selector},
+    [is='disclosure-group'] > #{$list-item-selector} {
       // :where(&:is(button)) {
       @include mixins.add-jsactive-state {
         --itemface: var(--itemactiveface,);
@@ -568,8 +569,11 @@
 
         --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-        --secondary: var(--itemtext);
-        --blue: var(--itemtext);
+        > * {
+          @include mixins.takeover-color-vars(item);
+        }
+        // --secondary: var(--itemtext);
+        // --blue: var(--itemtext);
       }
 
       &[aria-selected='true'] {
@@ -579,8 +583,11 @@
 
           --list--separator-background-color: var(--list--highlighteditem-separator-background-color,);
 
-          --secondary: var(--itemtext);
-          --blue: var(--itemtext);
+          > * {
+            @include mixins.takeover-color-vars(item);
+            // --secondary: var(--itemtext);
+            // --blue: var(--itemtext);
+          }
         }
       }
       // }

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/_frame.scss

@@ -1,6 +1,13 @@
 @use '../vars';
 @use 'sass:math';
 
+$self-map: (
+  leading: start,
+  center: center,
+  trailing: end,
+  fill: stretch,
+);
+
 @layer #{vars.$utils-layer} {
   :where([frame\:width='infinity']) {
     inline-size: 100%;
@@ -17,6 +24,41 @@
     }
   }
 
+  // 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};
+      }
+    }
+  }
+
+  // :where([frame\:alignment='top']) {
+  //   align-self: start;
+  // }
+  // :where([frame\:alignment='leading']) {
+  //   justify-self: start;
+  // }
+
   // :where([frame-width='infinity']) {
   //   place-items: stretch; //justify-self: stretch;
   // }