@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

package/scss/components/_picker-view.scss

@@ -6,89 +6,263 @@
 $picker-ifs: (
   menu: (
     --picker--labelstack-display: grid,
-    --picker--stack-grid-template-columns: auto minmax(0, 1fr),
+    --picker--input-stack-text-align: end,
+    // copy from labeled-content
+    // --picker--stack-display: flex,
+    // --picker--stack-justify-content: space-between,
+    --picker--stack-row-gap: var(--labeled-content-row-gap),
+    --picker--stack-column-gap: var(--labeled-content-column-gap),
+    //
+    --picker--stack-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
+    --picker--stack-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
+    --picker--stack-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
+    --picker--stack-grid-background: var(--itemface,),
+    --picker--stack-grid-color: var(--itemtext,),
+    --picker--stack-grid-border: var(--itemborder,),
+    // --picker--input-stack-child-place-self: end,
+    //
+    // --picker--stack-flex-wrap: wrap,
+    // --picker--input-stack-flex-shrink: 0,
+     // --picker--input-stack-max-width: 70%,
+  ),
+  navigation-link: (
+    --picker--labelstack-display: grid,
+    --picker--input-stack-text-align: end,
+    // copy from labeled-content
+    // --picker--stack-display: flex,
+    // --picker--stack-justify-content: space-between,
+    --picker--stack-row-gap: var(--labeled-content-row-gap),
+    --picker--stack-column-gap: var(--labeled-content-column-gap),
+    //
+    --picker--stack-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
+    --picker--stack-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
+    --picker--stack-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
+    --picker--stack-grid-background: var(--itemface,),
+    --picker--stack-grid-color: var(--itemtext,),
+    --picker--stack-grid-border: var(--itemborder,),
+    // --picker--input-stack-child-place-self: end,
+    //
+    // --picker--stack-flex-wrap: wrap,
+    // --picker--input-stack-flex-shrink: 0,
+     // --picker--input-stack-max-width: 70%,
+  ),
+  sheet: (
+    --picker--labelstack-display: grid,
+    --picker--input-stack-text-align: end,
+    // copy from labeled-content
+    // --picker--stack-display: flex,
+    // --picker--stack-justify-content: space-between,
+    --picker--stack-row-gap: var(--labeled-content-row-gap),
+    --picker--stack-column-gap: var(--labeled-content-column-gap),
+    //
+    --picker--stack-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
+    --picker--stack-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
+    --picker--stack-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
+    --picker--stack-grid-background: var(--itemface,),
+    --picker--stack-grid-color: var(--itemtext,),
+    --picker--stack-grid-border: var(--itemborder,),
+    // --picker--input-stack-child-place-self: end,
+    //
+    // --picker--stack-flex-wrap: wrap,
+    // --picker--input-stack-flex-shrink: 0,
+     // --picker--input-stack-max-width: 70%,
   ),
 );
 
-$picker-elses: (
-  --picker--stack-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
-);
+// $picker-elses: (
+// --picker--stack-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
+// );
 
