@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.61

package/generated/components/labeled-content.js

@@ -0,0 +1,115 @@
+import { $, devFlags, renderLabel } from '../internal/utils';
+export class LabeledContent extends HTMLElement {
+    static get observedAttributes() {
+        return ['value', 'label', 'header', 'footer', 'labeled-content-style', 'format'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+    <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) {
+        if (devFlags.debug)
+            console.debug(`${LabeledContent.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        if (oldValue === newValue)
+            return;
+        switch (name) {
+            case 'header':
+                let header = this.querySelector(':scope>[slot=header]');
+                if (newValue) {
+                    const el = header ?? $(`<header slot="header"></header>`, '>1');
+                    renderLabel(el, ':scope>label-view', `<label-view font="callout"><span></span></label-view>`, newValue);
+                    header ??= this.appendChild(el);
+                }
+                else
+                    header?.remove();
+                break;
+            case 'footer':
+                let footer = this.querySelector(':scope>[slot=footer]');
+                if (newValue) {
+                    const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
+                    renderLabel(el, ':scope>label-view', `<label-view font="callout"><span></span></label-view>`, newValue);
+                    footer ??= this.appendChild(el);
+                }
+                else
+                    footer?.remove();
+                break;
+            case 'value':
+                renderLabel(this, ':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this.#fmt(newValue, this.getAttribute('format')));
+                break;
+            case 'format':
+                renderLabel(this, ':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this.#fmt(this.getAttribute('value'), newValue));
+                break;
+            case 'label':
+                renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${LabeledContent.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.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 = navigator.language, opts = {}] = format.split(':', 3), loc = new Intl.Locale(locale), 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"
+            // "Foo, Bar, and Baz"
+            default:
+                return value;
+        }
+    };
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
+export declare class ListView extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/list-view.js

@@ -0,0 +1,32 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, listActive, onoff } from '../internal/utils';
+/**
+ * @attr {hidden} navigation-link-indicator-visibility - Hides accessories like right-arrow-chevron on NavigationLink buttons inside.
+ */
+export class ListView extends HTMLElement {
+    // static #template: DocumentFragment
+    // static get template() {
+    //   return (this.#template ??= $(
+    //     String.raw`
+    //   <slot name="searchable"></slot>
+    //   <slot></slot>
+    //   `
+    //   ))
+    // }
+    // #shadowRoot
+    constructor() {
+        super();
+        // this.#shadowRoot = this.attachShadow({ mode: 'closed' })
+        // this.#shadowRoot.appendChild(document.importNode((this.constructor as typeof ListView).template, true))
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ListView.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ListView.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff(listActive(this), this).on());
+    }
+}

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

@@ -0,0 +1,12 @@
+/**
+ * @summary A control for presenting a menu of actions.
+ */
+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;
+}

package/generated/components/menu-view.js

@@ -0,0 +1,142 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, devFlags, onoff, renderLabel, touchGlass } from '../internal/utils';
+/**
+ * @summary A control for presenting a menu of actions.
+ */
+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>`));
+    }
+    #shadowRoot;
+    #dialog;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.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) {
+                    if (devFlags.debug)
+                        console.debug(`${_a.name} ⚡️ will-close`);
+                    this.setAttribute('closing', '');
+                    Promise.allSettled(this.#dialog.getAnimations().map(({ finished }) => finished)).then(() => {
+                        if (!this.hasAttribute('closing'))
+                            return;
+                        this.#dialog?.close();
+                        this.removeAttribute('closing');
+                    });
+                }
+                if ('' === newValue && !this.#dialog.open) {
+                    if (devFlags.debug)
+                        console.debug(`${_a.name} ⚡️ will-open`);
+                    this.removeAttribute('closing');
+                    const form = this.#shadowRoot.querySelector('form');
+                    form.scrollTop = 0;
+                    this.#dialog.showModal();
+                }
+                break;
+            case 'label':
+                renderLabel(this, ':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, newValue);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            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() {
+        if (devFlags.debug)
+            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, ({ 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 }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
+            return;
+        if (target.matches('dialog'))
+            return this.toggleAttribute('open', false); // click outside
+        target.scrollIntoView({
+            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant',
+            block: 'nearest',
+            inline: 'nearest',
+        });
+        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) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.toggleAttribute('open', true);
+    };
+    // intercept to modify open attr
+    #handleDialogCancel = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (!evt.cancelable)
+            return;
+        evt.preventDefault();
+        this.toggleAttribute('open', false);
+    };
+    #handleDialogClose = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        this.toggleAttribute('open', this.#shadowRoot.querySelector('dialog')?.open ?? false);
+    };
+}
+_a = MenuView;

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

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

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

@@ -0,0 +1,181 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { CSSStyleObserver } from '../internal/class/css-style-observer';
+import { add, devFlags, frame, onoff, slowHideShow, timeout } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+const observing = new WeakSet();
+function observeResizeEnd(el, callback, stableFrames = 4) {
+    let rafId = null;
+    let lastRect = el.getBoundingClientRect();
+    let stableCount = 0;
+    function check() {
+        const rect = el.getBoundingClientRect();
+        if (rect.width === lastRect.width && rect.height === lastRect.height) {
+            stableCount++;
+        }
+        else {
+            stableCount = 0;
+            lastRect = rect;
+        }
+        if (stableCount >= stableFrames) {
+            rafId = null;
+            callback(rect);
+            return;
+        }
+        rafId = self.requestAnimationFrame(check);
+    }
+    const observer = new ResizeObserver(() => {
+        stableCount = 0;
+        if (rafId === null) {
+            lastRect = el.getBoundingClientRect();
+            rafId = self.requestAnimationFrame(check);
+        }
+    });
+    observer.observe(el);
+    return () => {
+        observer.disconnect();
+        if (rafId)
+            self.cancelAnimationFrame(rafId);
+    };
+}
+function parseRootMargin(rootMargin = '0px 0px 0px 0px') {
+    const parts = rootMargin.split(/\s+/).map((v) => parseInt(v));
+    switch (parts.length) {
+        case 1:
+            return [parts[0], parts[0], parts[0], parts[0]];
+        case 2:
+            return [parts[0], parts[1], parts[0], parts[1]];
+        case 3:
+            return [parts[0], parts[1], parts[2], parts[1]];
+        case 4:
+            return parts;
+        default:
+            return [0, 0, 0, 0];
+    }
+}
+function isIntersectingWithContainer(el, container, rootMargin = '0px 0px 0px 0px') {
+    if (!(el instanceof Element) || !(container instanceof Element))
+        return false;
+    const elRect = el.getBoundingClientRect();
+    const contRect = container.getBoundingClientRect();
+    const [topMargin, rightMargin, bottomMargin, leftMargin] = parseRootMargin(rootMargin);
+    const marginRect = {
+        top: contRect.top + topMargin,
+        right: contRect.right - rightMargin,
+        bottom: contRect.bottom - bottomMargin,
+        left: contRect.left + leftMargin,
+    };
+    return !(elRect.bottom < marginRect.top || elRect.top > marginRect.bottom || elRect.right < marginRect.left || elRect.left > marginRect.right);
+}
+export class NavigationLargeTitle extends HTMLElement {
+    #styleObserver;
+    #scrollObserver;
+    #scrollSafetyTimer = timeout();
+    #rootMarginTop = '0px';
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        this.#clearScrollState();
+        this.#styleObserver?.disconnect();
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        const root = this.closest('scroll-view') ?? undefined;
+        if (!root)
+            return;
+        if (!root?.hasAttribute('navigation-bar-title-display-mode'))
+            root?.setAttribute('navigation-bar-title-display-mode', 'large');
+        frame(this).then(() => {
+            // if (!r) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
+            this.#styleObserver = new CSSStyleObserver();
+            this.#styleObserver.observe(this, this.#handleStyleChange);
+            Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange)); //Snapshot.waitReady.then(this.#handleStyleChange)
+            // this.#observer?.observe(this)
+            CleanupRegistry.register(this, onoff([
+                { types: 'scroll', listener: this.#handleScroll, addOptions: { passive: true } },
+                { types: 'scrollend', listener: this.#handleScrollend, addOptions: { passive: true } },
+            ], root).on());
+            observeResizeEnd(root, () => {
+                const isIntersecting = isIntersectingWithContainer(this, root, `${this.#rootMarginTop} 0px 0px 0px`);
+                this.#applySlowness(root, isIntersecting);
+            });
+        });
+    }
+    #handleStyleChange = () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
+        const root = this.closest('scroll-view') ?? undefined;
+        if (!root)
+            return;
+        const style = self.getComputedStyle(this);
+        const blockSizeProp = style.getPropertyValue('--navigation-bar-block-size') || '0', //`${document.documentElement.computedStyleMap().get(`--navigation-bar-block-size`) ?? '0'}`, //
+        blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(style.getPropertyValue('--root-font-size')) || 16 : 1);
+        // blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(self.getComputedStyle(document.documentElement).fontSize) : 1)
+        const rootMarginTop = `${blockSize}px`;
+        if (this.#rootMarginTop === rootMarginTop)
+            return;
+        this.#rootMarginTop = rootMarginTop;
+        // Tear down old observer cleanly before replacing it
+        const wasObserving = observing.delete(this);
+        this.#scrollObserver?.disconnect();
+        this.#scrollObserver = new IntersectionObserver(this.#handleIntersect, {
+            root,
+            rootMargin: `-${this.#rootMarginTop} 0px 0px 0px`,
+            threshold: [0, 1],
+        });
+        // Re-observe immediately if we were mid-scroll
+        if (wasObserving) {
+            observing.add(this);
+            this.#scrollObserver.observe(this);
+        }
+    };
+    #clearScrollState = () => {
+        if (observing.delete(this))
+            this.#scrollObserver?.unobserve(this);
+        this.#scrollSafetyTimer.cancel();
+    };
+    #handleScroll = (evt) => {
+        if (add(observing, this))
+            this.#scrollObserver?.observe(this);
+        this.#scrollSafetyTimer.next(() => this.#clearScrollState(), 2000); // reset watchdog every scroll event
+    };
+    #handleScrollend = (evt) => {
+        this.#clearScrollState();
+    };
+    // #handleResizeend: EventListener = (evt: Event) => {
+    //   const root = evt.target as HTMLElement
+    //   const isIntersecting = isIntersectingWithContainer(this, root, `${this.#rootMarginTop} 0px 0px 0px`)
+    //   this.#applySlowness(root, isIntersecting)
+    // }
+    #handleIntersect = (entries, { root }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ intersect (${entries?.at(0)?.isIntersecting})`);
+        if (!(root instanceof HTMLElement))
+            return;
+        for (const { isIntersecting } of entries)
+            this.#applySlowness(root, isIntersecting);
+        // for (const { isIntersecting } of entries) {
+        //   const value = isIntersecting ? 'large' : 'inline'
+        //   if (value === root?.getAttribute('navigation-bar-title-display-mode')) continue
+        //   root?.setAttribute('navigation-bar-title-display-mode', value)
+        //   if (this.closest('[hidden]')) continue // if (0 === this.offsetHeight + this.offsetWidth) continue
+        //   if (this.hasAttribute('navigation-bar-auto-hide')) slowHideShow(isIntersecting ? 'show' : 'hide', this)
+        // }
+    };
+    #applySlowness = (root, isIntersecting) => {
+        const value = isIntersecting ? 'large' : 'inline';
+        if (this.closest('[hidden]'))
+            return; // if (0 === this.offsetHeight + this.offsetWidth) continue
+        if (value === root?.getAttribute('navigation-bar-title-display-mode'))
+            return;
+        root?.setAttribute('navigation-bar-title-display-mode', value);
+        if (this.hasAttribute('navigation-bar-auto-hide'))
+            slowHideShow(isIntersecting ? 'show' : 'hide', this);
+    };
+}
+_a = NavigationLargeTitle;

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

