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

package/generated/components/picker-view.js

@@ -5,7 +5,7 @@ import { FormAssociatedBase, getInternals } from '../internal/class/form-associa
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, debug, kebabCase, onoff } from '../internal/utils';
+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))
@@ -18,23 +18,32 @@ const update = (path, node, overwrite = true) => {
     if (page)
         page.insertAdjacentElement(position, node);
 };
-const replaceList = (current, source) => {
-    const { page: oldPage, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newPage, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
-    const oldList = oldPage?.querySelector('list-view'), newList = newPage?.querySelector('list-view'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
-    // pre replace
-    const oldOpenedDetails = [...(oldList?.querySelectorAll('details[open]>summary') ?? [])].map((item) => item.textContent.trim());
-    // replace
-    if (oldList && newList)
-        oldList.replaceWith(newList);
-    if (oldBackBtn && newBackBtn)
-        oldBackBtn.replaceWith(newBackBtn);
-    // post replace
+const reflectSpawnedElement = (current, source) => {
+    const { page: oldSv, toolBarConfig: oldToolbar } = new NavigationPath(current).hydrate(), { page: newSv, toolBarConfig: newToolbar } = new NavigationPath(source).hydrate();
+    const oldVStack = oldSv?.querySelector(':scope>v-stack'), newVStack = newSv?.querySelector(':scope>v-stack'), oldBackBtn = oldToolbar?.at(0)?.querySelector('button'), newBackBtn = newToolbar?.at(0)?.querySelector('button');
+    // pre replace list (always exist)
+    const oldOpenedDetails = [...(oldVStack?.querySelectorAll('list-view details[open]>summary') ?? [])].map((item) => item.textContent.trim());
+    // replace list (always exist)
+    if (oldVStack && newVStack)
+        oldVStack.replaceWith(newVStack);
+    // post replace list (always exist)
     for (const label of oldOpenedDetails)
-        for (const summary of newList?.querySelectorAll('details>summary') ?? [])
+        for (const summary of newVStack?.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 exist)
+    oldSv?.setAttribute('navigation-inline-title', newSv?.getAttribute('navigation-inline-title') ?? '');
+};
+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() {
@@ -44,6 +53,7 @@ export class PickerView extends FormAssociatedBase {
             PICKER_STYLE: 'picker-style',
             SELECTION: 'selection',
             SEARCHABLE: 'searchable',
+            CURRENT_VALUE_LABEL: 'current-value-label',
         };
     }
     static get observedAttributes() {
@@ -51,7 +61,7 @@ export class PickerView extends FormAssociatedBase {
     }
     static #templates = new Map();
     #spawn;
-    #renderPage = (tag, searchable = false, title, node) => {
+    #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);
@@ -63,18 +73,30 @@ export class PickerView extends FormAssociatedBase {
                   <button type="button">Filters</button>
                 </v-stack>
               </sticky-container>`);
-            const searchInput = sv?.querySelector('input[type=search]');
+            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 }, bubbles: true, composed: true }));
+                    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 }, bubbles: true, composed: true }));
+                    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 }, bubbles: true, composed: true }));
+                    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);
@@ -98,13 +120,13 @@ export class PickerView extends FormAssociatedBase {
                     const details = _a.#wrapOptgroupTag(el);
                     _a.#reflectButtons([...el.children], details);
                     for (const btn of details.querySelectorAll(':scope>button'))
-                        btn.addEventListener('click', this.#handlePageClick);
+                        btn.addEventListener('click', this.#handlePageBtnClick);
                     list?.appendChild(details);
                     break;
                 }
                 case 'OPTION': {
                     const btn = _a.#wrapOptionTag(el);
-                    btn.addEventListener('click', this.#handlePageClick);
+                    btn.addEventListener('click', this.#handlePageBtnClick);
                     list?.appendChild(btn);
                     break;
                 }
@@ -118,12 +140,13 @@ export class PickerView extends FormAssociatedBase {
                         const { target } = evt;
                         if (!(target instanceof HTMLElement && target))
                             return;
-                        const newPage = this.#renderPage('body-view', this.hasAttribute('searchable'), el.dataset.label, el);
+                        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);
@@ -133,22 +156,28 @@ export class PickerView extends FormAssociatedBase {
         }
         return body;
     };
-    #renderList = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+    #renderSlotted = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
         switch (this.pickerStyle) {
             case 'sheet':
             case 'navigation-link': {
-                // label
-                const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view system-image="dots-three"></label-view>`, '>1'));
-                label.setAttribute('title', 'rtyty');
+                // 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); // 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, label).on(), 'trigger');
-                this.appendChild(label);
+                CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, currentValueLabel).on(), 'trigger');
                 // rebuild snapshot(tree)
                 if (!this.#spawn)
                     break;
                 // rerender level 0
-                replaceList(this.#spawn, this.#renderPage('body-view', this.hasAttribute('searchable'), this.getAttribute('label')));
+                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)
@@ -158,43 +187,58 @@ export class PickerView extends FormAssociatedBase {
                         el.remove();
                         break;
                     }
-                    replaceList(el, this.#renderPage('body-view', this.hasAttribute('searchable'), datalist.dataset.label, datalist));
+                    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 tabindex="0"></menu-view>`, '>1')), label = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label" system-image="dots-three"></label-view>`, '>1'));
-                label.setAttribute('title', 'rtyty');
-                for (const el of menu.querySelectorAll(':scope>:not([slot])'))
-                    el.remove();
+                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); // overwritten
                 _a.#reflectButtons([...(this.#slots?.get('list')?.assignedElements() ?? [])], menu);
                 break;
             }
             case 'inline':
             default: {
-                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view><section-view></section-view></list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(`<section-view></section-view>`, '>1'));
-                for (const el of section.querySelectorAll(':scope>:not([slot])'))
-                    el.remove(); // section.innerHTML = ''
-                const label = this.getAttribute(this.constructor.ATTR.LABEL);
-                if (label) {
-                    const el = $(`<label-view></label-view>`, '>1');
-                    el.setAttribute('title', label);
-                    section.insertAdjacentElement('beforeend', el);
+                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) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        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.#renderList);
+    #observers = new MutationObserverSet(this.#renderSlotted);
     #customValidity = '';
     #selection = '';
     get #internals() {
