@swiftwc/ui 0.0.0-dev.4 → 0.0.0-dev.41

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

@@ -0,0 +1,7 @@
+import { ButtonBase } from '../namespace-browser/base';
+export declare class PlainButton extends ButtonBase {
+    #private;
+    constructor();
+    static polyfillDisconnectedCallback(el: PlainButton): void;
+    static polyfillConnectedCallback(el: PlainButton): void;
+}

package/generated/components/plain-button.js

@@ -0,0 +1,22 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff } from '../internal/utils';
+import { ButtonBase } from '../namespace-browser/base';
+export class PlainButton extends ButtonBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${PlainButton.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${PlainButton.name} ⚡️ connect`);
+        el.tabIndex = 0;
+        CleanupRegistry.register(el, onoff('click', PlainButton.#handleClick, el).on());
+    }
+    static #handleClick = async (evt) => {
+        // alert(99)
+    };
+}

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

@@ -0,0 +1,13 @@
+/**
+ *
+ */
+export declare class ProgressView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get progressViewStyle(): "circular" | "linear";
+    get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/progress-view.js

@@ -0,0 +1,125 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { CSSStyleObserver } from '../internal/class/css-style-observer';
+import { $, devFlags } from '../internal/utils';
+import { Snapshot } from '../snapshot';
+const progressViewStyles = ['circular', 'linear'];
+/**
+ *
+ */
+export class ProgressView extends HTMLElement {
+    static get observedAttributes() {
+        return ['label', 'current-value-label', 'value'];
+    }
+    static #templates = new Map();
+    #cssStyleObserver;
+    #progressViewStyle;
+    #lastRenderedStyle;
+    #shadowRoot;
+    #slots = new Map();
+    get progressViewStyle() {
+        return this.#progressViewStyle ?? 'circular';
+    }
+    get template() {
+        if (!_a.#templates.has(this.progressViewStyle))
+            switch (this.progressViewStyle) {
+                case 'linear':
+                    _a.#templates.set(this.progressViewStyle, $(String.raw `
+            <slot></slot>
+            <div part="root progress-control progress-line-control"></div>
+            <slot name="current-value"></slot>
+            `));
+                    break;
+                case 'circular':
+                default:
+                    _a.#templates.set(this.progressViewStyle, $(String.raw `
+            <div part="root progress-control progress-circular-control">
+              <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
+              <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
+            </div>
+            <slot></slot>
+            <slot name="current-value"></slot>
+            `));
+                    break;
+            }
+        return _a.#templates.get(this.progressViewStyle);
+    }
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        this.#cssStyleObserver = new CSSStyleObserver({
+            properties: ['--progress-view-style-index'],
+        });
+        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
+        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'label': {
+                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view foreground="secondary"></label-view>`, '>1'));
+                if (newValue) {
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label.removeAttribute('title');
+                break;
+            }
+            case 'current-value-label': {
+                let label = this.querySelector(':scope>[slot=current-value]');
+                if (newValue) {
+                    label ??= this.appendChild($(`<label-view slot="current-value" font="callout" foreground="secondary"></label-view>`, '>1'));
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label?.remove();
+                break;
+            }
+        }
+    }
+    #handleStyleChange = () => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ style`);
+        const raw = self.getComputedStyle(this).getPropertyValue('--progress-view-style-index').trim();
+        const newValue = progressViewStyles[Number(raw)] ?? progressViewStyles[0];
+        if (newValue === this.#progressViewStyle)
+            return;
+        this.#progressViewStyle = newValue;
+        this.#render();
+    };
+    #render() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ render (${this.#progressViewStyle})`);
+        if (this.#lastRenderedStyle === this.#progressViewStyle)
+            return; // skip if already applied
+        this.#lastRenderedStyle = this.#progressViewStyle;
+        this.#shadowRoot.replaceChildren(document.importNode(this.template, true)); // clear shadow DOM
+        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');
+        switch (this.#progressViewStyle
+        //
+        ) {
+        }
+    }
+}
+_a = ProgressView;

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

@@ -0,0 +1,5 @@
+import { DialogBase } from '../namespace-browser/base';
+export declare class ScreenView extends DialogBase {
+    constructor();
+    disconnectedCallback(): void;
+}

package/generated/components/screen-view.js

