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

package/generated/client/index.d.ts

@@ -5,6 +5,9 @@ import { type NavigationHost, queryInsertPosition, startViewTransition } from '.
 import { type WebComponentCtor } from '../namespace-browser';
 import { Snapshot } from '../snapshot';
 export declare const polyfills: Map<string, WebComponentCtor>;
+/**
+ * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
+ */
 export declare const alert: (title?: string, message?: string, actions?: {
     label?: string;
     image?: string;

package/generated/client/index.js

@@ -187,6 +187,9 @@ if (mediaQueryList.matches)
 // ac.abort() // dialog closes silently, a rejects with AbortError
 // // or still works standalone
 // a.dismiss() // same effect, no signal needed
+/**
+ * Presents an alert with a message using the given data to produce the alert’s content and a string variable as a title.
+ */
 export const alert = (title, message, actions, options) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     let dialog;

package/generated/components/alert-dialog.d.ts

@@ -1,4 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of an alert presentation.
+ * Use it from the client module like `void alert('Save failed.')`.
+ */
 export declare class AlertDialog extends DialogBase {
     #private;
     constructor();

package/generated/components/alert-dialog.js

@@ -2,6 +2,10 @@ import { alertDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of an alert presentation.
+ * Use it from the client module like `void alert('Save failed.')`.
+ */
 export class AlertDialog extends DialogBase {
     constructor() {
         super();

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/confirmation-dialog.d.ts

@@ -1,4 +1,8 @@
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of a confirmation presentation.
+ * Use it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.
+ */
 export declare class ConfirmationDialog extends DialogBase {
     #private;
     static get observedAttributes(): string[];

package/generated/components/confirmation-dialog.js

@@ -2,6 +2,10 @@ import { confirmationDialog } from '../buses';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, isInside, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
+/**
+ * A representation of a confirmation presentation.
+ * Use it from the client module like `await confirmation(trigger, 'Permanently erase the items in the Trash?')`.
+ */
 export class ConfirmationDialog extends DialogBase {
     static get observedAttributes() {
         return ['anchor'];

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/h-stack.d.ts

@@ -1,10 +1,13 @@
 /**
+ * @summary A view that arranges its subviews in a horizontal line.
+ *
+ * @attr {@templateSet} template - The main-axis grid template
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
- * @attr {@alignmentSet} alignment - The cross-axis alignment
- * @attr {@distributionSet} distribution - The main-axis alignment
- * @attr {@placementSet} placement - The main-axis alignment
+ * @attr {@blockSet} alignment - The cross-axis alignment
+ * @attr {@inlineSet} distribution - The main-axis alignment
+ * @attr {@inlinePlacementSet} placement - The main-axis alignment
  *
  */
 export declare class HStack extends HTMLElement {

package/generated/components/h-stack.js

@@ -1,11 +1,14 @@
 import { devFlags } from '../internal/utils';
 /**
+ * @summary A view that arranges its subviews in a horizontal line.
+ *
+ * @attr {@templateSet} template - The main-axis grid template
  *
  * @attr {@spacingSet} spacing - The gap between the primary axis
  *
- * @attr {@alignmentSet} alignment - The cross-axis alignment
- * @attr {@distributionSet} distribution - The main-axis alignment
- * @attr {@placementSet} placement - The main-axis alignment
+ * @attr {@blockSet} alignment - The cross-axis alignment
+ * @attr {@inlineSet} distribution - The main-axis alignment
+ * @attr {@inlinePlacementSet} placement - The main-axis alignment
  *
  */
 export class HStack extends HTMLElement {

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.d.ts

@@ -2,6 +2,8 @@
  *
  * @attr {@fontSet} font - Sets the default font for text in this view.
  *
+ * @slot icon
+ *
  */
 export declare class LabelView extends HTMLElement {
     #private;

package/generated/components/label-view.js

@@ -1,9 +1,11 @@
 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.
  *
+ * @slot icon
+ *
  */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
@@ -38,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.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary A control for presenting a menu of actions.
+ *
+ * @slot label
  */
 export declare class MenuView extends HTMLElement {
     #private;

package/generated/components/menu-view.js

@@ -1,8 +1,11 @@
 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.
+ *
+ * @slot label
  */
 export class MenuView extends HTMLElement {
     static get observedAttributes() {
@@ -58,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.d.ts

@@ -19,7 +19,9 @@ export type Dictionary = DictEntry[];
  *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @slot label
  * @slot list
+ * @slot validity-options
  */
 export declare class PickerView extends FormAssociatedBase {
     #private;

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) => {
@@ -124,7 +125,9 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
  *
  * @attr {vertical|horizontal|auto} label-value-placement
  *
+ * @slot label
  * @slot list
+ * @slot validity-options
  */
 export class PickerView extends FormAssociatedBase {
     static get ATTR() {
@@ -433,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);
                 }
@@ -667,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
@@ -980,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() {
@@ -1027,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': {
@@ -1037,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.d.ts

@@ -1,5 +1,7 @@
 /**
  * @summary A view that shows the progress toward completion of a task.
+ *
+ * @slot current-value
  */
 export declare class ProgressView extends HTMLElement {
     #private;

package/generated/components/progress-view.js

@@ -1,11 +1,14 @@
 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'];
 /**
  * @summary A view that shows the progress toward completion of a task.
+ *
+ * @slot current-value
  */
 export class ProgressView extends HTMLElement {
     static get observedAttributes() {
@@ -68,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;
             }
         }
@@ -100,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.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @slot top-bar-principal
+ * @slot bottom-bar-principal
+ */
 export declare class ScrollView extends HTMLElement {
     #private;
     static get observedAttributes(): string[];