@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/ssr/toolbar-ssr.css

@@ -1,41 +1,75 @@
-/**
- * Optional light-DOM stylesheet for `<eun-toolbar>` in server-rendered
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
- * for Lit components). It closes the SSR flash described in the
- * eun-toolbar documentation's Server-side rendering notes : the default
- * slot (the mobile panel's own content, everything slotted in without a
- * `slot` attribute) is only ever hidden by eun-toolbar's own Shadow DOM,
- * either tucked inside a closed native popover once the element is
- * upgraded and `mobile` is true, or simply never projected anywhere once
- * upgraded and it's false. Server-rendered HTML has no Shadow DOM yet,
- * so that content renders as plain, unstyled light-DOM children instead —
- * visible, unpositioned, and often full-width/height, on top of
- * everything else on the page, until the element upgrades.
- *
- * This stylesheet lives in the host document instead, hiding that exact
- * content through `:not(:defined)`, which is true from first paint and
- * stops matching permanently the moment the browser upgrades the
- * element — handing off to eun-toolbar's own Shadow DOM at exactly the
- * point it takes over, with no gap. Safe regardless of viewport : the
- * content stays exactly as hidden post-upgrade whether `mobile` ends up
- * true (closed popover) or false (never rendered at all), so this never
- * has to guess at the breakpoint.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing "@eunomia/elements/toolbar.js" :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/toolbar-ssr.css"
- *   />
- *
- * The `start`/`center`/`end` slots aren't covered here : that content is
- * meant to stay visible (and stay part of LCP) before upgrade too, same
- * as after, so hiding it isn't this stylesheet's job. Style its own
- * pre-upgrade layout, if needed, directly with `eun-toolbar:not(:defined)`
- * in the host page's own CSS.
- */
-
-eun-toolbar:not(:defined) > :not([slot]) {
+eun-toolbar:not(:defined) > :not([slot]),
+eun-toolbar:not(:defined) > [slot="skip-links"],
+eun-toolbar:not(:defined) > [slot="menu-icon"],
+eun-toolbar:not(:defined) > [slot="close-icon"] {
   display: none;
 }
+
+eun-toolbar:not(:defined) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, 16px);
+  width: 100%;
+  height: var(--toolbar-height, 72px);
+  padding: var(--toolbar-padding, 0 24px);
+  position: sticky;
+  top: 0;
+  z-index: var(--toolbar-z-index, 100);
+}
+
+eun-toolbar[position="fixed"]:not(:defined) {
+  position: fixed;
+  inset-inline: 0;
+}
+
+eun-toolbar[position="static"]:not(:defined) {
+  position: static;
+}
+
+eun-toolbar:not(:defined) > [slot="start"] {
+  order: 1;
+}
+
+eun-toolbar:not(:defined) > [slot="center"] {
+  order: 2;
+}
+
+eun-toolbar:not(:defined) > [slot="end"] {
+  order: 3;
+}
+
+eun-toolbar:not(:defined)
+  > [slot="center"]:where(:nth-child(1 of [slot="center"])) {
+  margin-inline-start: auto;
+}
+
+eun-toolbar:not(:defined)
+  > [slot="center"]:where(:nth-last-child(1 of [slot="center"])) {
+  margin-inline-end: auto;
+}
+
+eun-toolbar:not(:defined):where(:not(:has(> [slot="center"])))
+  > [slot="end"]:where(:nth-child(1 of [slot="end"])) {
+  margin-inline-start: auto;
+}
+
+eun-toolbar:not(:defined):where(
+    :has(> [slot="start"]):has(> [slot="end"]):not(
+        :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
+      )
+  )
+  > :is([slot="start"], [slot="end"]) {
+  flex: 1 1 0;
+}
+
+eun-toolbar:not(:defined):where(
+    :has(> [slot="start"]):has(> [slot="end"]):not(
+        :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
+      )
+  )
+  > [slot="end"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/dist/types/variant.type.d.ts

@@ -3,7 +3,7 @@
  * independent of whether that something is an action being taken or a
  * state being observed. Shared by feedback/display components (alert,
  * toast, chip, tag, tooltip, progress-bar), and partly borrowed by
- * {@link EunomiaActionVariant} : a "critical" button and a "critical" alert
+ * {@link EunomiaActionColor} : a "critical" button and a "critical" alert
  * mean the same thing and must share the same red, or the app ends up with
  * two unrelated definitions of "critical" depending on whether the thing
  * wearing the color is clickable.
@@ -12,7 +12,9 @@ export type EunomiaSeverity = "info" | "success" | "warning" | "critical" | "neu
 /**
  * Canonical color union for interactive/action components (button, fab,
  * dropdown-button, toggle-group/-item, badge, modal's confirm/cancel
- * buttons). Composed of two genuinely different things sharing one visual
+ * buttons), always exposed as `color`, like tag, chip and tooltip's own
+ * {@link EunomiaTone} palette. `variant` stays reserved for a shape or
+ * style (a field's outline/fill/underline, a loader's dots, ...). Composed of two genuinely different things sharing one visual
  * slot — an action only ever needs one color, never both at once, so they
  * live in a single prop rather than two independently-precedenced ones :
  * - `"primary"` / `"secondary"` : pure emphasis/hierarchy, meaningless
@@ -26,18 +28,18 @@ export type EunomiaSeverity = "info" | "success" | "warning" | "critical" | "neu
  *   three do.
  *
  * Most components expose this union as-is ; only a genuine subset (see
- * {@link EunomiaModalConfirmVariant}) needs a further narrowing on top of it.
+ * {@link EunomiaModalConfirmColor}) needs a further narrowing on top of it.
  */
-export type EunomiaActionVariant = "primary" | "secondary" | Extract<EunomiaSeverity, "critical" | "success" | "warning">;
+export type EunomiaActionColor = "primary" | "secondary" | Extract<EunomiaSeverity, "critical" | "success" | "warning">;
 /**
- * The two-value {@link EunomiaActionVariant} subset `eun-modal`'s
- * `confirmVariant` uses — a confirm button is only ever the modal's default
+ * The two-value {@link EunomiaActionColor} subset `eun-modal`'s
+ * `confirmColor` uses — a confirm button is only ever the modal's default
  * emphasis or a destructive warning, never `secondary`/`success`/`warning`.
  */
-export type EunomiaModalConfirmVariant = Extract<EunomiaActionVariant, "primary" | "critical">;
+export type EunomiaModalConfirmColor = Extract<EunomiaActionColor, "primary" | "critical">;
 /**
  * Canonical surface-treatment union : how a component's background/border is
- * rendered, independent of its `variant`/`severity`/`color`. Always named
+ * rendered, independent of its `severity`/`color`. Always named
  * `appearance` on the components that expose it — never `type`, which stays
  * reserved for a native HTML mechanism (e.g. `eun-button`'s `type="submit"`)
  * wherever it appears.
@@ -53,8 +55,16 @@ export type EunomiaModalConfirmVariant = Extract<EunomiaActionVariant, "primary"
  * (elevated, drop shadow) doesn't share that constraint : it's a static
  * effect, not one gated behind interaction, so `eun-card` also exposes it
  * (see {@link EunomiaCardAppearance}) despite being a passive container.
+ * `underline` (a bottom border only) is a form field's own look, and
+ * `transparent` (the pale tint, see-through instead of opaque) a scheduler
+ * event chip's : each belongs to a single family, like `ghost`.
+ *
+ * `appearance` only ever paints the surface (background, border, shadow)
+ * and combines with `color`/`severity`. A property changing what is drawn
+ * (a loader's dots or bar, a skeleton's shape) is a `variant` instead,
+ * with values of its own that mean nothing outside that component.
  */
-export type EunomiaAppearance = "default" | "fill" | "outline" | "flat" | "raised" | "ghost";
+export type EunomiaAppearance = "default" | "fill" | "outline" | "flat" | "raised" | "ghost" | "underline" | "transparent";
 /**
  * The four-value {@link EunomiaAppearance} subset feedback/display components
  * (alert, toast, chip, tag, tooltip) actually use — no `raised`/`ghost`,
@@ -82,9 +92,15 @@ export type EunomiaToggleAppearance = Extract<EunomiaAppearance, "default" | "ou
  * share `ghost`'s constraint.
  */
 export type EunomiaCardAppearance = Extract<EunomiaAppearance, "default" | "fill" | "raised">;
+/**
+ * The three-value {@link EunomiaAppearance} subset text-like form fields
+ * use : a bordered box (`outline`, their default), a muted background with
+ * no border (`flat`), or a bottom border only (`underline`).
+ */
+export type EunomiaFieldAppearance = Extract<EunomiaAppearance, "outline" | "flat" | "underline">;
 /**
  * Canonical decorative, non-semantic palette : a plain brand/neutral color
- * pick with no status meaning, as opposed to {@link EunomiaActionVariant}/
+ * pick with no status meaning, as opposed to {@link EunomiaActionColor}/
  * {@link EunomiaSeverity}. Always named `color` on the components that expose
  * it.
  */

package/dist/utils/navigation.utils.d.ts

@@ -15,3 +15,17 @@
  * @param target the anchor's target, if any.
  */
 export declare function handleLinkNavigation(host: HTMLElement, event: MouseEvent, href: string | undefined, target?: string | null): void;
+/**
+ * Warns once when a host in slotted anchor mode (a native `<a>` as a direct
+ * child, `href` unset) still carries link attributes of its own. The
+ * anchor is the link in that mode, so `aria-label`, `target`, `rel` and
+ * `download` left on the host are ignored without any visible sign : a
+ * forgotten `aria-label` ends up on an element with no role, and the link
+ * loses its accessible name.
+ *
+ * @param host the link, button or card whose anchor is slotted.
+ */
+export declare function warnIgnoredHostLinkAttributes(host: HTMLElement & {
+    target?: string;
+    download?: string;
+}): void;

package/dist/utils/navigation.utils.js

@@ -42,3 +42,36 @@ export function handleLinkNavigation(host, event, href, target) {
         event.preventDefault();
     }
 }
