@swiftwc/ui 0.0.0-dev.70 → 0.0.0-dev.72

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

@@ -3,7 +3,7 @@ declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "shee
 export type PickerStyle = (typeof pickerStyles)[number];
 export type DictEntry = {
     value: string;
-    label?: string;
+    title?: string;
     subtitle?: string;
     systemImage?: string;
     children: DictEntry[];

package/generated/components/picker-view.js

@@ -6,6 +6,7 @@ import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
 import { $, devFlags, kebabCase, onoff, renderLabel, renderLabelIcon, renderLabelTitle } from '../internal/utils';
+import { html, render } from '../tpl';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
     if (devFlags.debug)
@@ -20,9 +21,9 @@ const update = (path, node, overwrite = true) => {
     if (page)
         page.insertAdjacentElement(position, node);
 };
-const reflectSpawnedElement = (current, source) => {
+const reflectSpawnedPage = (current, source) => {
     if (devFlags.debug)
-        console.debug(`PickerView: reflectSpawnedElement`);
+        console.debug(`PickerView: reflectSpawnedPage`);
     const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
     const oldList = oldSv?.querySelector('list-view'), newList = newSv?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
     // pre replace list (always exists)
@@ -37,7 +38,7 @@ const reflectSpawnedElement = (current, source) => {
                 summary.parentElement?.setAttribute('open', 'open');
                 break;
             }
-    // replace backbtns (always exists)
+    // replace backbtns (always exist)
     if (oldBackBtn && newBackBtn)
         oldBackBtn.replaceWith(newBackBtn);
     // overwrite navtitle (always exists)
@@ -52,33 +53,43 @@ const reflectSpawnedElement = (current, source) => {
             oldSv?.insertAdjacentHTML('afterend', `<sticky-container edge="navbar" style="order: -1" padding>
                 <v-stack spacing="0" alignment="fill">
                   <input is="search-view" placeholder="Search">
-                  <button type="button">Filters</button>
+                  <!--<button type="button">Filters</button>-->
                 </v-stack>
               </sticky-container>`);
     }
     else
         oldSearch?.remove();
 };
-const extractTagFromOption = (node) => {
+const extractTag = (node) => {
     if (devFlags.debug)
-        console.debug(`PickerView: extractTagFromOption`);
+        console.debug(`PickerView: extractTag`);
     return node instanceof HTMLOptionElement ? (((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '') : (node.value ?? '');
-}, extractCurrentValueFromOption = (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) => {
+}, extractLabel = (node) => {
     if (devFlags.debug)
         console.debug(`PickerView: extractLabelFromGroup`);
-    return node instanceof Element ? node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label') : (node.label ?? node.value ?? null);
-}, extractImgFromGroup = (node) => {
+    if (node instanceof Element)
+        if (node instanceof HTMLOptionElement)
+            return (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || null;
+        else
+            return node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label');
+    else
+        return node.title ?? node.value ?? null;
+    // return node instanceof Element ? node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label') : (node.title ?? node.value ?? null)
+}, extractIcon = (node) => {
+    if (devFlags.debug)
+        console.debug(`PickerView: extractIcon`);
+    // return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null)
+    if (node instanceof Element)
+        return node.getAttribute('data-system-image');
+    else
+        return node.systemImage ?? null;
+}, extractSubtitle = (node) => {
     if (devFlags.debug)
-        console.debug(`PickerView: extractImgFromGroup`);
-    return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null);
+        console.debug(`PickerView: extractSubtitle`);
+    if (node instanceof Element)
+        return node.getAttribute('data-subtitle');
+    else
+        return node.subtitle ?? null;
 };
 const allLeaves = (node) => node.children.every((c) => 0 === c.children.length);
 const parseDictionary = (value) => {
@@ -143,7 +154,7 @@ export class PickerView extends FormAssociatedBase {
             const { target } = evt;
             if (!(target instanceof HTMLElement))
                 return;
-            const newPage = this.#spawnPage(el instanceof Element ? Array.from(el.children) : el.children, 'body-view', groupId, this.hasAttribute('searchable'), extractLabelFromGroup(el));
+            const newPage = this.#spawnPage(el instanceof Element ? Array.from(el.children) : el.children, 'body-view', groupId, this.hasAttribute('searchable'), extractLabel(el));
             if (!newPage)
                 return;
             newPage.dataset.groupId = groupId; // <-- tag the spawned page
@@ -165,7 +176,7 @@ export class PickerView extends FormAssociatedBase {
             list?.insertAdjacentHTML('afterend', `<sticky-container edge="navbar" style="order: -1" padding>
                 <v-stack spacing="0" alignment="fill">
                   <input is="search-view" placeholder="Search">
-                  <button type="button">Filters</button>
+                  <!--<button type="button">Filters</button>-->
                 </v-stack>
               </sticky-container>`);
             const searchInput = sv?.querySelector('input'); // FIXME: compoennt is=search-view??
@@ -279,10 +290,10 @@ export class PickerView extends FormAssociatedBase {
                 continue;
             }
             const children = source instanceof Element ? Array.from(source.children) : source.children;
-            const title = source instanceof Element ? extractLabelFromGroup(source) : (source.label ?? null);
+            const title = source instanceof Element ? extractLabel(source) : (source.title ?? null);
             const newPage = this.#spawnPage(children, 'body-view', groupId, this.hasAttribute('searchable'), title);
             newPage.dataset.groupId = groupId;
-            reflectSpawnedElement(el, newPage);
+            reflectSpawnedPage(el, newPage);
         }
     };
     #renderButtons(input) {
@@ -300,8 +311,8 @@ export class PickerView extends FormAssociatedBase {
                             continue;
                         }
                         idx[idx.length - 1]++;
-                        const { value, label, systemImage, children } = frame[i];
-                        out1[value] = label;
+                        const { value, title, systemImage, children } = frame[i];
+                        out1[value] = title;
                         out2[value] = systemImage;
                         if (children.length) {
                             stack.push(children);
@@ -333,15 +344,15 @@ export class PickerView extends FormAssociatedBase {
                 this.#lastRenderedIconMap = {};
                 for (const el of input.source)
                     if (el.matches('option')) {
-                        const k = extractTagFromOption(el);
+                        const k = extractTag(el);
                         this.#lastRenderedLabelMap[k] = el.getAttribute('label') ?? undefined;
-                        this.#lastRenderedIconMap[k] = extractIconFromOption(el) ?? undefined;
+                        this.#lastRenderedIconMap[k] = extractIcon(el) ?? undefined;
                     }
                     else
                         for (const opt of el.querySelectorAll('option')) {
-                            const k = extractTagFromOption(opt);
+                            const k = extractTag(opt);
                             this.#lastRenderedLabelMap[k] = opt.getAttribute('label') ?? undefined;
-                            this.#lastRenderedIconMap[k] = extractIconFromOption(opt) ?? undefined;
+                            this.#lastRenderedIconMap[k] = extractIcon(opt) ?? undefined;
                         }
                 this.#lastIndexedRoot = input.source;
                 // this.#lastRenderedGroupMap = assigned.flatMap<string[]>((el) =>
@@ -374,7 +385,7 @@ export class PickerView extends FormAssociatedBase {
                 if (!this.#spawn)
                     break;
                 // rerender level 0
-                reflectSpawnedElement(this.#spawn, this.#spawnPage(input.source, 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
+                reflectSpawnedPage(this.#spawn, this.#spawnPage(input.source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
                 this.#resyncSpawnedPages(input.source);
                 // // FIXME:
                 // for (const el of this.#spawn.querySelectorAll<HTMLElement>('body-view')) {
@@ -473,13 +484,11 @@ export class PickerView extends FormAssociatedBase {
     #lastRenderedIconMap = {};
     #lastIndexedRoot = [];
     get #currentValueLabel() {
-        const cvl = this.#lastRenderedLabelMap[this.#selection];
         return ((this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_LABEL) ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) ||
-            cvl);
+            this.#lastRenderedLabelMap[this.#selection]);
     }
     get #currentValueIcon() {
-        const cvl = this.#lastRenderedIconMap[this.#selection];
-        return (this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_ICON) ?? '') || cvl;
+        return (this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_ICON) ?? '') || this.#lastRenderedIconMap[this.#selection];
     }
     get #internals() {
         return getInternals(this);
@@ -774,40 +783,106 @@ export class PickerView extends FormAssociatedBase {
     static #wrapOptionSpawnTag(node) {
         if (devFlags.debug)
             console.debug(`${_a.name} #wrapOptionSpawnTag`);
-        const btn = $(`<button type="button" tabindex="0" navigation-link><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></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack') ?? undefined;
-        renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
-        // label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
-        // if (label) {
-        // const lbl = extractLabelFromGroup(node as HTMLDataListElement),
-        //         img =extractImgFromGroup(node as HTMLDataListElement)
-        //         if(lbl)  renderLabelTitle(label, node.dataset.label) //label?.setAttribute('title', el.dataset.label)
-        // }
-        return btn;
+        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        render(html `<button type="button" tabindex="0" navigation-link>
+        <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>
+          <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
+            ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+            <v-stack spacing="3" alignment="fill">
+              <label-view title="${title}"></label-view>
+              ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
+            </v-stack>
+          </h-stack>
+        </h-stack>
+      </button>`, mount);
+        // const btn = $<HTMLButtonElement>(
+        //     `<button type="button" tabindex="0" navigation-link><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></button>`,
+        //     '>1'
+        //   ),
+        //   hStack = btn.querySelector<LabelView>(':scope>h-stack') ?? undefined
+        // renderLabel(
+        //   ':scope>label-view:nth-child(2)',
+        //   `<label-view><span></span></label-view>`,
+        //   hStack,
+        //   extractLabelFromGroup(node as HTMLDataListElement),
+        //   extractImgFromGroup(node as HTMLDataListElement)
+        // )
+        // // label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
+        // // if (label) {
+        // // const lbl = extractLabelFromGroup(node as HTMLDataListElement),
+        // //         img =extractImgFromGroup(node as HTMLDataListElement)
+        // //         if(lbl)  renderLabelTitle(label, node.dataset.label) //label?.setAttribute('title', el.dataset.label)
+        // // }
+        return mount.firstElementChild; //btn
     }
     static #wrapOptionTag(node) {
         if (devFlags.debug)
             console.debug(`${_a.name} #wrapOptionTag`);
-        const btn = $(`<button type="button" tabindex="0"><h-stack distribution="leading" template="auto spacer"><label-view data-role="check"><image-view slot="icon" system-name="check"></image-view></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack');
-        // 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></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;
+        const tag = extractTag(node), title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        render(html `<button type="button" tabindex="0" value="${tag}">
+        <h-stack distribution="leading" template="auto spacer">
+          <label-view data-role="check">
+            <image-view slot="icon" system-name="check"></image-view>
+          </label-view>
+          <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
+            ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+            <v-stack spacing="3" alignment="fill">
+              <label-view title="${title}"></label-view>
+              ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
+            </v-stack>
+          </h-stack>
+        </h-stack>
+      </button>`, mount);
+        // const btn = $(
+        //     `<button type="button" tabindex="0"><h-stack distribution="leading" template="auto spacer"><label-view data-role="check"><image-view slot="icon" system-name="check"></image-view></label-view></h-stack></button>`,
+        //     '>1'
+        //   ),
+        //   hStack = btn.querySelector<HTMLElement>(':scope>h-stack')
+        // // chevron = hStack?.querySelector<HTMLElement>(':scope>label-view')
+        // btn.setAttribute('value', extractTagFromOption(node))
+        // // if (selection !== btn.getAttribute('value')) chevron?.style.setProperty('visibility', 'hidden')
+        // const label = $<LabelView>(`<label-view></label-view>`, '>1')
+        // renderLabelTitle(label, extractLabel(node)) // label.querySelector('span')!.textContent = extractCurrentValueFromOption(node) //label.setAttribute('title', extractCurrentValueFromOption(node))
+        // renderLabelIcon(label, extractIcon(node))
+        // hStack?.appendChild(label)
+        return mount.firstElementChild; //btn
     }
     static #wrapOptgroupTag(node) {
         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" disclosure-style="marker-trailing">${summaryT}</details>`, '>1'), // NOTE: already applied, here it covers spawned sheets
-        hStack = group.querySelector(':scope>summary>h-stack') ?? undefined; // ?? 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') ?? '')
-        renderLabel(':scope>label-view:nth-child(2)', labelT, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
-        return group;
+        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
+        <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>
+            <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
+              ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+              <v-stack spacing="3" alignment="fill">
+                <label-view title="${title}"></label-view>
+                ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
+              </v-stack>
+            </h-stack>
+          </h-stack>
+        </summary>
+      </details>`, mount);
+        return mount.firstElementChild;
+        // 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" disclosure-style="marker-trailing">${summaryT}</details>`, '>1'), // NOTE: already applied, here it covers spawned sheets
+        //   hStack = group.querySelector(':scope>summary>h-stack') ?? undefined // ?? 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') ?? '')
+        // renderLabel(':scope>label-view:nth-child(2)', labelT, hStack, extractLabel(node), extractIcon(node))
+        // return group
     }
     // static #reflectButtons(nodes: Element[], container: Element): void
     // static #reflectButtons(nodes: Dictionary, container: Element): void
@@ -818,11 +893,32 @@ export class PickerView extends FormAssociatedBase {
             if (node instanceof Element)
                 switch (node.tagName) {
                     case 'DATALIST': {
-                        const group = $(`<menu-view tabindex="0"><h-stack slot="label" 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></menu-view>`, '>1'), hStack = group.querySelector(':scope>h-stack[slot=label]') ?? undefined;
-                        // label = group.querySelector(':scope>label-view[slot=label]') ?? group.appendChild($(`<label-view slot="label"></label-view>`, '>1'))
-                        // if (node.hasAttribute('data-label')) label.setAttribute('title', node.getAttribute('data-label') ?? '')
-                        // if (node.hasAttribute('data-system-image')) label.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
-                        renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
+                        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+                        const mount = document.createElement('div');
+                        render(html `<menu-view tabindex="0">
+                <h-stack slot="label" distribution="leading" template="auto spacer">
+                  <label-view data-role="check" style="visibility: hidden">
+                    <image-view slot="icon" system-name="check"></image-view>
+                  </label-view>
+                  <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
+                    ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+                    <v-stack spacing="3" alignment="fill">
+                      <label-view title="${title}"></label-view>
+                      ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
+                    </v-stack>
+                  </h-stack>
+                </h-stack>
+              </menu-view>`, mount);
+                        const group = mount.firstElementChild;
+                        // const group = $(
+                        //     `<menu-view tabindex="0"><h-stack slot="label" 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></menu-view>`,
+                        //     '>1'
+                        //   ),
+                        //   hStack = group.querySelector(':scope>h-stack[slot=label]') ?? undefined
+                        // // label = group.querySelector(':scope>label-view[slot=label]') ?? group.appendChild($(`<label-view slot="label"></label-view>`, '>1'))
+                        // // if (node.hasAttribute('data-label')) label.setAttribute('title', node.getAttribute('data-label') ?? '')
+                        // // if (node.hasAttribute('data-system-image')) label.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
+                        // renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabel(node as HTMLDataListElement), extractIcon(node as HTMLDataListElement))
                         _a.#reflectButtons([...node.children], group);
                         container.appendChild(group);
                         break;
@@ -847,8 +943,25 @@ export class PickerView extends FormAssociatedBase {
                         container.appendChild(group);
                     }
                     else {
-                        const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
-                        renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, group, extractLabelFromGroup(node), extractImgFromGroup(node));
+                        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+                        const mount = document.createElement('div');
+                        render(html `<menu-view tabindex="0">
+                <h-stack slot="label" distribution="leading" template="auto spacer">
+                  <label-view data-role="check" style="visibility: hidden">
+                    <image-view slot="icon" system-name="check"></image-view>
+                  </label-view>
+                  <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
+                    ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+                    <v-stack spacing="3" alignment="fill">
+                      <label-view title="${title}"></label-view>
+                      ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
+                    </v-stack>
+                  </h-stack>
+                </h-stack>
+              </menu-view>`, mount);
+                        const group = mount.firstElementChild;
+                        // const group = $(`<menu-view tabindex="0"></menu-view>`, '>1')
+                        // renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, group, extractLabel(node), extractIcon(node))
                         _a.#reflectButtons(node.children, group);
                         container.appendChild(group);
                     }
@@ -876,9 +989,7 @@ export class PickerView extends FormAssociatedBase {
         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 groupContainsSelection = (source) => source instanceof Element ? [...source.querySelectorAll('option')].some((opt) => extractTag(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])'))
@@ -914,22 +1025,20 @@ export class PickerView extends FormAssociatedBase {
                     const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
                     if (!currentValueLabel)
                         break;
-                    const cvl = this.#currentValueLabel, cvi = this.#currentValueIcon;
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
-                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute(this.constructor.ATTR.PLACEHOLDER) || this.#selection);
-                    renderLabelIcon(currentValueLabel, cvi || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
+                    renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER));
+                    renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
                     break;
                 }
                 case 'menu': {
                     const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
                     if (!currentValueLabel)
                         break;
-                    const cvl = this.#currentValueLabel, cvi = this.#currentValueIcon;
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
-                    renderLabelTitle(currentValueLabel, cvl || this.getAttribute(this.constructor.ATTR.PLACEHOLDER) || this.#selection);
-                    renderLabelIcon(currentValueLabel, cvi || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
+                    renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER));
+                    renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
                     break;
                 }
                 case 'inline':

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

@@ -1,5 +1,9 @@
+import type { ScrollViewEventMap } from '../events';
+import type { TypedEventTargetMethods } from '../namespace-browser/event';
 export declare class ScrollView extends HTMLElement {
     #private;
+    addEventListener: TypedEventTargetMethods<ScrollViewEventMap>['addEventListener'];
+    removeEventListener: TypedEventTargetMethods<ScrollViewEventMap>['removeEventListener'];
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();

package/generated/components/text-field.d.ts

@@ -1,4 +1,6 @@
+import type { TextFieldEventMap } from '../events';
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
+import type { TypedEventTargetMethods } from '../namespace-browser/event';
 declare const keyboardTypes: readonly ["decimal-pad", "number-pad", "default"];
 export type KeyboardType = (typeof keyboardTypes)[number];
 /**
@@ -7,6 +9,8 @@ export type KeyboardType = (typeof keyboardTypes)[number];
  */
 export declare class TextField extends FormAssociatedBase {
     #private;
+    addEventListener: TypedEventTargetMethods<TextFieldEventMap>['addEventListener'];
+    removeEventListener: TypedEventTargetMethods<TextFieldEventMap>['removeEventListener'];
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();

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

@@ -1,4 +1,6 @@
+import type { ToggleViewEventMap } from '../events';
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
+import type { TypedEventTargetMethods } from '../namespace-browser/event';
 declare const toggleStyles: readonly ["switch", "button"];
 export type ToggleStyle = (typeof toggleStyles)[number];
 /**
@@ -7,6 +9,8 @@ export type ToggleStyle = (typeof toggleStyles)[number];
  */
 export declare class ToggleView extends FormAssociatedBase {
     #private;
+    addEventListener: TypedEventTargetMethods<ToggleViewEventMap>['addEventListener'];
+    removeEventListener: TypedEventTargetMethods<ToggleViewEventMap>['removeEventListener'];
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();

package/generated/components/toggle-view.js

@@ -82,7 +82,7 @@ export class ToggleView extends FormAssociatedBase {
                 this.#sendValueToForm(this.#connected);
                 break;
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))

package/generated/events/scroll-view.d.ts

@@ -2,9 +2,7 @@ import { type ScrollView } from '../components';
 export type PageRevealSwapDetail = {
     page: ScrollView;
 };
-declare global {
-    interface HTMLElementEventMap {
-        pagereveal: CustomEvent<PageRevealSwapDetail>;
-        pageswap: CustomEvent<PageRevealSwapDetail>;
-    }
+export interface ScrollViewEventMap {
+    pagereveal: CustomEvent<PageRevealSwapDetail>;
+    pageswap: CustomEvent<PageRevealSwapDetail>;
 }

package/generated/events/text-field.d.ts

@@ -1,8 +1,6 @@
 export type TextFieldCommitDetail = {
     text: string;
 };
-declare global {
-    interface HTMLElementEventMap {
-        commit: CustomEvent<TextFieldCommitDetail>;
-    }
+export interface TextFieldEventMap {
+    commit: CustomEvent<TextFieldCommitDetail>;
 }

package/generated/events/text-field.js

@@ -1 +1,6 @@
 export {};
+// declare global {
+//   interface HTMLElementEventMap {
+//     commit: CustomEvent<TextFieldCommitDetail>
+//   }
+// }

package/generated/events/toggle-view.d.ts

@@ -2,8 +2,6 @@ export type ToggleChangeDetail = {
     isOn: boolean;
     value: string | null;
 };
-declare global {
-    interface HTMLElementEventMap {
-        change: CustomEvent<ToggleChangeDetail>;
-    }
+export interface ToggleViewEventMap {
+    commit: CustomEvent<ToggleChangeDetail>;
 }

package/generated/events/toggle-view.js

@@ -1 +1,6 @@
 export {};
+// declare global {
+//   interface HTMLElementEventMap {
+//     commit: CustomEvent<ToggleChangeDetail>
+//   }
+// }

package/generated/namespace-browser/event.d.ts

@@ -0,0 +1,10 @@
+export interface TypedEventTargetMethods<M> {
+    addEventListener: {
+        <K extends keyof M>(type: K, listener: (this: HTMLElement, ev: M[K] extends Event ? M[K] : never) => void, options?: boolean | AddEventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
+    };
+    removeEventListener: {
+        <K extends keyof M>(type: K, listener: (this: HTMLElement, ev: M[K] extends Event ? M[K] : never) => void, options?: boolean | EventListenerOptions): void;
+        (type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions): void;
+    };
+}

package/generated/namespace-browser/event.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.70",
+  "version": "0.0.0-dev.72",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"