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

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

@@ -1,4 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
 export declare class BorderedButton extends ButtonBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/bordered-button.js

@@ -1,6 +1,11 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { buttonRole, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
 export class BorderedButton extends ButtonBase {
     static get observedAttributes() {
         return ['role'];
@@ -24,7 +29,9 @@ export class BorderedButton extends ButtonBase {
             return;
         switch (attributeName) {
             case 'role':
-                buttonRole(target, attributeName);
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, attributeName);
+                });
                 break;
         }
     }

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

@@ -1,4 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
 export declare class BorderedProminentButton extends ButtonBase {
     #private;
     static get observedAttributes(): string[];

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

@@ -1,6 +1,11 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { buttonRole, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
 export class BorderedProminentButton extends ButtonBase {
     static get observedAttributes() {
         return ['role'];
@@ -24,7 +29,9 @@ export class BorderedProminentButton extends ButtonBase {
             return;
         switch (attributeName) {
             case 'role':
-                buttonRole(target, attributeName);
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, attributeName);
+                });
                 break;
         }
     }

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

@@ -1,4 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
 export declare class BorderlessButton extends ButtonBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/borderless-button.js

@@ -1,6 +1,11 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { buttonRole, onoff } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
 export class BorderlessButton extends ButtonBase {
     static get observedAttributes() {
         return ['role'];
@@ -24,7 +29,9 @@ export class BorderlessButton extends ButtonBase {
             return;
         switch (attributeName) {
             case 'role':
-                buttonRole(target, attributeName);
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, attributeName);
+                });
                 break;
         }
     }

package/generated/components/date-picker.js

