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

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,10 +21,11 @@ export class ScrollView extends HTMLElement {
     <div part="root scroll-view-toolbar-stack">
       <slot name="bottom-bar-principal"></slot>
     </div>
-  </div>`, ''));
+  </div>`));
     }
     #shadowRoot;
-    #navbarPrincipalSlot;
+    #slots = new Map();
+    // #navbarPrincipalSlot?: HTMLSlotElement
     #isMidScroll;
     #lastScrollTop = 0;
     // #stopRecordingScrollTop?: boolean = false
@@ -33,13 +34,17 @@ export class ScrollView extends HTMLElement {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#navbarPrincipalSlot = this.#shadowRoot.querySelector('slot[name=top-bar-principal]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
     }
     disconnectedCallback() {
         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 +56,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
@@ -84,7 +89,7 @@ export class ScrollView extends HTMLElement {
                     break; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
                 if (!this.#isMidScroll)
                     break;
-                const title = this.#navbarPrincipalSlot?.assignedElements({ flatten: true })?.at(0);
+                const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
                 slowHideShow('largeinline' === `${oldValue}${newValue}` ? 'show' : 'hide', title);
                 break;
         }
@@ -94,7 +99,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 +128,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 +160,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 +181,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

@@ -1,9 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
 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

@@ -3,9 +3,9 @@ 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'];
-    }
+    // static get observedAttributes() {
+    //   return ['fine-presentation-large-adaptation']
+    // }
     constructor() {
         super();
     }
@@ -20,24 +20,38 @@ export class SheetView extends DialogBase {
             { types: 'keydown', listener: SheetView.#handleKeydown },
         ], el).on());
         el.autofocus = true;
+        if (!self.matchMedia('(pointer: fine)').matches)
+            return;
+        const handler1 = this.#handleMediaChange.bind(null, el);
+        CleanupRegistry.register(el, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on());
+        Snapshot.waitReady.then(() => {
+            this.#handleMediaChange(el, new MediaQueryListEvent(`media-change`, {
+                matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+            })); // Initial check
+        });
     }
-    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})`);
@@ -56,9 +70,11 @@ export class SheetView extends DialogBase {
     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';
+            for (const item of el.querySelectorAll(':scope>tool-bar>[slot^="top-bar-"],:scope>tool-bar>[slot="cancellation-action"],:scope>tool-bar>[slot="primary-action"],:scope>tool-bar>[slot="confirmation-action"],:scope>tool-bar>[slot="destructive-action"]')) {
+                const newSlot = item.slot.endsWith('leading') ? 'bottom-bar-leading' : 'bottom-bar-trailing';
+                if (item.slot !== newSlot)
+                    item.dataset.previousSlot = item.slot;
+                item.slot = newSlot;
             }
         else
             for (const item of el.querySelectorAll(':scope>tool-bar>[data-previous-slot]')) {

package/generated/components/sidebar-toggle.js

@@ -23,14 +23,14 @@ export class SidebarToggle extends HTMLElement {
         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 ?? {};
-        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)
@@ -86,7 +89,7 @@ export class TabView extends HTMLElement {
         const style = self.getComputedStyle(form);
         if ('sidebar' !== style.getPropertyValue('--list-style'))
             return;
-        this.#addAnimations();
+        this.#addAnimations(new CustomEvent('beforetabreveal', { detail: { tag: '', ms: cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`) }, bubbles: true, composed: true }));
     };
     #handleTabViewPagereveal = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
@@ -199,28 +202,28 @@ export class TabView extends HTMLElement {
             throw new Error('selectedTab[] must be in order of parent>child. You provided an element that contains the previous sibling.');
         //
         const selectors = [':not(:is(:scope>{{tag}}))', ':is(:scope>{{tag}})']; // first nested ones, then root ones
+        const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`);
         for (const selector of selectors)
             for (const ns of this.querySelectorAll(`navigation-stack:not([hidden])${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view:not([hidden])${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
                 if (!tabs.some((tab) => !ns.contains(tab)))
                     continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabswap', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = true; // triggers
             }
         for (const selector of selectors.reverse())
             for (const ns of this.querySelectorAll(`navigation-stack[hidden]${selector.replace('{{tag}}', 'navigation-stack')},navigation-split-view[hidden]${selector.replace('{{tag}}', 'navigation-split-view')}`)) {
                 if (!tabs.some((tab) => ns.contains(tab)))
                     continue; // shouldRun
-                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id }, bubbles: true, composed: true }));
+                ns.dispatchEvent(new CustomEvent('beforetabreveal', { detail: { tag: ns.id, ms }, bubbles: true, composed: true }));
                 ns.hidden = false; // triggers
             }
     }
-    #addAnimations = () => {
+    #addAnimations = (evt) => {
         this.setAttribute('js-aftertabreveal', '');
+        // const ms = cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`)
         this.#afterTabRevealDelay.next(() => {
             this.removeAttribute('js-aftertabreveal');
-        }, cssTime(`${this.computedStyleMap().get(`--tabbar-after-tabreveal-duration`)}`));
-        // this.removeAttribute('js-aftertabreveal')
-        // this.#afterTabRevealDelay = undefined
+        }, evt.detail.ms);
     };
     #handleSelectionChange = (evt) => {
         this.#triggerToggleEvent(evt);

package/generated/components/table-view.js

@@ -39,18 +39,24 @@ export class TableView extends HTMLElement {
           <slot name="footer-trailing"></slot>
         </div>
       </div>
-    </div>`, ''));
+    </div>`));
     }
     #shadowRoot;
-    #colSlot;
+    #slots = new Map();
+    // #colSlot?: HTMLSlotElement
     // #slot?: HTMLSlotElement
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#colSlot = this.#shadowRoot.querySelector('slot[name=column]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+        // this.#colSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=column]') ?? undefined
         // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        this.#colSlot?.addEventListener('slotchange', this.#handleSlotchange);
+        this.#slots?.get('column')?.addEventListener('slotchange', this.#handleSlotchange);
         // this.append(
         //   document.createRange().createContextualFragment(`<menu-view slot="header-trailing">
         //               <label-view slot="label" title="Delete"></label-view>
@@ -103,25 +109,28 @@ export class TableView extends HTMLElement {
     }
     #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);
         if (0 < assigned.length)
             this.#handleTagMutation();
     };
     #handleTagMutation = (entry) => {
         console.debug(`${_a.name} ⚡️ mutation`);
-        // const sourceSlot = 0 < (this.#colSlot?.assignedElements({ flatten: true }) ?? []).length ? this.#colSlot : this.#colSlot
+        // const sourceSlot = 0 < (this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []).length ? this.#slots?.get('column') : this.#slots?.get('column')
         // const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view></menu-view>`))
         // 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', TableView.wrapTag(el, sourceSlot?.name))
         //
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`);
+            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
             CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
         }
         this.#compactToolbarItem.innerHTML = `<label-view slot="label" system-image="dots-three"></label-view>`;
-        for (const node of this.#colSlot?.assignedElements({ flatten: true }) ?? []) {
+        for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
             if (!node.matches('[is=table-column]'))
                 continue;
             const btn = $(`<button type="button" tabindex="0">
@@ -129,7 +138,7 @@ export class TableView extends HTMLElement {
           <label-view></label-view>
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
-      </button>`), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
+      </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
             title?.setAttribute('title', node.textContent.trim());
             subTitle?.setAttribute('title', node.ariaSort ?? '');
             this.#compactToolbarItem.appendChild(btn);
@@ -164,7 +173,10 @@ export class TableView extends HTMLElement {
         }
     };
     #handleMenuClick = (evt) => {
-        const btn = evt.target.closest('button');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        const btn = target.closest('button');
         if (!btn)
             return;
         const siblings = [...(btn.parentNode?.querySelectorAll(':scope>button') ?? [])];

package/generated/components/text-field.js

@@ -23,12 +23,13 @@ export class TextField extends FormAssociatedBase {
       <input type="text" part="root input text-field-form-input">
     </div>
     <slot name="validity-options" hidden></slot>
-  </label>`, ''));
+  </label>`));
     }
     #shadowRoot;
     // #internals: ElementInternals
     #customValidity = '';
-    #validitiesSlot;
+    // #validitiesSlot?: HTMLSlotElement
+    #slots = new Map();
     #input;
     get #internals() {
         return getInternals(this);
@@ -37,9 +38,13 @@ export class TextField extends FormAssociatedBase {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#validitiesSlot = this.#shadowRoot.querySelector('slot[name=validity-options]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
         CleanupRegistry.unregister(this, 'validities');
-        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#validitiesSlot).on(), 'validities');
+        CleanupRegistry.register(this, onoff(makeSlotchangeHandler(this), this.#slots?.get('validity-options')).on(), 'validities');
         this.#input = this.#shadowRoot.querySelector('input') ?? undefined;
         CleanupRegistry.register(this, onoff([{ types: 'focusin', listener: this.#handleFocusin }], this).on());
         CleanupRegistry.register(this, onoff([
@@ -137,7 +142,7 @@ export class TextField extends FormAssociatedBase {
             case 'label':
                 let label = this.querySelector(':scope>[slot=label]');
                 if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label" foreground="secondary"></span>`));
