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

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;
+    }
+}

package/generated/components/navigation-large-title.js

@@ -1,7 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { add, frame, onoff, slowHideShow, timeout } from '../internal/utils';
+import { add, debug, frame, onoff, slowHideShow, timeout } from '../internal/utils';
 import { Snapshot } from '../snapshot';
 const observing = new WeakSet();
 function observeResizeEnd(el, callback, stableFrames = 4) {
@@ -67,6 +67,12 @@ function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0p
     };
     return !(elRect.bottom < marginRect.top || elRect.top > marginRect.bottom || elRect.right < marginRect.left || elRect.left > marginRect.right);
 }
+/**
+ *
+ * @attr {boolean} padding
+ * @attr {boolean} navigation-bar-auto-hide
+ *
+ */
 export class NavigationLargeTitle extends HTMLElement {
     #styleObserver;
     #scrollObserver;
@@ -76,13 +82,13 @@ export class NavigationLargeTitle extends HTMLElement {
         super();
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         this.#clearScrollState();
         this.#styleObserver?.disconnect();
         CleanupRegistry.unregister(this);
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -105,7 +111,7 @@ export class NavigationLargeTitle extends HTMLElement {
         });
     }
     #handleStyleChange = () => {
-        console.debug(`${_a.name} ⚡️ style`);
+        debug(`${_a.name} ⚡️ style`);
         const root = this.closest('scroll-view') ?? undefined;
         if (!root)
             return;
@@ -150,7 +156,7 @@ export class NavigationLargeTitle extends HTMLElement {
     //   this.#applySlowness(root, isIntersecting)
     // }
     #handleIntersect = (entries, { root }) => {
-        console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
         if (!(root instanceof HTMLElement))
             return;
         for (const { isIntersecting } of entries)

package/generated/components/navigation-split-view.d.ts

@@ -1,7 +1,15 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
+ */
 export declare class NavigationSplitView extends NavigationView {
     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 {
+        'navigation-split-view': NavigationSplitView;
+    }
 }

package/generated/components/navigation-split-view.js

@@ -1,18 +1,22 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view with two or three side-by-side screens, where what the user chooses in the left screen changes what appears in the next screen.
+ */
 export class NavigationSplitView extends NavigationView {
     constructor() {
         super();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
     disconnectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        debug(`${NavigationSplitView.name} ⚡️ disconnect`);
         super.disconnectedCallback();
     }
     connectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        debug(`${NavigationSplitView.name} ⚡️ connect`);
         super.connectedCallback();
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
-        super.attributeChangedCallback(name, oldValue, newValue);
-    }
 }

package/generated/components/navigation-stack.d.ts

@@ -1,7 +1,15 @@
 import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A container view that shows a main screen and lets the user open other screens on top of it.
+ */
 export declare class NavigationStack extends NavigationView {
     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 {
+        'navigation-stack': NavigationStack;
+    }
 }

package/generated/components/navigation-stack.js

@@ -1,24 +1,26 @@
 import { NavigationView } from '../internal/class/navigation-view';
+import { debug } from '../internal/utils';
+/**
+ * @summary A container view that shows a main screen and lets the user open other screens on top of it.
+ */
 export class NavigationStack extends NavigationView {
     constructor() {
         super();
     }
-    disconnectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ disconnect`);
-        super.disconnectedCallback();
-    }
-    connectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ connect`);
-        super.connectedCallback();
-    }
     attributeChangedCallback(name, oldValue, newValue) {
-        console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         super.attributeChangedCallback(name, oldValue, newValue);
-        // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'hidden':
                 break;
         }
-        // })
+    }
+    disconnectedCallback() {
+        debug(`${NavigationStack.name} ⚡️ disconnect`);
+        super.disconnectedCallback();
+    }
+    connectedCallback() {
+        debug(`${NavigationStack.name} ⚡️ connect`);
+        super.connectedCallback();
     }
 }

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

@@ -1,8 +1,18 @@
+/**
+ * @summary A container view.
+ *
+ * @attr {boolean} padding
+ */
 export declare class NavigationTitle extends HTMLElement {
     #private;
     static get observedAttributes(): string[];
     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 {
+        'navigation-title': NavigationTitle;
+    }
 }