@swiftwc/ui 0.0.0-dev.58 → 0.0.0-dev.59

package/scss/components/_index.scss

@@ -41,6 +41,7 @@
   h-stack,
   tool-bar,
   label-view,
+  labeled-content,
   menu-view,
   section-view,
   text-field,
@@ -52,6 +53,9 @@
     }
   }
 
+  :where(labeled-content)::part(labeled-content-container),
+  :where(labeled-content)::part(labeled-content-label-stack),
+  :where(labeled-content)::part(labeled-content-value-stack),
   :where(progress-view)::part(progress-control),
   :where(content-unavailable-view)::part(content-unavailable-title-stack),
   :where(content-unavailable-view)::part(content-unavailable-description-stack),

package/scss/components/_label-view.scss

@@ -65,7 +65,7 @@ $label-line-ifs: (
   ),
   2: (
     --label--host-white-space: normal,
-    --label--display: -webkit-box,
+    --label--titlestack-display: -webkit-box,
     --label--box-orient: vertical,
     --label--line-clamp: 2,
   ),
@@ -81,7 +81,7 @@ $label-line-ifs: (
     --label--host-justify-items: normal;
 
     --label--iconstack-display: grid;
-    --label--titlestack-display: grid;
+    --label--titlestack-display: inline-block;
   } @else if $label-style == h-icon-only {
     --label-style: icon-only;
 
@@ -95,7 +95,7 @@ $label-line-ifs: (
     --label--host-align-items: center;
     --label--host-justify-items: normal;
 
-    --label--titlestack-display: grid;
+    --label--titlestack-display: inline-block;
   } @else if $label-style == v-title-and-icon {
     --label-style: title-and-icon;
 
@@ -105,7 +105,7 @@ $label-line-ifs: (
     --label--host-justify-items: center;
 
     --label--iconstack-display: grid;
-    --label--titlestack-display: grid;
+    --label--titlestack-display: inline-block;
   } @else if $label-style == v-icon-only {
     --label-style: icon-only;
 
@@ -119,7 +119,7 @@ $label-line-ifs: (
     --label--host-align-items: normal;
     --label--host-justify-items: center;
 
-    --label--titlestack-display: grid;
+    --label--titlestack-display: inline-block;
   }
 }
 
@@ -194,7 +194,7 @@ $label-line-ifs: (
 
         text-overflow: var(--label--text-overflow,);
 
-        display: var(--label--display,);
+        // display: var(--label--display,);
 
         -webkit-box-orient: var(--label--box-orient,);
 
@@ -266,8 +266,13 @@ $label-line-ifs: (
         );
 
         --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): inline-block ; style(--label-style: title-and-icon): inline-block ;
+            else: if(style(--label--has-title: yes): inline-block ; else: none;) ;
         );
+        // --label--titlestack-display: if(
+        //   style(--label-style: icon-only): none ; style(--label-style: title-only): -webkit-box ; style(--label-style: title-and-icon): -webkit-box ;
+        //     else: if(style(--label--has-title: yes): -webkit-box ; else: none;) ;
+        // );
       }
     }
 

package/scss/components/_labeled-content.scss

@@ -3,7 +3,53 @@
 @layer #{vars.$components-layer} {
   labeled-content {
     :where(&) {
-      display: grid;
+      container: labeled-content / inline-size;
+
+      &::part(labeled-content-container) {
+        grid-template-columns: subgrid;
+
+        gap: var(--labeled-content-row-gap);
+      }
+
+      &::part(labeled-content-stack) {
+        display: flex;
+
+        flex-wrap: wrap;
+
+        justify-content: space-between;
+
+        row-gap: var(--labeled-content-row-gap);
+        column-gap: var(--labeled-content-column-gap);
+      }
+
+      &::part(labeled-content-label-stack) {
+        --label-truncation-mode: tail;
+
+        --label-line-limit: 1;
+      }
+
+      &::part(labeled-content-value-stack) {
+        color: var(--secondary);
+
+        justify-items: flex-end;
+
+        word-break: break-all;
+      }
+
+      &[labeled-content-style]::part(labeled-content-stack) {
+        flex-flow: column;
+      }
+      &[labeled-content-style]::part(labeled-content-value-stack) {
+        justify-items: flex-start;
+      }
+    }
+
+    > :nth-child(n + 2 of [slot='label']),
+    > [slot='header'],
+    > [slot='footer'] {
+      :where(&) {
+        color: var(--secondary);
+      }
     }
   }
 }

package/scss/components/_menu-view.scss

@@ -133,6 +133,10 @@
       --menuitemradiusbr: var(--menu-item-border-radius);
       --menuitemradiusbl: var(--menu-item-border-radius);
     }
+
+    :where(&) {
+      --disclosure-style: marker-trailing;
+    }
   }
 }
 

package/scss/components/_picker-view.scss

