@swiftwc/ui 0.0.0-dev.44 → 0.0.0-dev.46

package/generated/client/index.d.ts

@@ -11,7 +11,7 @@ export declare const alert: (title?: string, message?: string, actions?: {
     role?: string;
 }[], options?: {
     titleVisibility?: boolean;
-}) => Promise<void>;
+}) => Promise<string>;
 export declare const confirmationDialog: (trigger: HTMLElement, title: string, message?: string, actions?: {
     label?: string;
     image?: string;

package/generated/client/index.js

@@ -171,7 +171,7 @@ if (mediaQueryList.matches)
         document.addEventListener(k, v, { passive: true });
 //#region fns
 export const alert = async (title, message, actions, options) => {
-    await navigator.locks.request('alert:', async () => {
+    return await navigator.locks.request('alert:', async () => {
         const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
         if (title) {
             const label = $(`<label-view font="headline"></label-view>`, '>1');
@@ -205,8 +205,9 @@ export const alert = async (title, message, actions, options) => {
         document.body.insertAdjacentElement('beforeend', dialog);
         dialog.showModal();
         const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
+            const { detail } = evt;
             off();
-            resolve(evt.detail.returnValue);
+            resolve(detail.returnValue);
         }, alertDialog, { once: true }).on();
         return promise;
     });
@@ -243,30 +244,14 @@ export const confirmationDialog = async (trigger, title, message, actions, optio
     }
     trigger.closest('body-view,dialog')?.insertAdjacentElement('beforeend', dialog); // dialog.showModal()
     const { promise, resolve } = Promise.withResolvers(), off = onoff('confirmation:return', (evt) => {
+        const { detail } = evt;
         off();
-        resolve(evt.detail.returnValue);
+        resolve(detail.returnValue);
     }, confirmationDialogBus, { once: true }).on();
     return promise;
-    // return await new Promise((resolve, reject) => {
-    //   const onClose = (evt: any) => {
-    //       off()
-    //       resolve(evt.detail.returnValue)
-    //     },
-    //     off = onoff('return', onClose, ConfirmationDialog, { once: true }).on()
-    //   // const onAbort = () => {
-    //   //   cleanup()
-    //   //   reject(new DOMException('aborted', 'AbortError'))
-    //   // }
-    //   // const cleanup = () => {
-    //   //   ConfirmationDialog.removeEventListener('close', onClose)
-    //   //   // controller.signal.removeEventListener('abort', onAbort)
-    //   // }
-    //   // ConfirmationDialog.addEventListener('close', onClose, { once: true })
-    //   // controller.signal.addEventListener('abort', onAbort, { once: true })
-    // })
 };
 //#endregion
-void Snapshot.waitReady; // void Snapshot.setOwnConfig()
+void Snapshot.waitReady;
 //#region exports
 export { I18n, lifecycleObserver, NavigationPath, queryInsertPosition, Snapshot, startViewTransition };
 //#endregion

package/generated/components/bordered-button.d.ts

@@ -1,5 +1,9 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
+ * @summary A button that applies standard border artwork based on the button’s context.
+ *
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */

package/generated/components/bordered-button.js

@@ -3,12 +3,23 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
+ * @summary A button that applies standard border artwork based on the button’s context.
+ *
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */
 export class BorderedButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role', 'title-key'];
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
     }
     constructor() {
         super();

package/generated/components/bordered-prominent-button.d.ts

@@ -1,5 +1,9 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
+ * @summary A button that applies standard border prominent artwork based on the button’s context.
+ *
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */

package/generated/components/bordered-prominent-button.js

@@ -3,12 +3,23 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
+ * @summary A button that applies standard border prominent artwork based on the button’s context.
+ *
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */
 export class BorderedProminentButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role', 'title-key'];
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
     }
     constructor() {
         super();

package/generated/components/borderless-button.d.ts

@@ -1,5 +1,9 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
+ * @summary A button that doesn’t apply a border.
+ *
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */

package/generated/components/borderless-button.js

@@ -3,12 +3,23 @@ import { devFlags, ensurePlaceholder, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
+ * @summary A button that doesn’t apply a border.
+ *
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */
 export class BorderlessButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role', 'title-key'];
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
     }
     constructor() {
         super();

package/generated/components/disclosure-group.d.ts

@@ -1,4 +1,9 @@
 import { DetailsBase } from '../namespace-browser/base';
+/**
+ * @summary A view that shows or hides another content view, based on the state of a disclosure control.
+ *
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ */
 export declare class DisclosureGroup extends DetailsBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/disclosure-group.js

@@ -2,6 +2,11 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { cssTime, devFlags, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
+/**
+ * @summary A view that shows or hides another content view, based on the state of a disclosure control.
+ *
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ */
 export class DisclosureGroup extends DetailsBase {
     static get observedAttributes() {
         return [

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

@@ -1,4 +1,7 @@
 import { FormBase } from '../namespace-browser/base';
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export declare class FormView extends FormBase {
     constructor();
     static polyfillDisconnectedCallback(el: HTMLFormElement): void;

package/generated/components/form-view.js

@@ -1,6 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, listActive, onoff } from '../internal/utils';
 import { FormBase } from '../namespace-browser/base';
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export class FormView extends FormBase {
     constructor() {
         super();

package/generated/components/glass-button.d.ts

@@ -1,5 +1,9 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
+ * @summary A button that applies glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */

package/generated/components/glass-button.js

@@ -3,12 +3,23 @@ import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/util
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
+ * @summary A button that applies glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */
 export class GlassButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role', 'title-key'];
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
     }
     constructor() {
         super();

package/generated/components/glass-prominent-button.d.ts

@@ -1,5 +1,9 @@
 import { ButtonBase } from '../namespace-browser/base';
 /**
+ * @summary A button that applies prominent glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */

package/generated/components/glass-prominent-button.js

@@ -3,12 +3,23 @@ import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/util
 import { ButtonBase } from '../namespace-browser/base';
 import { Snapshot } from '../snapshot';
 /**
+ * @summary A button that applies prominent glass border artwork based on the button’s context.
+ *
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button>
+ *
  * @slot overlay
  *
  */
 export class GlassProminentButton extends ButtonBase {
     static get observedAttributes() {
-        return ['role', 'title-key'];
+        return [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
     }
     constructor() {
         super();

package/generated/components/index.d.ts

@@ -15,6 +15,7 @@ export * from './label-view';
 export * from './list-view';
 export * from './menu-view';
 export * from './navigation-large-title';
+export * from './navigation-link';
 export * from './navigation-split-view';
 export * from './navigation-stack';
 export * from './navigation-title';

package/generated/components/index.js

@@ -15,6 +15,7 @@ export * from './label-view';
 export * from './list-view';
 export * from './menu-view';
 export * from './navigation-large-title';
+export * from './navigation-link';
 export * from './navigation-split-view';
 export * from './navigation-stack';
 export * from './navigation-title';

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

@@ -1,3 +1,6 @@
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export declare class ListView extends HTMLElement {
     constructor();
     disconnectedCallback(): void;

package/generated/components/list-view.js

@@ -1,5 +1,8 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, listActive, onoff } from '../internal/utils';
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export class ListView extends HTMLElement {
     // static #template: DocumentFragment
     // static get template() {

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

@@ -1,3 +1,6 @@
+/**
+ * @summary A control for presenting a menu of actions.
+ */
 export declare class MenuView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];

package/generated/components/menu-view.js

@@ -1,6 +1,9 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff, touchGlass } from '../internal/utils';
+/**
+ * @summary A control for presenting a menu of actions.
+ */
 export class MenuView extends HTMLElement {
     static get observedAttributes() {
         return ['open', 'closing', 'label'];

package/generated/components/navigation-link.d.ts

@@ -0,0 +1,10 @@
+import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A button that controls a navigation presentation.
+ */
+export declare class NavigationLink extends ButtonBase {
+    #private;
+    constructor();
+    static polyfillDisconnectedCallback(el: NavigationLink): void;
+    static polyfillConnectedCallback(el: NavigationLink): void;
+}

package/generated/components/navigation-link.js

@@ -0,0 +1,25 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @summary A button that controls a navigation presentation.
+ */
+export class NavigationLink extends ButtonBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${NavigationLink.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${NavigationLink.name} ⚡️ connect`);
+        el.tabIndex = 0;
+        CleanupRegistry.register(el, onoff('click', NavigationLink.#handleClick, el).on());
+    }
+    static #handleClick = async (evt) => {
+        // alert(99)
+    };
+}

package/generated/components/picker-view.js

@@ -530,7 +530,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderSlotted([]);
     };
     static #wrapOptionTag(node) {
-        const btn = $(`<button type="button" tabindex="0"><h-stack template="auto spacer"><label-view system-image="check"></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack');
+        const btn = $(`<button type="button" tabindex="0"><h-stack distribution="leading" template="auto spacer"><label-view system-image="check"></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack');
         // chevron = hStack?.querySelector<HTMLElement>(':scope>label-view')
         btn.setAttribute('value', extractTagFromOption(node));
         // if (selection !== btn.getAttribute('value')) chevron?.style.setProperty('visibility', 'hidden')

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

@@ -1,5 +1,5 @@
 /**
- *
+ * @summary A view that shows the progress toward completion of a task.
  */
 export declare class ProgressView extends HTMLElement {
     #private;

package/generated/components/progress-view.js

@@ -5,7 +5,7 @@ import { $, devFlags } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const progressViewStyles = ['circular', 'linear'];
 /**
- *
+ * @summary A view that shows the progress toward completion of a task.
  */
 export class ProgressView extends HTMLElement {
     static get observedAttributes() {

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

@@ -1,6 +1,5 @@
 import { InputBase } from '../namespace-browser/base';
 export declare class SearchView extends InputBase {
-    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: InputBase): void;
     static polyfillConnectedCallback(el: InputBase): void;

package/generated/components/search-view.js

@@ -2,9 +2,9 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { InputBase } from '../namespace-browser/base';
 export class SearchView extends InputBase {
-    static get observedAttributes() {
-        return ['role', 'title-key'];
-    }
+    // static get observedAttributes() {
+    //   return ['role', 'title-key']
+    // }
     constructor() {
         super();
     }

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

@@ -1,3 +1,6 @@
+/**
+ * @summary Display selectable, sortable data arranged in rows and columns.
+ */
 export declare class TableView extends HTMLElement {
     #private;
     static get template(): DocumentFragment;

package/generated/components/table-view.js

@@ -4,6 +4,9 @@ import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { $, devFlags, listActive, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+/**
+ * @summary Display selectable, sortable data arranged in rows and columns.
+ */
 export class TableView extends HTMLElement {
     #styleObserver;
     #compactToolbarItem;

package/generated/css/index.css

@@ -1583,6 +1583,7 @@
     --tooltip--dialog-translate: translateY(-10%);
     --tooltip--dialog-scale: scale(0.9);
     --tooltip--dialog-opacity: 0;
+    --label--host-white-space: pre-line;
   }
   :where(fine-tooltip[open]) {
     --tooltip--dialog-margin-block: max(env(safe-area-inset-top), var(--menu-spacing)) max(env(safe-area-inset-bottom), var(--menu-spacing));

package/package.json

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

package/scss/components/_fine-tooltip.scss

@@ -48,6 +48,8 @@
       --tooltip--dialog-translate: translateY(-10%);
       --tooltip--dialog-scale: scale(0.9);
       --tooltip--dialog-opacity: 0;
+
+      --label--host-white-space: pre-line;
     }
 
     &[open] {

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

@@ -9,10 +9,12 @@
     },
     {
       "name": "bordered-button",
-      "description": "",
+      "description": "A button that applies standard border artwork based on the button’s context.",
       "attributes": [
         {
-          "name": "role"
+          "name": "role",
+          "description": "Value Type: “”\nDescription: A value that describes the purpose of a button",
+          "values": []
         },
         {
           "name": "title-key"
@@ -21,10 +23,12 @@
     },
     {
       "name": "bordered-prominent-button",
-      "description": "",
+      "description": "A button that applies standard border prominent artwork based on the button’s context.",
       "attributes": [
         {
-          "name": "role"
+          "name": "role",
+          "description": "Value Type: “”\nDescription: A value that describes the purpose of a button",
+          "values": []
         },
         {
           "name": "title-key"
@@ -33,10 +37,12 @@
     },
     {
       "name": "borderless-button",
-      "description": "",
+      "description": "A button that doesn’t apply a border.",
       "attributes": [
         {
-          "name": "role"
+          "name": "role",
+          "description": "Value Type: “”\nDescription: A value that describes the purpose of a button",
+          "values": []
         },
         {
           "name": "title-key"
@@ -106,6 +112,7 @@
     },
     {
       "name": "disclosure-group",
+      "description": "A view that shows or hides another content view, based on the state of a disclosure control.",
       "attributes": [
         {
           "name": "open",
@@ -117,14 +124,28 @@
       "name": "fine-tooltip"
     },
     {
-      "name": "form-view"
+      "name": "form-view",
+      "description": "",
+      "attributes": [
+        {
+          "name": "navigation-link-indicator-visibility - Hides accessories like right-arrow",
+          "description": "Value Type: “hidden”\n\nDescription: chevron on NavigationLink buttons inside.",
+          "values": [
+            {
+              "name": "hidden"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "glass-button",
-      "description": "",
+      "description": "A button that applies glass border artwork based on the button’s context.",
       "attributes": [
         {
-          "name": "role"
+          "name": "role",
+          "description": "Value Type: “”\nDescription: A value that describes the purpose of a button",
+          "values": []
         },
         {
           "name": "title-key"
@@ -133,10 +154,12 @@
     },
     {
       "name": "glass-prominent-button",
-      "description": "",
+      "description": "A button that applies prominent glass border artwork based on the button’s context.",
       "attributes": [
         {
-          "name": "role"
+          "name": "role",
+          "description": "Value Type: “”\nDescription: A value that describes the purpose of a button",
+          "values": []
         },
         {
           "name": "title-key"
@@ -161,10 +184,23 @@
       ]
     },
     {
-      "name": "list-view"
+      "name": "list-view",
+      "description": "",
+      "attributes": [
+        {
+          "name": "navigation-link-indicator-visibility - Hides accessories like right-arrow",
+          "description": "Value Type: “hidden”\n\nDescription: chevron on NavigationLink buttons inside.",
+          "values": [
+            {
+              "name": "hidden"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "menu-view",
+      "description": "A control for presenting a menu of actions.",
       "attributes": [
         {
           "name": "open"
@@ -180,6 +216,10 @@
     {
       "name": "navigation-large-title"
     },
+    {
+      "name": "navigation-link",
+      "description": "A button that controls a navigation presentation."
+    },
     {
       "name": "navigation-split-view",
       "description": "A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section."
@@ -207,7 +247,7 @@
     },
     {
       "name": "progress-view",
-      "description": "",
+      "description": "A view that shows the progress toward completion of a task.",
       "attributes": [
         {
           "name": "label"
@@ -245,15 +285,7 @@
       ]
     },
     {
-      "name": "search-view",
-      "attributes": [
-        {
-          "name": "role"
-        },
-        {
-          "name": "title-key"
-        }
-      ]
+      "name": "search-view"
     },
     {
       "name": "section-view",
@@ -290,7 +322,8 @@
       "description": ""
     },
     {
-      "name": "table-view"
+      "name": "table-view",
+      "description": "Display selectable, sortable data arranged in rows and columns."
     },
     {
       "name": "text-field",
@@ -425,6 +458,16 @@
       "description": "Sets accent color",
       "valueSet": "tintSet"
     },
+    {
+      "name": "list-item-tint",
+      "description": "Sets accent color on list items",
+      "valueSet": "tintSet"
+    },
+    {
+      "name": "foreground",
+      "description": "Sets foreground color",
+      "valueSet": "foregroundSet"
+    },
     {
       "name": "frame:width",
       "description": "Sets inline-size",
@@ -451,6 +494,31 @@
         {
           "name": "blue",
           "description": "system blue color"
+        },
+        {
+          "name": "green",
+          "description": "system green color"
+        },
+        {
+          "name": "orange",
+          "description": "system orange color"
+        }
+      ]
+    },
+    {
+      "name": "foregroundSet",
+      "values": [
+        {
+          "name": "secondary",
+          "description": "system secondary color"
+        },
+        {
+          "name": "blue",
+          "description": "system blue color"
+        },
+        {
+          "name": "blue.secondary",
+          "description": "system secondary blue color"
         }
       ]
     },