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

package/generated/components/sheet-view.js

@@ -1,26 +1,62 @@
-import { DialogBase } from '../internal/class';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
 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);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        el.addEventListener('cancel', SheetView.handleCancel);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff([
+            { types: 'cancel', listener: this.#handleCancel },
+            { types: 'keydown', listener: SheetView.#handleKeydown },
+        ], el).on());
+        el.autofocus = true;
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        // // NOTE: wait for config
+        // Snapshot.waitReady.then(() => {
+        //   switch (attributeName) {
+        //     case 'fine-presentation-large-adaptation':
+        //       const node = target instanceof HTMLDialogElement && target
+        //       if (!node) break
+        //       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 as unknown as EventListener, mediaQueryList).on(), 'mediaquery')
+        //       break
+        //   }
+        // })
     }
+    static #handleKeydown = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        if ('Escape' !== evt.key)
+            return;
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+        evt.stopPropagation();
+    };
+    static #handleCancel = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        if (!evt.cancelable)
+            return;
+        evt.preventDefault();
+    };
 }
-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,85 @@
-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, devFlags, onoff } from '../internal/utils';
+const observers = new ResizeObserverSingleton();
 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);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
+        const entry = {
+            target: this,
+        };
+        observers.observe(this, debounce(_a.#handleMeasure, 100, true)); //this.#ro?.observe(this)
+        // @ts-expect-error
+        _a.#handleMeasure([entry]);
     }
     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));
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
+        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) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        const { target } = entry ?? {};
+        if (!(target instanceof HTMLElement))
+            return;
+        // set/remove css var/prop to parent based on shown/hidden
+        const tv = target.parentElement;
+        // inlineSize = entry.borderBoxSize?.at(0)?.inlineSize ?? entry.contentRect?.width ?? 0,
+        // blockSize = entry.borderBoxSize?.at(0)?.blockSize ?? entry.contentRect?.height ?? 0
+        self.requestAnimationFrame(() => {
+            const inlineSize = target.offsetWidth ?? 0;
+            if (0 < inlineSize)
+                tv?.style?.setProperty?.('--sidebar-toggle-padding-inline-start', `${inlineSize}px`); //$.prop('--sidebar-toggle-padding-inline-start', `${inlineSize}px`, tv) //
+            else
+                tv?.style?.removeProperty?.('--sidebar-toggle-padding-inline-start'); //$.prop('--sidebar-toggle-padding-inline-start', null, tv) //
+        });
+        // auto close IF open
+        const { container, sideBar } = _a.query(target); //target?.closest('navigation-split-view,tab-view')
+        if (!sideBar?.open)
+            return;
+        self.requestAnimationFrame(() => {
+            switch (container?.tagName) {
+                case 'NAVIGATION-SPLIT-VIEW':
+                    if (0 < target.offsetWidth && 0 < target.offsetHeight)
+                        return;
+                    break;
+                case 'TAB-VIEW':
+                    // 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" ?? FIXME: removed this bc/ inside sidebar!
+                        ),
+                    ].some(({ offsetWidth, offsetHeight }) => 0 < offsetWidth && 0 < offsetHeight))
+                        return;
+                    break;
+            }
+            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();
-};
+    #handleClick({ target, type }) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        if (!target?.closest('button'))
+            return;
+        const { sideBar } = _a.query(target);
+        if (!sideBar?.open)
+            sideBar?.showModal();
+        else
+            sideBar.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>;
 }

package/generated/components/sidebar-view.js

@@ -1,26 +1,34 @@
-var _a;
-import { DialogBase } from '../internal/class';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
 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);
+        el.removeEventListener('click', SidebarView.#handleClick);
+        CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        el.addEventListener('click', _a.handleClick);
+        CleanupRegistry.register(el, onoff('click', SidebarView.#handleClick, el).on());
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('[is=sidebar-view]'))
+                return false;
+            if (target.closest('tool-bar-item'))
+                return false;
+            return true;
+        }), el).on());
+        el.autofocus = true;
     }
+    /** Autoclose on click outside. */
+    static #handleClick = async ({ target, type }) => {
+        if (devFlags.debug)
+            console.debug(`${SidebarView.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        if (target instanceof HTMLDialogElement && 'sidebar-view' === target.getAttribute('is'))
+            target.close?.();
+    };
 }
-_a = SidebarView;
-SidebarView.handleClick = async (event) => {
-    if ('DIALOG' === event.target.tagName &&
-        'sidebar-view' === event.target.getAttribute('is'))
-        event?.target?.close?.();
-};

package/generated/components/sticky-container.d.ts

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

package/generated/components/sticky-container.js

@@ -0,0 +1,26 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff } from '../internal/utils';
+export class StickyContainer extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ connect`);
+        // CleanupRegistry.register(this, onoff('transitionend transitionstart transitioncancel', this.#handleTransitionrun as unknown as EventListener, this).on())
+        CleanupRegistry.register(this, onoff('transitionrun', this.#handleTransitionrun, this).on());
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        if ('--stuck' !== propertyName || '::before' !== pseudoElement || !target.matches('sticky-container'))
+            return;
+        const stuck = self.getComputedStyle(this, 'before').getPropertyValue('--stuck');
+        this.toggleAttribute('stuck', '1' === stuck);
+    };
+}

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

