@swiftwc/ui 0.0.0-dev.7 → 0.0.0-dev.71

package/generated/components/toggle-view.js

@@ -0,0 +1,222 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, devFlags, kebabCase, onoff, renderLabel } from '../internal/utils';
+const toggleStyles = ['switch', 'button'];
+/**
+ * @slot label
+ * @slot validity-options
+ */
+export class ToggleView extends FormAssociatedBase {
+    static get observedAttributes() {
+        return ['label', 'name', 'value', 'is-on', 'keyboard-type', 'required', 'disabled'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <label part="root toggle-stack">
+    <div part="root toggle-label-stack">
+      <slot name="label"></slot>
+    </div>
+    <div part="root toggle-input-stack">
+      <!--<input type="checkbox" part="root input toggle-form-input">-->
+      <div part="root toggle-form-input" tabindex="0"></div>
+    </div>
+    <slot name="validity-options" hidden></slot>
+  </label>`));
+    }
+    #renderValidityMsgs = (entries) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
+    #shadowRoot;
+    #customValidity = '';
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    #input;
+    #value = 'on';
+    #isOn = false;
+    #connected = false;
+    get #internals() {
+        return getInternals(this);
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        CleanupRegistry.unregister(this, 'validities');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleValiditiesSlotchange, this.#slots?.get('validity-options')).on(), 'validities');
+        this.#input = this.#shadowRoot.querySelector('[part*=toggle-form-input]') ?? undefined;
+        this.#input?.addEventListener('click', () => {
+            this.isOn = !this.isOn;
+            this.#sendValueToForm(this.#connected);
+        });
+        CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
+        CleanupRegistry.register(this, onoff([{ types: 'keydown', listener: this.#handleInputKeydown }], this.#input).on());
+        // CleanupRegistry.register(this, onoff([{ types: 'input', listener: this.#handleInputInput }], this.#input).on())
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'value':
+                this.value = String(newValue); // this.#input?.setAttribute('checked', newValue ?? '')
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'is-on':
+                this.isOn = newValue !== null; // this.#input?.setAttribute('checked', newValue ?? '')
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'required':
+                // this.#input?.setAttribute(name, newValue ?? '')
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'name':
+                this.#sendValueToForm(this.#connected);
+                break;
+            case 'label':
+                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                break;
+            case 'disabled':
+                for (const el of this.#shadowRoot.querySelectorAll('input'))
+                    el.toggleAttribute('disabled', !newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // finally
+        // if (this.hasAttribute('value')) this.value = this.getAttribute('value') ?? ''
+        if (this.hasAttribute('is-on'))
+            this.isOn = this.hasAttribute('is-on');
+        this.#sendValueToForm(false);
+        this.#connected = true;
+    }
+    get toggleStyle() {
+        return toggleStyles.includes(this.getAttribute('toggle-style') ?? '') ? this.getAttribute('toggle-style') : 'switch';
+    }
+    get isOn() {
+        return this.#isOn;
+    }
+    set isOn(v) {
+        this.#isOn = Boolean(v);
+        this.#value = this.#isOn ? (this.getAttribute('value') ?? 'on') : null;
+        this.ariaChecked = `${this.#isOn}`;
+    }
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        this.#renderValidityMsgs([]);
+    };
+    #handleFocusin = ({ type, target }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (target === this)
+            this.#input?.focus();
+    };
+    #sendValueToForm = (dispatchEvent = true) => {
+        // input.value has already been updated/synced !!
+        if (this.matches(':disabled'))
+            return this.setValidity({});
+        if (this.hasAttribute('required') && !this.isOn) {
+            this.setValidity({ valueMissing: true });
+        }
+        else {
+            this.setValidity({});
+        }
+        const entries = new FormData();
+        if (this.value)
+            entries.append(this.name, this.value);
+        this.#internals.setFormValue(entries);
+        if (dispatchEvent)
+            this.dispatchEvent(new CustomEvent('commit', { detail: { value: this.value, isOn: this.isOn }, bubbles: true, composed: true }));
+    };
+    #handleInputKeydown = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.isOn = !this.isOn;
+        this.#sendValueToForm();
+    };
+    #handleInputInput = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.#sendValueToForm();
+    };
+    // Optional: form participation properties
+    get name() {
+        return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(v) {
+        this.#value = this.isOn ? String(v) : null;
+    }
+    setValidity = (flags, message, anchor) => {
+        // let msg
+        // if (message)
+        for (const k in flags) {
+            const key = k; // ✅ type-safe cast
+            if (true !== flags[key])
+                continue;
+            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
+                if (!el.matches('option'))
+                    continue;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
+                    break;
+                }
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
+                    break;
+                }
+            }
+        }
+        if (!message)
+            for (const k in flags) {
+                const key = k; // ✅ type-safe cast
+                if (true !== flags[key])
+                    continue;
+                message = kebabCase(key);
+                break;
+            }
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ validity-change`);
+        return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#input);
+    };
+    setCustomValidity = (message) => {
+        this.#customValidity = message;
+        if (this.#customValidity)
+            this.#internals.setValidity({ ...this.#internals.validity, customError: true }, message);
+        else
+            this.#sendValueToForm(false);
+    };
+    formAssociatedCallback = (form) => {
+        this.#sendValueToForm();
+    };
+    formDisabledCallback = (disabled) => {
+        for (const el of this.#shadowRoot.querySelectorAll('input'))
+            el.toggleAttribute('disabled', !disabled);
+    };
+    formResetCallback = () => {
+        this.value = '';
+        this.#sendValueToForm();
+    };
+}
+_a = ToggleView;

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

@@ -0,0 +1,5 @@
+export declare class ToolBarItemGroup extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,28 @@
+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';
+import { adaptiveSlot } from '../internal/decorators';
+import { devFlags } from '../internal/utils';
+let ToolBarItemGroup = ToolBarItemGroup_1 = class ToolBarItemGroup extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItemGroup_1.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItemGroup_1.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+};
+ToolBarItemGroup = ToolBarItemGroup_1 = __decorate([
+    adaptiveSlot()
+], ToolBarItemGroup);
+export { ToolBarItemGroup };

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

@@ -0,0 +1,8 @@
+export declare class ToolBarItem extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,66 @@
+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 { adaptiveSlot } from '../internal/decorators';
+import { devFlags, ensurePlaceholder, onoff, touchGlass } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+let ToolBarItem = ToolBarItem_1 = class ToolBarItem extends HTMLElement {
+    static get observedAttributes() {
+        return ['slot', 'data-previous-slot', 'title-key'];
+    }
+    #mutationObserver;
+    constructor() {
+        super();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'slot':
+            case 'data-previous-slot':
+            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))
+                    Snapshot.waitReady.then(() => {
+                        ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        this.#mutationObserver = new MutationObserver((mutations) => {
+                            for (const { target } of mutations)
+                                if (target instanceof HTMLElement)
+                                    ensurePlaceholder(this.querySelector(':scope>button'), role, tKey);
+                        });
+                        this.#mutationObserver.observe(this, {
+                            childList: true,
+                        });
+                    });
+                break;
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ disconnect`);
+        this.#mutationObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ToolBarItem_1.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.closest('menu-view[open]'))
+                return false;
+            return true;
+        }), this).on());
+    }
+};
+ToolBarItem = ToolBarItem_1 = __decorate([
+    adaptiveSlot((el) => !el.closest('tool-bar-item-group'))
+], ToolBarItem);
+export { ToolBarItem };

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

