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

package/generated/client/index.d.ts

@@ -1,2 +1,6 @@
-import { Snapshot } from "../internal/snapshot";
+import { Snapshot } from '../snapshot';
+import { type WebComponentCtor } from '../namespace';
+export declare const polyfills: Map<string, WebComponentCtor>;
+type TransitionType = 'forwards' | 'backwards' | 'reload';
+export declare const startViewTransition: (event: Event, type?: TransitionType, updateCallback?: () => Promise<void>) => Promise<void>;
 export { Snapshot };

package/generated/client/index.js

@@ -1,8 +1,223 @@
-import { kebabCase } from "../internal/utils";
-console.log(kebabCase(`Hello client!`));
-import { Snapshot } from "../internal/snapshot";
-console.log(77, Snapshot);
-console.log(88, Snapshot.count);
-Snapshot.getSnapshot();
-console.log(99, Snapshot);
+import * as Components from '../components';
+import { kebabCase } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+export const polyfills = new Map();
+for (const [k, v] of Object.entries(Components)) {
+    const is = kebabCase(k);
+    if ('polyfillExtends' in v &&
+        'string' === typeof v.polyfillExtends) {
+        customElements.define(is, v, { extends: v.polyfillExtends });
+        if (!(document.createElement(v.polyfillExtends, { is }) instanceof v))
+            polyfills.set(is, v);
+        continue;
+    }
+    customElements.define(is, v);
+}
+console.debug(polyfills);
+if (0 < polyfills.size) {
+    const polyfillTagNamesCache = new Set([...polyfills.values()]
+        .map((v) => String(v.polyfillExtends ?? '').toUpperCase())
+        .filter(Boolean)); // ['TAG-NAME1', 'TAG-NAME2', ...]
+    const handlers = new WeakMap();
+    // @ts-expect-error
+    const observe = (el, polyfill) => {
+        if (!Array.isArray(polyfill.observedAttributes))
+            return;
+        if (0 === polyfill?.observedAttributes.length)
+            return;
+        handlers.set(el, new MutationObserver(polyfill.polyfillAttributeChangedCallback).observe(el, {
+            attributes: true,
+            attributeFilter: polyfill.observedAttributes,
+            attributeOldValue: true,
+        }));
+    }, 
+    // @ts-expect-error
+    unobserve = (el) => {
+        handlers.delete(el);
+    };
+    console.debug(polyfillTagNamesCache);
+    for (const [is, polyfill] of polyfills)
+        for (const el of document.querySelectorAll(`${polyfill.polyfillExtends}[is="${is}"]`)) {
+            polyfill.polyfillConnectedCallback(el);
+            observe(el, polyfill);
+        }
+    // observer callback
+    const observer = new MutationObserver((mutations) => {
+        for (const { addedNodes, removedNodes } of mutations) {
+            for (const node of addedNodes) {
+                if (!(node instanceof HTMLElement))
+                    continue;
+                if (!polyfillTagNamesCache.has(node.tagName))
+                    continue;
+                const is = node?.getAttribute('is') ?? '';
+                if (!polyfills.has(is))
+                    continue;
+                polyfills.get(is)?.polyfillConnectedCallback(node);
+                observe(node, polyfills.get(is));
+            }
+            for (const node of removedNodes) {
+                if (!(node instanceof HTMLElement))
+                    continue;
+                if (!polyfillTagNamesCache.has(node.tagName))
+                    continue;
+                const is = node?.getAttribute('is') ?? '';
+                if (!polyfills.has(is))
+                    continue;
+                polyfills.get(is)?.polyfillDisconnectedCallback(node);
+                unobserve(node);
+            }
+        }
+    });
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+}
+const cleanup = (lm, dir) => {
+    let arr = [
+        Snapshot.config['vt-fwd-class-name'],
+        'fwdd',
+        'fwn',
+        'fwnn',
+        'bwd',
+        'bwdd',
+        'bwn',
+        'bwnn',
+    ];
+    if (['backwards', 'forwards'].includes(dir ?? ''))
+        for (let i = arr.length - 1; i >= 0; i--)
+            if (arr[i].startsWith('backwards' === dir ? 'fw' : 'bw'))
+                arr.splice(i, 1);
+    for (const el of [
+        ...(lm?.querySelectorAll(arr.map((v) => `.${v}`).join(',')) ?? []),
+    ])
+        el.classList.remove(...arr);
+};
+export const startViewTransition = async (event, type = 'forwards', updateCallback = async () => { }) => {
+    // const sv =
+    //   (event.target as HTMLElement).closest<Components.ScrollView>(
+    //     'scroll-view'
+    //   ) ?? undefined,
+    const from = event.target.closest('scroll-view') ?? undefined;
+    if ('forwards' === type) {
+        // const sis = Router.toolbarItems //sv.parentElement.querySelectorAll(`:scope > navigation-bar > toolbar-item,:scope > bottom-bar > toolbar-item`)
+        // pr = Router.frame //sv.parentElement
+        // const pt = event.target.closest('navigation-stack,body-view')
+        // const inte = event.target.closest(".fwd");
+        // const st = sv.scrollTop
+        // console.log(333, lm, sv, sis)
+        // let to
+        // inject or unhide
+        // if (pr.tagName === 'NAVIGATION-STACK' && 'more' === pr.getAttribute('is')) {
+        //   to = document.querySelector(`#${event.target.getAttribute('tag')}`)
+        // to.hidden = false
+        // } else {
+        await updateCallback(); // updatetheDOMSomehow
+        //   to = sv.nextElementSibling //pr.lastElementChild //sv.nextElementSibling
+        // }
+        Snapshot.getSnapshot(from);
+        const fromToolbars = Snapshot.toolbarItems;
+        // from = Snapshot.landmark
+        const to = Snapshot.leaf, toFrame = Snapshot.leafContainer, toToolbars = Snapshot.leafToolbarItems;
+        if ('DIALOG' === toFrame?.tagName) {
+            ;
+            toFrame.showModal();
+            console.debug(`⚡️ view-transition-start (${type})`);
+            await Promise.allSettled(toFrame.getAnimations().map(({ finished }) => finished));
+            console.debug(`⚡️ view-transition-end (${type})`);
+            return;
+        }
+        // purge
+        cleanup(Snapshot.root, 'backwards');
+        for (const ti of toToolbars ?? [])
+            ti.classList.add('fwnn');
+        to?.classList.add('fwdd');
+        // prepare principal/leader
+        from?.classList.add(Snapshot.config['vt-fwd-class-name']);
+        for (const ti of fromToolbars ?? [])
+            ti.classList.add('fwn'); // prepare navbs
+        // sv.inert = true
+        // if (!document.startViewTransition) {
+        //   startViewTransition(event, false)
+        //   return
+        // }
+        // With a transition:
+        // const transition = document.startViewTransition({
+        //   async update() {},
+        //   types: ['forwards'],
+        // })
+        // console.debug(transition)
+        // await transition.finished
+        // alert(3)
+        // return
+        console.debug(`⚡️ view-transition-start (${type})`);
+        await Promise.allSettled([
+            ...(from?.getAnimations().map(({ finished }) => finished) ?? []),
+            ...(to?.getAnimations().map(({ finished }) => finished) ?? []),
+        ]);
+        // await Promise.allSettled(
+        //   from.getAnimations().map(({ finished }) => finished)
+        // )
+        console.debug(`⚡️ view-transition-end (${type})`);
+        // console.log(9, to.querySelectorAll('.fwd'))
+        // sv2.classList.remove("fwdd");
+        if (0 <
+            (toFrame?.querySelectorAll(`.${Snapshot.config?.['vt-fwd-class-name']},.bwd`) ?? []).length)
+            return;
+        cleanup(Snapshot.root);
+    }
+    else {
+        Snapshot.getSnapshot(from);
+        const fromToolbars = Snapshot.toolbarItems, 
+        // from = Snapshot.landmark,
+        fromFrame = Snapshot.container; //sv.parentElement.querySelectorAll(`:scope > navigation-bar > toolbar-item,:scope > bottom-bar > toolbar-item`)
+        // fromFrame = Router.frame //sv.parentElement
+        // const pt = event.target.closest('navigation-stack,body-view')
+        // const pt = pt0.parentElement.closest('navigation-stack,body-view')
+        const to = Snapshot.parent, //pr.parentElement.querySelector(`:scope > scroll-view`) //pr.previousElementSibling
+        // toFrame = Snapshot.parentContainer,
+        toToolbars = Snapshot.parentToolbarItems; //sv2.parentElement?.querySelectorAll?.(      `:scope > navigation-bar > toolbar-item,:scope > bottom-bar > toolbar-item`    )
+        // const st2 = sv2.scrollTop
+        if ('DIALOG' === fromFrame?.tagName) {
+            ;
+            fromFrame.close();
+            console.debug(`⚡️ view-transition-start (${type})`);
+            await Promise.allSettled(fromFrame.getAnimations().map(({ finished }) => finished));
+            console.debug(`⚡️ view-transition-end (${type})`);
+            if (fromFrame.matches('[open]'))
+                return;
+            await updateCallback();
+            return;
+        }
+        // purge
+        cleanup(Snapshot.root, 'forwards');
+        // prepare others
+        for (const ti of toToolbars ?? [])
+            ti.classList.add('bwnn');
+        to?.classList.add('bwdd');
+        // sv2.style.visibility = "visible";
+        // prepare leader/principal (tracked)
+        for (const ti of fromToolbars ?? [])
+            ti.classList.add('bwn');
+        from?.classList.add('bwd');
+        // pr.inert = true
+        console.debug(`⚡️ view-transition-start (${type})`);
+        await Promise.allSettled([
+            ...(from?.getAnimations().map(({ finished }) => finished) ?? []),
+            ...(to?.getAnimations().map(({ finished }) => finished) ?? []),
+        ]);
+        // await Promise.allSettled(
+        //   from.getAnimations().map(({ finished }) => finished)
+        // )
+        // await Promise.allSettled(to.getAnimations().map(({ finished }) => finished))
+        console.debug(`⚡️ view-transition-end (${type})`);
+        // console.log(999, sv2.closest('.fwd'))
+        if (to?.closest(`.bwd,.${Snapshot.config?.['vt-fwd-class-name']}`))
+            return;
+        cleanup(Snapshot.root);
+        // remove or hide
+        await updateCallback();
+    }
+};
+void Snapshot.setOwnConfig();
 export { Snapshot };

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

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

