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

package/generated/components/sheet-view.js

@@ -1,45 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A dialog that slides up over the current screen.
- */
-export class SheetView extends DialogBase {
-    constructor() {
-        super();
-    }
-    static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${SheetView.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(el);
-    }
-    static polyfillConnectedCallback(el) {
-        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 ?? '')}")`);
-    }
-    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();
-    };
-}

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

@@ -1,15 +0,0 @@
-/**
- * @summary A control that shows or hides the sidebar view.
- */
-export declare class SidebarToggle extends HTMLElement {
-    #private;
-    constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-    private static query;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sidebar-toggle': SidebarToggle;
-    }
-}

package/generated/components/sidebar-toggle.js

@@ -1,88 +0,0 @@
-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();
-/**
- * @summary A control that shows or hides the sidebar view.
- */
-export class SidebarToggle extends HTMLElement {
-    constructor() {
-        super();
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        observers.unobserve(this);
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        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]);
-    }
-    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?.();
-        });
-    }
-    #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,10 +0,0 @@
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A container view that arranges navigation destinations in a single column.
- */
-export declare class SidebarView extends DialogBase {
-    #private;
-    constructor();
-    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
-    static polyfillConnectedCallback(el: HTMLDialogElement): void;
-}

package/generated/components/sidebar-view.js