@@ -1,9 +1,10 @@
-import { DialogBase } from '../internal/class';
+import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ */
 export declare class TabBar extends DialogBase {
+    #private;
     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

@@ -1,26 +1,43 @@
-var _a;
-import { DialogBase } from '../internal/class';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A screen that lets users switch between different views using buttons, tabs, or other controls.
+ */
 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);
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ disconnect`);
+        el.removeEventListener('click', TabBar.#handleClick);
+        CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        el.addEventListener('click', _a.handleClick);
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ connect`);
+        el.autofocus = true;
+        // Snapshot.waitReadyFor(el).then((r) => {
+        //   if (!r) return
+        CleanupRegistry.register(el, onoff('click', TabBar.#handleClick, el).on());
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('[is=tab-bar]'))
+                return false;
+            if (target.closest('tool-bar-item'))
+                return false;
+            return true;
+        }), el).on());
+        // })
     }
+    static #handleClick = async ({ target, type }) => {
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        if (target instanceof HTMLDialogElement && 'tab-bar' === target.getAttribute('is'))
+            target.close?.();
+    };
 }
-_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

@@ -1,6 +1,7 @@
-export declare class TabItem extends HTMLElement {
+import { ButtonBase } from '../namespace-browser/base';
+export declare class TabItem extends ButtonBase {
     #private;
     constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
+    static polyfillDisconnectedCallback(btn: HTMLButtonElement): void;
+    static polyfillConnectedCallback(btn: TabItem): void;
 }

package/generated/components/tab-item.js

@@ -1,35 +1,131 @@
-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 {
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+import { TabView } from './tab-view';
+export class TabItem extends ButtonBase {
     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"));
+    static polyfillDisconnectedCallback(btn) {
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(btn);
     }
-    connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
-        this.addEventListener('click', __classPrivateFieldGet(this, _TabItem_handleClick, "f"));
+    static polyfillConnectedCallback(btn) {
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ connect`);
+        Object.assign(btn, {
+            tabIndex: 0,
+            ariaSelected: 'false',
+        });
+        CleanupRegistry.register(btn, onoff('click', TabItem.#handleClick, btn).on());
+        const handler1 = TabItem.#handleTabRevealOrSwap.bind(null, btn), handler2 = TabItem.#handleTabMoreStackAllowance.bind(null, btn), tv = btn.closest('tab-view') ?? undefined;
+        CleanupRegistry.register(btn, onoff('tabreveal tabswap', handler1, tv).on());
+        CleanupRegistry.register(btn, onoff('tab-view:adaptable-tab-bar-placement-change', handler2, tv).on());
+        // NOTE: Make sure before invoking props of TAB-VIEW
+        self.customElements.whenDefined('tab-view').then(() => {
+            if (!btn.isConnected)
+                return;
+            if (tv?.selectedTab?.map(({ id }) => id)?.includes(btn.value))
+                void this.#handleTabRevealOrSwap(btn, new CustomEvent('tabreveal', { detail: { tag: btn.value } }));
+            if (tv?.moreTab)
+                this.#handleTabMoreStackAllowance(btn, new CustomEvent('tab-view:adaptable-tab-bar-placement-change'));
+        });
     }
+    static #handleTabMoreStackAllowance = async (btn, evt) => {
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        const tv = btn.closest('tab-view');
+        if (!tv)
+            return;
+        if (tv.moreTab?.id !== btn.value)
+            return;
+        btn.hidden = 'bottom-bar' !== tv.tabBarPlacement;
+    };
+    static #handleTabRevealOrSwap = async (btn, evt) => {
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        const tv = btn?.closest('tab-view');
+        if (!tv)
+            return;
+        // if (evt.detail?.tag !== btn.value) return
+        // await Snapshot.waitReady
+        const isSelected = tv.selectedTab.map(({ id }) => id).includes(btn.value); //'tabreveal' === evt?.type
+        if (`${isSelected}` !== btn.ariaSelected)
+            btn.ariaSelected = `${isSelected}`;
+        if (!isSelected)
+            return;
+        setTimeout(() => {
+            if (btn.ariaSelected !== 'true' || !btn.isConnected)
+                return;
+            btn.scrollIntoView({
+                behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
+                block: 'nearest',
+                inline: 'nearest',
+            });
+        }, 100);
+    };
+    static #handleClick = async ({ type, currentTarget: btn }) => {
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${type}`);
+        if (!(btn instanceof HTMLElement))
+            return;
+        // const tag = btn.getAttribute('value')
+        // if (!tag) return // sidebartoggle > tab-item //throw new DOMException(`Attribute "tag" is set but invalid`, 'InvalidStateError')
+        const tv = btn.closest('tab-view');
+        if (!tv)
+            throw new Error('TabView not found');
+        const newTab = tv?.querySelector(`#${btn.getAttribute('value')}`);
+        if (!newTab)
+            return;
+        // console.log(99, TabView.gatherTab(newTab))
+        // const possibleParentNs = newTab?.parentElement?.closest<NavigationStack | NavigationSplitView>('navigation-stack,navigation-split-view')
+        const tabs = TabView.gatherTab(newTab); //[possibleParentNs, newTab].filter(Boolean) as (NavigationStack | NavigationSplitView)[]
+        // if (possibleParentNs) tabs.unshift(possibleParentNs)
+        // SECTION: before submitting new tabs, check for tabroot
+        // iphone cases:
+        // current -> new
+        // ns1 -> ns1 tabroot💡ns1       1 1 ===                            ===
+        // more -> more tabroot💡more    1 1 ===                            ===
+        // ns1 -> more tabroot💡more     1 1 !==                            ->
+        // more,settings -> more tabroot💡more  2 1 !==                     ↖
+        // more,settings -> ns1          2 1 !==                            <-
+        // ns1 -> more tabroot💡more     1 1 !==                            ->
+        // ipad cases:
+        // ns1 -> ns1 tabroot💡ns1                            1 1 ===       ===
+        // more,settings -> more,settings tabroot💡settings   2 2 ===       ===
+        // more,settings -> more,ns3  2 2 !==                               <->
+        // more,ns3 -> more,settings  2 2 !==                               <->
+        // ns1 -> more,settings       1 2 !==                               ↘
+        const seed1 = tv.selectedTab.map((item) => item.id).join(','), seed2 = tabs.map((item) => item.id).join(',');
+        const dir = tv.selectedTab.length < tabs.length
+            ? '↘'
+            : tv.selectedTab.length > tabs.length
+                ? tv.selectedTab.at(0) === tabs.at(0)
+                    ? '↖'
+                    : '<-'
+                : seed1 === seed2
+                    ? '==='
+                    : tv.moreTab === tabs.at(-1)
+                        ? '->'
+                        : '<->';
+        if (['===', '↖'].includes(dir)) {
+            for (const tab of tabs.reverse())
+                if (tv.selectedTab.includes(tab)) {
+                    const eventType = 'tabroot';
+                    if (devFlags.debug)
+                        console.debug(`${TabItem.name} 💡 ${eventType}`);
+                    tab?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
+                    return; // skip rest no selection!
+                }
+        }
+        else if ('->' === dir) {
+            const eventType = 'tabroot';
+            if (devFlags.debug)
+                console.debug(`${TabItem.name} 💡 ${eventType}`);
+            tabs.at(0)?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
+        }
+        // SECTION: finally, submit new tabs
+        tv.selectedTab = tabs;
+    };
 }
-_a = TabItem, _TabItem_handleClick = new WeakMap();

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

@@ -1,7 +1,22 @@
+import { type NavigationSplitView } from './navigation-split-view';
+import { type NavigationStack } from './navigation-stack';
+declare const TAB_BAR_PLACEMENTS: readonly ["bottom-bar", "ornament", "sidebar", "top-bar"];
+export type TabBarPlacement = (typeof TAB_BAR_PLACEMENTS)[number];
+/**
+ * @fires tabshow A Tab is shown
+ * @fires tabhide A Tab is hidden
+ * @fires tab-view:toggle
+ * @fires tab-view:adaptable-tab-bar-placement-change
+ */
 export declare class TabView extends HTMLElement {
+    #private;
+    static gatherTab(newTab: NavigationStack | NavigationSplitView): (NavigationStack | NavigationSplitView)[];
     constructor();
     disconnectedCallback(): void;
+    get tabBarPlacement(): "bottom-bar" | "ornament" | "sidebar" | "top-bar" | undefined;
+    get moreTab(): NavigationStack | null;
     connectedCallback(): void;
-    get selection(): HTMLElement | null;
-    set selection(nv: HTMLElement | null);
+    get selectedTab(): (NavigationStack | NavigationSplitView)[];
+    set selectedTab(tabs: (NavigationStack | NavigationSplitView)[]);
 }
+export {};