@swiftwc/ui 0.0.0-dev.11 → 0.0.0-dev.111

package/generated/components/label-view.js

@@ -1,83 +1,84 @@
-import { $ } from '../internal/utils';
+import { $, debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A view that labels items with an icon and a title.
+ *
+ * @example <label-view><span>Hello world!</span></label-view> — Creating a label using a `span` element
+ * @example <label-view title="Hello world!"></label-view> — Creating a label using the `title` attribute
+ * @example <label-view system-image="hand-waving"><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `system-image` attribute
+ * @example <label-view><i slot="icon" class="ph ph-duotone ph-hand-waving"></i><span>Hello world!</span></label-view> — Creating a label with an icon and a title using the `icon` slot
+ *
+ * @attr {@Font} font — Sets the default font for text in this view.
+ *
+ * @slot — Any children without a `slot` attribute are placed in the title block.
+ * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
+ *
+ * @cssprop {length} --label-gap — The gap between the icon and the title.
+ * @cssprop {number} --label-image-size — The size of the icon.
+ * @cssprop {length}--label-padding-inline — The padding inline of the label.
+ *
+ */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
-        return ['system-image', 'title', 'line-limit', 'truncation-mode'];
+        return [
+            'system-image',
+            'title',
+            'line-limit',
+            /**
+             * @type {"tail"}
+             */
+            'truncation-mode',
+        ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <div part="root label-image-stack">
-    <slot name="image"></slot>
-  </div>
-  <div part="root label-title-stack">
-    <slot></slot>
-  </div>`, ''));
+        return (this.#template ??= $(html `
+      <slot name="icon"></slot>
+      <slot></slot>
+    `));
+        //     String.raw`
+        // <div part="root label-image-stack">
+        //   <slot name="image"></slot>
+        // </div>
+        // <div part="root label-title-stack">
+        //   <slot></slot>
+        // </div>`
     }
     #shadowRoot;
-    // #imgSlot?: HTMLSlotElement
-    // #slot?: HTMLSlotElement
+    // #reflectScheduled = false
     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(() => {
+        debug(`${LabelView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        // this.#scheduleReflect()
         switch (name) {
+            // case 'system-image':
+            // case 'title':
+            //   render(
+            //     html`${this.getAttribute('title') ? html`<span>${this.getAttribute('title')}</span>` : null}${this.getAttribute('system-image')
+            //       ? html`<image-view slot="icon" system-name="${this.getAttribute('system-image')}"></image-view>`
+            //       : null}`,
+            //     this
+            //   )
+            //   break
             case 'system-image':
-                let image = this.querySelector(':scope>[slot=image]');
-                if (newValue) {
-                    image ??= this.appendChild($(`<i slot="image"></i>`));
-                    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}`)
+                queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${newValue}"></image-view>`, this, { removeIf: !newValue });
                 break;
             case 'title':
-                let title = this.querySelector(':scope>:not([slot])');
-                if (newValue) {
-                    title ??= this.appendChild($(`<span></span>`));
-                    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))
+                queryMorph(':not([slot])', html `<span>${newValue}</span>`, this, { removeIf: !newValue });
                 break;
         }
-        // })
+    }
+    disconnectedCallback() {
+        debug(`${LabelView.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        debug(`${LabelView.name} ⚡️ connect`);
     }
 }

package/generated/components/labeled-content.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @example <labeled-content label="Label" value="Content"></labeled-content> — Creates a standard labeled element, with a view that conveys the value of the element and a label
+ *
+ * @example <labeled-content label="Height" value="6" format="unit::unit=foot"></labeled-content> — Creates a labeled element from a formatted value
+ *
+ * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
+ *
+ * @slot — The default slot.
+ * @slot label — Use the `slot="label"` attribute to place childen in the label block.
+ * @slot header
+ * @slot footer
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
+ */
+export declare class LabeledContent extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'labeled-content': LabeledContent;
+    }
+}

package/generated/components/labeled-content.js

@@ -0,0 +1,160 @@
+import { $, debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A container view that pairs a label with a value.
+ *
+ * @example <labeled-content label="Label" value="Content"></labeled-content> — Creates a standard labeled element, with a view that conveys the value of the element and a label
+ *
+ * @example <labeled-content label="Height" value="6" format="unit::unit=foot"></labeled-content> — Creates a labeled element from a formatted value
+ *
+ * @example <labeled-content value="Content"><label-view slot="label" title="Custom Value"></label-view><label-view slot="label" title="Custom Subtitle Value"></label-view></labeled-content> — Creates a labeled element that displays a custom label and a custom subtitle to the label
+ *
+ * @slot — The default slot.
+ * @slot label — Use the `slot="label"` attribute to place childen in the label block.
+ * @slot header
+ * @slot footer
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
+ */
+export class LabeledContent extends HTMLElement {
+    static get observedAttributes() {
+        return [
+            'value',
+            'label',
+            'header',
+            'footer',
+            /**
+             * Use this to force a specific style.
+             *
+             * @type {vertical|horizontal}
+             */
+            'labeled-content-style',
+            /**
+             * Use this to format the text inside the value attribute. For example `format="currency::currency=USD" value="1234.5"` produces a value of `$1,234.50`.
+             *
+             * @type {"<format-type>:<locale?>:<format-options?>"}
+             */
+            'format',
+        ];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(html `
+      <div part="root labeled-content-container">
+        <slot name="header"></slot>
+        <div part="root labeled-content-stack">
+          <div part="root labeled-content-label-stack">
+            <slot name="label"></slot>
+          </div>
+          <div part="root labeled-content-value-stack">
+            <slot></slot>
+          </div>
+        </div>
+        <slot name="footer"></slot>
+      </div>
+    `));
+    }
+    #shadowRoot;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'header':
+                queryMorph('[slot=header]', html `<header slot="header">
+            <label-view font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </header>`, this, { removeIf: !newValue });
+                break;
+            case 'footer':
+                queryMorph('[slot=footer]', html `<footer slot="footer">
+            <label-view font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </footer>`, this, { removeIf: !newValue });
+                break;
+            case 'value': {
+                const val = this.#fmt(newValue, this.getAttribute('format'));
+                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this);
+                break;
+            }
+            case 'format': {
+                const val = this.#fmt(this.getAttribute('value'), newValue);
+                queryMorph('label-view:not([slot])', html `<label-view>${val ? html `<span>${val}</span>` : null}</label-view>`, this);
+                break;
+            }
+            case 'label':
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        debug(`${LabeledContent.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        debug(`${LabeledContent.name} ⚡️ connect`);
+    }
+    // <type>:<locale>;<option>=<value>;<option>=<value>
+    #fmt = (value, format) => {
+        const parseFormat = (format) => {
+            if (!format)
+                return {
+                    type: 'text',
+                    locale: navigator.language,
+                    options: {},
+                };
+            const [type, locale, opts = {}] = format.split(':', 3), loc = new Intl.Locale(locale || navigator.language), options = Object.fromEntries(new URLSearchParams(opts));
+            return {
+                type,
+                locale: loc.toString(),
+                options,
+            };
+        };
+        const { type, locale, options } = parseFormat(format);
+        switch (type) {
+            case 'currency':
+                return new Intl.NumberFormat(locale, { style: 'currency', ...options }).format(Number(value)); // currency:en-US;currency=USD "$1,234.50"
+            case 'percent':
+                return new Intl.NumberFormat(locale, { style: 'percent' }).format(Number(value)); // percent:en-US "42%"
+            case 'unit':
+                return new Intl.NumberFormat(locale, { style: 'unit', ...options }).format(Number(value)); // percent:en-US:unit=kilometer-per-hour "50 km/h"
+            case 'number':
+                return new Intl.NumberFormat(locale, options).format(Number(value)); // number:en-US:notation=compact "1.2M"
+            case 'date':
+                return new Intl.DateTimeFormat(locale, options).format(new Date(value ?? '2000')); // { dateStyle: 'full', timeStyle: 'short' } "Saturday, July 4, 2026 at 2:30 PM"
+            case 'relative-time': {
+                const [number = 0, unit = 'day'] = value?.split('~') ?? [];
+                return new Intl.RelativeTimeFormat(locale, options).format(Number(number), unit); // -1~day { numeric: 'auto' } "yesterday"
+            }
+            case 'list':
+                return new Intl.ListFormat(locale, options).format(value?.split('~') ?? []); // '' { style: 'long', type: 'conjunction' } "Foo, Bar, and Baz"
+            case 'region':
+                return value ? new Intl.DisplayNames(locale, { type: 'region' }).of(value) : ''; // "Greece"
+            case 'byte-count': {
+                const bytes = Number(value);
+                if (!Number.isFinite(bytes))
+                    return value;
+                const units = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte', 'exabyte'];
+                const index = Math.min(Math.floor(Math.log(Math.abs(bytes)) / Math.log(1024)), units.length - 1);
+                return new Intl.NumberFormat(locale, {
+                    style: 'unit',
+                    unit: units[Math.max(0, index)],
+                    unitDisplay: 'short',
+                    ...options,
+                }).format(bytes / 1024 ** Math.max(0, index));
+            }
+            default:
+                return value;
+        }
+    };
+}

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

@@ -1,5 +1,19 @@
+/**
+ * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
+ *
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ * @attr {sidebar} preferred-root-disclosure-style
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
+ */
 export declare class ListView extends HTMLElement {
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'list-view': ListView;
+    }
+}