@@ -299,9 +343,10 @@ export class PickerView extends FormAssociatedBase {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('localechange', () => {
-            this.#renderList([]);
+            this.#renderSlotted([]);
         }, I18n.on).on());
         CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
         if (!this.hasAttribute(this.constructor.ATTR.PICKER_STYLE))
@@ -313,20 +358,22 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#validityObservers.unobserveAll();
         this.#observers.unobserveAll();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${_a.name} ⚡️ attr-change [${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();
+                // this.#sendValueToForm()
                 break;
             case this.constructor.ATTR.PICKER_STYLE:
                 if (oldValue === newValue)
@@ -336,7 +383,11 @@ export class PickerView extends FormAssociatedBase {
             case this.constructor.ATTR.SEARCHABLE:
                 if (oldValue === newValue)
                     break;
-                this.#renderList([]);
+                this.#renderSlotted([]);
+                break;
+            case this.constructor.ATTR.CURRENT_VALUE_LABEL:
+                // if (oldValue === newValue) break
+                this.#reflectCurrentValueLabel();
                 break;
             case this.constructor.ATTR.SELECTION:
                 // nothing happens
@@ -344,14 +395,12 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     get pickerStyle() {
-        return pickerStyles.includes(this.getAttribute(this.constructor.ATTR.PICKER_STYLE) ?? '')
-            ? this.getAttribute(this.constructor.ATTR.PICKER_STYLE)
-            : 'automatic';
+        const attr = this.constructor.ATTR.PICKER_STYLE;
+        return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
     }
     #render() {
-        debug(`${_a.name} ⚡️ render (${this.pickerStyle})`);
-        if (!this.isConnected)
-            return;
+        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
@@ -368,6 +417,7 @@ export class PickerView extends FormAssociatedBase {
         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) {
         // }
     }
@@ -391,32 +441,36 @@ export class PickerView extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
     };
     #handleTriggerClick = async ({ type, target }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement && target))
             return;
         this.#spawn?.remove?.();
-        const level0 = this.#renderPage('sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', this.hasAttribute('searchable'), this.getAttribute('label'));
+        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();
         });
     };
-    #handlePageClick = async (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+    #handlePageBtnClick = async (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         evt.stopImmediatePropagation();
         evt.preventDefault();
-        const { target } = evt;
-        if (!(target instanceof HTMLElement && target))
-            return;
-        const btn = target.closest('button');
-        if (!btn)
+        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') ?? btn.textContent?.trim() ?? '';
+            this.#selection = btn.getAttribute('value') ?? '';
+            this.#reflectSelectionOnButtons();
+            this.#reflectCurrentValueLabel();
             this.#sendValueToForm();
         };
         const { body } = new NavigationPath(this.#spawn)?.hydrate();
@@ -427,39 +481,46 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handleClick({ type, target }) {
-        debug(`${_a.name} ⚡️ ${type}`);
+        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') ?? btn.textContent?.trim() ?? '';
+        this.#selection = btn.getAttribute('value') ?? '';
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
         this.#sendValueToForm();
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        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([]);
+        // if (0 < assigned.length)
+        this.#renderValidityMsgs([]);
     };
     #handleListSlotchange = ({ type, target: slot }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        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.#renderList([]);
+        // if (0 < assigned.length)
+        this.#renderSlotted([]);
     };
     static #wrapOptionTag(node) {
