@swiftwc/ui 0.0.0-dev.46 → 0.0.0-dev.48

package/generated/components/navigation-title.js

@@ -1,39 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var NavigationTitle_1;
+import { microtaskOnConnected } from '../internal/decorators';
 import { $, devFlags } from '../internal/utils';
-export class NavigationTitle extends HTMLElement {
+let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'subtitle'];
     }
     constructor() {
         super();
     }
-    disconnectedCallback() {
+    attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
-            console.debug(`${NavigationTitle.name} ⚡️ disconnect`);
+            console.debug(`${NavigationTitle_1.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        this.#render(this.getAttribute('value'), this.getAttribute('subtitle'));
     }
-    connectedCallback() {
+    disconnectedCallback() {
         if (devFlags.debug)
-            console.debug(`${NavigationTitle.name} ⚡️ connect`);
+            console.debug(`${NavigationTitle_1.name} ⚡️ disconnect`);
     }
-    attributeChangedCallback(name, oldValue, newValue) {
+    connectedCallback() {
         if (devFlags.debug)
-            console.debug(`${NavigationTitle.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        const sibling = this.closest('scroll-view') ?? undefined;
-        switch (name) {
-            case 'value':
-                if (null === newValue)
-                    sibling?.removeAttribute('navigation-inline-title');
-                else
-                    sibling?.setAttribute('navigation-inline-title', newValue);
-                this.#render(newValue, this.getAttribute('subtitle'));
-                break;
-            case 'subtitle':
-                if (null === newValue)
-                    sibling?.removeAttribute('navigation-inline-subtitle');
-                else
-                    sibling?.setAttribute('navigation-inline-subtitle', newValue);
-                this.#render(this.getAttribute('value'), newValue);
-                break;
-        }
+            console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
     #render = (title, subtitle) => {
         const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"></label-view>`, vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`;
@@ -49,4 +41,18 @@ export class NavigationTitle extends HTMLElement {
         else
             subtitleLabel?.removeAttribute('title');
     };
-}
+};
+NavigationTitle = NavigationTitle_1 = __decorate([
+    microtaskOnConnected((el) => {
+        const sibling = el.closest('scroll-view'), value = el.getAttribute('value'), subtitle = el.getAttribute('subtitle');
+        if (null === value)
+            sibling?.removeAttribute('navigation-inline-title');
+        else
+            sibling?.setAttribute('navigation-inline-title', value);
+        if (null === subtitle)
+            sibling?.removeAttribute('navigation-inline-subtitle');
+        else
+            sibling?.setAttribute('navigation-inline-subtitle', subtitle);
+    })
+], NavigationTitle);
+export { NavigationTitle };

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

@@ -12,11 +12,13 @@ export declare class PickerView extends FormAssociatedBase {
         CURRENT_VALUE_LABEL: string;
     };
     static get observedAttributes(): string[];
+    get selection(): string;
+    set selection(v: string);
     get template(): DocumentFragment;
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
     get pickerStyle(): PickerStyle;
     get name(): string;
     setValidity: (flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement) => void;

package/generated/components/picker-view.js

@@ -90,26 +90,26 @@ export class PickerView extends FormAssociatedBase {
                 </v-stack>
               </sticky-container>`);
             const searchInput = sv?.querySelector('input'); // FIXME: compoennt is=search-view??
-            searchInput?.addEventListener('focus', (evt) => {
+            searchInput?.addEventListener('focus', ({ target }) => {
                 if (this.#spawn)
                     this.dispatchEvent(new CustomEvent('picker:searchfocus', {
-                        detail: { element: this.#spawn, search: evt.target instanceof HTMLInputElement && evt.target ? evt.target.value : '' },
+                        detail: { element: this.#spawn, search: target instanceof HTMLInputElement ? target.value : '' },
                         bubbles: true,
                         composed: true,
                     }));
             });
-            searchInput?.addEventListener('blur', (evt) => {
+            searchInput?.addEventListener('blur', ({ target }) => {
                 if (this.#spawn)
                     this.dispatchEvent(new CustomEvent('picker:searchblur', {
-                        detail: { element: this.#spawn, search: evt.target instanceof HTMLInputElement && evt.target ? evt.target.value : '' },
+                        detail: { element: this.#spawn, search: target instanceof HTMLInputElement ? target.value : '' },
                         bubbles: true,
                         composed: true,
                     }));
             });
-            searchInput?.addEventListener('input', (evt) => {
+            searchInput?.addEventListener('input', ({ target }) => {
                 if (this.#spawn)
                     this.dispatchEvent(new CustomEvent('picker:searchinput', {
-                        detail: { element: this.#spawn, search: evt.target instanceof HTMLInputElement && evt.target ? evt.target.value : '' },
+                        detail: { element: this.#spawn, search: target instanceof HTMLInputElement ? target.value : '' },
                         bubbles: true,
                         composed: true,
                     }));
@@ -120,7 +120,7 @@ export class PickerView extends FormAssociatedBase {
             evt.stopImmediatePropagation();
             evt.preventDefault();
             const { target } = evt;
-            if (!(target instanceof HTMLElement && target))
+            if (!(target instanceof HTMLElement))
                 return;
             const { component } = new NavigationPath(target)?.hydrate();
             await startViewTransition(target, 'backwards', async () => {
@@ -154,7 +154,7 @@ export class PickerView extends FormAssociatedBase {
                         evt.stopImmediatePropagation();
                         evt.preventDefault();
                         const { target } = evt;
-                        if (!(target instanceof HTMLElement && target))
+                        if (!(target instanceof HTMLElement))
                             return;
                         const newPage = this.#spawnPage('body-view', this.hasAttribute('searchable'), el.dataset.label, el);
                         if (!newPage)
@@ -257,6 +257,17 @@ export class PickerView extends FormAssociatedBase {
     #observers = new MutationObserverSet(this.#renderSlotted);
     #customValidity = '';
     #selection = '';
+    get selection() {
+        return this.#selection;
+    }
+    set selection(v) {
+        if (Object.is(this.#selection, v))
+            return;
+        this.#selection = v;
+        this.#reflectSelectionOnButtons();
+        this.#reflectCurrentValueLabel();
+        this.#sendValueToForm();
+    }
     get #internals() {
         return getInternals(this);
     }
@@ -358,28 +369,6 @@ export class PickerView extends FormAssociatedBase {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff('localechange', () => {
-            this.#renderSlotted([]);
-        }, I18n.on).on());
-        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
-        if (!this.hasAttribute(this.constructor.ATTR.PICKER_STYLE))
-            this.#render(); // will be picked up by attr-change!
-        // finally
-        if (!this.hasAttribute('selection'))
-            return;
-        this.#selection = this.getAttribute('selection') ?? '';
-        this.#sendValueToForm(false);
-    }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-        this.#validityObservers.unobserveAll();
-        this.#observers.unobserveAll();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
@@ -410,6 +399,28 @@ export class PickerView extends FormAssociatedBase {
                 break;
         }
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        this.#validityObservers.unobserveAll();
+        this.#observers.unobserveAll();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff('localechange', () => {
+            this.#renderSlotted([]);
+        }, I18n.on).on());
+        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
+        if (!this.hasAttribute(this.constructor.ATTR.PICKER_STYLE))
+            this.#render(); // skip if already rendered by attr-change during upgrade!
+        // finally
+        if (!this.hasAttribute('selection'))
+            return;
+        this.#selection = this.getAttribute('selection') ?? '';
+        this.#sendValueToForm(false);
+    }
     get pickerStyle() {
         const attr = this.constructor.ATTR.PICKER_STYLE;
         return pickerStyles.includes(this.getAttribute(attr) ?? '') ? this.getAttribute(attr) : 'automatic';
@@ -459,7 +470,7 @@ export class PickerView extends FormAssociatedBase {
     #handleTriggerClick = async ({ type, target }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         this.#spawn?.remove?.();
         const level0 = this.#spawnPage('sheet' === this.pickerStyle ? 'sheet-view' : 'body-view', this.hasAttribute('searchable'), this.getAttribute('label'));
@@ -478,7 +489,7 @@ export class PickerView extends FormAssociatedBase {
         evt.stopImmediatePropagation();
         evt.preventDefault();
         const { currentTarget: btn } = evt;
-        if (!(btn instanceof HTMLElement && btn))
+        if (!(btn instanceof HTMLElement))
             return;
         // const btn = target.closest('button')
         // if (!btn) return
@@ -499,7 +510,7 @@ export class PickerView extends FormAssociatedBase {
     #handleClick({ type, target }) {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         const btn = target.closest('button');
         if (!btn)
@@ -512,7 +523,7 @@ export class PickerView extends FormAssociatedBase {
     #handleValiditiesSlotchange = ({ type, target: slot }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement && slot))
+        if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
         this.#validityObservers.syncObservations(assigned, ['value', 'label']);
@@ -522,7 +533,7 @@ export class PickerView extends FormAssociatedBase {
     #handleListSlotchange = ({ type, target: slot }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(slot instanceof HTMLSlotElement && slot))
+        if (!(slot instanceof HTMLSlotElement))
             return;
         const assigned = slot.assignedElements();
         this.#observers.syncObservations(assigned);

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

@@ -7,7 +7,7 @@ export declare class ProgressView extends HTMLElement {
     get progressViewStyle(): "circular" | "linear";
     get template(): DocumentFragment;
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/generated/components/progress-view.js

@@ -54,21 +54,6 @@ export class ProgressView extends HTMLElement {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ disconnect`);
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ connect`);
-        this.inert = true;
-        this.#cssStyleObserver = new CSSStyleObserver({
-            properties: ['--progress-view-style-index'],
-        });
-        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
-        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
-    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
@@ -94,6 +79,21 @@ export class ProgressView extends HTMLElement {
             }
         }
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        this.inert = true;
+        this.#cssStyleObserver = new CSSStyleObserver({
+            properties: ['--progress-view-style-index'],
+        });
+        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
+        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
+    }
     #handleStyleChange = () => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ style`);

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