package/generated/components/body-view.js

@@ -0,0 +1,11 @@
+export class BodyView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${BodyView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${BodyView.name} ⚡️ connect`);
+    }
+}

package/generated/components/borderless-button.d.ts

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

package/generated/components/borderless-button.js

@@ -0,0 +1,25 @@
+var _a;
+import { ButtonBase } from '../internal/class';
+export class BorderlessButton extends ButtonBase {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        _a.polyfillDisconnectedCallback(this);
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        _a.polyfillConnectedCallback(this);
+    }
+    static polyfillDisconnectedCallback(el) {
+        el.removeEventListener('click', _a.handleClick);
+    }
+    static polyfillConnectedCallback(el) {
+        el.addEventListener('click', _a.handleClick);
+    }
+}
+_a = BorderlessButton;
+BorderlessButton.handleClick = async (event) => {
+    alert(99);
+};

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

@@ -0,0 +1,10 @@
+export declare class BottomBar extends HTMLElement {
+    #private;
+    static get leadingPartName(): string;
+    static get principalPartName(): string;
+    static get trailingPartName(): string;
+    static get template(): HTMLTemplateElement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/bottom-bar.js

@@ -0,0 +1,73 @@
+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 _BottomBar_instances, _a, _BottomBar_template, _BottomBar_shadowRoot, _BottomBar_ro, _BottomBar_sibling_get, _BottomBar_sp_set, _BottomBar_ep_set, _BottomBar_measureStacks;
+export class BottomBar extends HTMLElement {
+    static get leadingPartName() {
+        return 'toolbar-leading-stack';
+    }
+    static get principalPartName() {
+        return 'toolbar-principal-stack';
+    }
+    static get trailingPartName() {
+        return 'toolbar-trailing-stack';
+    }
+    static get template() {
+        if (!__classPrivateFieldGet(this, _a, "f", _BottomBar_template))
+            __classPrivateFieldSet(this, _a, Object.assign(document.createElement('template'), {
+                innerHTML: `<div part="${this.leadingPartName}">
+    <slot name="leading"></slot>
+  </div>
+  <div part="${this.principalPartName}">
+    <slot></slot>
+  </div>
+  <div part="${this.trailingPartName}">
+    <slot name="trailing"></slot>
+  </div>`,
+            }), "f", _BottomBar_template);
+        return __classPrivateFieldGet(this, _a, "f", _BottomBar_template);
+    }
+    constructor() {
+        super();
+        _BottomBar_instances.add(this);
+        _BottomBar_shadowRoot.set(this, void 0);
+        _BottomBar_ro.set(this, void 0);
+        __classPrivateFieldSet(this, _BottomBar_shadowRoot, this.attachShadow({ mode: 'open' }), "f");
+        __classPrivateFieldGet(this, _BottomBar_shadowRoot, "f").appendChild(document.importNode(this.constructor.template.content, true));
+        __classPrivateFieldSet(this, _BottomBar_ro, new ResizeObserver(__classPrivateFieldGet(this, _BottomBar_instances, "m", _BottomBar_measureStacks).bind(this)), "f");
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        __classPrivateFieldGet(this, _BottomBar_ro, "f")?.observe(__classPrivateFieldGet(this, _BottomBar_shadowRoot, "f").querySelector(`[part="${this.constructor.leadingPartName}"]`));
+        __classPrivateFieldGet(this, _BottomBar_ro, "f")?.observe(__classPrivateFieldGet(this, _BottomBar_shadowRoot, "f").querySelector(`[part="${this.constructor.trailingPartName}"]`));
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        __classPrivateFieldGet(this, _BottomBar_ro, "f").disconnect();
+    }
+}
+_a = BottomBar, _BottomBar_shadowRoot = new WeakMap(), _BottomBar_ro = new WeakMap(), _BottomBar_instances = new WeakSet(), _BottomBar_sibling_get = function _BottomBar_sibling_get() {
+    return (this.parentElement?.querySelector(':scope > scroll-view') ?? undefined); //this.previousElementSibling ?? undefined
+}, _BottomBar_sp_set = function _BottomBar_sp_set(nv) {
+    ;
+    __classPrivateFieldGet(this, _BottomBar_instances, "a", _BottomBar_sibling_get)?.style?.setProperty?.('--bottombar-padding-inline-start', `${nv}px`);
+}, _BottomBar_ep_set = function _BottomBar_ep_set(nv) {
+    ;
+    __classPrivateFieldGet(this, _BottomBar_instances, "a", _BottomBar_sibling_get)?.style?.setProperty?.('--bottombar-padding-inline-end', `${nv}px`);
+}, _BottomBar_measureStacks = function _BottomBar_measureStacks(entries = []) {
+    console.debug(`${_a.name} ⚡️ resize observer callback: ${__classPrivateFieldGet(this, _BottomBar_instances, "m", _BottomBar_measureStacks).name}`);
+    for (const { contentRect, target } of entries)
+        if (target.part.contains(this.constructor.leadingPartName))
+            __classPrivateFieldSet(this, _BottomBar_instances, Math.round(contentRect.width), "a", _BottomBar_sp_set);
+        else if (target.part.contains(this.constructor.trailingPartName))
+            __classPrivateFieldSet(this, _BottomBar_instances, Math.round(contentRect.width), "a", _BottomBar_ep_set);
+};
+_BottomBar_template = { value: void 0 };

package/generated/components/disclosure-group.d.ts

@@ -0,0 +1,12 @@
+import { DetailsBase } from '../internal/class';
+export declare class DisclosureGroup extends DetailsBase {
+    static observedAttributes: string[];
+    constructor();
+    attributeChangedCallback(name: string, oldValue: boolean, newValue: boolean): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    static polyfillDisconnectedCallback(el: DisclosureGroup): void;
+    static polyfillConnectedCallback(el: DisclosureGroup): void;
+    static handleClick: (event: Event) => Promise<void>;
+    static polyfillAttributeChangedCallback([entry]: MutationRecord[]): Promise<void>;
+}

package/generated/components/disclosure-group.js

@@ -0,0 +1,76 @@
+var _a;
+import { DetailsBase } from '../internal/class';
+import { cssTime } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+const observers = new WeakMap();
+export class DisclosureGroup extends DetailsBase {
+    constructor() {
+        super();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${_a.name} ⚡️ [${name}] change`);
+        if (CSS.supports('interpolate-size', 'allow-keywords'))
+            return;
+        const mr = {
+            attributeName: name,
+            oldValue: oldValue,
+            target: this,
+        };
+        // @ts-expect-error
+        _a.polyfillAttributeChangedCallback([mr]);
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (CSS.supports('interpolate-size', 'allow-keywords'))
+            return;
+        el.removeEventListener('click', _a.handleClick);
+        observers?.get(el)?.unobserve?.(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (CSS.supports('interpolate-size', 'allow-keywords'))
+            return;
+        el.addEventListener('click', _a.handleClick);
+    }
+    static async polyfillAttributeChangedCallback([entry]) {
+        const node = entry.target;
+        node.classList.remove(Snapshot.config['disclosure-group-animation-close-class']);
+        if (node.open) {
+            observers.set(node, new ResizeObserver(([entry]) => {
+                const { height } = entry.contentRect;
+                node?.style?.setProperty?.(Snapshot.config['disclosure-group-contents-height-css-prop'], `${height}px`);
+            }));
+            observers.get(node).observe(node);
+        }
+        else {
+            observers.get(node)?.unobserve?.(node);
+            observers.delete(node);
+            node?.style?.removeProperty?.(Snapshot.config['disclosure-group-contents-height-css-prop']);
+        }
+    }
+}
+_a = DisclosureGroup;
+DisclosureGroup.observedAttributes = ['open'];
+DisclosureGroup.handleClick = async (event) => {
+    if (!event.target.closest('summary'))
+        return;
+    const el = event.target.closest('details');
+    if (!el)
+        return;
+    const wasOpen = el.open; // will close after this event
+    el.inert = true;
+    if (wasOpen) {
+        el.classList.add(Snapshot.config['disclosure-group-animation-close-class']);
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+    }
+    await new Promise((r) => setTimeout(r, cssTime(`${el.computedStyleMap().get(Snapshot.config['disclosure-group-animation-duration-css-prop'])}`)));
+    el.inert = false;
+    if (wasOpen)
+        el.open = false;
+};

