@swiftwc/ui 0.0.0-dev.22 → 0.0.0-dev.24

package/generated/client/index.d.ts

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

package/generated/client/index.js

@@ -101,6 +101,69 @@ if (0 < polyfills.size) {
 }
 // SECTION: Safari polyfill
 document.addEventListener('touchstart', () => { }, { passive: true });
+// SECTION
+const handleHelp = ({ target, relatedTarget }) => {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if (relatedTarget instanceof HTMLElement && relatedTarget && trigger.contains(relatedTarget))
+        return;
+    const newAnchorName = `--help-${self.crypto.randomUUID()}`;
+    const tooltip = $(`<fine-tooltip></fine-tooltip>`, '>1');
+    trigger.style.setProperty('anchor-name', newAnchorName);
+    tooltip.style.setProperty('position-anchor', newAnchorName);
+    document.body.appendChild(tooltip);
+    // setInterval(() => {
+    //   trigger.setAttribute('help', trigger.getAttribute('help') + 'h')
+    // }, 2000)
+    // console.log(999, trigger)
+}, handleDone = ({ target, relatedTarget }) => {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if (relatedTarget instanceof HTMLElement && relatedTarget && trigger.contains(relatedTarget))
+        return;
+    const anchorName = trigger.style.anchorName;
+    if (!anchorName.startsWith('--help-'))
+        return;
+    // for (const el of document.querySelectorAll<HTMLElement>(`[style*="--help-${CSS.escape(anchorName)}"][help]`)) el.style.removeProperty('anchor-name') //trigger.style.removeProperty('anchor-name')
+    // for (const el of document.querySelectorAll(`[style*="${CSS.escape(anchorName)}"]:not([help])`)) el.remove()
+    //   return
+    // }
+    const tooltip = document.querySelector(`[style*="${CSS.escape(anchorName)}"]:not([help])`);
+    if (!tooltip)
+        return;
+    // for (const el of document.querySelectorAll<HTMLElement>(`[style*="--help-${CSS.escape(anchorName)}"][help]`)) el.style.removeProperty('anchor-name') //trigger.style.removeProperty('anchor-name')
+    // for (const el of document.querySelectorAll(`[style*="${CSS.escape(anchorName)}"]:not([help])`)) el.remove()
+    //   return
+    // }
+    // trigger.style.removeProperty('anchor-name')
+    tooltip.hidePopover(); // tooltip.remove?.()
+};
+const mediaQueryList = self.matchMedia(`(pointer: fine)`);
+mediaQueryList.addEventListener('change', ({ matches }) => {
+    for (const [k, v] of [
+        ['pointerover', handleHelp],
+        ['pointerout', handleDone],
+    ])
+        document.removeEventListener(k, v);
+    if (matches)
+        for (const [k, v] of [
+            ['pointerover', handleHelp],
+            ['pointerout', handleDone],
+        ])
+            document.addEventListener(k, v, { passive: true });
+});
+if (mediaQueryList.matches)
+    for (const [k, v] of [
+        ['pointerover', handleHelp],
+        ['pointerout', handleDone],
+    ])
+        document.addEventListener(k, v, { passive: true });
 // SECTION: Transitions
 const cleanup = (lm, type) => {
     let arr = [Snapshot.config['vt-fwd-class-name'], 'fwdd', 'fwn', 'fwnn', 'bwd', 'bwdd', 'bwn', 'bwnn'];
@@ -253,39 +316,41 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
     }
 };
 export const alert = async (title, message, actions, options) => {
-    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');
-        label.setAttribute('title', title);
-        vStack.insertAdjacentElement('beforeend', label);
-    }
-    if (message) {
-        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
-        label.setAttribute('title', message);
-        vStack.insertAdjacentElement('beforeend', label);
-    }
-    for (const [index, action] of (actions ?? []).entries()) {
-        const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
-        btn.setAttribute('value', `${index}`);
-        if (action?.role)
-            btn.setAttribute('role', action.role);
-        if (action.label || action.image) {
-            const label = $(`<label-view title="${action.label}"></label-view>`, '>1');
-            if (action.label)
-                label.setAttribute('title', action.label);
-            if (action.image)
-                label.setAttribute('system-image', action.image);
-            btn.appendChild(label);
+    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');
+            label.setAttribute('title', title);
+            vStack.insertAdjacentElement('beforeend', label);
         }
-        dialog.insertAdjacentElement('beforeend', btn);
-    }
-    document.body.insertAdjacentElement('beforeend', dialog);
-    dialog.showModal();
-    const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
-        off();
-        resolve(evt.detail.returnValue);
-    }, alertDialog, { once: true }).on();
-    return promise;
+        if (message) {
+            const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+            label.setAttribute('title', message);
+            vStack.insertAdjacentElement('beforeend', label);
+        }
+        for (const [index, action] of (actions ?? []).entries()) {
+            const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
+            btn.setAttribute('value', `${index}`);
+            if (action?.role)
+                btn.setAttribute('role', action.role);
+            if (action.label || action.image) {
+                const label = $(`<label-view></label-view>`, '>1');
+                if (action.label)
+                    label.setAttribute('title', action.label);
+                if (action.image)
+                    label.setAttribute('system-image', action.image);
+                btn.appendChild(label);
+            }
+            dialog.insertAdjacentElement('beforeend', btn);
+        }
+        document.body.insertAdjacentElement('beforeend', dialog);
+        dialog.showModal();
+        const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
+            off();
+            resolve(evt.detail.returnValue);
+        }, alertDialog, { once: true }).on();
+        return promise;
+    });
 };
 export const confirmationDialog = async (trigger, title, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;

package/generated/components/bordered-button.js

@@ -30,7 +30,7 @@ export class BorderedButton extends ButtonBase {
         switch (attributeName) {
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, attributeName);
+                    buttonRole(target, target.getAttribute(attributeName));
                 });
                 break;
         }

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

