@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/generated/components/section-view.js

@@ -1,81 +1,61 @@
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A container view that groups related content together.
+ *
+ * @slot — The default slot.
+ * @slot header
+ * @slot footer
+ */
 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>`, ''));
+        return (this.#template ??= $(html `<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(() => {
+        debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         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();
+                queryMorph('[slot=header]', html `<header slot="header">
+            <label-view line-limit="1" truncation-mode="tail" font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </header>`, this, { removeIf: !newValue });
                 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();
+                queryMorph('[slot=footer]', html `<footer slot="footer">
+            <label-view line-limit="1" truncation-mode="tail" font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </footer>`, this, { removeIf: !newValue });
                 break;
         }
-        // })
+    }
+    disconnectedCallback() {
+        debug(`${SectionView.name} ⚡️ disconnect`);
+        //
+    }
+    connectedCallback() {
+        debug(`${SectionView.name} ⚡️ connect`);
+        //
     }
 }

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

@@ -1,9 +1,11 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * @summary A dialog that slides up over the current screen.
+ */
 export declare class SheetView extends DialogBase {
     #private;
-    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: SheetView): void;
     static polyfillConnectedCallback(el: SheetView): void;
-    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): Promise<void>;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/sheet-view.js

@@ -1,46 +1,30 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
-import { Snapshot } from '../snapshot';
+/**
+ * @summary A dialog that slides up over the current screen.
+ */
 export class SheetView extends DialogBase {
-    static get observedAttributes() {
-        return ['fine-presentation-large-adaptation'];
-    }
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${SheetView.name} ⚡️ disconnect`);
+        debug(`${SheetView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${SheetView.name} ⚡️ connect`);
+        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 }]) {
+        debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
     }
     static #handleKeydown = (evt) => {
-        console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
         if ('Escape' !== evt.key)
             return;
         evt.preventDefault();
@@ -48,22 +32,9 @@ export class SheetView extends DialogBase {
         evt.stopPropagation();
     };
     static #handleCancel = (evt) => {
-        console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        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.d.ts

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

package/generated/components/sidebar-toggle.js

@@ -1,103 +1,80 @@
 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, debug, onoff } from '../internal/utils';
 const observers = new ResizeObserverSingleton();
+/**
+ * @summary A control that shows or hides the sidebar view.
+ */
 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)
-        // })
+    }
+    disconnectedCallback() {
+        debug(`${_a.name} ⚡️ disconnect`);
+        observers.unobserve(this);
+        CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        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()
-        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;
+        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 }) {
+        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.d.ts

@@ -1,4 +1,7 @@
 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();

package/generated/components/sidebar-view.js

@@ -1,6 +1,9 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { debug, 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();
@@ -11,19 +14,23 @@ 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?.();
+    // Autoclose on click outside.
+    static #handleClick = async ({ target, type }) => {
+        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,6 +1,11 @@
 export declare class StickyContainer extends HTMLElement {
     #private;
     constructor();
-    connectedCallback(): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sticky-container': StickyContainer;
+    }
 }

package/generated/components/sticky-container.js

@@ -1,20 +1,22 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { debug, onoff } from '../internal/utils';
 export class StickyContainer extends HTMLElement {
     constructor() {
         super();
     }
+    disconnectedCallback() {
+        debug(`${StickyContainer.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
     connectedCallback() {
-        console.debug(`${StickyContainer.name} ⚡️ connect`);
+        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`);
-        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 container view that groups tab-items together along the top or bottom of the screen.
+ */
 export declare class TabBar extends DialogBase {
     #private;
     constructor();

package/generated/components/tab-bar.js

@@ -1,33 +1,37 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { debug, 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) {
-        console.debug(`${TabBar.name} ⚡️ disconnect`);
+        debug(`${TabBar.name} ⚡️ disconnect`);
         el.removeEventListener('click', TabBar.#handleClick);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${TabBar.name} ⚡️ connect`);
+        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 }) => {
+        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,4 +1,7 @@
 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();

package/generated/components/tab-item.js

@@ -1,17 +1,20 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff } from '../internal/utils';
+import { debug, 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) {
-        console.debug(`${TabItem.name} ⚡️ disconnect`);
+        debug(`${TabItem.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(btn);
     }
     static polyfillConnectedCallback(btn) {
-        console.debug(`${TabItem.name} ⚡️ connect`);
+        debug(`${TabItem.name} ⚡️ connect`);
         Object.assign(btn, {
             tabIndex: 0,
             ariaSelected: 'false',
@@ -31,7 +34,7 @@ export class TabItem extends ButtonBase {
         });
     }
     static #handleTabMoreStackAllowance = async (btn, evt) => {
-        console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
+        debug(`${TabItem.name} ⚡️ ${evt?.type}`);
         const tv = btn.closest('tab-view');
         if (!tv)
             return;
@@ -40,12 +43,15 @@ 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)
+        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 +64,10 @@ 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 }) => {
+        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 +111,14 @@ export class TabItem extends ButtonBase {
             for (const tab of tabs.reverse())
                 if (tv.selectedTab.includes(tab)) {
                     const eventType = 'tabroot';
-                    console.debug(`${TabItem.name} 💡 ${eventType}`);
+                    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}`);
+            debug(`${TabItem.name} 💡 ${eventType}`);
             tabs.at(0)?.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }));
         }
         // SECTION: finally, submit new tabs