package/generated/components/index.d.ts

@@ -1 +1,15 @@
-export * from "./v-keyboard";
+export * from './navigation-stack';
+export * from './navigation-split-view';
+export * from './sheet-view';
+export * from './scroll-view';
+export * from './body-view';
+export * from './tab-bar';
+export * from './sidebar-toggle';
+export * from './borderless-button';
+export * from './v-keyboard';
+export * from './navigation-bar';
+export * from './bottom-bar';
+export * from './tab-item';
+export * from './tab-view';
+export * from './sidebar-view';
+export * from './disclosure-group';

package/generated/components/index.js

@@ -3,4 +3,18 @@
  *
  * 🟢 You can import this file directly.
  */
-export * from "./v-keyboard";
+export * from './navigation-stack';
+export * from './navigation-split-view';
+export * from './sheet-view';
+export * from './scroll-view';
+export * from './body-view';
+export * from './tab-bar';
+export * from './sidebar-toggle';
+export * from './borderless-button';
+export * from './v-keyboard';
+export * from './navigation-bar';
+export * from './bottom-bar';
+export * from './tab-item';
+export * from './tab-view';
+export * from './sidebar-view';
+export * from './disclosure-group';

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

@@ -0,0 +1,10 @@
+export declare class NavigationBar extends HTMLElement {
+    #private;
+    static get leadingPartName(): string;
+    static get principalPartName(): string;
+    static get trailingPartName(): string;
+    static get template(): HTMLTemplateElement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/generated/components/navigation-bar.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 _NavigationBar_instances, _a, _NavigationBar_template, _NavigationBar_shadowRoot, _NavigationBar_ro, _NavigationBar_sibling_get, _NavigationBar_sp_set, _NavigationBar_ep_set, _NavigationBar_measureStacks;
+export class NavigationBar extends HTMLElement {
+    static get leadingPartName() {
+        return 'toolbar-leading-stack';
+    }
+    static get principalPartName() {
+        return 'toolbar-principal-stack';
+    }
+    static get trailingPartName() {
+        return 'toolbar-trailing-stack';
+    }
+    static get template() {
+        if (!__classPrivateFieldGet(this, _a, "f", _NavigationBar_template))
+            __classPrivateFieldSet(this, _a, Object.assign(document.createElement('template'), {
+                innerHTML: `<div part="${this.leadingPartName}">
+    <slot name="leading"></slot>
+  </div>
+  <div part="${this.principalPartName}">
+    <slot></slot>
+  </div>
+  <div part="${this.trailingPartName}">
+    <slot name="trailing"></slot>
+  </div>`,
+            }), "f", _NavigationBar_template);
+        return __classPrivateFieldGet(this, _a, "f", _NavigationBar_template);
+    }
+    constructor() {
+        super();
+        _NavigationBar_instances.add(this);
+        _NavigationBar_shadowRoot.set(this, void 0);
+        _NavigationBar_ro.set(this, void 0);
+        __classPrivateFieldSet(this, _NavigationBar_shadowRoot, this.attachShadow({ mode: 'open' }), "f");
+        __classPrivateFieldGet(this, _NavigationBar_shadowRoot, "f").appendChild(document.importNode(this.constructor.template.content, true));
+        // this.#sp = this.#shadowRoot.querySelector<HTMLElement>(
+        //   '[part="tool-bat-navigation-bar-leading-stack"]'
+        // )!.offsetWidth
+        // this.#ep = this.#shadowRoot.querySelector<HTMLElement>(
+        //   '[part="tool-bat-navigation-bar-trailing-stack"]'
+        // )!.offsetWidth
+        __classPrivateFieldSet(this, _NavigationBar_ro, new ResizeObserver(__classPrivateFieldGet(this, _NavigationBar_instances, "m", _NavigationBar_measureStacks).bind(this)), "f");
+    }
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        __classPrivateFieldGet(this, _NavigationBar_ro, "f")?.observe(__classPrivateFieldGet(this, _NavigationBar_shadowRoot, "f").querySelector(`[part="${this.constructor.leadingPartName}"]`));
+        __classPrivateFieldGet(this, _NavigationBar_ro, "f")?.observe(__classPrivateFieldGet(this, _NavigationBar_shadowRoot, "f").querySelector(`[part="${this.constructor.trailingPartName}"]`));
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        __classPrivateFieldGet(this, _NavigationBar_ro, "f").disconnect();
+    }
+}
+_a = NavigationBar, _NavigationBar_shadowRoot = new WeakMap(), _NavigationBar_ro = new WeakMap(), _NavigationBar_instances = new WeakSet(), _NavigationBar_sibling_get = function _NavigationBar_sibling_get() {
+    return (this.parentElement?.querySelector(':scope > scroll-view') ?? undefined); //this.previousElementSibling ?? undefined
+}, _NavigationBar_sp_set = function _NavigationBar_sp_set(nv) {
+    ;
+    __classPrivateFieldGet(this, _NavigationBar_instances, "a", _NavigationBar_sibling_get)?.style?.setProperty?.('--navbar-padding-inline-start', `${nv}px`);
+}, _NavigationBar_ep_set = function _NavigationBar_ep_set(nv) {
+    ;
+    __classPrivateFieldGet(this, _NavigationBar_instances, "a", _NavigationBar_sibling_get)?.style?.setProperty?.('--navbar-padding-inline-end', `${nv}px`);
+}, _NavigationBar_measureStacks = function _NavigationBar_measureStacks(entries = []) {
+    console.debug(`${_a.name} ⚡️ resize observer callback: ${__classPrivateFieldGet(this, _NavigationBar_instances, "m", _NavigationBar_measureStacks).name}`);
+    for (const { contentRect, target } of entries) {
+        if (target.part.contains(this.constructor.leadingPartName))
+            __classPrivateFieldSet(this, _NavigationBar_instances, Math.round(contentRect.width), "a", _NavigationBar_sp_set);
+        else if (target.part.contains(this.constructor.trailingPartName))
+            __classPrivateFieldSet(this, _NavigationBar_instances, Math.round(contentRect.width), "a", _NavigationBar_ep_set);
+    }
+};
+_NavigationBar_template = { value: void 0 };

package/generated/components/navigation-split-view.d.ts

@@ -0,0 +1,5 @@
+export declare class NavigationSplitView extends HTMLElement {
+    static observedAttributes: string[];
+    constructor();
+    disconnectedCallback(): void;
+}

package/generated/components/navigation-split-view.js

@@ -0,0 +1,9 @@
+export class NavigationSplitView extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+    }
+}
+NavigationSplitView.observedAttributes = ['hidden'];

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

@@ -0,0 +1,6 @@
+export declare class NavigationStack extends HTMLElement {
+    static observedAttributes: string[];
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}