-@mixin make-button-affordance() {
-  position: relative;
+// @mixin make-button-affordance() {
+//   position: relative;
+//   grid-auto-flow: column;
+//   grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
+//   column-gap: var(--picker-affordance-col-gap);
+//   @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
+//   &::before {
+//     display: grid;
+//     block-size: var(--picker-affordance-size);
+//     inline-size: var(--picker-affordance-size);
+//     background-color: var(--menuitemtext, var(--text));
+//     transform: var(--tablecol--after-rotate,);
+//     @media (prefers-reduced-motion: no-preference) {
+//       transition: transform 100ms ease-out;
+//       will-change: transform;
+//     }
+//     opacity: 0;
+//   }
+//   &[aria-selected='true']::before {
+//     opacity: 1;
+//   }
+// }
 
-  grid-auto-flow: column;
-  grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
-  column-gap: var(--picker-affordance-col-gap);
+@layer #{vars.$components-layer} {
+  picker-view {
+    :where(&) {
+      grid-template-columns: minmax(0, 1fr);
 
-  @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
+      grid-template-rows: minmax(0, 1fr);
 
-  &::before {
-    display: grid;
+      // wire these to mimic componentize
+      padding-inline: var(--picker--stack-grid-padding-inline,);
+      padding-block: var(--picker--stack-grid-padding-block,);
+      background: var(--picker--stack-grid-background,);
+      border-radius: var(--picker--stack-grid-border-radius,);
+      border: var(--picker--stack-grid-border,);
+      color: var(--picker--stack-grid-color,);
 
-    block-size: var(--picker-affordance-size);
-    inline-size: var(--picker-affordance-size);
+      &::part(picker-stack) {
+        // grid-auto-flow: column;
+        grid-template-columns: var(--picker--stack-grid-template-columns,); //minmax(30%, 1fr) auto;
 
-    background-color: var(--menuitemtext, var(--text));
+        grid-template-rows: var(--picker--stack-grid-template-rows,); //minmax(0, 1fr);
+        row-gap: var(--picker--stack-row-gap,);
 
-    transform: var(--tablecol--after-rotate,);
+        column-gap: var(--picker--stack-column-gap,);
 
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform 100ms ease-out;
-      will-change: transform;
-    }
+        // display: var(--picker--stack-display,);
 
-    opacity: 0;
-  }
+        // flex-wrap: var(--picker--stack-flex-wrap,);
 
-  &[aria-selected='true']::before {
-    opacity: 1;
-  }
-}
+        // justify-content: var(--picker--stack-justify-content,);
 
-@layer #{vars.$components-layer} {
-  picker-view {
-    :where(&) {
-      grid-template-columns: minmax(0, 1fr);
+        // grid-template-columns: var(--picker--stack-grid-template-columns,);
 
-      grid-template-rows: minmax(0, 1fr);
-    }
+        // grid-template-rows: minmax(0, 1fr);
 
-    :where(&)::part(picker-stack) {
-      grid-template-columns: var(--picker--stack-grid-template-columns,);
+        // column-gap: 1rem;
 
-      grid-template-rows: minmax(0, 1fr);
-    }
+        // // wire these to mimic componentize
+        // padding-inline: var(--picker--stack-grid-padding-inline,);
+        // padding-block: var(--picker--stack-grid-padding-block,);
+        // background: var(--picker--stack-grid-background,);
+        // border-radius: var(--picker--stack-grid-border-radius,);
+        // border: var(--picker--stack-grid-border,);
+        // color: var(--picker--stack-grid-color,);
+      }
 
-    :where(&)::part(picker-label-stack) {
-      display: var(--picker--labelstack-display, none); // display: none;
-    }
+      &::part(picker-input-stack) {
+        text-align: var(--picker--input-stack-text-align,);
+        // flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
 
-    :where(&) {
-      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
-      @include mixins.write-props($picker-elses);
-    }
+        // max-width: var(--picker--input-stack-max-width,); //70%;
+      }
 
-    :where(tool-bar-item &) {
-      // --picker--labelstack-display: none;
-      // --picker--stack-grid-template-columns: minmax(0, 1fr);
-    }
+      &::part(picker-label-stack) {
+        display: var(--picker--labelstack-display, none); // display: none;
 
-    :where(form &) {
-      // --picker--labelstack-display: grid;
-      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+        color: var(--secondary);
+
+        --label-truncation-mode: tail;
+
+        --label-line-limit: 1;
+      }
+
+      --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
+
+      --picker--stack-grid-template-rows: minmax(0, 1fr);
     }
 
-    :where(& > menu-view > button) {
-      @container style(--picker-style: menu) {
-        @include make-button-affordance;
+    // > :not([slot]) {
+    //   :where(&) {
+    //     place-self: var(--picker--input-stack-child-place-self,);
+    //   }
+    // }
+
+    // :where(&) {
+    // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+    // @include mixins.write-props($picker-elses); NOT Needed for now since all defaults/fallbacks are already the elses
+    // }
+
+    // :where(tool-bar-item &) {
+    // --picker--labelstack-display: none;
+    // --picker--stack-grid-template-columns: minmax(0, 1fr);
+    // }
+
+    // :where(form &) {
+    // --picker--labelstack-display: grid;
+    // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+    // }
+
+    // :where(& menu-view > menu-view > label-view[slot='label']) {
+    //   @container style(--picker-style: menu) {
+    //     margin-inline-start: 3rem;
+    //   }
+    // }
+    // NOTE: make first inline list item secondary
+    :where(& > list-view > section-view > :not(button):first-child) {
+      @container not style(--picker-style) {
+        color: var(--secondary);
+        --itemtext: var(--secondary);
       }
     }
+    // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
+    //   @container style(--picker-style: menu) {
+    //     @include make-button-affordance;
+    //   }
+    // }
 
     // SECTION: ifs
     @supports (x: #{string.unquote('if(else:red)')}) {
-      :where(&) {
-        @include mixins.write-ifs(--picker-style, $picker-ifs, $picker-elses);
+      :where(form &) {
+        // @include mixins.write-ifs(--picker-style, $picker-ifs, $picker-elses);
+
+        --picker--labelstack-display: if(style(--picker-style: sheet): grid ; style(--picker-style: navigation-link): grid ; style(--picker-style: menu): grid ; else: none ;);
+        // --picker--stack-grid-template-columns: if(style(--picker-style: menu): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;);
+
+        --picker--stack-display: if(style(--picker-style: sheet): flex ; style(--picker-style: navigation-link): flex ; style(--picker-style: menu): flex ;);
+        --picker--stack-justify-content: if(style(--picker-style: sheet): space-between ; style(--picker-style: navigation-link): space-between ; style(--picker-style: menu): space-between ;);
+        --picker--stack-row-gap: if(
+          style(--picker-style: sheet): var(--labeled-content-row-gap) ; style(--picker-style: navigation-link): var(--labeled-content-row-gap) ;
+            style(--picker-style: menu): var(--labeled-content-row-gap) ;
+        );
+        --picker--stack-column-gap: if(
+          style(--picker-style: sheet): var(--labeled-content-column-gap) ; style(--picker-style: navigation-link): var(--labeled-content-column-gap) ;
+            style(--picker-style: menu): var(--labeled-content-column-gap) ;
+        );
+        //
+        --picker--stack-grid-padding-inline: if(
+          style(--picker-style: sheet): var(--itempadistart,) var(--itempadiend,) ; style(--picker-style: navigation-link): var(--itempadistart,) var(--itempadiend,) ;
+            style(--picker-style: menu): var(--itempadistart,) var(--itempadiend,) ;
+        );
+        --picker--stack-grid-padding-block: if(
+          style(--picker-style: sheet): var(--itempadbstart,) var(--itempadbend,) ; style(--picker-style: navigation-link): var(--itempadbstart,) var(--itempadbend,) ;
+            style(--picker-style: menu): var(--itempadbstart,) var(--itempadbend,) ;
+        );
+        --picker--stack-grid-border-radius: if(
+          style(--picker-style: sheet): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: navigation-link): var(--itemradiustl,)
+            var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: menu): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ;
+        );
+        --picker--stack-grid-background: if(
+          style(--picker-style: sheet): var(--itemface,) ; style(--picker-style: navigation-link): var(--itemface,) ; style(--picker-style: menu): var(--itemface,) ;
+        );
+        --picker--stack-grid-color: if(style(--picker-style: sheet): var(--itemtext,) ; style(--picker-style: navigation-link): var(--itemtext,) ; style(--picker-style: menu): var(--itemtext,) ;);
+        --picker--stack-grid-border: if(
+          style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
+        );
+        // --picker--input-stack-child-place-self: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
+        --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
+
+        // SECTION experimental only in chrome
+        // --picker--input-stack-flex-shrink: if(
+        //   style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+        //     style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 1 ; else: 0 ;)
+        // );
+        // --picker--stack-flex-wrap: if(
+        //   style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+        //     style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): wrap ;)
+        // );
+        // --picker--input-stack-max-width: if(
+        //   style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+        //     style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 70% ;)
+        // );
+        // --picker--input-stack-flex-shrink: if(
+        //   style(--picker-label-value-placement: vertical) or
+        //     style(--picker-label-value-placement: auto): if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 1 ;) ; ;
+        //     else: if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 0 ;) ; ;
+        // );
+        // --picker--input-stack-max-width: if(style(--picker-style: sheet): 70% ; style(--picker-style: navigation-link): 70% ; style(--picker-style: menu): 70% ;);
+        // --picker--stack-flex-wrap: if(style(--picker-style: sheet): wrap ; style(--picker-style: navigation-link): wrap ; style(--picker-style: menu): wrap ;);
       }
     }
 
@@ -102,12 +276,37 @@ $picker-elses: (
         }
       }
       @each $v in vars.$picker-styles {
+        :where(form &[picker-style='#{$v}']) {
+          @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+        }
         :where(&[picker-style='#{$v}']) {
-          :where(& > menu-view > button) {
-            @include make-button-affordance;
-          }
+          // :where(& menu-view > menu-view > label-view[slot='label']) {
+          //   margin-inline-start: 3rem;
+          // }
 
-          @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+          // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
+          //   @include make-button-affordance;
+          // }
+        }
+      }
+    }
+  }
+}
+
+@layer #{vars.$final-layer} {
+  picker-view {
+    //--picker-label-value-placement
+    @supports not (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&:not([label-value-placement])) {
+        @each $v in vertical, horizontal {
+          @container style(--picker-label-value-placement: #{$v}) {
+            --picker-label-value-placement: #{$v};
+          }
+        }
+      }
+      @each $v in vertical, horizontal {
+        :where(&[label-value-placement='#{$v}']) {
+          --picker-label-value-placement: #{$v};
         }
       }
     }