@@ -30,7 +30,7 @@ export class BorderedProminentButton extends ButtonBase {
         switch (attributeName) {
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, attributeName);
+                    buttonRole(target, target.getAttribute(attributeName));
                 });
                 break;
         }

package/generated/components/borderless-button.js

@@ -30,7 +30,7 @@ export class BorderlessButton extends ButtonBase {
         switch (attributeName) {
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, attributeName);
+                    buttonRole(target, target.getAttribute(attributeName));
                 });
                 break;
         }

package/generated/components/fine-tooltip.d.ts

@@ -0,0 +1,7 @@
+export declare class FineTooltip extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    hidePopover(): void;
+}

package/generated/components/fine-tooltip.js

@@ -0,0 +1,93 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, onoff } from '../internal/utils';
+export class FineTooltip extends HTMLElement {
+    constructor() {
+        super();
+    }
+    #handleMutation = (mutations) => {
+        for (const { target, attributeName } of mutations)
+            if (target instanceof HTMLElement && target && attributeName)
+                this.#render(target.getAttribute(attributeName));
+    };
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        console.debug(`${_a.name} ⚡️ measure`);
+        if (target.hasAttribute('closing'))
+            return;
+        if (!(target instanceof HTMLElement && target))
+            return;
+        const { top } = target.getBoundingClientRect();
+        const vpHeight = self.visualViewport?.height ?? 0, blockSize = borderBoxSize.at(0)?.blockSize ?? 0;
+        if (top > vpHeight - blockSize - 50) {
+            target.style.setProperty('position-area', 'top center');
+            target.style.setProperty('transform-origin', 'bottom');
+        }
+    };
+    #observer = new MutationObserver(this.#handleMutation);
+    #resizeObserver = new ResizeObserver(this.#handleMeasure);
+    get #queryTrigger() {
+        const positionAnchor = this.style.positionAnchor;
+        if (!positionAnchor.startsWith('--help-'))
+            return;
+        const trigger = document.querySelector(`[style*="${CSS.escape(positionAnchor)}"][help]`);
+        return trigger ?? undefined;
+    }
+    #render = (str) => {
+        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+        if (str)
+            label.setAttribute('title', str);
+        else
+            label.removeAttribute('title');
+    };
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        this.removeAttribute('closing');
+        this.popover = 'manual';
+        this.inert = true;
+        CleanupRegistry.register(this, onoff('toggle', this.#handleToggle, this).on());
+        CleanupRegistry.register(this, onoff('beforetoggle', this.#handleBeforetoggle, this).on());
+        this.showPopover();
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        this.#resizeObserver.unobserve(this);
+        this.#observer?.disconnect();
+        this.#queryTrigger?.style.removeProperty('anchor-name');
+        CleanupRegistry.unregister(this);
+    }
+    #handleToggle = ({ newState }) => {
+        if ('closed' !== newState)
+            return;
+        this.remove();
+    };
+    #handleBeforetoggle = (evt) => {
+        if ('open' !== evt.newState)
+            return;
+        const trigger = this.#queryTrigger;
+        if (!trigger) {
+            evt.preventDefault();
+            this.remove();
+            return;
+        }
+        else {
+            this.#render(trigger.getAttribute('help'));
+            this.#observer.observe(trigger, {
+                attributes: true,
+                attributeFilter: ['help'],
+            });
+            this.#resizeObserver.observe(this);
+        }
+        this.toggleAttribute('open', 'open' === evt.newState);
+    };
+    hidePopover() {
+        if (this.hasAttribute('closing'))
+            return;
+        this.setAttribute('closing', '');
+        Promise.allSettled(this.getAnimations().map(({ finished }) => finished)).then(() => {
+            if (!this.hasAttribute('closing'))
+                return;
+            this?.remove();
+        });
+    }
+}
+_a = FineTooltip;

