@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.41

package/generated/components/picker-view.js

@@ -0,0 +1,697 @@
+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';
+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 reflectSpawnedElement = (current, source) => {
+    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 exists)
+    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 extractTagFromOption = (node) => {
+    return ((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '';
+};
+const extractCurrentValueFromOption = (node) => {
+    return (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || '';
+};
+export class PickerView extends FormAssociatedBase {
+    static get ATTR() {
+        return {
+            PLACEHOLDER: 'placeholder',
+            LABEL: 'label',
+            PICKER_STYLE: 'picker-style',
+            SELECTION: 'selection',
+            SEARCHABLE: 'searchable',
+            CURRENT_VALUE_LABEL: 'current-value-label',
+        };
+    }
+    static get observedAttributes() {
+        return Object.values(this.ATTR);
+    }
+    static #templates = new Map();
+    #spawn;
+    #spawnPage = (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'); // FIXME: compoennt is=search-view??
+            searchInput?.addEventListener('focus', (evt) => {
+                if (this.#spawn)
+                    this.dispatchEvent(new CustomEvent('picker:searchfocus', {
+                        detail: { element: this.#spawn, search: evt.target instanceof HTMLInputElement && evt.target ? evt.target.value : '' },
+                        bubbles: true,
+                        composed: true,
+                    }));
+            });
+            searchInput?.addEventListener('blur', (evt) => {
+                if (this.#spawn)
+                    this.dispatchEvent(new CustomEvent('picker:searchblur', {
+                        detail: { element: this.#spawn, search: evt.target instanceof HTMLInputElement && evt.target ? evt.target.value : '' },
+                        bubbles: true,
+                        composed: true,
+                    }));
+            });
+            searchInput?.addEventListener('input', (evt) => {
+                if (this.#spawn)
+                    this.dispatchEvent(new CustomEvent('picker:searchinput', {
+                        detail: { element: this.#spawn, search: evt.target instanceof HTMLInputElement && evt.target ? evt.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 && 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.#handlePageBtnClick);
+                    list?.appendChild(details);
+                    break;
+                }
+                case 'OPTION': {
+                    const btn = _a.#wrapOptionTag(el);
+                    btn.addEventListener('click', this.#handlePageBtnClick);
+                    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.#spawnPage('body-view', this.hasAttribute('searchable'), el.dataset.label, el);
+                        if (!newPage)
+                            return;
+                        const path = new NavigationPath(target)?.hydrate();
+                        await startViewTransition(target, 'forwards', async () => {
+                            update(path, newPage);
+                            this.#reflectSelectionOnButtons();
+                        });
+                    });
+                    list?.appendChild(btn);
+                    break;
+                }
+            }
+        }
+        return body;
+    };
+    #renderSlotted = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        switch (this.pickerStyle) {
+            case 'sheet':
+            case 'navigation-link': {
+                // current value label only
+                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+                // reset state
+                currentValueLabel.setAttribute('system-image', 'dots-three'); // overwritten
+                currentValueLabel.setAttribute('title', this.#selection); //, 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');
+                // rebuild snapshot(tree)
+                if (!this.#spawn)
+                    break;
+                // rerender level 0
+                reflectSpawnedElement(this.#spawn, this.#spawnPage('body-view', this.hasAttribute('searchable'), this.getAttribute('label')));
+                for (const el of this.#spawn.querySelectorAll('body-view')) {
+                    const depth = $.ancestors('body-view,[is=sheet-view]', el).indexOf(this.#spawn);
+                    if (0 >= depth)
+                        continue;
+                    const datalist = this.querySelector(`:scope>${Array.from({ length: depth }, () => 'datalist').join('>')}`);
+                    if (!datalist) {
+                        el.remove();
+                        break;
+                    }
+                    reflectSpawnedElement(el, this.#spawnPage('body-view', this.hasAttribute('searchable'), datalist.dataset.label, datalist));
+                }
+                break;
+            }
+            case 'menu': {
+                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<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($(`<label-view slot="label"></label-view>`, '>1'));
+                currentValueLabel.setAttribute('system-image', 'dots-three'); // overwritten
+                currentValueLabel.setAttribute('title', this.#selection); //this.#currentValueLabel) // overwritten
+                _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
+                break;
+            }
+            case 'inline':
+            default: {
+                const sectionTpl = `<section-view></section-view>`;
+                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<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();
+                const value = this.getAttribute(this.constructor.ATTR.LABEL);
+                if (value) {
+                    const label = $(`<label-view></label-view>`, '>1');
+                    label.setAttribute('title', value);
+                    section.insertAdjacentElement('beforeend', label);
+                }
+                _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [])].filter((el) => el.matches('option')), section);
+                break;
+            }
+        }
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+    };
+    #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 #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, $(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':
+                    _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 '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, $(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;
+            }
+        return _a.#templates.get(this.pickerStyle);
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+    }
+    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(); // will be picked up by attr-change!
+        // finally
+        if (!this.hasAttribute('selection'))
+            return;
+        this.#selection = this.getAttribute('selection') ?? '';
+        this.#sendValueToForm(false);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        this.#validityObservers.unobserveAll();
+        this.#observers.unobserveAll();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case this.constructor.ATTR.PLACEHOLDER:
+                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:
+                // if (oldValue === newValue) break
+                this.#reflectCurrentValueLabel();
+                break;
+            case this.constructor.ATTR.SELECTION:
+                // nothing happens
+                break;
+        }
+    }
+    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 && target))
+            return;
+        this.#spawn?.remove?.();
+        const level0 = this.#spawnPage('sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', 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 && btn))
+            return;
+        // const btn = target.closest('button')
+        // if (!btn) return
+        const proceed = () => {
+            this.#spawn?.remove();
+            this.#selection = btn.getAttribute('value') ?? '';
+            this.#reflectSelectionOnButtons();
+            this.#reflectCurrentValueLabel();
+            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 && target))
+            return;
+        const btn = target.closest('button');
+        if (!btn)
+            return;
+        this.#selection = btn.getAttribute('value') ?? '';
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+        this.#sendValueToForm();
+    }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement && slot))
+            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 && slot))
+            return;
+        const assigned = slot.assignedElements();
+        this.#observers.syncObservations(assigned);
+        // if (0 < assigned.length)
+        this.#renderSlotted([]);
+    };
+    static #wrapOptionTag(node) {
+        const btn = $(`<button type="button" tabindex="0"><h-stack template="auto spacer"><label-view system-image="check"></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':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 = $(`<label-view></label-view>`, '>1');
+        label.setAttribute('title', extractCurrentValueFromOption(node));
+        hStack?.appendChild(label);
+        return btn;
+    }
+    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;
+                }
+                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) {
+            if (value)
+                input.setAttribute('placeholder', value);
+            else
+                input.removeAttribute('placeholder');
+        }
+    }
+    #reflectLabel(value) {
+        let label = this.querySelector(':scope>label-view[slot=label]');
+        if (value) {
+            label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+            label.setAttribute('foreground', 'secondary');
+            label.setAttribute('title', value);
+        }
+        else
+            label?.remove();
+        this.#renderSlotted([]);
+    }
+    #reflectSelectionOnButtons() {
+        // walk all rendered buttons (inline has buttons in list, menu has buttons in menu-view)
+        for (const el of this.querySelectorAll('button[value]:not([slot])'))
+            el.querySelector('label-view[system-image="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
+        // also sync the spawn (sheet/navigation) if open
+        if (this.#spawn)
+            for (const el of this.#spawn.querySelectorAll('list-view button[value]:not([slot])'))
+                el.querySelector('label-view[system-image="check"]')?.style.setProperty('visibility', el.getAttribute('value') === this.#selection ? 'visible' : 'hidden');
+    }
+    get #currentTag() {
+        return this.#slots
+            ?.get('list')
+            ?.assignedElements({ flatten: true })
+            .flatMap((el) => [...(el.matches('option') ? [el] : []), ...el.querySelectorAll('option')])
+            .find((el) => this.#selection === extractTagFromOption(el));
+    }
+    get #currentValueLabel() {
+        const cvl = this.#currentTag ? extractCurrentValueFromOption(this.#currentTag) : '';
+        return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl || this.#selection;
+    }
+    #reflectCurrentValueLabel() {
+        switch (this.pickerStyle) {
+            case 'sheet':
+            case 'navigation-link': {
+                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
+                currentValueLabel?.setAttribute('system-image', 'dots-three');
+                currentValueLabel?.setAttribute('title', this.#currentValueLabel);
+                break;
+            }
+            case 'menu': {
+                const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
+                currentValueLabel?.setAttribute('system-image', 'dots-three');
+                currentValueLabel?.setAttribute('title', this.#currentValueLabel);
+                break;
+            }
+            case 'inline':
+            default: {
+                //
+                break;
+            }
+        }
+    }
+    // Optional: form participation properties
+    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 option = el;
+                if (`${kebabCase(key)}` === option.value) {
+                    message = option.label;
+                    break;
+                }
+                else if (`${kebabCase(key)}:${message}` === option.value) {
+                    message = option.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);
+    };
+    formAssociatedCallback = (form) => {
+        this.#sendValueToForm();
+    };
+    formDisabledCallback = (disabled) => {
+        for (const btn of this.#shadowRoot.querySelectorAll('button'))
+            btn.toggleAttribute('disabled', !disabled);
+    };
+    formResetCallback = () => {
+        this.#selection = '';
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+        this.#sendValueToForm();
+    };
+}
+_a = PickerView;