@swiftwc/ui 0.0.0-dev.66 → 0.0.0-dev.67

package/scss/components/_tool-bar.scss

@@ -16,80 +16,80 @@
         'top-bar'
         'spacer'
         'bottom-bar';
-    }
 
-    :where(& > *:not(sidebar-toggle), & > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
-      backdrop-filter: var(--liquid-glass-backdrop-filter);
-      box-shadow: var(--toolbar-cell-box-shadow);
+      &::part(top-bar),
+      &::part(bottom-bar) {
+        position: relative; // SAFARI BUG
 
-      min-inline-size: var(--toolbar-cell-min-size);
+        padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
+        pointer-events: none;
 
-      // tfo
-      transform: var(--toolbar-cell-scale,);
-      filter: var(--toolbar-cell-filter,);
-      opacity: var(--toolbar-cell-opacity,);
+        grid-template-columns: auto 1fr auto;
+        column-gap: var(--toolbar-col-gap);
+        // grid-auto-rows: 40px;
 
-      // min-width: calc(var(--tool-bar-block-size) - var(--toolbar-cell-block-padding-start) - var(--toolbar-cell-block-padding-end));
-    }
+        grid-template-rows: var(--toolbar-cell-min-size);
 
-    :where(&)::part(top-bar),
-    :where(&)::part(bottom-bar) {
-      position: relative; // SAFARI BUG
+        // place-items: center;
+        place-content: center; // middle of y axis
+      }
 
-      padding-inline: var(--safe-area-inset-left, 0px) var(--safe-area-inset-right, 0px);
-      pointer-events: none;
+      &::part(top-bar) {
+        // padding-inline: calc(
+        //     var(--safe-area-inset-left, 0px) + var(--navbar-area-inset-left, 0px)
+        //   )
+        //   calc(
+        //     var(--safe-area-inset-right, 0px) + var(--navbar-area-inset-right, 0px)
+        //   );
 
-      grid-template-columns: auto 1fr auto;
-      column-gap: var(--toolbar-col-gap);
-      // grid-auto-rows: 40px;
+        grid-area: top-bar;
 
-      grid-template-rows: var(--toolbar-cell-min-size);
+        block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
 
-      // place-items: center;
-      place-content: center; // middle of y axis
-    }
+        padding-block-start: var(--safe-area-inset-top);
+      }
 
-    :where(&)::part(top-bar) {
-      // padding-inline: calc(
-      //     var(--safe-area-inset-left, 0px) + var(--navbar-area-inset-left, 0px)
-      //   )
-      //   calc(
-      //     var(--safe-area-inset-right, 0px) + var(--navbar-area-inset-right, 0px)
-      //   );
+      &::part(bottom-bar) {
+        // padding-inline: calc(
+        //     var(--safe-area-inset-left, 0px) + var(--toolbar-area-inset-left, 0px)
+        //   )
+        //   calc(
+        //     var(--safe-area-inset-right, 0px) + var(--toolbar-area-inset-right, 0px)
+        //   );
 
-      grid-area: top-bar;
+        grid-area: bottom-bar;
 
-      block-size: calc(var(--safe-area-inset-top) + var(--navigation-bar-block-size));
+        block-size: calc(var(--safe-area-inset-bottom) + var(--tool-bar-block-size));
 
-      padding-block-start: var(--safe-area-inset-top);
-    }
+        padding-block-end: var(--safe-area-inset-bottom);
+      }
 
-    :where(&)::part(bottom-bar) {
-      // padding-inline: calc(
-      //     var(--safe-area-inset-left, 0px) + var(--toolbar-area-inset-left, 0px)
-      //   )
-      //   calc(
-      //     var(--safe-area-inset-right, 0px) + var(--toolbar-area-inset-right, 0px)
-      //   );
+      &::part(toolbar-leading-stack),
+      &::part(toolbar-principal-stack),
+      &::part(toolbar-trailing-stack) {
+        display: grid;
 
-      grid-area: bottom-bar;
+        grid-auto-flow: column;
+        grid-template-columns: minmax(0, 1fr);
 
-      block-size: calc(var(--safe-area-inset-bottom) + var(--tool-bar-block-size));
+        column-gap: var(--toolbar-col-gap);
 
-      padding-block-end: var(--safe-area-inset-bottom);
+        padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
+      }
     }
 
