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

package/generated/components/date-picker.js

@@ -1,9 +1,15 @@
 var _a;
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { FormAssociatedBase, getInternals, makeSlotchangeHandler } from '../internal/class/form-associated-base';
-import { $, clamp, kebabCase, onoff, set } from '../internal/utils';
+import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
+import { MutationObserverSet } from '../internal/class/mutation-observer-set';
+import { $, clamp, debug, kebabCase, onoff, set } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
+/**
+ * @summary A control that selects an absolute date.
+ */
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
         return [
@@ -12,11 +18,17 @@ export class DatePicker extends FormAssociatedBase {
              * @type {"graphical"|"field"|"automatic"}
              */
             'date-picker-style',
+            /**
+             * @type {boolean}
+             */
             'required',
             'prompt',
             'label',
             'name',
             'selection',
+            /**
+             * @type {boolean}
+             */
             'disabled',
             'minimum',
             'maximum',
@@ -24,9 +36,15 @@ export class DatePicker extends FormAssociatedBase {
     }
     static #templates = new Map();
     // #lastRenderedStyle?: DatePickerStyle //string | null
+    #renderValidityMsgs = (entries) => {
+        debug(`${_a.name} ⚡️ mutation`);
+        this.setValidity(this.validity, this.validationMessage);
+    };
     #shadowRoot;
     #customValidity = '';
-    #validitiesSlot;
+    #slots = new Map();
+    #validityObservers = new MutationObserverSet(this.#renderValidityMsgs);
+    // #validitiesSlot?: HTMLSlotElement
     #inputs = [];
     get #internals() {
         return getInternals(this);
@@ -35,20 +53,19 @@ export class DatePicker extends FormAssociatedBase {
         if (!_a.#templates.has(this.datePickerStyle))
             switch (this.datePickerStyle) {
                 default:
-                    _a.#templates.set(this.datePickerStyle, $(String.raw `
-            <label part="root date-picker-stack">
-            <div part="root date-picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root date-picker-input-stack">
-              <input type="text" name="month" inputmode="numeric" pattern="\d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input">
-              <span part="root date-picker-separator"></span>
-              <input type="text" name="day" inputmode="numeric" pattern="\d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input">
-              <span part="root date-picker-separator"></span>
-              <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>`, ''));
+                    _a.#templates.set(this.datePickerStyle, $(html `<label part="root date-picker-stack">
+                <div part="root date-picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root date-picker-input-stack">
+                  <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
+                  <span part="root date-picker-separator"></span>
+                  <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
+                  <span part="root date-picker-separator"></span>
+                  <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>`));
                     break;
             }
         return _a.#templates.get(this.datePickerStyle);
@@ -57,29 +74,12 @@ export class DatePicker extends FormAssociatedBase {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
     }
-    connectedCallback() {
-        super.connectedCallback();
-        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
-        this.#render();
-        CleanupRegistry.register(this, onoff('change', () => {
-            this.#render();
-        }, I18n.on).on());
-        // finally
-        if (!this.hasAttribute('selection'))
-            return;
-        const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
-        this.selection = { year: y, month: m, day: d };
-        this.#sendValueToForm(false);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'selection':
-                const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/);
-                this.selection = { year: y, month: m, day: d };
+                // nothing happens// const [y = '', m = '', d = ''] = (newValue ?? '').split(/\D+/)
+                // this.#selectedDate = { year: y, month: m, day: d }
                 break;
             case 'required':
                 for (const input of this.#inputs)
@@ -89,7 +89,7 @@ export class DatePicker extends FormAssociatedBase {
             case 'name':
             case 'minimum':
             case 'maximum':
-                this.#sendValueToForm();
+                this.#sendValueToForm(false);
                 break;
             case 'prompt':
                 const [py = '', pm = '', pd = ''] = (newValue ?? '').split(/\D+/), map = { year: py, month: pm, day: pd };
@@ -97,14 +97,8 @@ export class DatePicker extends FormAssociatedBase {
                     input.setAttribute('placeholder', map[input.name] ?? '');
                 break;
             case 'label':
-                let label = this.querySelector(':scope>[slot=label]');
-                if (newValue) {
-                    label ??= this.appendChild($(`<span slot="label"></span>`));
-                    label.textContent = newValue;
-                }
-                else
-                    label?.remove();
-                this.#sendValueToForm();
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
+                // this.#sendValueToForm()
                 break;
             case 'disabled':
                 for (const input of this.#inputs)
@@ -112,22 +106,41 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#validityObservers.unobserveAll();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        CleanupRegistry.register(this, onoff('click', this.#handleClick, this).on());
+        this.#render();
+        CleanupRegistry.register(this, onoff('localechange', () => {
+            this.#render();
+        }, I18n.on).on());
+        // finally
+        if (!this.hasAttribute('selection'))
+            return;
+        const [y = '', m = '', d = ''] = (this.getAttribute('selection') ?? '').split(/\D+/);
+        this.#selectedDate = { year: y, month: m, day: d };
+        this.#sendValueToForm(false);
+    }
     get datePickerStyle() {
-        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '')
-            ? this.getAttribute('date-picker-style')
-            : 'automatic';
+        return datePickerStyles.includes(this.getAttribute('date-picker-style') ?? '') ? this.getAttribute('date-picker-style') : 'automatic';
     }
     #render() {
-        console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
-        if (!this.isConnected)
-            return;
+        debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // 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('slotchange', this.#handleValiditiesSlotchange, 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 };
@@ -158,7 +171,16 @@ export class DatePicker extends FormAssociatedBase {
                 break;
         }
     }
-    get selection() {
+    #handleValiditiesSlotchange = ({ type, target: slot }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(slot instanceof HTMLSlotElement))
+            return;
+        const assigned = slot.assignedElements();
+        this.#validityObservers.syncObservations(assigned, ['value', 'label']);
+        // if (0 < assigned.length)
+        this.#renderValidityMsgs([]);
+    };
+    get #selectedDate() {
         const map = Object.fromEntries(this.#inputs.map(({ name, value }) => [name, value]));
         return {
             year: map.year ?? '',
@@ -166,7 +188,7 @@ export class DatePicker extends FormAssociatedBase {
             day: map.day ?? '',
         };
     }
-    set selection(v) {
+    set #selectedDate(v) {
         for (const input of this.#inputs) {
             const nv = v[input.name] ?? '', pattern = /^(\d+)?$/;
             let finalValue = pattern.test(nv) ? nv : '', parsedValue = parseInt(finalValue);
@@ -178,8 +200,11 @@ export class DatePicker extends FormAssociatedBase {
         }
     }
     #handleClick = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target?.closest('input');
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target } = evt;
+        if (!(target instanceof HTMLElement))
+            return;
+        const input = target.closest('input');
         if (input)
             return;
         this.#shadowRoot.querySelector('input.focus')?.focus?.();
@@ -210,7 +235,7 @@ export class DatePicker extends FormAssociatedBase {
             else
                 this.setValidity({});
         }
-        const selection = `${this.selection.year}-${this.selection.month}-${this.selection.day}`;
+        const selection = `${this.#selectedDate.year}-${this.#selectedDate.month}-${this.#selectedDate.day}`;
         const entries = new FormData();
         entries.append(this.name, selection);
         this.#internals.setFormValue(entries);
@@ -218,9 +243,9 @@ export class DatePicker extends FormAssociatedBase {
             this.dispatchEvent(new CustomEvent('selection', { detail: { selection }, bubbles: true, composed: true }));
     };
     #handleInputPaste = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement))
             return;
         evt.preventDefault();
         const data = [...`${(evt.clipboardData?.getData('text') ?? '').trim()}`].reduce((acc, ch, i) => {
@@ -240,9 +265,9 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputBeforeinput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
-        if (!input)
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
+        const { target: input } = evt;
+        if (!(input instanceof HTMLInputElement))
             return;
         if ('insertText' !== evt.inputType)
             return;
@@ -263,7 +288,9 @@ export class DatePicker extends FormAssociatedBase {
         }
     };
     #handleInputKeydown = ({ type, target, key }) => {
-        console.debug(`${_a.name} ⚡️ ${type}`);
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement))
+            return;
         const input = target;
         if (!input)
             return;
@@ -280,13 +307,15 @@ export class DatePicker extends FormAssociatedBase {
         this.#inputs[index]?.focus();
     };
     #handleInputFocus = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         for (const input of this.#inputs)
             input.classList.toggle('focus', input === evt.target);
     };
-    #handleInputBlur = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        const input = evt.target;
+    #handleInputBlur = ({ target, type }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLInputElement))
+            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');
@@ -296,10 +325,12 @@ export class DatePicker extends FormAssociatedBase {
         this.#sendValueToForm();
     };
     #handleInputInput = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         this.#sendValueToForm();
     };
-    // Optional: form participation properties
+    /**
+     * Form participation property
+     */
     get name() {
         return this.getAttribute('name') ?? this.getAttribute('label') ?? this.querySelector(':scope>[slot=label]')?.textContent ?? '';
     }
@@ -313,6 +344,10 @@ export class DatePicker extends FormAssociatedBase {
             day: (map.day ?? '').padStart(2, '0'),
         };
     }
+    /**
+     * Returns the value as a Date object.
+     * @type {Date|null}
+     */
     get valueAsDate() {
         try {
             const d = new Date(`${this.value.year}-${this.value.month}-${this.value.day}`);
@@ -379,16 +414,16 @@ 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;
-                if (`${kebabCase(key)}` === option.value) {
-                    message = option.label;
+                const { label, value } = el;
+                if (`${kebabCase(key)}` === value) {
+                    message = label;
                     break;
                 }
-                else if (`${kebabCase(key)}:${message}` === option.value) {
-                    message = option.label;
+                else if (`${kebabCase(key)}:${message}` === value) {
+                    message = label;
                     break;
                 }
             }
@@ -401,7 +436,7 @@ export class DatePicker extends FormAssociatedBase {
                 message = kebabCase(key);
                 break;
             }
-        console.debug(`${_a.name} ⚡️ validity-change`);
+        debug(`${_a.name} ⚡️ validity-change`);
         return this.#internals.setValidity(flags, this.#customValidity || message, anchor ?? this.#inputs.at(0));
     };
     setCustomValidity = (message) => {
@@ -411,20 +446,23 @@ export class DatePicker extends FormAssociatedBase {
         else
             this.#sendValueToForm(false);
     };
-    formAssociatedCallback = (form) => {
-        this.#sendValueToForm();
-    };
-    formDisabledCallback = (disabled) => {
+    formStateRestoreCallback(state, reason) {
+        //
+    }
+    formAssociatedCallback(form) {
+        this.#sendValueToForm(false);
+    }
+    formDisabledCallback(disabled) {
         for (const input of this.#inputs)
             input.toggleAttribute('disabled', !disabled);
-    };
-    formResetCallback = () => {
-        this.selection = {
+    }
+    formResetCallback() {
+        this.#selectedDate = {
             year: '',
             month: '',
             day: '',
         };
-        this.#sendValueToForm();
-    };
+        this.#sendValueToForm(false);
+    }
 }
 _a = DatePicker;

package/generated/components/detail-placeholder.d.ts

@@ -0,0 +1,11 @@
+export declare class DetailPlaceholder extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'detail-placeholder': DetailPlaceholder;
+    }
+}

package/generated/components/detail-placeholder.js

@@ -0,0 +1,15 @@
+import { debug } from '../internal/utils';
+export class DetailPlaceholder extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        debug(`${DetailPlaceholder.name} ⚡️ connect`);
+    }
+    disconnectedCallback() {
+        debug(`${DetailPlaceholder.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${DetailPlaceholder.name} ⚡️ attr-change [${name}]`);
+    }
+}

