@swiftwc/ui 0.0.0-dev.5 → 0.0.0-dev.50

package/generated/components/fine-tooltip.js

@@ -0,0 +1,107 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, devFlags, onoff } from '../internal/utils';
+export class FineTooltip extends HTMLElement {
+    constructor() {
+        super();
+    }
+    #handleTriggerRemovalMutation = (mutations) => {
+        if (this.#queryTrigger?.isConnected)
+            return;
+        this?.remove();
+    };
+    #handleTriggerAttrMutation = (mutations) => {
+        for (const { target, attributeName } of mutations)
+            if (target instanceof HTMLElement && attributeName)
+                this.#render(target.getAttribute(attributeName));
+    };
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        if (target.hasAttribute('closing'))
+            return;
+        if (!(target instanceof HTMLElement))
+            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');
+        }
+    };
+    #mutationObserver = new MutationObserver(this.#handleTriggerAttrMutation);
+    #mutationObserver2 = new MutationObserver(this.#handleTriggerRemovalMutation);
+    #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() {
+        if (devFlags.debug)
+            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() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        this.#resizeObserver.unobserve(this);
+        this.#mutationObserver?.disconnect();
+        this.#mutationObserver2?.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.#mutationObserver.observe(trigger, {
+                attributes: true,
+                attributeFilter: ['help'],
+            });
+            this.#mutationObserver2.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            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/form-view.d.ts

@@ -0,0 +1,9 @@
+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;
+    static polyfillConnectedCallback(el: HTMLFormElement): void;
+}

package/generated/components/form-view.js

@@ -0,0 +1,63 @@
+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();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${FormView.name} ⚡️ disconnect`);
+        // finally
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${FormView.name} ⚡️ connect`);
+        if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
+            el.method = 'dialog';
+            el.noValidate = true;
+        }
+        CleanupRegistry.register(el, onoff(listActive(el), el).on());
+        if (el.matches(':empty'))
+            el.insertAdjacentHTML('beforeend', `<button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <details is="disclosure-group">
+              <summary><button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></summary>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            </details>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <details is="disclosure-group">
+              <summary><label-view system-image="smiley" title="Item 1"></label-view></summary>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            </details>
+            <details is="disclosure-group">
+              <summary><label-view system-image="smiley" title="Item 1"></label-view></summary>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+              <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            </details>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>
+            <button type="button" tabindex="0"><label-view system-image="smiley" title="Item 1"></label-view></button>`);
+    }
+}

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

@@ -0,0 +1,16 @@
+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
+ *
+ */
+export declare class GlassButton extends ButtonBase {
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: ButtonBase): void;
+    static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

package/generated/components/glass-button.js

@@ -0,0 +1,53 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+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 [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${GlassButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${GlassButton.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
+        el.tabIndex = 0;
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                });
+                break;
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+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
+ *
+ */
+export declare class GlassProminentButton extends ButtonBase {
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: ButtonBase): void;
+    static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

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

@@ -0,0 +1,53 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+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 [
+            /**
+             * A value that describes the purpose of a button
+             * @type {destructive|confirm}
+             */
+            'role',
+            'title-key',
+        ];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${GlassProminentButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${GlassProminentButton.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
+        el.tabIndex = 0;
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'title-key':
+            case 'role':
+                Snapshot.waitReady.then(() => {
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                });
+                break;
+        }
+    }
+}

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

@@ -0,0 +1,9 @@
+export declare class ImageView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/image-view.js

