@swiftwc/ui 0.0.0-dev.63 → 0.0.0-dev.65

package/generated/client/index.js

@@ -108,12 +108,13 @@ document.addEventListener('touchstart', () => { }, { passive: true });
 //#endregion
 // SECTION
 const handleHelp = ({ target, relatedTarget }) => {
+    console.log(999, target);
     if (!(target instanceof HTMLElement))
         return;
     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 +133,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

@@ -1,6 +1,14 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "automatic"];
 export type PickerStyle = (typeof pickerStyles)[number];
+export type DictEntry = {
+    value: string;
+    label?: string;
+    subtitle?: string;
+    systemImage?: string;
+    children: DictEntry[];
+};
+export type Dictionary = DictEntry[];
 /**
  *
  * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
@@ -26,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

@@ -8127,6 +8127,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.63",
+  "version": "0.0.0-dev.65",
   "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/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"
         }
       ]
     },