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

package/generated/components/picker-view.js

@@ -1,4 +1,3 @@
-var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { DictEntry, Dictionary } from '../internal/class/dict-entry';
@@ -27,7 +26,11 @@ const reflectSpawnedPage = (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());
+    const oldOpenedDetails = oldList
+        ?.querySelectorAll('list-view details[open]>summary')
+        .values()
+        .map((item) => item.textContent.trim())
+        .toArray() ?? [];
     // replace list (always exists)
     if (oldList && newList)
         oldList.replaceWith(newList);
@@ -127,7 +130,7 @@ export class PickerView extends FormAssociatedBase {
         };
     }
     #spawnPage = (entries, tag, parentGroupId, searchable = false, title) => {
-        debug(`${_a.name} #spawnPage`);
+        debug(`${PickerView.name} #spawnPage`);
         const body = tag === 'sheet-view'
             ? $(html `<dialog is="sheet-view">
                 <scroll-view>
@@ -219,7 +222,7 @@ export class PickerView extends FormAssociatedBase {
                 list?.appendChild(group);
             }
             else {
-                const btn = _a.#wrapOptionSpawnTag(el);
+                const btn = PickerView.#wrapOptionSpawnTag(el);
                 const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
                 btn.dataset.groupId = groupId;
                 btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
@@ -250,7 +253,7 @@ export class PickerView extends FormAssociatedBase {
         }
     };
     #renderButtons(source) {
-        debug(`${_a.name} #renderButtons`);
+        debug(`${PickerView.name} #renderButtons`);
         const { labels, icons } = Dictionary.flatten(source);
         this.#lastRenderedLabelMap = labels;
         this.#lastRenderedIconMap = icons;
@@ -360,11 +363,11 @@ export class PickerView extends FormAssociatedBase {
     //   this.#renderButtons({ mode: 'dictionary', source: dictionary })
     // }
     #renderSlotted = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        debug(`${PickerView.name} ⚡️ mutation`);
         this.#renderButtons(this.#resolveSource()); //this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] })
     };
     #renderValidityMsgs = (entries) => {
-        debug(`${_a.name} ⚡️ mutation`);
+        debug(`${PickerView.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #lastRenderedStyle; //string | null
@@ -398,53 +401,171 @@ export class PickerView extends FormAssociatedBase {
         return getInternals(this);
     }
     get template() {
-        if (!_a.#templates.has(this.pickerStyle))
+        // if (!PickerView.#templates.has(this.pickerStyle))
+        //   switch (this.pickerStyle) {
+        //     case 'sheet':
+        //     case 'navigation-link':
+        //       PickerView.#templates.set(
+        //         this.pickerStyle,
+        //         $(html`
+        //           <div 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>
+        //           </div>
+        //         `)
+        //       )
+        //       break
+        //     case 'menu':
+        //       PickerView.#templates.set(
+        //         this.pickerStyle,
+        //         $(html`
+        //           <div 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>
+        //           </div>
+        //         `)
+        //       )
+        //       break
+        //     case 'tabs':
+        //     case 'palette':
+        //     case 'radio-group':
+        //       PickerView.#templates.set(
+        //         this.pickerStyle,
+        //         $(html`
+        //           <div 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>
+        //           </div>
+        //         `)
+        //       )
+        //       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:
+        //       PickerView.#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 PickerView.#templates.get(this.pickerStyle)!
+        return PickerView.#templates.getOrInsertComputed(this.pickerStyle, () => {
             switch (this.pickerStyle) {
                 case 'sheet':
                 case 'navigation-link':
-                    _a.#templates.set(this.pickerStyle, $(html `
-              <div 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>
+                    return $(html `
+            <div part="root picker-stack">
+              <div part="root picker-label-stack">
+                <slot name="label"></slot>
               </div>
-            `));
-                    break;
+              <div part="root picker-input-stack">
+                <slot></slot>
+              </div>
+              <slot name="list" hidden></slot>
+              <slot name="validity-options" hidden></slot>
+            </div>
+          `);
                 case 'menu':
-                    _a.#templates.set(this.pickerStyle, $(html `
-              <div 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>
+                    return $(html `
+            <div part="root picker-stack">
+              <div part="root picker-label-stack">
+                <slot name="label"></slot>
               </div>
-            `));
-                    break;
+              <div part="root picker-input-stack">
+                <slot></slot>
+              </div>
+              <slot name="list" hidden></slot>
+              <slot name="validity-options" hidden></slot>
+            </div>
+          `);
                 case 'tabs':
                 case 'palette':
                 case 'radio-group':
-                    _a.#templates.set(this.pickerStyle, $(html `
-              <div 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>
+                    return $(html `
+            <div part="root picker-stack">
+              <div part="root picker-label-stack">
+                <slot name="label"></slot>
               </div>
-            `));
-                    break;
+              <div part="root picker-input-stack">
+                <slot></slot>
+              </div>
+              <slot name="list" hidden></slot>
+              <slot name="validity-options" hidden></slot>
+            </div>
+          `);
                 //   break
                 // case 'compact':
                 //   PickerView.#templates.set(
@@ -492,26 +613,25 @@ export class PickerView extends FormAssociatedBase {
                 //     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 $(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>`);
             }
