@swiftwc/ui 1.0.1-canary.4 → 1.0.1-canary.5

package/generated/components/date-picker.js

@@ -1,3 +1,4 @@
+var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
@@ -38,7 +39,7 @@ export class DatePicker extends FormAssociatedBase {
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #renderValidityMsgs = (entries) => {
-        debug(`${DatePicker.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #shadowRoot;
@@ -75,7 +76,7 @@ export class DatePicker extends FormAssociatedBase {
         //       break
         //   }
         // return DatePicker.#templates.get(this.datePickerStyle)!
-        return DatePicker.#templates.getOrInsertComputed(this.datePickerStyle, () => {
+        return _a.#templates.getOrInsertComputed(this.datePickerStyle, () => {
             switch (this.datePickerStyle) {
                 default:
                     return $(html `<label part="root date-picker-stack">
@@ -99,7 +100,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${DatePicker.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
                 // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
@@ -152,7 +153,7 @@ export class DatePicker extends FormAssociatedBase {
         return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        debug(`${DatePicker.name} ⚡️ #render (${this.datePickerStyle})`);
+        debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM
@@ -196,7 +197,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${DatePicker.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -216,15 +217,15 @@ export class DatePicker extends FormAssociatedBase {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
-            if (DatePicker.#min(input) > parsedValue)
+            if (_a.#min(input) > parsedValue)
                 finalValue = '';
-            else if (DatePicker.#max(input) < parsedValue)
+            else if (_a.#max(input) < parsedValue)
                 finalValue = '';
             input.value = finalValue;
         }
     }
     #handleClick = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target } = evt;
         if (!(target instanceof HTMLElement))
             return;
@@ -267,7 +268,7 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -289,7 +290,7 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         const { target: input } = evt;
         if (!(input instanceof HTMLInputElement))
             return;
@@ -312,7 +313,7 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        debug(`${DatePicker.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
@@ -331,25 +332,25 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
     #handleInputBlur = ({ target, type }) => {
-        debug(`${DatePicker.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLInputElement))
             return;
         const input = target;
         if (0 === input.value.length)
             return;
-        const finalText = `${clamp(this.value[input.name] ?? '0', DatePicker.#min(input), DatePicker.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
+        const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
         if (!set(input, 'value', finalText))
             return;
         // this.selection = this.selection
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        debug(`${DatePicker.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     /**
@@ -460,7 +461,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${DatePicker.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
     };
     setCustomValidity = (message) => {
@@ -489,3 +490,4 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
 }
+_a = DatePicker;

package/generated/components/fine-tooltip.js

@@ -1,3 +1,4 @@
+var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, debug, onoff } from '../internal/utils';
 import { html } from '../tpl';
@@ -19,7 +20,7 @@ export class FineTooltip extends HTMLElement {
                 this.#render(target.getAttribute(attributeName));
     };
     #handleMeasure = ([{ target, borderBoxSize }]) => {
-        debug(`${FineTooltip.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (target.hasAttribute('closing'))
             return;
         if (!(target instanceof HTMLElement))
@@ -49,7 +50,7 @@ export class FineTooltip extends HTMLElement {
             label.removeAttribute('title');
     };
     connectedCallback() {
-        debug(`${FineTooltip.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.removeAttribute('closing');
         this.popover = 'manual';
         this.inert = true;
@@ -58,7 +59,7 @@ export class FineTooltip extends HTMLElement {
         this.showPopover();
     }
     disconnectedCallback() {
-        debug(`${FineTooltip.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#resizeObserver.unobserve(this);
         this.#mutationObserver?.disconnect();
         this.#mutationObserver2?.disconnect();
@@ -104,3 +105,4 @@ export class FineTooltip extends HTMLElement {
         });
     }
 }
+_a = FineTooltip;

package/generated/components/menu-view.js

@@ -1,3 +1,4 @@
+var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, debug, onoff, touchGlass } from '../internal/utils';
 import { queryMorph } from '../morphdom';
@@ -33,14 +34,14 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${MenuView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'open':
                 if (!this.#dialog)
                     break;
                 this.#dialog.inert = null === newValue;
                 if (null === newValue && this.#dialog.open) {
-                    debug(`${MenuView.name} ⚡️ will-close`);
+                    debug(`${_a.name} ⚡️ will-close`);
                     this.setAttribute('closing', '');
                     Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
                         if (!this.hasAttribute('closing'))
@@ -50,7 +51,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    debug(`${MenuView.name} ⚡️ will-open`);
+                    debug(`${_a.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -63,14 +64,14 @@ export class MenuView extends HTMLElement {
         }
     }
     disconnectedCallback() {
-        debug(`${MenuView.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
         summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
         dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${MenuView.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
         const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
         CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
@@ -94,7 +95,7 @@ export class MenuView extends HTMLElement {
         dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
     }
     #handleDialogClick = ({ type, target }) => {
-        debug(`${MenuView.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         if (target.matches('dialog'))
@@ -111,19 +112,20 @@ export class MenuView extends HTMLElement {
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        debug(`${MenuView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }
+_a = MenuView;

package/generated/components/navigation-large-title.js

@@ -1,3 +1,4 @@
+var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { add, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
@@ -82,13 +83,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        debug(`${NavigationLargeTitle.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        debug(`${NavigationLargeTitle.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -111,7 +112,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        debug(`${NavigationLargeTitle.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -156,7 +157,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        debug(`${NavigationLargeTitle.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)
@@ -180,3 +181,4 @@ export class NavigationLargeTitle extends HTMLElement {
             slowHideShow(isIntersecting ? 'show' : 'hide', this);
     };
 }
+_a = NavigationLargeTitle;

package/generated/components/picker-view.js

@@ -1,3 +1,4 @@
+var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { DictEntry, Dictionary } from '../internal/class/dict-entry';
@@ -130,7 +131,7 @@ export class PickerView extends FormAssociatedBase {
         };
     }
     #spawnPage = (entries, tag, parentGroupId, searchable = false, title) => {
-        debug(`${PickerView.name} #spawnPage`);
+        debug(`${_a.name} #spawnPage`);
         const body = tag === 'sheet-view'
             ? $(html `<dialog is="sheet-view">
                 <scroll-view>
@@ -222,7 +223,7 @@ export class PickerView extends FormAssociatedBase {
                 list?.appendChild(group);
             }
             else {
-                const btn = PickerView.#wrapOptionSpawnTag(el);
+                const btn = _a.#wrapOptionSpawnTag(el);
                 const groupId = parentGroupId ? `${parentGroupId}.${i}` : `${i}`;
                 btn.dataset.groupId = groupId;
                 btn.addEventListener('click', this.#makeGroupClickHandler(el, groupId));
@@ -253,7 +254,7 @@ export class PickerView extends FormAssociatedBase {
         }
     };
     #renderButtons(source) {
-        debug(`${PickerView.name} #renderButtons`);
+        debug(`${_a.name} #renderButtons`);
         const { labels, icons } = Dictionary.flatten(source);
         this.#lastRenderedLabelMap = labels;
         this.#lastRenderedIconMap = icons;
@@ -363,11 +364,11 @@ export class PickerView extends FormAssociatedBase {
     //   this.#renderButtons({ mode: 'dictionary', source: dictionary })
     // }
     #renderSlotted = (entries) => {
-        debug(`${PickerView.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.#renderButtons(this.#resolveSource()); //this.#renderButtons({ mode: 'list', source: this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? [] })
     };
     #renderValidityMsgs = (entries) => {
-        debug(`${PickerView.name} ⚡️ mutation`);
+        debug(`${_a.name} ⚡️ mutation`);
         this.setValidity(this.validity, this.validationMessage);
     };
     #lastRenderedStyle; //string | null
@@ -522,7 +523,7 @@ export class PickerView extends FormAssociatedBase {
         //       break
         //   }
         // return PickerView.#templates.get(this.pickerStyle)!
-        return PickerView.#templates.getOrInsertComputed(this.pickerStyle, () => {
+        return _a.#templates.getOrInsertComputed(this.pickerStyle, () => {
             switch (this.pickerStyle) {
                 case 'sheet':
                 case 'navigation-link':
@@ -631,7 +632,7 @@ export class PickerView extends FormAssociatedBase {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        debug(`${PickerView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             // case 'horizontal-radio-group-layout':
             //   if (oldValue === newValue) break
@@ -687,13 +688,13 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     disconnectedCallback() {
-        debug(`${PickerView.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#validityObservers.unobserveAll();
         this.#observers.unobserveAll();
     }
     connectedCallback() {
-        debug(`${PickerView.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff('localechange', () => {
             this.#renderSlotted([]);
         }, I18n.on).on());
@@ -717,7 +718,7 @@ export class PickerView extends FormAssociatedBase {
         return Dictionary.fromElements(this.#slots?.get('list')?.assignedElements({ flatten: true }) ?? []);
     }
     #render() {
-        debug(`${PickerView.name} ⚡️ #render (${this.pickerStyle})`);
+        debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
         // const style = this.getAttribute('picker-style')
         if (this.#lastRenderedStyle === this.pickerStyle)
             return; // skip if already applied
@@ -761,7 +762,7 @@ export class PickerView extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection: this.#selection }, bubbles: true, composed: true }));
     };
     #handleTriggerClick = async ({ type, target }) => {
-        debug(`${PickerView.name} ⚡️ trigger.${type}`);
+        debug(`${_a.name} ⚡️ trigger.${type}`);
         if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
@@ -778,7 +779,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handlePageBtnClick = async (evt) => {
-        debug(`${PickerView.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         evt.stopImmediatePropagation();
         evt.preventDefault();
         const { currentTarget: btn } = evt;
@@ -801,7 +802,7 @@ export class PickerView extends FormAssociatedBase {
         });
     };
     #handleClick({ type, target }) {
-        debug(`${PickerView.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         const btn = target.closest('button');
@@ -813,7 +814,7 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm();
     }
     #handleInput({ type, target }) {
-        debug(`${PickerView.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(target instanceof HTMLElement))
             return;
         switch (this.pickerStyle) {
@@ -831,7 +832,7 @@ export class PickerView extends FormAssociatedBase {
         }
     }
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
-        debug(`${PickerView.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -840,7 +841,7 @@ export class PickerView extends FormAssociatedBase {
         this.#renderValidityMsgs([]);
     };
     #handleListSlotchange = ({ type, target: slot }) => {
-        debug(`${PickerView.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
@@ -849,31 +850,31 @@ export class PickerView extends FormAssociatedBase {
         this.#renderSlotted([]);
     };
     static #wrapOptionSpawnTag(node) {
-        debug(`${PickerView.name} #wrapOptionSpawnTag`);
+        debug(`${_a.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>
-          ${PickerView.#morphITSLabel(node)}
+          ${_a.#morphITSLabel(node)}
         </h-stack>
       </button>`, mount);
         return mount.firstElementChild; //btn
     }
     #wrapOptionTag(node) {
-        debug(`${PickerView.name} #wrapOptionTag`);
+        debug(`${_a.name} #wrapOptionTag`);
         const tag = node.value;
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
             case 'tabs':
-                render(PickerView.#morphTabsBtn({ name: this.#guuid, node, tag }), mount);
+                render(_a.#morphTabsBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             case 'palette':
-                render(PickerView.#morphPaletteBtn({ name: this.#guuid, node, tag }), mount);
+                render(_a.#morphPaletteBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             case 'radio-group':
-                render(PickerView.#morphRadioGroupBtn({ name: this.#guuid, node, tag }), mount);
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node, tag }), mount);
                 return mount.firstElementChild; //btn
             default:
                 render(html `<button type="button" tabindex="0" value="${tag}">
@@ -881,7 +882,7 @@ export class PickerView extends FormAssociatedBase {
               <label-view data-role="check">
                 <image-view slot="icon" system-name="check"></image-view>
               </label-view>
-              ${PickerView.#morphITSLabel(node)}
+              ${_a.#morphITSLabel(node)}
             </h-stack>
           </button>`, mount);
                 return mount.firstElementChild; //btn
@@ -892,14 +893,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}" />
-          ${PickerView.#morphITSLabel(node)}
+          ${_a.#morphITSLabel(node)}
         </h-stack>
       </label>`;
         else
             return html `<label>
         <h-stack distribution="fill" template="auto spacer" spacing="5">
           <input type="radio" name="${name}" disabled />
-          ${PickerView.#morphITSLabel(node)}
+          ${_a.#morphITSLabel(node)}
         </h-stack>
       </label>`;
     }
@@ -909,7 +910,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}" />
-          ${PickerView.#morphITSLabel(node)}
+          ${_a.#morphITSLabel(node)}
         </v-stack>
       </label>`;
         }
@@ -917,7 +918,7 @@ export class PickerView extends FormAssociatedBase {
             return html `<label>
         <v-stack template="auto spacer" spacing="5">
           <input type="radio" name="${name}" disabled />
-          ${PickerView.#morphITSLabel(node)}
+          ${_a.#morphITSLabel(node)}
         </v-stack>
       </label>`;
     }
@@ -940,13 +941,13 @@ export class PickerView extends FormAssociatedBase {
         if ('string' === typeof tag) {
             return html `<label tabindex="0">
         <input type="radio" name="${name}" value="${tag}" />
-        ${PickerView.#morphITSLabel(node)}
+        ${_a.#morphITSLabel(node)}
       </label>`;
         }
         else
             return html `<label>
         <input type="radio" name="${name}" disabled />
-        ${PickerView.#morphITSLabel(node)}
+        ${_a.#morphITSLabel(node)}
       </label>`;
     }
     static #morphITSLabel({ title, subtitle, systemImage }) {
@@ -959,17 +960,17 @@ export class PickerView extends FormAssociatedBase {
     </h-stack>`;
     }
     #wrapOptgroupTag(node) {
-        debug(`${PickerView.name} #wrapOptgroupTag`);
+        debug(`${_a.name} #wrapOptgroupTag`);
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
             case 'tabs':
-                render(PickerView.#morphTabsBtn({ name: this.#guuid, node }), mount);
+                render(_a.#morphTabsBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'palette':
-                render(PickerView.#morphPaletteBtn({ name: this.#guuid, node }), mount);
+                render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'radio-group':
-                render(PickerView.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             default:
                 render(html `<details is="disclosure-group" disclosure-style="marker-trailing">
@@ -978,7 +979,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>
-                ${PickerView.#morphITSLabel(node)}
+                ${_a.#morphITSLabel(node)}
               </h-stack>
             </summary>
           </details>`, mount);
@@ -989,13 +990,13 @@ export class PickerView extends FormAssociatedBase {
         const mount = document.createElement('div');
         switch (this.pickerStyle) {
             case 'tabs':
-                render(PickerView.#morphTabsBtn({ name: this.#guuid, node }), mount);
+                render(_a.#morphTabsBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'palette':
-                render(PickerView.#morphPaletteBtn({ name: this.#guuid, node }), mount);
+                render(_a.#morphPaletteBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             case 'radio-group':
-                render(PickerView.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
+                render(_a.#morphRadioGroupBtn({ name: this.#guuid, node }), mount);
                 return mount.firstElementChild;
             default:
                 render(html `<menu-view tabindex="0">
@@ -1003,14 +1004,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>
-              ${PickerView.#morphITSLabel(node)}
+              ${_a.#morphITSLabel(node)}
             </h-stack>
           </menu-view>`, mount);
                 return mount.firstElementChild;
         }
     }
     #reflectButtons(nodes, container) {
-        debug(`${PickerView.name} #reflectButtons`);
+        debug(`${_a.name} #reflectButtons`);
         const flatten = ['radio-group', 'palette', 'tabs'].includes(this.pickerStyle);
         for (const node of nodes) {
             if (DictEntry.isLeaf(node)) {
@@ -1036,12 +1037,12 @@ export class PickerView extends FormAssociatedBase {
     // }
     // }
     #reflectLabel(value) {
-        debug(`${PickerView.name} #reflectLabel`);
+        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(`${PickerView.name} #reflectSelectionOnButtons`);
+        debug(`${_a.name} #reflectSelectionOnButtons`);
         self.requestAnimationFrame(() => {
             this.ariaCurrent = this.#selection;
             const groupMap = Dictionary.index(this.#lastIndexedRoot);
@@ -1087,7 +1088,7 @@ export class PickerView extends FormAssociatedBase {
      * Overwrite cvlabel with the label prop of the current(find[value === #selection]) option/dictentry
      */
     #reflectSelectionOnCurrentValueLabel() {
-        debug(`${PickerView.name} #reflectSelectionOnCurrentValueLabel`);
+        debug(`${_a.name} #reflectSelectionOnCurrentValueLabel`);
         self.requestAnimationFrame(() => {
             switch (this.pickerStyle) {
                 case 'sheet':
@@ -1130,7 +1131,7 @@ export class PickerView extends FormAssociatedBase {
         });
     }
     #reflectTriggerHelp() {
-        debug(`${PickerView.name} #reflectTriggerHelp`);
+        debug(`${_a.name} #reflectTriggerHelp`);
         let trigger;
         switch (this.pickerStyle) {
             case 'sheet':
@@ -1188,7 +1189,7 @@ export class PickerView extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        debug(`${PickerView.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor);
     };
     setCustomValidity = (message) => {
@@ -1215,3 +1216,4 @@ export class PickerView extends FormAssociatedBase {
         this.#sendValueToForm(false);
     }
 }
+_a = PickerView;