+/**
+ * Hosts already warned by {@link warnIgnoredHostLinkAttributes}, so each
+ * one only logs once however often it updates.
+ */
+const warnedHosts = new WeakSet();
+/**
+ * Warns once when a host in slotted anchor mode (a native `<a>` as a direct
+ * child, `href` unset) still carries link attributes of its own. The
+ * anchor is the link in that mode, so `aria-label`, `target`, `rel` and
+ * `download` left on the host are ignored without any visible sign : a
+ * forgotten `aria-label` ends up on an element with no role, and the link
+ * loses its accessible name.
+ *
+ * @param host the link, button or card whose anchor is slotted.
+ */
+export function warnIgnoredHostLinkAttributes(host) {
+    if (warnedHosts.has(host)) {
+        return;
+    }
+    const ignored = ['aria-label', 'target', 'rel', 'download'].filter((name) => host.hasAttribute(name));
+    if (!ignored.includes('target') && host.target && host.target !== '_self') {
+        ignored.push('target');
+    }
+    if (!ignored.includes('download') && host.download) {
+        ignored.push('download');
+    }
+    if (!ignored.length) {
+        return;
+    }
+    warnedHosts.add(host);
+    console.warn(`<${host.localName}>: ${ignored.join(', ')} ignored on the host, since ` +
+        'the slotted <a> is the link. Move them onto the <a> itself.', host);
+}

