@swiftwc/ui 0.0.0-dev.97 → 0.0.0-dev.98

package/package.json

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

package/scss/utils/_frame.scss

@@ -16,9 +16,15 @@ $self-map: (
     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;
     }
@@ -52,53 +58,6 @@ $self-map: (
     }
   }
 
-  // :where([frame\:alignment='top']) {
-  //   align-self: start;
-  // }
-  // :where([frame\:alignment='leading']) {
-  //   justify-self: start;
-  // }
-
-  // :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;
@@ -124,3 +83,21 @@ $self-map: (
     }
   }
 }
+
+@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/_stacks.scss

@@ -41,7 +41,7 @@
   h-flex-stack {
     // block dir for items+content
     @each $k, $declarations in maps.$block-map {
-      &[distribution='#{$k}'] {
+      :where(&[distribution='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
@@ -50,7 +50,7 @@
 
     // inline dir for items+content
     @each $k, $declarations in maps.$inline-map {
-      &[alignment='#{$k}'] {
+      :where(&[alignment='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
@@ -59,7 +59,7 @@
 
     // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
     @each $k, $declarations in maps.$block-placement-map {
-      &[placement='#{$k}'] {
+      :where(&[placement='#{$k}']) {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
         }
@@ -99,3 +99,14 @@
     }
   }
 }
+
+@layer #{vars.$components-layer} {
+  // readable 1/2
+  v-stack {
+    :where(&[readable]) {
+      @each $decl in map.get(maps.$block-placement-map, 'leading fill') {
+        #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //->[placement='leading fill']->[distribution='leading'][alignment='fill']
+      }
+    }
+  }
+}