package/generated/components/list-view.js

@@ -1,29 +1,24 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+import { debug, listActive, onoff } from '../internal/utils';
+/**
+ * @summary A container view that arranges rows of data in a single column, optionally letting the user select one or more of them.
+ *
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside
+ * @attr {sidebar} preferred-root-disclosure-style
+ *
+ * @cssprop {length} --list-row-gap — The gap between rows
+ * @cssprop {length} --list--media-inner-padding-inline-start — The inline paddint start for each row
+ */
 export class ListView extends HTMLElement {
-    // static formAssociated = true
-    // #internals
-    // #options
-    // #focusedIndex = 0
-    // #selected = new Set()
     constructor() {
         super();
-        // this.#internals = this.attachInternals()
-        // this.tabIndex = 0
     }
     disconnectedCallback() {
-        console.debug(`${ListView.name} ⚡️ disconnect`);
+        debug(`${ListView.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${ListView.name} ⚡️ connect`);
+        debug(`${ListView.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff(listActive(this), this).on());
-        // this.setAttribute('role', 'listbox')
-        // this.setAttribute('aria-multiselectable', 'true')
-        // this.#options = Array.from(this.querySelectorAll('[option]'))
-        // this.addEventListener('pointerleave', this.#onCancel)
-        // this.addEventListener('click', this.#onClick)
-        // this.addEventListener('keydown', this.#onKeyDown)
-        // this.#updateOptionAttributes()
     }
 }

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

@@ -1,9 +1,20 @@
+/**
+ * @summary A control that opens a menu of actions.
+ *
+ * @slot — The default slot.
+ * @slot label
+ */
 export declare class MenuView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     static get template(): DocumentFragment;
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'menu-view': MenuView;
+    }
 }

package/generated/components/menu-view.js

@@ -1,23 +1,30 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, onoff, touchGlass } from '../internal/utils';
+import { $, debug, onoff, touchGlass } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
+/**
+ * @summary A control that opens a menu of actions.
+ *
+ * @slot — The default slot.
+ * @slot label
+ */
 export class MenuView extends HTMLElement {
     static get observedAttributes() {
         return ['open', 'closing', 'label'];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <button type="button" part="root button menu-summary">
-    <slot name="label"></slot>
-  </button>
-  <dialog part="root menu-dialog" autofocus inert>
-    <form part="root menu-form" method="dialog" novalidate>
-      <div part="root menu-scrollable">
-        <slot></slot>
-      </div>
-    </form>
-  </dialog>`, ''));
+        return (this.#template ??= $(html `<button type="button" part="root button menu-summary">
+          <slot name="label"></slot>
+        </button>
+        <dialog part="root menu-dialog" autofocus inert>
+          <form part="root menu-form" method="dialog" novalidate>
+            <div part="root menu-scrollable">
+              <slot></slot>
+            </div>
+          </form>
+        </dialog>`));
     }
     #shadowRoot;
     #dialog;
@@ -26,50 +33,15 @@ export class MenuView extends HTMLElement {
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
     }
-    disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
-        // const dialog = this.#shadowRoot.querySelector('dialog'),
-        //   trigger = this.#shadowRoot.querySelector('button')
-        // trigger?.removeEventListener('click', this.#handleTriggerClick)
-        // dialog?.removeEventListener('click', this.#handleDialogClick)
-        // dialog?.removeEventListener('close', this.#handleDialogClose)
-        // dialog?.removeEventListener('cancel', this.#handleDialogCancel)
-        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
-        summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
-        dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
-        CleanupRegistry.unregister(this);
-    }
-    connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
-        this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
-        const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
-        CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
-        CleanupRegistry.register(this, onoff([
-            { types: 'click', listener: this.#handleDialogClick },
-            { types: 'close', listener: this.#handleDialogClose },
-            { types: 'cancel', listener: this.#handleDialogCancel },
-        ], this.#dialog).on());
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, (evt) => {
-            if (evt.target.matches('menu-view'))
-                return false;
-            if (!evt.target.closest('menu-view[open]'))
-                return false;
-            return true;
-        }), this).on());
-        const newAnchorName = `--menu-view-${self.crypto.randomUUID()}`;
-        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
-        summaryPart?.style.setProperty('anchor-name', newAnchorName, 'important'); // override unset:all // $.prop('anchor-name', newAnchorName, summaryPart, 'important') //
-        dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
-    }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'open':
                 if (!this.#dialog)
                     break;
                 this.#dialog.inert = null === newValue;
                 if (null === newValue && this.#dialog.open) {
-                    console.debug(`${_a.name} ⚡️ will-close`);
+                    debug(`${_a.name} ⚡️ will-close`);
                     this.setAttribute('closing', '');
                     Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
                         if (!this.hasAttribute('closing'))
@@ -79,7 +51,7 @@ export class MenuView extends HTMLElement {
                     });
                 }
                 if ('' === newValue && !this.#dialog.open) {
-                    console.debug(`${_a.name} ⚡️ will-open`);
+                    debug(`${_a.name} ⚡️ will-open`);
                     this.removeAttribute('closing');
                     const form = this.#shadowRoot.querySelector('form');
                     form.scrollTop = 0;
@@ -87,46 +59,72 @@ export class MenuView extends HTMLElement {
                 }
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<label-view slot="label"></label-view>`));
-                    label.setAttribute('title', newValue);
-                }
-                else
-                    label?.remove();
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
                 break;
         }
     }
-    #handleDialogClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (evt.target.matches('dialog'))
+    disconnectedCallback() {
+        debug(`${_a.name} ⚡️ disconnect`);
+        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
+        summaryPart?.style.removeProperty('anchor-name'); //$.prop('anchor-name', null, summaryPart)
+        dialogPart?.style.removeProperty('position-anchor'); //$.prop('position-anchor', null, dialogPart)
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        debug(`${_a.name} ⚡️ connect`);
+        this.#dialog = this.#shadowRoot.querySelector('dialog') ?? undefined;
+        const trigger = this.#shadowRoot.querySelector('button') ?? undefined;
+        CleanupRegistry.register(this, onoff('click', this.#handleTriggerClick, trigger).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'click', listener: this.#handleDialogClick },
+            { types: 'close', listener: this.#handleDialogClose },
+            { types: 'cancel', listener: this.#handleDialogCancel },
+        ], this.#dialog).on());
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t, ({ target }) => {
+            if (!(target instanceof HTMLElement))
+                return true;
+            if (target.matches('menu-view'))
+                return false;
+            if (!target.closest('menu-view[open]'))
+                return false;
+            return true;
+        }), this).on());
+        const newAnchorName = `--menu-view-${self.crypto.randomUUID()}`;
+        const summaryPart = this.#shadowRoot.querySelector('[part*=menu-summary]'), dialogPart = this.#shadowRoot.querySelector('[part*=menu-dialog]');
+        summaryPart?.style.setProperty('anchor-name', newAnchorName, 'important'); // override unset:all // $.prop('anchor-name', newAnchorName, summaryPart, 'important') //
+        dialogPart?.style.setProperty('position-anchor', newAnchorName); // $.prop('position-anchor', newAnchorName, dialogPart) //
+    }
+    #handleDialogClick = ({ type, target }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            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);
         // event.stopPropagation() //NOTE: add this only if not nested, disposes all nicely if ommited
     };
     #handleTriggerClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', true);
     };
     // intercept to modify open attr
     #handleDialogCancel = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (!evt.cancelable)
             return;
         evt.preventDefault();
         this.toggleAttribute('open', false);
     };
     #handleDialogClose = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
     };
 }

package/generated/components/navigation-large-title.d.ts

@@ -1,6 +1,17 @@
+/**
+ *
+ * @attr {boolean} padding
+ * @attr {boolean} navigation-bar-auto-hide
+ *
+ */
 export declare class NavigationLargeTitle extends HTMLElement {
     #private;
     constructor();
     disconnectedCallback(): void;
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'navigation-large-title': NavigationLargeTitle;
+    }
+}