@@ -116,6 +315,7 @@ $picker-elses: (
     @supports (x: #{string.unquote('attr(x type(*))')}) {
       :where(&) {
         --picker-style: attr(picker-style type(<custom-ident>), inherit);
+        --picker-label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
       }
     }
   }

package/scss/components/_plain-button.scss

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

package/scss/components/_progress-view.scss

@@ -0,0 +1,98 @@
+@use '../vars';
+
+// @property --progress-view-style {
+//   syntax: 'circular | linear';
+//   inherits: false;
+//   initial-value: circular;
+// }
+@property --progress-view-style-index {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@layer #{vars.$components-layer} {
+  progress-view {
+    :where(&) {
+      transition: --progress-view-style-index 1ms step-start;
+
+      grid-template-columns: minmax(0, 1fr);
+
+      place-items: center;
+      place-content: center;
+
+      gap: 0.3rem;
+
+      &::part(progress-line-control) {
+        background-color: var(--gray3);
+
+        inline-size: 100%;
+        block-size: 5px;
+
+        border-radius: var(--pill-border-radius);
+
+        border-left: solid 40px var(--accentColorEffective, var(--accentColor));
+      }
+
+      &::part(progress-circular-control) {
+        position: relative;
+
+        inline-size: 2rem;
+        block-size: 2rem;
+      }
+
+      &::part(progress-circular-blade) {
+        position: absolute;
+        inset: 32.5% auto auto 42.5%;
+        inline-size: 12.5%;
+        block-size: 32.5%;
+        background-color: var(--accentColorEffective, var(--secondary));
+        border-radius: var(--pill-border-radius);
+        will-change: opacity;
+        @media (prefers-reduced-motion: no-preference) {
+          animation: progressViewCircular 1s linear infinite;
+        }
+      }
+      &::part(progress-circular-blade-1) {
+        transform: rotate(45deg) translateY(-100%);
+        animation-delay: -1.625s;
+      }
+      &::part(progress-circular-blade-2) {
+        transform: rotate(90deg) translateY(-100%);
+        animation-delay: -1.5s;
+      }
+      &::part(progress-circular-blade-3) {
+        transform: rotate(135deg) translateY(-100%);
+        animation-delay: -1.375s;
+      }
+      &::part(progress-circular-blade-4) {
+        transform: rotate(180deg) translateY(-100%);
+        animation-delay: -1.25s;
+      }
+      &::part(progress-circular-blade-5) {
+        transform: rotate(225deg) translateY(-100%);
+        animation-delay: -1.125s;
+      }
+      &::part(progress-circular-blade-6) {
+        transform: rotate(270deg) translateY(-100%);
+        animation-delay: -1s;
+      }
+      &::part(progress-circular-blade-7) {
+        transform: rotate(315deg) translateY(-100%);
+        animation-delay: -0.875s;
+      }
+      &::part(progress-circular-blade-8) {
+        transform: rotate(360deg) translateY(-100%);
+        animation-delay: -0.75s;
+      }
+    }
+
+    @each $k, $v in (circular: 0, linear: 1) {
+      &[progress-view-style='#{$k}'] {
+        :where(&) {
+          --progress-view-style-index: #{$v};
+        }
+      }
+    }
+  }
+}

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

