@swiftwc/ui 0.0.0-dev.85 → 0.0.0-dev.86

package/scss/components/_table-view.scss

@@ -1,6 +1,7 @@
 @use 'sass:string';
 @use 'sass:map';
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -207,13 +208,13 @@ $table-elses: (
       // SECTION: ifs polyfill
       @supports not (x: #{string.unquote('if(else:red)')}) {
         :where(&:not([table-style])) {
-          @each $v in vars.$table-styles {
+          @each $v in maps.$table-styles-names {
             @container style(--table-style: #{$v}) {
               @include mixins.write-props(map.get($table-ifs, $v));
             }
           }
         }
-        @each $v in vars.$table-styles {
+        @each $v in maps.$table-styles-names {
           :where(&[table-style='#{$v}']) {
             @include mixins.write-props(map.get($table-ifs, $v));
           }

package/scss/components/_toggle-view.scss

@@ -1,6 +1,6 @@
+@use 'sass:string';
 @use '../vars';
 @use '../mixins';
-@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   toggle-view {

package/scss/components/_v-stack.scss

@@ -1,10 +1,9 @@
-@use '../vars';
 @use 'sass:string';
 @use 'sass:list';
+@use '../vars';
+@use '../maps';
 @use '../mixins';
 
-$v-stack-templates: ((auto minmax(0, 1fr)), (auto auto minmax(0, 1fr)), (auto auto auto minmax(0, 1fr)), (auto auto auto auto minmax(0, 1fr)));
-
 @layer #{vars.$components-layer} {
   v-stack {
     :where(&) {
@@ -20,6 +19,6 @@ $v-stack-templates: ((auto minmax(0, 1fr)), (auto auto minmax(0, 1fr)), (auto au
     // max-width: 100%;
     // }
 
-    @include mixins.make-template($v-stack-templates, grid-template-rows);
+    @include mixins.make-template(maps.$stack-templates-list-vals, grid-template-rows);
   }
 }

package/scss/mixins/_color.scss

@@ -1,8 +1,8 @@
-@use '../vars';
-@use '../functions';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:list';
+@use '../vars';
+@use '../functions';
 
 @mixin wire-tinted-glass($prop) {
   --#{$prop}face: light-dark(var(--accentColor), var(--accentColor));

package/scss/mixins/_index.scss

@@ -1,8 +1,8 @@
-@use '../vars';
-@use '../functions';
 @use 'sass:string';
 @use 'sass:map';
 @use 'sass:list';
+@use '../vars';
+@use '../functions';
 
 @mixin span-all {
   grid-column: 1 / -1; // span all columns

package/scss/placeholders/_buttons.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 
 @layer #{vars.$components-layer} {
@@ -26,7 +27,7 @@
 
     @include mixins.takeover-button-slots;
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       // @if (regular != $size) {
       &[control-size='#{$size}'] {
         :where(&) {

package/scss/utils/_frame.scss

@@ -1,5 +1,5 @@
-@use '../vars';
 @use 'sass:math';
+@use '../vars';
 
 $self-map: (
   leading: start,

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

package/scss/utils/_stacks.scss

@@ -1,106 +1,15 @@
-@use '../vars';
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:list';
-
-$inline-map: (
-  leading: (
-    (justify-items (start)),
-    (justify-content (start)),
-  ),
-  'leading fill': (
-    (justify-items (start)),
-    (justify-content (stretch)),
-  ),
-  center: (
-    (justify-items (center)),
-    (justify-content (center)),
-  ),
-  trailing: (
-    (justify-items (end)),
-    (justify-content (end)),
-  ),
-  fill: (
-    (justify-items (stretch)),
-    (justify-content (stretch)),
-  ),
-  space-between: (
-    (justify-content (space-between)),
-  ),
-);
-
-$block-map: (
-  leading: (
-    (align-items (start)),
-    (align-content (start)),
-  ),
-  'leading fill': (
-    (align-items (start)),
-    (align-content (stretch)),
-  ),
-  center: (
-    (align-items (center)),
-    (align-content (center)),
-  ),
-  trailing: (
-    (align-items (end)),
-    (align-content (end)),
-  ),
-  fill: (
-    (align-items (stretch)),
-    (align-content (stretch)),
-  ),
-  space-between: (
-    (align-content (space-between)),
-  ),
-);
-
-$h-placement-map: (
-  'fill': (
-    (place-items (stretch)),
-    (place-content (stretch)),
-  ),
-  'leading fill': (
-    (place-items (stretch start)),
-    (place-content (stretch start)),
-  ),
-  'fill leading': (
-    (place-items (start stretch)),
-    (place-content (start stretch)),
-  ),
-  'fill space-between': (
-    (align-content (space-between)),
-    (justify-items (stretch)),
-    (justify-content (stretch)),
-  ),
-);
-
-$v-placement-map: (
-  'fill': (
-    (place-items (stretch)),
-    (place-content (stretch)),
-  ),
-  'leading fill': (
-    (place-items (start stretch)),
-    (place-content (start stretch)),
-  ),
-  'fill leading': (
-    (place-items (stretch start)),
-    (place-content (stretch start)),
-  ),
-  'space-between fill': (
-    (align-content (space-between)),
-    (justify-items (stretch)),
-    (justify-content (stretch)),
-  ),
-);
+@use '../vars';
+@use '../maps';
 
 @layer #{vars.$utils-layer} {
   // Vertical alignment becomes the common tweak
   h-stack,
   v-flex-stack {
     // main axis (horizontal/inline)
-    @each $k, $declarations in $inline-map {
+    @each $k, $declarations in maps.$inline-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
@@ -109,7 +18,7 @@ $v-placement-map: (
     }
 
     // cross axis (vertical/block)
-    @each $k, $declarations in $block-map {
+    @each $k, $declarations in maps.$block-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
@@ -118,7 +27,7 @@ $v-placement-map: (
     }
 
     // placement="fill leading" -> short cut for distribution="fill" alignment="leading"
-    @each $k, $declarations in $h-placement-map {
+    @each $k, $declarations in maps.$inline-placement-map {
       &[placement='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};
@@ -143,7 +52,7 @@ $v-placement-map: (
   v-stack,
   h-flex-stack {
     // block dir for items+content
-    @each $k, $declarations in $block-map {
+    @each $k, $declarations in maps.$block-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
@@ -152,7 +61,7 @@ $v-placement-map: (
     }
 
     // inline dir for items+content
-    @each $k, $declarations in $inline-map {
+    @each $k, $declarations in maps.$inline-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
@@ -161,7 +70,7 @@ $v-placement-map: (
     }
 
     // placement="leading fill" -> shortcut for distribution="leading" alignment="fill"
-    @each $k, $declarations in $v-placement-map {
+    @each $k, $declarations in maps.$block-placement-map {
       &[placement='#{$k}'] {
         @each $decl in $declarations {
           #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')};