@swiftwc/ui 0.0.0-dev.3 → 0.0.0-dev.5

package/generated/components/navigation-stack.js

@@ -0,0 +1,67 @@
+export class NavigationStack extends HTMLElement {
+    constructor() {
+        super();
+        /* const shadowRoot = this.attachShadow({ mode: 'open' })
+        shadowRoot.appendChild(
+          document.importNode(this.constructor.template.content, true)
+        )
+        const slot = shadowRoot.querySelector('slot')!
+    
+        slot.addEventListener('slotchange', () => {
+          const sv = this.querySelector<HTMLElement>(':scope > scroll-view')
+          if (!sv) return
+    
+          const st = parseInt(sv?.dataset?.scrolltop ?? '0')
+    
+          requestAnimationFrame(() => (sv.scrollTop = st))
+        }) */
+        // const template = document.createElement('template')
+        // template.innerHTML = this.constructor.#template
+        // const template = document.getElementById('element-details-template')
+        // // Named slot for toolbar
+        // const toolbarSlot = document.createElement('slot');
+        // toolbarSlot.name = 'toolbar';
+        // // Default slot for everything else
+        // const defaultSlot = document.createElement('slot');
+        // shadow.appendChild(toolbarSlot);
+        // shadow.appendChild(defaultSlot);
+        // this.attachShadow({ mode: 'open' }).append(template.content.cloneNode(true))
+        ////this.constructor.template.content.cloneNode(true)
+        // shadowRoot.appendChild(document.importNode(template.content, true))
+        // alert(9)
+        // const t = this
+    }
+    disconnectedCallback() {
+        console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        // this.attachShadow({ mode: "open" });
+        // this.shadowRoot.innerHTML = NavigationStack.template;
+        // Access slotted elements
+        // const toolbarSlot = this.shadowRoot.querySelector('slot[name="toolbar"]');
+        // const defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
+        // // Get assigned nodes
+        // const toolbarNodes = toolbarSlot.assignedNodes({ flatten: true });
+        // const defaultNodes = defaultSlot.assignedNodes({ flatten: true });
+        // console.log('Toolbar nodes:', toolbarNodes);
+        // console.log('Default nodes:', defaultNodes);
+        // const starRating = document.getElementById('star-rating-template').content;
+        //   const shadowRoot = this.attachShadow({
+        //     mode: 'open'
+        //   });
+        //   shadowRoot.appendChild(starRating.cloneNode(true));
+        // this.innerHTML = `<div>gh</div><slot name="toolbar"><legend>Rate your experience:</legend></slot>`
+        // this.appendChild(slottedToolbar)
+        // console.log(99)
+        // this.innerHTML = `
+        //   <header>
+        //     <label>New</label>
+        //   </header>
+        //   <p>
+        //     <h2>Welcome to the new page!</h2>
+        //   </p>
+        //   ${this.innerHTML}
+        // `;
+    }
+}
+NavigationStack.observedAttributes = ['hidden'];

package/generated/components/screen-view.d.ts

@@ -0,0 +1,5 @@
+import { DialogBase } from '../internal/class';
+export declare class ScreenView extends DialogBase {
+    constructor();
+    disconnectedCallback(): void;
+}

package/generated/components/screen-view.js

