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

package/generated/components/progress-view.js

@@ -2,8 +2,9 @@ var _a;
 import { CleanupRegistry } from '../internal/class/cleanup-registry';
 import { CSSStyleObserver } from '../internal/class/css-style-observer';
 import { $, devFlags } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
 const progressViewStyles = ['circular', 'linear'];
 /**
  * @summary A view that shows how far along a task is.
@@ -28,27 +29,27 @@ export class ProgressView extends HTMLElement {
         if (!_a.#templates.has(this.progressViewStyle))
             switch (this.progressViewStyle) {
                 case 'linear':
-                    _a.#templates.set(this.progressViewStyle, $(String.raw `
-            <slot></slot>
-            <div part="root progress-control progress-line-control"></div>
-            <slot name="current-value"></slot>
+                    _a.#templates.set(this.progressViewStyle, $(html `
+              <slot></slot>
+              <div part="root progress-control progress-line-control"></div>
+              <slot name="current-value"></slot>
             `));
                     break;
                 case 'circular':
                 default:
-                    _a.#templates.set(this.progressViewStyle, $(String.raw `
-            <div part="root progress-control progress-circular-control">
-              <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
-              <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
-            </div>
-            <slot></slot>
-            <slot name="current-value"></slot>
+                    _a.#templates.set(this.progressViewStyle, $(html `
+              <div part="root progress-control progress-circular-control">
+                <div part="root progress-control progress-circular-blade progress-circular-blade-1"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-2"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-3"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-4"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-5"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-6"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-7"></div>
+                <div part="root progress-control progress-circular-blade progress-circular-blade-8"></div>
+              </div>
+              <slot></slot>
+              <slot name="current-value"></slot>
             `));
                     break;
             }
@@ -63,7 +64,7 @@ export class ProgressView extends HTMLElement {
             console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
         switch (name) {
             case 'label': {
-                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(`<label-view foreground="secondary"></label-view>`, '>1'));
+                const label = this.querySelector(':scope>label-view:not([slot])') ?? this.appendChild($(html `<label-view foreground="secondary"></label-view>`, '>1'));
                 if (newValue) {
                     label.setAttribute('title', newValue);
                 }

package/generated/components/scroll-view.js

@@ -3,7 +3,8 @@ 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, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A view that scrolls its content when it doesn’t fit the screen.
@@ -27,18 +28,17 @@ export class ScrollView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <slot></slot>
-  <div part="root scroll-view-navbar">
-    <div part="root scroll-view-navbar-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-  </div>
-  <div part="root scroll-view-toolbar">
-    <div part="root scroll-view-toolbar-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-  </div>`));
+        return (this.#template ??= $(html `<slot></slot>
+        <div part="root scroll-view-navbar">
+          <div part="root scroll-view-navbar-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+        </div>
+        <div part="root scroll-view-toolbar">
+          <div part="root scroll-view-toolbar-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     #slots = new Map();
@@ -230,7 +230,7 @@ export class ScrollView extends HTMLElement {
         // 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'));
+        const container = this.querySelector(':scope>v-stack') ?? this.appendChild($(html `<v-stack></v-stack>`, '>1'));
         queryMorph('navigation-title:not([slot])', html `<navigation-title value="${title}" subtitle="${subtitle}" system-image="${icon}" padding></navigation-title>`, container);
     };
 }

package/generated/components/section-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 container view that groups related content together.
  *
@@ -13,16 +14,15 @@ export class SectionView extends HTMLElement {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-  <div part="root section-main-stack">
-    <slot></slot>
-  </div>
-  <div part="root section-header-stack">
-    <slot name="header"></slot>
-  </div>
-  <div part="root section-footer-stack">
-    <slot name="footer"></slot>
-  </div>`));
+        return (this.#template ??= $(html `<div part="root section-main-stack">
+          <slot></slot>
+        </div>
+        <div part="root section-header-stack">
+          <slot name="header"></slot>
+        </div>
+        <div part="root section-footer-stack">
+          <slot name="footer"></slot>
+        </div>`));
         // <div class="sticky-sentinel" style="grid-area:sentinel;inline-size:100%;block-size:0.1px;pointer-events:none;"></div>
     }
     #shadowRoot;

package/generated/components/table-view.js

@@ -3,8 +3,9 @@ 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 } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
 import { Snapshot } from '../snapshot';
+import { html } from '../tpl';
 /**
  * @summary A container view that arranges data in rows and columns, optionally letting the user select one or more of them.
  *
@@ -24,35 +25,34 @@ export class TableView extends HTMLElement {
     #compactToolbarItem;
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <div part="root table-container">
-      <div part="root table-header-stack">
-        <div part="root table-header-leading-stack">
-          <slot name="header-leading"></slot>
+        return (this.#template ??= $(html `<div part="root table-container">
+        <div part="root table-header-stack">
+          <div part="root table-header-leading-stack">
+            <slot name="header-leading"></slot>
+          </div>
+          <div part="root table-header-principal-stack">
+            <slot name="header-principal"></slot>
+          </div>
+          <div part="root table-header-trailing-stack">
+            <slot name="header-trailing"></slot>
+          </div>
         </div>
-        <div part="root table-header-principal-stack">
-          <slot name="header-principal"></slot>
+        <div part="root table-column-stack">
+          <slot name="column"></slot>
         </div>
-        <div part="root table-header-trailing-stack">
-          <slot name="header-trailing"></slot>
+        <slot><p>empty</p></slot>
+        <div part="root table-footer-stack">
+          <div part="root table-footer-leading-stack">
+            <slot name="footer-leading"></slot>
+          </div>
+          <div part="root table-footer-principal-stack">
+            <slot name="footer-principal"></slot>
+          </div>
+          <div part="root table-footer-trailing-stack">
+            <slot name="footer-trailing"></slot>
+          </div>
         </div>
-      </div>
-      <div part="root table-column-stack">
-        <slot name="column"></slot>
-      </div>
-      <slot><p>empty</p></slot>
-      <div part="root table-footer-stack">
-        <div part="root table-footer-leading-stack">
-          <slot name="footer-leading"></slot>
-        </div>
-        <div part="root table-footer-principal-stack">
-          <slot name="footer-principal"></slot>
-        </div>
-        <div part="root table-footer-trailing-stack">
-          <slot name="footer-trailing"></slot>
-        </div>
-      </div>
-    </div>`));
+      </div>`));
     }
     #shadowRoot;
     #slots = new Map();
@@ -102,7 +102,7 @@ export class TableView extends HTMLElement {
         if (devFlags.debug)
             console.debug(`${_a.name} ⚡️ mutation`);
         if (!this.#compactToolbarItem) {
-            this.#compactToolbarItem = $(`<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
+            this.#compactToolbarItem = $(html `<menu-view tabindex="0" slot="header-trailing"></menu-view>`, '>1');
             CleanupRegistry.unregister(this, 'compact_toolbar');
             CleanupRegistry.register(this, onoff('click', this.#handleMenuClick, this.#compactToolbarItem).on(), 'compact_toolbar');
         }
@@ -110,12 +110,12 @@ export class TableView extends HTMLElement {
         for (const node of this.#slots?.get('column')?.assignedElements({ flatten: true }) ?? []) {
             if (!node.matches('[is=table-column]'))
                 continue;
-            const btn = $(`<button type="button" tabindex="0">
-        <v-stack spacing="0" alignment="leading">
-          <label-view></label-view>
-          <label-view font="callout" foreground="secondary"></label-view>
-        </v-stack>
-      </button>`, '>1'), title = btn.querySelector('label-view:first-child') ?? undefined, subTitle = btn.querySelector('label-view:last-child') ?? undefined;
+            const btn = $(html `<button type="button" tabindex="0">
+            <v-stack spacing="0" alignment="leading">
+              <label-view></label-view>
+              <label-view font="callout" foreground="secondary"></label-view>
+            </v-stack>
+          </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() });
             queryMorph(':not([slot])', html `<span>${node.ariaSort ?? ''}</span>`, subTitle, { removeIf: !(node.ariaSort ?? '') });
             this.#compactToolbarItem.appendChild(btn);

package/generated/components/text-field.d.ts

@@ -4,6 +4,8 @@ export type KeyboardType = (typeof keyboardTypes)[number];
 /**
  * @summary A control that displays an editable text area.
  *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
  * @slot validity-options
  */