-        const btn = $(`<button type="button" tabindex="0"></button>`, '>1');
-        btn.setAttribute('value', node.getAttribute('value') ?? node.textContent?.trim() ?? '');
+        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', node.getAttribute('label') ?? node.getAttribute('value') ?? node.textContent?.trim() ?? '');
-        btn.appendChild(label);
+        label.setAttribute('title', extractCurrentValueFromOption(node));
+        hStack?.appendChild(label);
         return btn;
     }
     static #wrapOptgroupTag(node) {
@@ -507,14 +568,51 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     #reflectLabel(value) {
-        let label = this.querySelector(':scope>[slot=label]');
+        let label = this.querySelector(':scope>label-view[slot=label]');
         if (value) {
-            label ??= this.appendChild($(`<span slot="label"></span>`, '>1'));
-            label.textContent = value;
+            label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+            label.setAttribute('foreground', 'secondary');
+            label.setAttribute('title', value);
         }
         else
             label?.remove();
-        this.#renderList([]);
+        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');
+    }
+    #reflectCurrentValueLabel() {
+        const selectedTag = this.#slots
+            ?.get('list')
+            ?.assignedElements({ flatten: true })
+            .flatMap((el) => [...(el.matches('option') ? [el] : []), ...el.querySelectorAll('option')])
+            .find((el) => this.#selection === extractTagFromOption(el)), cvl = selectedTag ? extractCurrentValueFromOption(selectedTag) : '', final = (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl || this.#selection;
+        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', final);
+                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', final);
+                break;
+            }
+            case 'inline':
+            default: {
+                //
+                break;
+            }
+        }
     }
     // Optional: form participation properties
     get name() {
@@ -549,7 +647,8 @@ export class PickerView extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${_a.name} ⚡️ validity-change`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor);
     };
     setCustomValidity = (message) => {
@@ -568,6 +667,9 @@ export class PickerView extends FormAssociatedBase {
     };
     formResetCallback = () => {
         this.#selection = '';
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+        this.#sendValueToForm();
     };
 }
 _a = PickerView;

package/generated/components/plain-button.js

@@ -1,16 +1,18 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { debug, onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class PlainButton extends ButtonBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        debug(`${PlainButton.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${PlainButton.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        debug(`${PlainButton.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${PlainButton.name} ⚡️ connect`);
         el.tabIndex = 0;
         CleanupRegistry.register(el, onoff('click', PlainButton.#handleClick, el).on());
     }

package/generated/components/progress-view.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { $, debug } from '../internal/utils';
+import { $, devFlags } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const progressViewStyles = ['circular', 'linear'];
 /**
@@ -55,11 +55,13 @@ export class ProgressView extends HTMLElement {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--progress-view-style-index'],
         });
@@ -67,7 +69,8 @@ export class ProgressView extends HTMLElement {
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'label': {
                 const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view foreground="secondary"></label-view>`, '>1'));
@@ -91,7 +94,8 @@ export class ProgressView extends HTMLElement {
         }
     }
     #handleStyleChange = () => {
-        debug(`${_a.name} ⚡️ style`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
         const raw = self.getComputedStyle(this).getPropertyValue('--progress-view-style-index').trim();
         const newValue = progressViewStyles[Number(raw)] ?? progressViewStyles[0];
         if (newValue === this.#progressViewStyle)
@@ -100,9 +104,8 @@ export class ProgressView extends HTMLElement {
         this.#render();
     };
     #render() {
-        debug(`${_a.name} ⚡️ render (${this.#progressViewStyle})`);
-        if (!this.isConnected)
-            return;
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ render (${this.#progressViewStyle})`);
         if (this.#lastRenderedStyle === this.#progressViewStyle)
             return; // skip if already applied
         this.#lastRenderedStyle = this.#progressViewStyle;

package/generated/components/screen-view.js

@@ -1,10 +1,11 @@
-import { debug } from '../internal/utils';
+import { devFlags } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 export class ScreenView extends DialogBase {
     constructor() {
         super();
     }
     disconnectedCallback() {
-        debug(`${ScreenView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${ScreenView.name} ⚡️ disconnect`);
     }
 }

package/generated/components/scroll-view-proxy.js

@@ -1,4 +1,4 @@
-import { debug } from '../internal/utils';
+import { devFlags } from '../internal/utils';
 /**
  * @summary A wrapper to {hv}-stacks
  */
@@ -7,9 +7,11 @@ export class ScrollViewProxy extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
     }
     connectedCallback() {
-        debug(`${ScrollViewProxy.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
     }
 }