@@ -0,0 +1,9 @@
+import { DialogBase } from '../internal/class';
+export class ScreenView extends DialogBase {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${ScreenView.name} ⚡️ disconnect`);
+    }
+}

package/generated/components/scroll-view.d.ts

@@ -0,0 +1,8 @@
+export declare class ScrollView extends HTMLElement {
+    #private;
+    static get template(): HTMLTemplateElement;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    scrollToElement(el: Element): void;
+}

package/generated/components/scroll-view.js

@@ -0,0 +1,80 @@
+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, _ScrollView_template, _ScrollView_shadowRoot;
+export class ScrollView extends HTMLElement {
+    static get template() {
+        if (!__classPrivateFieldGet(this, _a, "f", _ScrollView_template))
+            __classPrivateFieldSet(this, _a, Object.assign(document.createElement('template'), {
+                innerHTML: `<slot></slot>
+  <slot name="navigation-bar"></slot>
+  <slot name="bottom-bar"></slot>`,
+            }), "f", _ScrollView_template);
+        return __classPrivateFieldGet(this, _a, "f", _ScrollView_template);
+    }
+    constructor() {
+        super();
+        _ScrollView_shadowRoot.set(this, void 0);
+        __classPrivateFieldSet(this, _ScrollView_shadowRoot, this.attachShadow({ mode: 'open' }), "f");
+        __classPrivateFieldGet(this, _ScrollView_shadowRoot, "f").appendChild(document.importNode(this.constructor.template.content, true));
+        // this.addEventListener(
+        //   'scrollend',
+        //   () => {
+        //     this.dataset.scrolltop = this.scrollTop
+        //   },
+        //   { passive: true }
+        // )
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        // const nSlot = this.shadowRoot.querySelector('slot[name=navigation-bar]')!
+        if (0 ===
+            __classPrivateFieldGet(this, _ScrollView_shadowRoot, "f")
+                .querySelector('slot[name=navigation-bar]')
+                .assignedNodes({ flatten: true }).length)
+            this.insertAdjacentHTML('beforeend', `<tool-bar slot="navigation-bar">
+          <span>ghjh</span>
+        </tool-bar>`);
+        if (0 ===
+            __classPrivateFieldGet(this, _ScrollView_shadowRoot, "f")
+                .querySelector('slot[name=bottom-bar]')
+                .assignedNodes({ flatten: true }).length)
+            this.insertAdjacentHTML('beforeend', `<tool-bar slot="bottom-bar">
+            <span>ghj</span>
+          </tool-bar>`);
+    }
+    scrollToElement(el) {
+        // document.querySelector("#kb").innerHTML = self.visualViewport.height;
+        // document.querySelector("#console4").innerHTML = `${self.scrollY} / ${
+        //   document.querySelector("scroll-view").scrollTop
+        // }`;
+        // const parent = el.closest('scroll-view')
+        const child = el;
+        // scrollTop needed to center child
+        const parentRect = this.getBoundingClientRect();
+        const childRect = child.getBoundingClientRect();
+        // current scroll + offset of child relative to parent
+        const scrollTop = this.scrollTop +
+            childRect.top -
+            parentRect.top -
+            parentRect.height / 2 +
+            childRect.height / 2;
+        this.scrollTo({
+            top: scrollTop,
+            behavior: 'smooth', // optional: smooth scroll
+        });
+    }
+}
+_a = ScrollView, _ScrollView_shadowRoot = new WeakMap();
+_ScrollView_template = { value: void 0 };

package/generated/components/sheet-view.d.ts

@@ -0,0 +1,9 @@
+import { DialogBase } from '../internal/class';
+export declare class SheetView extends DialogBase {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    static polyfillDisconnectedCallback(el: SheetView): void;
+    static polyfillConnectedCallback(el: SheetView): void;
+    static handleCancel: (event: Event) => void;
+}

package/generated/components/sheet-view.js

