@swiftwc/ui 0.0.0-dev.98 → 1.0.0-canary.0

package/generated/components/toggle-view.js

@@ -1,249 +0,0 @@
-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 } from '../internal/utils';
-import { queryMorph } from '../morphdom';
-import { html } from '../tpl';
-const toggleStyles = ['switch', 'button'];
-/**
- * @summary A control that switches between on and off states.
- *
- * @fires toggle:change — User toggled the control
- *
- * @slot label
- * @slot {HTMLOptionElement[]} validity-options
- */
-export class ToggleView extends FormAssociatedBase {
-    static get observedAttributes() {
-        return [
-            'label',
-            'name',
-            'value',
-            /**
-             * @type {boolean}
-             */
-            'is-on',
-            'keyboard-type',
-            /**
-             * @type {boolean}
-             */
-            'required',
-            /**
-             * @type {boolean}
-             */
-            'disabled',
-        ];
-    }
-    static #template;
-    static get template() {
-        return (this.#template ??= $(html `<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':
-                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
-                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('toggle:change', { 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();
-    };
-    /**
-     * Form participation property
-     */
-    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);
-    };
-    formStateRestoreCallback(state, reason) {
-        this.value = state;
-    }
-    formAssociatedCallback(form) {
-        this.#sendValueToForm(false);
-    }
-    formDisabledCallback(disabled) {
-        for (const el of this.#shadowRoot.querySelectorAll('input'))
-            el.toggleAttribute('disabled', !disabled);
-    }
-    formResetCallback() {
-        this.value = '';
-        this.#sendValueToForm(false);
-    }
-}
-_a = ToggleView;

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

@@ -1,13 +0,0 @@
-/**
- * @summary A container view that groups items together in the toolbar or navigation bar.
- */
-export declare class ToolBarItemGroup extends HTMLElement {
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tool-bar-item-group': ToolBarItemGroup;
-    }
-}

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

@@ -1,31 +0,0 @@
-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';
-/**
- * @summary A container view that groups items together in the toolbar or navigation bar.
- */
-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

@@ -1,16 +0,0 @@
-/**
- * @summary A view placed in the toolbar or navigation bar.
- */
-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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tool-bar-item': ToolBarItem;
-    }
-}

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

@@ -1,69 +0,0 @@
-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';
-/**
- * @summary A view placed in the toolbar or navigation bar.
- */
-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:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
-                        this.#mutationObserver = new MutationObserver((mutations) => {
-                            for (const { target } of mutations)
-                                if (target instanceof HTMLElement)
-                                    ensurePlaceholder(this.querySelector(':scope>button:not(:has(> :not([slot])))'), role, tKey, Snapshot.config);
-                        });
-                        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

@@ -1,26 +0,0 @@
-/**
- * @summary A list of items placed into the toolbar or navigation bar around your content.
- *
- * @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;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tool-bar': ToolBar;
-    }
-}

package/generated/components/tool-bar.js

@@ -1,95 +0,0 @@
-var _a;
-import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, devFlags } from '../internal/utils';
-import { html } from '../tpl';
-const observers = new ResizeObserverSingleton();
-/**
- * @summary A list of items placed into the toolbar or navigation bar around your content.
- *
- * @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 ??= $(html `<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,20 +0,0 @@
-/**
- * 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;
-    constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-    set shouldKeyboardBeOpen(fn: () => boolean);
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'v-keyboard': VKeyboard;
-    }
-}

package/generated/components/v-keyboard.js

@@ -1,89 +0,0 @@
-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();
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        this.inert = true;
-        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();
-        //
-        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 ('function' !== typeof fn)
-            throw new TypeError(`fn must be typeof function`);
-        this.#shouldKeyboardBeOpenCallback = fn;
-    }
-}
-_a = VKeyboard;

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

@@ -1,25 +0,0 @@
-/**
- * @summary A view that arranges its children one on top of the other.
- *
- * @attr {@FrameInlineLength} readable — Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
- * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
- *
- * @attr {@Template} template — The main-axis grid template
- *
- * @attr {@Spacing} spacing — The gap between the primary axis
- *
- * @attr {@inlineSet} alignment — The cross-axis alignment
- * @attr {@blockSet} distribution — The main-axis alignment
- * @attr {@blockPlacementSet} placement — The main-axis alignment
- *
- */
-export declare class VStack extends HTMLElement {
-    constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'v-stack': VStack;
-    }
-}

package/generated/components/v-stack.js

@@ -1,29 +0,0 @@
-import { devFlags } from '../internal/utils';
-/**
- * @summary A view that arranges its children one on top of the other.
- *
- * @attr {@FrameInlineLength} readable — Shortcut for `placement="leading fill" frame:alignment="center" frame:width="infinity" frame:max-width="{length}"`
- * @attr {leading|"leading fill"|center|trailing|fill|space-between} distribution — The distribution of cols
- *
- * @attr {@Template} template — The main-axis grid template
- *
- * @attr {@Spacing} spacing — The gap between the primary axis
- *
- * @attr {@inlineSet} alignment — The cross-axis alignment
- * @attr {@blockSet} distribution — The main-axis alignment
- * @attr {@blockPlacementSet} placement — The main-axis alignment
- *
- */
-export class VStack extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${VStack.name} ⚡️ connect`);
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${VStack.name} ⚡️ disconnect`);
-    }
-}