@swiftwc/ui 0.0.0-dev.64 → 0.0.0-dev.66

package/generated/client/index.js

@@ -113,7 +113,7 @@ const handleHelp = ({ target, relatedTarget }) => {
     const trigger = target.closest('[help]');
     if (!trigger)
         return;
-    if ('PICKER-VIEW' === trigger.tagName)
+    if (['PICKER-VIEW'].includes(trigger.tagName))
         return;
     if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
         return;
@@ -132,7 +132,7 @@ const handleHelp = ({ target, relatedTarget }) => {
     const trigger = target.closest('[help]');
     if (!trigger)
         return;
-    if ('PICKER-VIEW' === trigger.tagName)
+    if (['PICKER-VIEW'].includes(trigger.tagName))
         return;
     if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
         return;

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

@@ -34,6 +34,7 @@ export declare class PickerView extends FormAssociatedBase {
         CURRENT_VALUE_ICON: string;
         TRIGGER_HELP: string;
         DICTIONARY: string;
+        REQUIRED: string;
     };
     static get observedAttributes(): string[];
     get selection(): string;

package/generated/components/picker-view.js

@@ -128,6 +128,7 @@ export class PickerView extends FormAssociatedBase {
             CURRENT_VALUE_ICON: 'current-value-icon',
             TRIGGER_HELP: 'help',
             DICTIONARY: 'dictionary',
+            REQUIRED: 'required',
         };
     }
     static get observedAttributes() {
@@ -367,6 +368,8 @@ export class PickerView extends FormAssociatedBase {
                         el.remove();
                 CleanupRegistry.unregister(this, 'trigger');
                 CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, currentValueLabel).on(), 'trigger');
+                if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
+                    currentValueLabel?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
                 // rebuild snapshot(tree)
                 if (!this.#spawn)
                     break;
@@ -400,8 +403,8 @@ export class PickerView extends FormAssociatedBase {
                 //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
                 //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
                 // }
-                if (this.hasAttribute('help'))
-                    currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
+                if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
+                    currentValueLabel?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
                 _a.#reflectButtons(input.source, menu);
                 break;
             }
@@ -617,6 +620,11 @@ export class PickerView extends FormAssociatedBase {
                     break;
                 this.#renderDictionary(parseDictionary(newValue));
                 break;
+            case this.constructor.ATTR.REQUIRED:
+                if (oldValue === newValue)
+                    break;
+                this.#sendValueToForm(false);
+                break;
             case this.constructor.ATTR.SELECTION:
                 // nothing happens
                 break;
@@ -949,10 +957,10 @@ export class PickerView extends FormAssociatedBase {
                 //udnefined
             }
         }
-        if (this.hasAttribute('help'))
-            trigger?.setAttribute('help', this.getAttribute('help') ?? '');
+        if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
+            trigger?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
         else
-            trigger?.removeAttribute('help');
+            trigger?.removeAttribute(this.constructor.ATTR.TRIGGER_HELP);
     }
     // Optional: form participation properties
     get name() {

package/generated/css/index.css

@@ -843,6 +843,7 @@
     --red: var(--itemtext);
     --green: var(--itemtext);
     --orange: var(--itemtext);
+    --purple: var(--itemtext);
     --accentColor: var(--itemtext);
     --accentColorEffective: var(--itemtext);
   }
@@ -871,6 +872,7 @@
     --red: var(--itemtext);
     --green: var(--itemtext);
     --orange: var(--itemtext);
+    --purple: var(--itemtext);
     --accentColor: var(--itemtext);
     --accentColorEffective: var(--itemtext);
   }
@@ -897,6 +899,7 @@
     --red: var(--itemtext);
     --green: var(--itemtext);
     --orange: var(--itemtext);
+    --purple: var(--itemtext);
     --accentColor: var(--itemtext);
     --accentColorEffective: var(--itemtext);
   }
@@ -2414,6 +2417,7 @@
     --red: var(--btntext);
     --green: var(--btntext);
     --orange: var(--btntext);
+    --purple: var(--btntext);
     --accentColor: var(--btntext);
     --accentColorEffective: var(--btntext);
   }
@@ -2541,6 +2545,7 @@
     --red: var(--btntext);
     --green: var(--btntext);
     --orange: var(--btntext);
