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

package/generated/css/index.css

@@ -297,10 +297,10 @@
     }
   }
   html:has(color-scheme[dark]) {
-    color-scheme: dark;
+    color-scheme: dark only;
   }
   html:has(color-scheme[light]) {
-    color-scheme: light;
+    color-scheme: light only;
   }
 }
 @layer sw-base, sw-components, sw-nav-components, sw-list-components, sw-tab-components, sw-utils, sw-colors, sw-actions, sw-transitions, sw-final;
@@ -3093,7 +3093,7 @@
   }
   :where(labeled-content)::part(labeled-content-stack) {
     display: flex;
-    flex-wrap: wrap;
+    flex-flow: var(--labeled-content--value-stack-flex-flow, row wrap);
     justify-content: space-between;
     row-gap: var(--labeled-content-row-gap);
     column-gap: var(--labeled-content-column-gap);
@@ -3104,14 +3104,22 @@
   }
   :where(labeled-content)::part(labeled-content-value-stack) {
     color: var(--secondary);
-    justify-items: flex-end;
+    justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
     word-break: break-all;
   }
-  :where(labeled-content)[labeled-content-style]::part(labeled-content-stack) {
-    flex-flow: column;
+  @media (pointer: fine) {
+    :where(labeled-content) {
+      --labeled-content--value-stack-flex-flow: column;
+      --labeled-content--value-stack-justify-items: flex-start;
+    }
   }
-  :where(labeled-content)[labeled-content-style]::part(labeled-content-value-stack) {
-    justify-items: flex-start;
+  :where(labeled-content)[labeled-content-style=vertical] {
+    --labeled-content--value-stack-flex-flow: column;
+    --labeled-content--value-stack-justify-items: flex-start;
+  }
+  :where(labeled-content)[labeled-content-style=horizontal] {
+    --labeled-content--value-stack-flex-flow: row wrap;
+    --labeled-content--value-stack-justify-items: flex-end;
   }
   :where(labeled-content > :nth-child(n+2 of [slot=label]),
   labeled-content > [slot=header],
@@ -4625,7 +4633,7 @@
   :where(text-field)::part(text-field-stack) {
     grid-template-columns: auto minmax(0, 1fr);
     grid-template-rows: minmax(0, 1fr);
-    column-gap: 1rem;
+    column-gap: var(--labeled-content-column-gap);
   }
   :where(text-field)::part(text-field-input-stack) {
     place-items: stretch;
@@ -4663,6 +4671,12 @@
   :where(picker-view) {
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: minmax(0, 1fr);
+    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(picker-view > :not([slot])) {
     place-self: var(--picker--input-stack-child-place-self, );
@@ -4673,12 +4687,6 @@
     justify-content: var(--picker--stack-justify-content, );
     row-gap: var(--picker--stack-row-gap, );
     column-gap: var(--picker--stack-column-gap, );
-    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(picker-view)::part(picker-input-stack) {
     flex-shrink: var(--picker--input-stack-flex-shrink, );
@@ -4692,7 +4700,7 @@
   }
   @container style(--picker-style: menu) {
     :where(picker-view menu-view > menu-view > label-view[slot=label]) {
-      margin-inline-start: 2rem;
+      margin-inline-start: 3rem;
     }
   }
   @container not style(--picker-style) {
@@ -4820,7 +4828,7 @@
       --picker--input-stack-max-width: 70%;
     }
     :where(:where(picker-view[picker-style=menu]) menu-view > menu-view > label-view[slot=label]) {
-      margin-inline-start: 2rem;
+      margin-inline-start: 3rem;
     }
     :where(form picker-view[picker-style=navigation-link]) {
       --picker--labelstack-display: grid;
@@ -4839,7 +4847,7 @@
       --picker--input-stack-max-width: 70%;
     }
     :where(:where(picker-view[picker-style=navigation-link]) menu-view > menu-view > label-view[slot=label]) {
-      margin-inline-start: 2rem;
+      margin-inline-start: 3rem;
     }
     :where(form picker-view[picker-style=sheet]) {
       --picker--labelstack-display: grid;
@@ -4858,7 +4866,7 @@
       --picker--input-stack-max-width: 70%;
     }
     :where(:where(picker-view[picker-style=sheet]) menu-view > menu-view > label-view[slot=label]) {
-      margin-inline-start: 2rem;
+      margin-inline-start: 3rem;
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.59",
+  "version": "0.0.0-dev.60",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_vars.scss

@@ -36,6 +36,7 @@ $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: (

package/scss/base/_root.scss

@@ -393,10 +393,10 @@
   }
 
   html:has(color-scheme[dark]) {
-    color-scheme: dark;
+    color-scheme: dark only;
   }
 
   html:has(color-scheme[light]) {
-    color-scheme: light;
+    color-scheme: light only;
   }
 }

package/scss/components/_labeled-content.scss

@@ -14,7 +14,8 @@
       &::part(labeled-content-stack) {
         display: flex;
 
-        flex-wrap: wrap;
+        flex-flow: var(--labeled-content--value-stack-flex-flow, row wrap);
+        // flex-wrap: wrap;
 
         justify-content: space-between;
 
@@ -31,16 +32,27 @@
       &::part(labeled-content-value-stack) {
         color: var(--secondary);
 
-        justify-items: flex-end;
+        justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
 
         word-break: break-all;
       }
 
-      &[labeled-content-style]::part(labeled-content-stack) {
-        flex-flow: column;
+      @media (pointer: fine) {
+        --labeled-content--value-stack-flex-flow: column;
+
+        --labeled-content--value-stack-justify-items: flex-start;
+      }
+
+      &[labeled-content-style='vertical'] {
+        --labeled-content--value-stack-flex-flow: column;
+
+        --labeled-content--value-stack-justify-items: flex-start;
       }
-      &[labeled-content-style]::part(labeled-content-value-stack) {
-        justify-items: flex-start;
+
+      &[labeled-content-style='horizontal'] {
+        --labeled-content--value-stack-flex-flow: row wrap;
+
+        --labeled-content--value-stack-justify-items: flex-end;
       }
     }
 

package/scss/components/_picker-view.scss

@@ -99,6 +99,14 @@ $picker-ifs: (
       grid-template-columns: minmax(0, 1fr);
 
       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,);
     }
 
     > :not([slot]) {
@@ -122,12 +130,13 @@ $picker-ifs: (
 
       // 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,);
+      // // 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-input-stack) {
@@ -163,7 +172,7 @@ $picker-ifs: (
 
     :where(& menu-view > menu-view > label-view[slot='label']) {
       @container style(--picker-style: menu) {
-        margin-inline-start: 2rem;
+        margin-inline-start: 3rem;
       }
     }
     // NOTE: make first inline list item secondary
@@ -219,7 +228,7 @@ $picker-ifs: (
         );
         --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
+        // 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(--label-value-placement: vertical) or style(--label-value-placement: auto): 1 ; else: 0 ;)
@@ -257,7 +266,7 @@ $picker-ifs: (
         }
         :where(&[picker-style='#{$v}']) {
           :where(& menu-view > menu-view > label-view[slot='label']) {
-            margin-inline-start: 2rem;
+            margin-inline-start: 3rem;
           }
 
           // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {

package/scss/components/_text-field.scss

@@ -4,6 +4,7 @@
   text-field {
     :where(&) {
       grid-template-columns: minmax(0, 1fr);
+
       grid-template-rows: minmax(0, 1fr);
 
       // padding-inline: var(--toolbaritempadistart,) var(--toolbaritempadiend,);
@@ -14,9 +15,10 @@
       // display: grid;
 
       grid-template-columns: auto minmax(0, 1fr);
+
       grid-template-rows: minmax(0, 1fr);
 
-      column-gap: 1rem;
+      column-gap: var(--labeled-content-column-gap);
     }
 
     :where(&)::part(text-field-label-stack) {