@@ -0,0 +1,19 @@
+/**
+ * @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 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
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
+export declare class ToolBar extends HTMLElement {
+    #private;
+    static get template(): DocumentFragment;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/tool-bar.js

@@ -0,0 +1,93 @@
+var _a;
+import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
+import { $, devFlags } 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 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 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
+ * @slot bottom-bar-leading - Places the item in the leading edge of the bottom bar
+ * @slot bottom-bar-principal - Places the item in the middle of the bottom bar
+ * @slot bottom-bar-trailing - Places the item in the trailing edge of the bottom bar
+ */
+export class ToolBar extends HTMLElement {
+    static #template;
+    static get template() {
+        // <!--exportparts="toolbar-leading-stack,toolbar-principal-stack,toolbar-trailing-stack"-->
+        return (this.#template ??= $(String.raw `
+    <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">
+      <slot name="top-bar-principal"></slot>
+    </div>
+    <div part="root toolbar-trailing-stack">
+      <slot name="top-bar-trailing"></slot>
+      <slot name="primary-action"></slot>
+      <slot name="confirmation-action"></slot>
+    </div>
+  </div>
+  <div part="root bottom-bar">
+    <div part="root toolbar-leading-stack">
+      <slot name="bottom-bar-leading"></slot>
+    </div>
+    <div part="root toolbar-principal-stack">
+      <slot name="bottom-bar-principal"></slot>
+    </div>
+    <div part="root toolbar-trailing-stack">
+      <slot name="bottom-bar-trailing"></slot>
+    </div>
+  </div>`));
+    }
+    #shadowRoot;
+    get #scrollView() {
+        return this.parentElement?.querySelector(':scope>scroll-view') ?? undefined; //this.previousElementSibling ?? undefined
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.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"]`))
+            observers.observe(el, this.#measureStacks.bind(this));
+        // })
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
+    }
+    #measureStacks(entry) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        if (this.closest('[hidden]'))
+            return;
+        const leading = 'toolbar-leading-stack', trailing = 'toolbar-trailing-stack';
+        const parentMap = {
+            'top-bar': 'navbar',
+            'bottom-bar': 'toolbar', //'bottombar',
+        };
+        const { contentRect: { width }, target, } = entry;
+        const parentPart = target.parentElement?.part.contains('top-bar') ? 'top-bar' : target.parentElement?.part.contains('bottom-bar') ? 'bottom-bar' : null;
+        if (!parentPart)
+            return;
+        const side = target.part.contains(leading) ? 'inline-start' : target.part.contains(trailing) ? 'inline-end' : null;
+        if (!side)
+            return;
+        const prop = `--${parentMap[parentPart]}-padding-${side}`;
+        this.#scrollView?.style?.setProperty(prop, `${Math.round(width)}px`); // $.prop(prop, `${Math.round(width)}px`, this.#scrollView) //
+    }
+}
+_a = ToolBar;