@@ -0,0 +1,26 @@
+import { DialogBase } from '../internal/class';
+export class SheetView extends DialogBase {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${SheetView.name} ⚡️ disconnect`);
+        SheetView.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        console.debug(`${SheetView.name} ⚡️ connect`);
+        SheetView.polyfillConnectedCallback(this);
+    }
+    static polyfillDisconnectedCallback(el) {
+        el.removeEventListener('cancel', SheetView.handleCancel);
+    }
+    static polyfillConnectedCallback(el) {
+        el.addEventListener('cancel', SheetView.handleCancel);
+    }
+}
+SheetView.handleCancel = (event) => {
+    console.debug(`${SheetView.name} ⚡️ cancel (${event.cancelable})`);
+    if (!event.cancelable)
+        return;
+    event.preventDefault();
+};

package/generated/components/sidebar-toggle.d.ts

@@ -0,0 +1,7 @@
+export declare class SidebarToggle extends HTMLElement {
+    #private;
+    static get cssVarPaddingName(): string;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/sidebar-toggle.js

@@ -0,0 +1,81 @@
+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 _SidebarToggle_instances, _a, _SidebarToggle_ro, _SidebarToggle_autoCloseTabBar, _SidebarToggle_handleClick;
+export class SidebarToggle extends HTMLElement {
+    // #io
+    static get cssVarPaddingName() {
+        return '--tabview-padding-inline-start';
+    }
+    constructor() {
+        super();
+        _SidebarToggle_instances.add(this);
+        _SidebarToggle_ro.set(this, void 0);
+        __classPrivateFieldSet(this, _SidebarToggle_ro, new ResizeObserver(__classPrivateFieldGet(this, _SidebarToggle_instances, "m", _SidebarToggle_autoCloseTabBar)), "f");
+        // this.#io = new IntersectionObserver((entries) => {
+        //   this._checkVisibility2(entries)
+        // })
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        this.addEventListener('click', __classPrivateFieldGet(this, _SidebarToggle_instances, "m", _SidebarToggle_handleClick));
+        __classPrivateFieldGet(this, _SidebarToggle_ro, "f")?.observe(this);
+        // this.#io.observe(this)
+        __classPrivateFieldGet(this, _SidebarToggle_instances, "m", _SidebarToggle_autoCloseTabBar).call(this);
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        __classPrivateFieldGet(this, _SidebarToggle_ro, "f")?.disconnect();
+        // this.#io.disconnect()
+        this.removeEventListener('click', __classPrivateFieldGet(this, _SidebarToggle_instances, "m", _SidebarToggle_handleClick));
+    }
+}
+_a = SidebarToggle, _SidebarToggle_ro = new WeakMap(), _SidebarToggle_instances = new WeakSet(), _SidebarToggle_autoCloseTabBar = function _SidebarToggle_autoCloseTabBar() {
+    console.debug('#autoCloseTabBar');
+    const toggles = [
+        ...document.querySelectorAll('sidebar-toggle'),
+    ];
+    // set css vars
+    for (const tg of toggles) {
+        const tv = tg.parentElement;
+        const width = tg?.offsetWidth ?? 0;
+        if (0 < width) {
+            // const gapProp =
+            //     getComputedStyle(tg).getPropertyValue('--toolbar-col-gap') || '0',
+            //   gap = parseFloat(gapProp) * 1 //(gapProp.endsWith('rem')? parseFloat(getComputedStyle(document.documentElement).fontSize): 1)
+            tv?.style?.setProperty?.(_a.cssVarPaddingName, `${width}px`);
+        }
+        else {
+            tv?.style?.removeProperty?.(_a.cssVarPaddingName);
+        }
+    }
+    // auto close
+    const tabBar = document.querySelector('dialog[is=tab-bar]');
+    if (!tabBar?.open)
+        return;
+    // scan all toggles for anyone that is visible, sign that sidebar should stay open
+    const isAnyVisible = toggles.some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight);
+    if (isAnyVisible)
+        return;
+    tabBar?.close?.();
+}, _SidebarToggle_handleClick = function _SidebarToggle_handleClick(event) {
+    const target = event.target;
+    if (!target?.closest('button'))
+        return;
+    const lm = target?.closest('tab-view,navigation-split-view');
+    const dialog = 'TAB-VIEW' === lm?.tagName
+        ? lm.querySelector('dialog[is="tab-bar"]')
+        : lm?.querySelector('dialog[is="sidebar-view"]');
+    if (!dialog?.open)
+        dialog?.showModal();
+    else
+        dialog.close();
+};

package/generated/components/sidebar-view.d.ts

@@ -0,0 +1,9 @@
+import { DialogBase } from '../internal/class';
+export declare class SidebarView extends DialogBase {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static handleClick: (event: Event) => Promise<void>;
+}

package/generated/components/sidebar-view.js

@@ -0,0 +1,26 @@
+var _a;
+import { DialogBase } from '../internal/class';
+export class SidebarView extends DialogBase {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        _a.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        _a.polyfillConnectedCallback(this);
+    }
+    static polyfillDisconnectedCallback(el) {
+        el.removeEventListener('click', _a.handleClick);
+    }
+    static polyfillConnectedCallback(el) {
+        el.addEventListener('click', _a.handleClick);
+    }
+}
+_a = SidebarView;
+SidebarView.handleClick = async (event) => {
+    if ('DIALOG' === event.target.tagName &&
+        'sidebar-view' === event.target.getAttribute('is'))
+        event?.target?.close?.();
+};

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

@@ -0,0 +1,9 @@
+import { DialogBase } from '../internal/class';
+export declare class TabBar extends DialogBase {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static handleClick: (event: Event) => Promise<void>;
+}

package/generated/components/tab-bar.js

@@ -0,0 +1,26 @@
+var _a;
+import { DialogBase } from '../internal/class';
+export class TabBar extends DialogBase {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        _a.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        _a.polyfillConnectedCallback(this);
+    }
+    static polyfillDisconnectedCallback(el) {
+        el.removeEventListener('click', _a.handleClick);
+    }
+    static polyfillConnectedCallback(el) {
+        el.addEventListener('click', _a.handleClick);
+    }
+}
+_a = TabBar;
+TabBar.handleClick = async (event) => {
+    if ('DIALOG' === event.target.tagName &&
+        'tab-bar' === event.target.getAttribute('is'))
+        event?.target?.close?.();
+};

package/generated/components/tab-item.d.ts

@@ -0,0 +1,6 @@
+export declare class TabItem extends HTMLElement {
+    #private;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/tab-item.js

@@ -0,0 +1,35 @@
+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 _a, _TabItem_handleClick;
+export class TabItem extends HTMLElement {
+    constructor() {
+        super();
+        _TabItem_handleClick.set(this, () => {
+            console.debug(`${_a.name} ⚡️ click`);
+            const tag = this.getAttribute('tag');
+            if (!tag)
+                throw new DOMException(`Attribute "tag" is set but invalid`, 'InvalidStateError');
+            const tv = this.closest('tab-view');
+            if (!tv)
+                throw new Error('Element not found');
+            const newTab = tv?.querySelector(`#${tag}`);
+            // 'more' === tag
+            //   ? tv?.querySelector<HTMLElement>(`tab-view>[is=more]`):
+            if (!newTab)
+                throw new Error('Element not found');
+            tv.selection = newTab;
+        });
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        this.removeEventListener('click', __classPrivateFieldGet(this, _TabItem_handleClick, "f"));
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        this.addEventListener('click', __classPrivateFieldGet(this, _TabItem_handleClick, "f"));
+    }
+}
+_a = TabItem, _TabItem_handleClick = new WeakMap();