@@ -1,5 +1,10 @@
-export declare class NavigationSplitView extends HTMLElement {
-    static observedAttributes: string[];
+import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
+export declare class NavigationSplitView extends NavigationView {
     constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
+    connectedCallback(): void;
 }

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

@@ -1,9 +1,25 @@
-export class NavigationSplitView extends HTMLElement {
+import { NavigationView } from '../internal/class/navigation-view';
+import { devFlags } from '../internal/utils';
+/**
+ * @summary A view with two or three side-by-side sections, where what you choose in the left section changes what appears in the next section.
+ */
+export class NavigationSplitView extends NavigationView {
     constructor() {
         super();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${NavigationSplitView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
     disconnectedCallback() {
-        console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${NavigationSplitView.name} ⚡️ disconnect`);
+        super.disconnectedCallback();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${NavigationSplitView.name} ⚡️ connect`);
+        super.connectedCallback();
     }
 }
-NavigationSplitView.observedAttributes = ['hidden'];

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

@@ -1,6 +1,10 @@
-export declare class NavigationStack extends HTMLElement {
-    static observedAttributes: string[];
+import { NavigationView } from '../internal/class/navigation-view';
+/**
+ * @summary A view that shows a main screen and lets you 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;
 }

package/generated/components/navigation-stack.js

@@ -1,67 +1,31 @@
-export class NavigationStack extends HTMLElement {
+import { NavigationView } from '../internal/class/navigation-view';
+import { devFlags } from '../internal/utils';
+/**
+ * @summary A view that shows a main screen and lets you open other screens on top of it.
+ */
+export class NavigationStack extends NavigationView {
     constructor() {
         super();
-        /* const shadowRoot = this.attachShadow({ mode: 'open' })
-        shadowRoot.appendChild(
-          document.importNode(this.constructor.template.content, true)
-        )
-        const slot = shadowRoot.querySelector('slot')!
-    
-        slot.addEventListener('slotchange', () => {
-          const sv = this.querySelector<HTMLElement>(':scope > scroll-view')
-          if (!sv) return
-    
-          const st = parseInt(sv?.dataset?.scrolltop ?? '0')
-    
-          requestAnimationFrame(() => (sv.scrollTop = st))
-        }) */
-        // const template = document.createElement('template')
-        // template.innerHTML = this.constructor.#template
-        // const template = document.getElementById('element-details-template')
-        // // Named slot for toolbar
-        // const toolbarSlot = document.createElement('slot');
-        // toolbarSlot.name = 'toolbar';
-        // // Default slot for everything else
-        // const defaultSlot = document.createElement('slot');
-        // shadow.appendChild(toolbarSlot);
-        // shadow.appendChild(defaultSlot);
-        // this.attachShadow({ mode: 'open' }).append(template.content.cloneNode(true))
-        ////this.constructor.template.content.cloneNode(true)
-        // shadowRoot.appendChild(document.importNode(template.content, true))
-        // alert(9)
-        // const t = this
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${NavigationStack.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        super.attributeChangedCallback(name, oldValue, newValue);
+        // Snapshot.waitReady.then(() => {
+        switch (name) {
+            case 'hidden':
+                break;
+        }
+        // })
     }
     disconnectedCallback() {
-        console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+        if (devFlags.debug)
+            console.debug(`${NavigationStack.name} ⚡️ disconnect`);
+        super.disconnectedCallback();
     }
     connectedCallback() {
-        // this.attachShadow({ mode: "open" });
-        // this.shadowRoot.innerHTML = NavigationStack.template;
-        // Access slotted elements
-        // const toolbarSlot = this.shadowRoot.querySelector('slot[name="toolbar"]');
-        // const defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
-        // // Get assigned nodes
-        // const toolbarNodes = toolbarSlot.assignedNodes({ flatten: true });
-        // const defaultNodes = defaultSlot.assignedNodes({ flatten: true });
-        // console.log('Toolbar nodes:', toolbarNodes);
-        // console.log('Default nodes:', defaultNodes);
-        // const starRating = document.getElementById('star-rating-template').content;
-        //   const shadowRoot = this.attachShadow({
-        //     mode: 'open'
-        //   });
-        //   shadowRoot.appendChild(starRating.cloneNode(true));
-        // this.innerHTML = `<div>gh</div><slot name="toolbar"><legend>Rate your experience:</legend></slot>`
-        // this.appendChild(slottedToolbar)
-        // console.log(99)
-        // this.innerHTML = `
-        //   <header>
-        //     <label>New</label>
-        //   </header>
-        //   <p>
-        //     <h2>Welcome to the new page!</h2>
-        //   </p>
-        //   ${this.innerHTML}
-        // `;
+        if (devFlags.debug)
+            console.debug(`${NavigationStack.name} ⚡️ connect`);
+        super.connectedCallback();
     }
 }
-NavigationStack.observedAttributes = ['hidden'];

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

@@ -0,0 +1,8 @@
+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;
+}