@@ -0,0 +1,11 @@
+import { devFlags } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+export class ScreenView extends DialogBase {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ScreenView.name} ⚡️ disconnect`);
+    }
+}

package/generated/components/scroll-view-proxy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @summary A wrapper to {hv}-stacks
+ */
+export declare class ScrollViewProxy extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}

package/generated/components/scroll-view-proxy.js

@@ -0,0 +1,17 @@
+import { devFlags } from '../internal/utils';
+/**
+ * @summary A wrapper to {hv}-stacks
+ */
+export class ScrollViewProxy extends HTMLElement {
+    constructor() {
+        super();
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ScrollViewProxy.name} ⚡️ disconnect`);
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ScrollViewProxy.name} ⚡️ connect`);
+    }
+}

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

@@ -0,0 +1,10 @@
+export declare class ScrollView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    centerScrollToElement(child: Element): void;
+}

package/generated/components/scroll-view.js

@@ -0,0 +1,202 @@
+var _a;
+import { lifecycleObserver } from '../buses';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
+import { $, devFlags, frame, onoff, slowHideShow } from '../internal/utils';
+const observers = new ResizeObserverSingleton();
+export class ScrollView extends HTMLElement {
+    static get observedAttributes() {
+        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-bar-title-display-mode'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+  <slot></slot>
+  <div part="root scroll-view-navbar">
+    <div part="root scroll-view-navbar-stack">
+      <slot name="top-bar-principal"></slot>
+    </div>
+  </div>
+  <div part="root scroll-view-toolbar">
+    <div part="root scroll-view-toolbar-stack">
+      <slot name="bottom-bar-principal"></slot>
+    </div>
+  </div>`));
+    }
+    #shadowRoot;
+    #slots = new Map();
+    // #navbarPrincipalSlot?: HTMLSlotElement
+    #isMidScroll;
+    #lastScrollTop = 0;
+    // #stopRecordingScrollTop?: boolean = false
+    #beforeTabSwapLastScrolltop;
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+        observers.unobserve(this);
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ connect`);
+        CleanupRegistry.register(this, onoff([
+            // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
+            { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
+        ], this.closest('tab-view') ?? undefined).on());
+        CleanupRegistry.register(this, onoff([
+            { types: 'scroll', listener: this.#handleScroll, addOptions: { passive: true } },
+            { types: 'scrollend', listener: this.#handleScrollend, addOptions: { passive: true } },
+        ], this).on());
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pageshow', { detail: { page: this }, bubbles: true, composed: true })));
+        observers.observe(this, this.#handleMeasure.bind(this));
+        // frame(this).then((r) => {
+        //   if (!r) return
+        //   let first = true
+        //   observeResizeEnd(this, () => {
+        //     if (first) {
+        //       first = false
+        //       return
+        //     }
+        //     this.dispatchEvent(new CustomEvent('resizeend', { bubbles: true, composed: true }))
+        //   })
+        // })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'navigation-inline-title':
+                this.#renderNavTitle(newValue, this.getAttribute('navigation-inline-subtitle'));
+                break;
+            case 'navigation-inline-subtitle':
+                this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
+                break;
+            case 'navigation-title':
+                //
+                break;
+            case 'navigation-bar-title-display-mode':
+                if (oldValue === newValue)
+                    break;
+                if (this.closest('[hidden]'))
+                    break; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
+                if (!this.#isMidScroll)
+                    break;
+                const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
+                slowHideShow('largeinline' === `${oldValue}${newValue}` ? 'show' : 'hide', title);
+                break;
+        }
+    }
+    #handleScroll = ({ target, type }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!this.#isMidScroll)
+            this.#isMidScroll = true;
+        // if (this.#stopRecordingScrollTop) return
+        if (!(target instanceof HTMLElement && target))
+            return;
+        this.#lastScrollTop = target.scrollTop;
+    };
+    #handleScrollend = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        if (this.#isMidScroll)
+            this.#isMidScroll = false;
+    };
+    #handleMeasure = (entry) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ measure`);
+        if (0 === entry.contentRect.width + entry.contentRect.height)
+            return;
+        if (undefined === this.#beforeTabSwapLastScrolltop)
+            return;
+        if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop)
+            return;
+        // this.#stopRecordingScrollTop = true
+        entry.target.scrollTop = this.#beforeTabSwapLastScrolltop;
+        // entry.target.scrollTo({
+        //   top: this.#beforeTabSwapLastScrolltop,
+        //   behavior: 'smooth',
+        // }) //
+        // this.#stopRecordingScrollTop = false
+        this.#beforeTabSwapLastScrolltop = undefined;
+    };
+    #handleTabReveal = ({ type, target }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement && target))
+            return;
+        if (!target.contains(this))
+            return;
+        if (this.closest('[hidden]'))
+            return;
+        // console.log(888, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
+        // this.style.setProperty('clip-path', 'inset(50%)')
+        // this.style.setProperty('opacity', '0.001')
+        // this.style.opacity = '0.001'
+        // console.log(99, this.style.opacity)
+        // self.requestAnimationFrame(() => {
+        //   if (undefined === this.#beforeTabSwapLastScrolltop) return
+        //   if (this.#beforeTabSwapLastScrolltop === this.#lastScrollTop) return
+        //   this.#stopRecordingScrollTop = true
+        //   // console.log(999, this.#beforeTabSwapLastScrolltop)
+        //   // console.log(999, this, this.#beforeTabSwapLastScrolltop, this.#lastScrollTop)
+        //   this.scrollTop = this.#beforeTabSwapLastScrolltop
+        //   // this.scrollTo({
+        //   //   top: this.#beforeTabSwapLastScrolltop,
+        //   //   behavior: 'instant',
+        //   // }) //
+        //   this.#stopRecordingScrollTop = false
+        //   this.#beforeTabSwapLastScrolltop = undefined
+        //   // self.requestAnimationFrame(() => {
+        //   //   // this.style.removeProperty('opacity')
+        //   // })
+        // })
+    };
+    #handleTabBeforeswap = ({ type, target }) => {
+        if (devFlags.debug)
+            console.debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement && target))
+            return;
+        if (!target.contains(this))
+            return;
+        if (this.closest('[hidden]'))
+            return;
+        this.#beforeTabSwapLastScrolltop = this.scrollTop; //#lastScrollTop
+    };
+    centerScrollToElement(child) {
+        // scrollTop needed to center child
+        const parentRect = this.getBoundingClientRect(), childRect = child.getBoundingClientRect();
+        // current scroll + offset of child relative to parent
+        const top = this.scrollTop + childRect.top - parentRect.top - parentRect.height / 2 + childRect.height / 2;
+        this.scrollTo({
+            top,
+            behavior: self.matchMedia('(prefers-reduced-motion: no-preference)').matches ? 'smooth' : 'instant', // optional: smooth scroll
+        });
+    }
+    #renderNavTitle = (title, subtitle) => {
+        const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"></label-view>`;
+        const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'));
+        const titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)') ?? vStack.appendChild($(titleTemplate, '>1'));
+        if (title)
+            titleLabel.setAttribute('title', title);
+        else
+            titleLabel?.removeAttribute('title');
+        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)') ?? vStack.appendChild($(subtitleTemplate, '>1'));
+        if (subtitle)
+            subtitleLabel.setAttribute('title', subtitle);
+        else
+            subtitleLabel?.removeAttribute('title');
+    };
+}
+_a = ScrollView;

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

