@swiftwc/ui 0.0.0-dev.1 → 0.0.0-dev.101

package/generated/components/label-view.js

@@ -0,0 +1,87 @@
+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 {length} --label-gap — The gap between the icon and the title.
+ * @cssprop {number} --label-image-size — The size of the icon.
+ * @cssprop {length}--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

@@ -0,0 +1,33 @@
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @example <labeled-content label="Label" value="Content"></labeled-content> — Creates a standard labeled element, with a view that conveys the value of the element and a label
+ *
+ * @example <labeled-content label="Height" value="6" format="unit::unit=foot"></labeled-content> — Creates a labeled element from a formatted value
+ *
+ * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
+ *
+ * @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

@@ -0,0 +1,163 @@
+import { $, devFlags } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @example <labeled-content label="Label" value="Content"></labeled-content> — Creates a standard labeled element, with a view that conveys the value of the element and a label
+ *
+ * @example <labeled-content label="Height" value="6" format="unit::unit=foot"></labeled-content> — Creates a labeled element from a formatted value
+ *
+ * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
+ *
+ * @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',
+            /**
+             * Use this to force a specific style.
+             *
+             * @type {vertical|horizontal}
+             */
+            'labeled-content-style',
+            /**
+             * Use this to format the text inside the value attribute. For example `format="currency::currency=USD" value="1234.5"` produces a value of `$1,234.50`.
+             *
+             * @type {"<format-type>:<locale?>:<format-options?>"}
+             */
+            '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':
+                queryMorph('[slot=header]', html `<header slot="header">
+            <label-view font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </header>`, this, { removeIf: !newValue });
+                break;
+            case 'footer':
+                queryMorph('[slot=footer]', html `<footer slot="footer">
+            <label-view font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </footer>`, this, { removeIf: !newValue });
+                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, opts = {}] = format.split(':', 3), loc = new Intl.Locale(locale || navigator.language), 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"
+            case 'byte-count': {
+                const bytes = Number(value);
+                if (!Number.isFinite(bytes))
+                    return value;
+                const units = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte', 'exabyte'];
+                const index = Math.min(Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024)), units.length - 1);
+                return new Intl.NumberFormat(locale, {
+                    style: 'unit',
+                    unit: units[Math.max(0, index)],
+                    unitDisplay: 'short',
+                    ...options,
+                }).format(bytes / 1024 ** Math.max(0, index));
+            }
+            default:
+                return value;
+        }
+    };
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @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
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
+ */
+export declare class ListView extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'list-view': ListView;
+    }
+}

package/generated/components/list-view.js

@@ -0,0 +1,25 @@
+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
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
+ */
+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

@@ -0,0 +1,20 @@
+/**
+ * @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

@@ -0,0 +1,140 @@
+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

@@ -0,0 +1,18 @@
+/**
+ *
+ * @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;
+    }
+}