@swiftwc/ui 0.0.0-dev.99 → 1.0.0-canary.0

package/generated/components/picker-view.js

@@ -1,1153 +0,0 @@
-var _a;
-import { I18n } from '../i18n';
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-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 { $, devFlags, kebabCase, onoff } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html, render } from '../tpl';
-const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
-const update = (path, node, overwrite = true) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: update`);
-    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 reflectSpawnedPage = (current, source) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: reflectSpawnedPage`);
-    const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
-    const oldList = oldSv?.querySelector('list-view'), newList = newSv?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
-    // pre replace list (always exists)
-    const oldOpenedDetails = [...(oldList?.querySelectorAll('list-view details[open]>summary') ?? [])].map((item) => item.textContent.trim());
-    // replace list (always exists)
-    if (oldList && newList)
-        oldList.replaceWith(newList);
-    // post replace list (always exists)
-    for (const label of oldOpenedDetails)
-        for (const summary of newList?.querySelectorAll('list-view details>summary') ?? [])
-            if (summary.textContent.trim() === label) {
-                summary.parentElement?.setAttribute('open', 'open');
-                break;
-            }
-    // replace backbtns (always exist)
-    if (oldBackBtn && newBackBtn)
-        oldBackBtn.replaceWith(newBackBtn);
-    // overwrite navtitle (always exists)
-    oldSv?.setAttribute('navigation-inline-title', newSv?.getAttribute('navigation-inline-title') ?? '');
-    // replace search (if exists)
-    oldList?.style.setProperty('--list--sticky-block-size', newList?.style.getPropertyValue('--list--sticky-block-size') ?? '');
-    // replace search (if exists)
-    const oldSearch = oldSv?.querySelector('sticky-container'), newSearch = newSv?.querySelector('sticky-container');
-    // if already exists, DO NOTHING dont mess up the input element
-    if (newSearch) {
-        if (!oldSearch)
-            oldSv?.insertAdjacentHTML('afterend', `<sticky-container edge="navbar" style="order: -1" padding>
-                <v-stack spacing="0" alignment="fill">
-                  <input is="search-view" placeholder="Search">
-                  <!--<button type="button">Filters</button>-->
-                </v-stack>
-              </sticky-container>`);
-    }
-    else
-        oldSearch?.remove();
-};
-const extractTag = (node) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: extractTag`);
-    return node instanceof HTMLOptionElement ? (((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '') : (node.value ?? '');
-}, extractLabel = (node) => {
-    if (devFlags.debug)
-        console.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) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: extractIcon`);
-    // return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null)
-    if (node instanceof Element)
-        return node.getAttribute('data-system-image');
-    else
-        return node.systemImage ?? null;
-}, extractSubtitle = (node) => {
-    if (devFlags.debug)
-        console.debug(`PickerView: 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]);
-/**
- * @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
- *
- * @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);
-    }
-    static #templates = new Map();
-    #spawn;
-    #makeGroupClickHandler(el, groupId) {
-        return async (evt) => {
-            evt.stopImmediatePropagation();
-            evt.preventDefault();
-            const { target } = evt;
-            if (!(target instanceof HTMLElement))
-                return;
-            const newPage = this.#spawnPage(el instanceof Element ? Array.from(el.children) : el.children, 'body-view', groupId, this.hasAttribute('searchable'), extractLabel(el));
-            if (!newPage)
-                return;
-            newPage.dataset.groupId = groupId; // <-- tag the spawned page
-            const path = new NavigationPath(target)?.hydrate();
-            await startViewTransition(target, 'forwards', async () => {
-                update(path, newPage);
-                this.#reflectSelectionOnButtons();
-            });
-        };
-    }
-    #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #spawnPage`);
-        const body = $(html `<${'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="${'sheet-view' === tag ? 'x' : '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'); // FIXME: compoennt is=search-view??
-            searchInput?.addEventListener('focus', ({ target }) => {
-                if (this.#spawn)
-                    this.dispatchEvent(new CustomEvent('picker:searchfocus', {
-                        detail: { element: this.#spawn, search: target instanceof HTMLInputElement ? target.value : '' },
-                        bubbles: true,
-                        composed: true,
-                    }));
-            });
-            searchInput?.addEventListener('blur', ({ target }) => {
-                if (this.#spawn)
-                    this.dispatchEvent(new CustomEvent('picker:searchblur', {
-                        detail: { element: this.#spawn, search: target instanceof HTMLInputElement ? target.value : '' },
-                        bubbles: true,
-                        composed: true,
-                    }));
-            });
-            searchInput?.addEventListener('input', ({ target }) => {
-                if (this.#spawn)
-                    this.dispatchEvent(new CustomEvent('picker:searchinput', {
-                        detail: { element: this.#spawn, search: target instanceof HTMLInputElement ? target.value : '' },
-                        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))
-                return;
-            const { component } = new NavigationPath(target)?.hydrate();
-            await startViewTransition(target, 'backwards', async () => {
-                component?.remove();
-            });
-        });
-        for (const [i, el] of elements.entries()) {
-            if (el instanceof Element)
-                switch (el.tagName) {
-                    case 'OPTGROUP': {
-                        const group = _a.#wrapOptgroupTag(el);
-                        _a.#reflectButtons([...el.children], group);
-                        for (const btn of group.querySelectorAll(':scope>button'))
-                            btn.addEventListener('click', this.#handlePageBtnClick);
-                        list?.appendChild(group);
-                        break;
-                    }
-                    case 'OPTION': {
-                        const btn = _a.#wrapOptionTag(el);
-                        btn.addEventListener('click', this.#handlePageBtnClick);
-                        list?.appendChild(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 = _a.#wrapOptgroupTag(el);
-                        _a.#reflectButtons(el.children, group);
-                        for (const btn of group.querySelectorAll(':scope>button'))
-                            btn.addEventListener('click', this.#handlePageBtnClick);
-                        list?.appendChild(group);
-                    }
-                    else {
-                        const btn = _a.#wrapOptionSpawnTag(el);
-                        const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
-                        btn.dataset.groupId = groupId;
-                        btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
-                        list?.appendChild(btn);
-                    }
-                else {
-                    const btn = _a.#wrapOptionTag(el);
-                    btn.addEventListener('click', this.#handlePageBtnClick);
-                    list?.appendChild(btn);
-                }
-            }
-        }
-        return body;
-    };
-    #resyncSpawnedPages = (freshRoot) => {
-        if (!this.#spawn)
-            return;
-        const groupMap = indexGroups(freshRoot);
-        for (const el of this.#spawn.querySelectorAll('body-view')) {
-            const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
-            if (0 >= depth)
-                continue;
-            const groupId = el.dataset.groupId;
-            const source = groupId ? groupMap.get(groupId) : undefined;
-            if (!source) {
-                el.remove();
-                continue;
-            }
-            const children = source instanceof Element ? Array.from(source.children) : source.children;
-            const title = source instanceof Element ? extractLabel(source) : (source.title ?? null);
-            const newPage = this.#spawnPage(children, 'body-view', groupId, this.hasAttribute('searchable'), title);
-            newPage.dataset.groupId = groupId;
-            reflectSpawnedPage(el, newPage);
-        }
-    };
-    #renderButtons(input) {
-        if (devFlags.debug)
-            console.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 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;
-            }
-        }
-        switch (this.pickerStyle) {
-            case 'sheet':
-            case 'navigation-link': {
-                // current value label only
-                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view></label-view>`, '>1'));
-                // reset state
-                // if (currentValueLabel) {
-                //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
-                //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
-                // }
-                // clear all siblings
-                for (const el of this.querySelectorAll(':scope>:not([slot])'))
-                    if (currentValueLabel !== el)
-                        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) ?? '');
-                // rebuild snapshot(tree)
-                if (!this.#spawn)
-                    break;
-                // rerender level 0
-                reflectSpawnedPage(this.#spawn, this.#spawnPage(input.source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'body-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
-                this.#resyncSpawnedPages(input.source);
-                // // FIXME:
-                // for (const el of this.#spawn.querySelectorAll<HTMLElement>('body-view')) {
-                //   const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn)
-                //   if (0 >= depth) continue
-                //   const datalist = this.querySelector<HTMLElement>(`:scope>${Array.from({ length: depth }, () => 'datalist').join('>')}`)
-                //   if (!datalist) {
-                //     el.remove()
-                //     break
-                //   }
-                //   reflectSpawnedElement(el, this.#spawnPage(Array.from(datalist.children), 'body-view', this.hasAttribute('searchable'), datalist.dataset.label))
-                // }
-                break;
-            }
-            case 'menu': {
-                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(html `<menu-view></menu-view>`, '>1'));
-                // reset state
-                menu.innerHTML = '';
-                menu.tabIndex = 0;
-                // clear all siblings
-                for (const el of this.querySelectorAll(':scope>:not([slot])'))
-                    if (menu !== el)
-                        el.remove();
-                const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(html `<label-view slot="label"></label-view>`, '>1'));
-                // if (currentValueLabel) {
-                //   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);
-                break;
-            }
-            case 'inline':
-            default: {
-                const sectionTpl = html `<section-view></section-view>`;
-                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(html `<list-view>${sectionTpl}</list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(sectionTpl, '>1'));
-                // reset state
-                section.innerHTML = '';
-                // clear all siblings
-                for (const el of this.querySelectorAll(':scope>:not([slot])'))
-                    if (inlineList !== el)
-                        el.remove();
-                // add label as a plain element
-                const value = this.getAttribute(this.constructor.ATTR.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');
-                    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);
-                else
-                    _a.#reflectButtons(input.source.filter((el) => el.matches('option')), section);
-                break;
-            }
-        }
-        this.#reflectSelectionOnButtons();
-        this.#reflectSelectionOnCurrentValueLabel();
-    }
-    #renderDictionary = (dictionary) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
-        this.#renderButtons({ mode: 'dictionary', source: dictionary });
-    };
-    #renderSlotted = (entries) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ mutation`);
-        this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] });
-    };
-    #renderValidityMsgs = (entries) => {
-        if (devFlags.debug)
-            console.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.#renderSlotted);
-    #customValidity = '';
-    #selection = '';
-    get selection() {
-        return this.#selection;
-    }
-    set selection(v) {
-        if (Object.is(this.#selection, v))
-            return;
-        this.#selection = v;
-        this.#reflectSelectionOnButtons();
-        this.#reflectSelectionOnCurrentValueLabel();
-        this.#sendValueToForm();
-    }
-    #lastRenderedLabelMap = {};
-    #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]);
-    }
-    get #currentValueIcon() {
-        return (this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_ICON) ?? '') || this.#lastRenderedIconMap[this.#selection];
-    }
-    get #internals() {
-        return getInternals(this);
-    }
-    get template() {
-        if (!_a.#templates.has(this.pickerStyle))
-            switch (this.pickerStyle) {
-                case 'sheet':
-                case 'navigation-link':
-                    _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;
-                case 'menu':
-                    _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
-                    // 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 'gg':
-                //     PickerView.#templates.set(
-                //       style,
-                //       Object.assign(document.createElement('template'), {
-                //         innerHTML: String.raw`
-                // <label part="root text-field-stack">
-                // <div part="root text-field-label-stack">
-                //   <slot name="label"></slot>
-                // </div>
-                // <div part="root text-field-input-stack">
-                //   <input type="text" part="root input text-field-form-input" list="tickmarks">
-                //   <datalist id="tickmarks">
-                //     <option value="0" label="0%"></option>
-                //   </datalist>
-                // </div>
-                // <slot name="list" hidden></slot>
-                // </label>`,
-                //       })
-                //     )
-                //     break
-                case 'inline':
-                default:
-                    _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;
-            }
-        return _a.#templates.get(this.pickerStyle);
-    }
-    constructor() {
-        super();
-        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case this.constructor.ATTR.PLACEHOLDER:
-            case this.constructor.ATTR.PLACEHOLDER_ICON:
-                if (oldValue === newValue)
-                    break;
-                this.#reflectSelectionOnCurrentValueLabel(); //this.#reflectPlaceholder(newValue)
-                break;
-            case this.constructor.ATTR.LABEL:
-                this.#reflectLabel(newValue);
-                // this.#sendValueToForm()
-                break;
-            case this.constructor.ATTR.PICKER_STYLE:
-                if (oldValue === newValue)
-                    break;
-                this.#render();
-                break;
-            case this.constructor.ATTR.SEARCHABLE:
-                if (oldValue === newValue)
-                    break;
-                this.#renderSlotted([]);
-                break;
-            case this.constructor.ATTR.CURRENT_VALUE_LABEL:
-            case this.constructor.ATTR.CURRENT_VALUE_ICON:
-                // if (oldValue === newValue) break
-                this.#reflectSelectionOnCurrentValueLabel();
-                break;
-            case this.constructor.ATTR.TRIGGER_HELP:
-                // if (oldValue === newValue) break
-                this.#reflectTriggerHelp();
-                break;
-            case this.constructor.ATTR.DICTIONARY:
-                if (oldValue === newValue)
-                    break;
-                this.#renderDictionary(parseDictionary(newValue));
-                break;
-            case this.constructor.ATTR.REQUIRED:
-                if (oldValue === newValue)
-                    break;
-                this.#sendValueToForm(false);
-                break;
-            case this.constructor.ATTR.SELECTION:
-                // nothing happens
-                break;
-        }
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-        this.#validityObservers.unobserveAll();
-        this.#observers.unobserveAll();
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff('localechange', () => {
-            this.#renderSlotted([]);
-        }, I18n.on).on());
-        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
-        if (!this.hasAttribute(this.constructor.ATTR.PICKER_STYLE))
-            this.#render(); // skip if already rendered by attr-change during upgrade!
-        // finally
-        if (!this.hasAttribute('selection'))
-            return;
-        this.#selection = this.getAttribute('selection') ?? '';
-        this.#sendValueToForm(false);
-    }
-    get pickerStyle() {
-        const attr = this.constructor.ATTR.PICKER_STYLE;
-        return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
-    }
-    #render() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
-        // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)
-        if (this.#lastRenderedStyle === this.pickerStyle)
-            return; // skip if already applied
-        this.#lastRenderedStyle = this.pickerStyle;
-        // clear shadow DOM
-        this.#shadowRoot.replaceChildren(document.importNode(this.template, true));
-        CleanupRegistry.unregister(this, 'slots');
-        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
-            this.#slots?.set(slot.name, slot);
-        CleanupRegistry.register(this, () => {
-            this.#slots = new Map();
-        }, 'slots');
-        CleanupRegistry.unregister(this, '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.#handleListSlotchange, this.#slots?.get('list')).on(), 'datalist');
-        // #renderSlotted should run automatically now by slotchange initial event
-        // switch (this.pickerStyle) {
-        // }
-    }
-    #sendValueToForm = (dispatchEvent = true) => {
-        // input.value has already been updated/synced !!
-        if (this.matches(':disabled'))
-            return this.setValidity({});
-        if (this.hasAttribute('required')) {
-            if (!this.#selection) {
-                this.setValidity({ badInput: true }, 'invalid-selection');
-            }
-            else
-                this.setValidity({});
-        }
-        else
-            this.setValidity({});
-        const entries = new FormData();
-        entries.append(this.name, this.#selection);
-        this.#internals.setFormValue(entries);
-        if (dispatchEvent)
-            this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
-    };
-    #handleTriggerClick = async ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        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'));
-        if (!level0)
-            return;
-        const path = new NavigationPath(target)?.hydrate();
-        await startViewTransition(target, 'forwards', async () => {
-            this.#spawn = level0;
-            update(path, level0);
-            this.#reflectSelectionOnButtons();
-        });
-    };
-    #handlePageBtnClick = async (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        evt.stopImmediatePropagation();
-        evt.preventDefault();
-        const { currentTarget: btn } = evt;
-        if (!(btn instanceof HTMLElement))
-            return;
-        // const btn = target.closest('button')
-        // if (!btn) return
-        const proceed = () => {
-            this.#spawn?.remove();
-            this.#selection = btn.getAttribute('value') ?? '';
-            this.#reflectSelectionOnButtons();
-            this.#reflectSelectionOnCurrentValueLabel();
-            this.#sendValueToForm();
-        };
-        const { body } = new NavigationPath(this.#spawn)?.hydrate();
-        if (!body)
-            return proceed();
-        await startViewTransition(body, 'backwards', async () => {
-            proceed();
-        });
-    };
-    #handleClick({ type, target }) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement))
-            return;
-        const btn = target.closest('button');
-        if (!btn)
-            return;
-        this.#selection = btn.getAttribute('value') ?? '';
-        this.#reflectSelectionOnButtons();
-        this.#reflectSelectionOnCurrentValueLabel();
-        this.#sendValueToForm();
-    }
-    #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement))
-            return;
-        const assigned = slot.assignedElements();
-        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
-        // if (0 < assigned.length)
-        this.#renderValidityMsgs([]);
-    };
-    #handleListSlotchange = ({ type, target: slot }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement))
-            return;
-        const assigned = slot.assignedElements();
-        this.#observers.syncObservations(assigned);
-        // if (0 < assigned.length)
-        this.#renderSlotted([]);
-    };
-    static #wrapOptionSpawnTag(node) {
-        if (devFlags.debug)
-            console.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>
-          <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
-            ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
-            <v-stack spacing="3" alignment="fill">
-              <label-view title="${title}"></label-view>
-              ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
-            </v-stack>
-          </h-stack>
-        </h-stack>
-      </button>`, mount);
-        // const btn = $<HTMLButtonElement>(
-        //     `<button type="button" tabindex="0" navigation-link><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></button>`,
-        //     '>1'
-        //   ),
-        //   hStack = btn.querySelector<LabelView>(':scope>h-stack') ?? undefined
-        // renderLabel(
-        //   ':scope>label-view:nth-child(2)',
-        //   `<label-view><span></span></label-view>`,
-        //   hStack,
-        //   extractLabelFromGroup(node as HTMLDataListElement),
-        //   extractImgFromGroup(node as HTMLDataListElement)
-        // )
-        // // label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
-        // // if (label) {
-        // // const lbl = extractLabelFromGroup(node as HTMLDataListElement),
-        // //         img =extractImgFromGroup(node as HTMLDataListElement)
-        // //         if(lbl)  renderLabelTitle(label, node.dataset.label) //label?.setAttribute('title', el.dataset.label)
-        // // }
-        return mount.firstElementChild; //btn
-    }
-    static #wrapOptionTag(node) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #wrapOptionTag`);
-        const tag = extractTag(node), title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
-        const mount = document.createElement('div');
-        render(html `<button type="button" tabindex="0" value="${tag}">
-        <h-stack distribution="leading" template="auto spacer">
-          <label-view data-role="check">
-            <image-view slot="icon" system-name="check"></image-view>
-          </label-view>
-          <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
-            ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
-            <v-stack spacing="3" alignment="fill">
-              <label-view title="${title}"></label-view>
-              ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
-            </v-stack>
-          </h-stack>
-        </h-stack>
-      </button>`, mount);
-        // const btn = $(
-        //     `<button type="button" tabindex="0"><h-stack distribution="leading" template="auto spacer"><label-view data-role="check"><image-view slot="icon" system-name="check"></image-view></label-view></h-stack></button>`,
-        //     '>1'
-        //   ),
-        //   hStack = btn.querySelector<HTMLElement>(':scope>h-stack')
-        // // chevron = hStack?.querySelector<HTMLElement>(':scope>label-view')
-        // btn.setAttribute('value', extractTagFromOption(node))
-        // // if (selection !== btn.getAttribute('value')) chevron?.style.setProperty('visibility', 'hidden')
-        // const label = $<LabelView>(`<label-view></label-view>`, '>1')
-        // renderLabelTitle(label, extractLabel(node)) // label.querySelector('span')!.textContent = extractCurrentValueFromOption(node) //label.setAttribute('title', extractCurrentValueFromOption(node))
-        // renderLabelIcon(label, extractIcon(node))
-        // hStack?.appendChild(label)
-        return mount.firstElementChild; //btn
-    }
-    static #wrapOptgroupTag(node) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #wrapOptgroupTag`);
-        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
-        const mount = document.createElement('div');
-        render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
-        <summary>
-          <h-stack distribution="leading" template="auto spacer">
-            <label-view data-role="check" style="visibility: hidden">
-              <image-view slot="icon" system-name="check"></image-view>
-            </label-view>
-            <h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
-              ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
-              <v-stack spacing="3" alignment="fill">
-                <label-view title="${title}"></label-view>
-                ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
-              </v-stack>
-            </h-stack>
-          </h-stack>
-        </summary>
-      </details>`, mount);
-        return mount.firstElementChild;
-        // const labelT = `<label-view><span></span></label-view>`,
-        //   summaryT = `<summary><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view>${labelT}</h-stack></summary>`
-        // const group = $(`<details is="disclosure-group" disclosure-style="marker-trailing">${summaryT}</details>`, '>1'), // NOTE: already applied, here it covers spawned sheets
-        //   hStack = group.querySelector(':scope>summary>h-stack') ?? undefined // ?? group.appendChild($(summaryT, '>1'))
-        // //   summaryLabel = summary.querySelector(':scope>label-view') ?? summary.appendChild($(labelT, '>1'))
-        // // if (node.hasAttribute('label')) summaryLabel.setAttribute('title', node.getAttribute('label') ?? '')
-        // // if (node.hasAttribute('data-system-image')) summaryLabel.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
-        // renderLabel(':scope>label-view:nth-child(2)', labelT, hStack, extractLabel(node), extractIcon(node))
-        // return group
-    }
-    // static #reflectButtons(nodes: Element[], container: Element): void
-    // static #reflectButtons(nodes: Dictionary, container: Element): void
-    static #reflectButtons(nodes, container) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectButtons`);
-        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);
-                        container.appendChild(group);
-                        break;
-                    }
-                    case 'OPTGROUP': {
-                        const group = _a.#wrapOptgroupTag(node);
-                        _a.#reflectButtons([...node.children], group);
-                        container.appendChild(group);
-                        break;
-                    }
-                    case 'OPTION':
-                    default: {
-                        container.appendChild(_a.#wrapOptionTag(node));
-                        break;
-                    }
-                }
-            else {
-                if (node.children.length)
-                    if (allLeaves(node)) {
-                        const group = _a.#wrapOptgroupTag(node);
-                        _a.#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);
-                        container.appendChild(group);
-                    }
-                else
-                    container.appendChild(_a.#wrapOptionTag(node));
-            }
-    }
-    // #reflectPlaceholder(value: string | null) {
-    //   if (devFlags.debug) console.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)
-    // }
-    // }
-    #reflectLabel(value) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectLabel`);
-        queryMorph('[slot=label]', html `<label-view slot="label">${value ? html `<span>${value}</span>` : null}</label-view>`, this);
-        this.#renderSlotted([]);
-    }
-    #reflectSelectionOnButtons() {
-        if (devFlags.debug)
-            console.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 syncButtons = (root) => {
-                // 1. plain value buttons — unchanged
-                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
-                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');
-                }
-                // 3. nav-link buttons — resolved by groupId, same map used for resync
-                for (const btn of root.querySelectorAll('button[navigation-link]:not([value])')) {
-                    const source = btn.dataset.groupId ? groupMap.get(btn.dataset.groupId) : undefined;
-                    const hasSelectedDescendant = source ? groupContainsSelection(source) : false;
-                    btn.querySelector('label-view[data-role="check"]')?.style.setProperty('visibility', hasSelectedDescendant ? 'visible' : 'hidden');
-                }
-            };
-            syncButtons(this);
-            if (this.#spawn)
-                syncButtons(this.#spawn);
-        });
-    }
-    /**
-     * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
-     */
-    #reflectSelectionOnCurrentValueLabel() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
-        self.requestAnimationFrame(() => {
-            switch (this.pickerStyle) {
-                case 'sheet':
-                case 'navigation-link': {
-                    const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
-                    if (!currentValueLabel)
-                        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);
-                    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(
-                    //   htmx`<label-view>${systemImage ? htmx`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? htmx`<span>${title}</span>` : null}</label-view>`,
-                    //   currentValueLabel
-                    // ) NOTE: not this bc/ help tooltip right now is added to trigger label and this mangles it
-                    break;
-                }
-                case 'menu': {
-                    const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
-                    if (!currentValueLabel)
-                        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);
-                    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(
-                    //   htmx`<label-view slot="label">${systemImage ? htmx`<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? htmx`<span>${title}</span>` : null}</label-view>`,
-                    //   currentValueLabel
-                    // ) NOTE: not this bc/ help tooltip right now is added to trigger label and this mangles it
-                    break;
-                }
-                case 'inline':
-                default: {
-                    //
-                    break;
-                }
-            }
-        });
-    }
-    #reflectTriggerHelp() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} #reflectTriggerHelp`);
-        let trigger;
-        switch (this.pickerStyle) {
-            case 'sheet':
-            case 'navigation-link': {
-                trigger = this.querySelector(':scope>label-view:not([slot])') ?? undefined;
-            }
-            case 'menu': {
-                trigger = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]') ?? undefined;
-            }
-            case 'inline':
-            default: {
-                //udnefined
-            }
-        }
-        if (this.hasAttribute(this.constructor.ATTR.TRIGGER_HELP))
-            trigger?.setAttribute(this.constructor.ATTR.TRIGGER_HELP, this.getAttribute(this.constructor.ATTR.TRIGGER_HELP) ?? '');
-        else
-            trigger?.removeAttribute(this.constructor.ATTR.TRIGGER_HELP);
-    }
-    /**
-     * Form participation property
-     */
-    get name() {
-        return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
-    }
-    setValidity = (flags, message, anchor) => {
-        // let msg
-        // if (message)
-        for (const k in flags) {
-            const key = k; // ✅ type-safe cast
-            if (true !== flags[key])
-                continue;
-            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
-                if (!el.matches('option'))
-                    continue;
-                const { label, value } = el;
-                if (`${kebabCase(key)}` === value) {
-                    message = label;
-                    break;
-                }
-                else if (`${kebabCase(key)}:${message}` === value) {
-                    message = label;
-                    break;
-                }
-            }
-        }
-        if (!message)
-            for (const k in flags) {
-                const key = k; // ✅ type-safe cast
-                if (true !== flags[key])
-                    continue;
-                message = kebabCase(key);
-                break;
-            }
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ validity-change`);
-        return this.#internals.setValidity(flags, this.#customValidity || message, anchor);
-    };
-    setCustomValidity = (message) => {
-        this.#customValidity = message;
-        if (this.#customValidity)
-            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
-        else
-            this.#sendValueToForm(false);
-    };
-    formStateRestoreCallback(state, reason) {
-        //
-    }
-    formAssociatedCallback(form) {
-        this.#sendValueToForm(false);
-    }
-    formDisabledCallback(disabled) {
-        for (const btn of this.#shadowRoot.querySelectorAll('button'))
-            btn.toggleAttribute('disabled', !disabled);
-    }
-    formResetCallback() {
-        this.#selection = '';
-        this.#reflectSelectionOnButtons();
-        this.#reflectSelectionOnCurrentValueLabel();
-        this.#sendValueToForm(false);
-    }
-}
-_a = PickerView;