@@ -0,0 +1,8 @@
+import { InputBase } from '../namespace-browser/base';
+export declare class SearchView extends InputBase {
+    static get observedAttributes(): string[];
+    constructor();
+    static polyfillDisconnectedCallback(el: InputBase): void;
+    static polyfillConnectedCallback(el: InputBase): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

package/generated/components/search-view.js

@@ -0,0 +1,30 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff, touchGlass } from '../internal/utils';
+import { InputBase } from '../namespace-browser/base';
+export class SearchView extends InputBase {
+    static get observedAttributes() {
+        return ['role', 'title-key'];
+    }
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${SearchView.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${SearchView.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff(touchGlass(el, (t) => t, () => true), el).on());
+        el.type = 'search';
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${SearchView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        const node = target instanceof HTMLInputElement && target;
+        if (!node)
+            return;
+        //
+    }
+}

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

@@ -0,0 +1,9 @@
+export declare class SectionView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    static get template(): DocumentFragment;
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/section-view.js

@@ -0,0 +1,83 @@
+import { $, devFlags } from '../internal/utils';
+export class SectionView extends HTMLElement {
+    static get observedAttributes() {
+        return ['header', 'footer'];
+    }
+    static #template;
+    static get template() {
+        return (this.#template ??= $(String.raw `
+  <div part="root section-main-stack">
+    <slot></slot>
+  </div>
+  <div part="root section-header-stack">
+    <slot name="header"></slot>
+  </div>
+  <div part="root section-footer-stack">
+    <slot name="footer"></slot>
+  </div>`));
+        // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
+    }
+    #shadowRoot;
+    // #observer?: IntersectionObserver
+    // #sibling?: HTMLElement
+    // #sentinel?: HTMLElement
+    // #sentinelIsIntersecting: boolean = false
+    // #isIntersecting: boolean = false
+    constructor() {
+        super();
+        this.#shadowRoot = this.attachShadow({ mode: 'closed' });
+        // Snapshot.waitReady.then(() => {
+        this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
+        // this.#sentinel = this.#shadowRoot.querySelector('.sticky-sentinel') ?? undefined
+        // })
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ disconnect`);
+        // if (this.#sentinel) this.#observer?.unobserve(this.#sentinel)
+        // this.#observer?.unobserve(this)
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ connect`);
+        // this.#sibling = this.closest('scroll-view') ?? undefined
+        // Snapshot.waitReady.then(() => {
+        // if (!(await frame(this))) return // NOTE: Required or BREAKS transitions  // self.requestAnimationFrame(() => {
+        // const blockSizeProp = getComputedStyle(this).getPropertyValue('--navigation-bar-block-size') || '0', //`${document.documentElement.computedStyleMap().get(`--navigation-bar-block-size`) ?? '0'}`, //
+        //   blockSize = parseFloat(blockSizeProp) * (blockSizeProp.endsWith('rem') ? parseFloat(getComputedStyle(document.documentElement).fontSize) : 1)
+        // this.#observer = new IntersectionObserver(this.#handleIntersect, {
+        //   root: this.#sibling,
+        //   rootMargin: `-${blockSize}px 0px 0px 0px`,
+        //   threshold: [0, 1],
+        // })
+        // if (this.#sentinel) this.#observer.observe(this.#sentinel)
+        // this.#observer.observe(this)
+        // })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${SectionView.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        // Snapshot.waitReady.then(() => {
+        switch (name) {
+            case 'header':
+                let header = this.querySelector(':scope>[slot=header]');
+                if (newValue) {
+                    header ??= this.appendChild($(`<header slot="header"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></header>`, '>1'));
+                    header.querySelector('label-view')?.setAttribute('title', newValue);
+                }
+                else
+                    header?.remove();
+                break;
+            case 'footer':
+                let footer = this.querySelector(':scope>[slot=footer]');
+                if (newValue) {
+                    footer ??= this.appendChild($(`<footer slot="footer"><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></footer>`, '>1'));
+                    footer.querySelector('label-view')?.setAttribute('title', newValue);
+                }
+                else
+                    footer?.remove();
+                break;
+        }
+        // })
+    }
+}

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

@@ -0,0 +1,8 @@
+import { DialogBase } from '../namespace-browser/base';
+export declare class SheetView extends DialogBase {
+    #private;
+    constructor();
+    static polyfillDisconnectedCallback(el: SheetView): void;
+    static polyfillConnectedCallback(el: SheetView): void;
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]: Pick<MutationRecord, 'attributeName' | 'oldValue' | 'target'>[]): void;
+}

package/generated/components/sheet-view.js

@@ -0,0 +1,62 @@
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { devFlags, onoff } from '../internal/utils';
+import { DialogBase } from '../namespace-browser/base';
+export class SheetView extends DialogBase {
+    constructor() {
+        super();
+    }
+    static polyfillDisconnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(el);
+    }
+    static polyfillConnectedCallback(el) {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ connect`);
+        CleanupRegistry.register(el, onoff([
+            { types: 'cancel', listener: this.#handleCancel },
+            { types: 'keydown', listener: SheetView.#handleKeydown },
+        ], el).on());
+        el.autofocus = true;
+    }
+    static polyfillAttributeChangedCallback([{ attributeName, target, oldValue }]) {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ attr-change [${attributeName}] ("${oldValue}" → "${target.getAttribute(attributeName ?? '')}")`);
+        // // NOTE: wait for config
+        // Snapshot.waitReady.then(() => {
+        //   switch (attributeName) {
+        //     case 'fine-presentation-large-adaptation':
+        //       const node = target instanceof HTMLDialogElement && target
+        //       if (!node) break
+        //       CleanupRegistry.unregister(node, 'mediaquery')
+        //       if ('bottom-bar' !== target.getAttribute(attributeName ?? '')) break
+        //       const mediaQueryList = self.matchMedia(`(pointer: fine) and (min-width: ${Snapshot.config!['ipad-sheet-view-inline-size']}) and (min-height: ${Snapshot.config!['ipad-sheet-view-height']})`)
+        //       SheetView.#handleMediaChange(
+        //         node,
+        //         new MediaQueryListEvent(`media-change`, {
+        //           matches: mediaQueryList.matches,
+        //         })
+        //       ) // Initial check
+        //       const handler1 = SheetView.#handleMediaChange.bind(null, node)
+        //       CleanupRegistry.register(node, onoff('change', handler1 as unknown as EventListener, mediaQueryList).on(), 'mediaquery')
+        //       break
+        //   }
+        // })
+    }
+    static #handleKeydown = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.key})`);
+        if ('Escape' !== evt.key)
+            return;
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+        evt.stopPropagation();
+    };
+    static #handleCancel = (evt) => {
+        if (devFlags.debug)
+            console.debug(`${SheetView.name} ⚡️ ${evt?.type} (${evt.cancelable})`);
+        if (!evt.cancelable)
+            return;
+        evt.preventDefault();
+    };
+}

package/generated/components/sidebar-toggle.d.ts

@@ -0,0 +1,7 @@
+export declare class SidebarToggle extends HTMLElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private static query;
+}