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

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);
@@ -48,7 +49,7 @@ export class DatePicker extends FormAssociatedBase {
               <input type="text" name="year" inputmode="numeric" pattern="\d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input">
             </div>
             <slot name="validity-options" hidden></slot>
-          </label>`, ''));
+          </label>`));
                     break;
             }
         return _a.#templates.get(this.datePickerStyle);
@@ -99,7 +100,7 @@ export class DatePicker extends FormAssociatedBase {
             case 'label':
                 let label = this.querySelector(':scope>[slot=label]');
                 if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label"></span>`));
+                    label ??= this.appendChild($(`<span slot="label"></span>`, '>1'));
                     label.textContent = newValue;
                 }
                 else
@@ -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 };
@@ -177,7 +183,10 @@ export class DatePicker extends FormAssociatedBase {
     }
     #handleClick = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target?.closest('input');
+        const target = evt.target instanceof HTMLElement && evt.target;
+        if (!target)
+            return;
+        const input = target.closest('input');
         if (input)
             return;
         this.#shadowRoot.querySelector('input.focus')?.focus?.();
@@ -217,7 +226,7 @@ export class DatePicker 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();
@@ -239,7 +248,7 @@ export class DatePicker extends FormAssociatedBase {
     };
     #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)
@@ -262,6 +271,8 @@ export class DatePicker extends FormAssociatedBase {
     };
     #handleInputKeydown = ({ type, target, key }) => {
         console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement && target))
+            return;
         const input = target;
         if (!input)
             return;
@@ -284,7 +295,10 @@ export class DatePicker extends FormAssociatedBase {
     };
     #handleInputBlur = (evt) => {
         console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+        const target = evt.target instanceof HTMLInputElement && evt.target;
+        if (!target)
+            return;
+        const input = target;
         if (0 === input.value.length)
             return;
         const finalText = `${clamp(this.value[input.name] ?? '0', _a.#min(input), _a.#max(input))}`.padStart(parseInt(input.getAttribute('maxlength') ?? '0'), '0');
@@ -377,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/disclosure-group.js

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

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

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

package/generated/components/glass-button.js

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

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

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

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

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

package/generated/components/index.d.ts

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

package/generated/components/index.js

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

package/generated/components/label-view.js

@@ -11,73 +11,41 @@ export class LabelView extends HTMLElement {
   </div>
   <div part="root label-title-stack">
     <slot></slot>
-  </div>`, ''));
+  </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>`));
+                    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])');
                 if (newValue) {
-                    title ??= this.appendChild($(`<span></span>`));
+                    title ??= this.appendChild($(`<span></span>`, '>1'));
                     title.textContent = newValue;
                 }
                 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/menu-view.js

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

package/generated/components/navigation-title.js

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

package/generated/components/picker-view.js

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