@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

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

@@ -0,0 +1,14 @@
+/**
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} placement - The main-axis alignment
+ *
+ */
+export declare class HStack extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/h-stack.js

@@ -0,0 +1,23 @@
+import { devFlags } from '../internal/utils';
+/**
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} 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

@@ -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,64 @@
+import { $, devFlags } from '../internal/utils';
+export class ImageView extends HTMLElement {
+    static get observedAttributes() {
+        return ['system-name', 'system-weight'];
+    }
+    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}")`);
+        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(':scope>:not([slot])') ?? this.appendChild($(`<i style="line-height: 1"></i>`, '>1'));
+        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,17 +1,21 @@
-/**
- * @file Automatically generated by barrelsby.
- */
+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-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 './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';
@@ -20,8 +24,11 @@ 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';
@@ -32,6 +39,7 @@ 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';

package/generated/components/index.js

@@ -1,17 +1,21 @@
-/**
- * @file Automatically generated by barrelsby.
- */
+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-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 './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';
@@ -20,8 +24,11 @@ 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';
@@ -32,6 +39,7 @@ 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';

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

@@ -1,9 +1,14 @@
+/**
+ *
+ * @attr {@fontSet} font - Sets the default font for text in this view.
+ *
+ */
 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;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/label-view.js

@@ -1,4 +1,9 @@
-import { $ } from '../internal/utils';
+import { $, devFlags, renderLabelIcon, renderLabelTitle } from '../internal/utils';
+/**
+ *
+ * @attr {@fontSet} font - Sets the default font for text in this view.
+ *
+ */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
         return ['system-image', 'title', 'line-limit', 'truncation-mode'];
@@ -6,78 +11,46 @@ export class LabelView extends HTMLElement {
     static #template;
     static get template() {
         return (this.#template ??= $(String.raw `
-  <div part="root label-image-stack">
-    <slot name="image"></slot>
-  </div>
-  <div part="root label-title-stack">
+    <slot name="icon"></slot>
     <slot></slot>
-  </div>`, ''));
+    `
+        //     String.raw`
+        // <div part="root label-image-stack">
+        //   <slot name="image"></slot>
+        // </div>
+        // <div part="root label-title-stack">
+        //   <slot></slot>
+        // </div>`
+        ));
     }
     #shadowRoot;
-    // #imgSlot?: HTMLSlotElement
-    // #slot?: HTMLSlotElement
+    // #reflectScheduled = false
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // // this.#imgSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=image]') ?? undefined
-        // // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        //
-        // // this.#slot?.addEventListener('slotchange', this.#handleSlotchange)
-        // // // this.#imgSlot?.addEventListener('slotchange', this.#handleSlotchange)
-        // // // this.#handleSlotchange(new CustomEvent('slotchange'))
-        // })
-    }
-    disconnectedCallback() {
-        console.debug(`${LabelView.name} ⚡️ disconnect`);
-        // this.#slot?.removeEventListener('slotchange', this.#handleSlotchange)
-    }
-    connectedCallback() {
-        console.debug(`${LabelView.name} ⚡️ connect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        // Snapshot.waitReady.then(() => {
+        if (devFlags.debug)
+            console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        // this.#scheduleReflect()
         switch (name) {
             case 'system-image':
-                let image = this.querySelector(':scope>[slot=image]');
-                if (newValue) {
-                    image ??= this.appendChild($(`<i slot="image"></i>`));
-                    image.setAttribute('class', `ph ph-${newValue}`);
-                }
-                else
-                    image?.remove();
-                // // const imgSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=image]')
-                // // if (!imgSlot) break
-                // const assigned = this.#imgSlot!.assignedElements({ flatten: true }) as HTMLElement[]
-                // let el = assigned[0] as HTMLElement | undefined
-                // if (!el) {
-                //   el = document.createElement('i')
-                //   el.slot = 'image'
-                //   this.append(el)
-                // }
-                // el.setAttribute('class', `ph ph-${newValue}`)
+                renderLabelIcon(this, newValue);
                 break;
             case 'title':
-                let title = this.querySelector(':scope>:not([slot])');
-                if (newValue) {
-                    title ??= this.appendChild($(`<span></span>`));
-                    title.textContent = newValue;
-                }
-                else
-                    title?.remove();
-                // // const titleSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])')
-                // // if (!titleSlot) break
-                // const title = this.#slot!.assignedElements({ flatten: true }) as HTMLElement[]
-                // let el2 = title[0] as HTMLElement | undefined
-                // if (!el2) {
-                //   el2 = document.createElement('span')
-                //   this.append(el2)
-                // }
-                // el2.textContent = newValue //el2.replaceChildren(escapeHTMLPolicy.createHTML(newValue))
+                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/labeled-content.d.ts

@@ -0,0 +1,9 @@
+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;
+}

package/generated/components/labeled-content.js

@@ -0,0 +1,116 @@
+import { $, devFlags, renderLabel } from '../internal/utils';
+import { html, render } from '../tpl';
+export class LabeledContent extends HTMLElement {
+    static get observedAttributes() {
+        return ['value', 'label', 'header', 'footer', 'labeled-content-style', 'format'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <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' }));
+                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' }));
+                render(html `<label-view font="callout">
+            <span>${newValue}</span>
+          </label-view>`, footer);
+                break;
+            case 'value':
+                renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(newValue, this.getAttribute('format')));
+                break;
+            case 'format':
+                renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(this.getAttribute('value'), newValue));
+                break;
+            case 'label':
+                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
+                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,3 +1,6 @@
+/**
+ * @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;

package/generated/components/list-view.js

@@ -1,29 +1,32 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+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 formAssociated = true
-    // #internals
-    // #options
-    // #focusedIndex = 0
-    // #selected = new Set()
+    // static #template: DocumentFragment
+    // static get template() {
+    //   return (this.#template ??= $(
+    //     String.raw`
+    //   <slot name="searchable"></slot>
+    //   <slot></slot>
+    //   `
+    //   ))
+    // }
+    // #shadowRoot
     constructor() {
         super();
-        // this.#internals = this.attachInternals()
-        // this.tabIndex = 0
+        // this.#shadowRoot = this.attachShadow({ mode: 'closed' })
+        // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
     }
     disconnectedCallback() {
-        console.debug(`${ListView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${ListView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${ListView.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${ListView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        // this.setAttribute('role', 'listbox')
-        // this.setAttribute('aria-multiselectable', 'true')
-        // this.#options = Array.from(this.querySelectorAll('[option]'))
-        // this.addEventListener('pointerleave', this.#onCancel)
-        // this.addEventListener('click', this.#onClick)
-        // this.addEventListener('keydown', this.#onKeyDown)
-        // this.#updateOptionAttributes()
     }
 }

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

@@ -1,9 +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;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }