@swiftwc/ui 0.0.0-dev.20 → 0.0.0-dev.21

package/generated/components/disclosure-group.js

@@ -35,7 +35,10 @@ export class DisclosureGroup extends DetailsBase {
     }
     static #handleToggle = async (evt) => {
         console.debug(`${DisclosureGroup.name} ⚡️ ${evt?.type}`);
-        const details = evt.currentTarget, newValue = details.open ? 'opening' : 'closing';
+        const details = evt.currentTarget instanceof HTMLDetailsElement && evt.currentTarget;
+        if (!details)
+            return;
+        const newValue = details.open ? 'opening' : 'closing';
         if (newValue !== details.dataset.state)
             details.dataset.state = newValue;
         if (!toggleTimers.has(details))

package/generated/components/glass-button.d.ts

@@ -1,6 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 export declare class GlassButton extends ButtonBase {
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ButtonBase): void;
     static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/glass-button.js

@@ -1,7 +1,10 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { buttonRole, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class GlassButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role'];
+    }
     constructor() {
         super();
     }
@@ -14,4 +17,15 @@ export class GlassButton extends ButtonBase {
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${GlassButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'role':
+                buttonRole(target, attributeName);
+                break;
+        }
+    }
 }

package/generated/components/glass-prominent-button.d.ts

@@ -1,6 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
 export declare class GlassProminentButton extends ButtonBase {
+    static get observedAttributes(): string[];
     constructor();
     static polyfillDisconnectedCallback(el: ButtonBase): void;
     static polyfillConnectedCallback(el: ButtonBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
 }

package/generated/components/glass-prominent-button.js

@@ -1,7 +1,10 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, touchGlass } from '../internal/utils';
+import { buttonRole, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
 export class GlassProminentButton extends ButtonBase {
+    static get observedAttributes() {
+        return ['role'];
+    }
     constructor() {
         super();
     }
@@ -14,4 +17,15 @@ export class GlassProminentButton extends ButtonBase {
         CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
         el.tabIndex = 0;
     }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        console.debug(`${GlassProminentButton.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLButtonElement && target;
+        if (!node)
+            return;
+        switch (attributeName) {
+            case 'role':
+                buttonRole(target, attributeName);
+                break;
+        }
+    }
 }

package/generated/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';

package/generated/components/index.js

@@ -1,3 +1,4 @@
+export * from './alert-dialog';
 export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';

package/generated/components/label-view.js

@@ -11,7 +11,7 @@ export class LabelView extends HTMLElement {
   </div>
   <div part="root label-title-stack">
     <slot></slot>
-  </div>`, ''));
+  </div>`));
     }
     #shadowRoot;
     // #imgSlot?: HTMLSlotElement
@@ -43,7 +43,7 @@ export class LabelView extends HTMLElement {
             case 'system-image':
                 let image = this.querySelector(':scope>[slot=image]');
                 if (newValue) {
-                    image ??= this.appendChild($(`<i slot="image"></i>`));
+                    image ??= this.appendChild($(`<i slot="image"></i>`, '>1'));
                     image.setAttribute('class', `ph ph-${newValue}`);
                 }
                 else
@@ -62,7 +62,7 @@ export class LabelView extends HTMLElement {
             case 'title':
                 let title = this.querySelector(':scope>:not([slot])');
                 if (newValue) {
-                    title ??= this.appendChild($(`<span></span>`));
+                    title ??= this.appendChild($(`<span></span>`, '>1'));
                     title.textContent = newValue;
                 }
                 else

package/generated/components/menu-view.js

@@ -17,7 +17,7 @@ export class MenuView extends HTMLElement {
         <slot></slot>
       </div>
     </form>
-  </dialog>`, ''));
+  </dialog>`));
     }
     #shadowRoot;
     #dialog;
@@ -50,9 +50,12 @@ export class MenuView extends HTMLElement {
             { types: 'cancel', listener: this.#handleDialogCancel },
         ], this.#dialog).on());
         CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, (evt) => {
-            if (evt.target.matches('menu-view'))
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                return true;
+            if (target.matches('menu-view'))
                 return false;
-            if (!evt.target.closest('menu-view[open]'))
+            if (!target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());
@@ -89,7 +92,7 @@ export class MenuView extends HTMLElement {
             case 'label':
                 let label = this.querySelector(':scope>[slot=label]');
                 if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`));
