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

package/generated/components/label-view.js

@@ -1,87 +0,0 @@
-import { $, devFlags } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-/**
- * @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 class LabelView extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'system-image',
-            'title',
-            'line-limit',
-            /**
-             * @type {"tail"}
-             */
-            'truncation-mode',
-        ];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `
-      <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':
-            // case 'title':
-            //   render(
-            //     html`${this.getAttribute('title') ? html`<span>${this.getAttribute('title')}</span>` : null}${this.getAttribute('system-image')
-            //       ? html`<image-view slot="icon" system-name="${this.getAttribute('system-image')}"></image-view>`
-            //       : null}`,
-            //     this
-            //   )
-            //   break
-            case 'system-image':
-                queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${newValue}"></image-view>`, this, { removeIf: !newValue });
-                break;
-            case 'title':
-                queryMorph(':not([slot])', html `<span>${newValue}</span>`, this, { removeIf: !newValue });
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ disconnect`);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabelView.name} ⚡️ connect`);
-    }
-}

package/generated/components/labeled-content.d.ts

@@ -1,27 +0,0 @@
-/**
- * @summary A container view that pairs a label with a value.
- *
- * @slot — The default slot.
- * @slot label — Use the `slot="label"` attribute to place childen in the label block.
- * @slot header
- * @slot footer
- *
- * @csspart labeled-content-container
- * @csspart labeled-content-stack
- * @csspart labeled-content-label-stack
- * @csspart labeled-content-value-stack
- */
-export declare class LabeledContent 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 {
-        'labeled-content': LabeledContent;
-    }
-}

package/generated/components/labeled-content.js

@@ -1,160 +0,0 @@
-import { $, devFlags } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-/**
- * @summary A container view that pairs a label with a value.
- *
- * @slot — The default slot.
- * @slot label — Use the `slot="label"` attribute to place childen in the label block.
- * @slot header
- * @slot footer
- *
- * @csspart labeled-content-container
- * @csspart labeled-content-stack
- * @csspart labeled-content-label-stack
- * @csspart labeled-content-value-stack
- */
-export class LabeledContent extends HTMLElement {
-    static get observedAttributes() {
-        return [
-            'value',
-            'label',
-            'header',
-            'footer',
-            /**
-             * @type {vertical|horizontal}
-             */
-            'labeled-content-style',
-            'format',
-        ];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `
-      <div part="root labeled-content-container">
-        <slot name="header"></slot>
-        <div part="root labeled-content-stack">
-          <div part="root labeled-content-label-stack">
-            <slot name="label"></slot>
-          </div>
-          <div part="root labeled-content-value-stack">
-            <slot></slot>
-          </div>
-        </div>
-        <slot name="footer"></slot>
-      </div>
-    `));
-    }
-    #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(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        if (oldValue === newValue)
-            return;
-        switch (name) {
-            case 'header':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=header]')?.remove()
-                //   break
-                // }
-                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
-                queryMorph('[slot=header]', html `<header slot="header">
-            <label-view font="callout">
-              <span>${newValue}</span>
-            </label-view>
-          </header>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   header
-                // )
-                break;
-            case 'footer':
-                // if (!newValue) {
-                //   this.querySelector(':scope>[slot=footer]')?.remove()
-                //   break
-                // }
-                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
-                queryMorph('[slot=footer]', html `<footer slot="footer">
-            <label-view font="callout">
-              <span>${newValue}</span>
-            </label-view>
-          </footer>`, this, { removeIf: !newValue });
-                // render(
-                //   html`<label-view font="callout">
-                //     <span>${newValue}</span>
-                //   </label-view>`,
-                //   footer
-                // )
-                break;
-            case 'value': {
-                const val = this.#fmt(newValue, this.getAttribute('format'));
-                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this);
-                break;
-            }
-            case 'format': {
-                const val = this.#fmt(this.getAttribute('value'), newValue);
-                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this);
-                break;
-            }
-            case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ disconnect`);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${LabeledContent.name} ⚡️ connect`);
-    }
-    // <type>:<locale>;<option>=<value>;<option>=<value>
-    #fmt = (value, format) => {
-        const parseFormat = (format) => {
-            if (!format)
-                return {
-                    type: 'text',
-                    locale: navigator.language,
-                    options: {},
-                };
-            const [type, locale = navigator.language, opts = {}] = format.split(':', 3), loc = new Intl.Locale(locale), options = Object.fromEntries(new URLSearchParams(opts));
-            return {
-                type,
-                locale: loc.toString(),
-                options,
-            };
-        };
-        const { type, locale, options } = parseFormat(format);
-        switch (type) {
-            case 'currency':
-                return new Intl.NumberFormat(locale, { style: 'currency', ...options }).format(Number(value)); // currency:en-US;currency=USD "$1,234.50"
-            case 'percent':
-                return new Intl.NumberFormat(locale, { style: 'percent' }).format(Number(value)); // percent:en-US "42%"
-            case 'unit':
-                return new Intl.NumberFormat(locale, { style: 'unit', ...options }).format(Number(value)); // percent:en-US:unit=kilometer-per-hour "50 km/h"
-            case 'number':
-                return new Intl.NumberFormat(locale, options).format(Number(value)); // number:en-US:notation=compact "1.2M"
-            case 'date':
-                return new Intl.DateTimeFormat(locale, options).format(new Date(value ?? '2000')); // { dateStyle: 'full', timeStyle: 'short' } "Saturday, July 4, 2026 at 2:30 PM"
-            case 'relative-time': {
-                const [number = 0, unit = 'day'] = value?.split('~') ?? [];
-                return new Intl.RelativeTimeFormat(locale, options).format(Number(number), unit); // -1~day { numeric: 'auto' } "yesterday"
-            }
-            case 'list':
-                return new Intl.ListFormat(locale, options).format(value?.split('~') ?? []); // '' { style: 'long', type: 'conjunction' } "Foo, Bar, and Baz"
-            case 'region':
-                return value ? new Intl.DisplayNames(locale, { type: 'region' }).of(value) : ''; // "Greece"
-            // "Foo, Bar, and Baz"
-            default:
-                return value;
-        }
-    };
-}

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

