@swiftwc/ui 0.0.0-dev.17 → 0.0.0-dev.19

package/scss/components/_label-view.scss

@@ -3,6 +3,19 @@
 @use 'sass:string';
 @use 'sass:map';
 
+// scalpel precision
+@property --label-gap {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --label-image-size {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0;
+}
+
 // @property --label-style {
 //   syntax: 'title-and-icon | icon-only | title-only | automatic';
 //   inherits: true;
@@ -55,7 +68,8 @@ $label-line-ifs: (
     --label--host-align-items: center;
     --label--host-justify-items: normal;
 
-    --label--host-gap: 0.3rem;
+    --label-gap: 0.3rem;
+    --label--host-gap: var(--label-gap);
 
     --label--iconstack-display: grid;
     --label--titlestack-display: grid;
@@ -75,7 +89,8 @@ $label-line-ifs: (
     --label--host-align-items: normal;
     --label--host-justify-items: center;
 
-    --label--host-gap: 0.3rem;
+    --label-gap: 0.3rem;
+    --label--host-gap: var(--label-gap);
 
     --label--iconstack-display: grid;
     --label--titlestack-display: grid;
@@ -158,7 +173,10 @@ $label-line-ifs: (
       grid-template-rows: var(--label--host-grid-template-rows,);
       // grid-template-areas: 'label-image-stack label-title-stack';
 
-      gap: var(--label--host-gap,);
+      gap: var(--label--host-gap,); //;
+
+      --label-image-size: 2rem;
+      --label-imagestack-fontsize: var(--label-image-size);
       // gap: 0;
 
       white-space: var(--label--host-white-space,);
@@ -184,8 +202,8 @@ $label-line-ifs: (
       &::part(label-image-stack) {
         aspect-ratio: 1 / 1;
 
-        inline-size: var(--label-image-size, 2rem);
-        font-size: var(--label-image-size, 2rem);
+        inline-size: var(--label-imagestack-fontsize);
+        font-size: var(--label-imagestack-fontsize);
 
         // line-height: 1;
 
@@ -255,34 +273,23 @@ $label-line-ifs: (
         --label--host-grid-template-columns: if(
           style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
             style(--label-style: title-and-icon): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ;
-            else: if(
-              style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;)
-                ; else: minmax(0, 1fr) ;
-            )
-            ;
+            else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): minmax(0, 1fr) ; else: auto minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
         );
         --label--host-grid-template-rows: if(
           style(--label-style: icon-only): minmax(0, 1fr) ; style(--label-style: title-only): minmax(0, 1fr) ;
             style(--label-style: title-and-icon): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ;
-            else: if(
-              style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;)
-                ; else: minmax(0, 1fr) ;
-            )
-            ;
+            else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): if(style(--label-flow: vertical): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;) ; else: minmax(0, 1fr) ;) ;
         );
 
-        --label--host-gap: if(
-          style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;
-        );
+        --label-gap: if(style(--label-style: title-and-icon): 0.3rem ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): 0.3rem ;) ;);
+        --label--host-gap: if(style(--label-style: title-and-icon): var(--label-gap) ; else: if(style(--label--has-icon: yes) and style(--label--has-title: yes): var(--label-gap) ;) ;);
 
         --label--iconstack-display: if(
-          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ;
-            else: if(style(--label--has-icon: yes): grid ; else: none;) ;
+          style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
         );
 
         --label--titlestack-display: if(
-          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ;
-            else: if(style(--label--has-title: yes): grid ; else: none;) ;
+          style(--label-style: icon-only): none ; style(--label-style: title-only): grid ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-title: yes): grid ; else: none;) ;
         );
       }
     }

package/scss/components/_plain-button.scss

@@ -9,3 +9,10 @@
     }
   }
 }
+@layer #{vars.$utils-layer} {
+  [is='plain-button'] {
+    :where(&) {
+      text-align: center;
+    }
+  }
+}

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

@@ -33,18 +33,18 @@
           scroll-snap-align: start;
         }
 
