@swiftwc/ui 0.0.0-dev.86 → 0.0.0-dev.87

package/generated/components/bordered-button.js

@@ -45,7 +45,7 @@ export class BorderedButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
                 });
                 break;
         }

package/generated/components/bordered-prominent-button.js

@@ -45,7 +45,7 @@ export class BorderedProminentButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
                 });
                 break;
         }

package/generated/components/borderless-button.js

@@ -45,7 +45,7 @@ export class BorderlessButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
                 });
                 break;
         }

package/generated/components/date-picker.js

@@ -3,7 +3,8 @@ import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, clamp, devFlags, kebabCase, onoff, renderLabel, set } from '../internal/utils';
+import { $, clamp, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 export class DatePicker extends FormAssociatedBase {
     static get observedAttributes() {
@@ -89,7 +90,7 @@ export class DatePicker extends FormAssociatedBase {
                     input.setAttribute('placeholder', map[input.name] ?? '');
                 break;
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue)
                 // this.#sendValueToForm()
                 break;
             case 'disabled':
@@ -121,7 +122,7 @@ export class DatePicker extends FormAssociatedBase {
     }
     #render() {
         if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ render (${this.datePickerStyle})`);
+            console.debug(`${_a.name} ⚡️ #render (${this.datePickerStyle})`);
         // if (this.#lastRenderedStyle === this.datePickerStyle) return // skip if already applied
         // this.#lastRenderedStyle = this.datePickerStyle
         // clear shadow DOM

package/generated/components/glass-button.js

@@ -45,7 +45,7 @@ export class GlassButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
                 });
                 break;
         }

package/generated/components/glass-prominent-button.js

@@ -45,7 +45,7 @@ export class GlassProminentButton extends ButtonBase {
             case 'title-key':
             case 'role':
                 Snapshot.waitReady.then(() => {
-                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'));
+                    ensurePlaceholder(target, target.getAttribute('role'), target.getAttribute('title-key'), Snapshot.config);
                 });
                 break;
         }

package/generated/components/image-view.js

