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

package/scss/components/_h-stack.scss

@@ -1,25 +1,8 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:string';
 @use 'sass:list';
-
-$h-stack-templates: (
-  (auto minmax(0, 1fr)),
-  (minmax(0, 1fr) auto),
-  (auto minmax(0, 1fr) auto auto),
-  (auto minmax(0, 1fr) auto),
-  (repeat(1, minmax(0, 1fr))),
-  (repeat(2, minmax(0, 1fr))),
-  (repeat(3, minmax(0, 1fr))),
-  (repeat(4, minmax(0, 1fr))),
-  (repeat(5, minmax(0, 1fr))),
-  (repeat(6, minmax(0, 1fr))),
-  (repeat(7, minmax(0, 1fr))),
-  (repeat(8, minmax(0, 1fr))),
-  (repeat(9, minmax(0, 1fr))),
-  (repeat(10, minmax(0, 1fr))),
-  (repeat(2, minmax(0, 1fr)) auto)
-);
+@use '../vars';
+@use '../maps';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   h-stack {
@@ -40,6 +23,6 @@ $h-stack-templates: (
     //   }
     // }
 
-    @include mixins.make-template($h-stack-templates, grid-template-columns);
+    @include mixins.make-template(maps.$stack-templates-list-vals, grid-template-columns);
   }
 }

package/scss/components/_label-view.scss

@@ -1,7 +1,8 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:string';
 @use 'sass:map';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
 
 // scalpel precision
 @property --label-gap {
@@ -225,9 +226,9 @@ $label-line-ifs: (
     // vars
     @supports (x: #{string.unquote('if(else:red)')}) {
       :where(&) {
-        --label--titlestack-font-size: if(#{if-chain(vars.$label-fonts, font-size)});
-        --label--titlestack-line-height: if(#{if-chain(vars.$label-fonts, line-height)});
-        --label--titlestack-font-weight: if(#{if-chain(vars.$label-fonts, font-weight)});
+        --label--titlestack-font-size: if(#{if-chain(maps.$label-fonts-map, font-size)});
+        --label--titlestack-line-height: if(#{if-chain(maps.$label-fonts-map, line-height)});
+        --label--titlestack-font-weight: if(#{if-chain(maps.$label-fonts-map, font-weight)});
         // if(
         //   style(--label-font: callout): 0.5rem ; style(--label-font: large-title): 3rem ; style(--label-font: large-title): 3rem ;
         // );
@@ -276,13 +277,13 @@ $label-line-ifs: (
 
     @supports not (x: #{string.unquote('if(else:red)')}) {
       :where(&:not([label-style])) {
-        @each $v in vars.$label-styles {
+        @each $v in maps.$label-styles-names {
           @container style(--label-style: #{$v}) {
             @include set-label-style(h-#{$v});
           }
         }
       }
-      @each $v in vars.$label-styles {
+      @each $v in maps.$label-styles-names {
         :where(&[label-style='#{$v}']) {
           @include set-label-style(h-#{$v});
         }
@@ -302,14 +303,14 @@ $label-line-ifs: (
       }
       // AGAIN
       :where(&:not([label-style])) {
-        @each $v in vars.$label-styles {
+        @each $v in maps.$label-styles-names {
           @container style(--label-style: #{$v}) and style(--label-flow: vertical) {
             @include set-label-style(v-#{$v});
           }
         }
       }
       @container style(--label-flow: vertical) {
-        @each $v in vars.$label-styles {
+        @each $v in maps.$label-styles-names {
           :where(&[label-style='#{$v}']) {
             @include set-label-style(v-#{$v});
           }
@@ -339,7 +340,7 @@ $label-line-ifs: (
         @include mixins.write-props(map.get($label-truncation-ifs, tail)); //@include set-label-truncation-mode(tail);
       }
       //
-      @each $label, $size in vars.$label-fonts {
+      @each $label, $size in maps.$label-fonts-map {
         @include if-chain(--label-font, font, $label) {
           @include mixins.set-label-font($label);
         }

package/scss/components/_list-view.scss

@@ -1,6 +1,7 @@
 @use 'sass:string';
 @use 'sass:map';
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -131,7 +132,7 @@ $list-elses: (
       // SECTION: ifs polyfill
       @supports not (x: #{string.unquote('if(else:red)')}) {
         :where(&:not([list-style])) {
-          @each $v in vars.$list-styles {
+          @each $v in maps.$list-styles-names {
             @container style(--list-style: #{$v}) {
               --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
 
@@ -139,7 +140,7 @@ $list-elses: (
             }
           }
         }
-        @each $v in vars.$list-styles {
+        @each $v in maps.$list-styles-names {
           :where(&[list-style='#{$v}']) {
             --list-style: #{$v}; // NOTE: used ONLY for tinted buttons
 

package/scss/components/_picker-view.scss

@@ -1,7 +1,8 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:string';
 @use 'sass:map';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
 
 $picker-ifs: (
   menu: (
@@ -269,13 +270,13 @@ $picker-ifs: (
     // SECTION: ifs polyfill
     @supports not (x: #{string.unquote('if(else:red)')}) {
       :where(&:not([picker-style])) {
-        @each $v in vars.$picker-styles {
+        @each $v in maps.$picker-styles-names {
           @container style(--picker-style: #{$v}) {
             @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
           }
         }
       }
-      @each $v in vars.$picker-styles {
+      @each $v in maps.$picker-styles-names {
         :where(form &[picker-style='#{$v}']) {
           @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
         }

package/scss/components/_scroll-view-proxy.scss

@@ -1,7 +1,7 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:string';
 @use 'sass:map';
+@use '../vars';
+@use '../mixins';
 
 @layer #{vars.$components-layer} {
   // NOTE: A wrapper to {hv}-stack

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), ' ')};