+                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
                     label.setAttribute('title', newValue);
                 }
                 else
@@ -99,15 +102,17 @@ export class MenuView extends HTMLElement {
     }
     #handleDialogClick = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (evt.target.matches('dialog'))
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (target.matches('dialog'))
             return this.toggleAttribute('open', false); // click outside
-        const target = evt.target;
         target.scrollIntoView({
             behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
             block: 'nearest',
             inline: 'nearest',
         });
-        if (!evt.target.closest('button'))
+        if (!target.closest('button'))
             return;
         // TODO: Handle btns this.toggleAttribute('open', false)
         this.toggleAttribute('open', false);

package/generated/components/navigation-title.js

@@ -34,18 +34,18 @@ export class NavigationTitle extends HTMLElement {
     }
     #render = (title, subtitle) => {
         const el = this.querySelector(':scope>:not([slot])') ??
-            this.appendChild($(`<navigation-large-title><v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`)), vStack = el.querySelector(':scope>v-stack') ??
-            el.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`));
+            this.appendChild($(`<navigation-large-title><v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack></navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ??
+            el.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`, '>1'));
         let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
         if (title) {
-            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`));
+            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, '>1'));
             titleLabel.setAttribute('title', title);
         }
         else
             titleLabel?.remove();
         let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
         if (subtitle) {
-            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`));
+            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`, '>1'));
             subtitleLabel.setAttribute('title', subtitle);
         }
         else

package/generated/components/picker-view.js

@@ -54,7 +54,7 @@ export class PickerView extends FormAssociatedBase {
             <slot name="tag" hidden></slot>
             <slot name="validity-options" hidden></slot>
           </label>
-                `, ''));
+                `));
                     //   break
                     // case 'compact':
                     //   PickerView.#templates.set(
@@ -114,7 +114,7 @@ export class PickerView extends FormAssociatedBase {
           <slot name="options" hidden></slot>
           <slot name="tag" hidden></slot>
           <slot name="validity-options" hidden></slot>
-        </label>`, ''));
+        </label>`));
                     break;
             }
         return _a.#templates.get(this.pickerStyle);
@@ -235,7 +235,10 @@ export class PickerView extends FormAssociatedBase {
     };
     #handleClick(evt) {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const target = evt.target, btn = target?.closest('button');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        const btn = target?.closest('button');
         if (!btn)
             return;
         if (btn.hasAttribute('tag')) {
@@ -248,7 +251,10 @@ export class PickerView extends FormAssociatedBase {
     }
     #handleSlotchange = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const slot = evt.target, assigned = slot.assignedElements({ flatten: true });
+        const slot = evt.target instanceof HTMLSlotElement && evt.target;
+        if (!slot)
+            return;
+        const assigned = slot.assignedElements({ flatten: true });
         observers.syncObservations(this.#trackedElements, assigned, this.#handleTagMutation);
         // for (const el of this.#trackedElements)
         //   if (!assigned.includes(el)) {
@@ -270,7 +276,7 @@ export class PickerView extends FormAssociatedBase {
             this.#handleTagMutation();
     };
     static wrapTag(node, slotName) {
-        const btn = $(`<button type="button" tabindex="0"></button>`); //document.createElement('button')
+        const btn = $(`<button type="button" tabindex="0"></button>`, '>1'); //document.createElement('button')
         // btn.type = 'button'
         // btn.tabIndex = 0
         switch (slotName) {
@@ -283,7 +289,7 @@ export class PickerView extends FormAssociatedBase {
             default:
                 if (node.hasAttribute('value'))
                     btn.setAttribute('tag', node.getAttribute('value') ?? '');
-                const label = $(`<label-view></label-view>`); //document.createElement('label-view')
+                const label = $(`<label-view></label-view>`, '>1'); //document.createElement('label-view')
                 if (node.hasAttribute('label'))
                     label.setAttribute('title', node.getAttribute('label') ?? '');
                 btn.appendChild(label);
@@ -297,7 +303,7 @@ export class PickerView extends FormAssociatedBase {
         // switch (this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)) {
         switch (this.pickerStyle) {
             case 'menu':
-                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view tabindex="0"></menu-view>`));
+                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view tabindex="0"></menu-view>`, '>1'));
                 menu.innerHTML = `<label-view slot="label" system-image="dots-three" title="rtyty"></label-view>`;
                 for (const el of sourceSlot?.assignedElements({ flatten: true }) ?? [])
                     menu.insertAdjacentElement('beforeend', _a.wrapTag(el, sourceSlot?.name));
@@ -308,11 +314,11 @@ export class PickerView extends FormAssociatedBase {
                 break;
             case 'inline':
             default:
-                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view><section-view></section-view></list-view>`)), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(`<section-view></section-view>`));
+                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view><section-view></section-view></list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(`<section-view></section-view>`, '>1'));
                 const label = this.getAttribute(this.constructor.ATTR.LABEL);
                 // if (label) section.setAttribute('header', label)
                 if (label) {
-                    const el = $(`<label-view></label-view>`);
+                    const el = $(`<label-view></label-view>`, '>1');
                     el.setAttribute('title', label);
                     section.insertAdjacentElement('beforeend', el);
                 }
@@ -360,7 +366,7 @@ export class PickerView extends FormAssociatedBase {
         //   default:
         let label = this.querySelector(':scope>[slot=label]');
         if (value) {
-            label ??= this.appendChild($(`<span slot="label"></span>`));
+            label ??= this.appendChild($(`<span slot="label"></span>`, '>1'));
             label.textContent = value;
         }
         else

package/generated/components/scroll-view.js

@@ -1,8 +1,8 @@
 var _a;
+import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $, frame, onoff, slowHideShow } from '../internal/utils';
-import { LifecycleObserver } from '../lifecycle-observer';
 const observers = new ResizeObserverSingleton();
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
@@ -21,7 +21,7 @@ export class ScrollView extends HTMLElement {
     <div part="root scroll-view-toolbar-stack">
       <slot name="bottom-bar-principal"></slot>
     </div>
-  </div>`, ''));
+  </div>`));
     }
     #shadowRoot;
     #navbarPrincipalSlot;
@@ -39,7 +39,7 @@ export class ScrollView extends HTMLElement {
         console.debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         observers.unobserve(this);
-        frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
     }
     connectedCallback() {
         console.debug(`${_a.name} ⚡️ connect`);
@@ -51,7 +51,7 @@ export class ScrollView extends HTMLElement {
             { types: 'scroll', listener: this.#handleScroll, addOptions: { passive: true } },
             { types: 'scrollend', listener: this.#handleScrollend, addOptions: { passive: true } },
         ], this).on());
-        frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('pageshow', { detail: { page: this }, bubbles: true, composed: true })));
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pageshow', { detail: { page: this }, bubbles: true, composed: true })));
         observers.observe(this, this.#handleMeasure.bind(this));
         // frame(this).then((r) => {
         //   if (!r) return
@@ -94,7 +94,10 @@ export class ScrollView extends HTMLElement {
         if (!this.#isMidScroll)
             this.#isMidScroll = true;
         // if (this.#stopRecordingScrollTop) return
-        this.#lastScrollTop = evt.target.scrollTop;
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        this.#lastScrollTop = target.scrollTop;
     };
     #handleScrollend = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
@@ -120,7 +123,10 @@ export class ScrollView extends HTMLElement {
     };
     #handleTabReveal = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (!evt.target?.contains(this))
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (!target.contains(this))
             return;
         if (this.closest('[hidden]'))
             return;
@@ -149,7 +155,10 @@ export class ScrollView extends HTMLElement {
     };
     #handleTabBeforeswap = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (!evt.target?.contains(this))
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (!target.contains(this))
             return;
         if (this.closest('[hidden]'))
             return;
@@ -167,17 +176,17 @@ export class ScrollView extends HTMLElement {
     }
     #renderNavTitle = (title, subtitle) => {
         const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ??
-            this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`));
+            this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`, '>1'));
         let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
         if (title) {
-            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`));
+            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, '>1'));
             titleLabel.setAttribute('title', title);
         }
         else
             titleLabel?.remove();
         let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
         if (subtitle) {
-            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`));
+            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`, '>1'));
             subtitleLabel.setAttribute('title', subtitle);
         }
         else

