@swiftwc/ui 0.0.0-dev.98 → 1.0.0-canary.0

package/generated/components/fine-tooltip.js

@@ -1,111 +0,0 @@
-var _a;
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff } from '../internal/utils';
-import { html } from '../tpl';
-/**
- * @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
- */
-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($(html `<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

@@ -1,16 +0,0 @@
-import { FormBase } from '../namespace-browser/base';
-/**
- * @summary A container view that groups controls together for entering data, like a settings screen.
- *
- * @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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'form-view': FormView;
-    }
-}

package/generated/components/form-view.js

@@ -1,65 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, listActive, onoff } from '../internal/utils';
-import { FormBase } from '../namespace-browser/base';
-/**
- * @summary A container view that groups controls together for entering data, like a settings screen.
- *
- * @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

@@ -1,16 +0,0 @@
-import { ButtonBase } from '../namespace-browser/base';
-/**
- * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
- *
- * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass 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

@@ -1,53 +0,0 @@
-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 control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
- *
- * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass 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'), Snapshot.config);
-                });
-                break;
-        }
-    }
-}

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

@@ -1,16 +0,0 @@
-import { ButtonBase } from '../namespace-browser/base';
-/**
- * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
- *
- * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass 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

@@ -1,53 +0,0 @@
-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 control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
- *
- * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass 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'), Snapshot.config);
-                });
-                break;
-        }
-    }
-}

package/generated/components/h-stack.d.ts

@@ -1,22 +0,0 @@
-/**
- * @summary A view that arranges its children side by side.
- *
- * @attr {@Template} template — The main-axis grid template
- *
- * @attr {@Spacing} spacing — The gap between the primary axis
- *
- * @attr {@blockSet} alignment — The cross-axis alignment
- * @attr {@inlineSet} distribution — The main-axis alignment
- * @attr {@inlinePlacementSet} placement — The main-axis alignment
- *
- */
-export declare class HStack extends HTMLElement {
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'h-stack': HStack;
-    }
-}

package/generated/components/h-stack.js

@@ -1,26 +0,0 @@
-import { devFlags } from '../internal/utils';
-/**
- * @summary A view that arranges its children side by side.
- *
- * @attr {@Template} template — The main-axis grid template
- *
- * @attr {@Spacing} spacing — The gap between the primary axis
- *
- * @attr {@blockSet} alignment — The cross-axis alignment
- * @attr {@inlineSet} distribution — The main-axis alignment
- * @attr {@inlinePlacementSet} placement — The main-axis alignment
- *
- */
-export class HStack extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${HStack.name} ⚡️ connect`);
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${HStack.name} ⚡️ disconnect`);
-    }
-}

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

@@ -1,18 +0,0 @@
-/**
- * @summary A view that displays an image.
- *
- */
-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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'image-view': ImageView;
-    }
-}

package/generated/components/image-view.js

@@ -1,68 +0,0 @@
-import { $, devFlags } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-/**
- * @summary A view that displays an image.
- *
- */
-export class ImageView extends HTMLElement {
-    static get observedAttributes() {
-        return ['system-name', 'system-weight'];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `<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}")`);
-        if (oldValue === newValue)
-            return;
-        switch (name) {
-            case 'system-weight': {
-                this.#render(this.getAttribute('system-name'), newValue);
-                break;
-            }
-            case 'system-name': {
-                this.#render(newValue, this.getAttribute('system-weight'));
-                // // 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"></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;
-            }
-        }
-    }
-    #render(icon, weight) {
-        // if (!icon) {
-        //   this.querySelector(':scope>:not([slot])')?.remove()
-        //   return
-        // }
-        const tokens = [`ph${weight ? `-${weight}` : ''}`, `ph-${icon}`];
-        // const container = this.querySelector<HTMLElement>(':scope>:not([slot])') ?? this.appendChild<HTMLElement>($(`<i style="line-height: 1"></i>`, '>1'))
-        queryMorph(':not([slot])', html `<i style="line-height: 1" class="${tokens.join(' ')}"></i>`, this, { removeIf: !icon });
-        // if ('1' !== container.style.getPropertyValue('line-height')) container.style.setProperty('line-height', '1')
-        // for (const token of container.classList) if (token.startsWith('ph') && !tokens.includes(token)) container.classList.remove(token)
-        // container.classList.add(...tokens)
-    }
-    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,47 +0,0 @@
-export * from './alert-dialog';
-export * from './body-view';
-export * from './bordered-button';
-export * from './bordered-prominent-button';
-export * from './borderless-button';
-export * from './color-scheme';
-export * from './confirmation-dialog';
-export * from './content-unavailable';
-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 './h-stack';
-export * from './image-view';
-export * from './label-view';
-export * from './labeled-content';
-export * from './list-view';
-export * from './menu-view';
-export * from './navigation-large-title';
-export * from './navigation-split-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 './search-view';
-export * from './section-view';
-export * from './sheet-view';
-export * from './sidebar-toggle';
-export * from './sidebar-view';
-export * from './sticky-container';
-export * from './tab-bar';
-export * from './tab-item';
-export * from './tab-view';
-export * from './table-view';
-export * from './text-field';
-export * from './toggle-view';
-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,47 +0,0 @@
-export * from './alert-dialog';
-export * from './body-view';
-export * from './bordered-button';
-export * from './bordered-prominent-button';
-export * from './borderless-button';
-export * from './color-scheme';
-export * from './confirmation-dialog';
-export * from './content-unavailable';
-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 './h-stack';
-export * from './image-view';
-export * from './label-view';
-export * from './labeled-content';
-export * from './list-view';
-export * from './menu-view';
-export * from './navigation-large-title';
-export * from './navigation-split-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 './search-view';
-export * from './section-view';
-export * from './sheet-view';
-export * from './sidebar-toggle';
-export * from './sidebar-view';
-export * from './sticky-container';
-export * from './tab-bar';
-export * from './tab-item';
-export * from './tab-view';
-export * from './table-view';
-export * from './text-field';
-export * from './toggle-view';
-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

@@ -1,27 +0,0 @@
-/**
- * @summary A view that labels items with an icon and a title.
- *
- * @example <label-view><span>Hello world!</span></label-view> — Creating a label using a `span` element
- * @example <label-view title="Hello world!"></label-view> — Creating a label using the `title` attribute
- * @example <label-view system-image="hand-waving"><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `system-image` attribute
- * @example <label-view><i slot="icon" class="ph ph-duotone ph-hand-waving"></i><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `icon` slot
- *
- * @attr {@Font} font — Sets the default font for text in this view.
- *
- * @slot — Any children without a `slot` attribute are placed in the title block.
- * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
- *
- * @cssprop --label-gap — The gap between the icon and the title.
- * @cssprop {number} --label-image-size — The size of the icon.
- * @cssprop --label-padding-inline — The padding inline of the label.
- *
- */
-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;
-}