@@ -3,8 +3,8 @@ export declare class ScrollView extends HTMLElement {
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     centerScrollToElement(child: Element): void;
 }

package/generated/components/scroll-view.js

@@ -40,6 +40,26 @@ export class ScrollView extends HTMLElement {
             this.#slots = new Map();
         });
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'navigation-inline-title':
+                this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
+                break;
+            case 'navigation-inline-subtitle':
+                this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
+                break;
+            case 'navigation-title':
+                //
+                break;
+            case 'navigation-bar-title-display-mode':
+                if (oldValue === newValue)
+                    break;
+                this.#syncSibling(`${oldValue}${newValue}`);
+                break;
+        }
+    }
     disconnectedCallback() {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ disconnect`);
@@ -72,38 +92,23 @@ export class ScrollView extends HTMLElement {
         //   })
         // })
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'navigation-inline-title':
-                this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
-                break;
-            case 'navigation-inline-subtitle':
-                this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
-                break;
-            case 'navigation-title':
-                //
-                break;
-            case 'navigation-bar-title-display-mode':
-                if (oldValue === newValue)
-                    break;
-                if (this.closest('[hidden]'))
-                    break; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
-                if (!this.#isMidScroll)
-                    break;
-                const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
-                slowHideShow('largeinline' === `${oldValue}${newValue}` ? 'show' : 'hide', title);
-                break;
-        }
-    }
+    #syncSibling = (comp) => {
+        if (!this.isConnected)
+            return;
+        if (this.closest('[hidden]'))
+            return; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
+        if (!this.#isMidScroll)
+            return;
+        const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
+        slowHideShow('largeinline' === `${comp}` ? 'show' : 'hide', title);
+    };
     #handleScroll = ({ target, type }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isMidScroll)
             this.#isMidScroll = true;
         // if (this.#stopRecordingScrollTop) return
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         this.#lastScrollTop = target.scrollTop;
     };
@@ -131,42 +136,38 @@ export class ScrollView extends HTMLElement {
         // this.#stopRecordingScrollTop = false
         this.#beforeTabSwapLastScrolltop = undefined;
     };
-    #handleTabReveal = ({ type, target }) => {
-        if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
-            return;
-        if (!target.contains(this))
-            return;
-        if (this.closest('[hidden]'))
-            return;
-        // console.log(888, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
-        // this.style.setProperty('clip-path', 'inset(50%)')
-        // this.style.setProperty('opacity', '0.001')
-        // this.style.opacity = '0.001'
-        // console.log(99, this.style.opacity)
-        // self.requestAnimationFrame(() => {
-        //   if (undefined === this.#beforeTabSwapLastScrolltop) return
-        //   if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop) return
-        //   this.#stopRecordingScrollTop = true
-        //   // console.log(999, this.#beforeTabSwapLastScrolltop)
-        //   // console.log(999, this, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
-        //   this.scrollTop = this.#beforeTabSwapLastScrolltop
-        //   // this.scrollTo({
-        //   //   top: this.#beforeTabSwapLastScrolltop,
-        //   //   behavior: 'instant',
-        //   // }) //
-        //   this.#stopRecordingScrollTop = false
-        //   this.#beforeTabSwapLastScrolltop = undefined
-        //   // self.requestAnimationFrame(() => {
-        //   //   // this.style.removeProperty('opacity')
-        //   // })
-        // })
-    };
+    // #handleTabReveal = ({ type, target }: CustomEvent<TabDetail>) => {
+    //   if (devFlags.debug) console.debug(`${ScrollView.name} ⚡️ ${type}`)
+    //   if (!(target instanceof HTMLElement)) return
+    //   if (!target.contains(this)) return
+    //   if (this.closest('[hidden]')) return
+    //   // console.log(888, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
+    //   // this.style.setProperty('clip-path', 'inset(50%)')
+    //   // this.style.setProperty('opacity', '0.001')
+    //   // this.style.opacity = '0.001'
+    //   // console.log(99, this.style.opacity)
+    //   // self.requestAnimationFrame(() => {
+    //   //   if (undefined === this.#beforeTabSwapLastScrolltop) return
+    //   //   if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop) return
+    //   //   this.#stopRecordingScrollTop = true
+    //   //   // console.log(999, this.#beforeTabSwapLastScrolltop)
+    //   //   // console.log(999, this, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
+    //   //   this.scrollTop = this.#beforeTabSwapLastScrolltop
+    //   //   // this.scrollTo({
+    //   //   //   top: this.#beforeTabSwapLastScrolltop,
+    //   //   //   behavior: 'instant',
+    //   //   // }) //
+    //   //   this.#stopRecordingScrollTop = false
+    //   //   this.#beforeTabSwapLastScrolltop = undefined
+    //   //   // self.requestAnimationFrame(() => {
+    //   //   //   // this.style.removeProperty('opacity')
+    //   //   // })
+    //   // })
+    // }
     #handleTabBeforeswap = ({ type, target }) => {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         if (!target.contains(this))
             return;

package/generated/components/search-view.js

@@ -22,7 +22,7 @@ export class SearchView extends InputBase {
     static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         if (devFlags.debug)
             console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
-        const node = target instanceof HTMLInputElement && target;
+        const node = target instanceof HTMLInputElement;
         if (!node)
             return;
         //

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

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

package/generated/components/section-view.js

@@ -31,29 +31,6 @@ export class SectionView extends HTMLElement {
         // this.#sentinel = this.#shadowRoot.querySelector('.sticky-sentinel') ?? undefined
         // })
     }
-    disconnectedCallback() {
-        if (devFlags.debug)
-            console.debug(`${SectionView.name} ⚡️ disconnect`);
-        // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
-        // this.#observer?.unobserve(this)
-    }
-    connectedCallback() {
-        if (devFlags.debug)
-            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(() => {
-        // 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) {
         if (devFlags.debug)
             console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
@@ -80,4 +57,27 @@ export class SectionView extends HTMLElement {
         }
         // })
     }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ disconnect`);