package/generated/components/v-keyboard.d.ts

@@ -1,6 +1,10 @@
 /**
  * BUG: Safari on IOS reports inaccurate innerHeight (which is what we really want) on orientationchange.
  * So we live with a pescy body-scrollbar that shows up on resize on desktops.
+ *
+ * @summary Required component, used to handle the virtual keyboard on touch devices.
+ *
+ * @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
  */
 export declare class VKeyboard extends HTMLElement {
     #private;

package/generated/components/v-keyboard.js

@@ -1,87 +1,89 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _a, _VKeyboard_shouldKeyboardBeOpenCallback, _VKeyboard_handleWindowScroll, _VKeyboard_handleVisualViewportResize, _VKeyboard_handleWindowOrientationChange, _VKeyboard_handleBodyFocusIn, _VKeyboard_ifKeyboardScrollIntoActiveElement;
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, devFlags, 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.
  * So we live with a pescy body-scrollbar that shows up on resize on desktops.
+ *
+ * @summary Required component, used to handle the virtual keyboard on touch devices.
+ *
+ * @attr {Inter} system-font - Prefers the "Inter" font family, if loaded.
  */
 export class VKeyboard extends HTMLElement {
+    /**
+     * Change like this:
+     * document.querySelector('v-keyboard').shouldKeyboardBeOpen = () => document.activeElement.tagName === 'INPUT'
+     */
+    #shouldKeyboardBeOpenCallback = () => {
+        return 'INPUT' === document.activeElement?.tagName && 'text' === document.activeElement?.getAttribute('type');
+    };
     constructor() {
         super();
-        /**
-         * Change like this:
-         * document.querySelector('v-keyboard').shouldKeyboardBeOpen = () => document.activeElement.tagName === 'INPUT'
-         */
-        _VKeyboard_shouldKeyboardBeOpenCallback.set(this, () => {
-            return ('INPUT' === document.activeElement?.tagName &&
-                'text' === document.activeElement?.getAttribute('type'));
-        });
-        _VKeyboard_handleWindowScroll.set(this, () => {
-            self.scrollTo(0, 0);
-        });
-        _VKeyboard_handleVisualViewportResize.set(this, () => {
-            const dvh = self.visualViewport?.height ?? 0, fullLvh = this.offsetHeight;
-            const diff = Math.abs(self.outerHeight - (__classPrivateFieldGet(this, _VKeyboard_shouldKeyboardBeOpenCallback, "f").call(this) ? dvh : fullLvh));
-            document.documentElement.style.setProperty('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`);
-            document.documentElement.style.setProperty('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`);
-            document.documentElement.style.setProperty('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`);
-            // @ts-expect-error
-            if (import.meta?.env?.DEV) {
-                // @ts-expect-error
-                document.querySelector('#console0').innerHTML =
-                    `${__classPrivateFieldGet(this, _VKeyboard_shouldKeyboardBeOpenCallback, "f").call(this)} (${diff}) (${self.innerHeight}) (${fullLvh}) (${dvh})`;
-                // @ts-expect-error
-                document.querySelector('#console').hidePopover();
-                // @ts-expect-error
-                document.querySelector('#console').showPopover();
-            }
-            self.scrollTo(0, 0);
-        });
-        _VKeyboard_handleWindowOrientationChange.set(this, () => {
-            console.debug(`${_a.name} ⚡️ orientationchange`);
-            self.requestAnimationFrame(__classPrivateFieldGet(this, _VKeyboard_ifKeyboardScrollIntoActiveElement, "f"));
-        });
-        _VKeyboard_handleBodyFocusIn.set(this, () => {
-            console.debug(`${_a.name} ⚡️ focusin`);
-            setTimeout(__classPrivateFieldGet(this, _VKeyboard_ifKeyboardScrollIntoActiveElement, "f"), 100);
-        });
-        _VKeyboard_ifKeyboardScrollIntoActiveElement.set(this, () => {
-            if (!__classPrivateFieldGet(this, _VKeyboard_shouldKeyboardBeOpenCallback, "f").call(this) || !document.activeElement)
-                return;
-            const parent = document.activeElement?.closest('scroll-view');
-            parent?.scrollToElement?.(document.activeElement);
-        });
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
-        self.removeEventListener('resize', __classPrivateFieldGet(this, _VKeyboard_handleWindowScroll, "f"));
-        self.visualViewport?.removeEventListener('resize', __classPrivateFieldGet(this, _VKeyboard_handleVisualViewportResize, "f"));
-        self.removeEventListener('orientationchange', __classPrivateFieldGet(this, _VKeyboard_handleWindowOrientationChange, "f"));
-        document.body.removeEventListener('focusin', __classPrivateFieldGet(this, _VKeyboard_handleBodyFocusIn, "f"));
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.inert = true;
-        self.addEventListener('scroll', __classPrivateFieldGet(this, _VKeyboard_handleWindowScroll, "f"));
-        self.visualViewport?.addEventListener('resize', __classPrivateFieldGet(this, _VKeyboard_handleVisualViewportResize, "f"));
-        __classPrivateFieldGet(this, _VKeyboard_handleVisualViewportResize, "f").call(this);
+        CleanupRegistry.register(this, onoff([
+            { types: 'scroll', listener: this.#handleWindowScroll },
+            { types: 'orientationchange', listener: this.#handleWindowOrientationchange },
+        ], self).on());
+        CleanupRegistry.register(this, onoff('resize', this.#handleVisualViewportResize, self.visualViewport ?? undefined, { passive: true }).on());
+        this.#handleVisualViewportResize();
         //
-        self.addEventListener('orientationchange', __classPrivateFieldGet(this, _VKeyboard_handleWindowOrientationChange, "f"));
-        document.body.addEventListener('focusin', __classPrivateFieldGet(this, _VKeyboard_handleBodyFocusIn, "f"));
+        CleanupRegistry.register(this, onoff('focusin', this.#handleBodyFocusin, document.body).on());
+        Snapshot.waitReady.then(() => {
+            document.documentElement.style.setProperty('--root-font-size', parseFloat(self.getComputedStyle(document.documentElement).fontSize).toFixed(5));
+            CleanupRegistry.register(this, onoff('transitionrun', this.#handleDocumentTransitionrun, document.documentElement).on());
+        });
     }
+    #handleDocumentTransitionrun = (evt) => {
+        if (evt.target !== document.documentElement || 'font-size' !== evt.propertyName)
+            return;
+        document.documentElement.style.setProperty('--root-font-size', parseFloat(self.getComputedStyle(document.documentElement).fontSize).toFixed(5));
+    };
+    #handleWindowScroll = () => {
+        self.scrollTo(0, 0);
+    };
+    #handleVisualViewportResize = () => {
+        const dvh = self.visualViewport?.height ?? 0, fullLvh = this.offsetHeight;
+        const diff = Math.abs(self.outerHeight - (this.#shouldKeyboardBeOpenCallback() ? dvh : fullLvh));
+        $.prop('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--100lvh', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
+        $.prop('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-top', 30 < diff ? `${dvh}px` : `${fullLvh}px`)
+        $.prop('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`, document.documentElement); //document.documentElement.style.setProperty('--keyboard-inset-height', 30 < diff ? `${diff}px` : `0px`)
+        self.scrollTo(0, 0);
+    };
+    #handleWindowOrientationchange = async () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ orientationchange`);
+        if (!(await frame(this)))
+            return; //self.requestAnimationFrame(this.#ifKeyboardScrollIntoActiveElement)
+        this.#ifKeyboardScrollIntoActiveElement();
+    };
+    #handleBodyFocusin = async () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ focusin`);
+        await sleep(100); // self.setTimeout(this.#ifKeyboardScrollIntoActiveElement, 100)
+        if (!this.isConnected)
+            return;
+        this.#ifKeyboardScrollIntoActiveElement();
+    };
+    #ifKeyboardScrollIntoActiveElement = () => {
+        if (!this.#shouldKeyboardBeOpenCallback() || !document.activeElement)
+            return;
+        const parent = document.activeElement?.closest('scroll-view');
+        parent?.centerScrollToElement?.(document.activeElement);
+    };
     set shouldKeyboardBeOpen(fn) {
-        if (typeof fn !== 'function')
-            throw new TypeError(`fn must be a function`);
-        __classPrivateFieldSet(this, _VKeyboard_shouldKeyboardBeOpenCallback, fn, "f");
+        if ('function' !== typeof fn)
+            throw new TypeError(`fn must be typeof function`);
+        this.#shouldKeyboardBeOpenCallback = fn;
     }
 }
-_a = VKeyboard, _VKeyboard_shouldKeyboardBeOpenCallback = new WeakMap(), _VKeyboard_handleWindowScroll = new WeakMap(), _VKeyboard_handleVisualViewportResize = new WeakMap(), _VKeyboard_handleWindowOrientationChange = new WeakMap(), _VKeyboard_handleBodyFocusIn = new WeakMap(), _VKeyboard_ifKeyboardScrollIntoActiveElement = new WeakMap();
+_a = VKeyboard;

package/generated/components/v-stack.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution - The distribution of cols
+ *
+ * @attr {"auto spacer"|"auto auto spacer"|"auto auto auto spacer"} template
+ *
+ * @attr {leading|center|trailing} frame:alignment - The alignment of the stack on the cross-axis
+ *
+ * @attr {@spacingSet} spacing - The gap between the primary axis
+ *
+ * @attr {@alignmentSet} alignment - The cross-axis alignment
+ * @attr {@distributionSet} distribution - The main-axis alignment
+ * @attr {@placementSet} placement - The main-axis alignment
+ *
+ */
+export declare class VStack extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}