@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.8

package/generated/components/scroll-view.js

@@ -1,80 +1,187 @@
-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;
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
+import { $, frame, onoff, slowHideShow } from '../internal/utils';
+import { LifecycleObserver } from '../lifecycle-observer';
+const observers = new ResizeObserverSingleton();
 export class ScrollView extends HTMLElement {
+    static get observedAttributes() {
+        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-bar-title-display-mode'];
+    }
+    static #template;
     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);
+        return (this.#template ??= $(String.raw `
+  <slot></slot>
+  <div part="root scroll-view-navbar">
+    <div part="root scroll-view-navbar-stack">
+      <slot name="top-bar-principal"></slot>
+    </div>
+  </div>
+  <div part="root scroll-view-toolbar">
+    <div part="root scroll-view-toolbar-stack">
+      <slot name="bottom-bar-principal"></slot>
+    </div>
+  </div>`, ''));
     }
+    #shadowRoot;
+    #navbarPrincipalSlot;
+    #isMidScroll;
+    #lastScrollTop = 0;
+    // #stopRecordingScrollTop?: boolean = false
+    #beforeTabSwapLastScrolltop;
     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 }
-        // )
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        this.#navbarPrincipalSlot = this.#shadowRoot.querySelector('slot[name=top-bar-principal]') ?? undefined;
     }
     disconnectedCallback() {
         console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        observers.unobserve(this);
+        frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
     }
     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>`);
+        CleanupRegistry.register(this, onoff([
+            // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
+            { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
+        ], this.closest('tab-view') ?? undefined).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'scroll', listener: this.#handleScroll, addOptions: { passive: true } },
+            { types: 'scrollend', listener: this.#handleScrollend, addOptions: { passive: true } },
+        ], this).on());
+        frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('pageshow', { detail: { page: this }, bubbles: true, composed: true })));
+        observers.observe(this, this.#handleMeasure.bind(this));
+        // frame(this).then((r) => {
+        //   if (!r) return
+        //   let first = true
+        //   observeResizeEnd(this, () => {
+        //     if (first) {
+        //       first = false
+        //       return
+        //     }
+        //     this.dispatchEvent(new CustomEvent('resizeend', { bubbles: true, composed: true }))
+        //   })
+        // })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'navigation-inline-title':
+                this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
+                break;
+            case 'navigation-inline-subtitle':
+                this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
+                break;
+            case 'navigation-title':
+                //
+                break;
+            case 'navigation-bar-title-display-mode':
+                if (oldValue === newValue)
+                    break;
+                if (this.closest('[hidden]'))
+                    break; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
+                if (!this.#isMidScroll)
+                    break;
+                const title = this.#navbarPrincipalSlot?.assignedElements({ flatten: true })?.at(0);
+                slowHideShow('largeinline' === `${oldValue}${newValue}` ? 'show' : 'hide', title);
+                break;
+        }
     }
-    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;
+    #handleScroll = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (!this.#isMidScroll)
+            this.#isMidScroll = true;
+        // if (this.#stopRecordingScrollTop) return
+        this.#lastScrollTop = evt.target.scrollTop;
+    };
+    #handleScrollend = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (this.#isMidScroll)
+            this.#isMidScroll = false;
+    };
+    #handleMeasure = (entry) => {
+        console.debug(`${_a.name} ⚡️ measure`);
+        if (0 === entry.contentRect.width + entry.contentRect.height)
+            return;
+        if (undefined === this.#beforeTabSwapLastScrolltop)
+            return;
+        if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop)
+            return;
+        // this.#stopRecordingScrollTop = true
+        entry.target.scrollTop = this.#beforeTabSwapLastScrolltop;
+        // entry.target.scrollTo({
+        //   top: this.#beforeTabSwapLastScrolltop,
+        //   behavior: 'smooth',
+        // }) //
+        // this.#stopRecordingScrollTop = false
+        this.#beforeTabSwapLastScrolltop = undefined;
+    };
+    #handleTabReveal = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (!evt.target?.contains(this))
+            return;
+        if (this.closest('[hidden]'))
+            return;
+        // console.log(888, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
+        // this.style.setProperty('clip-path', 'inset(50%)')
+        // this.style.setProperty('opacity', '0.001')
+        // this.style.opacity = '0.001'
+        // console.log(99, this.style.opacity)
+        // self.requestAnimationFrame(() => {
+        //   if (undefined === this.#beforeTabSwapLastScrolltop) return
+        //   if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop) return
+        //   this.#stopRecordingScrollTop = true
+        //   // console.log(999, this.#beforeTabSwapLastScrolltop)
+        //   // console.log(999, this, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
+        //   this.scrollTop = this.#beforeTabSwapLastScrolltop
+        //   // this.scrollTo({
+        //   //   top: this.#beforeTabSwapLastScrolltop,
+        //   //   behavior: 'instant',
+        //   // }) //
+        //   this.#stopRecordingScrollTop = false
+        //   this.#beforeTabSwapLastScrolltop = undefined
+        //   // self.requestAnimationFrame(() => {
+        //   //   // this.style.removeProperty('opacity')
+        //   // })
+        // })
+    };
+    #handleTabBeforeswap = (evt) => {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (!evt.target?.contains(this))
+            return;
+        if (this.closest('[hidden]'))
+            return;
+        this.#beforeTabSwapLastScrolltop = this.scrollTop; //#lastScrollTop
+    };
+    centerScrollToElement(child) {
         // scrollTop needed to center child
-        const parentRect = this.getBoundingClientRect();
-        const childRect = child.getBoundingClientRect();
+        const parentRect = this.getBoundingClientRect(), 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;
+        const top = this.scrollTop + childRect.top - parentRect.top - parentRect.height / 2 + childRect.height / 2;
         this.scrollTo({
-            top: scrollTop,
-            behavior: 'smooth', // optional: smooth scroll
+            top,
+            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant', // optional: smooth scroll
         });
     }