+    --purple: var(--btntext);
     --accentColor: var(--btntext);
     --accentColorEffective: var(--btntext);
   }
@@ -3364,6 +3369,7 @@
     --red: var(--menuitemtext);
     --green: var(--menuitemtext);
     --orange: var(--menuitemtext);
+    --purple: var(--menuitemtext);
     --accentColor: var(--menuitemtext);
     --accentColorEffective: var(--menuitemtext);
   }
@@ -3378,6 +3384,7 @@
       --red: var(--menuitemtext);
       --green: var(--menuitemtext);
       --orange: var(--menuitemtext);
+      --purple: var(--menuitemtext);
       --accentColor: var(--menuitemtext);
       --accentColorEffective: var(--menuitemtext);
     }
@@ -3393,6 +3400,7 @@
     --red: var(--menuitemtext);
     --green: var(--menuitemtext);
     --orange: var(--menuitemtext);
+    --purple: var(--menuitemtext);
     --accentColor: var(--menuitemtext);
     --accentColorEffective: var(--menuitemtext);
   }
@@ -3405,6 +3413,7 @@
       --red: var(--menuitemtext);
       --green: var(--menuitemtext);
       --orange: var(--menuitemtext);
+      --purple: var(--menuitemtext);
       --accentColor: var(--menuitemtext);
       --accentColorEffective: var(--menuitemtext);
     }
@@ -5541,6 +5550,9 @@
   :where([foreground=orange]) {
     color: var(--orange);
   }
+  :where([foreground=purple]) {
+    color: var(--purple);
+  }
   :where([foreground="blue.secondary"]) {
     color: var(--blue2);
   }
@@ -5553,6 +5565,9 @@
   :where([foreground="orange.secondary"]) {
     color: var(--orange2);
   }
+  :where([foreground="purple.secondary"]) {
+    color: var(--purple2);
+  }
   :where([foreground="blue.tertiary"]) {
     color: var(--blue3);
   }
@@ -5565,6 +5580,9 @@
   :where([foreground="orange.tertiary"]) {
     color: var(--orange3);
   }
+  :where([foreground="purple.tertiary"]) {
+    color: var(--purple3);
+  }
   :where([foreground="blue.quaternary"]) {
     color: var(--blue4);
   }
@@ -5577,6 +5595,9 @@
   :where([foreground="orange.quaternary"]) {
     color: var(--orange4);
   }
+  :where([foreground="purple.quaternary"]) {
+    color: var(--purple4);
+  }
   :where([foreground="blue.quinary"]) {
     color: var(--blue5);
   }
@@ -5589,6 +5610,9 @@
   :where([foreground="orange.quinary"]) {
     color: var(--orange5);
   }
+  :where([foreground="purple.quinary"]) {
+    color: var(--purple5);
+  }
   :where([tint=gray],
   [list-item-tint=gray]) {
     --accentColorEffective: var(--gray);
@@ -8127,6 +8151,66 @@
     inherits: true;
   }
 }
+@property --purple {
+  syntax: "<color>";
+  initial-value: oklch(61.67% 0.2607 326deg);
+  inherits: true;
+}
+@media (prefers-color-scheme: dark) {
+  @property --purple {
+    syntax: "<color>";
+    initial-value: oklch(65.86% 0.2795 325.94deg);
+    inherits: true;
+  }
+}
+@property --purple2 {
+  syntax: "<color>";
+  initial-value: oklch(78.07% 0.1464 325.64deg);
+  inherits: true;
+}
+@media (prefers-color-scheme: dark) {
+  @property --purple2 {
+    syntax: "<color>";
+    initial-value: oklch(44.3% 0.1667 326.12deg);
+    inherits: true;
+  }
+}
+@property --purple3 {
+  syntax: "<color>";
+  initial-value: oklch(88.73% 0.0728 324.7deg);
+  inherits: true;
+}
+@media (prefers-color-scheme: dark) {
+  @property --purple3 {
+    syntax: "<color>";
+    initial-value: oklch(32.88% 0.0959 325.84deg);
+    inherits: true;
+  }
+}
+@property --purple4 {
+  syntax: "<color>";
+  initial-value: oklch(91.84% 0.0518 323.99deg);
+  inherits: true;
+}
+@media (prefers-color-scheme: dark) {
+  @property --purple4 {
+    syntax: "<color>";
+    initial-value: oklch(29.81% 0.0724 325.02deg);
+    inherits: true;
+  }
+}
+@property --purple5 {
+  syntax: "<color>";
+  initial-value: oklch(94.55% 0.0358 323.99deg);
+  inherits: true;
+}
+@media (prefers-color-scheme: dark) {
+  @property --purple5 {
+    syntax: "<color>";
+    initial-value: oklch(24.54% 0.0522 323.99deg);
+    inherits: true;
+  }
+}
 @property --canvas {
   syntax: "<color>";
   initial-value: oklch(100% 0 0deg);
@@ -8616,6 +8700,7 @@
     --red: var(--toolbaritemtext);
     --green: var(--toolbaritemtext);
     --orange: var(--toolbaritemtext);
+    --purple: var(--toolbaritemtext);
     --accentColor: var(--toolbaritemtext);
     --accentColorEffective: var(--toolbaritemtext);
   }