package/generated/components/glass-button.js

@@ -30,7 +30,7 @@ export class GlassButton extends ButtonBase {
         switch (attributeName) {
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, attributeName);
+                    buttonRole(target, target.getAttribute(attributeName));
                 });
                 break;
         }

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

@@ -30,7 +30,7 @@ export class GlassProminentButton extends ButtonBase {
         switch (attributeName) {
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    buttonRole(target, attributeName);
+                    buttonRole(target, target.getAttribute(attributeName));
                 });
                 break;
         }

package/generated/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './confirmation-dialog';
 export * from './content-unavailable-view';
 export * from './date-picker';
 export * from './disclosure-group';
+export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
@@ -19,6 +20,7 @@ export * from './navigation-stack';
 export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
+export * from './progress-view';
 export * from './screen-view';
 export * from './scroll-view-proxy';
 export * from './scroll-view';

package/generated/components/index.js

@@ -7,6 +7,7 @@ export * from './confirmation-dialog';
 export * from './content-unavailable-view';
 export * from './date-picker';
 export * from './disclosure-group';
+export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';
@@ -19,6 +20,7 @@ export * from './navigation-stack';
 export * from './navigation-title';
 export * from './picker-view';
 export * from './plain-button';
+export * from './progress-view';
 export * from './screen-view';
 export * from './scroll-view-proxy';
 export * from './scroll-view';

package/generated/components/label-view.js

