@swiftwc/ui 1.0.0-canary.2 → 1.0.0-canary.4

package/generated/components/picker-view.js

@@ -1,6 +1,7 @@
 var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { DictEntry, Dictionary } from '../internal/class/dict-entry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
@@ -8,7 +9,7 @@ import { queryInsertPosition, startViewTransition } from '../internal/privateNam
 import { $, ancestors, debug, kebabCase, onoff } from '../internal/utils';
 import { queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
-const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'radio-group', 'automatic'];
+const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'radio-group', 'palette', 'segmented', 'automatic'];
 const update = (path, node, overwrite = true) => {
     debug(`PickerView: update`);
     if (!(path instanceof NavigationPath))
@@ -59,76 +60,6 @@ const reflectSpawnedPage = (current, source) => {
     else
         oldSearch?.remove();
 };
-const extractTag = (node) => {
-    debug(`PickerView: extractTag`);
-    return node instanceof HTMLOptionElement ? (((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '') : (node.value ?? '');
-}, extractLabel = (node) => {
-    debug(`PickerView: extractLabelFromGroup`);
-    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) => {
-    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) => {
-    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) => {
-    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]);
-const flattenDictionary = (tree) => {
-    const out1 = {}, out2 = {}, stack = [tree], idx = [0];
-    while (stack.length) {
-        const frame = stack[stack.length - 1], i = idx[idx.length - 1];
-        if (i >= frame.length) {
-            stack.pop();
-            idx.pop();
-            continue;
-        }
-        idx[idx.length - 1]++;
-        const { value, title, systemImage, children } = frame[i];
-        out1[value] = title;
-        out2[value] = systemImage;
-        if (children.length) {
-            stack.push(children);
-            idx.push(0);
-        }
-    }
-    return { labels: out1, icons: out2 };
-};
 /**
  * @summary A control that selects one value from a set of options.
  *
@@ -184,7 +115,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, 'content-view', groupId, this.hasAttribute('searchable'), extractLabel(el));
+            const newPage = this.#spawnPage(el.children, 'content-view', groupId, this.hasAttribute('searchable'), el.title);
             if (!newPage)
                 return;
             newPage.dataset.groupId = groupId; // <-- tag the spawned page
@@ -195,7 +126,7 @@ export class PickerView extends FormAssociatedBase {
             });
         };
     }
-    #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
+    #spawnPage = (entries, tag, parentGroupId, searchable = false, title) => {
         debug(`${_a.name} #spawnPage`);
         const body = tag === 'sheet-view'
             ? $(html `<dialog is="sheet-view">
@@ -274,68 +205,33 @@ export class PickerView extends FormAssociatedBase {
                 component?.remove();
             });
         });
-        for (const [i, el] of elements.entries()) {
-            if (el instanceof Element)
-                switch (el.tagName) {
-                    case 'OPTGROUP': {
-                        const group = this.#wrapOptgroupTag(el);
-                        this.#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 = this.#wrapOptionTag(el);
-                        btn.addEventListener('click', this.#handlePageBtnClick);
-                        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;
-                    }
-                }
-            else {
-                if (el.children.length)
-                    if (allLeaves(el)) {
-                        const group = this.#wrapOptgroupTag(el);
-                        this.#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 = this.#wrapOptionTag(el);
+        for (const [i, el] of entries.entries()) {
+            if (DictEntry.isLeaf(el)) {
+                const btn = this.#wrapOptionTag(el);
+                btn.addEventListener('click', this.#handlePageBtnClick);
+                list?.appendChild(btn);
+            }
+            else if (DictEntry.isGroup(el)) {
+                const group = this.#wrapOptgroupTag(el);
+                this.#reflectButtons(el.children, group);
+                for (const btn of group.querySelectorAll(':scope>button'))
                     btn.addEventListener('click', this.#handlePageBtnClick);
-                    list?.appendChild(btn);
-                }
+                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);
             }
         }
         return body;
     };
-    #resyncSpawnedPages = (freshRoot) => {
+    #resyncSpawnedPages = (fresh) => {
         if (!this.#spawn)
             return;
-        const groupMap = indexGroups(freshRoot);
+        const groupMap = Dictionary.index(fresh);
         for (const el of this.#spawn.querySelectorAll('content-view')) {
             const depth = ancestors('content-view,[is=sheet-view]', el).indexOf(this.#spawn);
             if (0 >= depth)
@@ -346,60 +242,19 @@ export class PickerView extends FormAssociatedBase {
                 el.remove();
                 continue;
             }
-            const children = source instanceof Element ? Array.from(source.children) : source.children;
-            const title = source instanceof Element ? extractLabel(source) : (source.title ?? null);
+            const children = source.children;
+            const title = source.title ?? null;
             const newPage = this.#spawnPage(children, 'content-view', groupId, this.hasAttribute('searchable'), title);
             newPage.dataset.groupId = groupId;
             reflectSpawnedPage(el, newPage);
         }
     };
-    #renderButtons(input) {
+    #renderButtons(source) {
         debug(`${_a.name} #renderButtons`);
-        switch (input.mode) {
-            case 'dictionary': {
-                const { labels, icons } = flattenDictionary(input.source);
-                this.#lastRenderedLabelMap = labels;
-                this.#lastRenderedIconMap = icons;
-                // 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 = {};
-                this.#lastRenderedIconMap = {};
-                for (const el of input.source)
-                    if (el.matches('option')) {
-                        const k = extractTag(el);
-                        this.#lastRenderedLabelMap[k] = el.getAttribute('label') ?? undefined;
-                        this.#lastRenderedIconMap[k] = extractIcon(el) ?? undefined;
-                    }
-                    else
-                        for (const opt of el.querySelectorAll('option')) {
-                            const k = extractTag(opt);
-                            this.#lastRenderedLabelMap[k] = opt.getAttribute('label') ?? undefined;
-                            this.#lastRenderedIconMap[k] = extractIcon(opt) ?? 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;
-            }
-        }
+        const { labels, icons } = Dictionary.flatten(source);
+        this.#lastRenderedLabelMap = labels;
+        this.#lastRenderedIconMap = icons;
+        this.#lastIndexedRoot = source;
         switch (this.pickerStyle) {
             case 'sheet':
             case 'navigation-link': {
@@ -422,8 +277,8 @@ export class PickerView extends FormAssociatedBase {
                 if (!this.#spawn)
                     break;
                 // rerender level 0
-                reflectSpawnedPage(this.#spawn, this.#spawnPage(input.source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
-                this.#resyncSpawnedPages(input.source);
+                reflectSpawnedPage(this.#spawn, this.#spawnPage(source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
+                this.#resyncSpawnedPages(source);
                 // // FIXME:
                 // for (const el of this.#spawn.querySelectorAll<HTMLElement>('content-view')) {
                 //   const depth = $.ancestors('content-view,[is=sheet-view]', el).indexOf(this.#spawn)
@@ -453,9 +308,11 @@ export class PickerView extends FormAssociatedBase {
                 // }
                 if (this.hasAttribute('help'))
                     currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
-                this.#reflectButtons(input.source, menu);
+                this.#reflectButtons(source, menu);
                 break;
             }
+            case 'segmented':
+            case 'palette':
             case 'radio-group': {
                 // capture
                 // const stack = this.querySelector<HTMLElement>(':scope>v-stack:not([slot])') ?? this.appendChild<HTMLElement>($(html`<v-stack></v-stack>`, '>1'))
@@ -465,7 +322,7 @@ export class PickerView extends FormAssociatedBase {
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     el.remove();
                 // add buttons
-                this.#reflectButtons(input.source, this);
+                this.#reflectButtons(source, this);
                 break;
             }
             case 'inline':
@@ -491,10 +348,7 @@ export class PickerView extends FormAssociatedBase {
                     // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', hStack);
                 }
-                if ('dictionary' === input.mode)
-                    this.#reflectButtons(input.source.filter((el) => 0 === el.children.length), section);
-                else
-                    this.#reflectButtons(input.source.filter((el) => el.matches('option')), section);
+                this.#reflectButtons(source.filter(DictEntry.isLeaf), section);
                 break;
             }
         }
@@ -575,6 +429,8 @@ export class PickerView extends FormAssociatedBase {
               </label>
             `));
                     break;
+                case 'segmented':
+                case 'palette':
                 case 'radio-group':
                     _a.#templates.set(this.pickerStyle, $(html `
               <label part="root picker-stack">
@@ -737,8 +593,8 @@ export class PickerView extends FormAssociatedBase {
     }
     #resolveSource() {
         if (this.hasAttribute('dictionary'))
-            return { mode: 'dictionary', source: parseDictionary(this.getAttribute('dictionary')) };
-        return { mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] };
+            return Dictionary.parse(this.getAttribute('dictionary'));
+        return Dictionary.fromElements(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? []);
     }
     #render() {
         debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
@@ -786,7 +642,7 @@ export class PickerView extends FormAssociatedBase {
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
-        const { source } = this.#resolveSource();
+        const source = this.#resolveSource();
         const level0 = this.#spawnPage(source, // this.hasAttribute('dictionary') ? parseDictionary(this.getAttribute('dictionary')) : (this.#slots?.get('list')?.assignedElements() ?? []),
         'sheet' === this.pickerStyle ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label'));
         if (!level0)
@@ -838,6 +694,8 @@ export class PickerView extends FormAssociatedBase {
         if (!(target instanceof HTMLElement))
             return;
         switch (this.pickerStyle) {
+            case 'segmented':
+            case 'palette':
             case 'radio-group':
                 const radio = target.closest('input[type="radio"]');
                 if (!radio)
@@ -869,25 +727,30 @@ export class PickerView extends FormAssociatedBase {
     };
     static #wrapOptionSpawnTag(node) {
         debug(`${_a.name} #wrapOptionSpawnTag`);
-        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>
-          ${_a.#morphITSLabel({ title, subtitle, icon })}
+          ${_a.#morphITSLabel(node)}
         </h-stack>
       </button>`, mount);
         return mount.firstElementChild; //btn
     }
     #wrapOptionTag(node) {
         debug(`${_a.name} #wrapOptionTag`);
-        const tag = extractTag(node), title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const tag = node.value;
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
+            case 'segmented':
+                render(_a.#morphSegmentedBtn({ name: this.#guuid, node, tag }), mount);
+                return mount.firstElementChild; //btn
+            case 'palette':
+                render(_a.#morphPaletteBtn({ name: this.#guuid, node, tag }), mount);
+                return mount.firstElementChild; //btn
             case 'radio-group':
-                render(_a.#morphRadioGroupBtn({ name: this.#guuid, title, subtitle, icon, tag }), mount);
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             default:
                 render(html `<button type="button" tabindex="0" value="${tag}">
@@ -895,31 +758,82 @@ export class PickerView extends FormAssociatedBase {
               <label-view data-role="check">
                 <image-view slot="icon" system-name="check"></image-view>
               </label-view>
-              ${_a.#morphITSLabel({ title, subtitle, icon })}
+              ${_a.#morphITSLabel(node)}
             </h-stack>
           </button>`, mount);
                 return mount.firstElementChild; //btn
         }
     }
-    static #morphRadioGroupGroup({ name, title, subtitle, icon }) {
-        return html `<label>
-      <h-stack distribution="fill" template="auto spacer" spacing="5">
-        <input type="radio" name="${name}" style="min-inline-size: 20px; margin: 0" disabled />
-        ${_a.#morphITSLabel({ title, subtitle, icon })}
-      </h-stack>
-    </label>`;
+    static #morphRadioGroupBtn({ name, node, tag }) {
+        if ('string' === typeof tag)
+            return html `<label tabindex="0">
+        <h-stack distribution="fill" template="auto spacer" spacing="5">
+          <input type="radio" name="${name}" value="${tag}" />
+          ${_a.#morphITSLabel(node)}
+        </h-stack>
+      </label>`;
+        else
+            return html `<label>
+        <h-stack distribution="fill" template="auto spacer" spacing="5">
+          <input type="radio" name="${name}" disabled />
+          ${_a.#morphITSLabel(node)}
+        </h-stack>
+      </label>`;
     }
-    static #morphRadioGroupBtn({ name, title, subtitle, icon, tag }) {
-        return html `<label>
-      <h-stack distribution="fill" template="auto spacer" spacing="5">
-        <input type="radio" name="${name}" value="${tag}" style="min-inline-size: 20px; margin: 0" />
-        ${_a.#morphITSLabel({ title, subtitle, icon })}
-      </h-stack>
-    </label>`;
+    static #morphPaletteBtn({ name, node, tag }) {
+        if ('string' === typeof tag) {
+            const style = node.src ? `background-image: url('${node.src}')` : null;
+            return html `<label tabindex="0">
+        <v-stack template="auto spacer" spacing="5">
+          <input type="radio" name="${name}" value="${tag}" style="${style}" />
+          ${_a.#morphITSLabel(node)}
+        </v-stack>
+      </label>`;
+        }
+        else
+            return html `<label>
+        <v-stack template="auto spacer" spacing="5">
+          <input type="radio" name="${name}" disabled />
+          ${_a.#morphITSLabel(node)}
+        </v-stack>
+      </label>`;
     }
-    static #morphITSLabel({ title, subtitle, icon }) {
-        return html `<h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
-      ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+    static #morphSegmentedBtn({ name, node, tag }) {
+        const cssUrl = (src) => {
+            if ('string' !== typeof src)
+                return null;
+            try {
+                const { protocol, href } = new URL(src, location.href);
+                if (protocol !== 'https:' && protocol !== 'http:' && protocol !== 'blob:')
+                    return null;
+                // URL.href already percent-encodes " < > ` space and \ in path/query.
+                // Encode the remaining chars that matter inside url('...')
+                return href.replace(/['()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
+            }
+            catch {
+                return null;
+            }
+        };
+        if ('string' === typeof tag) {
+            const style = node.src ? `background-image: url('${cssUrl(node.src)}')` : null;
+            return html `<label tabindex="0">
+        <v-stack template="auto spacer" spacing="5">
+          <input type="radio" name="${name}" value="${tag}" style="${style}" />
+          ${_a.#morphITSLabel(node)}
+        </v-stack>
+      </label>`;
+        }
+        else
+            return html `<label>
+        <v-stack template="auto spacer" spacing="5">
+          <input type="radio" name="${name}" disabled />
+          ${_a.#morphITSLabel(node)}
+        </v-stack>
+      </label>`;
+    }
+    static #morphITSLabel({ title, subtitle, systemImage }) {
+        return html `<h-stack distribution="fill" template="${systemImage ? 'auto spacer' : null}">
+      ${systemImage ? html `<label-view system-image="${systemImage}"></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}
@@ -928,15 +842,16 @@ export class PickerView extends FormAssociatedBase {
     }
     #wrapOptgroupTag(node) {
         debug(`${_a.name} #wrapOptgroupTag`);
-        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
+            case 'segmented':
+                render(_a.#morphSegmentedBtn({ name: this.#guuid, node }), mount);
+                return mount.firstElementChild;
+            case 'palette':
+                render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
+                return mount.firstElementChild;
             case 'radio-group':
-                render(_a.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon }), 
-                // this.hasAttribute('horizontal-radio-group-layout')
-                //   ? html`<h-flex-stack style="flex-wrap: wrap">${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</h-flex-stack>`
-                //   : html`<v-stack>${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</v-stack>`,
-                mount);
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             default:
                 render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
@@ -945,7 +860,7 @@ export class PickerView extends FormAssociatedBase {
                 <label-view data-role="check" style="visibility: hidden">
                   <image-view slot="icon" system-name="check"></image-view>
                 </label-view>
-                ${_a.#morphITSLabel({ title, subtitle, icon })}
+                ${_a.#morphITSLabel(node)}
               </h-stack>
             </summary>
           </details>`, mount);
@@ -953,15 +868,16 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     #wrapDatalistTag(node) {
-        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
+            case 'segmented':
+                render(_a.#morphSegmentedBtn({ name: this.#guuid, node }), mount);
+                return mount.firstElementChild;
+            case 'palette':
+                render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
+                return mount.firstElementChild;
             case 'radio-group':
-                render(_a.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon }), 
-                // this.hasAttribute('horizontal-radio-group-layout')
-                //   ? html`<h-flex-stack style="flex-wrap: wrap">${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</h-flex-stack>`
-                //   : html`<v-stack>${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</v-stack>`,
-                mount);
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             default:
                 render(html `<menu-view tabindex="0">
@@ -969,7 +885,7 @@ export class PickerView extends FormAssociatedBase {
               <label-view data-role="check" style="visibility: hidden">
                 <image-view slot="icon" system-name="check"></image-view>
               </label-view>
-              ${_a.#morphITSLabel({ title, subtitle, icon })}
+              ${_a.#morphITSLabel(node)}
             </h-stack>
           </menu-view>`, mount);
                 return mount.firstElementChild;
@@ -977,53 +893,21 @@ export class PickerView extends FormAssociatedBase {
     }
     #reflectButtons(nodes, container) {
         debug(`${_a.name} #reflectButtons`);
-        const flatten = 'radio-group' === this.pickerStyle;
-        for (const node of nodes)
-            if (node instanceof Element)
-                switch (node.tagName) {
-                    case 'DATALIST': {
-                        if (flatten) {
-                            this.#reflectButtons([...node.children], container);
-                            break;
-                        }
-                        const group = this.#wrapDatalistTag(node);
-                        this.#reflectButtons([...node.children], group);
-                        container.appendChild(group);
-                        break;
-                    }
-                    case 'OPTGROUP': {
-                        if (flatten) {
-                            this.#reflectButtons([...node.children], container);
-                            break;
-                        }
-                        const group = this.#wrapOptgroupTag(node);
-                        this.#reflectButtons([...node.children], group);
-                        container.appendChild(group);
-                        break;
-                    }
-                    case 'OPTION':
-                    default: {
-                        container.appendChild(this.#wrapOptionTag(node));
-                        break;
-                    }
-                }
-            else {
-                if (node.children.length)
-                    if (flatten)
-                        this.#reflectButtons(node.children, container);
-                    else if (allLeaves(node)) {
-                        const group = this.#wrapOptgroupTag(node);
-                        this.#reflectButtons(node.children, group);
-                        container.appendChild(group);
-                    }
-                    else {
-                        const group = this.#wrapDatalistTag(node);
-                        this.#reflectButtons(node.children, group);
-                        container.appendChild(group);
-                    }
-                else
-                    container.appendChild(this.#wrapOptionTag(node));
+        const flatten = ['radio-group', 'palette', 'segmented'].includes(this.pickerStyle);
+        for (const node of nodes) {
+            if (DictEntry.isLeaf(node)) {
+                container.appendChild(this.#wrapOptionTag(node));
+                continue;
+            }
+            if (flatten) {
+                container.appendChild(this.#wrapOptgroupTag(node)); // header row, same markup as the datalist one in these styles
+                this.#reflectButtons(node.children, container);
+                continue;
             }
+            const group = DictEntry.isGroup(node) ? this.#wrapOptgroupTag(node) : this.#wrapDatalistTag(node);
+            this.#reflectButtons(node.children, group);
+            container.appendChild(group);
+        }
     }
     // #reflectPlaceholder(value: string | null) {
     //   debug(`#reflectPlaceholder`)
@@ -1042,8 +926,8 @@ export class PickerView extends FormAssociatedBase {
         debug(`${_a.name} #reflectSelectionOnButtons`);
         self.requestAnimationFrame(() => {
             this.ariaCurrent = this.#selection;
-            const groupMap = indexGroups(this.#lastIndexedRoot);
-            const groupContainsSelection = (source) => source instanceof Element ? [...source.querySelectorAll('option')].some((opt) => extractTag(opt) === this.#selection) : collectLeafValues(source).includes(this.#selection);
+            const groupMap = Dictionary.index(this.#lastIndexedRoot);
+            const groupContainsSelection = (e) => DictEntry.leafValues(e).includes(this.#selection);
             const syncButtons = (root) => {
                 // 1. plain value buttons
                 for (const el of root.querySelectorAll('button[value]:not([slot])'))
@@ -1122,13 +1006,16 @@ export class PickerView extends FormAssociatedBase {
             case 'sheet':
             case 'navigation-link': {
                 trigger = this.querySelector(':scope>label-view:not([slot])') ?? undefined;
+                break;
             }
             case 'menu': {
                 trigger = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]') ?? undefined;
+                break;
             }
             case 'inline':
             default: {
                 //udnefined
+                break;
             }
         }
         if (this.hasAttribute('help'))