package/generated/components/section-view.js

@@ -14,7 +14,7 @@ export class SectionView extends HTMLElement {
   </div>
   <div part="root section-footer-stack">
     <slot name="footer"></slot>
-  </div>`, ''));
+  </div>`));
         // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
     }
     #shadowRoot;
@@ -60,7 +60,7 @@ export class SectionView extends HTMLElement {
             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 ??= this.appendChild($(`<header slot="header"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></header>`, '>1'));
                     header.querySelector('label-view')?.setAttribute('title', newValue);
                 }
                 else
@@ -69,7 +69,7 @@ export class SectionView extends HTMLElement {
             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 ??= this.appendChild($(`<footer slot="footer"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></footer>`, '>1'));
                     footer.querySelector('label-view')?.setAttribute('title', newValue);
                 }
                 else

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

@@ -5,5 +5,5 @@ export declare class SheetView extends DialogBase {
     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,7 +1,6 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { 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'];
@@ -21,23 +20,28 @@ export class SheetView extends DialogBase {
         ], el).on());
         el.autofocus = true;
     }
-    static async polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+    static 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;
-        }
+        // 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})`);

package/generated/components/sidebar-toggle.js

@@ -29,8 +29,8 @@ export class SidebarToggle extends HTMLElement {
     // This triggers on show/hide of any of sidebar-toggle elements
     static #handleMeasure(entry) {
         console.debug(`${_a.name} ⚡️ measure`);
-        const { target } = entry ?? {};
-        if (!(target instanceof HTMLElement))
+        const target = entry?.target instanceof HTMLElement && entry.target;
+        if (!target)
             return;
         // set/remove css var/prop to parent based on shown/hidden
         const tv = target.parentElement;
@@ -67,7 +67,9 @@ export class SidebarToggle extends HTMLElement {
     }
     #handleClick(evt) {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const { target } = evt;
+        const target = evt?.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
         if (!target?.closest('button'))
             return;
         const { sideBar } = _a.query(target);

package/generated/components/sidebar-view.js

@@ -12,9 +12,12 @@ 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]'))
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                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());
@@ -23,7 +26,10 @@ export class SidebarView extends DialogBase {
     /** 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?.();
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (target instanceof HTMLDialogElement && 'sidebar-view' === target.getAttribute('is'))
+            target.close?.();
     };
 }

package/generated/components/sticky-container.js

@@ -14,7 +14,9 @@ export class StickyContainer extends HTMLElement {
         CleanupRegistry.unregister(this);
     }
     #handleTransitionrun = ({ target, propertyName, pseudoElement }) => {
-        if ('--stuck' !== propertyName || '::before' !== pseudoElement || !target?.matches('sticky-container'))
+        if (!(target instanceof HTMLElement && target))
+            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.js

@@ -20,9 +20,12 @@ 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, (evt) => {
-            if (evt.target.matches('[is=tab-bar]'))
+            const target = evt.target instanceof HTMLElement && evt.target;
+            if (!target)
+                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());
@@ -30,7 +33,10 @@ export class TabBar extends DialogBase {
     }
     static #handleClick = async (evt) => {
         console.debug(`${TabBar.name} ⚡️ ${evt?.type}`);
-        if ('DIALOG' === evt.target.tagName && 'tab-bar' === evt.target.getAttribute('is'))
-            evt?.target?.close?.();
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        if (target instanceof HTMLDialogElement && 'tab-bar' === target.getAttribute('is'))
+            target.close?.();
     };
 }

package/generated/components/tab-item.js

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

package/generated/components/tab-view.js

@@ -73,7 +73,10 @@ export class TabView extends HTMLElement {
         // })
     }
     #handleSummaryClick = (evt) => {
-        const summary = evt.target.closest('summary');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        const summary = target.closest('summary');
         if (!summary)
             return;
         if (0 === $.siblings('[aria-selected=true]', summary).length)