-        :where(&) {
-          &::before {
-            @include mixins.span-all;
-            content: '';
-            display: inline-grid;
-            block-size: 1px;
-            inline-size: 1px;
-            z-index: -1;
-            pointer-events: none;
-            position: absolute;
-          }
-        }
+        // :where(&) {
+        //   &::before {
+        //     @include mixins.span-all;
+        //     content: '';
+        //     display: inline-grid;
+        //     block-size: 1px;
+        //     inline-size: 1px;
+        //     z-index: -1;
+        //     pointer-events: none;
+        //     position: absolute;
+        //   }
+        // }
       }
 
       > v-stack {
@@ -53,9 +53,9 @@
 
           scroll-snap-type: block mandatory;
 
-          &::before {
-            block-size: calc(100cqb + 1px); // creates overflow
-          }
+          // &::before {
+          //   block-size: calc(100cqb + 1px); // creates overflow
+          // }
         }
       }
 
@@ -65,9 +65,9 @@
 
           scroll-snap-type: inline mandatory;
 
-          &::before {
-            inline-size: calc(100cqi + 1px); // creates overflow
-          }
+          // &::before {
+          //   inline-size: calc(100cqi + 1px); // creates overflow
+          // }
         }
 
         :where(&[padding]) {

package/scss/components/_v-stack.scss

@@ -1,12 +1,16 @@
 @use '../vars';
+@use 'sass:string';
+@use 'sass:list';
+
+$v-stack-templates: ((auto auto minmax(0, 1fr)), (auto minmax(0, 1fr)), (auto auto autominmax(0, 1fr)));
 
 @layer #{vars.$components-layer} {
   v-stack {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
 
-      place-items: center;
-      place-content: center;
+      place-items: safe center;
+      place-content: safe center;
 
       gap: 1rem;
     }
@@ -14,5 +18,18 @@
     // :where(& > *) {
     // max-width: 100%;
     // }
+
+    @each $template in $v-stack-templates {
+      $parts: string.split('#{$template}', ', ');
+      $result: '';
+      @each $part in $parts {
+        $result: $result + '#{$part},';
+      }
+      $result: string.slice($result, 1, string.length($result) - 1);
+      @debug $result, $template;
+      :where(&[template='#{$result}']) {
+        grid-template-rows: $template;
+      }
+    }
   }
 }

package/scss/final/_touch-glass.scss

@@ -63,5 +63,22 @@
         }
       }
     }
+
+    tab-view {
+      :where(& > [is='sidebar-view'][touch-glass]) {
+        --sidebar-view-scale: scale(1.02);
+        transition-duration: 100ms;
+      }
+
+      :where(& > sidebar-toggle > *[touch-glass]) {
+        --toolbar-cell-scale: scale(1.07);
+        transition-duration: 100ms;
+      }
+
+      :where(& > [is='sidebar-view'] > tool-bar > sidebar-toggle > *[touch-glass]) {
+        --toolbar-cell-scale: scale(1.07);
+        transition-duration: 100ms;
+      }
+    }
   }
 }

package/scss/placeholders/_lists.scss

@@ -144,10 +144,7 @@
       > :not(summary) {
         :where(&) {
           --itemface: var(--list--details-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selecteddetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
           --itemactiveface: var(--list--selecteddetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--details-color, var(--list--item-color,));
@@ -158,14 +155,8 @@
       > summary {
         :where([is='disclosure-group'][open] &) {
           --itemface: var(--list--opendetails-background-color, var(--list--item-background-color,));
-          --itemhighlightface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
-          --itemactiveface: var(
-            --list--selectedopendetails-background-color,
-            var(--list--highlighteditem-background-color, var(--list--item-background-color,))
-          );
+          --itemhighlightface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
+          --itemactiveface: var(--list--selectedopendetails-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)));
 
           --itemtext: var(--list--opendetails-color, var(--list--item-color,));
           --itemhighlighttext: var(--list--selectedopendetails-color, var(--list--highlighteditem-color, var(--list--item-color,)));
@@ -186,14 +177,8 @@
             );
 
             --itemtext: var(--list--opensummary-color, var(--list--item-color,));
-            --itemhighlighttext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
-            --itemactivetext: var(
-              --list--selectedopensummary-color,
-              var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-            );
+            --itemhighlighttext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+            --itemactivetext: var(--list--selectedopensummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
           }
         }
       }