-        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}")`);
+        debug(`${PickerView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             // case 'horizontal-radio-group-layout':
             //   if (oldValue === newValue) break
@@ -567,13 +687,13 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     disconnectedCallback() {
-        debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${PickerView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#validityObservers.unobserveAll();
         this.#observers.unobserveAll();
     }
     connectedCallback() {
-        debug(`${_a.name} ⚡️ connect`);
+        debug(`${PickerView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('localechange', () => {
             this.#renderSlotted([]);
         }, I18n.on).on());
@@ -597,7 +717,7 @@ export class PickerView extends FormAssociatedBase {
         return Dictionary.fromElements(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? []);
     }
     #render() {
-        debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
+        debug(`${PickerView.name} ⚡️ #render (${this.pickerStyle})`);
         // const style = this.getAttribute('picker-style')
         if (this.#lastRenderedStyle === this.pickerStyle)
             return; // skip if already applied
@@ -641,7 +761,7 @@ 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} ⚡️ trigger.${type}`);
+        debug(`${PickerView.name} ⚡️ trigger.${type}`);
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
@@ -658,7 +778,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handlePageBtnClick = async (evt) => {
-        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${PickerView.name} ⚡️ ${evt?.type}`);
         evt.stopImmediatePropagation();
         evt.preventDefault();
         const { currentTarget: btn } = evt;
