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

package/generated/components/sheet-view.js

@@ -1,46 +1,51 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { devFlags, 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();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${SheetView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${SheetView.name} ⚡️ connect`);
+        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 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 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) => {
-        console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
         if ('Escape' !== evt.key)
             return;
         evt.preventDefault();
@@ -48,22 +53,10 @@ export class SheetView extends DialogBase {
         evt.stopPropagation();
     };
     static #handleCancel = (evt) => {
-        console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        if (devFlags.debug)
+            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;
-            }
-    };
 }

package/generated/components/sidebar-toggle.js

@@ -1,103 +1,81 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, debounce, onoff } from '../internal/utils';
+import { debounce, devFlags, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
 export class SidebarToggle extends HTMLElement {
-    // #ro
-    // #io
     constructor() {
         super();
-        // 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`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         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)
         // @ts-expect-error
         _a.#handleMeasure([entry]);
-        // })
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
-        observers.unobserve(this); //this.#ro?.disconnect()
-        // this.#io.disconnect()
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
         CleanupRegistry.unregister(this);
     }
     static query(target) {
-        const container = target?.closest('navigation-split-view,tab-view'), sideBar = container?.querySelector(':scope > [is=sidebar-view]');
+        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;
+        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
-        // 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'])
-        // }
+        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
-        // 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?.();
-        // }
+        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?.();
+        });
     }
-    // _checkVisibility2(entries) {
-    //   entries.forEach((entry) => {
-    //     console.log('Visible in viewport?', entry.isIntersecting)
-    //   })
-    // }
-    #handleClick(evt) {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target;
+    #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);
-        // 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

package/generated/components/sidebar-view.js

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

@@ -1,20 +1,24 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 export class StickyContainer extends HTMLElement {
     constructor() {
         super();
     }
     connectedCallback() {
-        console.debug(`${StickyContainer.name} ⚡️ connect`);
+        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() {
-        console.debug(`${StickyContainer.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${StickyContainer.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {
-        if ('--stuck' !== propertyName || '::before' !== pseudoElement || !target?.matches('sticky-container'))
+        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,4 +1,7 @@
 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();

package/generated/components/tab-bar.js

@@ -1,33 +1,43 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+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();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${TabBar.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${TabBar.name} ⚡️ disconnect`);
         el.removeEventListener('click', TabBar.#handleClick);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${TabBar.name} ⚡️ connect`);
+        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, (evt) => {
-            if (evt.target.matches('[is=tab-bar]'))
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('[is=tab-bar]'))
                 return false;
-            if (evt.target.closest('tool-bar-item'))
+            if (target.closest('tool-bar-item'))
                 return false;
             return true;
         }), el).on());
         // })
     }
-    static #handleClick = async (event) => {
-        console.debug(`${TabBar.name} ⚡️ ${event?.type}`);
-        if ('DIALOG' === event.target.tagName && 'tab-bar' === event.target.getAttribute('is'))
-            event?.target?.close?.();
+    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.js