@@ -215,14 +200,8 @@
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--item-color,));
-          --itemhighlighttext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
-          --itemactivetext: var(
-            --list--selectedrootsummary-color,
-            var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,)))
-          );
+          --itemhighlighttext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
+          --itemactivetext: var(--list--selectedrootsummary-color, var(--list--selectedsummary-color, var(--list--highlighteditem-color, var(--list--item-color,))));
 
           // overwrite extra stuff for rootsummary
           // outline: red solid 4px;
@@ -244,17 +223,11 @@
           --itemface: var(--list--rootsummary-background-color, var(--list--opensummary-background-color, var(--list--item-background-color,)));
           --itemhighlightface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
           --itemactiveface: var(
             --list--selectedrootsummary-background-color,
-            var(
-              --list--selectedopensummary-background-color,
-              var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,)))
-            )
+            var(--list--selectedopensummary-background-color, var(--list--selectedsummary-background-color, var(--list--highlighteditem-background-color, var(--list--item-background-color,))))
           );
 
           --itemtext: var(--list--rootsummary-color, var(--list--opensummary-color, var(--list--item-color,)));
@@ -378,8 +351,7 @@
       :where(&)::part(section-footer-stack),
       :where(&)::part(section-header-stack) {
         // outline: magenta 4px solid;
-        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px))
-          calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
+        padding-inline: calc(var(--list--root-padding-inline, 0px) + var(--itempadistart, 0px)) calc(var(--list--root-padding-inline, 0px) + var(--itempadiend, 0px));
 
         margin-inline: calc(var(--list--root-padding-inline) * -1);
 

package/scss/utils/_stacks.scss

@@ -3,97 +3,97 @@
 @use 'sass:map';
 @use 'sass:list';
 
-$h-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$v-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$placement-map: (
-  top-leading: start start,
-  top: start center,
-  top-trailing: start end,
-  center-leading: center start,
-  center: center center,
-  center-trailing: center end,
-  bottom-leading: end start,
-  bottom: end center,
-  bottom-trailing: end end,
-);
-
-$alignment-map: (
-  leading: start,
-  center: center,
-  trailing: end,
-  fill: stretch, // cross-axis stretch
-);
-
-$distribution-map: (
-  top: start,
-  center: center,
-  bottom: end,
-  fill: stretch,
-  between: space-between,
-  evenly: space-evenly,
-);
+// $h-map: (
+//   leading: start,
+//   center: center,
+//   trailing: end,
+//   fill: stretch, // cross-axis stretch
+// );
+
+// $v-map: (
+//   top: start,
+//   center: center,
+//   bottom: end,
+//   fill: stretch, // cross-axis stretch
+// );
+
+// $placement-map: (
+//   top-leading: start start,
+//   top: start center,
+//   top-trailing: start end,
+//   center-leading: center start,
+//   center: center center,
+//   center-trailing: center end,
+//   bottom-leading: end start,
+//   bottom: end center,
+//   bottom-trailing: end end,
+// );
+
+// $alignment-map: (
+//   leading: start,
+//   center: center,
+//   trailing: end,
+//   fill: stretch, // cross-axis stretch
+// );
+
+// $distribution-map: (
+//   top: start,
+//   center: center,
+//   bottom: end,
+//   fill: stretch,
+//   between: space-between,
+//   evenly: space-evenly,
+// );
 
 $inline-map: (
   leading: (
-    (justify-items start),
-    (justify-content start),
+    (justify-items (start)),
+    (justify-content (start)),
   ),
   'leading fill': (
-    (justify-items start),
-    (justify-content stretch),
+    (justify-items (start)),
+    (justify-content (stretch)),
   ),
   center: (
-    (justify-items center),
-    (justify-content center),
+    (justify-items (safe center)),
+    (justify-content (safe center)),
   ),
   trailing: (
-    (justify-items end),
-    (justify-content end),
+    (justify-items (end)),
+    (justify-content (end)),
   ),
   fill: (
-    (justify-items stretch),
-    (justify-content stretch),
+    (justify-items (stretch)),
+    (justify-content (stretch)),
   ),
   space-between: (
-    (justify-content space-between),
+    (justify-content (space-between)),
   ),
 );
 
 $block-map: (
   leading: (
-    (align-items start),
-    (align-content start),
+    (align-items (start)),
+    (align-content (start)),
   ),
   'leading fill': (
-    (align-items start),
-    (align-content stretch),
+    (align-items (start)),
+    (align-content (stretch)),
   ),
   center: (
-    (align-items center),
-    (align-content center),
+    (align-items (center)),
+    (align-content (center)),
   ),
   trailing: (
-    (align-items end),
-    (align-content end),
+    (align-items (end)),
+    (align-content (end)),
   ),
   fill: (
-    (align-items stretch),
-    (align-content stretch),
+    (align-items (stretch)),
+    (align-content (stretch)),
   ),
   space-between: (
-    (align-content space-between),
+    (align-content (space-between)),
   ),
 );
 
