@swiftwc/ui 0.0.0-dev.41 → 0.0.0-dev.42

package/generated/components/picker-view.js

@@ -182,7 +182,7 @@ export class PickerView extends FormAssociatedBase {
                 const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
                 // reset state
                 currentValueLabel.setAttribute('system-image', 'dots-three'); // overwritten
-                currentValueLabel.setAttribute('title', this.#selection); //, this.#currentValueLabel) // overwritten
+                currentValueLabel.setAttribute('title', this.#currentValueLabel); // overwritten
                 // clear all siblings
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     if (currentValueLabel !== el)
@@ -218,7 +218,7 @@ export class PickerView extends FormAssociatedBase {
                         el.remove();
                 const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
                 currentValueLabel.setAttribute('system-image', 'dots-three'); // overwritten
-                currentValueLabel.setAttribute('title', this.#selection); //this.#currentValueLabel) // overwritten
+                currentValueLabel.setAttribute('title', this.#currentValueLabel); // overwritten
                 _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
                 break;
             }

package/generated/css/index.css

@@ -264,8 +264,6 @@
     --large-btn-padding: 1.2rem;
     --large-btn-border-radius: 2.4rem;
     --large-btn-border-radius: 2.4rem;
-    --picker-affordance-size: 1rem;
-    --picker-affordance-col-gap: 1rem;
   }
   @media (pointer: fine) {
     :root {
@@ -4325,42 +4323,6 @@
       margin-inline-start: 2rem;
     }
   }
-  @container style(--picker-style: menu) {
-    :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary) {
-      position: relative;
-      grid-auto-flow: column;
-      grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
-      column-gap: var(--picker-affordance-col-gap);
-    }
-    :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
-      pointer-events: none;
-      content: "";
-      -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
-      mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
-      transform-origin: center;
-      aspect-ratio: 1;
-      place-self: center;
-    }
-    :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::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) {
-      :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
-        transition: transform 100ms ease-out;
-        will-change: transform;
-      }
-    }
-    :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)::before {
-      opacity: 0;
-    }
-    :where(picker-view menu-view > button, picker-view menu-view > [is=disclosure-group] > button, picker-view menu-view > [is=disclosure-group] > summary)[aria-selected=true]::before {
-      opacity: 1;
-    }
-  }
   @supports (x: if(else:red)) {
     :where(picker-view) {
       --picker--labelstack-display: if(style(--picker-style: menu): grid; );
@@ -4377,40 +4339,6 @@
     :where(:where(picker-view[picker-style=menu]) menu-view > menu-view > label-view[slot=label]) {
       margin-inline-start: 2rem;
     }
-    :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary) {
-      position: relative;
-      grid-auto-flow: column;
-      grid-template-columns: var(--picker-affordance-size) minmax(0, 1fr);
-      column-gap: var(--picker-affordance-col-gap);
-    }
-    :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
-      pointer-events: none;
-      content: "";
-      -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
-      mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E') no-repeat center/contain;
-      transform-origin: center;
-      aspect-ratio: 1;
-      place-self: center;
-    }
-    :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::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) {
-      :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
-        transition: transform 100ms ease-out;
-        will-change: transform;
-      }
-    }
-    :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)::before {
-      opacity: 0;
-    }
-    :where(:where(picker-view[picker-style=menu]) menu-view > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > button, :where(picker-view[picker-style=menu]) menu-view > [is=disclosure-group] > summary)[aria-selected=true]::before {
-      opacity: 1;
-    }
     :where(picker-view[picker-style=menu]) {
       --picker--labelstack-display: grid;
       --picker--stack-grid-template-columns: auto minmax(0, 1fr);

package/package.json

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

package/scss/_vars.scss

@@ -145,7 +145,7 @@ $button-sizes: (
 
 $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
 $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
-$picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
+// $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
 
 $cancel-button-icon: 'x'; // ph-trash
 $close-button-icon: 'x'; // ph-trash

package/scss/base/_root.scss

@@ -338,8 +338,8 @@
       }
     }
 
-    --picker-affordance-size: 1rem;
-    --picker-affordance-col-gap: 1rem;
+    // --picker-affordance-size: 1rem;
+    // --picker-affordance-col-gap: 1rem;
 
     // SECTION
 

package/scss/components/_picker-view.scss

@@ -14,37 +14,37 @@ $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);
+//   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);
+//   @include mixins.make-marker-pseudos(vars.$picker-affordance, before);
 
-  &::before {
-    display: grid;
+//   &::before {
+//     display: grid;
 
-    block-size: var(--picker-affordance-size);
-    inline-size: var(--picker-affordance-size);
+//     block-size: var(--picker-affordance-size);
+//     inline-size: var(--picker-affordance-size);
 
-    background-color: var(--menuitemtext, var(--text));
+//     background-color: var(--menuitemtext, var(--text));
 
-    transform: var(--tablecol--after-rotate,);
+//     transform: var(--tablecol--after-rotate,);
 
-    @media (prefers-reduced-motion: no-preference) {
-      transition: transform 100ms ease-out;
-      will-change: transform;
-    }
+//     @media (prefers-reduced-motion: no-preference) {
+//       transition: transform 100ms ease-out;
+//       will-change: transform;
+//     }
 
-    opacity: 0;
-  }
+//     opacity: 0;
+//   }
 
-  &[aria-selected='true']::before {
-    opacity: 1;
-  }
-}
+//   &[aria-selected='true']::before {
+//     opacity: 1;
+//   }
+// }
 
 @layer #{vars.$components-layer} {
   picker-view {
@@ -84,11 +84,11 @@ $picker-elses: (
         margin-inline-start: 2rem;
       }
     }
-    :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;
-      }
-    }
+    // :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)')}) {
@@ -112,9 +112,9 @@ $picker-elses: (
             margin-inline-start: 2rem;
           }
 
-          :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
-            @include make-button-affordance;
-          }
+          // :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);
         }