@swiftwc/ui 0.0.0-dev.47 → 0.0.0-dev.48

package/generated/components/picker-view.d.ts

@@ -12,6 +12,8 @@ export declare class PickerView extends FormAssociatedBase {
         CURRENT_VALUE_LABEL: string;
     };
     static get observedAttributes(): string[];
+    get selection(): string;
+    set selection(v: string);
     get template(): DocumentFragment;
     constructor();
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

package/generated/components/picker-view.js

@@ -257,6 +257,17 @@ export class PickerView extends FormAssociatedBase {
     #observers = new MutationObserverSet(this.#renderSlotted);
     #customValidity = '';
     #selection = '';
+    get selection() {
+        return this.#selection;
+    }
+    set selection(v) {
+        if (Object.is(this.#selection, v))
+            return;
+        this.#selection = v;
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+        this.#sendValueToForm();
+    }
     get #internals() {
         return getInternals(this);
     }

package/generated/css/index.css

@@ -5253,9 +5253,63 @@
   :where([foreground=blue]) {
     color: var(--blue);
   }
+  :where([foreground=red]) {
+    color: var(--red);
+  }
+  :where([foreground=green]) {
+    color: var(--green);
+  }
+  :where([foreground=orange]) {
+    color: var(--orange);
+  }
   :where([foreground="blue.secondary"]) {
     color: var(--blue2);
   }
+  :where([foreground="red.secondary"]) {
+    color: var(--red2);
+  }
+  :where([foreground="green.secondary"]) {
+    color: var(--green2);
+  }
+  :where([foreground="orange.secondary"]) {
+    color: var(--orange2);
+  }
+  :where([foreground="blue.tertiary"]) {
+    color: var(--blue3);
+  }
+  :where([foreground="red.tertiary"]) {
+    color: var(--red3);
+  }
+  :where([foreground="green.tertiary"]) {
+    color: var(--green3);
+  }
+  :where([foreground="orange.tertiary"]) {
+    color: var(--orange3);
+  }
+  :where([foreground="blue.quaternary"]) {
+    color: var(--blue4);
+  }
+  :where([foreground="red.quaternary"]) {
+    color: var(--red4);
+  }
+  :where([foreground="green.quaternary"]) {
+    color: var(--green4);
+  }
+  :where([foreground="orange.quaternary"]) {
+    color: var(--orange4);
+  }
+  :where([foreground="blue.quinary"]) {
+    color: var(--blue5);
+  }
+  :where([foreground="red.quinary"]) {
+    color: var(--red5);
+  }
+  :where([foreground="green.quinary"]) {
+    color: var(--green5);
+  }
+  :where([foreground="orange.quinary"]) {
+    color: var(--orange5);
+  }
   :where([tint=gray],
   [list-item-tint=gray]) {
     --accentColorEffective: var(--gray);

package/package.json

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

package/scss/utils/_index.scss

@@ -25,16 +25,35 @@
     }
   }
 
-  :where([foreground='secondary']) {
-    color: var(--secondary);
-  }
-
-  :where([foreground='blue']) {
-    color: var(--blue);
-  }
-
-  :where([foreground='blue.secondary']) {
-    color: var(--blue2);
+  @each $k,
+    $v
+      in (
+        secondary: --secondary,
+        blue: --blue,
+        red: --red,
+        green: --green,
+        orange: --orange,
+        'blue.secondary': --blue2,
+        'red.secondary': --red2,
+        'green.secondary': --green2,
+        'orange.secondary': --orange2,
+        'blue.tertiary': --blue3,
+        'red.tertiary': --red3,
+        'green.tertiary': --green3,
+        'orange.tertiary': --orange3,
+        'blue.quaternary': --blue4,
+        'red.quaternary': --red4,
+        'green.quaternary': --green4,
+        'orange.quaternary': --orange4,
+        'blue.quinary': --blue5,
+        'red.quinary': --red5,
+        'green.quinary': --green5,
+        'orange.quinary': --orange5
+      )
+  {
+    :where([foreground='#{"" + $k}']) {
+      color: var(#{$v});
+    }
   }
 
   @each $tint in gray, blue, red, green, orange {

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

@@ -230,7 +230,6 @@
     },
     {
       "name": "navigation-title",
-      "description": "// const _sync = Symbol('sync')",
       "attributes": [
         {
           "name": "value"