package/generated/components/disclosure-group.d.ts

@@ -1,4 +1,12 @@
 import { DetailsBase } from '../namespace-browser/base';
+/**
+ * @summary A view that shows or hides another view when the user opens or closes it.
+ *
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ *
+ * @fires is-expanded
+ * @fires is-collapsed
+ */
 export declare class DisclosureGroup extends DetailsBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/disclosure-group.js

@@ -1,12 +1,21 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { cssTime, onoff, timeout } from '../internal/utils';
+import { cssTime, debug, onoff, timeout } from '../internal/utils';
 import { DetailsBase } from '../namespace-browser/base';
 const toggleTimers = new WeakMap();
+/**
+ * @summary A view that shows or hides another view when the user opens or closes it.
+ *
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
+ *
+ * @fires is-expanded
+ * @fires is-collapsed
+ */
 export class DisclosureGroup extends DetailsBase {
     static get observedAttributes() {
         return [
             /**
              * The status of this element
+             * @type {boolean}
              */
             'open',
         ];
@@ -15,15 +24,15 @@ export class DisclosureGroup extends DetailsBase {
         super();
     }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
+        debug(`${DisclosureGroup.name} ⚡️ attr-change [${name}]`);
         // if (CSS.supports('interpolate-size', 'allow-keywords')) return
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${DisclosureGroup.name} ⚡️ disconnect`);
+        debug(`${DisclosureGroup.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${DisclosureGroup.name} ⚡️ connect`);
+        debug(`${DisclosureGroup.name} ⚡️ connect`);
         const newValue = el.open ? 'open' : 'closed';
         if (newValue !== el.dataset.state)
             el.dataset.state = newValue;
@@ -33,9 +42,11 @@ export class DisclosureGroup extends DetailsBase {
             toggleTimers.delete(el);
         });
     }
-    static #handleToggle = async (evt) => {
-        console.debug(`${DisclosureGroup.name} ⚡️ ${evt?.type}`);
-        const details = evt.currentTarget, newValue = details.open ? 'opening' : 'closing';
+    static #handleToggle = async ({ type, currentTarget: details }) => {
+        debug(`${DisclosureGroup.name} ⚡️ ${type}`);
+        if (!(details instanceof HTMLDetailsElement))
+            return;
+        const newValue = details.open ? 'opening' : 'closing';
         if (newValue !== details.dataset.state)
             details.dataset.state = newValue;
         if (!toggleTimers.has(details))

package/generated/components/fine-tooltip.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
+ */
+export declare class FineTooltip extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    hidePopover(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'fine-tooltip': FineTooltip;
+    }
+}

package/generated/components/fine-tooltip.js

@@ -0,0 +1,108 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, debug, onoff } from '../internal/utils';
+import { html } from '../tpl';
+/**
+ * @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
+ */
+export class FineTooltip extends HTMLElement {
+    constructor() {
+        super();
+    }
+    #handleTriggerRemovalMutation = (mutations) => {
+        if (this.#queryTrigger?.isConnected)
+            return;
+        this?.remove();
+    };
+    #handleTriggerAttrMutation = (mutations) => {
+        for (const { target, attributeName } of mutations)
+            if (target instanceof HTMLElement && attributeName)
+                this.#render(target.getAttribute(attributeName));
+    };
+    #handleMeasure = ([{ target, borderBoxSize }]) => {
+        debug(`${_a.name} ⚡️ measure`);
+        if (target.hasAttribute('closing'))
+            return;
+        if (!(target instanceof HTMLElement))
+            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');
+        }
+    };
+    #mutationObserver = new MutationObserver(this.#handleTriggerAttrMutation);
+    #mutationObserver2 = new MutationObserver(this.#handleTriggerRemovalMutation);
+    #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($(html `<label-view></label-view>`, '>1'));
+        if (str)
+            label.setAttribute('title', str);
+        else
+            label.removeAttribute('title');
+    };
+    connectedCallback() {
+        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() {
+        debug(`${_a.name} ⚡️ disconnect`);
+        this.#resizeObserver.unobserve(this);
+        this.#mutationObserver?.disconnect();
+        this.#mutationObserver2?.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.#mutationObserver.observe(trigger, {
+                attributes: true,
+                attributeFilter: ['help'],
+            });
+            this.#mutationObserver2.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+            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/form-view.d.ts

@@ -1,6 +1,16 @@
 import { FormBase } from '../namespace-browser/base';
+/**
+ * @summary A container view that groups controls together for entering data, like a settings screen.
+ *
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export declare class FormView extends FormBase {
     constructor();
     static polyfillDisconnectedCallback(el: HTMLFormElement): void;
     static polyfillConnectedCallback(el: HTMLFormElement): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'form-view': FormView;
+    }
+}

package/generated/components/form-view.js

@@ -1,17 +1,22 @@
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { listActive, onoff } from '../internal/utils';
+import { debug, listActive, onoff } from '../internal/utils';
 import { FormBase } from '../namespace-browser/base';
+/**
+ * @summary A container view that groups controls together for entering data, like a settings screen.
+ *
+ * @attr {hidden} navigation-link-indicator-visibility — Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
 export class FormView extends FormBase {
     constructor() {
         super();
     }
     static polyfillDisconnectedCallback(el) {
-        console.debug(`${FormView.name} ⚡️ disconnect`);
+        debug(`${FormView.name} ⚡️ disconnect`);
         // finally
         CleanupRegistry.unregister(el);
     }
     static polyfillConnectedCallback(el) {
-        console.debug(`${FormView.name} ⚡️ connect`);
+        debug(`${FormView.name} ⚡️ connect`);
         if (el.closest('[is=sidebar-view],[is=tab-bar]')) {
             el.method = 'dialog';
             el.noValidate = true;