@@ -6,41 +6,88 @@
 $picker-ifs: (
   menu: (
     --picker--labelstack-display: grid,
-    --picker--stack-grid-template-columns: auto minmax(0, 1fr),
+    // 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: flex-end,
+    //
+    // --picker--stack-flex-wrap: wrap,
+    --picker--input-stack-flex-shrink: 0,
+    --picker--input-stack-max-width: 70%,
+  ),
+  navigation-link: (
+    --picker--labelstack-display: grid,
+    // 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: flex-end,
+    //
+    // --picker--stack-flex-wrap: wrap,
+    --picker--input-stack-flex-shrink: 0,
+    --picker--input-stack-max-width: 70%,
+  ),
+  sheet: (
+    --picker--labelstack-display: grid,
+    // 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: flex-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;
-
 //   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;
 //   }
@@ -54,36 +101,78 @@ $picker-elses: (
       grid-template-rows: minmax(0, 1fr);
     }
 
+    > :not([slot]) {
+      :where(&) {
+        place-self: var(--picker--input-stack-child-place-self,);
+      }
+    }
+
     :where(&)::part(picker-stack) {
-      grid-template-columns: var(--picker--stack-grid-template-columns,);
+      display: var(--picker--stack-display,);
 
-      grid-template-rows: minmax(0, 1fr);
+      flex-wrap: var(--picker--stack-flex-wrap,);
+
+      justify-content: var(--picker--stack-justify-content,);
+
+      row-gap: var(--picker--stack-row-gap,);
+      column-gap: var(--picker--stack-column-gap,);
+      // grid-template-columns: var(--picker--stack-grid-template-columns,);
+
+      // grid-template-rows: minmax(0, 1fr);
+
+      // column-gap: 1rem;
+
+      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-input-stack) {
+      flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
+
+      max-width: var(--picker--input-stack-max-width,); //70%;
     }
 
     :where(&)::part(picker-label-stack) {
       display: var(--picker--labelstack-display, none); // display: none;
-    }
 
-    :where(&) {
-      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
-      @include mixins.write-props($picker-elses);
-    }
+      color: var(--secondary);
 
-    :where(tool-bar-item &) {
-      // --picker--labelstack-display: none;
-      // --picker--stack-grid-template-columns: minmax(0, 1fr);
-    }
+      --label-truncation-mode: tail;
 
-    :where(form &) {
-      // --picker--labelstack-display: grid;
-      // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
+      --label-line-limit: 1;
     }
 
+    // :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: 2rem;
       }
     }
+    // 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;
@@ -92,8 +181,64 @@ $picker-elses: (
 
     // 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): flex-end ; style(--picker-style: navigation-link): flex-end ; style(--picker-style: menu): flex-end ;);
+
+        // SECTION
+        --picker--input-stack-flex-shrink: if(
+          style(--picker-style: sheet) or style(--picker-style: navigation-link) or
+            style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--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(--label-value-placement: vertical) or style(--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(--label-value-placement: vertical) or style(--label-value-placement: auto): 70% ;)
+        );
+        // --picker--input-stack-flex-shrink: if(
+        //   style(--label-value-placement: vertical) or
+        //     style(--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 ;);
       }
     }
 
@@ -107,6 +252,9 @@ $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 > menu-view > label-view[slot='label']) {
             margin-inline-start: 2rem;
@@ -115,8 +263,26 @@ $picker-elses: (
           // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
           //   @include make-button-affordance;
           // }
+        }
+      }
+    }
+  }
+}
 
-          @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
+@layer #{vars.$final-layer} {
+  picker-view {
+    //--label-value-placement
+    @supports not (x: #{string.unquote('attr(x type(*))')}) {
+      :where(&:not([label-value-placement])) {
+        @each $v in vertical, horizontal, auto {
+          @container style(--label-value-placement: #{$v}) {
+            --label-value-placement: #{$v};
+          }
+        }
+      }
+      @each $v in vertical, horizontal, auto {
+        :where(&[label-value-placement='#{$v}']) {
+          --label-value-placement: #{$v};
         }
       }
     }
@@ -125,6 +291,7 @@ $picker-elses: (
     @supports (x: #{string.unquote('attr(x type(*))')}) {
       :where(&) {
         --picker-style: attr(picker-style type(<custom-ident>), inherit);
+        --label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
       }
     }
   }

package/scss/components/_text-field.scss

@@ -15,6 +15,8 @@
 
       grid-template-columns: auto minmax(0, 1fr);
       grid-template-rows: minmax(0, 1fr);
+
+      column-gap: 1rem;
     }
 
     :where(&)::part(text-field-label-stack) {
@@ -32,6 +34,18 @@
       // display: grid;
 
       text-align: end;
+
+      appearance: none;
+
+      border: 0;
+
+      outline: 0;
+
+      padding-block: 0.1rem;
+
+      padding-inline-start: 0.3rem;
+
+      background-color: transparent;
     }
   }
 }

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

@@ -210,6 +210,29 @@
         }
       ]
     },
+    {
+      "name": "labeled-content",
+      "attributes": [
+        {
+          "name": "value"
+        },
+        {
+          "name": "label"
+        },
+        {
+          "name": "header"
+        },
+        {
+          "name": "footer"
+        },
+        {
+          "name": "labeled-content-style"
+        },
+        {
+          "name": "format"
+        }
+      ]
+    },
     {
       "name": "list-view",
       "description": "",
@@ -304,6 +327,21 @@
               "name": "DictEntry[]"
             }
           ]
+        },
+        {
+          "name": "label-value",
+          "description": "Value Type: “vertical” | “horizontal” | “auto”\n\nDescription: placement",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "auto"
+            }
+          ]
         }
       ]
     },