@swiftwc/ui 0.0.0-dev.55 → 0.0.0-dev.57

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

@@ -1,6 +1,16 @@
 import { FormAssociatedBase } from '../internal/class/form-associated-base';
 declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "automatic"];
 export type PickerStyle = (typeof pickerStyles)[number];
+/**
+ *
+ * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
+ *
+ * @attr {string} help - Adds a help tooltip to the trigger of the picker, if style supports one
+ *
+ * @attr {DictEntry[]} dictionary - Renders all options using this array
+ *
+ * @slot list
+ */
 export declare class PickerView extends FormAssociatedBase {
     #private;
     static get ATTR(): {
@@ -11,6 +21,7 @@ export declare class PickerView extends FormAssociatedBase {
         SEARCHABLE: string;
         CURRENT_VALUE_LABEL: string;
         TRIGGER_HELP: string;
+        DICTIONARY: string;
     };
     static get observedAttributes(): string[];
     get selection(): string;

package/generated/components/picker-view.js

@@ -62,13 +62,53 @@ const reflectSpawnedElement = (current, source) => {
 const extractTagFromOption = (node) => {
     if (devFlags.debug)
         console.debug(`PickerView: extractTagFromOption`);
-    return ((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '';
-};
-const extractCurrentValueFromOption = (node) => {
+    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.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || '';
+    return node instanceof HTMLOptionElement ? (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || '' : (node.label ?? node.value ?? '');
+}, extractLabelFromGroup = (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 (devFlags.debug)
+        console.debug(`PickerView: extractImgFromGroup`);
+    return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null);
+};
+const allLeaves = (node) => node.children.every((c) => 0 === c.children.length);
+const parseDictionary = (value) => {
+    let dictionary = [];
+    try {
+        dictionary = JSON.parse(value ?? '[]');
+    }
+    catch {
+        console.error('invalid-dictionary');
+    }
+    return dictionary;
 };
+const indexGroups = (nodes, parentPath = '') => {
+    const map = new Map();
+    nodes.forEach((node, i) => {
+        const id = parentPath ? `${parentPath}.${i}` : `${i}`;
+        map.set(id, node); // no DOM write — works identically for Element and DictEntry
+        const children = node instanceof Element ? Array.from(node.children) : node.children;
+        for (const [cid, cnode] of indexGroups(children, id))
+            map.set(cid, cnode);
+    });
+    return map;
+};
+const collectLeafValues = (node) => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value]);
+/**
+ *
+ * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
+ *
+ * @attr {string} help - Adds a help tooltip to the trigger of the picker, if style supports one
+ *
+ * @attr {DictEntry[]} dictionary - Renders all options using this array
+ *
+ * @slot list
+ */
 export class PickerView extends FormAssociatedBase {
     static get ATTR() {
         return {
@@ -79,6 +119,7 @@ export class PickerView extends FormAssociatedBase {
             SEARCHABLE: 'searchable',
             CURRENT_VALUE_LABEL: 'current-value-label',
             TRIGGER_HELP: 'help',
+            DICTIONARY: 'dictionary',
         };
     }
     static get observedAttributes() {
@@ -86,7 +127,25 @@ export class PickerView extends FormAssociatedBase {
     }
     static #templates = new Map();
     #spawn;
-    #spawnPage = (tag, searchable = false, title, node) => {
+    #makeGroupClickHandler(el, groupId) {
+        return async (evt) => {
+            evt.stopImmediatePropagation();
+            evt.preventDefault();
+            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));
+            if (!newPage)
+                return;
+            newPage.dataset.groupId = groupId; // <-- tag the spawned page
+            const path = new NavigationPath(target)?.hydrate();
+            await startViewTransition(target, 'forwards', async () => {
+                update(path, newPage);
+                this.#reflectSelectionOnButtons();
+            });
+        };
+    }
+    #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
         if (devFlags.debug)
             console.debug(`${_a.name} #spawnPage`);
         const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="caret-left"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
@@ -138,54 +197,148 @@ export class PickerView extends FormAssociatedBase {
                 component?.remove();
             });
         });