@@ -16,8 +16,6 @@
         :where(&) {
           position: relative;
 
-          @include mixins.contain-overscroll;
-
           scrollbar-width: thin;
 
           container: scroll-view-proxy / inline-size;
@@ -33,18 +31,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 +51,11 @@
 
           scroll-snap-type: block mandatory;
 
-          &::before {
-            block-size: calc(100cqb + 1px); // creates overflow
-          }
+          @include mixins.contain-overscroll(block);
+
+          // &::before {
+          //   block-size: calc(100cqb + 1px); // creates overflow
+          // }
         }
       }
 
@@ -65,9 +65,11 @@
 
           scroll-snap-type: inline mandatory;
 
-          &::before {
-            inline-size: calc(100cqi + 1px); // creates overflow
-          }
+          @include mixins.contain-overscroll(inline);
+
+          // &::before {
+          //   inline-size: calc(100cqi + 1px); // creates overflow
+          // }
         }
 
         :where(&[padding]) {

package/scss/components/_scroll-view.scss

@@ -94,6 +94,10 @@
       sticky-container {
         :where(&) {
           @include mixins.make-toolbar-pseudos(bottom);
+
+          &:after {
+            display: none;
+          }
         }
       }
 

package/scss/components/_search-view.scss

@@ -0,0 +1,22 @@
+@use '../vars';
+@use '../placeholders';
+
+@layer #{vars.$components-layer} {
+  [is='search-view'] {
+    :where(&) {
+      height: 30px;
+      // outline: red solid 3px;
+
+      backdrop-filter: var(--liquid-glass-backdrop-filter,);
+      box-shadow: var(--menu-popover-box-shadow,);
+
+      border-radius: var(--pill-border-radius);
+
+      padding-inline: 1rem;
+
+      appearance: none;
+
+      outline: none;
+    }
+  }
+}

