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

package/scss/_maps.scss

@@ -0,0 +1,256 @@
+$picker-styles-names: menu, navigation-link, sheet;
+$label-styles-names: icon-only, title-only, title-and-icon;
+$list-styles-names: inset, inset-grouped, sidebar;
+$form-styles-names: inset, inset-grouped, sidebar;
+$table-styles-names: inset;
+// $labeled-content-styles: vertical, horizontal;
+
+$stack-templates-list-vals: (
+  (minmax(0, 1fr)),
+  (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))),
+  (minmax(0, 1fr) auto),
+  (repeat(1, minmax(0, 1fr)) auto),
+  (repeat(2, minmax(0, 1fr)) auto),
+  (repeat(3, minmax(0, 1fr)) auto),
+  (repeat(4, minmax(0, 1fr)) auto),
+  (repeat(5, minmax(0, 1fr)) auto),
+  (repeat(6, minmax(0, 1fr)) auto),
+  (repeat(7, minmax(0, 1fr)) auto),
+  (repeat(8, minmax(0, 1fr)) auto),
+  (repeat(9, minmax(0, 1fr)) auto),
+  (repeat(10, minmax(0, 1fr)) auto),
+  (auto minmax(0, 1fr)),
+  (repeat(1, auto) minmax(0, 1fr)),
+  (repeat(2, auto) minmax(0, 1fr)),
+  (repeat(3, auto) minmax(0, 1fr)),
+  (repeat(4, auto) minmax(0, 1fr)),
+  (repeat(5, auto) minmax(0, 1fr)),
+  (repeat(6, auto) minmax(0, 1fr)),
+  (repeat(7, auto) minmax(0, 1fr)),
+  (repeat(8, auto) minmax(0, 1fr)),
+  (repeat(9, auto) minmax(0, 1fr)),
+  (repeat(10, auto) minmax(0, 1fr)),
+  (auto auto minmax(0, 1fr)),
+  (auto auto auto minmax(0, 1fr)),
+  (auto auto auto auto minmax(0, 1fr)),
+  (auto minmax(0, 1fr) auto),
+  (repeat(1, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(2, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(3, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(4, auto)),
+  (repeat(1, auto) minmax(0, 1fr) repeat(5, auto)),
+  (repeat(2, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(3, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(4, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(5, auto) minmax(0, 1fr) repeat(1, auto)),
+  (repeat(2, auto) minmax(0, 1fr) repeat(2, auto)),
+  (auto minmax(0, 1fr) auto auto)
+);
+
+$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)),
+  ),
+);
+
+$inline-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)),
+  ),
+);
+
+$block-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)),
+  ),
+);
+
+$label-fonts-map: (
+  footnote: (
+    size: 1rem,
+    line: 1rem,
+    weight: 400,
+  ),
+  caption2: (
+    size: 0.75rem,
+    line: calc(1 / 0.75),
+    weight: 400,
+  ),
+  caption: (
+    size: 0.875rem,
+    line: calc(1.25 / 0.875),
+    weight: 400,
+  ),
+  callout: (
+    size: 0.875rem,
+    line: 0.875rem,
+    weight: 400,
+  ),
+  body: (
+    size: 1rem,
+    line: calc(1.5 / 1),
+    weight: 400,
+  ),
+  subheadline: (
+    size: 1.125rem,
+    line: calc(1.75 / 1.125),
+    weight: 400,
+  ),
+  headline: (
+    size: 1.25rem,
+    line: calc(1.75 / 1.25),
+    weight: 500,
+  ),
+  title3: (
+    size: 1.5rem,
+    line: calc(2 / 1.5),
+    weight: 600,
+  ),
+  title2: (
+    size: 1.875rem,
+    line: calc(2.25 / 1.875),
+    weight: 600,
+  ),
+  title: (
+    size: 2.25rem,
+    line: calc(2.5 / 2.25),
+    weight: 600,
+  ),
+  large-title: (
+    size: 3rem,
+    line: 1,
+    weight: 700,
+  ),
+  extra-large-title: (
+    size: 3.75rem,
+    line: 1,
+    weight: 700,
+  ),
+);
+
+// button sizes
+$button-sizes-map: (
+  mini: (
+    default: (
+      padding: 0.2rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.2rem,
+      border-radius: 0.4rem,
+    ),
+  ),
+  regular: (
+    default: (
+      padding: 0.6rem,
+      border-radius: 1.2rem,
+    ),
+    fine: (
+      padding: 0.6rem,
+      border-radius: 0.8rem,
+    ),
+  ),
+  small: (
+    default: (
+      padding: 0.4rem,
+      border-radius: 1rem,
+    ),
+    fine: (
+      padding: 0.4rem,
+      border-radius: 0.6rem,
+    ),
+  ),
+  large: (
+    default: (
+      padding: 1.2rem,
+      border-radius: 2.4rem,
+    ),
+    fine: (
+      padding: 1.2rem,
+      border-radius: 1.4rem,
+    ),
+  ),
+);

package/scss/_vars.scss

@@ -1,5 +1,5 @@
-@use 'functions';
 @use 'sass:math';
+@use 'functions';
 
 $base-layer: sw-base !default;
 $components-layer: sw-components !default;
@@ -30,120 +30,7 @@ $ipad-landscape-bp: 68rem !default;
 
 $table-expanded-bp: 31rem !default;
 