package/dist/utils/new-tab-anchor.controller.d.ts

@@ -0,0 +1,44 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * Class of a visually-hidden "opens in a new tab" text the consumer writes
+ * inside the slotted anchor, hidden by `links-ssr.css`. It's part of the
+ * anchor's accessible name and of the server-rendered HTML, so it's
+ * announced everywhere, links lists and no-JS pages included, and the
+ * controller then leaves the anchor's `aria-description` alone.
+ */
+export declare const NEW_TAB_HINT_CLASS = "eun-new-tab-hint";
+/**
+ * Announces a slotted anchor opening in a new tab, for a link, button or
+ * card whose native `<a>` is slotted as a direct child. The anchor belongs
+ * to the consumer (and to their framework, which would undo or trip over an
+ * injected child during hydration), so the hint goes on its
+ * `aria-description` rather than into its content, leaving its text and
+ * `aria-label` untouched. A description the consumer set themselves is
+ * never overwritten, and only the one this controller wrote is ever removed.
+ * A description only reaches some assistive technology, so an anchor
+ * holding a {@link NEW_TAB_HINT_CLASS} text of its own gets none.
+ *
+ * The anchor's `target` and content can change after the first render (a
+ * framework re-render), which no `slotchange` reports, so they're observed
+ * directly and re-render the host, whose visible new-tab icon keys off
+ * {@link isBlank}.
+ */
+export declare class NewTabAnchorController implements ReactiveController {
+    #private;
+    private readonly host;
+    private readonly getAnchor;
+    private readonly getHint;
+    /**
+     * @param host the link, button or card.
+     * @param getAnchor returns the slotted anchor, or null outside that mode.
+     * @param getHint returns the localized "opens in a new tab" wording.
+     */
+    constructor(host: ReactiveControllerHost & HTMLElement, getAnchor: () => HTMLAnchorElement | null, getHint: () => string);
+    /**
+     * Whether the slotted anchor, if any, opens in a new tab.
+     */
+    get isBlank(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}

package/dist/utils/new-tab-anchor.controller.js

@@ -0,0 +1,102 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _NewTabAnchorController_instances, _NewTabAnchorController_described, _NewTabAnchorController_observer, _NewTabAnchorController_clear;
+/**
+ * Class of a visually-hidden "opens in a new tab" text the consumer writes
+ * inside the slotted anchor, hidden by `links-ssr.css`. It's part of the
+ * anchor's accessible name and of the server-rendered HTML, so it's
+ * announced everywhere, links lists and no-JS pages included, and the
+ * controller then leaves the anchor's `aria-description` alone.
+ */
+export const NEW_TAB_HINT_CLASS = "eun-new-tab-hint";
+/**
+ * Announces a slotted anchor opening in a new tab, for a link, button or
+ * card whose native `<a>` is slotted as a direct child. The anchor belongs
+ * to the consumer (and to their framework, which would undo or trip over an
+ * injected child during hydration), so the hint goes on its
+ * `aria-description` rather than into its content, leaving its text and
+ * `aria-label` untouched. A description the consumer set themselves is
+ * never overwritten, and only the one this controller wrote is ever removed.
+ * A description only reaches some assistive technology, so an anchor
+ * holding a {@link NEW_TAB_HINT_CLASS} text of its own gets none.
+ *
+ * The anchor's `target` and content can change after the first render (a
+ * framework re-render), which no `slotchange` reports, so they're observed
+ * directly and re-render the host, whose visible new-tab icon keys off
+ * {@link isBlank}.
+ */
+export class NewTabAnchorController {
+    /**
+     * @param host the link, button or card.
+     * @param getAnchor returns the slotted anchor, or null outside that mode.
+     * @param getHint returns the localized "opens in a new tab" wording.
+     */
+    constructor(host, getAnchor, getHint) {
+        _NewTabAnchorController_instances.add(this);
+        this.host = host;
+        this.getAnchor = getAnchor;
+        this.getHint = getHint;
+        /**
+         * The anchor this controller last wrote `aria-description` on, so it can
+         * clear it once the anchor stops opening in a new tab or is swapped out.
+         */
+        _NewTabAnchorController_described.set(this, void 0);
+        _NewTabAnchorController_observer.set(this, new MutationObserver((records) => {
+            const anchor = this.getAnchor();
+            if (anchor && records.some((record) => anchor.contains(record.target))) {
+                this.host.requestUpdate();
+            }
+        }));
+        host.addController(this);
+    }
+    /**
+     * Whether the slotted anchor, if any, opens in a new tab.
+     */
+    get isBlank() {
+        return this.getAnchor()?.target === "_blank";
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _NewTabAnchorController_observer, "f").observe(this.host, {
+            subtree: true,
+            childList: true,
+            attributeFilter: ["target"],
+        });
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _NewTabAnchorController_observer, "f").disconnect();
+    }
+    hostUpdated() {
+        const anchor = this.getAnchor();
+        if (__classPrivateFieldGet(this, _NewTabAnchorController_described, "f") && __classPrivateFieldGet(this, _NewTabAnchorController_described, "f") !== anchor) {
+            __classPrivateFieldGet(this, _NewTabAnchorController_instances, "m", _NewTabAnchorController_clear).call(this);
+        }
+        if (!anchor) {
+            return;
+        }
+        const ownHint = !!anchor.querySelector(`.${NEW_TAB_HINT_CLASS}`);
+        if (!this.isBlank || ownHint) {
+            if (__classPrivateFieldGet(this, _NewTabAnchorController_described, "f") === anchor) {
+                __classPrivateFieldGet(this, _NewTabAnchorController_instances, "m", _NewTabAnchorController_clear).call(this);
+            }
+            return;
+        }
+        if (__classPrivateFieldGet(this, _NewTabAnchorController_described, "f") !== anchor && anchor.hasAttribute("aria-description")) {
+            return;
+        }
+        anchor.setAttribute("aria-description", this.getHint());
+        __classPrivateFieldSet(this, _NewTabAnchorController_described, anchor, "f");
+    }
+}
+_NewTabAnchorController_described = new WeakMap(), _NewTabAnchorController_observer = new WeakMap(), _NewTabAnchorController_instances = new WeakSet(), _NewTabAnchorController_clear = function _NewTabAnchorController_clear() {
+    __classPrivateFieldGet(this, _NewTabAnchorController_described, "f")?.removeAttribute("aria-description");
+    __classPrivateFieldSet(this, _NewTabAnchorController_described, undefined, "f");
+};