@@ -6,12 +6,17 @@ export class LabelView extends HTMLElement {
     static #template;
     static get template() {
         return (this.#template ??= $(String.raw `
-  <div part="root label-image-stack">
     <slot name="image"></slot>
-  </div>
-  <div part="root label-title-stack">
     <slot></slot>
-  </div>`));
+    `
+        //     String.raw`
+        // <div part="root label-image-stack">
+        //   <slot name="image"></slot>
+        // </div>
+        // <div part="root label-title-stack">
+        //   <slot></slot>
+        // </div>`
+        ));
     }
     #shadowRoot;
     constructor() {

package/generated/components/picker-view.js

@@ -20,8 +20,8 @@ export class PickerView extends FormAssociatedBase {
     static #templates = new Map();
     #lastRenderedStyle; //string | null
     #shadowRoot;
-    #customValidity = '';
     #slots = new Map();
+    #customValidity = '';
     // #validitiesSlot?: HTMLSlotElement
     // #datalistSlot?: HTMLSlotElement
     // #tagSlot?: HTMLSlotElement

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

@@ -0,0 +1,13 @@
+/**
+ *
+ */
+export declare class ProgressView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get progressViewStyle(): "circular" | "linear";
+    get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/progress-view.js

@@ -0,0 +1,122 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { CSSStyleObserver } from '../internal/class/css-style-observer';
+import { $ } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+const progressViewStyles = ['circular', 'linear'];
+/**
+ *
+ */
+export class ProgressView extends HTMLElement {
+    static get observedAttributes() {
+        return ['label', 'current-value-label', 'value'];
+    }
+    static #templates = new Map();
+    #cssStyleObserver;
+    #progressViewStyle;
+    #lastRenderedStyle;
+    #shadowRoot;
+    #slots = new Map();
+    get progressViewStyle() {
+        return this.#progressViewStyle ?? 'circular';
+    }
+    get template() {
+        if (!_a.#templates.has(this.progressViewStyle))
+            switch (this.progressViewStyle) {
+                case 'linear':
+                    _a.#templates.set(this.progressViewStyle, $(String.raw `
+            <slot></slot>
+            <div part="root progress-control progress-line-control"></div>
+            <slot name="current-value"></slot>
+            `));
+                    break;
+                case 'circular':
+                default:
+                    _a.#templates.set(this.progressViewStyle, $(String.raw `
+            <div part="root progress-control progress-circular-control">
+              <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
+            </div>
+            <slot></slot>
+            <slot name="current-value"></slot>
+            `));
+                    break;
+            }
+        return _a.#templates.get(this.progressViewStyle);
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        this.#cssStyleObserver = new CSSStyleObserver({
+            properties: ['--progress-view-style-index'],
+        });
+        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
+        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'label': {
+                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view foreground="secondary"></label-view>`, '>1'));
+                if (newValue) {
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label.removeAttribute('title');
+                break;
+            }
+            case 'current-value-label': {
+                let label = this.querySelector(':scope>[slot=current-value]');
+                if (newValue) {
+                    label ??= this.appendChild($(`<label-view slot="current-value" font="callout" foreground="secondary"></label-view>`, '>1'));
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label?.remove();
+                break;
+            }
+        }
+    }
+    #handleStyleChange = () => {
+        console.debug(`${_a.name} ⚡️ style`);
+        const raw = self.getComputedStyle(this).getPropertyValue('--progress-view-style-index').trim();
+        const newValue = progressViewStyles[Number(raw)] ?? progressViewStyles[0];
+        if (newValue === this.#progressViewStyle)
+            return;
+        this.#progressViewStyle = newValue;
+        this.#render();
+    };
+    #render() {
+        console.debug(`${_a.name} ⚡️ render (${this.#progressViewStyle})`);
+        if (!this.isConnected)
+            return;
+        if (this.#lastRenderedStyle === this.#progressViewStyle)
+            return; // skip if already applied
+        this.#lastRenderedStyle = this.#progressViewStyle;
+        this.#shadowRoot.replaceChildren(document.importNode(this.template, true)); // clear shadow DOM
+        CleanupRegistry.unregister(this, 'slots');
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        }, 'slots');
+        switch (this.#progressViewStyle
+        //
+        ) {
+        }
+    }
+}
+_a = ProgressView;

package/generated/components/tool-bar-item.d.ts

@@ -1,5 +1,7 @@
 export declare class ToolBarItem extends HTMLElement {
+    static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/tool-bar-item.js

@@ -1,9 +1,10 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { buttonRole, onoff, touchGlass } from '../internal/utils';
+import { Snapshot } from '../snapshot';
 export class ToolBarItem extends HTMLElement {
-    // static get observedAttributes() {
-    //   return ['preferred-fine-modal-placement']
-    // }
+    static get observedAttributes() {
+        return ['slot', 'data-previous-slot'];
+    }
     constructor() {
         super();
     }
@@ -35,4 +36,17 @@ export class ToolBarItem extends HTMLElement {
         console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${ToolBarItem.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'slot':
+            case 'data-previous-slot':
+                const target = this.querySelector(':scope>button');
+                if (target && ['confirmation-action'].includes(newValue ?? ''))
+                    Snapshot.waitReady.then(() => {
+                        buttonRole(target, newValue);
+                    });
+                break;
+        }
+    }
 }