-    :where(&)::part(toolbar-leading-stack),
-    :where(&)::part(toolbar-principal-stack),
-    :where(&)::part(toolbar-trailing-stack) {
-      display: grid;
+    :where(& > *:not(sidebar-toggle), & > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
+      backdrop-filter: var(--liquid-glass-backdrop-filter);
+      box-shadow: var(--toolbar-cell-box-shadow);
 
-      grid-auto-flow: column;
-      grid-template-columns: minmax(0, 1fr);
+      min-inline-size: var(--toolbar-cell-min-size);
 
-      column-gap: var(--toolbar-col-gap);
+      // tfo
+      transform: var(--toolbar-cell-scale,);
+      filter: var(--toolbar-cell-filter,);
+      opacity: var(--toolbar-cell-opacity,);
 
-      padding-inline: var(--toolbar-col-gap) var(--toolbar-col-gap);
+      // min-width: calc(var(--tool-bar-block-size) - var(--toolbar-cell-block-padding-start) - var(--toolbar-cell-block-padding-end));
     }
 
     @include mixins.if-ipad-sheet-fits {

package/scss/mixins/_index.scss

@@ -111,9 +111,16 @@
   }
 }
 
-@mixin contain-overscroll() {
-  overscroll-behavior: contain;
+@mixin contain-overscroll($axis: both) {
   -webkit-overflow-scrolling: touch;
+
+  @if $axis == inline {
+    overscroll-behavior-inline: contain;
+  } @else if $axis == block {
+    overscroll-behavior-block: contain;
+  } @else {
+    overscroll-behavior: contain;
+  }
 }
 
 @mixin make-toolbar-pseudos($dir: bottom) {

package/scss/placeholders/_lists.scss

@@ -352,24 +352,26 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
 
     // SECTION: style section heders/footers
     section-view:not(section-view section-view, menu-view *) {
-      :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));
+      :where(&) {
+        &::part(section-footer-stack),
+        &::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));
 
-        margin-inline: calc(var(--list--root-padding-inline) * -1);
+          margin-inline: calc(var(--list--root-padding-inline) * -1);
 
-        padding-block: 1px;
-      }
+          padding-block: 1px;
+        }
 
-      :where(&)::part(section-header-stack) {
-        top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
+        &::part(section-header-stack) {
+          top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
 
-        position: sticky;
+          position: sticky;
 
-        // backdrop-filter: blur(20px);
+          // backdrop-filter: blur(20px);
 
-        // text-shadow: 0 0 5px var(--face);
+          // text-shadow: 0 0 5px var(--face);
+        }
       }
     }
 

package/scss/transitions/_menu-view.scss

@@ -4,22 +4,24 @@
 @layer #{vars.$transitions-layer} {
   @media (prefers-reduced-motion: no-preference) {
     menu-view {
-      :where(&)::part(menu-summary) {
-        transition:
-          transform var(--touchglass-transition-duration) allow-discrete ease-out,
-          filter var(--touchglass-transition-duration) allow-discrete ease-out;
-        will-change: transform;
-      }
+      :where(&) {
+        &::part(menu-summary) {
+          transition:
+            transform var(--touchglass-transition-duration) allow-discrete ease-out,
+            filter var(--touchglass-transition-duration) allow-discrete ease-out;
+          will-change: transform;
+        }
 
-      :where(&)::part(menu-dialog) {
-        // transition:
-        //   block-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
-        //   display var(--menu-animation-duration) allow-discrete ease-out,
-        //   overlay var(--menu-animation-duration) allow-discrete ease-out,
-        //   transform var(--menu-animation-duration) allow-discrete ease-out;
-        transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
-        // will-change: block-size, inline-size, transform, overlay, display;
+        &::part(menu-dialog) {
+          // transition:
+          //   block-size var(--menu-animation-duration) allow-discrete ease-out,
+          //   inline-size var(--menu-animation-duration) allow-discrete ease-out,
+          //   display var(--menu-animation-duration) allow-discrete ease-out,
+          //   overlay var(--menu-animation-duration) allow-discrete ease-out,
+          //   transform var(--menu-animation-duration) allow-discrete ease-out;
+          transition: all var(--touchglass-transition-duration) allow-discrete ease-out;
+          // will-change: block-size, inline-size, transform, overlay, display;
+        }
       }
     }
   }

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

@@ -182,6 +182,21 @@
           "name": "spacing",
           "description": "\nDescription: The gap between the primary axis",
           "valueSet": "spacingSet"
+        },
+        {
+          "name": "alignment - The cross",
+          "description": "\nDescription: axis alignment",
+          "valueSet": "alignmentSet"
+        },
+        {
+          "name": "distribution - The main",
+          "description": "\nDescription: axis alignment",
+          "valueSet": "distributionSet"
+        },
+        {
+          "name": "placement - The main",
+          "description": "\nDescription: axis alignment",
+          "valueSet": "placementSet"
         }
       ]
     },