package/dist/utils/rich-text.utils.d.ts

@@ -146,6 +146,39 @@ export declare function renderInline(nodes: InlineNode[]): TemplateResult;
  * @returns the formatted template.
  */
 export declare function formatRichText(text: string): TemplateResult;
+/**
+ * Strips every Markdown-lite marker from a value and returns what a reader
+ * actually sees, as a plain string : the `[align:...]` directive, `**`,
+ * `{color=name}`, link URLs and so on are removed (a link keeps its label),
+ * and one newline is kept between lines. Needs no DOM, so it runs anywhere,
+ * including on the server, unlike {@link formatRichText}.
+ *
+ * Always consistent with {@link getPlainTextLength} :
+ * `toPlainText(text).length === getPlainTextLength(text)`. Handy for
+ * structured data (JSON-LD), meta descriptions, search indexes or
+ * notifications.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the plain text.
+ */
+export declare function toPlainText(text: string): string;
+/**
+ * Converts a Markdown-lite string into an HTML string, with the same markup
+ * as {@link formatRichText} (`<p>`, `<ul>`, `<strong>`, ...). Needs no DOM
+ * and no Lit, so it fits server rendering (a Next.js Server Component, an
+ * email, an RSS feed) where {@link formatRichText}'s template can't be used.
+ *
+ * Every piece of text and every attribute is escaped, and a link whose URL
+ * uses anything other than a relative path, a fragment, `http`, `https`,
+ * `mailto` or `tel` (such as `javascript:`) is rendered as its plain label,
+ * so the result is safe to inject with `innerHTML` or React's
+ * `dangerouslySetInnerHTML`. The `[align:...]` directive is stripped, read
+ * it with {@link splitAlign} if you need it.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the HTML string.
+ */
+export declare function toHtml(text: string): string;
 /**
  * Populates a contenteditable root with the given Markdown-lite value,
  * replacing its entire content — used both for the `formatting` toolbar's

package/dist/utils/rich-text.utils.js

@@ -126,15 +126,6 @@ export function parseInlineNodes(text) {
                 continue;
             }
         }
-        // `***text***` : bold and italic together produce adjacent `**`+`*`
-        // delimiters at both ends (from nesting `<strong><em>`/`</em></strong>`),
-        // which the plain `**` check below can't tell apart from "close bold,
-        // then a stray, unmatched italic `*`" — it greedily consumes the first
-        // two of the three as bold's own closer, leaving the third orphaned
-        // with no closer of its own within the once-was-italic content, and
-        // the italic wrapping is silently lost on reparse. Handling the
-        // three-character run as one atomic unit first — same convention real
-        // Markdown uses for `***bold italic***` — avoids that ambiguity.
         if (text.startsWith("***", i)) {
             const closeIndex = text.indexOf("***", i + 3);
             if (closeIndex !== -1) {
@@ -266,6 +257,39 @@ function renderInlineNode(node) {
             return html `<a href=${node.href}>${renderInline(node.children)}</a>`;
     }
 }
+/**
+ * Splits a Markdown-lite body (without its `[align:...]` directive) into
+ * blocks : consecutive `- ` lines become one list, other non-empty lines
+ * become paragraphs, and empty lines are dropped. Shared by every output
+ * format ({@link formatRichText}, {@link toHtml}, {@link toPlainText}) so
+ * they can never disagree on what counts as a paragraph or a list.
+ *
+ * @param body the Markdown-lite body.
+ * @returns the blocks, in order.
+ */
+function splitBlocks(body) {
+    const blocks = [];
+    let list = [];
+    const flushList = () => {
+        if (list.length) {
+            blocks.push({ type: "list", items: list });
+            list = [];
+        }
+    };
+    body.split("\n").forEach((line) => {
+        const trimmed = line.trim();
+        if (trimmed.startsWith("- ")) {
+            list.push(trimmed.slice(2));
+            return;
+        }
+        flushList();
+        if (trimmed) {
+            blocks.push({ type: "paragraph", text: trimmed });
+        }
+    });
+    flushList();
+    return blocks;
+}
 /**
  * Converts a multi-line Markdown-lite string into a Lit template — see
  * {@link parseInlineNodes} for the supported inline syntax.
@@ -284,30 +308,115 @@ function renderInlineNode(node) {
  */
 export function formatRichText(text) {
     const { body } = splitAlign(text);
-    const blocks = [];
-    let listBuffer = [];
-    const flushList = () => {
-        if (!listBuffer.length) {
-            return;
-        }
-        blocks.push(html `<ul>
-        ${listBuffer.map((item) => html `<li>${renderInline(parseInlineNodes(item))}</li>`)}
-      </ul>`);
-        listBuffer = [];
-    };
-    body.split("\n").forEach((line) => {
-        const trimmed = line.trim();
-        if (trimmed.startsWith("- ")) {
-            listBuffer.push(trimmed.slice(2));
-            return;
+    return html `${splitBlocks(body).map((block) => block.type === "list"
+        ? html `<ul>
+          ${block.items.map((item) => html `<li>${renderInline(parseInlineNodes(item))}</li>`)}
+        </ul>`
+        : html `<p>${renderInline(parseInlineNodes(block.text))}</p>`)}`;
+}
+function inlineToPlainText(nodes) {
+    return nodes
+        .map((node) => node.type === "text" ? node.value : inlineToPlainText(node.children))
+        .join("");
+}
+/**
+ * Strips every Markdown-lite marker from a value and returns what a reader
+ * actually sees, as a plain string : the `[align:...]` directive, `**`,
+ * `{color=name}`, link URLs and so on are removed (a link keeps its label),
+ * and one newline is kept between lines. Needs no DOM, so it runs anywhere,
+ * including on the server, unlike {@link formatRichText}.
+ *
+ * Always consistent with {@link getPlainTextLength} :
+ * `toPlainText(text).length === getPlainTextLength(text)`. Handy for
+ * structured data (JSON-LD), meta descriptions, search indexes or
+ * notifications.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the plain text.
+ */
+export function toPlainText(text) {
+    const { body } = splitAlign(text);
+    const lines = body.length ? body.split("\n") : [""];
+    return lines
+        .map((line) => inlineToPlainText(parseInlineNodes(line)))
+        .join("\n");
+}
+const HTML_ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
+}
+const SAFE_URL_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:"]);
+/**
+ * Whether a link destination is safe to put in an `href` : relative URLs,
+ * fragments and the `http`, `https`, `mailto` and `tel` schemes. Anything
+ * else (`javascript:`, `data:`, ...) is refused.
+ *
+ * @param href the raw destination.
+ * @returns `true` when it can be emitted as an `href`.
+ */
+function isSafeHref(href) {
+    const normalized = href.replace(/[\u0000-\u0020]/g, "");
+    const scheme = /^([a-z][a-z0-9+.-]*:)/i.exec(normalized);
+    return !scheme || SAFE_URL_SCHEMES.has(scheme[1].toLowerCase());
+}
+function inlineToHtml(nodes) {
+    return nodes.map(inlineNodeToHtml).join("");
+}
+function inlineNodeToHtml(node) {
+    switch (node.type) {
+        case "text":
+            return escapeHtml(node.value);
+        case "bold":
+            return `<strong>${inlineToHtml(node.children)}</strong>`;
+        case "italic":
+            return `<em>${inlineToHtml(node.children)}</em>`;
+        case "underline":
+            return `<u>${inlineToHtml(node.children)}</u>`;
+        case "color": {
+            const color = findRichTextColor(node.color);
+            return `<span data-color="${escapeHtml(node.color)}" style="color: ${color?.text ?? "inherit"}">${inlineToHtml(node.children)}</span>`;
         }
-        flushList();
-        if (trimmed) {
-            blocks.push(html `<p>${renderInline(parseInlineNodes(trimmed))}</p>`);
+        case "highlight": {
+            const color = findRichTextColor(node.color);
+            return `<span data-highlight="${escapeHtml(node.color)}" style="background-color: ${color?.highlight ?? "transparent"}">${inlineToHtml(node.children)}</span>`;
         }
-    });
-    flushList();
-    return html `${blocks}`;
+        case "link":
+            return isSafeHref(node.href)
+                ? `<a href="${escapeHtml(node.href)}">${inlineToHtml(node.children)}</a>`
+                : inlineToHtml(node.children);
+    }
+}
+/**
+ * Converts a Markdown-lite string into an HTML string, with the same markup
+ * as {@link formatRichText} (`<p>`, `<ul>`, `<strong>`, ...). Needs no DOM
+ * and no Lit, so it fits server rendering (a Next.js Server Component, an
+ * email, an RSS feed) where {@link formatRichText}'s template can't be used.
+ *
+ * Every piece of text and every attribute is escaped, and a link whose URL
+ * uses anything other than a relative path, a fragment, `http`, `https`,
+ * `mailto` or `tel` (such as `javascript:`) is rendered as its plain label,
+ * so the result is safe to inject with `innerHTML` or React's
+ * `dangerouslySetInnerHTML`. The `[align:...]` directive is stripped, read
+ * it with {@link splitAlign} if you need it.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the HTML string.
+ */
+export function toHtml(text) {
+    const { body } = splitAlign(text);
+    return splitBlocks(body)
+        .map((block) => block.type === "list"
+        ? `<ul>${block.items
+            .map((item) => `<li>${inlineToHtml(parseInlineNodes(item))}</li>`)
+            .join("")}</ul>`
+        : `<p>${inlineToHtml(parseInlineNodes(block.text))}</p>`)
+        .join("");
 }
 /**
  * Builds one `<p>` per line of `body`, each with its inline Markdown-lite
@@ -351,13 +460,6 @@ function buildParagraphs(body) {
     render(html `${lines.map((line) => html `<p>${renderInline(parseInlineNodes(line))}</p>`)}`, scratch);
     stripComments(scratch);
     const paragraphs = Array.from(scratch.children);
-    // A genuinely empty <p> (an empty line, most commonly the sole paragraph
-    // of an otherwise-empty field) has no content a browser can anchor a
-    // caret inside — clicking into it then often places the caret at the
-    // *root* level instead, right before the <p>, so anything typed lands
-    // there as a stray text node the block-based serializer never sees
-    // (value silently stays empty forever). A <br> gives every empty
-    // paragraph a real caret position of its own.
     paragraphs.forEach((paragraph) => {
         if (!paragraph.hasChildNodes()) {
             paragraph.appendChild(document.createElement("br"));
@@ -394,20 +496,9 @@ const INLINE_TAG_MARKERS = {
 };
 function serializeInlineNode(node) {
     if (node.nodeType === Node.TEXT_NODE) {
-        // U+200B (zero-width space) : the textarea's own toolbar uses it as an
-        // invisible caret anchor for a "pending" mark toggled with nothing
-        // selected (see textarea.ts's `PENDING_CARET_TEXT`) ; a real character
-        // a browser can place a caret next to inside an otherwise-empty inline
-        // element, but never meant to be real content, so it never survives
-        // into `value`.
         return (node.textContent ?? "").replace(/\u200B/g, "");
     }
     if (node.nodeName === "BR") {
-        // The editor only ever inserts a `<br>` as an empty paragraph's sole
-        // child (so it stays focusable/visible) — never as a mid-paragraph soft
-        // break — so it always serializes to nothing, not a newline (block
-        // boundaries already produce one `\n` per paragraph in
-        // `serializeEditableRoot`).
         return "";
     }
     if (!(node instanceof HTMLElement)) {