@swiftwc/ui 0.0.0-dev.58 → 0.0.0-dev.59

package/generated/components/image-view.js

@@ -24,7 +24,7 @@ export class ImageView extends HTMLElement {
                 //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');
+                    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'))

package/generated/components/index.d.ts

@@ -15,6 +15,7 @@ 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';

package/generated/components/index.js

@@ -15,6 +15,7 @@ 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';

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,115 @@
+import { $, devFlags, renderLabel } from '../internal/utils';
+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':
+                let header = this.querySelector(':scope>[slot=header]');
+                if (newValue) {
+                    const el = header ?? $(`<header slot="header"></header>`, '>1');
+                    renderLabel(el, ':scope>label-view', `<label-view font="callout"><span></span></label-view>`, newValue);
+                    header ??= this.appendChild(el);
+                }
+                else
+                    header?.remove();
+                break;
+            case 'footer':
+                let footer = this.querySelector(':scope>[slot=footer]');
+                if (newValue) {
+                    const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
+                    renderLabel(el, ':scope>label-view', `<label-view font="callout"><span></span></label-view>`, newValue);
+                    footer ??= this.appendChild(el);
+                }
+                else
+                    footer?.remove();
+                break;
+            case 'value':
+                renderLabel(this, ':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this.#fmt(newValue, this.getAttribute('format')));
+                break;
+            case 'format':
+                renderLabel(this, ':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this.#fmt(this.getAttribute('value'), newValue));
+                break;
+            case 'label':
+                renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, 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/picker-view.d.ts

@@ -9,6 +9,8 @@ export type PickerStyle = (typeof pickerStyles)[number];
  *
  * @attr {DictEntry[]} dictionary - Renders all options using this array
  *
+ * @attr {vertical|horizontal|auto} label-value-placement
+ *
  * @slot list
  */
 export declare class PickerView extends FormAssociatedBase {

package/generated/components/picker-view.js

@@ -67,6 +67,10 @@ const extractTagFromOption = (node) => {
     if (devFlags.debug)
         console.debug(`PickerView: extractCurrentValueFromOption`);
     return node instanceof HTMLOptionElement ? (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || '' : (node.label ?? node.value ?? '');
+}, extractIconFromOption = (node) => {
+    if (devFlags.debug)
+        console.debug(`PickerView: extractIconFromOption`);
+    return node instanceof HTMLOptionElement ? node.getAttribute('data-system-image') : (node.systemImage ?? null);
 }, extractLabelFromGroup = (node) => {
     if (devFlags.debug)
         console.debug(`PickerView: extractLabelFromGroup`);
@@ -107,6 +111,8 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
  *
  * @attr {DictEntry[]} dictionary - Renders all options using this array
  *
+ * @attr {vertical|horizontal|auto} label-value-placement
+ *
  * @slot list
  */
 export class PickerView extends FormAssociatedBase {
@@ -345,10 +351,10 @@ export class PickerView extends FormAssociatedBase {
                 // current value label only
                 const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
                 // reset state
-                if (currentValueLabel) {
-                    renderLabelIcon(currentValueLabel, 'dots-three'); // overwritten
-                    renderLabelTitle(currentValueLabel, this.#currentValueLabel); // overwritten
-                }
+                // if (currentValueLabel) {
+                //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
+                //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
+                // }
                 // clear all siblings
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     if (currentValueLabel !== el)
@@ -384,10 +390,10 @@ export class PickerView extends FormAssociatedBase {
                     if (menu !== el)
                         el.remove();
                 const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
-                if (currentValueLabel) {
-                    renderLabelIcon(currentValueLabel, 'dots-three'); // overwritten
-                    renderLabelTitle(currentValueLabel, this.#currentValueLabel); // overwritten
-                }
+                // if (currentValueLabel) {
+                //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
+                //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
+                // }
                 if (this.hasAttribute('help'))
                     currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
                 _a.#reflectButtons(input.source, menu);
@@ -403,12 +409,14 @@ export class PickerView extends FormAssociatedBase {
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     if (inlineList !== el)
                         el.remove();
+                // add label as a plain element
                 const value = this.getAttribute(this.constructor.ATTR.LABEL);
                 if (value) {
-                    const label = $(`<label-view><span></span></label-view>`, '>1');
-                    if (label)
-                        renderLabelTitle(label, value); //label.setAttribute('title', value)
-                    section.insertAdjacentElement('beforeend', label);
+                    const hStack = $(`<h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack>`, '>1');
+                    if (hStack)
+                        renderLabel(hStack, ':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, value);
+                    // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
+                    section.insertAdjacentElement('beforeend', hStack);
                 }
                 if ('dictionary' === input.mode)
                     _a.#reflectButtons(input.source.filter((el) => 0 === el.children.length), section);
@@ -457,7 +465,7 @@ export class PickerView extends FormAssociatedBase {
     #lastIndexedRoot = [];
     get #currentValueLabel() {
         const cvl = this.#lastRenderedLabelMap[this.#selection];
-        return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl || this.#selection;
+        return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl;
     }
     get #internals() {
         return getInternals(this);
@@ -761,8 +769,9 @@ export class PickerView extends FormAssociatedBase {
         // chevron = hStack?.querySelector<HTMLElement>(':scope>label-view')
         btn.setAttribute('value', extractTagFromOption(node));
         // if (selection !== btn.getAttribute('value')) chevron?.style.setProperty('visibility', 'hidden')
-        const label = $(`<label-view><span></span></label-view>`, '>1');
+        const label = $(`<label-view></label-view>`, '>1');
         renderLabelTitle(label, extractCurrentValueFromOption(node)); // label.querySelector('span')!.textContent = extractCurrentValueFromOption(node) //label.setAttribute('title', extractCurrentValueFromOption(node))
+        renderLabelIcon(label, extractIconFromOption(node));
         hStack?.appendChild(label);
         return btn;
     }
@@ -770,7 +779,8 @@ export class PickerView extends FormAssociatedBase {
         if (devFlags.debug)
             console.debug(`${_a.name} #wrapOptgroupTag`);
         const labelT = `<label-view><span></span></label-view>`, summaryT = `<summary><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view>${labelT}</h-stack></summary>`;
-        const group = $(`<details is="disclosure-group">${summaryT}</details>`, '>1'), hStack = group.querySelector(':scope>summary>h-stack'); // ?? group.appendChild($(summaryT, '>1'))
+        const group = $(`<details is="disclosure-group" disclosure-style="marker-trailing">${summaryT}</details>`, '>1'), // NOTE: already applied, here it covers spawned sheets
+        hStack = group.querySelector(':scope>summary>h-stack'); // ?? group.appendChild($(summaryT, '>1'))
         //   summaryLabel = summary.querySelector(':scope>label-view') ?? summary.appendChild($(labelT, '>1'))
         // if (node.hasAttribute('label')) summaryLabel.setAttribute('title', node.getAttribute('label') ?? '')
         // if (node.hasAttribute('data-system-image')) summaryLabel.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
@@ -839,99 +849,82 @@ export class PickerView extends FormAssociatedBase {
     #reflectLabel(value) {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectLabel`);
-        renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, value);
+        renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, value);
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectSelectionOnButtons`);
-        const groupMap = indexGroups(this.#lastIndexedRoot);
-        const groupContainsSelection = (source) => source instanceof Element
-            ? [...source.querySelectorAll('option')].some((opt) => extractTagFromOption(opt) === this.#selection)
-            : collectLeafValues(source).includes(this.#selection);
-        const syncButtons = (root) => {
-            // 1. plain value buttons — unchanged
-            for (const el of root.querySelectorAll('button[value]:not([slot])'))
-                el.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
-            // 2. details/optgroups — unchanged
-            for (const details of root.querySelectorAll('details[is="disclosure-group"]')) {
-                const hasSelectedDescendant = [...details.querySelectorAll('button[value]')].some((btn) => btn.getAttribute('value') === this.#selection);
-                details.querySelector(':scope>summary label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
-            }
-            // 3. nav-link buttons — resolved by groupId, same map used for resync
-            for (const btn of root.querySelectorAll('button[navigation-link]:not([value])')) {
-                const source = btn.dataset.groupId ? groupMap.get(btn.dataset.groupId) : undefined;
-                const hasSelectedDescendant = source ? groupContainsSelection(source) : false;
-                btn.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
-            }
-        };
-        syncButtons(this);
-        if (this.#spawn)
-            syncButtons(this.#spawn);
+        self.requestAnimationFrame(() => {
+            this.ariaCurrent = this.#selection;
+            const groupMap = indexGroups(this.#lastIndexedRoot);
+            const groupContainsSelection = (source) => source instanceof Element
+                ? [...source.querySelectorAll('option')].some((opt) => extractTagFromOption(opt) === this.#selection)
+                : collectLeafValues(source).includes(this.#selection);
+            const syncButtons = (root) => {
+                // 1. plain value buttons — unchanged
+                for (const el of root.querySelectorAll('button[value]:not([slot])'))
+                    // $.prop('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden', el.querySelector<HTMLElement>('label-view[data-role="check"]'))
+                    el.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
+                // 2. details/optgroups — unchanged
+                for (const details of root.querySelectorAll('details[is="disclosure-group"]')) {
+                    const hasSelectedDescendant = [...details.querySelectorAll('button[value]')].some((btn) => btn.getAttribute('value') === this.#selection);
+                    details.querySelector(':scope>summary label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
+                }
+                // 3. nav-link buttons — resolved by groupId, same map used for resync
+                for (const btn of root.querySelectorAll('button[navigation-link]:not([value])')) {
+                    const source = btn.dataset.groupId ? groupMap.get(btn.dataset.groupId) : undefined;
+                    const hasSelectedDescendant = source ? groupContainsSelection(source) : false;
+                    btn.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
+                }
+            };
+            syncButtons(this);
+            if (this.#spawn)
+                syncButtons(this.#spawn);
+        });
     }
-    // #reflectSelectionOnButtons() {
-    //   if (devFlags.debug) console.debug(`${PickerView.name} #reflectSelectionOnButtons`)
-    //   const syncButtons = (root: Element | HTMLElement) => {
-    //     // 1. Sync plain value buttons (existing behavior)
-    //     for (const el of root.querySelectorAll<HTMLButtonElement>('button[value]:not([slot])'))
-    //       el.querySelector<HTMLElement>('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden')
-    //     // 2. Sync `details` (optgroups) — open/mark if any descendant option matches selection
-    //     for (const details of root.querySelectorAll<HTMLElement>('details[is="disclosure-group"]')) {
-    //       // ORRR details.matches(':has(> button[value]:not([slot]) label-view[data-role="check"][style*=visible])'))
-    //       const hasSelectedDescendant = [...details.querySelectorAll<HTMLButtonElement>('button[value]')].some((btn) => btn.getAttribute('value') === this.#selection)
-    //       // Show/hide the check on the summary's label-view
-    //       details.querySelector<HTMLElement>(':scope>summary label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden')
-    //     }
-    //     // 3. Sync nav-link buttons (those without `value` that spawn sub-pages)
-    //     //    These wrap <datalist> children — mark them if any descendant value matches
-    //     const navLinkBtns = root.querySelectorAll<HTMLButtonElement>('button[navigation-link]:not([value])')
-    //     navLinkBtns.forEach((btn, i) => {
-    //       const hasSelectedDescendant = this.#lastRenderedGroupMap[i]?.includes(this.#selection) ?? false
-    //       btn.querySelector<HTMLElement>('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden')
-    //     })
-    //   }
-    //   // Run on the host element (inline/menu styles)
-    //   syncButtons(this)
-    //   // Also sync the spawn if open (sheet/navigation-link styles)
-    //   if (this.#spawn) syncButtons(this.#spawn)
-    //   // // walk all rendered buttons (inline has buttons in list, menu has buttons in menu-view)
-    //   // for (const el of this.querySelectorAll<HTMLButtonElement>('button[value]:not([slot])'))
-    //   //   el.querySelector<HTMLElement>('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden')
-    //   // // also sync the spawn (sheet/navigation) if open
-    //   // if (this.#spawn)
-    //   //   for (const el of this.#spawn.querySelectorAll<HTMLButtonElement>('list-view button[value]:not([slot])'))
-    //   //     el.querySelector<HTMLElement>('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden')
-    // }
     /**
      * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
      */
     #reflectSelectionOnCurrentValueLabel() {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
-        switch (this.pickerStyle) {
-            case 'sheet':
-            case 'navigation-link': {
-                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
-                if (!currentValueLabel)
+        self.requestAnimationFrame(() => {
+            switch (this.pickerStyle) {
+                case 'sheet':
+                case 'navigation-link': {
+                    const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
+                    if (!currentValueLabel)
+                        break;
+                    const cvl = this.#currentValueLabel;
+                    if (!cvl)
+                        currentValueLabel.setAttribute('foreground', 'secondary');
+                    else
+                        currentValueLabel.removeAttribute('foreground');
+                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
+                    renderLabelIcon(currentValueLabel, 'dots-three');
                     break;
-                renderLabelTitle(currentValueLabel, this.#currentValueLabel);
-                renderLabelIcon(currentValueLabel, 'dots-three');
-                break;
-            }
-            case 'menu': {
-                const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
-                if (!currentValueLabel)
+                }
+                case 'menu': {
+                    const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
+                    if (!currentValueLabel)
+                        break;
+                    const cvl = this.#currentValueLabel;
+                    if (!cvl)
+                        currentValueLabel.setAttribute('foreground', 'secondary');
+                    else
+                        currentValueLabel.removeAttribute('foreground');
+                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
+                    renderLabelIcon(currentValueLabel, 'dots-three');
                     break;
-                renderLabelTitle(currentValueLabel, this.#currentValueLabel);
-                renderLabelIcon(currentValueLabel, 'dots-three');
-                break;
-            }
-            case 'inline':
-            default: {
-                //
-                break;
+                }
+                case 'inline':
+                default: {
+                    //
+                    break;
+                }
             }
-        }
+        });
     }
     #reflectTriggerHelp() {
         if (devFlags.debug)