+    #renderNavTitle = (title, subtitle) => {
+        const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ??
+            this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`));
+        let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
+        if (title) {
+            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`));
+            titleLabel.setAttribute('title', title);
+        }
+        else
+            titleLabel?.remove();
+        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
+        if (subtitle) {
+            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`));
+            subtitleLabel.setAttribute('title', subtitle);
+        }
+        else
+            subtitleLabel?.remove();
+    };
 }
-_a = ScrollView, _ScrollView_shadowRoot = new WeakMap();
-_ScrollView_template = { value: void 0 };
+_a = ScrollView;

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

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

package/generated/components/section-view.js

@@ -0,0 +1,81 @@
+import { $ } from '../internal/utils';
+export class SectionView extends HTMLElement {
+    static get observedAttributes() {
+        return ['header', 'footer'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+  <div part="root section-main-stack">
+    <slot></slot>
+  </div>
+  <div part="root section-header-stack">
+    <slot name="header"></slot>
+  </div>
+  <div part="root section-footer-stack">
+    <slot name="footer"></slot>
+  </div>`, ''));
+        // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
+    }
+    #shadowRoot;
+    // #observer?: IntersectionObserver
+    // #sibling?: HTMLElement
+    // #sentinel?: HTMLElement
+    // #sentinelIsIntersecting: boolean = false
+    // #isIntersecting: boolean = false
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        // Snapshot.waitReady.then(() => {
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        // this.#sentinel = this.#shadowRoot.querySelector('.sticky-sentinel') ?? undefined
+        // })
+    }
+    disconnectedCallback() {
+        console.debug(`${SectionView.name} ⚡️ disconnect`);
+        // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
+        // this.#observer?.unobserve(this)
+    }
+    connectedCallback() {
+        console.debug(`${SectionView.name} ⚡️ connect`);
+        // this.#sibling = this.closest('scroll-view') ?? undefined
+        // Snapshot.waitReady.then(() => {
+        // if (!(await frame(this))) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
+        // if (!this.isConnected) return
+        // const blockSizeProp = getComputedStyle(this).getPropertyValue('--navigation-bar-block-size') || '0', //`${document.documentElement.computedStyleMap().get(`--navigation-bar-block-size`) ?? '0'}`, //
+        //   blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(getComputedStyle(document.documentElement).fontSize) : 1)
+        // this.#observer = new IntersectionObserver(this.#handleIntersect, {
+        //   root: this.#sibling,
+        //   rootMargin: `-${blockSize}px 0px 0px 0px`,
+        //   threshold: [0, 1],
+        // })
+        // if (this.#sentinel) this.#observer.observe(this.#sentinel)
+        // this.#observer.observe(this)
+        // })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        // Snapshot.waitReady.then(() => {
+        switch (name) {
+            case 'header':
+                let header = this.querySelector(':scope>[slot=header]');
+                if (newValue) {
+                    header ??= this.appendChild($(`<header slot="header"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></header>`));
+                    header.querySelector('label-view')?.setAttribute('title', newValue);
+                }
+                else
+                    header?.remove();
+                break;
+            case 'footer':
+                let footer = this.querySelector(':scope>[slot=footer]');
+                if (newValue) {
+                    footer ??= this.appendChild($(`<footer slot="footer"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></footer>`));
+                    footer.querySelector('label-view')?.setAttribute('title', newValue);
+                }
+                else
+                    footer?.remove();
+                break;
+        }
+        // })
+    }
+}

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