@@ -1,4 +1,5 @@
 import { $, devFlags } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 export class ImageView extends HTMLElement {
     static get observedAttributes() {
         return ['system-name', 'system-weight'];
@@ -40,18 +41,16 @@ export class ImageView extends HTMLElement {
         }
     }
     #render(icon, weight) {
-        if (!icon) {
-            this.querySelector(':scope>:not([slot])')?.remove();
-            return;
-        }
+        // if (!icon) {
+        //   this.querySelector(':scope>:not([slot])')?.remove()
+        //   return
+        // }
         const tokens = [`ph${weight ? `-${weight}` : ''}`, `ph-${icon}`];
-        const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<i style="line-height: 1"></i>`, '>1'));
-        if ('1' !== container.style.getPropertyValue('line-height'))
-            container.style.setProperty('line-height', '1');
-        for (const token of container.classList)
-            if (token.startsWith('ph') && !tokens.includes(token))
-                container.classList.remove(token);
-        container.classList.add(...tokens);
+        // const container = this.querySelector<HTMLElement>(':scope>:not([slot])') ?? this.appendChild<HTMLElement>($(`<i style="line-height: 1"></i>`, '>1'))
+        queryMorph(':not([slot])', html `<i style="line-height: 1" class="${tokens.join(' ')}"></i>`, this, { removeIf: !icon });
+        // if ('1' !== container.style.getPropertyValue('line-height')) container.style.setProperty('line-height', '1')
+        // for (const token of container.classList) if (token.startsWith('ph') && !tokens.includes(token)) container.classList.remove(token)
+        // container.classList.add(...tokens)
     }
     disconnectedCallback() {
         if (devFlags.debug)

package/generated/components/label-view.js

@@ -1,5 +1,5 @@
 import { $, devFlags } from '../internal/utils';
-import { html, render } from '../tpl';
+import { html, queryMorph } from '../morphdom';
 /**
  *
  * @attr {@fontSet} font - Sets the default font for text in this view.
@@ -40,18 +40,21 @@ export class LabelView extends HTMLElement {
             return;
         // this.#scheduleReflect()
         switch (name) {
-            case 'system-image':
-            case 'title':
-                render(html `${this.getAttribute('title') ? html `<span>${this.getAttribute('title')}</span>` : null}${this.getAttribute('system-image')
-                    ? html `<image-view slot="icon" system-name="${this.getAttribute('system-image')}"></image-view>`
-                    : null}`, this);
-                break;
             // case 'system-image':
-            //   renderLabelIcon(this, newValue)
-            //   break
             // case 'title':
-            //   renderLabelTitle(this, newValue)
+            //   render(
+            //     html`${this.getAttribute('title') ? html`<span>${this.getAttribute('title')}</span>` : null}${this.getAttribute('system-image')
+            //       ? html`<image-view slot="icon" system-name="${this.getAttribute('system-image')}"></image-view>`
+            //       : null}`,
+            //     this
+            //   )
             //   break
+            case 'system-image':
+                queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${newValue}"></image-view>`, this, { removeIf: !newValue }); //renderLabelIcon(this, newValue)
+                break;
+            case 'title':
+                queryMorph(':not([slot])', html `<span>${newValue}</span>`, this, { removeIf: !newValue }); //renderLabelTitle(this, newValue)
+                break;
         }
     }
     disconnectedCallback() {

package/generated/components/labeled-content.js

@@ -1,5 +1,5 @@
-import { $, devFlags, renderLabel } from '../internal/utils';
-import { html, render } from '../tpl';
+import { $, devFlags } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 export class LabeledContent extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'label', 'header', 'footer', 'labeled-content-style', 'format'];
@@ -34,33 +34,53 @@ export class LabeledContent extends HTMLElement {
             return;
         switch (name) {
             case 'header':
-                if (!newValue) {
-                    this.querySelector(':scope>[slot=header]')?.remove();
-                    break;
-                }
-                const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }));
-                render(html `<label-view font="callout">
-            <span>${newValue}</span>
-          </label-view>`, header);
+                // if (!newValue) {
+                //   this.querySelector(':scope>[slot=header]')?.remove()
+                //   break
+                // }
+                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
+                queryMorph('[slot=header]', html `<header slot="header">
+            <label-view font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </header>`, this, { removeIf: !newValue });
+                // render(
+                //   html`<label-view font="callout">
+                //     <span>${newValue}</span>
+                //   </label-view>`,
+                //   header
+                // )
                 break;
             case 'footer':
-                if (!newValue) {
-                    this.querySelector(':scope>[slot=footer]')?.remove();
-                    break;
-                }
-                const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }));
-                render(html `<label-view font="callout">
-            <span>${newValue}</span>
-          </label-view>`, footer);
+                // if (!newValue) {
+                //   this.querySelector(':scope>[slot=footer]')?.remove()
+                //   break
+                // }
+                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
+                queryMorph('[slot=footer]', html `<footer slot="footer">
+            <label-view font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </footer>`, this, { removeIf: !newValue });
+                // render(
+                //   html`<label-view font="callout">
+                //     <span>${newValue}</span>
+                //   </label-view>`,
+                //   footer
+                // )
                 break;
-            case 'value':
-                renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(newValue, this.getAttribute('format')));
+            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); //renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(newValue, this.getAttribute('format')))
                 break;
-            case 'format':
-                renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(this.getAttribute('value'), newValue));
+            }
+            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); //renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(this.getAttribute('value'), newValue))
                 break;
+            }
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
                 break;
         }
     }

package/generated/components/menu-view.js

