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

package/generated/client/index.d.ts

@@ -17,7 +17,7 @@ export declare const alert: (title?: string, message?: string, actions?: {
     role?: string;
 }[], options?: {
     titleVisibility?: boolean;
-}) => Promise<any>;
+}) => Promise<void>;
 export declare const confirmationDialog: (trigger: HTMLElement, title: string, actions?: {
     label?: string;
     image?: string;

package/generated/client/index.js

@@ -101,6 +101,69 @@ if (0 < polyfills.size) {
 }
 // SECTION: Safari polyfill
 document.addEventListener('touchstart', () => { }, { passive: true });
+// SECTION
+const handleHelp = ({ target, relatedTarget }) => {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if (relatedTarget instanceof HTMLElement && relatedTarget && trigger.contains(relatedTarget))
+        return;
+    const newAnchorName = `--help-${self.crypto.randomUUID()}`;
+    const tooltip = $(`<fine-tooltip></fine-tooltip>`, '>1');
+    trigger.style.setProperty('anchor-name', newAnchorName);
+    tooltip.style.setProperty('position-anchor', newAnchorName);
+    document.body.appendChild(tooltip);
+    // setInterval(() => {
+    //   trigger.setAttribute('help', trigger.getAttribute('help') + 'h')
+    // }, 2000)
+    // console.log(999, trigger)
+}, handleDone = ({ target, relatedTarget }) => {
+    if (!(target instanceof HTMLElement && target))
+        return;
+    const trigger = target.closest('[help]');
+    if (!trigger)
+        return;
+    if (relatedTarget instanceof HTMLElement && relatedTarget && trigger.contains(relatedTarget))
+        return;
+    const anchorName = trigger.style.anchorName;
+    if (!anchorName.startsWith('--help-'))
+        return;
+    // for (const el of document.querySelectorAll<HTMLElement>(`[style*="--help-${CSS.escape(anchorName)}"][help]`)) el.style.removeProperty('anchor-name') //trigger.style.removeProperty('anchor-name')
+    // for (const el of document.querySelectorAll(`[style*="${CSS.escape(anchorName)}"]:not([help])`)) el.remove()
+    //   return
+    // }
+    const tooltip = document.querySelector(`[style*="${CSS.escape(anchorName)}"]:not([help])`);
+    if (!tooltip)
+        return;
+    // for (const el of document.querySelectorAll<HTMLElement>(`[style*="--help-${CSS.escape(anchorName)}"][help]`)) el.style.removeProperty('anchor-name') //trigger.style.removeProperty('anchor-name')
+    // for (const el of document.querySelectorAll(`[style*="${CSS.escape(anchorName)}"]:not([help])`)) el.remove()
+    //   return
+    // }
+    // trigger.style.removeProperty('anchor-name')
+    tooltip.hidePopover(); // tooltip.remove?.()
+};
+const mediaQueryList = self.matchMedia(`(pointer: fine)`);
+mediaQueryList.addEventListener('change', ({ matches }) => {
+    for (const [k, v] of [
+        ['pointerover', handleHelp],
+        ['pointerout', handleDone],
+    ])
+        document.removeEventListener(k, v);
+    if (matches)
+        for (const [k, v] of [
+            ['pointerover', handleHelp],
+            ['pointerout', handleDone],
+        ])
+            document.addEventListener(k, v, { passive: true });
+});
+if (mediaQueryList.matches)
+    for (const [k, v] of [
+        ['pointerover', handleHelp],
+        ['pointerout', handleDone],
+    ])
+        document.addEventListener(k, v, { passive: true });
 // SECTION: Transitions
 const cleanup = (lm, type) => {
     let arr = [Snapshot.config['vt-fwd-class-name'], 'fwdd', 'fwn', 'fwnn', 'bwd', 'bwdd', 'bwn', 'bwnn'];
@@ -253,39 +316,41 @@ export const startViewTransition = async (target, type = 'forwards', updateCallb
     }
 };
 export const alert = async (title, message, actions, options) => {
-    const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
-    if (title) {
-        const label = $(`<label-view font="headline"></label-view>`, '>1');
-        label.setAttribute('title', title);
-        vStack.insertAdjacentElement('beforeend', label);
-    }
-    if (message) {
-        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
-        label.setAttribute('title', message);
-        vStack.insertAdjacentElement('beforeend', label);
-    }
-    for (const [index, action] of (actions ?? []).entries()) {
-        const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
-        btn.setAttribute('value', `${index}`);
-        if (action?.role)
-            btn.setAttribute('role', action.role);
-        if (action.label || action.image) {
-            const label = $(`<label-view title="${action.label}"></label-view>`, '>1');
-            if (action.label)
-                label.setAttribute('title', action.label);
-            if (action.image)
-                label.setAttribute('system-image', action.image);
-            btn.appendChild(label);
+    await navigator.locks.request('alert:', async () => {
+        const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
+        if (title) {
+            const label = $(`<label-view font="headline"></label-view>`, '>1');
+            label.setAttribute('title', title);
+            vStack.insertAdjacentElement('beforeend', label);
         }
-        dialog.insertAdjacentElement('beforeend', btn);
-    }
-    document.body.insertAdjacentElement('beforeend', dialog);
-    dialog.showModal();
-    const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
-        off();
-        resolve(evt.detail.returnValue);
-    }, alertDialog, { once: true }).on();
-    return promise;
+        if (message) {
+            const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+            label.setAttribute('title', message);
+            vStack.insertAdjacentElement('beforeend', label);
+        }
+        for (const [index, action] of (actions ?? []).entries()) {
+            const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
+            btn.setAttribute('value', `${index}`);
+            if (action?.role)
+                btn.setAttribute('role', action.role);
+            if (action.label || action.image) {
+                const label = $(`<label-view></label-view>`, '>1');
+                if (action.label)
+                    label.setAttribute('title', action.label);
+                if (action.image)
+                    label.setAttribute('system-image', action.image);
+                btn.appendChild(label);
+            }
+            dialog.insertAdjacentElement('beforeend', btn);
+        }
+        document.body.insertAdjacentElement('beforeend', dialog);
+        dialog.showModal();
+        const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
+            off();
+            resolve(evt.detail.returnValue);
+        }, alertDialog, { once: true }).on();
+        return promise;
+    });
 };
 export const confirmationDialog = async (trigger, title, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;

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, target.getAttribute(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, target.getAttribute(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, target.getAttribute(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/fine-tooltip.d.ts

@@ -0,0 +1,7 @@
+export declare class FineTooltip extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    hidePopover(): void;
+}

package/generated/components/fine-tooltip.js

@@ -0,0 +1,93 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, onoff } from '../internal/utils';
+export class FineTooltip extends HTMLElement {
+    constructor() {
+        super();
+    }
+    #handleMutation = (mutations) => {
+        for (const { target, attributeName } of mutations)
+            if (target instanceof HTMLElement && target && attributeName)
+                this.#render(target.getAttribute(attributeName));
+    };
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        console.debug(`${_a.name} ⚡️ measure`);
+        if (target.hasAttribute('closing'))
+            return;
+        if (!(target instanceof HTMLElement && target))
+            return;
+        const { top } = target.getBoundingClientRect();
+        const vpHeight = self.visualViewport?.height ?? 0, blockSize = borderBoxSize.at(0)?.blockSize ?? 0;
+        if (top > vpHeight - blockSize - 50) {
+            target.style.setProperty('position-area', 'top center');
+            target.style.setProperty('transform-origin', 'bottom');
+        }
+    };
+    #observer = new MutationObserver(this.#handleMutation);
+    #resizeObserver = new ResizeObserver(this.#handleMeasure);
+    get #queryTrigger() {
+        const positionAnchor = this.style.positionAnchor;
+        if (!positionAnchor.startsWith('--help-'))
+            return;
+        const trigger = document.querySelector(`[style*="${CSS.escape(positionAnchor)}"][help]`);
+        return trigger ?? undefined;
+    }
+    #render = (str) => {
+        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+        if (str)
+            label.setAttribute('title', str);
+        else
+            label.removeAttribute('title');
+    };
+    connectedCallback() {
+        console.debug(`${_a.name} ⚡️ connect`);
+        this.removeAttribute('closing');
+        this.popover = 'manual';
+        this.inert = true;
+        CleanupRegistry.register(this, onoff('toggle', this.#handleToggle, this).on());
+        CleanupRegistry.register(this, onoff('beforetoggle', this.#handleBeforetoggle, this).on());
+        this.showPopover();
+    }
+    disconnectedCallback() {
+        console.debug(`${_a.name} ⚡️ disconnect`);
+        this.#resizeObserver.unobserve(this);
+        this.#observer?.disconnect();
+        this.#queryTrigger?.style.removeProperty('anchor-name');
+        CleanupRegistry.unregister(this);
+    }
+    #handleToggle = ({ newState }) => {
+        if ('closed' !== newState)
+            return;
+        this.remove();
+    };
+    #handleBeforetoggle = (evt) => {
+        if ('open' !== evt.newState)
+            return;
+        const trigger = this.#queryTrigger;
+        if (!trigger) {
+            evt.preventDefault();
+            this.remove();
+            return;
+        }
+        else {
+            this.#render(trigger.getAttribute('help'));
+            this.#observer.observe(trigger, {
+                attributes: true,
+                attributeFilter: ['help'],
+            });
+            this.#resizeObserver.observe(this);
+        }
+        this.toggleAttribute('open', 'open' === evt.newState);
+    };
+    hidePopover() {
+        if (this.hasAttribute('closing'))
+            return;
+        this.setAttribute('closing', '');
+        Promise.allSettled(this.getAnimations().map(({ finished }) => finished)).then(() => {
+            if (!this.hasAttribute('closing'))
+                return;
+            this?.remove();
+        });
+    }
+}
+_a = FineTooltip;

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, target.getAttribute(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, target.getAttribute(attributeName));
+                });
                 break;
         }
     }

package/generated/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './confirmation-dialog';
 export * from './content-unavailable-view';
 export * from './date-picker';
 export * from './disclosure-group';
+export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';

package/generated/components/index.js

@@ -7,6 +7,7 @@ export * from './confirmation-dialog';
 export * from './content-unavailable-view';
 export * from './date-picker';
 export * from './disclosure-group';
+export * from './fine-tooltip';
 export * from './form-view';
 export * from './glass-button';
 export * from './glass-prominent-button';

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;