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

package/generated/components/picker-view.js

@@ -0,0 +1,1201 @@
+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 { $, ancestors, debug, kebabCase, onoff } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html, render } from '../tpl';
+const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'radio-group', 'automatic'];
+const update = (path, node, overwrite = true) => {
+    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) => {
+    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) => {
+    debug(`PickerView: extractTag`);
+    return node instanceof HTMLOptionElement ? (((node.getAttribute('value') ?? node.textContent?.trim()) || node.getAttribute('label')) ?? '') : (node.value ?? '');
+}, extractLabel = (node) => {
+    debug(`PickerView: extractLabelFromGroup`);
+    if (node instanceof Element)
+        if (node instanceof HTMLOptionElement)
+            return (node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim()) || null;
+        else
+            return node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label');
+    else
+        return node.title ?? node.value ?? null;
+    // return node instanceof Element ? node.getAttribute('DATALIST' === node.tagName ? 'data-label' : 'label') : (node.title ?? node.value ?? null)
+}, extractIcon = (node) => {
+    debug(`PickerView: extractIcon`);
+    // return node instanceof Element ? node.getAttribute('data-system-image') : (node.systemImage ?? null)
+    if (node instanceof Element)
+        return node.getAttribute('data-system-image');
+    else
+        return node.systemImage ?? null;
+}, extractSubtitle = (node) => {
+    debug(`PickerView: extractSubtitle`);
+    if (node instanceof Element)
+        return node.getAttribute('data-subtitle');
+    else
+        return node.subtitle ?? null;
+};
+const allLeaves = (node) => node.children.every((c) => 0 === c.children.length);
+const parseDictionary = (value) => {
+    let dictionary = [];
+    try {
+        dictionary = JSON.parse(value ?? '[]');
+    }
+    catch {
+        console.error('invalid-dictionary');
+    }
+    return dictionary;
+};
+const indexGroups = (nodes, parentPath = '') => {
+    const map = new Map();
+    nodes.forEach((node, i) => {
+        const id = parentPath ? `${parentPath}.${i}` : `${i}`;
+        map.set(id, node); // no DOM write — works identically for Element and DictEntry
+        const children = node instanceof Element ? Array.from(node.children) : node.children;
+        for (const [cid, cnode] of indexGroups(children, id))
+            map.set(cid, cnode);
+    });
+    return map;
+};
+const collectLeafValues = (node) => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value]);
+const flattenDictionary = (tree) => {
+    const out1 = {}, out2 = {}, stack = [tree], idx = [0];
+    while (stack.length) {
+        const frame = stack[stack.length - 1], i = idx[idx.length - 1];
+        if (i >= frame.length) {
+            stack.pop();
+            idx.pop();
+            continue;
+        }
+        idx[idx.length - 1]++;
+        const { value, title, systemImage, children } = frame[i];
+        out1[value] = title;
+        out2[value] = systemImage;
+        if (children.length) {
+            stack.push(children);
+            idx.push(0);
+        }
+    }
+    return { labels: out1, icons: out2 };
+};
+/**
+ * @summary A control that selects one value from a set of options.
+ *
+ * @attr {vertical|horizontal|auto} label-value-placement
+ *
+ * @attr {boolean} horizontal-radio-group-layout
+ *
+ * @slot — The default slot
+ * @slot label
+ * @slot list
+ * @slot {HTMLOptionElement[]} validity-options
+ */
+export class PickerView extends FormAssociatedBase {
+    static get observedAttributes() {
+        return [
+            'prompt',
+            'prompt-icon',
+            'label',
+            'name',
+            /**
+             * @type {menu|inline|navigation-link|sheet|automatic}
+             */
+            'picker-style',
+            'selection',
+            /**
+             * @type {boolean}
+             */
+            'searchable',
+            'current-value-label',
+            'current-value-icon',
+            /**
+             * Adds a help tooltip to the trigger of the picker, if style supports one
+             */
+            'help',
+            /**
+             * Renders all options using this array
+             * @type {DictEntry[]}
+             */
+            'dictionary',
+            /**
+             * @type {boolean}
+             */
+            'required',
+        ];
+    }
+    static #templates = new Map();
+    #guuid = self.crypto.randomUUID();
+    #spawn;
+    #makeGroupClickHandler(el, groupId) {
+        return async (evt) => {
+            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, 'content-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) => {
+        debug(`${_a.name} #spawnPage`);
+        const body = tag === 'sheet-view'
+            ? $(html `<dialog is="sheet-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="x"></label-view>
+                    </button>
+                  </tool-bar-item>
+                </tool-bar>
+              </dialog>`, '>1')
+            : $(html `<content-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>
+              </content-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 = this.#wrapOptgroupTag(el);
+                        this.#reflectButtons([...el.children], group);
+                        for (const btn of group.querySelectorAll(':scope>button'))
+                            btn.addEventListener('click', this.#handlePageBtnClick);
+                        list?.appendChild(group);
+                        break;
+                    }
+                    case 'OPTION': {
+                        const btn = this.#wrapOptionTag(el);
+                        btn.addEventListener('click', this.#handlePageBtnClick);
+                        list?.appendChild(btn);
+                        break;
+                    }
+                    default: {
+                        const btn = _a.#wrapOptionSpawnTag(el);
+                        const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
+                        // const btn = $<HTMLButtonElement>(
+                        //     `<button type="button" tabindex="0" navigation-link><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></button>`,
+                        //     '>1'
+                        //   ),
+                        //   label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
+                        // const node = el as HTMLElement
+                        // if (label && node.dataset.label) renderLabelTitle(label, node.dataset.label) //label?.setAttribute('title', el.dataset.label)
+                        btn.dataset.groupId = groupId;
+                        btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
+                        list?.appendChild(btn);
+                        break;
+                    }
+                }
+            else {
+                if (el.children.length)
+                    if (allLeaves(el)) {
+                        const group = this.#wrapOptgroupTag(el);
+                        this.#reflectButtons(el.children, group);
+                        for (const btn of group.querySelectorAll(':scope>button'))
+                            btn.addEventListener('click', this.#handlePageBtnClick);
+                        list?.appendChild(group);
+                    }
+                    else {
+                        const btn = _a.#wrapOptionSpawnTag(el);
+                        const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
+                        btn.dataset.groupId = groupId;
+                        btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
+                        list?.appendChild(btn);
+                    }
+                else {
+                    const btn = this.#wrapOptionTag(el);
+                    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('content-view')) {
+            const depth = ancestors('content-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, 'content-view', groupId, this.hasAttribute('searchable'), title);
+            newPage.dataset.groupId = groupId;
+            reflectSpawnedPage(el, newPage);
+        }
+    };
+    #renderButtons(input) {
+        debug(`${_a.name} #renderButtons`);
+        switch (input.mode) {
+            case 'dictionary': {
+                const { labels, icons } = flattenDictionary(input.source);
+                this.#lastRenderedLabelMap = labels;
+                this.#lastRenderedIconMap = icons;
+                // const collectLeafValues = (node: DictEntry): string[] => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value])
+                // collectGroups = (nodes: DictEntry[]): string[][] => {
+                //   const groups: string[][] = []
+                //   const walk = (list: DictEntry[]) => {
+                //     for (const node of list) {
+                //       if (!node.children.length) continue
+                //       if (!allLeaves(node)) groups.push(collectLeafValues(node))
+                //       walk(node.children)
+                //     }
+                //   }
+                //   walk(nodes)
+                //   return groups
+                // }
+                this.#lastIndexedRoot = input.source; //this.#lastRenderedGroupMap = collectGroups(dictionary)
+                break;
+            }
+            case 'list': {
+                this.#lastRenderedLabelMap = {};
+                this.#lastRenderedIconMap = {};
+                for (const el of input.source)
+                    if (el.matches('option')) {
+                        const k = extractTag(el);
+                        this.#lastRenderedLabelMap[k] = el.getAttribute('label') ?? undefined;
+                        this.#lastRenderedIconMap[k] = extractIcon(el) ?? undefined;
+                    }
+                    else
+                        for (const opt of el.querySelectorAll('option')) {
+                            const k = extractTag(opt);
+                            this.#lastRenderedLabelMap[k] = opt.getAttribute('label') ?? undefined;
+                            this.#lastRenderedIconMap[k] = extractIcon(opt) ?? undefined;
+                        }
+                this.#lastIndexedRoot = input.source;
+                // this.#lastRenderedGroupMap = assigned.flatMap<string[]>((el) =>
+                //   [...(el.matches('datalist') ? [el as HTMLDataListElement] : []), ...el.querySelectorAll<HTMLDataListElement>('datalist')].map((dl) =>
+                //     Array.from(dl.options).map((opt) => extractTagFromOption(opt))
+                //   )
+                // )
+                break;
+            }
+        }
+        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('help'))
+                    currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
+                // rebuild snapshot(tree)
+                if (!this.#spawn)
+                    break;
+                // rerender level 0
+                reflectSpawnedPage(this.#spawn, this.#spawnPage(input.source, 'DIALOG' === this.#spawn.tagName ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label')));
+                this.#resyncSpawnedPages(input.source);
+                // // FIXME:
+                // for (const el of this.#spawn.querySelectorAll<HTMLElement>('content-view')) {
+                //   const depth = $.ancestors('content-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), 'content-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('help'))
+                    currentValueLabel?.setAttribute('help', this.getAttribute('help') ?? '');
+                this.#reflectButtons(input.source, menu);
+                break;
+            }
+            case 'radio-group': {
+                // capture
+                // const stack = this.querySelector<HTMLElement>(':scope>v-stack:not([slot])') ?? this.appendChild<HTMLElement>($(html`<v-stack></v-stack>`, '>1'))
+                // reset state
+                // stack.innerHTML = ''
+                // clear all siblings
+                for (const el of this.querySelectorAll(':scope>:not([slot])'))
+                    el.remove();
+                // add buttons
+                this.#reflectButtons(input.source, this);
+                break;
+            }
+            case 'inline':
+            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('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)
+                    this.#reflectButtons(input.source.filter((el) => 0 === el.children.length), section);
+                else
+                    this.#reflectButtons(input.source.filter((el) => el.matches('option')), section);
+                break;
+            }
+        }
+        this.#reflectSelectionOnButtons();
+        this.#reflectSelectionOnCurrentValueLabel();
+    }
+    // #renderDictionary = (dictionary: Dictionary) => {
+    //   debug(`${PickerView.name} ⚡️ mutation`)
+    //   this.#renderButtons({ mode: 'dictionary', source: dictionary })
+    // }
+    #renderSlotted = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.#renderButtons(this.#resolveSource()); //this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] })
+    };
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
+    #lastRenderedStyle; //string | null
+    #shadowRoot;
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    #observers = new MutationObserverSet(this.#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('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || this.#lastRenderedLabelMap[this.#selection]);
+    }
+    get #currentValueIcon() {
+        return (this.getAttribute('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 'radio-group':
+                    _a.#templates.set(this.pickerStyle, $(html `
+              <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>
+            `));
+                    break;
+                //   break
+                // case 'compact':
+                //   PickerView.#templates.set(
+                //     style,
+                //     Object.assign(document.createElement('template'), {
+                //       innerHTML: String.raw`
+                //     <label part="compact-picker">
+                //       <input type="text" part="compact-input">
+                //     </label>
+                //   `,
+                //     })
+                //   )
+                //   break
+                // case 'fancy':
+                //   PickerView.#templates.set(
+                //     style,
+                //     Object.assign(document.createElement('template'), {
+                //       innerHTML: String.raw`
+                //     <div part="fancy-picker">
+                //       <span>Fancy Picker</span>
+                //       <input type="text" part="fancy-input">
+                //     </div>
+                //   `,
+                //     })
+                //   )
+                //   case 'gg':
+                //     PickerView.#templates.set(
+                //       style,
+                //       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) {
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            // case 'horizontal-radio-group-layout':
+            //   if (oldValue === newValue) break
+            //   this.#renderSlotted([])
+            // break
+            case 'prompt':
+            case 'prompt-icon':
+                if (oldValue === newValue)
+                    break;
+                this.#reflectSelectionOnCurrentValueLabel(); //this.#reflectPlaceholder(newValue)
+                break;
+            case 'label':
+                this.#reflectLabel(newValue);
+                // this.#sendValueToForm()
+                break;
+            case 'picker-style':
+                if (oldValue === newValue)
+                    break;
+                this.#render();
+                break;
+            case 'searchable':
+                if (oldValue === newValue)
+                    break;
+                this.#renderSlotted([]);
+                break;
+            case 'current-value-label':
+            case 'current-value-icon':
+                // if (oldValue === newValue) break
+                this.#reflectSelectionOnCurrentValueLabel();
+                break;
+            case 'help':
+                // if (oldValue === newValue) break
+                this.#reflectTriggerHelp();
+                break;
+            case 'dictionary':
+                if (oldValue === newValue)
+                    break;
+                this.#renderSlotted([]); // re-resolve: dictionary present → wins; removed → falls back to slotted //this.#renderDictionary(parseDictionary(newValue))
+                break;
+            case 'name':
+            case 'required':
+                if (oldValue === newValue)
+                    break;
+                this.#sendValueToForm(false);
+                break;
+            case 'selection':
+                if (oldValue === newValue)
+                    break;
+                this.#selection = newValue ?? '';
+                // FIXME: What about other callbacks from this.#selection=???? Somehow they run correctly
+                this.#sendValueToForm(false);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        this.#validityObservers.unobserveAll();
+        this.#observers.unobserveAll();
+    }
+    connectedCallback() {
+        debug(`${_a.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff('localechange', () => {
+            this.#renderSlotted([]);
+        }, I18n.on).on());
+        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
+        CleanupRegistry.register(this, onoff('input', this.#handleInput, this).on());
+        if (!this.hasAttribute('picker-style'))
+            this.#render(); // skip if already rendered by attr-change during upgrade!
+        // finally
+        if (!this.hasAttribute('selection'))
+            return;
+        this.#selection = this.getAttribute('selection') ?? '';
+        this.#sendValueToForm(false);
+    }
+    get pickerStyle() {
+        const attr = 'picker-style';
+        return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
+    }
+    #resolveSource() {
+        if (this.hasAttribute('dictionary'))
+            return { mode: 'dictionary', source: parseDictionary(this.getAttribute('dictionary')) };
+        return { mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] };
+    }
+    #render() {
+        debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
+        // const style = this.getAttribute('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 }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        this.#spawn?.remove?.();
+        const { source } = this.#resolveSource();
+        const level0 = this.#spawnPage(source, // this.hasAttribute('dictionary') ? parseDictionary(this.getAttribute('dictionary')) : (this.#slots?.get('list')?.assignedElements() ?? []),
+        'sheet' === this.pickerStyle ? 'sheet-view' : 'content-view', undefined, this.hasAttribute('searchable'), this.getAttribute('label'));
+        if (!level0)
+            return;
+        const path = new NavigationPath(target)?.hydrate();
+        await startViewTransition(target, 'forwards', async () => {
+            this.#spawn = level0;
+            update(path, level0);
+            this.#reflectSelectionOnButtons();
+        });
+    };
+    #handlePageBtnClick = async (evt) => {
+        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 }) {
+        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();
+    }
+    #handleInput({ type, target }) {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        switch (this.pickerStyle) {
+            case 'radio-group':
+                const radio = target.closest('input[type="radio"]');
+                if (!radio)
+                    return;
+                this.#selection = radio.getAttribute('value') ?? '';
+                this.#reflectSelectionOnButtons();
+                this.#reflectSelectionOnCurrentValueLabel();
+                this.#sendValueToForm();
+                break;
+        }
+    }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        // if (0 < assigned.length)
+        this.#renderValidityMsgs([]);
+    };
+    #handleListSlotchange = ({ type, target: slot }) => {
+        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) {
+        debug(`${_a.name} #wrapOptionSpawnTag`);
+        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        render(html `<button type="button" tabindex="0" navigation-link>
+        <h-stack distribution="leading" template="auto spacer">
+          <label-view data-role="check" style="visibility: hidden">
+            <image-view slot="icon" system-name="check"></image-view>
+          </label-view>
+          ${_a.#morphITSLabel({ title, subtitle, icon })}
+        </h-stack>
+      </button>`, mount);
+        return mount.firstElementChild; //btn
+    }
+    #wrapOptionTag(node) {
+        debug(`${_a.name} #wrapOptionTag`);
+        const tag = extractTag(node), title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        switch (this.pickerStyle) {
+            case 'radio-group':
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, title, subtitle, icon, tag }), mount);
+                return mount.firstElementChild; //btn
+            default:
+                render(html `<button type="button" tabindex="0" value="${tag}">
+            <h-stack distribution="leading" template="auto spacer">
+              <label-view data-role="check">
+                <image-view slot="icon" system-name="check"></image-view>
+              </label-view>
+              ${_a.#morphITSLabel({ title, subtitle, icon })}
+            </h-stack>
+          </button>`, mount);
+                return mount.firstElementChild; //btn
+        }
+    }
+    static #morphRadioGroupGroup({ name, title, subtitle, icon }) {
+        return html `<label>
+      <h-stack distribution="fill" template="auto spacer" spacing="5">
+        <input type="radio" name="${name}" style="min-inline-size: 20px; margin: 0" disabled />
+        ${_a.#morphITSLabel({ title, subtitle, icon })}
+      </h-stack>
+    </label>`;
+    }
+    static #morphRadioGroupBtn({ name, title, subtitle, icon, tag }) {
+        return html `<label>
+      <h-stack distribution="fill" template="auto spacer" spacing="5">
+        <input type="radio" name="${name}" value="${tag}" style="min-inline-size: 20px; margin: 0" />
+        ${_a.#morphITSLabel({ title, subtitle, icon })}
+      </h-stack>
+    </label>`;
+    }
+    static #morphITSLabel({ title, subtitle, icon }) {
+        return html `<h-stack distribution="fill" template="${icon ? 'auto spacer' : null}">
+      ${icon ? html `<label-view system-image="${icon}"></label-view>` : null}
+      <v-stack spacing="3" alignment="fill">
+        <label-view title="${title}"></label-view>
+        ${subtitle ? html `<label-view foreground="secondary" font="callout" title="${subtitle}"></label-view>` : null}
+      </v-stack>
+    </h-stack>`;
+    }
+    #wrapOptgroupTag(node) {
+        debug(`${_a.name} #wrapOptgroupTag`);
+        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        switch (this.pickerStyle) {
+            case 'radio-group':
+                render(_a.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon }), 
+                // this.hasAttribute('horizontal-radio-group-layout')
+                //   ? html`<h-flex-stack style="flex-wrap: wrap">${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</h-flex-stack>`
+                //   : html`<v-stack>${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</v-stack>`,
+                mount);
+                return mount.firstElementChild;
+            default:
+                render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
+            <summary>
+              <h-stack distribution="leading" template="auto spacer">
+                <label-view data-role="check" style="visibility: hidden">
+                  <image-view slot="icon" system-name="check"></image-view>
+                </label-view>
+                ${_a.#morphITSLabel({ title, subtitle, icon })}
+              </h-stack>
+            </summary>
+          </details>`, mount);
+                return mount.firstElementChild;
+        }
+    }
+    #wrapDatalistTag(node) {
+        const title = extractLabel(node), subtitle = extractSubtitle(node), icon = extractIcon(node);
+        const mount = document.createElement('div');
+        switch (this.pickerStyle) {
+            case 'radio-group':
+                render(_a.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon }), 
+                // this.hasAttribute('horizontal-radio-group-layout')
+                //   ? html`<h-flex-stack style="flex-wrap: wrap">${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</h-flex-stack>`
+                //   : html`<v-stack>${PickerView.#morphRadioGroupGroup({ name: this.#guuid, title, subtitle, icon })}</v-stack>`,
+                mount);
+                return mount.firstElementChild;
+            default:
+                render(html `<menu-view tabindex="0">
+            <h-stack slot="label" distribution="leading" template="auto spacer">
+              <label-view data-role="check" style="visibility: hidden">
+                <image-view slot="icon" system-name="check"></image-view>
+              </label-view>
+              ${_a.#morphITSLabel({ title, subtitle, icon })}
+            </h-stack>
+          </menu-view>`, mount);
+                return mount.firstElementChild;
+        }
+    }
+    #reflectButtons(nodes, container) {
+        debug(`${_a.name} #reflectButtons`);
+        const flatten = 'radio-group' === this.pickerStyle;
+        for (const node of nodes)
+            if (node instanceof Element)
+                switch (node.tagName) {
+                    case 'DATALIST': {
+                        if (flatten) {
+                            this.#reflectButtons([...node.children], container);
+                            break;
+                        }
+                        const group = this.#wrapDatalistTag(node);
+                        this.#reflectButtons([...node.children], group);
+                        container.appendChild(group);
+                        break;
+                    }
+                    case 'OPTGROUP': {
+                        if (flatten) {
+                            this.#reflectButtons([...node.children], container);
+                            break;
+                        }
+                        const group = this.#wrapOptgroupTag(node);
+                        this.#reflectButtons([...node.children], group);
+                        container.appendChild(group);
+                        break;
+                    }
+                    case 'OPTION':
+                    default: {
+                        container.appendChild(this.#wrapOptionTag(node));
+                        break;
+                    }
+                }
+            else {
+                if (node.children.length)
+                    if (flatten)
+                        this.#reflectButtons(node.children, container);
+                    else if (allLeaves(node)) {
+                        const group = this.#wrapOptgroupTag(node);
+                        this.#reflectButtons(node.children, group);
+                        container.appendChild(group);
+                    }
+                    else {
+                        const group = this.#wrapDatalistTag(node);
+                        this.#reflectButtons(node.children, group);
+                        container.appendChild(group);
+                    }
+                else
+                    container.appendChild(this.#wrapOptionTag(node));
+            }
+    }
+    // #reflectPlaceholder(value: string | null) {
+    //   debug(`#reflectPlaceholder`)
+    // const input = this.#shadowRoot.querySelector('input')
+    // if (input) {
+    //   if (value) input.setAttribute('prompt', value)
+    //   else input.removeAttribute('prompt')
+    // }
+    // }
+    #reflectLabel(value) {
+        debug(`${_a.name} #reflectLabel`);
+        queryMorph('[slot=label]', html `<label-view slot="label">${value ? html `<span>${value}</span>` : null}</label-view>`, this);
+        this.#renderSlotted([]);
+    }
+    #reflectSelectionOnButtons() {
+        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
+                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
+                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');
+                }
+                // 4. radio inputs
+                for (const el of root.querySelectorAll('input[type=radio][value]'))
+                    el.checked = el.getAttribute('value') === this.#selection;
+            };
+            syncButtons(this);
+            if (this.#spawn)
+                syncButtons(this.#spawn);
+        });
+    }
+    /**
+     * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
+     */
+    #reflectSelectionOnCurrentValueLabel() {
+        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('prompt'), systemImage = this.#currentValueIcon || this.getAttribute('prompt-icon');
+                    queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
+                    // morph(
+                    //   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('prompt'), systemImage = this.#currentValueIcon || this.getAttribute('prompt-icon');
+                    queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
+                    // morph(
+                    //   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() {
+        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('help'))
+            trigger?.setAttribute('help', this.getAttribute('help') ?? '');
+        else
+            trigger?.removeAttribute('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;
+            }
+        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;