@@ -1,37 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A container view that arranges navigation destinations in a single column.
- */
-export class SidebarView extends DialogBase {
-    constructor() {
-        super();
-    }
-    static polyfillDisconnectedCallback(el) {
-        el.removeEventListener('click', SidebarView.#handleClick);
-        CleanupRegistry.unregister(el);
-    }
-    static polyfillConnectedCallback(el) {
-        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?.();
-    };
-}

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

@@ -1,11 +0,0 @@
-export declare class StickyContainer extends HTMLElement {
-    #private;
-    constructor();
-    disconnectedCallback(): void;
-    connectedCallback(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sticky-container': StickyContainer;
-    }
-}

package/generated/components/sticky-container.js

@@ -1,26 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
-export class StickyContainer extends HTMLElement {
-    constructor() {
-        super();
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
-    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());
-    }
-    #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,10 +0,0 @@
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A container view that groups tab-items together along the top or bottom of the screen.
- */
-export declare class TabBar extends DialogBase {
-    #private;
-    constructor();
-    static polyfillDisconnectedCallback(el: HTMLDialogElement): void;
-    static polyfillConnectedCallback(el: HTMLDialogElement): void;
-}

package/generated/components/tab-bar.js

@@ -1,40 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff, touchGlass } from '../internal/utils';
-import { DialogBase } from '../namespace-browser/base';
-/**
- * @summary A container view that groups tab-items together along the top or bottom of the screen.
- */
-export class TabBar extends DialogBase {
-    constructor() {
-        super();
-    }
-    static polyfillDisconnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${TabBar.name} ⚡️ disconnect`);
-        el.removeEventListener('click', TabBar.#handleClick);
-        CleanupRegistry.unregister(el);
-    }
-    static polyfillConnectedCallback(el) {
-        if (devFlags.debug)
-            console.debug(`${TabBar.name} ⚡️ connect`);
-        el.autofocus = true;
-        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?.();
-    };
-}

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

@@ -1,10 +0,0 @@
-import { ButtonBase } from '../namespace-browser/base';
-/**
- * @summary A control that switches the tab view to this tab.
- */
-export declare class TabItem extends ButtonBase {
-    #private;
-    constructor();
-    static polyfillDisconnectedCallback(btn: HTMLButtonElement): void;
-    static polyfillConnectedCallback(btn: TabItem): void;
-}

package/generated/components/tab-item.js

@@ -1,134 +0,0 @@
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { devFlags, onoff } from '../internal/utils';
-import { ButtonBase } from '../namespace-browser/base';
-import { TabView } from './tab-view';
-/**
- * @summary A control that switches the tab view to this tab.
- */
-export class TabItem extends ButtonBase {
-    constructor() {
-        super();
-    }
-    static polyfillDisconnectedCallback(btn) {
-        if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(btn);
-    }
-    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;
-    };
-}

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

@@ -1,31 +0,0 @@
-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];
-/**
- * @summary A container view that switches between screens using tabs.
- *
- * @cssprop --adaptable-tab-bar-placement
- *
- * @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 selectedTab(): (NavigationSplitView | NavigationStack)[];
-    set selectedTab(tabs: (NavigationSplitView | NavigationStack)[]);
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'tab-view': TabView;
-    }
-}
-export {};

package/generated/components/tab-view.js

@@ -1,198 +0,0 @@
-var _a;
-import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { NavigationPath } from '../internal/class/navigation-path';
-import { $, cssTime, debounce, devFlags, frame, onoff, timeout } from '../internal/utils';
-import { Snapshot } from '../snapshot';
-const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
-/**
- * @summary A container view that switches between screens using tabs.
- *
- * @cssprop --adaptable-tab-bar-placement
- *
- * @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 class TabView extends HTMLElement {
-    #debouncedHandler;
-    #cssStyleObserver;
-    #afterTabRevealDelay = timeout();
-    #cachedAdaptableTabBarPlacement = 'bottom-bar';
-    static gatherTab(newTab) {
-        const possibleParentNs = newTab?.parentElement?.closest('navigation-stack,navigation-split-view');
-        return [possibleParentNs, newTab].filter(Boolean);
-    }
-    constructor() {
-        super();
-        this.#debouncedHandler = debounce(this.#handleSelectionChange, 1);
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        this.#afterTabRevealDelay.cancel();
-        this.#cssStyleObserver?.disconnect();
-        CleanupRegistry.unregister(this);
-    }
-    get tabBarPlacement() {
-        return this.#cachedAdaptableTabBarPlacement;
-    }
-    get moreTab() {
-        return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        this.#cssStyleObserver = new CSSStyleObserver({
-            properties: ['--adaptable-tab-bar-placement-index'],
-        });
-        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
-        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); // Snapshot.waitReady.then(this.#handleStyleChange)
-        CleanupRegistry.register(this, onoff([
-            { types: 'tabreveal tabswap', listener: this.#debouncedHandler },
-            { types: 'beforetabreveal beforetabswap', listener: this.#addAnimations },
-            { types: 'tab-view:adaptable-tab-bar-placement-change', listener: this.#handleAdaptableTabBarPlacementChange },
-            { types: 'pagereveal', listener: this.#handleTabViewPagereveal },
-            {
-                types: 'click',
-                listener: this.#handleSummaryClick,
-            },
-        ], this).on());
-    }
-    #handleSummaryClick = ({ target }) => {
-        if (!(target instanceof HTMLElement))
-            return;
-        const summary = target.closest('summary');
-        if (!summary)
-            return;
-        if (0 === $.siblings('[aria-selected=true]', summary).length)
-            return;
-        if (!summary.closest('scroll-view')?.matches('tab-view > [is=sidebar-view] > scroll-view'))
-            return;
-        const form = summary.closest('[is=form-view]');
-        if (!form)
-            return;
-        const style = self.getComputedStyle(form);
-        if ('sidebar' !== style.getPropertyValue('--list-style'))
-            return;
-        this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
-    };
-    #handleTabViewPagereveal = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        void this.#syncBodyFace();
-    };
-    #handleStyleChange = () => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ style`);
-        const style = self.getComputedStyle(this);
-        const placement = style.getPropertyValue('--adaptable-tab-bar-placement'), // or do it manually without any computedstyle
-        newValue = TAB_BAR_PLACEMENTS.includes(placement) ? placement : 'bottom-bar';
-        if (newValue !== this.#cachedAdaptableTabBarPlacement) {
-            const oldValue = this.#cachedAdaptableTabBarPlacement;
-            this.#cachedAdaptableTabBarPlacement = newValue;
-            this.dispatchEvent(new CustomEvent('tab-view:adaptable-tab-bar-placement-change', {
-                detail: { oldValue, newValue },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    };
-    #handleAdaptableTabBarPlacementChange = (evt) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if ('bottom-bar' !== evt.detail.oldValue)
-            return; // button triggers should happen, ONLY when going FROM bottom-bar TO anything else
-        const innerSelection = this.moreTab?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
-        if (innerSelection) {
-            const btn = this.querySelector(`[is="tab-item"][value="${CSS.escape(innerSelection)}"]`);
-            // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-            if (btn) {
-                const newTab = this.querySelector(`#${btn.getAttribute('value')}`);
-                if (newTab) {
-                    this.selectedTab = _a.gatherTab(newTab);
-                    return;
-                }
-            }
-        }
-        const outerSelection = this?.querySelector(':scope>navigation-stack:not([hidden]),:scope>navigation-split-view:not([hidden])')?.id;
-        if (outerSelection && outerSelection === this.moreTab?.id) {
-            const btn = this.querySelector(`[is="tab-item"]:not([value="${CSS.escape(outerSelection)}"])`);
-            // NOTE: simulate btn click BU WITHOUT tabroot functionality!
-            if (btn) {
-                const newTab = this.querySelector(`#${btn.getAttribute('value')}`);
-                if (newTab) {
-                    this.selectedTab = _a.gatherTab(newTab);
-                    return;
-                }
-            }
-        }
-    };
-    get selectedTab() {
-        return [...this.querySelectorAll('navigation-stack:not([hidden]),navigation-split-view:not([hidden])')];
-    }
-    set selectedTab(tabs) {
-        const valid = [...tabs].every((el, i, arr) => !i || arr[i - 1].contains(el));
-        if (0 === tabs.length)
-            throw new Error('Element not found');
-        if (!valid)
-            throw new Error('selectedTab[] must be in order of parent>child. You provided an element that contains the previous sibling.');
-        //
-        const selectors = [':not(:is(:scope>{{tag}}))', ':is(:scope>{{tag}})']; // first nested ones, then root ones
-        const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`);
-        for (const selector of selectors)
-            for (const ns of this.querySelectorAll(`navigation-stack:not([hidden])${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view:not([hidden])${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
-                if (!tabs.some((tab) => !ns.contains(tab)))
-                    continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
-                ns.hidden = true; // triggers
-            }
-        for (const selector of selectors.reverse())
-            for (const ns of this.querySelectorAll(`navigation-stack[hidden]${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view[hidden]${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
-                if (!tabs.some((tab) => ns.contains(tab)))
-                    continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
-                ns.hidden = false; // triggers
-            }
-    }
-    #addAnimations = (evt) => {
-        this.setAttribute('js-aftertabreveal', '');
-        // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
-        this.#afterTabRevealDelay.next(() => {
-            this.removeAttribute('js-aftertabreveal');
-        }, evt.detail.ms);
-    };
-    #handleSelectionChange = (evt) => {
-        this.#triggerToggleEvent(evt);
-    };
-    #triggerToggleEvent = (evt) => {
-        const eventType = 'tab-view:toggle';
-        void this.#syncBodyFace();
-        if (devFlags.debug)
-            console.debug(`${_a.name} 💡 ${eventType}`);
-        this.dispatchEvent(new CustomEvent(eventType, { detail: { selection: this.selectedTab }, bubbles: true, composed: true }));
-    };
-    #syncBodyFace = async () => {
-        if (!(await frame(this)))
-            return;
-        const tab = this.selectedTab.at(-1), //event.detail.selection.at(-1), //document.querySelector(`#${}`),
-        path = new NavigationPath(tab), sv = [path, ...path.children()]
-            .filter((item) => item.component?.matches(':not(dialog)'))
-            .map((item) => item.body)
-            .filter(Boolean)
-            .at(-1); //queryBodyAll(tab).at(-1)
-        if (!sv)
-            return;
-        // const style = self.getComputedStyle(sv),
-        //   hostStyle = self.getComputedStyle(document.documentElement)
-        // console.log(999, tab, style.getPropertyValue('--face'), hostStyle.getPropertyValue('--face'))
-        if (!sv.style.getPropertyValue('--face'))
-            return document.body.style.removeProperty('--face');
-        // if (style.getPropertyValue('--face') === hostStyle.getPropertyValue('--face'))
-        document.body.style.setProperty('--face', sv.style.getPropertyValue('--face'));
-        // if (tab?.matches('tab-view>navigation-stack>:scope')) return document.body.style.setProperty('--face', style.getPropertyValue('--face'))
-        // if (tab?.matches('tab-view>:scope')) return document.body.style.setProperty('--face', style.getPropertyValue('--face'))
-    };
-}
-_a = TabView;