+                    label ??= this.appendChild($(`<span slot="label" foreground="secondary"></span>`, '>1'));
                     label.textContent = newValue;
                 }
                 else
@@ -217,7 +222,7 @@ export class TextField extends FormAssociatedBase {
     };
     #handleInputPaste = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         evt.preventDefault();
@@ -287,40 +292,40 @@ export class TextField extends FormAssociatedBase {
                 const allowedSignsRegex2 = /^[+-]?$|^[+-]?(\d+([.,]\d*)?|[.,]\d*)$/, // allow single '+' or '-', then allow only one ',' or '.' and finally only digits
                 digitsDecimalsOnlyRegex = /^(\d+([.,]\d*)?|[.,]\d*)?$/; // allow only one ',' or '.' and finally only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex2 : digitsDecimalsOnlyRegex).test(str);
-            //   // console.log(isValidDecimal(""));       // true
-            //   // console.log(isValidDecimal("+"));      // true
-            //   // console.log(isValidDecimal("-"));      // true
-            //   // console.log(isValidDecimal("123"));    // true
-            //   // console.log(isValidDecimal("+123"));   // true
-            //   // console.log(isValidDecimal("-456"));   // true
-            //   // console.log(isValidDecimal("12.34"));  // true
-            //   // console.log(isValidDecimal("-0,56"));  // true
-            //   // console.log(isValidDecimal(".78"));    // true
-            //   // console.log(isValidDecimal(",9"));     // true
-            //   // console.log(isValidDecimal("12.3.4")); // false
-            //   // console.log(isValidDecimal("12,3,4")); // false
-            //   // console.log(isValidDecimal("12-3"));   // false
-            //   // console.log(isValidDecimal("12a"));    // false
+            //   // isValidDecimal("");       // true
+            //   // isValidDecimal("+");      // true
+            //   // isValidDecimal("-");      // true
+            //   // isValidDecimal("123");    // true
+            //   // isValidDecimal("+123");   // true
+            //   // isValidDecimal("-456");   // true
+            //   // isValidDecimal("12.34");  // true
+            //   // isValidDecimal("-0,56");  // true
+            //   // isValidDecimal(".78");    // true
+            //   // isValidDecimal(",9");     // true
+            //   // isValidDecimal("12.3.4"); // false
+            //   // isValidDecimal("12,3,4"); // false
+            //   // isValidDecimal("12-3");   // false
+            //   // isValidDecimal("12a");    // false
             case 'number-pad':
                 const allowedSignsRegex = /^([+-]|\d+|[+-]\d+)?$/, // allow single '+' or '-', then allow only digits
                 digitsOnlyRegex = /^(\d+)?$/; // allow only digits
                 return (this.negativeNumbersAllowed ? allowedSignsRegex : digitsOnlyRegex).test(str);
-            //   // console.log(isValidInteger(""));      // true
-            //   // console.log(isValidInteger("+"));     // true
-            //   // console.log(isValidInteger("-"));     // true
-            //   // console.log(isValidInteger("123"));   // true
-            //   // console.log(isValidInteger("+123"));  // true
-            //   // console.log(isValidInteger("-456"));  // true
-            //   // console.log(isValidInteger("12-3"));  // false
-            //   // console.log(isValidInteger("++123")); // false
-            //   // console.log(isValidInteger("123a"));  // false
+            //   // isValidInteger("");      // true
+            //   // isValidInteger("+");     // true
+            //   // isValidInteger("-");     // true
+            //   // isValidInteger("123");   // true
+            //   // isValidInteger("+123");  // true
+            //   // isValidInteger("-456");  // true
+            //   // isValidInteger("12-3");  // false
+            //   // isValidInteger("++123"); // false
+            //   // isValidInteger("123a");  // false
             default:
                 return true;
         }
     };
     #handleInputBeforeinput = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         if ('insertText' !== evt.inputType)
@@ -355,7 +360,7 @@ export class TextField extends FormAssociatedBase {
     };
     #handleInputBlur = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const input = evt.target instanceof HTMLInputElement && evt.target;
         if (!input)
             return;
         if (0 === input.value.length)
@@ -426,7 +431,7 @@ export class TextField extends FormAssociatedBase {
             const key = k; // ✅ type-safe cast
             if (true !== flags[key])
                 continue;
-            for (const el of this.#validitiesSlot?.assignedElements({ flatten: true }) ?? []) {
+            for (const el of this.#slots?.get('validity-options')?.assignedElements({ flatten: true }) ?? []) {
                 if (!el.matches('option'))
                     continue;
                 const option = el;