package/package.json

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

package/scss/colors/_index.scss

@@ -365,6 +365,61 @@ $color-tokens: (
       ),
     ),
   ),
+  purple: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.6167 0.2607 326),
+        dark: oklch(0.6586 0.2795 325.94),
+      ),
+    ),
+  ),
+  purple2: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.7807 0.1464 325.64),
+        dark: oklch(0.443 0.1667 326.12),
+      ),
+    ),
+  ),
+  purple3: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.8873 0.0728 324.7),
+        dark: oklch(0.3288 0.0959 325.84),
+      ),
+    ),
+  ),
+  purple4: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9184 0.0518 323.99),
+        dark: oklch(0.2981 0.0724 325.02),
+      ),
+    ),
+  ),
+  purple5: (
+    props: (
+      inherits: true,
+    ),
+    media: (
+      base: (
+        light: oklch(0.9455 0.0358 323.99),
+        dark: oklch(0.2454 0.0522 323.99),
+      ),
+    ),
+  ),
   //orangeemphasis light: oklch(0.6414 0.157 55.97) dark: oklch(0.83 0.1633 79.36)
   // SECTION: SystemColor
   canvas: (

package/scss/mixins/_index.scss

@@ -208,6 +208,7 @@
   --red: var(--#{$prefix}text);
   --green: var(--#{$prefix}text);
   --orange: var(--#{$prefix}text);
+  --purple: var(--#{$prefix}text);
 
   // NOTE: breaks list-item-tints
   --accentColor: var(--#{$prefix}text);

package/scss/utils/_index.scss

@@ -33,22 +33,27 @@
         red: --red,
         green: --green,
         orange: --orange,
+        purple: --purple,
         'blue.secondary': --blue2,
         'red.secondary': --red2,
         'green.secondary': --green2,
         'orange.secondary': --orange2,
+        'purple.secondary': --purple2,
         'blue.tertiary': --blue3,
         'red.tertiary': --red3,
         'green.tertiary': --green3,
         'orange.tertiary': --orange3,
+        'purple.tertiary': --purple3,
         'blue.quaternary': --blue4,
         'red.quaternary': --red4,
         'green.quaternary': --green4,
         'orange.quaternary': --orange4,
+        'purple.quaternary': --purple4,
         'blue.quinary': --blue5,
         'red.quinary': --red5,
         'green.quinary': --green5,
-        'orange.quinary': --orange5
+        'orange.quinary': --orange5,
+        'purple.quinary': --purple5
       )
   {
     :where([foreground='#{"" + $k}']) {

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

@@ -655,6 +655,10 @@
         {
           "name": "orange",
           "description": "system orange color"
+        },
+        {
+          "name": "purple",
+          "description": "system purple color"
         }
       ]
     },
@@ -672,6 +676,26 @@
         {
           "name": "blue.secondary",
           "description": "system secondary blue color"
+        },
+        {
+          "name": "gray",
+          "description": "system gray color"
+        },
+        {
+          "name": "red",
+          "description": "system red color"
+        },
+        {
+          "name": "green",
+          "description": "system green color"
+        },
+        {
+          "name": "orange",
+          "description": "system orange color"
+        },
+        {
+          "name": "purple",
+          "description": "system purple color"
         }
       ]
     },