@@ -0,0 +1,46 @@
+import { $, devFlags } from '../internal/utils';
+export class ImageView extends HTMLElement {
+    static get observedAttributes() {
+        return ['system-name'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `<slot></slot>`));
+    }
+    #shadowRoot;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${ImageView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'system-name':
+                if (oldValue === newValue)
+                    break;
+                // this.innerHTML = `<i style="line-height: 1.05" class="ph ph-${newValue}"></i>`
+                //this.setAttribute('class', `ph ph-${newValue}`)
+                let image = this.querySelector(':scope>:not([slot])');
+                if (newValue) {
+                    const el = image ?? $(`<i style="line-height: 1.05"></i>`, '>1');
+                    el.setAttribute('class', `ph ph-${newValue}`);
+                    image ??= this.appendChild(el);
+                    // image ??= this.appendChild($(`<i style="line-height: 1.05"></i>`, '>1'))
+                    // image.setAttribute('class', `ph ph-${newValue}`)
+                }
+                else
+                    image?.remove();
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ImageView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ImageView.name} ⚡️ connect`);
+    }
+}

package/generated/components/index.d.ts

@@ -1,15 +1,44 @@
-export * from './navigation-stack';
+export * from './alert-dialog';
+export * from './body-view';
+export * from './bordered-button';
+export * from './bordered-prominent-button';
+export * from './borderless-button';
+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';
+export * from './image-view';
+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 './sheet-view';
+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';
-export * from './body-view';
-export * from './tab-bar';
+export * from './search-view';
+export * from './section-view';
+export * from './sheet-view';
 export * from './sidebar-toggle';
-export * from './borderless-button';
-export * from './v-keyboard';
-export * from './navigation-bar';
-export * from './bottom-bar';
+export * from './sidebar-view';
+export * from './sticky-container';
+export * from './tab-bar';
 export * from './tab-item';
 export * from './tab-view';
-export * from './sidebar-view';
-export * from './disclosure-group';
+export * from './table-view';
+export * from './text-field';
+export * from './tool-bar-item-group';
+export * from './tool-bar-item';
+export * from './tool-bar';
+export * from './v-keyboard';
+export * from './v-stack';

package/generated/components/index.js

@@ -1,20 +1,44 @@
-/*
- * This is a barrel export file for all components and their related types.
- *
- * 🟢 You can import this file directly.
- */
-export * from './navigation-stack';
+export * from './alert-dialog';
+export * from './body-view';
+export * from './bordered-button';
+export * from './bordered-prominent-button';
+export * from './borderless-button';
+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';
+export * from './image-view';
+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 './sheet-view';
+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';
-export * from './body-view';
-export * from './tab-bar';
+export * from './search-view';
+export * from './section-view';
+export * from './sheet-view';
 export * from './sidebar-toggle';
-export * from './borderless-button';
-export * from './v-keyboard';
-export * from './navigation-bar';
-export * from './bottom-bar';
+export * from './sidebar-view';
+export * from './sticky-container';
+export * from './tab-bar';
 export * from './tab-item';
 export * from './tab-view';
-export * from './sidebar-view';
-export * from './disclosure-group';
+export * from './table-view';
+export * from './text-field';
+export * from './tool-bar-item-group';
+export * from './tool-bar-item';
+export * from './tool-bar';
+export * from './v-keyboard';
+export * from './v-stack';

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

@@ -0,0 +1,9 @@
+export declare class LabelView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/label-view.js

@@ -0,0 +1,51 @@
+import { $, devFlags, renderLabelIcon, renderLabelTitle } from '../internal/utils';
+export class LabelView extends HTMLElement {
+    static get observedAttributes() {
+        return ['system-image', 'title', 'line-limit', 'truncation-mode'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <slot name="icon"></slot>
+    <slot></slot>
+    `
+        //     String.raw`
+        // <div part="root label-image-stack">
+        //   <slot name="image"></slot>
+        // </div>
+        // <div part="root label-title-stack">
+        //   <slot></slot>
+        // </div>`
+        ));
+    }
+    #shadowRoot;
+    // #reflectScheduled = false
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        // this.#scheduleReflect()
+        switch (name) {
+            case 'system-image':
+                renderLabelIcon(this, newValue);
+                break;
+            case 'title':
+                renderLabelTitle(this, newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${LabelView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${LabelView.name} ⚡️ connect`);
+    }
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @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;
+    connectedCallback(): void;
+}

package/generated/components/list-view.js

@@ -0,0 +1,32 @@
+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() {
+    //   return (this.#template ??= $(
+    //     String.raw`
+    //   <slot name="searchable"></slot>
+    //   <slot></slot>
+    //   `
+    //   ))
+    // }
+    // #shadowRoot
+    constructor() {
+        super();
+        // this.#shadowRoot = this.attachShadow({ mode: 'closed' })
+        // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ListView.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ListView.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(listActive(this), this).on());
+    }
+}

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

@@ -0,0 +1,12 @@
+/**
+ * @summary A control for presenting a menu of actions.
+ */
+export declare class MenuView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}