@@ -195,7 +210,13 @@
     },
     {
       "name": "label-view",
+      "description": "",
       "attributes": [
+        {
+          "name": "font",
+          "description": "\nDescription: Sets the default font for text in this view.",
+          "valueSet": "fontSet"
+        },
         {
           "name": "system-image"
         },
@@ -493,6 +514,33 @@
         }
       ]
     },
+    {
+      "name": "toggle-view",
+      "description": "",
+      "attributes": [
+        {
+          "name": "label"
+        },
+        {
+          "name": "name"
+        },
+        {
+          "name": "value"
+        },
+        {
+          "name": "is-on"
+        },
+        {
+          "name": "keyboard-type"
+        },
+        {
+          "name": "required"
+        },
+        {
+          "name": "disabled"
+        }
+      ]
+    },
     {
       "name": "tool-bar-item-group"
     },
@@ -576,6 +624,21 @@
           "name": "spacing",
           "description": "\nDescription: The gap between the primary axis",
           "valueSet": "spacingSet"
+        },
+        {
+          "name": "alignment - The cross",
+          "description": "\nDescription: axis alignment",
+          "valueSet": "alignmentSet"
+        },
+        {
+          "name": "distribution - The main",
+          "description": "\nDescription: axis alignment",
+          "valueSet": "distributionSet"
+        },
+        {
+          "name": "placement - The main",
+          "description": "\nDescription: axis alignment",
+          "valueSet": "placementSet"
         }
       ]
     }
@@ -608,6 +671,59 @@
     }
   ],
   "valueSets": [
+    {
+      "name": "fontSet",
+      "values": [
+        {
+          "name": "footnote",
+          "description": "A font with the footnote text style"
+        },
+        {
+          "name": "caption2",
+          "description": "Create a font with the alternate caption text style"
+        },
+        {
+          "name": "caption",
+          "description": "A font with the caption text style"
+        },
+        {
+          "name": "callout",
+          "description": "A font with the callout text style"
+        },
+        {
+          "name": "body",
+          "description": "A font with the body text style"
+        },
+        {
+          "name": "subheadline",
+          "description": "A font with the subheadline text style"
+        },
+        {
+          "name": "headline",
+          "description": "A font with the headline text style"
+        },
+        {
+          "name": "title3",
+          "description": "Create a font for third level hierarchical headings"
+        },
+        {
+          "name": "title2",
+          "description": "Create a font for second level hierarchical headings"
+        },
+        {
+          "name": "title",
+          "description": "A font with the title text style"
+        },
+        {
+          "name": "large-title",
+          "description": "A font with the large title text style"
+        },
+        {
+          "name": "extra-large-title",
+          "description": "Create a font with the extra large title text style"
+        }
+      ]
+    },
     {
       "name": "spacingSet",
       "values": [
@@ -699,6 +815,65 @@
         }
       ]
     },
+    {
+      "name": "alignmentSet",
+      "values": [
+        {
+          "name": "leading",
+          "description": "start cross-axis alignment"
+        },
+        {
+          "name": "center",
+          "description": "center cross-axis alignment"
+        },
+        {
+          "name": "trailing",
+          "description": "end cross-axis alignment"
+        },
+        {
+          "name": "fill",
+          "description": "stretch cross-axis alignment"
+        }
+      ]
+    },
+    {
+      "name": "distributionSet",
+      "values": [
+        {
+          "name": "leading",
+          "description": "start cross-axis distribution"
+        },
+        {
+          "name": "center",
+          "description": "center cross-axis distribution"
+        },
+        {
+          "name": "trailing",
+          "description": "end cross-axis distribution"
+        },
+        {
+          "name": "fill",
+          "description": "stretch cross-axis distribution"
+        }
+      ]
+    },
+    {
+      "name": "placementSet",
+      "values": [
+        {
+          "name": "fill",
+          "description": "short cut for `distribution=\"fill\" alignment=\"fill\"`"
+        },
+        {
+          "name": "leading fill",
+          "description": "short cut for `distribution=\"leading\" alignment=\"fill\"`"
+        },
+        {
+          "name": "fill leading",
+          "description": "short cut for `distribution=\"fill\" alignment=\"leading\"`"
+        }
+      ]
+    },
     {
       "name": "frameWidth",
       "values": [