@@ -681,7 +801,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handleClick({ type, target }) {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${PickerView.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         const btn = target.closest('button');
@@ -693,7 +813,7 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm();
     }
     #handleInput({ type, target }) {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${PickerView.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         switch (this.pickerStyle) {
@@ -711,7 +831,7 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${PickerView.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -720,7 +840,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleListSlotchange = ({ type, target: slot }) => {
-        debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${PickerView.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -729,31 +849,31 @@ export class PickerView extends FormAssociatedBase {
         this.#renderSlotted([]);
     };
     static #wrapOptionSpawnTag(node) {
-        debug(`${_a.name} #wrapOptionSpawnTag`);
+        debug(`${PickerView.name} #wrapOptionSpawnTag`);
         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(node)}
+          ${PickerView.#morphITSLabel(node)}
         </h-stack>
       </button>`, mount);
         return mount.firstElementChild; //btn
     }
     #wrapOptionTag(node) {
-        debug(`${_a.name} #wrapOptionTag`);
+        debug(`${PickerView.name} #wrapOptionTag`);
         const tag = node.value;
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
             case 'tabs':
-                render(_a.#morphTabsBtn({ name: this.#guuid, node, tag }), mount);
+                render(PickerView.#morphTabsBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             case 'palette':
-                render(_a.#morphPaletteBtn({ name: this.#guuid, node, tag }), mount);
+                render(PickerView.#morphPaletteBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             case 'radio-group':
-                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node, tag }), mount);
+                render(PickerView.#morphRadioGroupBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             default:
                 render(html `<button type="button" tabindex="0" value="${tag}">
@@ -761,7 +881,7 @@ export class PickerView extends FormAssociatedBase {
               <label-view data-role="check">
                 <image-view slot="icon" system-name="check"></image-view>
               </label-view>
-              ${_a.#morphITSLabel(node)}
+              ${PickerView.#morphITSLabel(node)}
             </h-stack>
           </button>`, mount);
                 return mount.firstElementChild; //btn
@@ -772,14 +892,14 @@ export class PickerView extends FormAssociatedBase {
             return html `<label tabindex="0">
         <h-stack distribution="fill" template="auto spacer" spacing="5">
           <input type="radio" name="${name}" value="${tag}" />
-          ${_a.#morphITSLabel(node)}
+          ${PickerView.#morphITSLabel(node)}
         </h-stack>
       </label>`;
         else
             return html `<label>
         <h-stack distribution="fill" template="auto spacer" spacing="5">
           <input type="radio" name="${name}" disabled />
-          ${_a.#morphITSLabel(node)}
+          ${PickerView.#morphITSLabel(node)}
         </h-stack>
       </label>`;
     }
@@ -789,7 +909,7 @@ export class PickerView extends FormAssociatedBase {
             return html `<label tabindex="0">
         <v-stack template="auto spacer" spacing="5">
           <input type="radio" name="${name}" value="${tag}" style="${style}" />
-          ${_a.#morphITSLabel(node)}
+          ${PickerView.#morphITSLabel(node)}
         </v-stack>
       </label>`;
         }
@@ -797,7 +917,7 @@ export class PickerView extends FormAssociatedBase {
             return html `<label>
         <v-stack template="auto spacer" spacing="5">
           <input type="radio" name="${name}" disabled />
-          ${_a.#morphITSLabel(node)}
+          ${PickerView.#morphITSLabel(node)}
         </v-stack>
       </label>`;
     }
@@ -820,13 +940,13 @@ export class PickerView extends FormAssociatedBase {
         if ('string' === typeof tag) {
             return html `<label tabindex="0">
         <input type="radio" name="${name}" value="${tag}" />
-        ${_a.#morphITSLabel(node)}
+        ${PickerView.#morphITSLabel(node)}
       </label>`;
         }
         else
             return html `<label>
         <input type="radio" name="${name}" disabled />
-        ${_a.#morphITSLabel(node)}
+        ${PickerView.#morphITSLabel(node)}
       </label>`;
     }
     static #morphITSLabel({ title, subtitle, systemImage }) {
@@ -839,17 +959,17 @@ export class PickerView extends FormAssociatedBase {
     </h-stack>`;
     }
     #wrapOptgroupTag(node) {
-        debug(`${_a.name} #wrapOptgroupTag`);
+        debug(`${PickerView.name} #wrapOptgroupTag`);
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
             case 'tabs':
-                render(_a.#morphTabsBtn({ name: this.#guuid, node }), mount);
+                render(PickerView.#morphTabsBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'palette':
-                render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
+                render(PickerView.#morphPaletteBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'radio-group':
-                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
+                render(PickerView.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             default:
                 render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
@@ -858,7 +978,7 @@ export class PickerView extends FormAssociatedBase {
                 <label-view data-role="check" style="visibility: hidden">
                   <image-view slot="icon" system-name="check"></image-view>
                 </label-view>
-                ${_a.#morphITSLabel(node)}
+                ${PickerView.#morphITSLabel(node)}
               </h-stack>
             </summary>
           </details>`, mount);
@@ -869,13 +989,13 @@ export class PickerView extends FormAssociatedBase {
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
             case 'tabs':
-                render(_a.#morphTabsBtn({ name: this.#guuid, node }), mount);
+                render(PickerView.#morphTabsBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'palette':
-                render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
+                render(PickerView.#morphPaletteBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'radio-group':
-                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
+                render(PickerView.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             default:
                 render(html `<menu-view tabindex="0">
@@ -883,14 +1003,14 @@ export class PickerView extends FormAssociatedBase {
               <label-view data-role="check" style="visibility: hidden">
                 <image-view slot="icon" system-name="check"></image-view>
               </label-view>
-              ${_a.#morphITSLabel(node)}
+              ${PickerView.#morphITSLabel(node)}
             </h-stack>
           </menu-view>`, mount);
                 return mount.firstElementChild;
         }
     }
     #reflectButtons(nodes, container) {
-        debug(`${_a.name} #reflectButtons`);
+        debug(`${PickerView.name} #reflectButtons`);
         const flatten = ['radio-group', 'palette', 'tabs'].includes(this.pickerStyle);
         for (const node of nodes) {
             if (DictEntry.isLeaf(node)) {
@@ -916,12 +1036,12 @@ export class PickerView extends FormAssociatedBase {
     // }
     // }
     #reflectLabel(value) {
-        debug(`${_a.name} #reflectLabel`);
+        debug(`${PickerView.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`);
+        debug(`${PickerView.name} #reflectSelectionOnButtons`);
         self.requestAnimationFrame(() => {
             this.ariaCurrent = this.#selection;
             const groupMap = Dictionary.index(this.#lastIndexedRoot);
@@ -932,7 +1052,10 @@ export class PickerView extends FormAssociatedBase {
                     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);
+                    const hasSelectedDescendant = details
+                        .querySelectorAll('button[value]')
+                        .values()
+                        .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
@@ -964,7 +1087,7 @@ export class PickerView extends FormAssociatedBase {
      * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
      */
     #reflectSelectionOnCurrentValueLabel() {
-        debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
+        debug(`${PickerView.name} #reflectSelectionOnCurrentValueLabel`);
         self.requestAnimationFrame(() => {
             switch (this.pickerStyle) {
                 case 'sheet':
@@ -1007,7 +1130,7 @@ export class PickerView extends FormAssociatedBase {
         });
     }
     #reflectTriggerHelp() {
-        debug(`${_a.name} #reflectTriggerHelp`);
+        debug(`${PickerView.name} #reflectTriggerHelp`);
         let trigger;
         switch (this.pickerStyle) {
             case 'sheet':
@@ -1065,7 +1188,7 @@ export class PickerView extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${PickerView.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor);
     };
     setCustomValidity = (message) => {
@@ -1092,4 +1215,3 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
 }
-_a = PickerView;