@@ -1,6 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
-import { $, devFlags, onoff, renderLabel, touchGlass } from '../internal/utils';
+import { $, devFlags, onoff, touchGlass } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 /**
  * @summary A control for presenting a menu of actions.
  *
@@ -60,7 +61,7 @@ export class MenuView extends HTMLElement {
                 }
                 break;
             case 'label':
-                renderLabel(':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
                 break;
         }
     }

package/generated/components/navigation-title.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
-import { html, render } from '../tpl';
+import { html, queryMorph } from '../morphdom';
 let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElement {
     static get observedAttributes() {
         return ['value', 'subtitle', 'system-image', 'system-image-weight'];
@@ -29,21 +29,27 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
             console.debug(`${NavigationTitle_1.name} ⚡️ connect`);
     }
     #render = (title, subtitle, systemImage, systemImageWeight) => {
-        const template = html `
-      <v-stack alignment="fill">
-        ${systemImage ? html `<image-view system-name="${systemImage}" system-weight="${systemImageWeight}" foreground="blue"></image-view>` : null}
-        <v-stack spacing="0" alignment="fill">
-          <label-view line-limit="1" truncation-mode="tail" font="headline">
-            <span>${title ?? ''}</span>
-          </label-view>
-          <label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout">
-            <span>${subtitle ?? ''}</span>
-          </label-view>
-        </v-stack>
-      </v-stack>
-    `;
-        const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild(document.createElement('navigation-large-title'));
-        render(template, container);
+        // const container = this.querySelector(':scope>:not([slot])') ?? this.appendChild(document.createElement('navigation-large-title'))
+        // render(template, container)
+        queryMorph(':not([slot])', html `
+        <navigation-large-title>
+          <v-stack alignment="fill">
+            ${systemImage ? html `<image-view system-name="${systemImage}" system-weight="${systemImageWeight}" foreground="blue"></image-view>` : null}
+            <v-stack spacing="0" alignment="fill">
+              ${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>
+          </v-stack>
+        </navigation-large-title>
+      `, this);
         // 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>`,
         //   vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`

package/generated/components/picker-view.js

@@ -5,7 +5,8 @@ import { FormAssociatedBase, getInternals } from '../internal/class/form-associa
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
 import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
-import { $, devFlags, kebabCase, onoff, renderLabel, renderLabelIcon, renderLabelTitle } from '../internal/utils';
+import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { html as htmx, morph, queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
@@ -435,7 +436,7 @@ export class PickerView extends FormAssociatedBase {
                 const value = this.getAttribute(this.constructor.ATTR.LABEL);
                 if (value) {
                     const hStack = $(`<h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack>`, '>1');
-                    renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, value);
+                    queryMorph('label-view:nth-child(2)', htmx `<label-view>${value ? htmx `<span>${value}</span>` : null}</label-view>`, hStack); //renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, value)
                     // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', hStack);
                 }
@@ -669,7 +670,7 @@ export class PickerView extends FormAssociatedBase {
     }
     #render() {
         if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ render (${this.pickerStyle})`);
+            console.debug(`${_a.name} ⚡️ #render (${this.pickerStyle})`);
         // const style = this.getAttribute((this.constructor as typeof PickerView).ATTR.PICKER_STYLE)
         if (this.#lastRenderedStyle === this.pickerStyle)
             return; // skip if already applied
@@ -982,7 +983,7 @@ export class PickerView extends FormAssociatedBase {
     #reflectLabel(value) {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectLabel`);
-        renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, value);
+        queryMorph('[slot=label]', htmx `<label-view slot="label">${value ? htmx `<span>${value}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, value)
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
@@ -1029,8 +1030,10 @@ export class PickerView extends FormAssociatedBase {
                         break;
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
-                    renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER));
-                    renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
+                    const title = this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER), systemImage = this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON);
+                    // queryMorph(':not([slot])', htmx`<span>${title}</span>`, currentValueLabel, { removeIf: !title }) //renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER))
+                    // queryMorph('[slot=icon]', htmx`<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage }) //renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER_ICON))
+                    morph(htmx `<label-view>${systemImage ? htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? htmx `<span>${title}</span>` : null}</label-view>`, currentValueLabel);
                     break;
                 }
                 case 'menu': {
@@ -1039,8 +1042,10 @@ export class PickerView extends FormAssociatedBase {
                         break;
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
-                    renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER));
-                    renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
+                    const title = this.#currentValueLabel || this.#selection || this.getAttribute(this.constructor.ATTR.PLACEHOLDER), systemImage = this.#currentValueIcon || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON);
+                    // queryMorph(':not([slot])', htmx`<span>${title}</span>`, currentValueLabel, { removeIf: !title }) //renderLabelTitle(currentValueLabel, this.#currentValueLabel || this.#selection || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER))
+                    // queryMorph('[slot=icon]', htmx`<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage }) //renderLabelIcon(currentValueLabel, this.#currentValueIcon || this.getAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER_ICON))
+                    morph(htmx `<label-view slot="label">${systemImage ? htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>` : null}${title ? htmx `<span>${title}</span>` : null}</label-view>`, currentValueLabel);
                     break;
                 }
                 case 'inline':

package/generated/components/progress-view.js

@@ -1,7 +1,8 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
-import { $, devFlags, renderLabel } from '../internal/utils';
+import { $, devFlags } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 const progressViewStyles = ['circular', 'linear'];
 /**
@@ -70,7 +71,7 @@ export class ProgressView extends HTMLElement {
                 break;
             }
             case 'current-value-label': {
-                renderLabel(':scope>[slot=current-value]', `<label-view slot="current-value" font="callout" foreground="secondary"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=current-value]', html `<label-view slot="current-value" font="callout" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>[slot=current-value]', `<label-view slot="current-value" font="callout" foreground="secondary"><span></span></label-view>`, this, newValue)
                 break;
             }
         }
@@ -102,7 +103,7 @@ export class ProgressView extends HTMLElement {
     };
     #render() {
         if (devFlags.debug)
-            console.debug(`${_a.name} ⚡️ render (${this.#progressViewStyle})`);
+            console.debug(`${_a.name} ⚡️ #render (${this.#progressViewStyle})`);
         if (this.#lastRenderedStyle === this.#progressViewStyle)
             return; // skip if already applied
         this.#lastRenderedStyle = this.#progressViewStyle;

package/generated/components/scroll-view.js

@@ -3,7 +3,7 @@ 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';
-import { html, render } from '../tpl';
+import { html, queryMorph } from '../morphdom';
 const observers = new ResizeObserverSingleton();
 /**
  * @slot top-bar-principal
@@ -11,7 +11,7 @@ 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'];
+        return ['navigation-title', 'navigation-inline-title', 'navigation-inline-subtitle', 'navigation-icon', 'navigation-bar-title-display-mode'];
     }
     static #template;
     static get template() {
@@ -55,9 +55,12 @@ export class ScrollView extends HTMLElement {
             case 'navigation-inline-subtitle':
                 this.#renderNavTitle(this.getAttribute('navigation-inline-title'), newValue);
                 break;
-            case 'navigation-title':
-                //
+            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;
@@ -197,11 +200,27 @@ export class ScrollView extends HTMLElement {
         //   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'));
-        render(html `
+        // 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}
-      `, container);
+      </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($(`<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/section-view.js

@@ -1,5 +1,5 @@
 import { $, devFlags } from '../internal/utils';
-import { html, render } from '../tpl';
+import { html, queryMorph } from '../morphdom';
 /**
  * @slot header
  * @slot footer
@@ -42,24 +42,40 @@ export class SectionView extends HTMLElement {
         // Snapshot.waitReady.then(() => {
         switch (name) {
             case 'header':
-                if (!newValue) {
-                    this.querySelector(':scope>[slot=header]')?.remove();
-                    break;
-                }
-                const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }));
-                render(html `<label-view line-limit="1" truncation-mode="tail" font="callout">
-            <span>${newValue}</span>
-          </label-view>`, header);
+                // if (!newValue) {
+                //   this.querySelector(':scope>[slot=header]')?.remove()
+                //   break
+                // }
+                // const header = this.querySelector(':scope>[slot=header]') ?? this.appendChild(Object.assign(document.createElement('header'), { slot: 'header' }))
+                queryMorph('[slot=header]', html `<header slot="header">
+            <label-view line-limit="1" truncation-mode="tail" font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </header>`, this, { removeIf: !newValue });
+                // render(
+                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
+                //     <span>${newValue}</span>
+                //   </label-view>`,
+                //   header
+                // )
                 break;
             case 'footer':
-                if (!newValue) {
-                    this.querySelector(':scope>[slot=footer]')?.remove();
-                    break;
-                }
-                const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }));
-                render(html `<label-view line-limit="1" truncation-mode="tail" font="callout">
-            <span>${newValue}</span>
-          </label-view>`, footer);
+                // if (!newValue) {
+                //   this.querySelector(':scope>[slot=footer]')?.remove()
+                //   break
+                // }
+                // const footer = this.querySelector(':scope>[slot=footer]') ?? this.appendChild(Object.assign(document.createElement('footer'), { slot: 'footer' }))
+                queryMorph('[slot=footer]', html `<footer slot="footer">
+            <label-view line-limit="1" truncation-mode="tail" font="callout">
+              <span>${newValue}</span>
+            </label-view>
+          </footer>`, this, { removeIf: !newValue });
+                // render(
+                //   html`<label-view line-limit="1" truncation-mode="tail" font="callout">
+                //     <span>${newValue}</span>
+                //   </label-view>`,
+                //   footer
+                // )
                 break;
         }
         // })

package/generated/components/table-view.js

@@ -2,7 +2,8 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, devFlags, listActive, onoff, renderLabelTitle } from '../internal/utils';
+import { $, devFlags, listActive, onoff } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
 /**
  * @summary Display selectable, sortable data arranged in rows and columns.
@@ -113,11 +114,9 @@ export class TableView extends HTMLElement {
           <label-view></label-view>
           <label-view font="callout" foreground="secondary"></label-view>
         </v-stack>
-      </button>`, '>1'), title = btn.querySelector('label-view:first-child'), subTitle = btn.querySelector('label-view:last-child');
-            if (title)
-                renderLabelTitle(title, node.textContent.trim()); //title?.setAttribute('title', node.textContent.trim())
-            if (subTitle)
-                renderLabelTitle(subTitle, node.ariaSort ?? ''); //subTitle?.setAttribute('title', node.ariaSort ?? '')
+      </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
+            queryMorph(':not([slot])', html `<span>${node.textContent.trim()}</span>`, title, { removeIf: !node.textContent.trim() }); //renderLabelTitle(title, node.textContent.trim()) //title?.setAttribute('title', node.textContent.trim())
+            queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') }); //renderLabelTitle(subTitle, node.ariaSort ?? '') //subTitle?.setAttribute('title', node.ariaSort ?? '')
             this.#compactToolbarItem.appendChild(btn);
         }
     };

package/generated/components/text-field.js

@@ -3,7 +3,8 @@ import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, compareBigDecimals, devFlags, kebabCase, onoff, renderLabel, set } from '../internal/utils';
+import { $, compareBigDecimals, devFlags, kebabCase, onoff, set } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @slot label
@@ -137,7 +138,7 @@ export class TextField extends FormAssociatedBase {
                 this.#sendValueToForm();
                 break;
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label" foreground="secondary">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue)
                 // this.#sendValueToForm()
                 break;
             case 'disabled':

package/generated/components/toggle-view.js

@@ -2,7 +2,8 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { FormAssociatedBase, getInternals } from '../internal/class/form-associated-base';
 import { MutationObserverSet } from '../internal/class/mutation-observer-set';
-import { $, devFlags, kebabCase, onoff, renderLabel } from '../internal/utils';
+import { $, devFlags, kebabCase, onoff } from '../internal/utils';
+import { html, queryMorph } from '../morphdom';
 const toggleStyles = ['switch', 'button'];
 /**
  * @slot label
@@ -84,7 +85,7 @@ export class ToggleView extends FormAssociatedBase {
                 this.#sendValueToForm(this.#connected);
                 break;
             case 'label':
-                renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
+                queryMorph('[slot=label]', html `<label-view slot="label">${newValue ? html `<span>${newValue}</span>` : null}</label-view>`, this); //renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue)
                 break;
             case 'disabled':
                 for (const el of this.#shadowRoot.querySelectorAll('input'))