package/generated/components/tab-view.d.ts

@@ -0,0 +1,7 @@
+export declare class TabView extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    get selection(): HTMLElement | null;
+    set selection(nv: HTMLElement | null);
+}

package/generated/components/tab-view.js

@@ -0,0 +1,29 @@
+export class TabView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${TabView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${TabView.name} ⚡️ connect`);
+    }
+    get selection() {
+        const selectedTab = this.querySelector(':scope > navigation-stack:not([hidden]),:scope > navigation-split-view:not([hidden])');
+        return selectedTab;
+    }
+    set selection(nv) {
+        if (!['NAVIGATION-STACK', 'NAVIGATION-SPLIT-VIEW'].includes(nv?.tagName ?? ''))
+            throw new Error('Element not found');
+        if (nv === this.selection)
+            return;
+        for (const ns of this.querySelectorAll(':scope > navigation-stack,:scope > navigation-split-view')) {
+            if (nv === ns)
+                continue;
+            ns.hidden = true;
+            this.dispatchEvent(new CustomEvent('tabswap', { detail: { x: 42 } }));
+        }
+        nv.hidden = false;
+        this.dispatchEvent(new CustomEvent('tabreveal', { detail: { x: 42 } }));
+    }
+}

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

@@ -1,2 +1,11 @@
+/**
+ * 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.
+ */
 export declare class VKeyboard extends HTMLElement {
+    #private;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    set shouldKeyboardBeOpen(fn: () => boolean);
 }

package/generated/components/v-keyboard.js

@@ -1,2 +1,84 @@
+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;
+/**
+ * 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.
+ */
 export class VKeyboard extends HTMLElement {
+    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
+            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"));
+    }
+    connectedCallback() {
+        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);
+        //
+        self.addEventListener('orientationchange', __classPrivateFieldGet(this, _VKeyboard_handleWindowOrientationChange, "f"));
+        document.body.addEventListener('focusin', __classPrivateFieldGet(this, _VKeyboard_handleBodyFocusIn, "f"));
+    }
+    set shouldKeyboardBeOpen(fn) {
+        if (typeof fn !== 'function')
+            throw new TypeError(`fn must be a function`);
+        __classPrivateFieldSet(this, _VKeyboard_shouldKeyboardBeOpenCallback, fn, "f");
+    }
 }
+_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();

package/generated/index.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import packageJson from "../package.json";
+import packageJson from '../package.json';
 console.log(`Hello world! ${packageJson.version}`);

package/generated/internal/class.d.ts

@@ -0,0 +1,18 @@
+export declare abstract class DialogBase extends HTMLDialogElement {
+    static polyfillExtends: "dialog";
+    static polyfillConnectedCallback(el: HTMLDialogElement): void;
+    static polyfillDisonnectedCallback(el: HTMLDialogElement): void;
+    static polyfillAttributeChangedCallback(entries: MutationRecord[]): void;
+}
+export declare abstract class ButtonBase extends HTMLButtonElement {
+    static polyfillExtends: "button";
+    static polyfillConnectedCallback(el: HTMLButtonElement): void;
+    static polyfillDisonnectedCallback(el: HTMLButtonElement): void;
+    static polyfillAttributeChangedCallback(entries: MutationRecord[]): void;
+}
+export declare abstract class DetailsBase extends HTMLDetailsElement {
+    static polyfillExtends: "details";
+    static polyfillConnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillDisonnectedCallback(el: HTMLDetailsElement): void;
+    static polyfillAttributeChangedCallback(entries: MutationRecord[]): void;
+}

package/generated/internal/class.js

@@ -0,0 +1,18 @@
+export class DialogBase extends HTMLDialogElement {
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisonnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { }
+}
+DialogBase.polyfillExtends = 'dialog';
+export class ButtonBase extends HTMLButtonElement {
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisonnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { }
+}
+ButtonBase.polyfillExtends = 'button';
+export class DetailsBase extends HTMLDetailsElement {
+    static polyfillConnectedCallback(el) { }
+    static polyfillDisonnectedCallback(el) { }
+    static polyfillAttributeChangedCallback(entries) { }
+}
+DetailsBase.polyfillExtends = 'details';

package/generated/internal/utils/css-time.d.ts

@@ -0,0 +1 @@
+export default function (cssTime: string): number;

package/generated/internal/utils/css-time.js

@@ -0,0 +1,3 @@
+export default function (cssTime) {
+    return parseFloat(cssTime) * (/\ds$/.test(cssTime) ? 1000 : 1);
+}

package/generated/internal/utils/index.d.ts

@@ -1 +1,2 @@
-export { default as kebabCase } from "./kebab-case";
+export { default as kebabCase } from './kebab-case';
+export { default as cssTime } from './css-time';

package/generated/internal/utils/index.js

@@ -1 +1,2 @@
-export { default as kebabCase } from "./kebab-case";
+export { default as kebabCase } from './kebab-case';
+export { default as cssTime } from './css-time';

package/generated/internal/utils/kebab-case.js

@@ -1,11 +1,11 @@
 export default function (str) {
     return (str
         // Replace uppercase letters with - + lowercase
-        .replace(/([A-Z])/g, "-$1")
+        .replace(/([A-Z])/g, '-$1')
         // Replace spaces and underscores with -
-        .replace(/[\s_]+/g, "-")
+        .replace(/[\s_]+/g, '-')
         // Convert to lowercase
         .toLowerCase()
         // Remove leading/trailing dashes
-        .replace(/^-+|-+$/g, ""));
+        .replace(/^-+|-+$/g, ''));
 }

package/generated/namespace/index.d.ts

@@ -0,0 +1,6 @@
+export type WebComponentCtor = CustomElementConstructor & {
+    polyfillExtends?: string;
+    polyfillConnectedCallback(el: HTMLElement): void;
+    polyfillDisconnectedCallback(el: HTMLElement): void;
+    polyfillAttributeChangedCallback?(entries: MutationRecord[]): void;
+};