-        const elements = node ? Array.from(node.children) : (this.#slots?.get('list')?.assignedElements() ?? []);
-        for (const el of elements) {
-            if (!(el instanceof HTMLElement))
-                continue;
-            switch (el.tagName) {
-                case 'OPTGROUP': {
-                    const details = _a.#wrapOptgroupTag(el);
-                    _a.#reflectButtons([...el.children], details);
-                    for (const btn of details.querySelectorAll(':scope>button'))
+        for (const [i, el] of elements.entries()) {
+            if (el instanceof Element)
+                switch (el.tagName) {
+                    case 'OPTGROUP': {
+                        const group = _a.#wrapOptgroupTag(el);
+                        _a.#reflectButtons([...el.children], group);
+                        for (const btn of group.querySelectorAll(':scope>button'))
+                            btn.addEventListener('click', this.#handlePageBtnClick);
+                        list?.appendChild(group);
+                        break;
+                    }
+                    case 'OPTION': {
+                        const btn = _a.#wrapOptionTag(el);
                         btn.addEventListener('click', this.#handlePageBtnClick);
-                    list?.appendChild(details);
-                    break;
+                        list?.appendChild(btn);
+                        break;
+                    }
+                    default: {
+                        const btn = _a.#wrapOptionSpawnTag(el);
+                        const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
+                        // 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'
+                        //   ),
+                        //   label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
+                        // const node = el as HTMLElement
+                        // if (label && node.dataset.label) renderLabelTitle(label, node.dataset.label) //label?.setAttribute('title', el.dataset.label)
+                        btn.dataset.groupId = groupId;
+                        btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
+                        list?.appendChild(btn);
+                        break;
+                    }
                 }
-                case 'OPTION': {
+            else {
+                if (el.children.length)
+                    if (allLeaves(el)) {
+                        const group = _a.#wrapOptgroupTag(el);
+                        _a.#reflectButtons(el.children, group);
+                        for (const btn of group.querySelectorAll(':scope>button'))
+                            btn.addEventListener('click', this.#handlePageBtnClick);
+                        list?.appendChild(group);
+                    }
+                    else {
+                        const btn = _a.#wrapOptionSpawnTag(el);
+                        const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
+                        btn.dataset.groupId = groupId;
+                        btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
+                        list?.appendChild(btn);
+                    }
+                else {
                     const btn = _a.#wrapOptionTag(el);
                     btn.addEventListener('click', this.#handlePageBtnClick);
                     list?.appendChild(btn);
-                    break;
-                }
-                default: {
-                    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'), label = btn.querySelector(':scope>h-stack>label-view:nth-child(2)');
-                    if (label && el.dataset.label)
-                        renderLabelTitle(label, el.dataset.label); //label?.setAttribute('title', el.dataset.label)
-                    btn.addEventListener('click', async (evt) => {
-                        evt.stopImmediatePropagation();
-                        evt.preventDefault();
-                        const { target } = evt;
-                        if (!(target instanceof HTMLElement))
-                            return;
-                        const newPage = this.#spawnPage('body-view', this.hasAttribute('searchable'), el.dataset.label, el);
-                        if (!newPage)
-                            return;
-                        const path = new NavigationPath(target)?.hydrate();
-                        await startViewTransition(target, 'forwards', async () => {
-                            update(path, newPage);
-                            this.#reflectSelectionOnButtons();
-                        });
-                    });
-                    list?.appendChild(btn);
-                    break;
                 }
             }
         }
         return body;
     };
-    #renderSlotted = (entries) => {
+    #resyncSpawnedPages = (freshRoot) => {
+        if (!this.#spawn)
+            return;
+        const groupMap = indexGroups(freshRoot);
+        for (const el of this.#spawn.querySelectorAll('body-view')) {
+            const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
+            if (0 >= depth)
+                continue;
+            const groupId = el.dataset.groupId;
+            const source = groupId ? groupMap.get(groupId) : undefined;
+            if (!source) {
+                el.remove();
+                continue;
+            }
+            const children = source instanceof Element ? Array.from(source.children) : source.children;
+            const title = source instanceof Element ? extractLabelFromGroup(source) : (source.label ?? null);
+            const newPage = this.#spawnPage(children, 'body-view', groupId, this.hasAttribute('searchable'), title);
+            newPage.dataset.groupId = groupId;
+            reflectSpawnedElement(el, newPage);
+        }
+    };
+    #renderButtons(input) {
         if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
+            console.debug(`${_a.name} #renderButtons`);
+        switch (input.mode) {
+            case 'dictionary': {
+                const flattenDictionary = (tree) => {
+                    const out = {};
+                    const stack = [tree];
+                    const idx = [0];
+                    while (stack.length) {
+                        const frame = stack[stack.length - 1];
+                        const i = idx[idx.length - 1];
+                        if (i >= frame.length) {
+                            stack.pop();
+                            idx.pop();
+                            continue;
+                        }
+                        idx[idx.length - 1]++;
+                        const { value, label, children } = frame[i];
+                        out[value] = label;
+                        if (children.length) {
+                            stack.push(children);
+                            idx.push(0);
+                        }
+                    }
+                    return out;
+                };
+                this.#lastRenderedLabelMap = flattenDictionary(input.source);
+                // const collectLeafValues = (node: DictEntry): string[] => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value])
+                // collectGroups = (nodes: DictEntry[]): string[][] => {
+                //   const groups: string[][] = []
+                //   const walk = (list: DictEntry[]) => {
+                //     for (const node of list) {
+                //       if (!node.children.length) continue
+                //       if (!allLeaves(node)) groups.push(collectLeafValues(node))
+                //       walk(node.children)
+                //     }
+                //   }
+                //   walk(nodes)
+                //   return groups
+                // }
+                this.#lastIndexedRoot = input.source; //this.#lastRenderedGroupMap = collectGroups(dictionary)
+                break;
+            }
+            case 'list': {
+                this.#lastRenderedLabelMap = {};
+                for (const el of input.source)
+                    if (el.matches('option')) {
+                        const opt = el;
+                        this.#lastRenderedLabelMap[extractTagFromOption(opt)] = opt.getAttribute('label') ?? undefined;
+                    }
+                    else
+                        for (const opt of el.querySelectorAll('option'))
+                            this.#lastRenderedLabelMap[extractTagFromOption(opt)] = opt.getAttribute('label') ?? undefined;
+                this.#lastIndexedRoot = input.source;
+                // this.#lastRenderedGroupMap = assigned.flatMap<string[]>((el) =>
+                //   [...(el.matches('datalist') ? [el as HTMLDataListElement] : []), ...el.querySelectorAll<HTMLDataListElement>('datalist')].map((dl) =>
+                //     Array.from(dl.options).map((opt) => extractTagFromOption(opt))
+                //   )
+                // )
+                break;
+            }
+        }
         switch (this.pickerStyle) {
             case 'sheet':
             case 'navigation-link': {
@@ -206,18 +359,19 @@ export class PickerView extends FormAssociatedBase {
                 if (!this.#spawn)
                     break;
                 // rerender level 0
-                reflectSpawnedElement(this.#spawn, this.#spawnPage('body-view', this.hasAttribute('searchable'), this.getAttribute('label')));
-                for (const el of this.#spawn.querySelectorAll('body-view')) {
-                    const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
-                    if (0 >= depth)
-                        continue;
-                    const datalist = this.querySelector(`:scope>${Array.from({ length: depth }, () => 'datalist').join('>')}`);
-                    if (!datalist) {
-                        el.remove();
-                        break;
-                    }
-                    reflectSpawnedElement(el, this.#spawnPage('body-view', this.hasAttribute('searchable'), datalist.dataset.label, datalist));
-                }
+                reflectSpawnedElement(this.#spawn, this.#spawnPage(input.source, 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
+                this.#resyncSpawnedPages(input.source);
+                // // FIXME:
+                // for (const el of this.#spawn.querySelectorAll<HTMLElement>('body-view')) {
+                //   const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn)
+                //   if (0 >= depth) continue
+                //   const datalist = this.querySelector<HTMLElement>(`:scope>${Array.from({ length: depth }, () => 'datalist').join('>')}`)
+                //   if (!datalist) {
+                //     el.remove()
+                //     break
+                //   }
+                //   reflectSpawnedElement(el, this.#spawnPage(Array.from(datalist.children), 'body-view', this.hasAttribute('searchable'), datalist.dataset.label))
+                // }
                 break;
             }
             case 'menu': {
@@ -236,7 +390,7 @@ export class PickerView extends FormAssociatedBase {
                 }
                 if (this.hasAttribute('help'))
                     currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
-                _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
+                _a.#reflectButtons(input.source, menu);
                 break;
             }
             case 'inline':
@@ -256,12 +410,25 @@ export class PickerView extends FormAssociatedBase {
                         renderLabelTitle(label, value); //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', label);
                 }
-                _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [])].filter((el) => el.matches('option')), section);
+                if ('dictionary' === input.mode)
+                    _a.#reflectButtons(input.source.filter((el) => 0 === el.children.length), section);
+                else
+                    _a.#reflectButtons(input.source.filter((el) => el.matches('option')), section);
                 break;
             }
         }
         this.#reflectSelectionOnButtons();
-        this.#reflectCurrentValueLabel();
+        this.#reflectSelectionOnCurrentValueLabel();
+    }
+    #renderDictionary = (dictionary) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.#renderButtons({ mode: 'dictionary', source: dictionary });
+    };
+    #renderSlotted = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] });
     };
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)
@@ -283,9 +450,15 @@ export class PickerView extends FormAssociatedBase {
             return;
         this.#selection = v;
         this.#reflectSelectionOnButtons();
-        this.#reflectCurrentValueLabel();
+        this.#reflectSelectionOnCurrentValueLabel();
         this.#sendValueToForm();
     }
+    #lastRenderedLabelMap = {};
+    #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;
+    }
     get #internals() {
         return getInternals(this);
     }
@@ -410,12 +583,17 @@ export class PickerView extends FormAssociatedBase {
                 break;
             case this.constructor.ATTR.CURRENT_VALUE_LABEL:
                 // if (oldValue === newValue) break
-                this.#reflectCurrentValueLabel();
+                this.#reflectSelectionOnCurrentValueLabel();
                 break;
             case this.constructor.ATTR.TRIGGER_HELP:
                 // if (oldValue === newValue) break
                 this.#reflectTriggerHelp();
                 break;
+            case this.constructor.ATTR.DICTIONARY:
+                if (oldValue === newValue)
+                    break;
+                this.#renderDictionary(parseDictionary(newValue));
+                break;
             case this.constructor.ATTR.SELECTION:
                 // nothing happens
                 break;
@@ -495,7 +673,7 @@ export class PickerView extends FormAssociatedBase {
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
-        const level0 = this.#spawnPage('sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', this.hasAttribute('searchable'), this.getAttribute('label'));
+        const level0 = this.#spawnPage(this.hasAttribute(this.constructor.ATTR.DICTIONARY) ? parseDictionary(this.getAttribute('dictionary')) : (this.#slots?.get('list')?.assignedElements() ?? []), 'sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label'));
         if (!level0)
             return;
         const path = new NavigationPath(target)?.hydrate();
@@ -519,7 +697,7 @@ export class PickerView extends FormAssociatedBase {
             this.#spawn?.remove();
             this.#selection = btn.getAttribute('value') ?? '';
             this.#reflectSelectionOnButtons();
-            this.#reflectCurrentValueLabel();
+            this.#reflectSelectionOnCurrentValueLabel();
             this.#sendValueToForm();
         };
         const { body } = new NavigationPath(this.#spawn)?.hydrate();
@@ -539,7 +717,7 @@ export class PickerView extends FormAssociatedBase {
             return;
         this.#selection = btn.getAttribute('value') ?? '';
         this.#reflectSelectionOnButtons();
-        this.#reflectCurrentValueLabel();
+        this.#reflectSelectionOnCurrentValueLabel();
         this.#sendValueToForm();
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
@@ -562,6 +740,20 @@ export class PickerView extends FormAssociatedBase {
         // if (0 < assigned.length)
         this.#renderSlotted([]);
     };
+    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');
+        if (hStack)
+            renderLabel(hStack, ':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, 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;
+    }
     static #wrapOptionTag(node) {
         if (devFlags.debug)
             console.debug(`${_a.name} #wrapOptionTag`);
@@ -583,35 +775,54 @@ export class PickerView extends FormAssociatedBase {
         // 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') ?? '')
         if (hStack)
-            renderLabel(hStack, ':scope>label-view:nth-child(2)', labelT, node.getAttribute('label'), node.getAttribute('data-system-image'));
+            renderLabel(hStack, ':scope>label-view:nth-child(2)', labelT, extractLabelFromGroup(node), extractImgFromGroup(node));
         return group;
     }
+    // static #reflectButtons(nodes: Element[], container: Element): void
+    // static #reflectButtons(nodes: Dictionary, container: Element): void
     static #reflectButtons(nodes, container) {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectButtons`);
         for (const node of nodes)
-            switch (node.tagName) {
-                case 'DATALIST': {
-                    const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
-                    // 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(group, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, node.getAttribute('data-label'), node.getAttribute('data-system-image'));
-                    _a.#reflectButtons([...node.children], group);
-                    container.appendChild(group);
-                    break;
-                }
-                case 'OPTGROUP': {
-                    const group = _a.#wrapOptgroupTag(node);
-                    _a.#reflectButtons([...node.children], group);
-                    container.appendChild(group);
-                    break;
+            if (node instanceof Element)
+                switch (node.tagName) {
+                    case 'DATALIST': {
+                        const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
+                        // 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(group, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, extractLabelFromGroup(node), extractImgFromGroup(node));
+                        _a.#reflectButtons([...node.children], group);
+                        container.appendChild(group);
+                        break;
+                    }
+                    case 'OPTGROUP': {
+                        const group = _a.#wrapOptgroupTag(node);
+                        _a.#reflectButtons([...node.children], group);
+                        container.appendChild(group);
+                        break;
+                    }
+                    case 'OPTION':
+                    default: {
+                        container.appendChild(_a.#wrapOptionTag(node));
+                        break;
+                    }
                 }
-                case 'OPTION':
-                default: {
+            else {
+                if (node.children.length)
+                    if (allLeaves(node)) {
+                        const group = _a.#wrapOptgroupTag(node);
+                        _a.#reflectButtons(node.children, group);
+                        container.appendChild(group);
+                    }
+                    else {
+                        const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
+                        renderLabel(group, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, extractLabelFromGroup(node), extractImgFromGroup(node));
+                        _a.#reflectButtons(node.children, group);
+                        container.appendChild(group);
+                    }
+                else
                     container.appendChild(_a.#wrapOptionTag(node));
-                    break;
-                }
             }
     }
     #reflectPlaceholder(value) {
@@ -634,55 +845,69 @@ export class PickerView extends FormAssociatedBase {
     #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. Sync plain value buttons (existing behavior)
+            // 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. Sync `details` (optgroups) — open/mark if any descendant option matches selection
+            // 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);
-                // Show/hide the check on the summary's label-view
                 details.querySelector(':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
+            // 3. nav-link buttons — resolved by groupId, same map used for resync
             for (const btn of root.querySelectorAll('button[navigation-link]:not([value])')) {
-                // Find the matching datalist node by label
-                const btnLabel = btn.querySelector('label-view span')?.textContent?.trim();
-                const matchingDatalist = [...(this.#slots?.get('list')?.assignedElements() ?? [])]
-                    .flatMap((el) => [...el.querySelectorAll('datalist'), ...(el.tagName === 'DATALIST' ? [el] : [])])
-                    .find((dl) => dl.getAttribute('data-label') === btnLabel);
-                const hasSelectedDescendant = matchingDatalist ? [...matchingDatalist.querySelectorAll('option')].some((opt) => extractTagFromOption(opt) === this.#selection) : false;
+                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');
             }
         };
-        // 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')
-    }
-    get #currentTag() {
-        return this.#slots
-            ?.get('list')
-            ?.assignedElements({ flatten: true })
-            .flatMap((el) => [...(el.matches('option') ? [el] : []), ...el.querySelectorAll('option')])
-            .find((el) => this.#selection === extractTagFromOption(el));
-    }
-    get #currentValueLabel() {
-        const cvl = this.#currentTag ? extractCurrentValueFromOption(this.#currentTag) : '';
-        return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl || this.#selection;
     }
-    #reflectCurrentValueLabel() {
+    // #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} #reflectCurrentValueLabel`);
+            console.debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
         switch (this.pickerStyle) {
             case 'sheet':
             case 'navigation-link': {
@@ -784,7 +1009,7 @@ export class PickerView extends FormAssociatedBase {
     formResetCallback = () => {
         this.#selection = '';
         this.#reflectSelectionOnButtons();
-        this.#reflectCurrentValueLabel();
+        this.#reflectSelectionOnCurrentValueLabel();
         this.#sendValueToForm();
     };
 }

package/generated/css/index.css

@@ -4513,6 +4513,22 @@
       place-self: end;
       grid-column: 1/-1;
     }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row]) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: repeat(2, auto);
+      grid-template-areas: "title trailing" "subtitle _";
+    }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row] > :nth-child(-n+2)) {
+      display: grid;
+    }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row] > :nth-child(1)) {
+      grid-area: title;
+    }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row] > :nth-child(2)) {
+      grid-area: trailing;
+      place-self: end;
+      grid-column: 1/-1;
+    }
     :where(table-view[preferred-compact-template="*"] > [is=table-row] > :nth-child(n+2)) {
       display: grid;
     }

package/package.json

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

package/web-components.html-data/en.json

@@ -255,7 +255,49 @@
       ]
     },
     {
-      "name": "picker-view"
+      "name": "picker-view",
+      "description": "",
+      "attributes": [
+        {
+          "name": "picker",
+          "description": "Value Type: “menu” | “inline” | “navigation-link” | “sheet” | “automatic”\n\nDescription: style",
+          "values": [
+            {
+              "name": "menu"
+            },
+            {
+              "name": "inline"
+            },
+            {
+              "name": "navigation-link"
+            },
+            {
+              "name": "sheet"
+            },
+            {
+              "name": "automatic"
+            }
+          ]
+        },
+        {
+          "name": "help",
+          "description": "Value Type: “string”\n\nDescription: Adds a help tooltip to the trigger of the picker, if style supports one",
+          "values": [
+            {
+              "name": "string"
+            }
+          ]
+        },
+        {
+          "name": "dictionary",
+          "description": "Value Type: “DictEntry[]”\n\nDescription: Renders all options using this array",
+          "values": [
+            {
+              "name": "DictEntry[]"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "plain-button"