package/generated/components/text-field.js

@@ -4,11 +4,14 @@ 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, set } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
 /**
  * @summary A control that displays an editable text area.
  *
+ * @fires {{ detail: { text: string } }} commit — Triggered when user interacts with the input area
+ *
  * @slot label
  * @slot validity-options
  */
@@ -44,16 +47,15 @@ export class TextField extends FormAssociatedBase {
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root text-field-stack">
-    <div part="root text-field-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root text-field-input-stack">
-      <input type="text" part="root input text-field-form-input">
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`));
+        return (this.#template ??= $(html `<label part="root text-field-stack">
+        <div part="root text-field-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root text-field-input-stack">
+          <input type="text" part="root input text-field-form-input" />
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)

package/generated/components/toggle-view.js

@@ -3,7 +3,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 { $, devFlags, kebabCase, onoff } from '../internal/utils';
-import { html, queryMorph } from '../morphdom';
+import { queryMorph } from '../morphdom';
+import { html } from '../tpl';
 const toggleStyles = ['switch', 'button'];
 /**
  * @summary A control that switches between on and off states.
@@ -15,21 +16,37 @@ const toggleStyles = ['switch', 'button'];
  */
 export class ToggleView extends FormAssociatedBase {
     static get observedAttributes() {
-        return ['label', 'name', 'value', 'is-on', 'keyboard-type', 'required', 'disabled'];
+        return [
+            'label',
+            'name',
+            'value',
+            /**
+             * @type {boolean}
+             */
+            'is-on',
+            'keyboard-type',
+            /**
+             * @type {boolean}
+             */
+            'required',
+            /**
+             * @type {boolean}
+             */
+            'disabled',
+        ];
     }
     static #template;
     static get template() {
-        return (this.#template ??= $(String.raw `
-    <label part="root toggle-stack">
-    <div part="root toggle-label-stack">
-      <slot name="label"></slot>
-    </div>
-    <div part="root toggle-input-stack">
-      <!--<input type="checkbox" part="root input toggle-form-input">-->
-      <div part="root toggle-form-input" tabindex="0"></div>
-    </div>
-    <slot name="validity-options" hidden></slot>
-  </label>`));
+        return (this.#template ??= $(html `<label part="root toggle-stack">
+        <div part="root toggle-label-stack">
+          <slot name="label"></slot>
+        </div>
+        <div part="root toggle-input-stack">
+          <!--<input type="checkbox" part="root input toggle-form-input">-->
+          <div part="root toggle-form-input" tabindex="0"></div>
+        </div>
+        <slot name="validity-options" hidden></slot>
+      </label>`));
     }
     #renderValidityMsgs = (entries) => {
         if (devFlags.debug)

package/generated/components/tool-bar.js

@@ -1,6 +1,7 @@
 var _a;
 import { ResizeObserverSingleton } from '../internal/class/resize-observer-singleton';
 import { $, devFlags } from '../internal/utils';
+import { html } from '../tpl';
 const observers = new ResizeObserverSingleton();
 /**
  * @summary A list of items placed into the toolbar or navigation bar around your content.
@@ -20,33 +21,32 @@ export class ToolBar extends HTMLElement {
     static #template;
     static get template() {
         // <!--exportparts="toolbar-leading-stack,toolbar-principal-stack,toolbar-trailing-stack"-->
-        return (this.#template ??= $(String.raw `
-    <div part="root top-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="cancellation-action"></slot>
-      <slot name="destructive-action"></slot>
-      <slot name="top-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="top-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="top-bar-trailing"></slot>
-      <slot name="primary-action"></slot>
-      <slot name="confirmation-action"></slot>
-    </div>
-  </div>
-  <div part="root bottom-bar">
-    <div part="root toolbar-leading-stack">
-      <slot name="bottom-bar-leading"></slot>
-    </div>
-    <div part="root toolbar-principal-stack">
-      <slot name="bottom-bar-principal"></slot>
-    </div>
-    <div part="root toolbar-trailing-stack">
-      <slot name="bottom-bar-trailing"></slot>
-    </div>
-  </div>`));
+        return (this.#template ??= $(html `<div part="root top-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="cancellation-action"></slot>
+            <slot name="destructive-action"></slot>
+            <slot name="top-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="top-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="top-bar-trailing"></slot>
+            <slot name="primary-action"></slot>
+            <slot name="confirmation-action"></slot>
+          </div>
+        </div>
+        <div part="root bottom-bar">
+          <div part="root toolbar-leading-stack">
+            <slot name="bottom-bar-leading"></slot>
+          </div>
+          <div part="root toolbar-principal-stack">
+            <slot name="bottom-bar-principal"></slot>
+          </div>
+          <div part="root toolbar-trailing-stack">
+            <slot name="bottom-bar-trailing"></slot>
+          </div>
+        </div>`));
     }
     #shadowRoot;
     get #scrollView() {

package/generated/internal/utils/cash/index.d.ts

@@ -1,3 +1,4 @@
+import { type TemplateResult } from '../../../tpl';
 import ancestors from './ancestors';
 import next from './next';
 import nextAll from './next-all';
@@ -7,9 +8,9 @@ import prop from './prop';
 import siblings from './siblings';
 declare const DEFAULT: ">1";
 interface CashFn {
-    (innerHTML: string): DocumentFragment;
-    <T extends Element = Element>(innerHTML: string, selector: typeof DEFAULT): T;
-    <T extends Element = Element>(innerHTML: string, selector: string): T;
+    (markup: TemplateResult): DocumentFragment;
+    <T extends Element = Element>(markup: TemplateResult, selector: typeof DEFAULT): T;
+    <T extends Element = Element>(markup: TemplateResult, selector: string): T;
     prop: typeof prop;
     nextAll: typeof nextAll;
     prevAll: typeof prevAll;

package/generated/internal/utils/cash/index.js

@@ -1,3 +1,4 @@
+import { renderToString } from '../../../morphdom';
 import ancestors from './ancestors';
 import next from './next';
 import nextAll from './next-all';
@@ -6,8 +7,9 @@ import prevAll from './prev-all';
 import prop from './prop';
 import siblings from './siblings';
 const DEFAULT = '>1';
-const cash = ((innerHTML, selector) => {
-    const template = Object.assign(document.createElement('template'), { innerHTML });
+const cash = ((markup, selector) => {
+    // NOTE: Use also runtime check isTemplateResult()??
+    const template = Object.assign(document.createElement('template'), { innerHTML: renderToString(markup).toString() });
     if (!selector)
         return template.content;
     if (selector === DEFAULT)

package/generated/internal/utils/ensure-placeholder.js

@@ -1,5 +1,6 @@
 import { I18n } from '../../i18n';
-import { html, queryMorph } from '../../morphdom';
+import { queryMorph } from '../../morphdom';
+import { html } from '../../tpl';
 export default function (target, role, titleKey, config) {
     if (!target)
         return;

package/generated/morphdom/index.d.ts

@@ -1,6 +1,8 @@
-export { default as html } from './html';
-export * from './html';
 export { default as morph } from './morph';
 export * from './morph';
 export { default as queryMorph } from './query-morph';
 export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/index.js

@@ -1,6 +1,8 @@
-export { default as html } from './html';
-export * from './html';
 export { default as morph } from './morph';
 export * from './morph';
 export { default as queryMorph } from './query-morph';
 export * from './query-morph';
+export { default as renderToString } from './render-to-string';
+export * from './render-to-string';
+export { default as unsafeHtml } from './unsafe-html';
+export * from './unsafe-html';

package/generated/morphdom/morph.d.ts

@@ -1,4 +1,4 @@
-import type { TrustedMarkup } from './html';
-export default function (template: TrustedMarkup, fromEl?: Element, options?: {
+import type { TemplateResult } from '../tpl';
+export default function (markup: TemplateResult, fromEl?: Element, options?: {
     cb: () => void;
 }): void;

package/generated/morphdom/morph.js

@@ -1,8 +1,9 @@
 import morphdom from '../internal/vendor/morphdom';
-export default function (template, fromEl, options) {
+import renderToString from './render-to-string';
+export default function (markup, fromEl, options) {
     if (!fromEl)
         return;
-    morphdom(fromEl, template.toString(), {
+    morphdom(fromEl, renderToString(markup).toString(), {
         onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
         onBeforeElChildrenUpdated: (fromEl, toEl) => !toEl.matches('image-view,navigation-title'), // NOTE: image-view will alter it's contents! This is required to not empty it up again!
     });

package/generated/morphdom/query-morph.d.ts

@@ -1,5 +1,5 @@
-import type { TrustedMarkup } from './html';
-export default function (scopedSelector: string, template: TrustedMarkup, container?: Element, options?: {
+import type { TemplateResult } from '../tpl';
+export default function (scopedSelector: string, template: TemplateResult, container?: Element, options?: {
     cb?: () => boolean;
     removeIf?: boolean;
 }): void;

package/generated/morphdom/query-morph.js

@@ -5,7 +5,7 @@ export default function (scopedSelector, template, container, options) {
         return;
     if ('boolean' === typeof options?.removeIf && options?.removeIf)
         return container?.querySelector(`:scope>${scopedSelector}`)?.remove();
-    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template.toString(), '>1'));
+    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template, '>1'));
     if (!fromEl)
         return;
     morph(template, fromEl);

package/generated/morphdom/render-to-string.d.ts

@@ -0,0 +1,12 @@
+import { type TemplateResult } from '../tpl';
+export declare class TrustedMarkup {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template: TemplateResult): TrustedMarkup;

package/generated/morphdom/render-to-string.js

@@ -0,0 +1,48 @@
+import { isTemplateResult } from '../tpl';
+// morph.ts and queryMorph.ts only need something with `.toString()` that
+// yields a safe, escaped HTML string — this is that, built on top of the
+// same TemplateResult instead of a separate tag function.
+// values built via `raw` itself are trusted markup; wrap them so `stringify`
+// knows to skip escaping — same idea as lit-html's `unsafeHTML`
+export class TrustedMarkup {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch]);
+}
+function stringifyValue(value) {
+    if (value === null || value === undefined || value === false)
+        return '';
+    if (value instanceof TrustedMarkup)
+        return value.value;
+    if (isTemplateResult(value))
+        return renderToString(value).value;
+    if (Array.isArray(value))
+        return value.map(stringifyValue).join('');
+    return escapeHtml(String(value));
+}
+/**
+ * Flatten a TemplateResult (from `html`) into an escaped TrustedMarkup
+ * string. Use this only at morph/queryMorph call sites — anywhere feeding
+ * `render()` should keep passing the raw TemplateResult straight through.
+ */
+export default function renderToString(template) {
+    let out = template.strings[0];
+    for (let i = 0; i < template.values.length; i++) {
+        out += stringifyValue(template.values[i]) + template.strings[i + 1];
+    }
+    return new TrustedMarkup(out.replace(/>\s+</g, '><').trim());
+}

package/generated/morphdom/unsafe-html.d.ts

@@ -0,0 +1,2 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value: string): TrustedMarkup;

package/generated/morphdom/unsafe-html.js

@@ -0,0 +1,4 @@
+import { TrustedMarkup } from './render-to-string';
+export default function (value) {
+    return new TrustedMarkup(value);
+}

package/generated/tpl/html.js

@@ -1,3 +1,7 @@
+// Purely structural — captures strings/values as-is. render.ts relies on
+// `strings` identity (TemplateStringsArray) for its template cache, so this
+// must stay exactly this shape: no wrapping, no cloning, no new object
+// allocation beyond the literal { strings, values }.
 export default function (strings, ...values) {
     return { strings, values };
 }