@swiftwc/ui 0.0.0-dev.95 → 0.0.0-dev.96

package/generated/client/index.js

@@ -19,7 +19,7 @@ for (const [k, Ctor] of Object.entries(Components)) {
         // const testEl = document.createElement('template')
         // testEl.innerHTML = `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`
         // const testNode = testEl.content.firstElementChild,
-        if (!($(`<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
+        if (!($(html `<${Ctor.polyfillExtends} is="${is}"></${Ctor.polyfillExtends}>`, '>1') instanceof Ctor))
             polyfills.set(is, Ctor);
         continue;
     }
@@ -119,7 +119,7 @@ const handleHelp = ({ target, relatedTarget }) => {
     if (relatedTarget instanceof HTMLElement && trigger.contains(relatedTarget))
         return;
     const newAnchorName = `--help-${self.crypto.randomUUID()}`;
-    const tooltip = $(`<fine-tooltip></fine-tooltip>`, '>1');
+    const tooltip = $(html `<fine-tooltip></fine-tooltip>`, '>1');
     trigger.style.setProperty('anchor-name', newAnchorName);
     tooltip.style.setProperty('position-anchor', newAnchorName);
     document.body.appendChild(tooltip);
@@ -236,26 +236,26 @@ export const alert = (title, message, actions, options) => {
 };
 export const confirmationDialog = async (trigger, title, message, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;
-    const dialog = $(`<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
+    const dialog = $(html `<dialog is="confirmation-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(html `<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
     trigger.style.setProperty('anchor-name', newAnchorName, 'important'); //$.prop('anchor-name', newAnchorName, trigger, 'important')
     dialog.style.setProperty('position-anchor', newAnchorName); //$.prop('position-anchor', newAnchorName, dialog)
     if (title && false !== options?.titleVisibility) {
-        const label = $(`<label-view font="headline"></label-view>`, '>1');
+        const label = $(html `<label-view font="headline"></label-view>`, '>1');
         label.setAttribute('title', title);
         vStack.insertAdjacentElement('beforeend', label);
     }
     if (message && false !== options?.titleVisibility) {
-        const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
+        const label = $(html `<label-view foreground="secondary" font="callout"></label-view>`, '>1');
         label.setAttribute('title', message);
         vStack.insertAdjacentElement('beforeend', label);
     }
     for (const [index, action] of (actions ?? []).entries()) {
-        const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
+        const btn = $(html `<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
         btn.setAttribute('value', `${index}`);
         if (action?.role)
             btn.setAttribute('role', action.role);
         if (action.label || action.image) {
-            const label = $(`<label-view></label-view>`, '>1');
+            const label = $(html `<label-view></label-view>`, '>1');
             if (action.label)
                 label.setAttribute('title', action.label);
             if (action.image)

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

@@ -1,6 +1,6 @@
 import { DialogBase } from '../namespace-browser/base';
 /**
- * @summaryA dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.
+ * @summary A dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.
  */
 export declare class AlertDialog extends DialogBase {
     #private;

package/generated/components/alert-dialog.js

@@ -3,7 +3,7 @@ import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { devFlags, onoff, touchGlass } from '../internal/utils';
 import { DialogBase } from '../namespace-browser/base';
 /**
- * @summaryA dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.
+ * @summary A dialog that shows a message. Use it from the client module like `void alert('Save failed.')`.
  */
 export class AlertDialog extends DialogBase {
     constructor() {

package/generated/components/content-unavailable.js

@@ -1,6 +1,7 @@
 import { I18n } from '../i18n';
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff } from '../internal/utils';
+import { html } from '../tpl';
 /**
  * @summary A message with a title and extra information that you show when part of your app can’t be used.
  *
@@ -23,16 +24,15 @@ export class ContentUnavailable extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-      <div part="root content-unavailable-title-stack">
-        <slot></slot>
-      </div>
-      <div part="root content-unavailable-description-stack">
-        <slot name="description"></slot>
-      </div>
-      <div part="root content-unavailable-actions-stack">
-        <slot name="actions"></slot>
-      </div>`));
+        return (this.#template ??= $(html `<div part="root content-unavailable-title-stack">
+          <slot></slot>
+        </div>
+        <div part="root content-unavailable-description-stack">
+          <slot name="description"></slot>
+        </div>
+        <div part="root content-unavailable-actions-stack">
+          <slot name="actions"></slot>
+        </div>`));
     }
     #shadowRoot;
     #slots;
@@ -70,7 +70,7 @@ export class ContentUnavailable extends HTMLElement {
             console.debug(`${ContentUnavailable.name} ⚡️ connect`);
     }
     #renderSearch = (search) => {
-        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(`<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
+        const titleLabel = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(html `<label-view><i class="ph ph-magnifying-glass" slot="icon" foreground="secondary"></i></label-view>`, '>1')), descText = this.querySelector(':scope>[slot=description]') ?? this.appendChild($(html `<label-view foreground="secondary" slot="description"></label-view>`, '>1'));
         if (search) {
             const interpolate = (text, vars) => text.replaceAll(/\{(\w+)\}/g, (_, key) => vars[key] ?? '');
             titleLabel.setAttribute('title', interpolate(I18n.t('SearchUnavailableContent').Label, { search }));

package/generated/components/date-picker.js

@@ -4,7 +4,8 @@ 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, set } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const datePickerStyles = ['graphical', 'field', 'automatic'];
 /**
  * @summary A control that selects an absolute date.
@@ -53,20 +54,19 @@ export class DatePicker extends FormAssociatedBase {
         if (!_a.#templates.has(this.datePickerStyle))
             switch (this.datePickerStyle) {
                 default:
-                    _a.#templates.set(this.datePickerStyle, $(String.raw `
-            <label part="root date-picker-stack">
-            <div part="root date-picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root date-picker-input-stack">
-              <input type="text" name="month" inputmode="numeric" pattern="\d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input">
-              <span part="root date-picker-separator"></span>
-              <input type="text" name="day" inputmode="numeric" pattern="\d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input">
-              <span part="root date-picker-separator"></span>
-              <input type="text" name="year" inputmode="numeric" pattern="\d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input">
-            </div>
-            <slot name="validity-options" hidden></slot>
-          </label>`));
+                    _a.#templates.set(this.datePickerStyle, $(html `<label part="root date-picker-stack">
+                <div part="root date-picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root date-picker-input-stack">
+                  <input type="text" name="month" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="12" part="root input date-picker-form-input" />
+                  <span part="root date-picker-separator"></span>
+                  <input type="text" name="day" inputmode="numeric" pattern="d*" minlength="1" maxlength="2" min="1" max="31" part="root input date-picker-form-input" />
+                  <span part="root date-picker-separator"></span>
+                  <input type="text" name="year" inputmode="numeric" pattern="d*" minlength="4" maxlength="4" min="0" max="9999" part="root input date-picker-form-input" />
+                </div>
+                <slot name="validity-options" hidden></slot>
+              </label>`));
                     break;
             }
         return _a.#templates.get(this.datePickerStyle);

package/generated/components/fine-tooltip.js

@@ -1,6 +1,7 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff } from '../internal/utils';
+import { html } from '../tpl';
 export class FineTooltip extends HTMLElement {
     constructor() {
         super();
@@ -40,7 +41,7 @@ export class FineTooltip extends HTMLElement {
         return trigger ?? undefined;
     }
     #render = (str) => {
-        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+        const label = this.querySelector(':scope>label-view') ?? this.appendChild($(html `<label-view></label-view>`, '>1'));
         if (str)
             label.setAttribute('title', str);
         else

package/generated/components/image-view.js

@@ -1,5 +1,6 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A view that displays an image.
  *
@@ -10,7 +11,7 @@ export class ImageView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `<slot></slot>`));
+        return (this.#template ??= $(html `<slot></slot>`));
     }
     #shadowRoot;
     constructor() {

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

@@ -11,6 +11,10 @@
  * @slot — Any children without a `slot` attribute are placed in the title block.
  * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
  *
+ * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop --label-image-size — The size of the icon.
+ * @cssprop --label-padding-inline — The padding inline of the label.
+ *
  */
 export declare class LabelView extends HTMLElement {
     #private;

package/generated/components/label-view.js

@@ -1,5 +1,6 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A view that labels items with an icon and a title.
  *
@@ -13,6 +14,10 @@ import { html, queryMorph } from '../morphdom';
  * @slot — Any children without a `slot` attribute are placed in the title block.
  * @slot icon — Use the `slot="icon"` attribute to place childen in the icon block.
  *
+ * @cssprop --label-gap — The gap between the icon and the title.
+ * @cssprop --label-image-size — The size of the icon.
+ * @cssprop --label-padding-inline — The padding inline of the label.
+ *
  */
 export class LabelView extends HTMLElement {
     static get observedAttributes() {
@@ -21,17 +26,17 @@ export class LabelView extends HTMLElement {
             'title',
             'line-limit',
             /**
-             * @type {tail}
+             * @type {"tail"}
              */
             'truncation-mode',
         ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <slot name="icon"></slot>
-    <slot></slot>
-    `
+        return (this.#template ??= $(html `
+      <slot name="icon"></slot>
+      <slot></slot>
+    `));
         //     String.raw`
         // <div part="root label-image-stack">
         //   <slot name="image"></slot>
@@ -39,7 +44,6 @@ export class LabelView extends HTMLElement {
         // <div part="root label-title-stack">
         //   <slot></slot>
         // </div>`
-        ));
     }
     #shadowRoot;
     // #reflectScheduled = false

package/generated/components/labeled-content.d.ts

@@ -5,6 +5,11 @@
  * @slot label — Use the `slot="label"` attribute to place childen in the label block.
  * @slot header
  * @slot footer
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
  */
 export declare class LabeledContent extends HTMLElement {
     #private;

package/generated/components/labeled-content.js

@@ -1,5 +1,6 @@
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A container view that pairs a label with a value.
  *
@@ -7,6 +8,11 @@ import { html, queryMorph } from '../morphdom';
  * @slot label — Use the `slot="label"` attribute to place childen in the label block.
  * @slot header
  * @slot footer
+ *
+ * @csspart labeled-content-container
+ * @csspart labeled-content-stack
+ * @csspart labeled-content-label-stack
+ * @csspart labeled-content-value-stack
  */
 export class LabeledContent extends HTMLElement {
     static get observedAttributes() {
@@ -24,19 +30,19 @@ export class LabeledContent extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <div part="root labeled-content-container">
-      <slot name="header"></slot>
-      <div part="root labeled-content-stack">
-        <div part="root labeled-content-label-stack">
-          <slot name="label"></slot>
-        </div>
-        <div part="root labeled-content-value-stack">
-          <slot></slot>
+        return (this.#template ??= $(html `
+      <div part="root labeled-content-container">
+        <slot name="header"></slot>
+        <div part="root labeled-content-stack">
+          <div part="root labeled-content-label-stack">
+            <slot name="label"></slot>
+          </div>
+          <div part="root labeled-content-value-stack">
+            <slot></slot>
+          </div>
         </div>
+        <slot name="footer"></slot>
       </div>
-      <slot name="footer"></slot>
-    </div>
     `));
     }
     #shadowRoot;

package/generated/components/menu-view.js

@@ -1,7 +1,8 @@
 var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { $, devFlags, onoff, touchGlass } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A control that opens a menu of actions.
  *
@@ -14,17 +15,16 @@ export class MenuView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <button type="button" part="root button menu-summary">
-    <slot name="label"></slot>
-  </button>
-  <dialog part="root menu-dialog" autofocus inert>
-    <form part="root menu-form" method="dialog" novalidate>
-      <div part="root menu-scrollable">
-        <slot></slot>
-      </div>
-    </form>
-  </dialog>`));
+        return (this.#template ??= $(html `<button type="button" part="root button menu-summary">
+          <slot name="label"></slot>
+        </button>
+        <dialog part="root menu-dialog" autofocus inert>
+          <form part="root menu-form" method="dialog" novalidate>
+            <div part="root menu-scrollable">
+              <slot></slot>
+            </div>
+          </form>
+        </dialog>`));
     }
     #shadowRoot;
     #dialog;

package/generated/components/navigation-title.js

@@ -7,7 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var NavigationTitle_1;
 import { microtaskOnConnected } from '../internal/decorators';
 import { devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 /**
  * @summary A container view.
  *

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

@@ -14,7 +14,7 @@ export type Dictionary = DictEntry[];
  *
  * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
  *
- * @attr {string} help — Adds a help tooltip to the trigger of the picker, if style supports one
+ * @attr help — Adds a help tooltip to the trigger of the picker, if style supports one
  *
  * @attr {DictEntry[]} dictionary — Renders all options using this array
  *

package/generated/components/picker-view.js

@@ -6,7 +6,7 @@ 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 } from '../internal/utils';
-import { html as htmx, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { html, render } from '../tpl';
 const pickerStyles = ['menu', 'inline', 'navigation-link', 'sheet', 'automatic'];
 const update = (path, node, overwrite = true) => {
@@ -120,7 +120,7 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
  *
  * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
  *
- * @attr {string} help — Adds a help tooltip to the trigger of the picker, if style supports one
+ * @attr help — Adds a help tooltip to the trigger of the picker, if style supports one
  *
  * @attr {DictEntry[]} dictionary — Renders all options using this array
  *
@@ -173,7 +173,7 @@ export class PickerView extends FormAssociatedBase {
     #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
         if (devFlags.debug)
             console.debug(`${_a.name} #spawnPage`);
-        const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
+        const body = $(html `<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
         if (title)
             sv?.setAttribute('navigation-inline-title', title);
         if (searchable) {
@@ -372,7 +372,7 @@ export class PickerView extends FormAssociatedBase {
             case 'sheet':
             case 'navigation-link': {
                 // current value label only
-                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view></label-view>`, '>1'));
+                const currentValueLabel = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view></label-view>`, '>1'));
                 // reset state
                 // if (currentValueLabel) {
                 //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
@@ -406,7 +406,7 @@ export class PickerView extends FormAssociatedBase {
                 break;
             }
             case 'menu': {
-                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(`<menu-view></menu-view>`, '>1'));
+                const menu = this.querySelector(':scope>menu-view:not([slot])') ?? this.appendChild($(html `<menu-view></menu-view>`, '>1'));
                 // reset state
                 menu.innerHTML = '';
                 menu.tabIndex = 0;
@@ -414,7 +414,7 @@ export class PickerView extends FormAssociatedBase {
                 for (const el of this.querySelectorAll(':scope>:not([slot])'))
                     if (menu !== el)
                         el.remove();
-                const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(`<label-view slot="label"></label-view>`, '>1'));
+                const currentValueLabel = menu.querySelector(':scope>label-view[slot=label]') ?? menu.appendChild($(html `<label-view slot="label"></label-view>`, '>1'));
                 // if (currentValueLabel) {
                 //   renderLabelIcon(currentValueLabel, 'dots-three') // overwritten
                 //   renderLabelTitle(currentValueLabel, this.#currentValueLabel) // overwritten
@@ -426,8 +426,8 @@ export class PickerView extends FormAssociatedBase {
             }
             case 'inline':
             default: {
-                const sectionTpl = `<section-view></section-view>`;
-                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(`<list-view>${sectionTpl}</list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(sectionTpl, '>1'));
+                const sectionTpl = html `<section-view></section-view>`;
+                const inlineList = this.querySelector(':scope>list-view:not([slot])') ?? this.appendChild($(html `<list-view>${sectionTpl}</list-view>`, '>1')), section = inlineList.querySelector(':scope>section-view') ?? inlineList.appendChild($(sectionTpl, '>1'));
                 // reset state
                 section.innerHTML = '';
                 // clear all siblings
@@ -437,8 +437,10 @@ export class PickerView extends FormAssociatedBase {
                 // add label as a plain element
                 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');
-                    queryMorph('label-view:nth-child(2)', htmx `<label-view>${value ? htmx `<span>${value}</span>` : null}</label-view>`, hStack);
+                    const hStack = $(html `<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');
+                    queryMorph('label-view:nth-child(2)', html `<label-view>${value ? html `<span>${value}</span>` : null}</label-view>`, hStack);
                     // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
                     section.insertAdjacentElement('beforeend', hStack);
                 }
@@ -503,32 +505,32 @@ export class PickerView extends FormAssociatedBase {
             switch (this.pickerStyle) {
                 case 'sheet':
                 case 'navigation-link':
-                    _a.#templates.set(this.pickerStyle, $(String.raw `
-                <label part="root picker-stack">
-            <div part="root picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root picker-input-stack">
-              <slot></slot>
-            </div>
-            <slot name="list" hidden></slot>
-            <slot name="validity-options" hidden></slot>
-          </label>
-                `));
+                    _a.#templates.set(this.pickerStyle, $(html `
+              <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>
+            `));
                     break;
                 case 'menu':
-                    _a.#templates.set(this.pickerStyle, $(String.raw `
-                <label part="root picker-stack">
-            <div part="root picker-label-stack">
-              <slot name="label"></slot>
-            </div>
-            <div part="root picker-input-stack">
-              <slot></slot>
-            </div>
-            <slot name="list" hidden></slot>
-            <slot name="validity-options" hidden></slot>
-          </label>
-                `));
+                    _a.#templates.set(this.pickerStyle, $(html `
+              <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>
+            `));
                     //   break
                     // case 'compact':
                     //   PickerView.#templates.set(
@@ -577,17 +579,16 @@ export class PickerView extends FormAssociatedBase {
                 //     break
                 case 'inline':
                 default:
-                    _a.#templates.set(this.pickerStyle, $(String.raw `
-          <label part="root picker-stack">
-          <div part="root picker-label-stack">
-            <slot name="label"></slot>
-          </div>
-          <div part="root picker-input-stack">
-            <slot></slot>
-          </div>
-          <slot name="list" hidden></slot>
-          <slot name="validity-options" hidden></slot>
-        </label>`));
+                    _a.#templates.set(this.pickerStyle, $(html ` <label part="root picker-stack">
+                <div part="root picker-label-stack">
+                  <slot name="label"></slot>
+                </div>
+                <div part="root picker-input-stack">
+                  <slot></slot>
+                </div>
+                <slot name="list" hidden></slot>
+                <slot name="validity-options" hidden></slot>
+              </label>`));
                     break;
             }
         return _a.#templates.get(this.pickerStyle);
@@ -985,7 +986,7 @@ export class PickerView extends FormAssociatedBase {
     #reflectLabel(value) {
         if (devFlags.debug)
             console.debug(`${_a.name} #reflectLabel`);
-        queryMorph('[slot=label]', htmx `<label-view slot="label">${value ? htmx `<span>${value}</span>` : null}</label-view>`, this);
+        queryMorph('[slot=label]', html `<label-view slot="label">${value ? html `<span>${value}</span>` : null}</label-view>`, this);
         this.#renderSlotted([]);
     }
     #reflectSelectionOnButtons() {
@@ -1033,8 +1034,8 @@ export class PickerView extends FormAssociatedBase {
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
                     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 });
-                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
+                    queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
                     // 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
@@ -1048,8 +1049,8 @@ export class PickerView extends FormAssociatedBase {
                     // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
                     // else currentValueLabel.removeAttribute('foreground')
                     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 });
-                    queryMorph('[slot=icon]', htmx `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
+                    queryMorph(':not([slot])', html `<span>${title}</span>`, currentValueLabel, { removeIf: !title });
+                    queryMorph('[slot=icon]', html `<image-view slot="icon" system-name="${systemImage}"></image-view>`, currentValueLabel, { removeIf: !systemImage });
                     // 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