+        // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
+        // this.#observer?.unobserve(this)
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            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(() => {
+        // 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)
+        // })
+    }
 }

package/generated/components/sidebar-toggle.js

@@ -33,7 +33,7 @@ export class SidebarToggle extends HTMLElement {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ measure`);
         const { target } = entry ?? {};
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         // set/remove css var/prop to parent based on shown/hidden
         const tv = target.parentElement;
@@ -71,7 +71,7 @@ export class SidebarToggle extends HTMLElement {
     #handleClick({ target, type }) {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         if (!target?.closest('button'))
             return;

package/generated/components/sidebar-view.js

@@ -12,7 +12,7 @@ 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, ({ target }) => {
-            if (!(target instanceof HTMLElement && target))
+            if (!(target instanceof HTMLElement))
                 return true;
             if (target.matches('[is=sidebar-view]'))
                 return false;
@@ -26,7 +26,7 @@ export class SidebarView extends DialogBase {
     static #handleClick = async ({ target, type }) => {
         if (devFlags.debug)
             console.debug(`${SidebarView.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         if (target instanceof HTMLDialogElement && 'sidebar-view' === target.getAttribute('is'))
             target.close?.();

package/generated/components/sticky-container.js

@@ -16,7 +16,7 @@ export class StickyContainer extends HTMLElement {
         CleanupRegistry.unregister(this);
     }
     #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         if ('--stuck' !== propertyName || '::before' !== pseudoElement || !target.matches('sticky-container'))
             return;

package/generated/components/tab-bar.js

@@ -22,7 +22,7 @@ export class TabBar extends DialogBase {
         //   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 && target))
+            if (!(target instanceof HTMLElement))
                 return true;
             if (target.matches('[is=tab-bar]'))
                 return false;
@@ -35,7 +35,7 @@ export class TabBar extends DialogBase {
     static #handleClick = async ({ target, type }) => {
         if (devFlags.debug)
             console.debug(`${TabBar.name} ⚡️ ${type}`);
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         if (target instanceof HTMLDialogElement && 'tab-bar' === target.getAttribute('is'))
             target.close?.();

package/generated/components/tab-item.js

@@ -65,11 +65,10 @@ export class TabItem extends ButtonBase {
             });
         }, 100);
     };
-    static #handleClick = async (evt) => {
+    static #handleClick = async ({ type, currentTarget: btn }) => {
         if (devFlags.debug)
-            console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
-        const btn = evt.currentTarget instanceof HTMLElement && evt.currentTarget;
-        if (!btn)
+            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')

package/generated/components/tab-view.js

@@ -75,7 +75,7 @@ export class TabView extends HTMLElement {
         // })
     }
     #handleSummaryClick = ({ target }) => {
-        if (!(target instanceof HTMLElement && target))
+        if (!(target instanceof HTMLElement))
             return;
         const summary = target.closest('summary');
         if (!summary)