@swiftwc/ui 0.0.0-dev.36 → 0.0.0-dev.37

package/generated/components/picker-view.js

@@ -1,10 +1,41 @@
 var _a;
+import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals, makeSlotchangeHandler } from '../internal/class/form-associated-base';
-import { MutationObserverSingleton } from '../internal/class/mutation-observer-singleton';
-import { $, kebabCase, onoff } from '../internal/utils';
-const pickerStyles = ['menu', 'inline', 'automatic'];
-const observers = new MutationObserverSingleton();
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { NavigationPath } from '../internal/class/navigation-path';
+import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
+import { $, debug, kebabCase, onoff } from '../internal/utils';
+const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
+const update = (path, node, overwrite = true) => {
+    if (!(path instanceof NavigationPath))
+        throw new Error('invalid view');
+    const { component, page } = path;
+    if (!component)
+        return;
+    const position = queryInsertPosition(component); //'afterend'
+    // const lookFor = 'beforebegin' === position ? 'previousElementSibling' : 'nextElementSibling'
+    if (page)
+        page.insertAdjacentElement(position, node);
+};
+const replaceList = (current, source) => {
+    const { page: oldPage, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newPage, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
+    const oldList = oldPage?.querySelector('list-view'), newList = newPage?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
+    // pre replace
+    const oldOpenedDetails = [...(oldList?.querySelectorAll('details[open]>summary') ?? [])].map((item) => item.textContent.trim());
+    // replace
+    if (oldList && newList)
+        oldList.replaceWith(newList);
+    if (oldBackBtn && newBackBtn)
+        oldBackBtn.replaceWith(newBackBtn);
+    // post replace
+    for (const label of oldOpenedDetails)
+        for (const summary of newList?.querySelectorAll('details>summary') ?? [])
+            if (summary.textContent.trim() === label) {
+                summary.parentElement?.setAttribute('open', 'open');
+                break;
+            }
+};
 export class PickerView extends FormAssociatedBase {
     static get ATTR() {
         return {
@@ -12,37 +43,182 @@ export class PickerView extends FormAssociatedBase {
             LABEL: 'label',
             PICKER_STYLE: 'picker-style',
             SELECTION: 'selection',
+            SEARCHABLE: 'searchable',
         };
     }
     static get observedAttributes() {
         return Object.values(this.ATTR);
     }
     static #templates = new Map();
+    #spawn;
+    #renderPage = (tag, searchable = false, title, node) => {
+        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');
+        if (title)
+            sv?.setAttribute('navigation-inline-title', title);
+        if (searchable) {
+            list?.style.setProperty('--list--sticky-block-size', '70px');
+            list?.insertAdjacentHTML('afterend', `<sticky-container edge="navbar" style="order: -1" padding>
+                <v-stack spacing="0" alignment="fill">
+                  <input is="search-view" placeholder="Search">
+                  <button type="button">Filters</button>
+                </v-stack>
+              </sticky-container>`);
+            const searchInput = sv?.querySelector('input[type=search]');
+            searchInput?.addEventListener('focus', (evt) => {
+                if (this.#spawn)
+                    this.dispatchEvent(new CustomEvent('picker:searchfocus', { detail: { element: this.#spawn }, bubbles: true, composed: true }));
+            });
+            searchInput?.addEventListener('blur', (evt) => {
+                if (this.#spawn)
+                    this.dispatchEvent(new CustomEvent('picker:searchblur', { detail: { element: this.#spawn }, bubbles: true, composed: true }));
+            });
+            searchInput?.addEventListener('input', (evt) => {
+                if (this.#spawn)
+                    this.dispatchEvent(new CustomEvent('picker:searchinput', { detail: { element: this.#spawn }, bubbles: true, composed: true }));
+            });
+        }
+        backBtn?.setAttribute('help', I18n.t('ButtonRole').Back);
+        backBtn?.addEventListener('click', async (evt) => {
+            evt.stopImmediatePropagation();
+            evt.preventDefault();
+            const { target } = evt;
+            if (!(target instanceof HTMLElement && target))
+                return;
+            const { component } = new NavigationPath(target)?.hydrate();
+            await startViewTransition(target, 'backwards', async () => {
+                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'))
+                        btn.addEventListener('click', this.#handlePageClick);
+                    list?.appendChild(details);
+                    break;
+                }
+                case 'OPTION': {
+                    const btn = _a.#wrapOptionTag(el);
+                    btn.addEventListener('click', this.#handlePageClick);
+                    list?.appendChild(btn);
+                    break;
+                }
+                default: {
+                    const btn = $(`<button type="button" tabindex="0"><label-view></label-view></button>`, '>1'), label = btn.querySelector(':scope>label-view');
+                    if (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 && target))
+                            return;
+                        const newPage = this.#renderPage('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);
+                        });
+                    });
+                    list?.appendChild(btn);
+                    break;
+                }
+            }
+        }
+        return body;
+    };
+    #renderList = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        switch (this.pickerStyle) {
+            case 'sheet':
+            case 'navigation-link': {
+                // label
+                const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view system-image="dots-three"></label-view>`, '>1'));
+                label.setAttribute('title', 'rtyty');
+                CleanupRegistry.unregister(this, 'trigger');
+                CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, label).on(), 'trigger');
+                this.appendChild(label);
+                // rebuild snapshot(tree)
+                if (!this.#spawn)
+                    break;
+                // rerender level 0
+                replaceList(this.#spawn, this.#renderPage('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;
+                    }
+                    replaceList(el, this.#renderPage('body-view', this.hasAttribute('searchable'), datalist.dataset.label, datalist));
+                }
+                break;
+            }
+            case 'menu': {
+                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view tabindex="0"></menu-view>`, '>1')), label = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label" system-image="dots-three"></label-view>`, '>1'));
+                label.setAttribute('title', 'rtyty');
+                for (const el of menu.querySelectorAll(':scope>:not([slot])'))
+                    el.remove();
+                _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
+                break;
+            }
+            case 'inline':
+            default: {
+                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view><section-view></section-view></list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(`<section-view></section-view>`, '>1'));
+                for (const el of section.querySelectorAll(':scope>:not([slot])'))
+                    el.remove(); // section.innerHTML = ''
+                const label = this.getAttribute(this.constructor.ATTR.LABEL);
+                if (label) {
+                    const el = $(`<label-view></label-view>`, '>1');
+                    el.setAttribute('title', label);
+                    section.insertAdjacentElement('beforeend', el);
+                }
+                _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [])].filter((el) => el.matches('option')), section);
+                break;
+            }
+        }
+    };
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #lastRenderedStyle; //string | null
     #shadowRoot;
     #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    #observers = new MutationObserverSet(this.#renderList);
     #customValidity = '';
-    // #validitiesSlot?: HTMLSlotElement
-    // #datalistSlot?: HTMLSlotElement
-    // #tagSlot?: HTMLSlotElement
-    #trackedElements = new Set();
     #selection = '';
     get #internals() {
         return getInternals(this);
     }
     get template() {
-        // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE) ?? ''
         if (!_a.#templates.has(this.pickerStyle))
             switch (this.pickerStyle) {
-                // case 'inline':
-                //   template.innerHTML = `
-                //     <list-view frame-width="infinity" part="root inline-form">
-                //       <slot></slot>
-                //     </list-view>
-                //   `
-                //   break
+                case 'sheet':
+                case 'navigation-link':
+                    _a.#templates.set(this.pickerStyle, $(String.raw `
+                <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;
                 case 'menu':
-                    // template.innerHTML = `<slot name="options"></slot><slot></slot>`
                     _a.#templates.set(this.pickerStyle, $(String.raw `
                 <label part="root picker-stack">
             <div part="root picker-label-stack">
@@ -51,8 +227,7 @@ export class PickerView extends FormAssociatedBase {
             <div part="root picker-input-stack">
               <slot></slot>
             </div>
-            <slot name="options" hidden></slot>
-            <slot name="tag" hidden></slot>
+            <slot name="list" hidden></slot>
             <slot name="validity-options" hidden></slot>
           </label>
                 `));
@@ -97,7 +272,7 @@ export class PickerView extends FormAssociatedBase {
                 //     <option value="0" label="0%"></option>
                 //   </datalist>
                 // </div>
-                // <slot name="options" hidden></slot>
+                // <slot name="list" hidden></slot>
                 // </label>`,
                 //       })
                 //     )
@@ -112,8 +287,7 @@ export class PickerView extends FormAssociatedBase {
           <div part="root picker-input-stack">
             <slot></slot>
           </div>
-          <slot name="options" hidden></slot>
-          <slot name="tag" hidden></slot>
+          <slot name="list" hidden></slot>
           <slot name="validity-options" hidden></slot>
         </label>`));
                     break;
@@ -123,10 +297,12 @@ export class PickerView extends FormAssociatedBase {
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // this.#render() // Snapshot.waitReady.then(this.#render.bind(this))
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff('localechange', () => {
+            this.#renderList([]);
+        }, I18n.on).on());
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
         if (!this.hasAttribute(this.constructor.ATTR.PICKER_STYLE))
             this.#render(); // will be picked up by attr-change!
@@ -137,12 +313,13 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
-        observers.clearObservationsSet(this.#trackedElements);
+        this.#validityObservers.unobserveAll();
+        this.#observers.unobserveAll();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case this.constructor.ATTR.PLACEHOLDER:
                 this.#reflectPlaceholder(newValue);
@@ -155,7 +332,11 @@ export class PickerView extends FormAssociatedBase {
                 if (oldValue === newValue)
                     break;
                 this.#render();
-                // this.#sendValueToForm()
+                break;
+            case this.constructor.ATTR.SEARCHABLE:
+                if (oldValue === newValue)
+                    break;
+                this.#renderList([]);
                 break;
             case this.constructor.ATTR.SELECTION:
                 // nothing happens
@@ -168,7 +349,7 @@ export class PickerView extends FormAssociatedBase {
             : 'automatic';
     }
     #render() {
-        console.debug(`${_a.name} ⚡️ render (${this.pickerStyle})`);
+        debug(`${_a.name} ⚡️ render (${this.pickerStyle})`);
         if (!this.isConnected)
             return;
         // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)
@@ -184,39 +365,11 @@ export class PickerView extends FormAssociatedBase {
             this.#slots = new Map();
         }, 'slots');
         CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#slots?.get('validity-options')).on(), 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
         CleanupRegistry.unregister(this, 'datalist'); //off1()
-        CleanupRegistry.register(this, onoff('slotchange', this.#handleSlotchange, this.#slots?.get('options')).on(), 'datalist');
-        CleanupRegistry.unregister(this, 'tags'); //off2()
-        CleanupRegistry.register(this, onoff('slotchange', this.#handleSlotchange, this.#slots?.get('tag')).on(), 'tags');
-        // if (0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length) this.#handleTagMutation()
-        // if (0 < (this.#slots?.get('tag')?.assignedElements({ flatten: true }) ?? []).length) this.#handleTagMutation()
-        //this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)) {
-        switch (this.pickerStyle
-        // case 'menu':
-        //   // if (0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length) this.#handleMenuDatalistMutation()
-        //   break
-        // case 'gg':
-        //   // reattach input listener
-        //   const input = this.#shadowRoot.querySelector('input')
-        //   if (input) {
-        //     input.addEventListener('input', () => {
-        //       this.#internals!.setFormValue(input.value)
-        //     })
-        //     // restore placeholder if set
-        //     const placeholder = this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER)
-        //     if (placeholder) input.setAttribute('placeholder', placeholder)
-        //   }
-        //   // restore label if set
-        //   const label = this.getAttribute((this.constructor as typeof PickerView).ATTR.LABEL)
-        //   if (label) this.#reflectLabel(label)
-        //   break
-        // case 'inline':
-        // default:
-        //   // if (0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length) this.#handleInlineDatalistMutation()
-        //   break
-        ) {
-        }
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleListSlotchange, this.#slots?.get('list')).on(), 'datalist');
+        // switch (this.pickerStyle) {
+        // }
     }
     #sendValueToForm = (dispatchEvent = true) => {
         // input.value has already been updated/synced !!
@@ -237,116 +390,113 @@ export class PickerView extends FormAssociatedBase {
         if (dispatchEvent)
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
     };
-    #handleClick(evt) {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target instanceof HTMLElement && evt.target;
-        if (!target)
+    #handleTriggerClick = async ({ type, target }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement && target))
+            return;
+        this.#spawn?.remove?.();
+        const level0 = this.#renderPage('sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', this.hasAttribute('searchable'), this.getAttribute('label'));
+        if (!level0)
             return;
-        const btn = target?.closest('button');
+        const path = new NavigationPath(target)?.hydrate();
+        await startViewTransition(target, 'forwards', async () => {
+            this.#spawn = level0;
+            update(path, level0);
+        });
+    };
+    #handlePageClick = async (evt) => {
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        evt.stopImmediatePropagation();
+        evt.preventDefault();
+        const { target } = evt;
+        if (!(target instanceof HTMLElement && target))
+            return;
+        const btn = target.closest('button');
         if (!btn)
             return;
-        if (btn.hasAttribute('tag')) {
-            this.#selection = btn.getAttribute('tag') ?? ''; //return this.dispatchEvent(new CustomEvent('selection', { detail: { tag: btn.getAttribute('tag') }, bubbles: true, composed: true }))
-        }
-        else {
-            this.#selection = btn.textContent; //this.dispatchEvent(new CustomEvent('selection', { detail: { tag: btn.textContent }, bubbles: true, composed: true }))
-        }
+        const proceed = () => {
+            this.#spawn?.remove();
+            this.#selection = btn.getAttribute('value') ?? btn.textContent?.trim() ?? '';
+            this.#sendValueToForm();
+        };
+        const { body } = new NavigationPath(this.#spawn)?.hydrate();
+        if (!body)
+            return proceed();
+        await startViewTransition(body, 'backwards', async () => {
+            proceed();
+        });
+    };
+    #handleClick({ type, target }) {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement && target))
+            return;
+        const btn = target.closest('button');
+        if (!btn)
+            return;
+        this.#selection = btn.getAttribute('value') ?? btn.textContent?.trim() ?? '';
         this.#sendValueToForm();
     }
-    #handleSlotchange = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target instanceof HTMLSlotElement && evt.target;
-        if (!slot)
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement && slot))
             return;
-        const assigned = slot.assignedElements({ flatten: true });
-        observers.syncObservations(this.#trackedElements, assigned, this.#handleTagMutation);
-        // for (const el of this.#trackedElements)
-        //   if (!assigned.includes(el)) {
-        //     observers.unobserve(el)
-        //     this.#trackedElements.delete(el)
-        //   }
-        // for (const el of assigned) {
-        //   if (!this.#trackedElements.has(el))
-        //     observers.observe(el, this.#handleTagMutation, {
-        //       attributes: true,
-        //       characterData: true,
-        //       subtree: true,
-        //       childList: true,
-        //       // attributeFilter: ['value', 'label'],
-        //     })
-        //   this.#trackedElements.add(el)
-        // }
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
         if (0 < assigned.length)
-            this.#handleTagMutation();
+            this.#renderValidityMsgs([]);
     };
-    static wrapTag(node, slotName) {
-        const btn = $(`<button type="button" tabindex="0"></button>`, '>1'); //document.createElement('button')
-        // btn.type = 'button'
-        // btn.tabIndex = 0
-        switch (slotName) {
-            case 'tag':
-                if (node.hasAttribute('tag'))
-                    btn.setAttribute('tag', node.getAttribute('tag') ?? '');
-                btn.appendChild(node.cloneNode(true));
-                break;
-            case 'options':
-            default:
-                if (node.hasAttribute('value'))
-                    btn.setAttribute('tag', node.getAttribute('value') ?? '');
-                const label = $(`<label-view></label-view>`, '>1'); //document.createElement('label-view')
-                if (node.hasAttribute('label'))
-                    label.setAttribute('title', node.getAttribute('label') ?? '');
-                btn.appendChild(label);
-                break;
-        }
+    #handleListSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement && slot))
+            return;
+        const assigned = slot.assignedElements();
+        this.#observers.syncObservations(assigned);
+        if (0 < assigned.length)
+            this.#renderList([]);
+    };
+    static #wrapOptionTag(node) {
+        const btn = $(`<button type="button" tabindex="0"></button>`, '>1');
+        btn.setAttribute('value', node.getAttribute('value') ?? node.textContent?.trim() ?? '');
+        const label = $(`<label-view></label-view>`, '>1');
+        label.setAttribute('title', node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim() ?? '');
+        btn.appendChild(label);
         return btn;
     }
-    #handleTagMutation = (entry) => {
-        console.debug(`${_a.name} ⚡️ mutation`);
-        const sourceSlot = 0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length ? this.#slots?.get('options') : this.#slots?.get('tag');
-        // switch (this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)) {
-        switch (this.pickerStyle) {
-            case 'menu':
-                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view tabindex="0"></menu-view>`, '>1'));
-                menu.innerHTML = `<label-view slot="label" system-image="dots-three" title="rtyty"></label-view>`;
-                for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? [])
-                    menu.insertAdjacentElement('beforeend', _a.wrapTag(el, sourceSlot?.name));
-                // let possibleMv = this.#slot?.assignedElements({ flatten: true })[0]
-                // if ('MENU-VIEW' !== possibleMv?.tagName) possibleMv = this.appendChild(document.createElement('menu-view'))
-                // possibleMv.innerHTML = `<label-view slot="label" system-image="dots-three" title="rtyty"></label-view>`
-                // for (const el of PickerView.sourceNodes(sourceSlot) ?? []) possibleMv.insertAdjacentElement('beforeend', PickerView.wrapTag(el, sourceSlot?.name))
-                break;
-            case 'inline':
-            default:
-                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view><section-view></section-view></list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(`<section-view></section-view>`, '>1'));
-                const label = this.getAttribute(this.constructor.ATTR.LABEL);
-                // if (label) section.setAttribute('header', label)
-                if (label) {
-                    const el = $(`<label-view></label-view>`, '>1');
-                    el.setAttribute('title', label);
-                    section.insertAdjacentElement('beforeend', el);
+    static #wrapOptgroupTag(node) {
+        const labelT = `<label-view></label-view>`, summaryT = `<summary>${labelT}</summary>`;
+        const group = $(`<details is="disclosure-group">${summaryT}</details>`, '>1'), summary = group.querySelector(':scope>summary') ?? 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') ?? '');
+        return group;
+    }
+    static #reflectButtons(nodes, container) {
+        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') ?? '');
+                    _a.#reflectButtons([...node.children], group);
+                    container.appendChild(group);
+                    break;
                 }
-                else
-                    section.innerHTML = '';
-                for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? [])
-                    section.insertAdjacentElement('beforeend', _a.wrapTag(el, sourceSlot?.name));
-                // let possibleLv = this.#slot?.assignedElements({ flatten: true })[0]
-                // if ('LIST-VIEW' !== possibleLv?.tagName) possibleLv = this.appendChild(document.createElement('list-view'))
-                // const sv = document.createElement('section-view')
-                // sv.setAttribute('header', 'section-header')
-                // possibleLv.appendChild(sv)
-                // for (const el of PickerView.sourceNodes(sourceSlot) ?? []) sv.insertAdjacentElement('beforeend', PickerView.wrapTag(el, sourceSlot?.name))
-                // for (const el of this.querySelectorAll(':scope>:not([slot])')) el.remove()
-                // for (const el of PickerView.sourceNodes(sourceSlot) ?? []) {
-                //   const btn = document.createElement('button')
-                //   btn.type = 'button'
-                //   btn.tabIndex = 0
-                //   btn.appendChild(PickerView.wrapTag(el, sourceSlot?.name))
-                //   this.insertAdjacentElement('beforeend', btn)
-                // }
-                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;
+                }
+            }
+    }
     #reflectPlaceholder(value) {
         const input = this.#shadowRoot.querySelector('input');
         if (input) {
@@ -357,17 +507,6 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     #reflectLabel(value) {
-        // switch (this.getAttribute('picker-style')) {
-        //   case 'menu':
-        //     this.#slot!.assignedElements({ flatten: true })[0].setAttribute('label', value ?? '')
-        //     // if (!mv) {
-        //     //   mv = document.createElement('label-view')
-        //     //   mv.slot = 'label'
-        //     //   this.append(mv)
-        //     // }
-        //     // mv.textContent = newValue //el2.replaceChildren(escapeHTMLPolicy.createHTML(newValue))
-        //     break
-        //   default:
         let label = this.querySelector(':scope>[slot=label]');
         if (value) {
             label ??= this.appendChild($(`<span slot="label"></span>`, '>1'));
@@ -375,25 +514,7 @@ export class PickerView extends FormAssociatedBase {
         }
         else
             label?.remove();
-        this.#handleTagMutation();
-        // const el =
-        //   (this.#labelSlot?.assignedElements({ flatten: true })[0] as HTMLElement) ??
-        //   (() => {
-        //     const el = document.createElement('span')
-        //     el.slot = 'label'
-        //     return this.appendChild(el)
-        //   })()
-        // el.textContent = value ?? '' // el.replaceChildren(escapeHTMLPolicy.createHTML(newValue))
-        // break
-        // }
-        // const assigned = this.#labelSlot?.assignedElements({ flatten: true }) as HTMLElement[] | undefined
-        // let el = assigned?.[0]
-        // if (!el) {
-        //   el = document.createElement('span')
-        //   el.slot = 'label'
-        //   this.append(el)
-        // }
-        // el.textContent = value ?? ''
+        this.#renderList([]);
     }
     // Optional: form participation properties
     get name() {
@@ -428,7 +549,7 @@ export class PickerView extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor);
     };
     setCustomValidity = (message) => {