@swiftwc/ui 0.0.0-dev.112 → 0.0.0-dev.114

package/generated/components/picker-view.js

@@ -8,7 +8,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', 'automatic'];
+const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'radio-group', 'automatic'];
 const update = (path, node, overwrite = true) => {
     debug(`PickerView: update`);
     if (!(path instanceof NavigationPath))
@@ -109,42 +109,73 @@ const indexGroups = (nodes, parentPath = '') => {
     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.
  *
- * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
- *
- * @attr help — Adds a help tooltip to the trigger of the picker, if style supports one
- *
- * @attr {DictEntry[]} dictionary — Renders all options using this array
- *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @attr {boolean} horizontal-radio-group-layout
+ *
  * @slot — The default slot.
  * @slot label
  * @slot list
  * @slot {HTMLOptionElement[]} validity-options
  */
 export class PickerView extends FormAssociatedBase {
-    static get ATTR() {
-        return {
-            PLACEHOLDER: 'prompt',
-            PLACEHOLDER_ICON: 'prompt-icon',
-            LABEL: 'label',
-            PICKER_STYLE: 'picker-style',
-            SELECTION: 'selection',
-            SEARCHABLE: 'searchable',
-            CURRENT_VALUE_LABEL: 'current-value-label',
-            CURRENT_VALUE_ICON: 'current-value-icon',
-            TRIGGER_HELP: 'help',
-            DICTIONARY: 'dictionary',
-            REQUIRED: 'required',
-        };
-    }
     static get observedAttributes() {
-        return Object.values(this.ATTR);
+        return [
+            'prompt',
+            'prompt-icon',
+            'label',
+            'name',
+            /**
+             * @type {menu|inline|navigation-link|sheet|automatic}
+             */
+            'picker-style',
+            'selection',
+            /**
+             * @type {boolean}
+             */
+            'searchable',
+            'current-value-label',
+            'current-value-icon',
+            /**
+             * Adds a help tooltip to the trigger of the picker, if style supports one
+             */
+            'help',
+            /**
+             * Renders all options using this array
+             * @type {DictEntry[]}
+             */
+            'dictionary',
+            /**
+             * @type {boolean}
+             */
+            'required',
+        ];
     }
     static #templates = new Map();
+    #guuid = self.crypto.randomUUID();
     #spawn;
     #makeGroupClickHandler(el, groupId) {
         return async (evt) => {
@@ -247,15 +278,15 @@ export class PickerView extends FormAssociatedBase {
             if (el instanceof Element)
                 switch (el.tagName) {
                     case 'OPTGROUP': {
-                        const group = _a.#wrapOptgroupTag(el);
-                        _a.#reflectButtons([...el.children], group);
+                        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 = _a.#wrapOptionTag(el);
+                        const btn = this.#wrapOptionTag(el);
                         btn.addEventListener('click', this.#handlePageBtnClick);
                         list?.appendChild(btn);
                         break;
@@ -279,8 +310,8 @@ export class PickerView extends FormAssociatedBase {
             else {
                 if (el.children.length)
                     if (allLeaves(el)) {
-                        const group = _a.#wrapOptgroupTag(el);
-                        _a.#reflectButtons(el.children, group);
+                        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);
@@ -293,7 +324,7 @@ export class PickerView extends FormAssociatedBase {
                         list?.appendChild(btn);
                     }
                 else {
-                    const btn = _a.#wrapOptionTag(el);
+                    const btn = this.#wrapOptionTag(el);
                     btn.addEventListener('click', this.#handlePageBtnClick);
                     list?.appendChild(btn);
                 }
@@ -326,28 +357,9 @@ export class PickerView extends FormAssociatedBase {
         debug(`${_a.name} #renderButtons`);
         switch (input.mode) {
             case 'dictionary': {
-                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 };
-                };
-                this.#lastRenderedLabelMap = flattenDictionary(input.source).labels;
-                this.#lastRenderedIconMap = flattenDictionary(input.source).icons;
+                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[][] = []
@@ -404,8 +416,8 @@ export class PickerView extends FormAssociatedBase {
                         el.remove();
                 CleanupRegistry.unregister(this, 'trigger');
                 CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, currentValueLabel).on(), 'trigger');
-                if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
-                    currentValueLabel?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
+                if (this.hasAttribute('help'))
+                    currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
                 // rebuild snapshot(tree)
                 if (!this.#spawn)
                     break;
@@ -439,9 +451,21 @@ export class PickerView extends FormAssociatedBase {
                 //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
                 //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
                 // }
-                if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
-                    currentValueLabel?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
-                _a.#reflectButtons(input.source, menu);
+                if (this.hasAttribute('help'))
+                    currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
+                this.#reflectButtons(input.source, menu);
+                break;
+            }
+            case 'radio-group': {
+                // capture
+                // const stack = this.querySelector<HTMLElement>(':scope>v-stack:not([slot])') ?? this.appendChild<HTMLElement>($(html`<v-stack></v-stack>`, '>1'))
+                // reset state
+                // stack.innerHTML = ''
+                // clear all siblings
+                for (const el of this.querySelectorAll(':scope>:not([slot])'))
+                    el.remove();
+                // add buttons
+                this.#reflectButtons(input.source, this);
                 break;
             }
             case 'inline':
@@ -455,32 +479,35 @@ export class PickerView extends FormAssociatedBase {
                     if (inlineList !== el)
                         el.remove();
                 // add label as a plain element
-                const value = this.getAttribute(this.constructor.ATTR.LABEL);
+                const value = this.getAttribute('label');
                 if (value) {
-                    const hStack = $(html `<h-stack distribution="leading" template="auto spacer"
-              ><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view
-            ></h-stack>`, '>1');
+                    const hStack = $(html `<h-stack distribution="leading" template="auto spacer">
+              <label-view data-role="check" style="visibility: hidden">
+                <image-view slot="icon" system-name="check"></image-view>
+              </label-view>
+              <label-view><span></span></label-view>
+            </h-stack>`, '>1');
                     queryMorph('label-view:nth-child(2)', html `<label-view>${value ? html `<span>${value}</span>` : null}</label-view>`, hStack);
                     // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', hStack);
                 }
                 if ('dictionary' === input.mode)
-                    _a.#reflectButtons(input.source.filter((el) => 0 === el.children.length), section);
+                    this.#reflectButtons(input.source.filter((el) => 0 === el.children.length), section);
                 else
-                    _a.#reflectButtons(input.source.filter((el) => el.matches('option')), section);
+                    this.#reflectButtons(input.source.filter((el) => el.matches('option')), section);
                 break;
             }
         }
         this.#reflectSelectionOnButtons();
         this.#reflectSelectionOnCurrentValueLabel();
     }
-    #renderDictionary = (dictionary) => {
-        debug(`${_a.name} ⚡️ mutation`);
-        this.#renderButtons({ mode: 'dictionary', source: dictionary });
-    };
+    // #renderDictionary = (dictionary: Dictionary) => {
+    //   debug(`${PickerView.name} ⚡️ mutation`)
+    //   this.#renderButtons({ mode: 'dictionary', source: dictionary })
+    // }
     #renderSlotted = (entries) => {
         debug(`${_a.name} ⚡️ mutation`);
-        this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] });
+        this.#renderButtons(this.#resolveSource()); //this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] })
     };
     #renderValidityMsgs = (entries) => {
         debug(`${_a.name} ⚡️ mutation`);
@@ -508,11 +535,10 @@ export class PickerView extends FormAssociatedBase {
     #lastRenderedIconMap = {};
     #lastIndexedRoot = [];
     get #currentValueLabel() {
-        return ((this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_LABEL) ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) ||
-            this.#lastRenderedLabelMap[this.#selection]);
+        return ((this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || this.#lastRenderedLabelMap[this.#selection]);
     }
     get #currentValueIcon() {
-        return (this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_ICON) ?? '') || this.#lastRenderedIconMap[this.#selection];
+        return (this.getAttribute('current-value-icon') ?? '') || this.#lastRenderedIconMap[this.#selection];
     }
     get #internals() {
         return getInternals(this);
@@ -548,32 +574,46 @@ export class PickerView extends FormAssociatedBase {
                 <slot name="validity-options" hidden></slot>
               </label>
             `));
-                    //   break
-                    // case 'compact':
-                    //   PickerView.#templates.set(
-                    //     style,
-                    //     Object.assign(document.createElement('template'), {
-                    //       innerHTML: String.raw`
-                    //     <label part="compact-picker">
-                    //       <input type="text" part="compact-input">
-                    //     </label>
-                    //   `,
-                    //     })
-                    //   )
-                    //   break
-                    // case 'fancy':
-                    //   PickerView.#templates.set(
-                    //     style,
-                    //     Object.assign(document.createElement('template'), {
-                    //       innerHTML: String.raw`
-                    //     <div part="fancy-picker">
-                    //       <span>Fancy Picker</span>
-                    //       <input type="text" part="fancy-input">
-                    //     </div>
-                    //   `,
-                    //     })
-                    //   )
                     break;
+                case 'radio-group':
+                    _a.#templates.set(this.pickerStyle, $(html `
+              <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>
+            `));
+                    break;
+                //   break
+                // case 'compact':
+                //   PickerView.#templates.set(
+                //     style,
+                //     Object.assign(document.createElement('template'), {
+                //       innerHTML: String.raw`
+                //     <label part="compact-picker">
+                //       <input type="text" part="compact-input">
+                //     </label>
+                //   `,
+                //     })
+                //   )
+                //   break
+                // case 'fancy':
+                //   PickerView.#templates.set(
+                //     style,
+                //     Object.assign(document.createElement('template'), {
+                //       innerHTML: String.raw`
+                //     <div part="fancy-picker">
+                //       <span>Fancy Picker</span>
+                //       <input type="text" part="fancy-input">
+                //     </div>
+                //   `,
+                //     })
+                //   )
                 //   case 'gg':
                 //     PickerView.#templates.set(
                 //       style,
@@ -617,47 +657,56 @@ export class PickerView extends FormAssociatedBase {
     attributeChangedCallback(name, oldValue, newValue) {
         debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
-            case this.constructor.ATTR.PLACEHOLDER:
-            case this.constructor.ATTR.PLACEHOLDER_ICON:
+            // case 'horizontal-radio-group-layout':
+            //   if (oldValue === newValue) break
+            //   this.#renderSlotted([])
+            // break
+            case 'prompt':
+            case 'prompt-icon':
                 if (oldValue === newValue)
                     break;
                 this.#reflectSelectionOnCurrentValueLabel(); //this.#reflectPlaceholder(newValue)
                 break;
-            case this.constructor.ATTR.LABEL:
+            case 'label':
                 this.#reflectLabel(newValue);
                 // this.#sendValueToForm()
                 break;
-            case this.constructor.ATTR.PICKER_STYLE:
+            case 'picker-style':
                 if (oldValue === newValue)
                     break;
                 this.#render();
                 break;
-            case this.constructor.ATTR.SEARCHABLE:
+            case 'searchable':
                 if (oldValue === newValue)
                     break;
                 this.#renderSlotted([]);
                 break;
-            case this.constructor.ATTR.CURRENT_VALUE_LABEL:
-            case this.constructor.ATTR.CURRENT_VALUE_ICON:
+            case 'current-value-label':
+            case 'current-value-icon':
                 // if (oldValue === newValue) break
                 this.#reflectSelectionOnCurrentValueLabel();
                 break;
-            case this.constructor.ATTR.TRIGGER_HELP:
+            case 'help':
                 // if (oldValue === newValue) break
                 this.#reflectTriggerHelp();
                 break;
-            case this.constructor.ATTR.DICTIONARY:
+            case 'dictionary':
                 if (oldValue === newValue)
                     break;
-                this.#renderDictionary(parseDictionary(newValue));
+                this.#renderSlotted([]); // re-resolve: dictionary present → wins; removed → falls back to slotted //this.#renderDictionary(parseDictionary(newValue))
                 break;
-            case this.constructor.ATTR.REQUIRED:
+            case 'name':
+            case 'required':
                 if (oldValue === newValue)
                     break;
                 this.#sendValueToForm(false);
                 break;
-            case this.constructor.ATTR.SELECTION:
-                // nothing happens
+            case 'selection':
+                if (oldValue === newValue)
+                    break;
+                this.#selection = newValue ?? '';
+                // FIXME: What about other callbacks from this.#selection=???? Somehow they run correctly
+                this.#sendValueToForm(false);
                 break;
         }
     }
@@ -673,7 +722,8 @@ export class PickerView extends FormAssociatedBase {
             this.#renderSlotted([]);
         }, I18n.on).on());
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
-        if (!this.hasAttribute(this.constructor.ATTR.PICKER_STYLE))
+        CleanupRegistry.register(this, onoff('input', this.#handleInput, this).on());
+        if (!this.hasAttribute('picker-style'))
             this.#render(); // skip if already rendered by attr-change during upgrade!
         // finally
         if (!this.hasAttribute('selection'))
@@ -682,12 +732,17 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
     get pickerStyle() {
-        const attr = this.constructor.ATTR.PICKER_STYLE;
+        const attr = 'picker-style';
         return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
     }
+    #resolveSource() {
+        if (this.hasAttribute('dictionary'))
+            return { mode: 'dictionary', source: parseDictionary(this.getAttribute('dictionary')) };
+        return { mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] };
+    }
     #render() {
         debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
-        // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)
+        // const style = this.getAttribute('picker-style')
         if (this.#lastRenderedStyle === this.pickerStyle)
             return; // skip if already applied
         this.#lastRenderedStyle = this.pickerStyle;
@@ -731,7 +786,9 @@ export class PickerView extends FormAssociatedBase {
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
-        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'));
+        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' : 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label'));
         if (!level0)
             return;
         const path = new NavigationPath(target)?.hydrate();
@@ -776,6 +833,22 @@ export class PickerView extends FormAssociatedBase {
         this.#reflectSelectionOnCurrentValueLabel();
         this.#sendValueToForm();
     }
+    #handleInput({ type, target }) {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        switch (this.pickerStyle) {
+            case 'radio-group':
+                const radio = target.closest('input[type="radio"]');
+                if (!radio)
+                    return;
+                this.#selection = radio.getAttribute('value') ?? '';
+                this.#reflectSelectionOnButtons();
+                this.#reflectSelectionOnCurrentValueLabel();
+                this.#sendValueToForm();
+                break;
+        }
+    }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
         debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
@@ -803,188 +876,161 @@ export class PickerView extends FormAssociatedBase {
           <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>
+          ${_a.#morphITSLabel({ title, subtitle, icon })}
         </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) {
+    #wrapOptionTag(node) {
         debug(`${_a.name} #wrapOptionTag`);
         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
+        switch (this.pickerStyle) {
+            case 'radio-group':
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, title, subtitle, icon, tag }), mount);
+                return mount.firstElementChild; //btn
+            default:
+                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>
+              ${_a.#morphITSLabel({ title, subtitle, icon })}
+            </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 #wrapOptgroupTag(node) {
+    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 #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}
+      <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>`;
+    }
+    #wrapOptgroupTag(node) {
         debug(`${_a.name} #wrapOptgroupTag`);
         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>
+        switch (this.pickerStyle) {
+            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);
+                return mount.firstElementChild;
+            default:
+                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>
+                ${_a.#morphITSLabel({ title, subtitle, icon })}
+              </h-stack>
+            </summary>
+          </details>`, mount);
+                return mount.firstElementChild;
+        }
+    }
+    #wrapDatalistTag(node) {
+        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        switch (this.pickerStyle) {
+            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);
+                return mount.firstElementChild;
+            default:
+                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>
+              ${_a.#morphITSLabel({ title, subtitle, icon })}
             </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
+          </menu-view>`, mount);
+                return mount.firstElementChild;
+        }
     }
-    // static #reflectButtons(nodes: Element[], container: Element): void
-    // static #reflectButtons(nodes: Dictionary, container: Element): void
-    static #reflectButtons(nodes, container) {
+    #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': {
-                        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);
+                        if (flatten) {
+                            this.#reflectButtons([...node.children], container);
+                            break;
+                        }
+                        const group = this.#wrapDatalistTag(node);
+                        this.#reflectButtons([...node.children], group);
                         container.appendChild(group);
                         break;
                     }
                     case 'OPTGROUP': {
-                        const group = _a.#wrapOptgroupTag(node);
-                        _a.#reflectButtons([...node.children], group);
+                        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(_a.#wrapOptionTag(node));
+                        container.appendChild(this.#wrapOptionTag(node));
                         break;
                     }
                 }
             else {
                 if (node.children.length)
-                    if (allLeaves(node)) {
-                        const group = _a.#wrapOptgroupTag(node);
-                        _a.#reflectButtons(node.children, group);
+                    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 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);
+                        const group = this.#wrapDatalistTag(node);
+                        this.#reflectButtons(node.children, group);
                         container.appendChild(group);
                     }
                 else
-                    container.appendChild(_a.#wrapOptionTag(node));
+                    container.appendChild(this.#wrapOptionTag(node));
             }
     }
     // #reflectPlaceholder(value: string | null) {
     //   debug(`#reflectPlaceholder`)
     // const input = this.#shadowRoot.querySelector('input')
     // if (input) {
-    //   if (value) input.setAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER, value)
-    //   else input.removeAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER)
+    //   if (value) input.setAttribute('prompt', value)
+    //   else input.removeAttribute('prompt')
     // }
     // }
     #reflectLabel(value) {
@@ -999,11 +1045,11 @@ export class PickerView extends FormAssociatedBase {
             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 syncButtons = (root) => {
-                // 1. plain value buttons — unchanged
+                // 1. plain value buttons
                 for (const el of root.querySelectorAll('button[value]:not([slot])'))
                     // $.prop('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden', el.querySelector<HTMLElement>('label-view[data-role="check"]'))
                     el.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
-                // 2. details/optgroups — unchanged
+                // 2. details/optgroups
                 for (const details of root.querySelectorAll('details[is="disclosure-group"]')) {
                     const hasSelectedDescendant = [...details.querySelectorAll('button[value]')].some((btn) => btn.getAttribute('value') === this.#selection);
                     details.querySelector(':scope>summary label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
@@ -1014,6 +1060,9 @@ export class PickerView extends FormAssociatedBase {
                     const hasSelectedDescendant = source ? groupContainsSelection(source) : false;
                     btn.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
                 }
+                // 4. radio inputs
+                for (const el of root.querySelectorAll('input[type=radio][value]'))
+                    el.checked = el.getAttribute('value') === this.#selection;
             };
             syncButtons(this);
             if (this.#spawn)
@@ -1034,7 +1083,7 @@ export class PickerView extends FormAssociatedBase {
                         break;
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
-                    const title = this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER), systemImage = this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON);
+                    const title = this.#currentValueLabel || this.#selection || this.getAttribute('prompt'), systemImage = this.#currentValueIcon || this.getAttribute('prompt-icon');
                     queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
                     queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
                     // morph(
@@ -1049,7 +1098,7 @@ export class PickerView extends FormAssociatedBase {
                         break;
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
-                    const title = this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER), systemImage = this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON);
+                    const title = this.#currentValueLabel || this.#selection || this.getAttribute('prompt'), systemImage = this.#currentValueIcon || this.getAttribute('prompt-icon');
                     queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
                     queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
                     // morph(
@@ -1082,10 +1131,10 @@ export class PickerView extends FormAssociatedBase {
                 //udnefined
             }
         }
-        if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
-            trigger?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
+        if (this.hasAttribute('help'))
+            trigger?.setAttribute('help', this.getAttribute('help') ?? '');
         else
-            trigger?.removeAttribute(this.constructor.ATTR.TRIGGER_HELP);
+            trigger?.removeAttribute('help');
     }
     /**
      * Form participation property