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

package/generated/components/table-view.js

@@ -1,14 +1,12 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { MutationObserverSingleton } from '../internal/class/mutation-observer-singleton';
-import { $, listActive, onoff } from '../internal/utils';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, debug, listActive, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
-const observers = new MutationObserverSingleton();
 export class TableView extends HTMLElement {
     #styleObserver;
     #compactToolbarItem;
-    #trackedElements = new Set();
     static #template;
     static get template() {
         return (this.#template ??= $(String.raw `
@@ -43,8 +41,6 @@ export class TableView extends HTMLElement {
     }
     #shadowRoot;
     #slots = new Map();
-    // #colSlot?: HTMLSlotElement
-    // #slot?: HTMLSlotElement
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
@@ -54,9 +50,7 @@ export class TableView extends HTMLElement {
         CleanupRegistry.register(this, () => {
             this.#slots = new Map();
         });
-        // this.#colSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=column]') ?? undefined
-        // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleSlotchange);
+        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleColumnSlotchange);
         // this.append(
         //   document.createRange().createContextualFragment(`<menu-view slot="header-trailing">
         //               <label-view slot="label" title="Delete"></label-view>
@@ -88,14 +82,14 @@ export class TableView extends HTMLElement {
         // )
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         this.#styleObserver?.disconnect();
-        observers.clearObservationsSet(this.#trackedElements);
+        this.#observers.unobserveAll();
         this.#compactToolbarItem = undefined;
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
         // console.log(999, this.#shadowRoot.querySelector('[part*=table-column-stack]'))
         this.#styleObserver = new CSSStyleObserver({
@@ -107,23 +101,17 @@ export class TableView extends HTMLElement {
         this.#styleObserver.observe(target, this.#handleStyleChange);
         Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
     }
-    #handleSlotchange = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target instanceof HTMLSlotElement && evt.target;
-        if (!slot)
+    #handleColumnSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement && slot))
             return;
-        const assigned = slot.assignedElements({ flatten: true });
-        observers.syncObservations(this.#trackedElements, assigned, this.#handleTagMutation);
+        const assigned = slot.assignedElements();
+        this.#observers.syncObservations(assigned);
         if (0 < assigned.length)
-            this.#handleTagMutation();
+            this.#renderColumns([]);
     };
-    #handleTagMutation = (entry) => {
-        console.debug(`${_a.name} ⚡️ mutation`);
-        // const sourceSlot = 0 < (this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []).length ? this.#slots?.get('column') : this.#slots?.get('column')
-        // const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view></menu-view>`))
-        // menu.innerHTML = `<label-view slot="label" system-image="dots-three" title="rtyty"></label-view>`
-        // for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? []) menu.insertAdjacentElement('beforeend', TableView.wrapTag(el, sourceSlot?.name))
-        //
+    #renderColumns = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
             this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
@@ -143,15 +131,10 @@ export class TableView extends HTMLElement {
             subTitle?.setAttribute('title', node.ariaSort ?? '');
             this.#compactToolbarItem.appendChild(btn);
         }
-        // const wasConnected = this.#compactToolbarItem?.isConnected
-        // this.#compactToolbarItem?.removeEventListener('click', this.#handleMenuClick)
-        // this.#compactToolbarItem?.remove()
-        // this.#compactToolbarItem = menu
-        // this.#compactToolbarItem?.addEventListener('click', this.#handleMenuClick)
-        // if (wasConnected) this.insertAdjacentElement('beforeend', this.#compactToolbarItem)
     };
+    #observers = new MutationObserverSet(this.#renderColumns);
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const target = this.#shadowRoot.querySelector('[part*=table-container]') ?? undefined;
         if (!target)
             return;
@@ -172,9 +155,8 @@ export class TableView extends HTMLElement {
                 break;
         }
     };
-    #handleMenuClick = (evt) => {
-        const target = evt.target instanceof HTMLElement && evt.target;
-        if (!target)
+    #handleMenuClick = ({ target }) => {
+        if (!(target instanceof HTMLElement && target))
             return;
         const btn = target.closest('button');
         if (!btn)

package/generated/components/text-field.js

@@ -1,8 +1,9 @@
 var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals, makeSlotchangeHandler } from '../internal/class/form-associated-base';
-import { $, compareBigDecimals, kebabCase, onoff, set } from '../internal/utils';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, compareBigDecimals, debug, kebabCase, onoff, set } from '../internal/utils';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @slot label
@@ -25,11 +26,16 @@ export class TextField extends FormAssociatedBase {
     <slot name="validity-options" hidden></slot>
   </label>`));
     }
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #shadowRoot;
     // #internals: ElementInternals
     #customValidity = '';
     // #validitiesSlot?: HTMLSlotElement
     #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
     #input;
     get #internals() {
         return getInternals(this);
@@ -44,7 +50,7 @@ export class TextField extends FormAssociatedBase {
             this.#slots = new Map();
         });
         CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#slots?.get('validity-options')).on(), 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
         this.#input = this.#shadowRoot.querySelector('input') ?? undefined;
         CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
         CleanupRegistry.register(this, onoff([
@@ -67,9 +73,10 @@ export class TextField extends FormAssociatedBase {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'keyboard-type':
                 switch (newValue) {
@@ -189,8 +196,17 @@ export class TextField extends FormAssociatedBase {
             set(this.#input, 'value', finalText); // if (this.text !== finalText) this.#input.value = finalText
         }
     }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        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([]);
+    };
     #handleFocusin = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (evt.target === this)
             this.#input?.focus();
     };
@@ -221,9 +237,9 @@ export class TextField extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('commit', { detail: { text: this.text }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target instanceof HTMLInputElement && evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement && input))
             return;
         evt.preventDefault();
         const data = this.#identity(evt.clipboardData?.getData('text') ?? ''); // number is now sanitized but contains edge cases like '+' and also global one separator that could be wither dot or decimal.
@@ -324,9 +340,9 @@ export class TextField extends FormAssociatedBase {
         }
     };
     #handleInputBeforeinput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target instanceof HTMLInputElement && evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement && input))
             return;
         if ('insertText' !== evt.inputType)
             return;
@@ -358,10 +374,9 @@ export class TextField extends FormAssociatedBase {
             // this.setValidity(prevValidity, prevValiditationMessage) // restore
         }
     };
-    #handleInputBlur = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target instanceof HTMLInputElement && evt.target;
-        if (!input)
+    #handleInputBlur = ({ type, target: input }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(input instanceof HTMLInputElement && input))
             return;
         if (0 === input.value.length)
             return;
@@ -371,7 +386,7 @@ export class TextField extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
     // Optional: form participation properties
@@ -453,7 +468,7 @@ export class TextField extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
     };
     setCustomValidity = (message) => {

package/generated/components/tool-bar-item-group.js

@@ -1,28 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ToolBarItemGroup_1;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-export class ToolBarItemGroup extends HTMLElement {
-    // static get observedAttributes() {
-    //   return ['preferred-fine-modal-placement']
-    // }
+import { adaptiveSlot } from '../internal/decorators';
+import { debug } from '../internal/utils';
+let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        console.debug(`${ToolBarItemGroup.name} ⚡️ connect`);
-        // if (!this.closest('[is=sheet-view]')) return
-        // if (!self.matchMedia('(pointer: fine)').matches) return
-        // const handler1 = toolbarRepositioner.bind(null, this)
-        // CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1 as unknown as EventListener, Snapshot.on).on())
-        // Snapshot.waitReady.then(() => {
-        //   toolbarRepositioner(
-        //     this,
-        //     new MediaQueryListEvent(`media-change`, {
-        //       matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-        //     })
-        //   ) // Initial check
-        // })
+        debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        console.debug(`${ToolBarItemGroup.name} ⚡️ disconnect`);
+        debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
-}
+};
+ToolBarItemGroup = ToolBarItemGroup_1 = __decorate([
+    adaptiveSlot()
+], ToolBarItemGroup);
+export { ToolBarItemGroup };

package/generated/components/tool-bar-item.js

@@ -1,7 +1,15 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ToolBarItem_1;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { adaptiveSlot } from '../internal/decorators';
+import { debug, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
 import { Snapshot } from '../snapshot';
-export class ToolBarItem extends HTMLElement {
+let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
     static get observedAttributes() {
         return ['slot', 'data-previous-slot', 'title-key'];
     }
@@ -10,40 +18,26 @@ export class ToolBarItem extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${ToolBarItem.name} ⚡️ disconnect`);
+        debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
         this.#mutationObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${ToolBarItem.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (evt) => {
-            const target = evt.target instanceof HTMLElement && evt.target;
-            if (!target)
+        debug(`${ToolBarItem_1.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, ({ target }) => {
+            if (!(target instanceof HTMLElement && target))
                 return true;
             if (target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());
-        // if (this.closest('tool-bar-item-group')) return
-        // if (!this.closest('[is=sheet-view]')) return
-        // if (!self.matchMedia('(pointer: fine)').matches) return
-        // const handler1 = toolbarRepositioner.bind(null, this)
-        // CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1 as unknown as EventListener, Snapshot.on).on())
-        // Snapshot.waitReady.then(() => {
-        //   toolbarRepositioner(
-        //     this,
-        //     new MediaQueryListEvent(`media-change`, {
-        //       matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-        //     })
-        //   ) // Initial check
-        // })
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${ToolBarItem.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'slot':
             case 'data-previous-slot':
-            case 'title-key':
+            case 'title-key': {
                 this.#mutationObserver?.disconnect();
                 const role = this.getAttribute('data-previous-slot') ?? this.getAttribute('slot') ?? '', tKey = this.getAttribute('title-key');
                 if (['confirmation-action', 'cancellation-action'].includes(role))
@@ -59,6 +53,11 @@ export class ToolBarItem extends HTMLElement {
                         });
                     });
                 break;
+            }
         }
     }
-}
+};
+ToolBarItem = ToolBarItem_1 = __decorate([
+    adaptiveSlot((el) => !el.closest('tool-bar-item-group'))
+], ToolBarItem);
+export { ToolBarItem };

package/generated/components/tool-bar.d.ts

@@ -1,8 +1,8 @@
 /**
- * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
  * @slot top-bar-leading - Places the item in the leading edge of the top bar
  * @slot top-bar-principal - Places the item in the middle of the top bar
  * @slot top-bar-trailing - Places the item in the trailing edge of the top bar

package/generated/components/tool-bar.js

@@ -1,12 +1,12 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 /**
- * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
+ * @slot cancellation-action - The item represents a cancellation action for a modal interface. Places the item in the leading edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot primary-action - The item represents a primary action. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
  * @slot confirmation-action - The item represents a confirmation action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
- * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the trailing edge of the top bar and on the trailing edge of the bottom bar when fine modal
+ * @slot destructive-action - The item represents a destructive action for a modal interface. Places the item in the leading edge of the top bar and on the leading edge of the bottom bar when fine modal
  * @slot top-bar-leading - Places the item in the leading edge of the top bar
  * @slot top-bar-principal - Places the item in the middle of the top bar
  * @slot top-bar-trailing - Places the item in the trailing edge of the top bar
@@ -22,6 +22,7 @@ export class ToolBar extends HTMLElement {
     <div part="root top-bar">
     <div part="root toolbar-leading-stack">
       <slot name="cancellation-action"></slot>
+      <slot name="destructive-action"></slot>
       <slot name="top-bar-leading"></slot>
     </div>
     <div part="root toolbar-principal-stack">
@@ -31,7 +32,6 @@ export class ToolBar extends HTMLElement {
       <slot name="top-bar-trailing"></slot>
       <slot name="primary-action"></slot>
       <slot name="confirmation-action"></slot>
-      <slot name="destructive-action"></slot>
     </div>
   </div>
   <div part="root bottom-bar">
@@ -56,7 +56,7 @@ export class ToolBar extends HTMLElement {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         // NOTE: wait for config
         // Snapshot.waitReady.then(() => {
         for (const el of this.#shadowRoot.querySelectorAll(`[part*="toolbar-leading-stack"],[part*="toolbar-trailing-stack"]`))
@@ -64,11 +64,11 @@ export class ToolBar extends HTMLElement {
         // })
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         observers.unobserve(this);
     }
     #measureStacks(entry) {
-        console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (this.closest('[hidden]'))
             return;
         const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';

package/generated/components/v-keyboard.js

@@ -1,6 +1,6 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, frame, onoff, sleep } from '../internal/utils';
+import { $, debug, frame, onoff, sleep } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 /**
  * BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
@@ -22,11 +22,11 @@ export class VKeyboard extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         this.inert = true;
         CleanupRegistry.register(this, onoff([
             { types: 'scroll', listener: this.#handleWindowScroll },
@@ -58,13 +58,13 @@ export class VKeyboard extends HTMLElement {
         self.scrollTo(0, 0);
     };
     #handleWindowOrientationchange = async () => {
-        console.debug(`${_a.name} ⚡️ orientationchange`);
+        debug(`${_a.name} ⚡️ orientationchange`);
         if (!(await frame(this)))
             return; //self.requestAnimationFrame(this.#ifKeyboardScrollIntoActiveElement)
         this.#ifKeyboardScrollIntoActiveElement();
     };
     #handleBodyFocusin = async () => {
-        console.debug(`${_a.name} ⚡️ focusin`);
+        debug(`${_a.name} ⚡️ focusin`);
         await sleep(100); // self.setTimeout(this.#ifKeyboardScrollIntoActiveElement, 100)
         if (!this.isConnected)
             return;

package/generated/components/v-stack.js

@@ -1,3 +1,4 @@
+import { debug } from '../internal/utils';
 /**
  * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
  *
@@ -8,9 +9,9 @@ export class VStack extends HTMLElement {
         super();
     }
     connectedCallback() {
-        console.debug(`${VStack.name} ⚡️ connect`);
+        debug(`${VStack.name} ⚡️ connect`);
     }
     disconnectedCallback() {
-        console.debug(`${VStack.name} ⚡️ disconnect`);
+        debug(`${VStack.name} ⚡️ disconnect`);
     }
 }