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

package/generated/components/plain-button.js

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

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

@@ -0,0 +1,20 @@
+/**
+ * @summary A view that shows how far along a task is.
+ *
+ * @slot — The default slot.
+ * @slot current-value
+ */
+export declare class ProgressView extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get progressViewStyle(): "circular" | "linear";
+    constructor();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'progress-view': ProgressView;
+    }
+}

package/generated/components/progress-view.js

@@ -0,0 +1,120 @@
+var _a;
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { CSSStyleObserver } from '../internal/class/css-style-observer';
+import { $, debug } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
+const progressViewStyles = ['circular', 'linear'];
+/**
+ * @summary A view that shows how far along a task is.
+ *
+ * @slot — The default slot.
+ * @slot current-value
+ */
+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, $(html `
+              <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, $(html `
+              <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' });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
+        switch (name) {
+            case 'label': {
+                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
+                if (newValue) {
+                    label.setAttribute('title', newValue);
+                }
+                else
+                    label.removeAttribute('title');
+                break;
+            }
+            case 'current-value-label': {
+                queryMorph('[slot=current-value]', html `<label-view slot="current-value" font="callout" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this);
+                break;
+            }
+        }
+    }
+    disconnectedCallback() {
+        debug(`${_a.name} ⚡️ disconnect`);
+        CleanupRegistry.unregister(this);
+    }
+    connectedCallback() {
+        debug(`${_a.name} ⚡️ connect`);
+        this.inert = true;
+        this.#cssStyleObserver = new CSSStyleObserver({
+            properties: ['--progress-view-style-index'],
+        });
+        this.#cssStyleObserver.observe(this, this.#handleStyleChange);
+        Snapshot.waitReady.then(() => self.requestAnimationFrame(this.#handleStyleChange));
+    }
+    #handleStyleChange = () => {
+        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() {
+        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.js

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

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

@@ -0,0 +1,13 @@
+/**
+ * @summary A wrapper for {hv}-stacks
+ */
+export declare class ScrollViewProxy extends HTMLElement {
+    constructor();
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view-proxy': ScrollViewProxy;
+    }
+}

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

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

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

@@ -1,10 +1,22 @@
+/**
+ * @summary A view that scrolls its content when it doesn’t fit the screen.
+ *
+ * @slot — The default slot.
+ * @slot top-bar-principal
+ * @slot bottom-bar-principal
+ */
 export declare class ScrollView 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;
     centerScrollToElement(child: Element): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scroll-view': ScrollView;
+    }
+}

package/generated/components/scroll-view.js

@@ -1,30 +1,47 @@
 var _a;
+import { lifecycleObserver } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
-import { $, frame, onoff, slowHideShow } from '../internal/utils';
-import { LifecycleObserver } from '../lifecycle-observer';
+import { $, debug, frame, onoff, slowHideShow } from '../internal/utils';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
+/**
+ * @summary A view that scrolls its content when it doesn’t fit the screen.
+ *
+ * @slot — The default slot.
+ * @slot top-bar-principal
+ * @slot bottom-bar-principal
+ */
 export class ScrollView extends HTMLElement {
     static get observedAttributes() {
-        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-bar-title-display-mode'];
+        return [
+            /**
+             * Configures the view’s title for purposes of navigation. Shorthand for `<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"><span>Navigation Title</span></label-view></v-stack>`
+             */
+            'navigation-title',
+            'navigation-inline-title',
+            'navigation-inline-subtitle',
+            'navigation-icon',
+            '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>`, ''));
+        return (this.#template ??= $(html `<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;
-    #navbarPrincipalSlot;
+    #slots = new Map();
     #isMidScroll;
     #lastScrollTop = 0;
     // #stopRecordingScrollTop?: boolean = false
@@ -33,16 +50,42 @@ export class ScrollView extends HTMLElement {
         super();
         this.#shadowRoot = this.attachShadow({ mode: 'closed' });
         this.#shadowRoot.appendChild(document.importNode(this.constructor.template, true));
-        this.#navbarPrincipalSlot = this.#shadowRoot.querySelector('slot[name=top-bar-principal]') ?? undefined;
+        for (const slot of this.#shadowRoot.querySelectorAll('slot'))
+            this.#slots?.set(slot.name, slot);
+        CleanupRegistry.register(this, () => {
+            this.#slots = new Map();
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        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': {
+                if (oldValue === newValue)
+                    return;
+                this.#renderNavTitleComponent(newValue, null, this.getAttribute('navigation-icon'));
+                break;
+            }
+            case 'navigation-bar-title-display-mode':
+                if (oldValue === newValue)
+                    break;
+                this.#syncSibling(`${oldValue}${newValue}`);
+                break;
+        }
     }
     disconnectedCallback() {
-        console.debug(`${_a.name} ⚡️ disconnect`);
+        debug(`${_a.name} ⚡️ disconnect`);
         CleanupRegistry.unregister(this);
         observers.unobserve(this);
-        frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
+        frame().then(() => lifecycleObserver.dispatchEvent(new CustomEvent('pagehide', { detail: { page: this }, bubbles: true, composed: true })));
     }
     connectedCallback() {
-        console.debug(`${_a.name} ⚡️ connect`);
+        debug(`${_a.name} ⚡️ connect`);
         CleanupRegistry.register(this, onoff([
             // { types: 'tabreveal', listener: this.#handleTabReveal as EventListener },
             { types: 'beforetabswap', listener: this.#handleTabBeforeswap },
@@ -51,7 +94,7 @@ export class ScrollView extends HTMLElement {
             { 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 })));
+        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
@@ -65,44 +108,32 @@ export class ScrollView extends HTMLElement {
         //   })
         // })
     }
-    attributeChangedCallback(name, oldValue, newValue) {
-        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.#navbarPrincipalSlot?.assignedElements({ flatten: true })?.at(0);
-                slowHideShow('largeinline' === `${oldValue}${newValue}` ? 'show' : 'hide', title);
-                break;
-        }
-    }
-    #handleScroll = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+    #syncSibling = (comp) => {
+        if (!this.isConnected)
+            return;
+        if (this.closest('[hidden]'))
+            return; // iREPAINT ALERT! if (0 === this.offsetHeight + this.offsetWidth) break
+        if (!this.#isMidScroll)
+            return;
+        const title = this.#slots?.get('top-bar-principal')?.assignedElements({ flatten: true })?.at(0);
+        slowHideShow('largeinline' === `${comp}` ? 'show' : 'hide', title);
+    };
+    #handleScroll = ({ target, type }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
         if (!this.#isMidScroll)
             this.#isMidScroll = true;
         // if (this.#stopRecordingScrollTop) return
-        this.#lastScrollTop = evt.target.scrollTop;
+        if (!(target instanceof HTMLElement))
+            return;
+        this.#lastScrollTop = target.scrollTop;
     };
     #handleScrollend = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
+        debug(`${_a.name} ⚡️ ${evt?.type}`);
         if (this.#isMidScroll)
             this.#isMidScroll = false;
     };
     #handleMeasure = (entry) => {
-        console.debug(`${_a.name} ⚡️ measure`);
+        debug(`${_a.name} ⚡️ measure`);
         if (0 === entry.contentRect.width + entry.contentRect.height)
             return;
         if (undefined === this.#beforeTabSwapLastScrolltop)
@@ -118,38 +149,39 @@ export class ScrollView extends HTMLElement {
         // this.#stopRecordingScrollTop = false
         this.#beforeTabSwapLastScrolltop = undefined;
     };
-    #handleTabReveal = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (!evt.target?.contains(this))
+    // #handleTabReveal = ({ type, target }: CustomEvent<TabDetail>) => {
+    //   debug(`${ScrollView.name} ⚡️ ${type}`)
+    //   if (!(target instanceof HTMLElement)) 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 }) => {
+        debug(`${_a.name} ⚡️ ${type}`);
+        if (!(target instanceof HTMLElement))
             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 = (evt) => {
-        console.debug(`${_a.name} ⚡️ ${evt?.type}`);
-        if (!evt.target?.contains(this))
+        if (!target.contains(this))
             return;
         if (this.closest('[hidden]'))
             return;
@@ -166,22 +198,33 @@ export class ScrollView extends HTMLElement {
         });
     }
     #renderNavTitle = (title, subtitle) => {
-        const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ??
-            this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"><label-view line-limit="1" truncation-mode="tail" font="headline"></label-view><label-view line-limit="1" truncation-mode="tail" font="callout"></label-view></v-stack>`));
-        let titleLabel = vStack.querySelector(':scope>label-view:nth-child(1)');
-        if (title) {
-            titleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="headline"></label-view>`));
-            titleLabel.setAttribute('title', title);
-        }
-        else
-            titleLabel?.remove();
-        let subtitleLabel = vStack.querySelector(':scope>label-view:nth-child(2)');
-        if (subtitle) {
-            subtitleLabel ??= vStack.appendChild($(`<label-view line-limit="1" truncation-mode="tail" font="callout"></label-view>`));
-            subtitleLabel.setAttribute('title', subtitle);
-        }
-        else
-            subtitleLabel?.remove();
+        // const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`,
+        //   subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></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'))
+        // renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title)
+        // renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle)
+        // const container = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal"></v-stack>`, '>1'))
+        queryMorph('[slot=top-bar-principal]', html `<v-stack spacing="0" alignment="fill" slot="top-bar-principal">
+        ${title ? html `<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
+        ${subtitle ? html `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
+      </v-stack>`, this);
+        // render(
+        //   html`
+        //     ${title ? html`<label-view line-limit="1" truncation-mode="tail" font="headline"><span>${title}</span></label-view>` : null}
+        //     ${subtitle ? html`<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span>${subtitle}</span></label-view>` : null}
+        //   `,
+        //   container
+        // )
+    };
+    #renderNavTitleComponent = (title, subtitle, icon) => {
+        if (!title)
+            return this.querySelector(':scope>v-stack>navigation-title:not([slot])')?.remove?.();
+        // const container = ((vs = this.querySelector<HTMLElement>(':scope>v-stack') ?? (this.appendChild($(`<v-stack></v-stack>`, '>1')) as HTMLElement)) =>
+        //   vs.querySelector<HTMLElement>(':scope>navigation-title:not([slot])') ??
+        //   vs.appendChild($(html`<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`.toString(), '>1')))()
+        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(html `<v-stack></v-stack>`, '>1'));
+        queryMorph('navigation-title:not([slot])', html `<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`, container);
     };
 }
 _a = ScrollView;

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

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

package/generated/components/search-view.js

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

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

@@ -1,9 +1,21 @@
+/**
+ * @summary A container view that groups related content together.
+ *
+ * @slot — The default slot.
+ * @slot header
+ * @slot footer
+ */
 export declare class SectionView 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 {
+        'section-view': SectionView;
+    }
 }