@@ -110,6 +110,10 @@ $h-placement-map: (
 );
 
 $v-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
   'leading fill': (
     (place-items (start stretch)),
     (place-content (start stretch)),
@@ -129,7 +133,7 @@ $v-placement-map: (
     @each $k, $declarations in $inline-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -138,7 +142,7 @@ $v-placement-map: (
     @each $k, $declarations in $block-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -172,7 +176,7 @@ $v-placement-map: (
     @each $k, $declarations in $block-map {
       &[distribution='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -181,7 +185,7 @@ $v-placement-map: (
     @each $k, $declarations in $inline-map {
       &[alignment='#{$k}'] {
         @each $decl in $declarations {
-          #{list.nth($decl, 1)}: #{list.nth($decl, 2)};
+          #{list.nth($decl, 1)}: #{list.join(list.nth($decl, 2), ' ')}; //#{list.nth($decl, 2)};
         }
       }
     }
@@ -225,6 +229,7 @@ $v-placement-map: (
   // padding reserved word for stacks
   v-stack,
   h-stack,
+  h-flex-stack,
   v-flex-stack {
     :where(&[padding]) {
       padding-inline: 1rem;

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

@@ -26,6 +26,15 @@
         }
       ]
     },
+    {
+      "name": "content-unavailable-view",
+      "description": "A message with a title and extra information that you show when part of your app can’t be used.",
+      "attributes": [
+        {
+          "name": "search"
+        }
+      ]
+    },
     {
       "name": "date-picker",
       "attributes": [
@@ -126,10 +135,12 @@
       "name": "navigation-large-title"
     },
     {
-      "name": "navigation-split-view"
+      "name": "navigation-split-view",
+      "description": "A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section."
     },
     {
-      "name": "navigation-stack"
+      "name": "navigation-stack",
+      "description": "A view that shows a main screen and lets you open other screens on top of it."
     },
     {
       "name": "navigation-title",
@@ -151,6 +162,10 @@
     {
       "name": "screen-view"
     },
+    {
+      "name": "scroll-view-proxy",
+      "description": "A wrapper to {hv}-stacks"
+    },
     {
       "name": "scroll-view",
       "attributes": [
@@ -197,7 +212,8 @@
       "name": "sticky-container"
     },
     {
-      "name": "tab-bar"
+      "name": "tab-bar",
+      "description": "A screen that lets users switch between different views using buttons, tabs, or other controls."
     },
     {
       "name": "tab-item"