@@ -1,9 +1,9 @@
-import { DialogBase } from '../internal/class';
+import { DialogBase } from '../namespace-browser/base';
 export declare class SheetView extends DialogBase {
+    #private;
+    static get observedAttributes(): string[];
     constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
     static polyfillDisconnectedCallback(el: SheetView): void;
     static polyfillConnectedCallback(el: SheetView): void;
-    static handleCancel: (event: Event) => void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
 }

package/generated/components/sheet-view.js

@@ -1,26 +1,69 @@
-import { DialogBase } from '../internal/class';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { onoff } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
 export class SheetView extends DialogBase {
+    static get observedAttributes() {
+        return ['fine-presentation-large-adaptation'];
+    }
     constructor() {
         super();
     }
-    disconnectedCallback() {
+    static polyfillDisconnectedCallback(el) {
         console.debug(`${SheetView.name} ⚡️ disconnect`);
-        SheetView.polyfillDisconnectedCallback(this);
+        CleanupRegistry.unregister(el);
     }
-    connectedCallback() {
+    static polyfillConnectedCallback(el) {
         console.debug(`${SheetView.name} ⚡️ connect`);
-        SheetView.polyfillConnectedCallback(this);
+        CleanupRegistry.register(el, onoff([
+            { types: 'cancel', listener: this.#handleCancel },
+            { types: 'keydown', listener: SheetView.#handleKeydown },
+        ], el).on());
+        el.autofocus = true;
     }
-    static polyfillDisconnectedCallback(el) {
-        el.removeEventListener('cancel', SheetView.handleCancel);
-    }
-    static polyfillConnectedCallback(el) {
-        el.addEventListener('cancel', SheetView.handleCancel);
+    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        await Snapshot.waitReady; // NOTE: wait for config
+        switch (attributeName) {
+            case 'fine-presentation-large-adaptation':
+                const node = target;
+                CleanupRegistry.unregister(node, 'mediaquery');
+                if ('bottom-bar' !== target.getAttribute(attributeName ?? ''))
+                    break;
+                const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${Snapshot.config['ipad-sheet-view-inline-size']}) and (min-height: ${Snapshot.config['ipad-sheet-view-height']})`);
+                SheetView.#handleMediaChange(node, new MediaQueryListEvent(`media-change`, {
+                    matches: mediaQueryList.matches,
+                })); // Initial check
+                const handler1 = SheetView.#handleMediaChange.bind(null, node);
+                CleanupRegistry.register(node, onoff('change', handler1, mediaQueryList).on(), 'mediaquery');
+                break;
+        }
     }
+    static #handleKeydown = (evt) => {
+        console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        if ('Escape' !== evt.key)
+            return;
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+        evt.stopPropagation();
+    };
+    static #handleCancel = (evt) => {
+        console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        if (!evt.cancelable)
+            return;
+        evt.preventDefault();
+    };
+    static #handleMediaChange = (el, evt) => {
+        console.debug(`${SheetView.name} ⚡️ ${evt?.type}`);
+        if (evt.matches)
+            for (const item of el.querySelectorAll(':scope>tool-bar>[slot^="top-bar-"]')) {
+                item.dataset.previousSlot = item.getAttribute('slot') ?? '';
+                item.slot = 'bottom-bar-trailing';
+            }
+        else
+            for (const item of el.querySelectorAll(':scope>tool-bar>[data-previous-slot]')) {
+                item.slot = item.dataset.previousSlot ?? '';
+                delete item.dataset.previousSlot;
+            }
+    };
 }
-SheetView.handleCancel = (event) => {
-    console.debug(`${SheetView.name} ⚡️ cancel (${event.cancelable})`);
-    if (!event.cancelable)
-        return;
-    event.preventDefault();
-};

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

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

package/generated/components/sidebar-toggle.js

@@ -1,81 +1,107 @@
-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;
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
+import { $, debounce, onoff } from '../internal/utils';
+const observers = new ResizeObserverSingleton();
 export class SidebarToggle extends HTMLElement {
+    // #ro
     // #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.#ro = new ResizeObserver(
+        //   debounce(this.#handleMeasure.bind(this), 100, true)
+        // )
         // 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);
+        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
+        const entry = {
+            target: this,
+        };
+        // NOTE: wait for config
+        // Snapshot.waitReady.then(() => {
+        observers.observe(this, debounce(_a.#handleMeasure, 100, true)); //this.#ro?.observe(this)
         // this.#io.observe(this)
-        __classPrivateFieldGet(this, _SidebarToggle_instances, "m", _SidebarToggle_autoCloseTabBar).call(this);
+        // @ts-expect-error
+        _a.#handleMeasure([entry]);
+        // })
     }
     disconnectedCallback() {
         console.debug(`${_a.name} ⚡️ disconnect`);
-        __classPrivateFieldGet(this, _SidebarToggle_ro, "f")?.disconnect();
+        observers.unobserve(this); //this.#ro?.disconnect()
         // this.#io.disconnect()
-        this.removeEventListener('click', __classPrivateFieldGet(this, _SidebarToggle_instances, "m", _SidebarToggle_handleClick));
+        CleanupRegistry.unregister(this);
     }
-}
-_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);
+    static query(target) {
+        const container = target?.closest('navigation-split-view,tab-view'), sideBar = container?.querySelector(':scope > [is=sidebar-view]');
+        return { container, sideBar };
+    }
+    // This triggers on show/hide of any of sidebar-toggle elements
+    static #handleMeasure(entry) {
+        console.debug(`${_a.name} ⚡️ measure`);
+        const target = entry?.target;
+        // set/remove css var/prop to parent based on shown/hidden
+        // for (const { target } of entries) {
+        const tv = target?.parentElement, width = target?.offsetWidth ?? 0;
+        // const gapProp =
+        //     getComputedStyle(tg).getPropertyValue('--toolbar-col-gap') || '0',
+        //   gap = parseFloat(gapProp) * 1 //(gapProp.endsWith('rem')? parseFloat(getComputedStyle(document.documentElement).fontSize): 1)
+        if (0 < width)
+            $.prop('--sidebar-toggle-padding-inline-start', `${width}px`, tv); //tv?.style?.setProperty?.(Snapshot.config!['sidebar-toggle-padding-inline-start-css-prop'], `${width}px`)
+        else
+            $.prop('--sidebar-toggle-padding-inline-start', null, tv); //tv?.style?.removeProperty?.(Snapshot.config!['sidebar-toggle-padding-inline-start-css-prop'])
+        // }
+        // auto close IF open
+        // for (const { target } of entries) {
+        const { container, sideBar } = _a.query(target); //target?.closest('navigation-split-view,tab-view')
+        // const sideBar = container?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
+        if (!sideBar?.open)
+            return;
+        switch (container?.tagName) {
+            case 'NAVIGATION-SPLIT-VIEW':
+                // const sideBar = target?.parentElement?.querySelector<HTMLDialogElement>(':scope > dialog[is=sidebar-view]')
+                // if (!sideBar?.open) return
+                if (0 < target.offsetWidth && 0 < target.offsetHeight)
+                    return;
+                // sideBar?.close?.()
+                break;
+            case 'TAB-VIEW':
+                // const tabBar = container.querySelector<HTMLDialogElement>(':scope > dialog[is=tab-bar]')
+                // if (!tabBar?.open) return
+                // scan all toggles for anyone that is visible, sign that sidebar should stay open
+                if ([
+                    ...container.querySelectorAll(":scope > sidebar-toggle,:scope > [is=tab-bar] > sidebar-toggle,:scope > [is='sidebar-view'] > tool-bar > sidebar-toggle"),
+                ].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
+                    return;
+                //tabBar?.close?.()
+                break;
         }
+        sideBar?.close?.();
+        // }
+    }
+    // _checkVisibility2(entries) {
+    //   entries.forEach((entry) => {
+    //     console.log('Visible in viewport?', entry.isIntersecting)
+    //   })
+    // }
+    #handleClick(evt) {
+        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const target = evt.target;
+        if (!target?.closest('button'))
+            return;
+        const { sideBar } = _a.query(target);
+        // const container = target?.closest('tab-view,navigation-split-view')
+        // const dialog =
+        //   'TAB-VIEW' === container?.tagName
+        //     ? container.querySelector<TabBar>('dialog[is="tab-bar"]')
+        //     : container?.querySelector<SidebarView>('dialog[is="sidebar-view"]')
+        if (!sideBar?.open)
+            sideBar?.showModal();
+        else
+            sideBar.close();
     }
-    // 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();
-};
+}
+_a = SidebarToggle;

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

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