@@ -1,15 +0,0 @@
-/**
- * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
- *
- * @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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'list-view': ListView;
-    }
-}

package/generated/components/list-view.js

@@ -1,22 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, listActive, onoff } from '../internal/utils';
-/**
- * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
- *
- * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
- */
-export class ListView extends HTMLElement {
-    constructor() {
-        super();
-    }
-    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

@@ -1,20 +0,0 @@
-/**
- * @summary A control that opens a menu of actions.
- *
- * @slot — The default slot.
- * @slot label
- */
-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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'menu-view': MenuView;
-    }
-}

package/generated/components/menu-view.js

@@ -1,140 +0,0 @@
-var _a;
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff, touchGlass } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-/**
- * @summary A control that opens a menu of actions.
- *
- * @slot — The default slot.
- * @slot label
- */
-export class MenuView extends HTMLElement {
-    static get observedAttributes() {
-        return ['open', 'closing', 'label'];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `<button type="button" part="root button menu-summary">
-          <slot name="label"></slot>
-        </button>
-        <dialog part="root menu-dialog" autofocus inert>
-          <form part="root menu-form" method="dialog" novalidate>
-            <div part="root menu-scrollable">
-              <slot></slot>
-            </div>
-          </form>
-        </dialog>`));
-    }
-    #shadowRoot;
-    #dialog;
-    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(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'open':
-                if (!this.#dialog)
-                    break;
-                this.#dialog.inert = null === newValue;
-                if (null === newValue && this.#dialog.open) {
-                    if (devFlags.debug)
-                        console.debug(`${_a.name} ⚡️ will-close`);
-                    this.setAttribute('closing', '');
-                    Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
-                        if (!this.hasAttribute('closing'))
-                            return;
-                        this.#dialog?.close();
-                        this.removeAttribute('closing');
-                    });
-                }
-                if ('' === newValue && !this.#dialog.open) {
-                    if (devFlags.debug)
-                        console.debug(`${_a.name} ⚡️ will-open`);
-                    this.removeAttribute('closing');
-                    const form = this.#shadowRoot.querySelector('form');
-                    form.scrollTop = 0;
-                    this.#dialog.showModal();
-                }
-                break;
-            case 'label':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
-        summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
-        dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
-        const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
-        CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
-        CleanupRegistry.register(this, onoff([
-            { types: 'click', listener: this.#handleDialogClick },
-            { types: 'close', listener: this.#handleDialogClose },
-            { types: 'cancel', listener: this.#handleDialogCancel },
-        ], this.#dialog).on());
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, ({ target }) => {
-            if (!(target instanceof HTMLElement))
-                return true;
-            if (target.matches('menu-view'))
-                return false;
-            if (!target.closest('menu-view[open]'))
-                return false;
-            return true;
-        }), this).on());
-        const newAnchorName = `--menu-view-${self.crypto.randomUUID()}`;
-        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
-        summaryPart?.style.setProperty('anchor-name', newAnchorName, 'important'); // override unset:all // $.prop('anchor-name', newAnchorName, summaryPart, 'important') //
-        dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
-    }
-    #handleDialogClick = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement))
-            return;
-        if (target.matches('dialog'))
-            return this.toggleAttribute('open', false); // click outside
-        target.scrollIntoView({
-            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
-            block: 'nearest',
-            inline: 'nearest',
-        });
-        if (!target.closest('button'))
-            return;
-        // TODO: Handle btns this.toggleAttribute('open', false)
-        this.toggleAttribute('open', false);
-        // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
-    };
-    #handleTriggerClick = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        this.toggleAttribute('open', true);
-    };
-    // intercept to modify open attr
-    #handleDialogCancel = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (!evt.cancelable)
-            return;
-        evt.preventDefault();
-        this.toggleAttribute('open', false);
-    };
-    #handleDialogClose = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
-    };
-}
-_a = MenuView;

package/generated/components/navigation-large-title.d.ts

@@ -1,18 +0,0 @@
-/**
- *
- * @attr {grouped} background-style
- * @attr {boolean} padding
- * @attr {boolean} navigation-bar-auto-hide
- *
- */
-export declare class NavigationLargeTitle extends HTMLElement {
-    #private;
-    constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'navigation-large-title': NavigationLargeTitle;
-    }
-}