@swiftwc/ui 0.0.0-dev.79 → 0.0.0-dev.80

package/generated/components/h-stack.d.ts

@@ -2,8 +2,6 @@
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
- * @attr {leading|center|trailing} frame:alignment - The alignment of the stack on the cross-axis
- *
  * @attr {@alignmentSet} alignment - The cross-axis alignment
  * @attr {@distributionSet} distribution - The main-axis alignment
  * @attr {@placementSet} placement - The main-axis alignment

package/generated/components/h-stack.js

@@ -3,8 +3,6 @@ import { devFlags } from '../internal/utils';
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
- * @attr {leading|center|trailing} frame:alignment - The alignment of the stack on the cross-axis
- *
  * @attr {@alignmentSet} alignment - The cross-axis alignment
  * @attr {@distributionSet} distribution - The main-axis alignment
  * @attr {@placementSet} placement - The main-axis alignment

package/generated/components/v-stack.d.ts

@@ -3,8 +3,6 @@
  *
  * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
  *
- * @attr {leading|center|trailing} frame:alignment - The alignment of the stack on the cross-axis
- *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
  * @attr {@alignmentSet} alignment - The cross-axis alignment

package/generated/components/v-stack.js

@@ -4,8 +4,6 @@ import { devFlags } from '../internal/utils';
  *
  * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
  *
- * @attr {leading|center|trailing} frame:alignment - The alignment of the stack on the cross-axis
- *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
  * @attr {@alignmentSet} alignment - The cross-axis alignment

package/generated/css/index.css

@@ -6403,12 +6403,62 @@
   :where([frame\:max-width="100cqi"]) {
     max-inline-size: 100cqi;
   }
-  :where([frame\:alignment=top]) {
-    align-self: top;
+  :where(scroll-view > [frame\:alignment=leading],
+  v-stack > [frame\:alignment=leading]) {
+    justify-self: start;
+  }
+  :where(scroll-view > [frame\:anchor=leading],
+  v-stack > [frame\:anchor=leading]) {
+    align-self: start;
+  }
+  :where(scroll-view > [frame\:alignment=center],
+  v-stack > [frame\:alignment=center]) {
+    justify-self: center;
+  }
+  :where(scroll-view > [frame\:anchor=center],
+  v-stack > [frame\:anchor=center]) {
+    align-self: center;
+  }
+  :where(scroll-view > [frame\:alignment=trailing],
+  v-stack > [frame\:alignment=trailing]) {
+    justify-self: end;
   }
-  :where([frame\:alignment=leading]) {
+  :where(scroll-view > [frame\:anchor=trailing],
+  v-stack > [frame\:anchor=trailing]) {
+    align-self: end;
+  }
+  :where(scroll-view > [frame\:alignment=fill],
+  v-stack > [frame\:alignment=fill]) {
+    justify-self: stretch;
+  }
+  :where(scroll-view > [frame\:anchor=fill],
+  v-stack > [frame\:anchor=fill]) {
+    align-self: stretch;
+  }
+  :where(h-stack > [frame\:alignment=leading]) {
+    align-self: start;
+  }
+  :where(h-stack > [frame\:anchor=leading]) {
     justify-self: start;
   }
+  :where(h-stack > [frame\:alignment=center]) {
+    align-self: center;
+  }
+  :where(h-stack > [frame\:anchor=center]) {
+    justify-self: center;
+  }
+  :where(h-stack > [frame\:alignment=trailing]) {
+    align-self: end;
+  }
+  :where(h-stack > [frame\:anchor=trailing]) {
+    justify-self: end;
+  }
+  :where(h-stack > [frame\:alignment=fill]) {
+    align-self: stretch;
+  }
+  :where(h-stack > [frame\:anchor=fill]) {
+    justify-self: stretch;
+  }
   @media (prefers-reduced-motion: no-preference) {
     :where([slow]) {
       visibility: visible;
@@ -6796,14 +6846,6 @@
   h-stack[spacing="50"]) {
     gap: 5rem;
   }
-  :where(v-stack[frame\:alignment=leading],
-  h-stack[frame\:alignment=leading]) {
-    justify-self: start;
-  }
-  :where(v-stack[frame\:alignment=center],
-  h-stack[frame\:alignment=center]) {
-    justify-self: center;
-  }
   :where(v-stack[padding],
   h-stack[padding],
   h-flex-stack[padding],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.79",
+  "version": "0.0.0-dev.80",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

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,13 +24,41 @@
     }
   }
 
-  :where([frame\:alignment='top']) {
-    align-self: top;
+  // 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};
+      }
+    }
   }
-  :where([frame\:alignment='leading']) {
-    justify-self: start;
+
+  // // 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;
   // }

package/scss/utils/_stacks.scss

@@ -192,12 +192,12 @@ $v-placement-map: (
       }
     }
 
-    :where(&[frame\:alignment='leading']) {
-      justify-self: start;
-    }
-    :where(&[frame\:alignment='center']) {
-      justify-self: center;
-    }
+    // :where(&[frame\:alignment='leading']) {
+    //   justify-self: start;
+    // }
+    // :where(&[frame\:alignment='center']) {
+    //   justify-self: center;
+    // }
   }
 
   // padding reserved word for stacks

package/web-components.html-data/en.json

@@ -183,21 +183,6 @@
           "description": "\nDescription: The gap between the primary axis",
           "valueSet": "spacingSet"
         },
-        {
-          "name": "frame:alignment - The alignment of the stack on the cross",
-          "description": "Value Type: “leading” | “center” | “trailing”\n\nDescription: axis",
-          "values": [
-            {
-              "name": "leading"
-            },
-            {
-              "name": "center"
-            },
-            {
-              "name": "trailing"
-            }
-          ]
-        },
         {
           "name": "alignment - The cross",
           "description": "\nDescription: axis alignment",
@@ -644,21 +629,6 @@
             }
           ]
         },
-        {
-          "name": "frame:alignment - The alignment of the stack on the cross",
-          "description": "Value Type: “leading” | “center” | “trailing”\n\nDescription: axis",
-          "values": [
-            {
-              "name": "leading"
-            },
-            {
-              "name": "center"
-            },
-            {
-              "name": "trailing"
-            }
-          ]
-        },
         {
           "name": "spacing",
           "description": "\nDescription: The gap between the primary axis",