package/scss/components/_section-view.scss

@@ -13,6 +13,29 @@
       // 'sentinel'
 
       gap: 0.5rem;
+
+      &::part(section-header-stack),
+      &::part(section-footer-stack) {
+        pointer-events: none;
+        //   outline: solid magenta 4px;
+        //   padding-block: 10px;
+      }
+
+      &::part(section-header-stack) {
+        grid-area: header;
+      }
+
+      &::part(section-main-stack) {
+        grid-area: main;
+      }
+
+      &::part(section-footer-stack) {
+        grid-area: footer;
+      }
+
+      &::part(section-header-stack) {
+        order: -1;
+      }
     }
 
     :where(&:has(> [slot='header']):not(:has(> [slot='footer']))) {
@@ -42,24 +65,6 @@
       display: none;
     }
 
-    :where(&)::part(section-header-stack),
-    :where(&)::part(section-footer-stack) {
-      pointer-events: none;
-      //   outline: solid magenta 4px;
-      //   padding-block: 10px;
-    }
-
-    :where(&)::part(section-header-stack) {
-      grid-area: header;
-    }
-
-    :where(&)::part(section-main-stack) {
-      grid-area: main;
-    }
-
-    :where(&)::part(section-footer-stack) {
-      grid-area: footer;
-    }
     // :where(& > *) {
     //   display: grid;
     // }
@@ -68,10 +73,6 @@
     //   margin-bottom: 3rem;
     // }
 
-    :where(&)::part(section-header-stack) {
-      order: -1;
-    }
-
     // :where(&:not(& &))::part(section-header-stack) {
     // :where(&)::part(section-header-stack) {
     // display: var(--section--headerstack-display, grid);