-// SECTION: Defaults
-$picker-styles: menu, navigation-link, sheet;
-$label-styles: icon-only, title-only, title-and-icon;
-$list-styles: inset, inset-grouped, sidebar;
-$form-styles: inset, inset-grouped, sidebar;
-$table-styles: inset;
-$labeled-content-styles: vertical, horizontal;
-
-$label-fonts: (
-  footnote: (
-    size: 1rem,
-    line: 1rem,
-    weight: 400,
-  ),
-  caption2: (
-    size: 0.75rem,
-    line: calc(1 / 0.75),
-    weight: 400,
-  ),
-  caption: (
-    size: 0.875rem,
-    line: calc(1.25 / 0.875),
-    weight: 400,
-  ),
-  callout: (
-    size: 0.875rem,
-    line: 0.875rem,
-    weight: 400,
-  ),
-  body: (
-    size: 1rem,
-    line: calc(1.5 / 1),
-    weight: 400,
-  ),
-  subheadline: (
-    size: 1.125rem,
-    line: calc(1.75 / 1.125),
-    weight: 400,
-  ),
-  headline: (
-    size: 1.25rem,
-    line: calc(1.75 / 1.25),
-    weight: 500,
-  ),
-  title3: (
-    size: 1.5rem,
-    line: calc(2 / 1.5),
-    weight: 600,
-  ),
-  title2: (
-    size: 1.875rem,
-    line: calc(2.25 / 1.875),
-    weight: 600,
-  ),
-  title: (
-    size: 2.25rem,
-    line: calc(2.5 / 2.25),
-    weight: 600,
-  ),
-  large-title: (
-    size: 3rem,
-    line: 1,
-    weight: 700,
-  ),
-  extra-large-title: (
-    size: 3.75rem,
-    line: 1,
-    weight: 700,
-  ),
-);
-
-// button sizes
-$button-sizes: (
-  mini: (
-    default: (
-      padding: 0.2rem,
-      border-radius: 1rem,
-    ),
-    fine: (
-      padding: 0.2rem,
-      border-radius: 0.4rem,
-    ),
-  ),
-  regular: (
-    default: (
-      padding: 0.6rem,
-      border-radius: 1.2rem,
-    ),
-    fine: (
-      padding: 0.6rem,
-      border-radius: 0.8rem,
-    ),
-  ),
-  small: (
-    default: (
-      padding: 0.4rem,
-      border-radius: 1rem,
-    ),
-    fine: (
-      padding: 0.4rem,
-      border-radius: 0.6rem,
-    ),
-  ),
-  large: (
-    default: (
-      padding: 1.2rem,
-      border-radius: 2.4rem,
-    ),
-    fine: (
-      padding: 1.2rem,
-      border-radius: 1.4rem,
-    ),
-  ),
-);
+// SECTION: SVGs
 
 $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
 $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold

package/scss/base/_root.scss

@@ -1,7 +1,8 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:map';
 @use 'sass:string';
+@use '../vars';
+@use '../maps';
+@use '../mixins';
 
 @property --root-font-size {
   syntax: '<number>';
@@ -231,7 +232,7 @@
 
     // label-view
 
-    @each $label, $props in vars.$label-fonts {
+    @each $label, $props in maps.$label-fonts-map {
       --label-#{$label}-font-size: #{map.get($props, size)};
       --label-#{$label}-line-height: #{map.get($props, line)};
       --label-#{$label}-font-weight: #{map.get($props, weight)};
@@ -323,7 +324,7 @@
     --table-accessory-size: 1.2rem;
 
     // button sizes 1/2
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       $props: map.get($media, default);
       @if $props {
         @each $k, $v in $props {
@@ -341,7 +342,7 @@
     // fine
     @media (pointer: fine) {
       // button sizes 2/2
-      @each $size, $media in vars.$button-sizes {
+      @each $size, $media in maps.$button-sizes-map {
         $props: map.get($media, fine);
         @if $props {
           @each $k, $v in $props {

package/scss/colors/_index.scss

@@ -1,9 +1,9 @@
-@use '../vars';
-@use '../mixins';
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:list';
 @use 'sass:string';
+@use '../vars';
+@use '../mixins';
 
 $color-tokens: (
   // SECTION: grays

package/scss/components/_bordered-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -17,7 +18,7 @@
       }
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

package/scss/components/_bordered-prominent-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -13,7 +14,7 @@
       --btnpadbend: var(--regular-btn-padding);
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

package/scss/components/_disclosure-group.scss

@@ -1,6 +1,6 @@
+@use 'sass:string';
 @use '../vars';
 @use '../mixins';
-@use 'sass:string';
 
 @layer #{vars.$components-layer} {
   [is='disclosure-group'] {

package/scss/components/_form-view.scss

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

package/scss/components/_glass-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -19,7 +20,7 @@
       --btnpadbend: var(--regular-btn-padding);
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

package/scss/components/_glass-prominent-button.scss

@@ -1,4 +1,5 @@
 @use '../vars';
+@use '../maps';
 @use '../mixins';
 @use '../placeholders';
 
@@ -19,7 +20,7 @@
       --btnpadbend: var(--regular-btn-padding);
     }
 
-    @each $size, $media in vars.$button-sizes {
+    @each $size, $media in maps.$button-sizes-map {
       :where(&[control-size='#{$size}']) {
         --btnpadistart: var(--#{$size}-btn-padding);
         --btnpadiend: var(--#{$size}-btn-padding);

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