@@ -1,5 +1,5 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { devFlags, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 import { TabView } from './tab-view';
 export class TabItem extends ButtonBase {
@@ -7,11 +7,13 @@ export class TabItem extends ButtonBase {
         super();
     }
     static polyfillDisconnectedCallback(btn) {
-        console.debug(`${TabItem.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(btn);
     }
     static polyfillConnectedCallback(btn) {
-        console.debug(`${TabItem.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ connect`);
         Object.assign(btn, {
             tabIndex: 0,
             ariaSelected: 'false',
@@ -31,7 +33,8 @@ export class TabItem extends ButtonBase {
         });
     }
     static #handleTabMoreStackAllowance = async (btn, evt) => {
-        console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const tv = btn.closest('tab-view');
         if (!tv)
             return;
@@ -40,12 +43,16 @@ export class TabItem extends ButtonBase {
         btn.hidden = 'bottom-bar' !== tv.tabBarPlacement;
     };
     static #handleTabRevealOrSwap = async (btn, evt) => {
-        console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
-        if (evt.detail?.tag !== btn.value)
+        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 = 'tabreveal' === evt?.type;
-        btn.ariaSelected = `${isSelected}`;
+        const isSelected = tv.selectedTab.map(({ id }) => id).includes(btn.value); //'tabreveal' === evt?.type
+        if (`${isSelected}` !== btn.ariaSelected)
+            btn.ariaSelected = `${isSelected}`;
         if (!isSelected)
             return;
         setTimeout(() => {
@@ -58,9 +65,11 @@ export class TabItem extends ButtonBase {
             });
         }, 100);
     };
-    static #handleClick = async (evt) => {
-        console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
-        const btn = evt.currentTarget;
+    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');
@@ -104,14 +113,16 @@ export class TabItem extends ButtonBase {
             for (const tab of tabs.reverse())
                 if (tv.selectedTab.includes(tab)) {
                     const eventType = 'tabroot';
-                    console.debug(`${TabItem.name} 💡 ${eventType}`);
+                    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';
-            console.debug(`${TabItem.name} 💡 ${eventType}`);
+            if (devFlags.debug)
+                console.debug(`${TabItem.name} 💡 ${eventType}`);
             tabs.at(0)?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
         }
         // SECTION: finally, submit new tabs

package/generated/components/tab-view.js

@@ -2,7 +2,7 @@ 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, frame, onoff, timeout } from '../internal/utils';
+import { $, cssTime, debounce, devFlags, frame, onoff, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const TAB_BAR_PLACEMENTS = ['bottom-bar', 'ornament', 'sidebar', 'top-bar'];
 /**
@@ -25,7 +25,8 @@ export class TabView extends HTMLElement {
         this.#debouncedHandler = debounce(this.#handleSelectionChange, 1);
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
         this.#afterTabRevealDelay.cancel();
         this.#cssStyleObserver?.disconnect();
         CleanupRegistry.unregister(this);
@@ -37,7 +38,8 @@ export class TabView extends HTMLElement {
         return this.querySelector(':scope>navigation-stack:has(> navigation-stack,> navigation-split-view)');
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
         this.#cssStyleObserver = new CSSStyleObserver({
             properties: ['--adaptable-tab-bar-placement-index'],
         });
@@ -72,8 +74,10 @@ export class TabView extends HTMLElement {
         ], this).on());
         // })
     }
-    #handleSummaryClick = (evt) => {
-        const summary = evt.target.closest('summary');
+    #handleSummaryClick = ({ target }) => {
+        if (!(target instanceof HTMLElement))
+            return;
+        const summary = target.closest('summary');
         if (!summary)
             return;
         if (0 === $.siblings('[aria-selected=true]', summary).length)
@@ -86,14 +90,16 @@ export class TabView extends HTMLElement {
         const style = self.getComputedStyle(form);
         if ('sidebar' !== style.getPropertyValue('--list-style'))
             return;
-        this.#addAnimations();
+        this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
     };
     #handleTabViewPagereveal = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
         void this.#syncBodyFace();
     };
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        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';
@@ -108,7 +114,7 @@ export class TabView extends HTMLElement {
         }
     };
     // #handleMediaChange: (evt: MediaQueryListEvent) => void = (evt) => {
-    //   console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
+    //   if (devFlags.debug) console.debug(`${TabView.name} ⚡️ ${evt?.type}`)
     //   if (!evt.matches) return
     //   this.#handleStyleChange()
     //   // if (evt.matches) {
@@ -159,7 +165,8 @@ export class TabView extends HTMLElement {
     //   // }
     // }
     #handleAdaptableTabBarPlacementChange = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        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;
@@ -199,28 +206,28 @@ export class TabView extends HTMLElement {
             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 }, bubbles: true, composed: true }));
+                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 }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = false; // triggers
             }
     }
-    #addAnimations = () => {
+    #addAnimations = (evt) => {
         this.setAttribute('js-aftertabreveal', '');
+        // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
         this.#afterTabRevealDelay.next(() => {
             this.removeAttribute('js-aftertabreveal');
-        }, cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`));
-        // this.removeAttribute('js-aftertabreveal')
-        // this.#afterTabRevealDelay = undefined
+        }, evt.detail.ms);
     };
     #handleSelectionChange = (evt) => {
         this.#triggerToggleEvent(evt);
@@ -228,7 +235,8 @@ export class TabView extends HTMLElement {
     #triggerToggleEvent = (evt) => {
         const eventType = 'tab-view:toggle';
         void this.#syncBodyFace();
-        console.debug(`${_a.name} 💡 ${eventType}`);
+        if (devFlags.debug)
+            console.debug(`${_a.name} 💡 ${eventType}`);
         this.dispatchEvent(new CustomEvent(eventType, { detail: { selection: this.selectedTab }, bubbles: true, composed: true }));
     };
     #syncBodyFace = async () => {

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

@@ -1,3 +1,8 @@
+/**
+ * @summary Display selectable, sortable data arranged in rows and columns.
+ *
+ * @attr {title:trailing:subtitle|trailing:title:subtitle|title:subtitle:trailing|*} preferred-compact-template - Sets the template areas when the table is in compact mode
+ */
 export declare class TableView extends HTMLElement {
     #private;
     static get template(): DocumentFragment;