@@ -26,7 +26,8 @@ export class DatePicker extends FormAssociatedBase {
     // #lastRenderedStyle?: DatePickerStyle //string | null
     #shadowRoot;
     #customValidity = '';
-    #validitiesSlot;
+    #slots = new Map();
+    // #validitiesSlot?: HTMLSlotElement
     #inputs = [];
     get #internals() {
         return getInternals(this);
@@ -123,9 +124,14 @@ export class DatePicker extends FormAssociatedBase {
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM
         this.#shadowRoot.replaceChildren(document.importNode(this.template, true));
-        this.#validitiesSlot = this.#shadowRoot.querySelector('slot[name=validity-options]') ?? undefined;
+        CleanupRegistry.unregister(this, 'slots');
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        }, 'slots');
         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');
         switch (this.datePickerStyle) {
             default:
                 const [yyyy = '', mm = '', dd = ''] = new Date().toISOString().split('T').shift()?.split('-') ?? [], map = { year: yyyy, month: mm, day: dd };
@@ -385,7 +391,7 @@ export class DatePicker 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;

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

@@ -1,4 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
 export declare class GlassButton extends ButtonBase {
     static get observedAttributes(): string[];
     constructor();

package/generated/components/glass-button.js

@@ -1,6 +1,11 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { buttonRole, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
 export class GlassButton extends ButtonBase {
     static get observedAttributes() {
         return ['role'];
@@ -24,7 +29,9 @@ export class GlassButton extends ButtonBase {
             return;
         switch (attributeName) {
             case 'role':
-                buttonRole(target, attributeName);
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, attributeName);
+                });
                 break;
         }
     }

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

@@ -1,4 +1,8 @@
 import { ButtonBase } from '../namespace-browser/base';
+/**
+ * @slot overlay
+ *
+ */
 export declare class GlassProminentButton extends ButtonBase {
     static get observedAttributes(): string[];
     constructor();

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

@@ -1,6 +1,11 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { buttonRole, onoff, touchGlass } from '../internal/utils';
 import { ButtonBase } from '../namespace-browser/base';
+import { Snapshot } from '../snapshot';
+/**
+ * @slot overlay
+ *
+ */
 export class GlassProminentButton extends ButtonBase {
     static get observedAttributes() {
         return ['role'];
@@ -24,7 +29,9 @@ export class GlassProminentButton extends ButtonBase {
             return;
         switch (attributeName) {
             case 'role':
-                buttonRole(target, attributeName);
+                Snapshot.waitReady.then(() => {
+                    buttonRole(target, attributeName);
+                });
                 break;
         }
     }

package/generated/components/label-view.js

@@ -14,50 +14,28 @@ export class LabelView extends HTMLElement {
   </div>`));
     }
     #shadowRoot;
-    // #imgSlot?: HTMLSlotElement
-    // #slot?: HTMLSlotElement
     constructor() {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
-        // Snapshot.waitReady.then(() => {
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        // // this.#imgSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=image]') ?? undefined
-        // // this.#slot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])') ?? undefined
-        //
-        // // this.#slot?.addEventListener('slotchange', this.#handleSlotchange)
-        // // // this.#imgSlot?.addEventListener('slotchange', this.#handleSlotchange)
-        // // // this.#handleSlotchange(new CustomEvent('slotchange'))
-        // })
     }
     disconnectedCallback() {
         console.debug(`${LabelView.name} ⚡️ disconnect`);
-        // this.#slot?.removeEventListener('slotchange', this.#handleSlotchange)
     }
     connectedCallback() {
         console.debug(`${LabelView.name} ⚡️ connect`);
     }
     attributeChangedCallback(name, oldValue, newValue) {
         console.debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'system-image':
                 let image = this.querySelector(':scope>[slot=image]');
                 if (newValue) {
-                    image ??= this.appendChild($(`<i slot="image"></i>`, '>1'));
+                    image ??= this.appendChild($(`<i slot="image" style="line-height: 1.05"></i>`, '>1'));
                     image.setAttribute('class', `ph ph-${newValue}`);
                 }
                 else
                     image?.remove();
-                // // const imgSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot[name=image]')
-                // // if (!imgSlot) break
-                // const assigned = this.#imgSlot!.assignedElements({ flatten: true }) as HTMLElement[]
-                // let el = assigned[0] as HTMLElement | undefined
-                // if (!el) {
-                //   el = document.createElement('i')
-                //   el.slot = 'image'
-                //   this.append(el)
-                // }
-                // el.setAttribute('class', `ph ph-${newValue}`)
                 break;
             case 'title':
                 let title = this.querySelector(':scope>:not([slot])');
@@ -67,17 +45,7 @@ export class LabelView extends HTMLElement {
                 }
                 else
                     title?.remove();
-                // // const titleSlot = this.#shadowRoot.querySelector<HTMLSlotElement>('slot:not([name])')
-                // // if (!titleSlot) break
-                // const title = this.#slot!.assignedElements({ flatten: true }) as HTMLElement[]
-                // let el2 = title[0] as HTMLElement | undefined
-                // if (!el2) {
-                //   el2 = document.createElement('span')
-                //   this.append(el2)
-                // }
-                // el2.textContent = newValue //el2.replaceChildren(escapeHTMLPolicy.createHTML(newValue))
                 break;
         }
-        // })
     }
 }

package/generated/components/picker-view.js

@@ -21,9 +21,10 @@ export class PickerView extends FormAssociatedBase {
     #lastRenderedStyle; //string | null
     #shadowRoot;
     #customValidity = '';
-    #validitiesSlot;
-    #datalistSlot;
-    #tagSlot;
+    #slots = new Map();
+    // #validitiesSlot?: HTMLSlotElement
+    // #datalistSlot?: HTMLSlotElement
+    // #tagSlot?: HTMLSlotElement
     #trackedElements = new Set();
     #selection = '';
     get #internals() {
@@ -176,21 +177,24 @@ export class PickerView extends FormAssociatedBase {
         this.#lastRenderedStyle = this.pickerStyle;
         // clear shadow DOM
         this.#shadowRoot.replaceChildren(document.importNode(this.template, true));
-        this.#validitiesSlot = this.#shadowRoot.querySelector('slot[name=validity-options]') ?? undefined;
-        this.#datalistSlot = this.#shadowRoot.querySelector('slot[name=options]') ?? undefined;
-        this.#tagSlot = this.#shadowRoot.querySelector('slot[name=tag]') ?? undefined;
+        CleanupRegistry.unregister(this, 'slots');
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        }, 'slots');
         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');
         CleanupRegistry.unregister(this, 'datalist'); //off1()
-        CleanupRegistry.register(this, onoff('slotchange', this.#handleSlotchange, this.#datalistSlot).on(), 'datalist');
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleSlotchange, this.#slots?.get('options')).on(), 'datalist');
         CleanupRegistry.unregister(this, 'tags'); //off2()
-        CleanupRegistry.register(this, onoff('slotchange', this.#handleSlotchange, this.#tagSlot).on(), 'tags');
-        // if (0 < (this.#datalistSlot?.assignedElements({ flatten: true }) ?? []).length) this.#handleTagMutation()
-        // if (0 < (this.#tagSlot?.assignedElements({ flatten: true }) ?? []).length) this.#handleTagMutation()
+        CleanupRegistry.register(this, onoff('slotchange', this.#handleSlotchange, this.#slots?.get('tag')).on(), 'tags');
+        // if (0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length) this.#handleTagMutation()
+        // if (0 < (this.#slots?.get('tag')?.assignedElements({ flatten: true }) ?? []).length) this.#handleTagMutation()
         //this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)) {
         switch (this.pickerStyle
         // case 'menu':
-        //   // if (0 < (this.#datalistSlot?.assignedElements({ flatten: true }) ?? []).length) this.#handleMenuDatalistMutation()
+        //   // if (0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length) this.#handleMenuDatalistMutation()
         //   break
         // case 'gg':
         //   // reattach input listener
@@ -209,7 +213,7 @@ export class PickerView extends FormAssociatedBase {
         //   break
         // case 'inline':
         // default:
-        //   // if (0 < (this.#datalistSlot?.assignedElements({ flatten: true }) ?? []).length) this.#handleInlineDatalistMutation()
+        //   // if (0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length) this.#handleInlineDatalistMutation()
         //   break
         ) {
         }
@@ -299,7 +303,7 @@ export class PickerView extends FormAssociatedBase {
     }
     #handleTagMutation = (entry) => {
         console.debug(`${_a.name} ⚡️ mutation`);
-        const sourceSlot = 0 < (this.#datalistSlot?.assignedElements({ flatten: true }) ?? []).length ? this.#datalistSlot : this.#tagSlot;
+        const sourceSlot = 0 < (this.#slots?.get('options')?.assignedElements({ flatten: true }) ?? []).length ? this.#slots?.get('options') : this.#slots?.get('tag');
         // switch (this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)) {
         switch (this.pickerStyle) {
             case 'menu':
@@ -402,7 +406,7 @@ export class PickerView 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;

package/generated/components/scroll-view.js

@@ -24,7 +24,8 @@ export class ScrollView extends HTMLElement {
   </div>`));
     }
     #shadowRoot;
-    #navbarPrincipalSlot;
+    #slots = new Map();
+    // #navbarPrincipalSlot?: HTMLSlotElement
     #isMidScroll;
     #lastScrollTop = 0;
     // #stopRecordingScrollTop?: boolean = false
@@ -33,7 +34,11 @@ 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`);
@@ -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;
         }

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

@@ -1,7 +1,6 @@
 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;

package/generated/components/sheet-view.js

@@ -1,10 +1,11 @@
 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'];
-    }
+    // static get observedAttributes() {
+    //   return ['fine-presentation-large-adaptation']
+    // }
     constructor() {
         super();
     }
@@ -19,10 +20,19 @@ 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 polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
         console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
-        // NOTE: wait for config
+        // // NOTE: wait for config
         // Snapshot.waitReady.then(() => {
         //   switch (attributeName) {
         //     case 'fine-presentation-large-adaptation':
@@ -60,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,7 +23,7 @@ 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

package/generated/components/tab-view.js

@@ -89,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}`);
@@ -202,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

@@ -42,15 +42,21 @@ export class TableView extends HTMLElement {
     </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>
@@ -113,7 +119,7 @@ export class TableView extends HTMLElement {
     };
     #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))
@@ -124,7 +130,7 @@ export class TableView extends HTMLElement {
             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">

package/generated/components/text-field.js

@@ -28,7 +28,8 @@ export class TextField extends FormAssociatedBase {
     #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([
@@ -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;

package/generated/components/tool-bar-item-group.d.ts

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

package/generated/components/tool-bar-item-group.js

@@ -1,39 +1,28 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { onoff, toolbarRepositioner } from '../internal/utils';
-import { Snapshot } from '../snapshot';
 export class ToolBarItemGroup extends HTMLElement {
-    static get observedAttributes() {
-        return ['preferred-fine-modal-placement'];
-    }
+    // static get observedAttributes() {
+    //   return ['preferred-fine-modal-placement']
+    // }
     constructor() {
         super();
     }
     connectedCallback() {
         console.debug(`${ToolBarItemGroup.name} ⚡️ connect`);
-        if (!this.closest('[is=sheet-view]'))
-            return;
-        const handler1 = toolbarRepositioner.bind(null, this);
-        CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1, Snapshot.on).on());
-        Snapshot.waitReady.then(() => {
-            toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-            })); // Initial check
-        });
+        // if (!this.closest('[is=sheet-view]')) return
+        // if (!self.matchMedia('(pointer: fine)').matches) return
+        // const handler1 = toolbarRepositioner.bind(null, this)
+        // CleanupRegistry.register(this, onoff('fine_dialog_sheet:change', handler1 as unknown as EventListener, Snapshot.on).on())
+        // Snapshot.waitReady.then(() => {
+        //   toolbarRepositioner(
+        //     this,
+        //     new MediaQueryListEvent(`media-change`, {
+        //       matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
+        //     })
+        //   ) // Initial check
+        // })
     }
     disconnectedCallback() {
         console.debug(`${ToolBarItemGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${ToolBarItemGroup.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        switch (name) {
-            case 'preferred-fine-modal-placement':
-                Snapshot.waitReady.then(() => {
-                    toolbarRepositioner(this, new MediaQueryListEvent(`media-change`, {
-                        matches: Snapshot.breakpoints?.get('fine_dialog_sheet'),
-                    })); // Initial check
-                });
-                break;
-        }
-    }
 }