@nldd/design-system 0.8.86 → 0.8.88

package/dist/components/components.js

@@ -3,14 +3,14 @@ import { n as slottedReset, t as inheritedTextReset } from "./shadow-resets-aG-r
 import { t as __decorate } from "./decorate-lwt_OrAG.js";
 import { t as withTranslations } from "./with-translations-CqUV9S5g.js";
 import { t as reflectNonDefault } from "./reflect-non-default-OLaK60rT.js";
-import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-CXN0yaVx.js";
-import { t as NLDDIcon } from "./icon-Cd4BloIM.js";
+import { i as PopupAnchorController, n as NLDDTooltip, r as NLDDActivityIndicator, t as NLDDIconButton } from "./icon-button-CEz4MB9H.js";
+import { t as NLDDIcon } from "./icon-C_zwJZ_g.js";
 import { n as isPointerMode, r as isTouchMode, t as isKeyboardMode } from "./input-modality-DhTeUxKi.js";
 import { t as breakpoints } from "./breakpoints-CkxsiRgH.js";
 import { t as VisibilityMixin } from "./visibility-mixin-BU1vIMW7.js";
-import { $ as placeholder, A as syntaxTree, B as Tree, C as indentNodeProp, D as matchBrackets, E as languageDataProp, F as NodeProp, G as ViewPlugin, H as Decoration, I as NodeSet, J as dropCursor, K as WidgetType, L as NodeType, M as styleTags, N as tags, S as getIndentation, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as keymap, Z as lineNumbers, a as HighlightStyle, at as EditorSelection, b as foldService, bt as findClusterBreak, c as Language, d as ParseContext, f as StreamLanguage, ft as StateEffect, h as defineLanguageFacet, ht as Transaction, it as Compartment, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as Prec, mt as Text, nt as ChangeDesc, o as IndentContext, ot as EditorState, pt as StateField, q as drawSelection, rt as ChangeSet, st as Facet, tt as Annotation, u as LanguageSupport, ut as RangeSetBuilder, vt as combineConfig, w as indentString, x as getIndentUnit, y as foldNodeProp, yt as countColumn, z as Parser } from "./dist-C6gnorjP.js";
-import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-B_3OW7pC.js";
-import { n as html$2, r as htmlCompletionSource } from "./dist-762GHPyH.js";
+import { $ as layer, A as syntaxTree, B as Tree, C as indentNodeProp, Ct as findClusterBreak, D as matchBrackets, E as languageDataProp, F as NodeProp, G as RectangleMarker, H as Decoration, I as NodeSet, J as drawSelection, K as ViewPlugin, L as NodeType, M as styleTags, N as tags, Q as keymap, S as getIndentation, St as countColumn, T as indentUnit, U as Direction, V as parseMixed, W as EditorView, X as getDrawSelectionConfig, Y as dropCursor, _t as Text, a as HighlightStyle, at as ChangeDesc, b as foldService, c as Language, ct as EditorSelection, d as ParseContext, et as lineNumbers, f as StreamLanguage, ft as Prec, gt as StateField, h as defineLanguageFacet, ht as StateEffect, it as Annotation, j as Tag, k as syntaxHighlighting, l as LanguageDescription, lt as EditorState, nt as placeholder, o as IndentContext, ot as ChangeSet, pt as RangeSetBuilder, q as WidgetType, st as Compartment, u as LanguageSupport, ut as Facet, vt as Transaction, w as indentString, x as getIndentUnit, xt as combineConfig, y as foldNodeProp, z as Parser } from "./dist-fIxe0l7k.js";
+import { i as completionStatus, n as autocompletion, s as startCompletion, t as CompletionContext } from "./dist-CgDuh26K.js";
+import { n as html$2, r as htmlCompletionSource } from "./dist-CX3DK4i7.js";
 import { LitElement, css, html, nothing, svg, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -1956,7 +1956,7 @@ function template$21() {
 * @element nldd-icon-cell
 * @attr {string} vertical-alignment - Vertical alignment: 'top' | 'center' | 'bottom' (default: 'center')
 * @attr {string} size - Size: '16' | '20' | '24' | '32' (default: '24')
-* @attr {'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'} color - Color variant of the icon (default: 'default')
+* @attr {'content' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'} color - Color variant of the icon (default: 'content')
 * @attr {string} icon - Icon name (renders `<nldd-icon>`). Takes precedence over the default slot.
 *
 * @slot - Fallback for custom icon content when `icon` is not set.
@@ -1968,7 +1968,7 @@ var NLDDIconCell = (_NLDDIconCell = class NLDDIconCell extends VisibilityMixin(L
 		super(..._args);
 		this.verticalAlignment = "center";
 		this.size = "24";
-		this.color = "default";
+		this.color = "content";
 		this.icon = "";
 	}
 	render() {
@@ -1986,7 +1986,7 @@ __decorate([property({
 })], NLDDIconCell.prototype, "size", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("default")
+	converter: reflectNonDefault("content")
 })], NLDDIconCell.prototype, "color", void 0);
 __decorate([property({
 	type: String,
@@ -2364,7 +2364,7 @@ function template$20() {
 *
 * @element nldd-text-cell
 * @attr {string} size - Cell size: 'sm' | 'md' (default: 'md')
-* @attr {string} color - Text color variant: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' (default: 'default'). All non-default/-secondary variants apply to all three text fields so the cell reads as a coherent state.
+* @attr {string} color - Text color variant: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'. All variants other than those two apply to all three text fields so the cell reads as a coherent state.
 * @attr {string} width - 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full'
 * @attr {string} min-width - Minimum width as CSS length (e.g. '80px', '5rem')
 * @attr {string} max-width - Maximum width as CSS length (e.g. '200px', '20rem')
@@ -2401,7 +2401,7 @@ var NLDDTextCell = (_NLDDTextCell = class NLDDTextCell extends VisibilityMixin(L
 	constructor(..._args) {
 		super(..._args);
 		this.size = "md";
-		this.color = "default";
+		this.color = "content";
 		this.width = "full";
 		this.horizontalAlignment = "left";
 		this.verticalAlignment = "center";
@@ -2458,7 +2458,7 @@ __decorate([property({
 })], NLDDTextCell.prototype, "size", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("default")
+	converter: reflectNonDefault("content")
 })], NLDDTextCell.prototype, "color", void 0);
 __decorate([property({
 	reflect: true,
@@ -2878,7 +2878,7 @@ var inlineDialogStyles = css`
 
 	/* # Elements */
 
-	.inline-dialog__body {
+	.inline-dialog {
 		box-sizing: border-box;
 		display: flex;
 		max-width: var(--primitives-area-480);
@@ -2887,6 +2887,10 @@ var inlineDialogStyles = css`
 		align-items: center;
 	}
 
+	.inline-dialog--left-aligned {
+		align-items: stretch;
+	}
+
 	.inline-dialog__main {
 		display: flex;
 		width: 100%;
@@ -2895,6 +2899,10 @@ var inlineDialogStyles = css`
 		gap: var(--primitives-space-2);
 	}
 
+	.inline-dialog--left-aligned .inline-dialog__main {
+		align-items: stretch;
+	}
+
 	.inline-dialog__icon {
 		display: flex;
 		width: var(--_icon-size);
@@ -2926,8 +2934,21 @@ var inlineDialogStyles = css`
 		text-wrap: pretty;
 	}
 
+	.inline-dialog--left-aligned .inline-dialog__text,
+	.inline-dialog--left-aligned .inline-dialog__supporting-text {
+		text-align: left;
+	}
+
 	.inline-dialog__content {
+		display: flex;
 		width: 100%;
+		flex-direction: column;
+		align-items: center;
+		padding-top: var(--primitives-space-16);
+	}
+
+	.inline-dialog--left-aligned .inline-dialog__content {
+		align-items: stretch;
 	}
 
 	.inline-dialog__content[hidden] {
@@ -2946,8 +2967,10 @@ var inlineDialogStyles = css`
 //#endregion
 //#region src/components/status-and-feedback/inline-dialog/inline-dialog.template.ts
 function inlineDialogTemplate(component) {
+	const alignment = component._resolvedHorizontalAlignment;
+	const blockClass = ["inline-dialog", alignment === "left" ? "inline-dialog--left-aligned" : ""].filter(Boolean).join(" ");
 	return html`
-		<div class="inline-dialog__body">
+		<div class=${blockClass}>
 			<div class="inline-dialog__main">
 				${component.variant === "loading" ? html`
 					<div class="inline-dialog__icon">
@@ -2976,7 +2999,7 @@ function inlineDialogTemplate(component) {
 			<div class="inline-dialog__footer"
 				?hidden=${!component._hasActions}
 			>
-				<nldd-button-group orientation="vertical">
+				<nldd-button-group orientation=${alignment === "left" ? "horizontal" : "vertical"}>
 					<slot name="actions"></slot>
 				</nldd-button-group>
 			</div>
@@ -3110,6 +3133,7 @@ NLDDButtonGroup = __decorate([customElement("nldd-button-group")], NLDDButtonGro
 * @attr {string} text - Main text (heading or paragraph, depending on heading-level)
 * @attr {string} supporting-text - Supporting text below the heading
 * @attr {1|2|3|4|5|6} heading-level - Renders text as h1–h6; absent renders a p
+* @attr {'left'|'center'} horizontal-alignment - Overrides the alignment of text, icon and actions. Unset (the default) derives it: content in the default slot means a task, which aligns left; a bare message stays centered. Left alignment also lays the actions out in a row instead of stacked full-width.
 *
 * @slot - Optional custom content between text and actions
 * @slot actions - nldd-button elements, wrapped in nldd-button-group (max 3)
@@ -3125,6 +3149,7 @@ var NLDDInlineDialog = (_NLDDInlineDialog = class NLDDInlineDialog extends LitEl
 		this.text = "";
 		this.supportingText = "";
 		this.headingLevel = null;
+		this.horizontalAlignment = "";
 		this._hasContent = false;
 		this._hasActions = false;
 	}
@@ -3134,6 +3159,14 @@ var NLDDInlineDialog = (_NLDDInlineDialog = class NLDDInlineDialog extends LitEl
 		if (this.icon) return this.icon;
 		return "";
 	}
+	/** Anything in the default slot is a task (a form, a list) rather than a
+	*  message, and a task reads left-aligned. Derived rather than defaulted so
+	*  the empty state — the other half of this component — stays centered
+	*  without every consumer setting an attribute. */
+	get _resolvedHorizontalAlignment() {
+		if (this.horizontalAlignment) return this.horizontalAlignment;
+		return this._hasContent ? "left" : "center";
+	}
 	firstUpdated() {
 		const contentSlot = this.shadowRoot?.querySelector("slot:not([name])");
 		const actionsSlot = this.shadowRoot?.querySelector("slot[name=\"actions\"]");
@@ -3188,6 +3221,11 @@ __decorate([property({
 	reflect: true,
 	attribute: "heading-level"
 })], NLDDInlineDialog.prototype, "headingLevel", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "horizontal-alignment",
+	converter: reflectNonDefault("")
+})], NLDDInlineDialog.prototype, "horizontalAlignment", void 0);
 __decorate([state()], NLDDInlineDialog.prototype, "_hasContent", void 0);
 __decorate([state()], NLDDInlineDialog.prototype, "_hasActions", void 0);
 NLDDInlineDialog = __decorate([customElement("nldd-inline-dialog")], NLDDInlineDialog);
@@ -6379,8 +6417,8 @@ function avatarTemplate(component) {
 * @element nldd-avatar
 *
 * @attr {string} type - `person` (circle, person icon) or `organization` (rounded, building icon); default `person`
-* @attr {string} size - `full` (default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). Empty behaves as `full`. The initials and the icon scale along
-* @attr {string} color - `default` (neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance); default `default`
+* @attr {string} size - `full` (the default) scales with the container, like nldd-icon; or a fixed size in px (spacer-aligned: 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96). The initials and the icon scale along
+* @attr {string} color - `neutral` (the default, a neutral fill) or `inherit` (fill in the content color: the `--context-content-color` channel, or `currentColor` when that is unset; text in the contrast color, so the avatar can replace an icon in a button for instance)
 * @attr {boolean} icon-aligned - Shrinks the visible shape to 5/6 of the host, centered, so the avatar aligns optically with an icon on the same grid (an icon glyph has built-in margin)
 * @attr {string} name - Name of the person or organization; supplies the derived initials and the accessible label
 * @attr {string} initials - Explicit initials, at most 3 characters (overrides what is derived from `name`; also for organization acronyms)
@@ -6389,7 +6427,7 @@ function avatarTemplate(component) {
 * @attr {string} icon - Overrides the type-dependent fallback icon
 * @attr {string} accessible-label - Name of the link or button; without it `name` is used
 * @attr {boolean} decorative - Hides the avatar from assistive software (use when the name already stands beside it as text)
-* @attr {string} tooltip-timing - When the name appears as a tooltip on hover or focus: `default` (after 700ms; the default), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text
+* @attr {string} tooltip-timing - When the name appears as a tooltip on hover or focus: `delay` (the default, after 700ms), `instant`, or `never`. An avatar shows no text, so without a tooltip the name is readable by assistive software only. A `decorative` avatar shows none regardless: there the name already stands beside it as text
 * @attr {string} href - Makes the avatar a link to this URL; the shape itself becomes the link, so the hit area and the focus ring follow it
 * @attr {boolean} no-tab - Takes the control out of the tab order (tabindex="-1"), for an avatar that is a link or a button inside a roving container (a row of an nldd-list). Does nothing on a decorative avatar.
 * @attr {boolean} button - Makes the avatar a button; ignored when `href` is set
@@ -6416,8 +6454,8 @@ var NLDDAvatar = (_NLDDAvatar = class NLDDAvatar extends withTranslations(LitEle
 	constructor(..._args) {
 		super(..._args);
 		this.type = "person";
-		this.size = "";
-		this.color = "default";
+		this.size = "full";
+		this.color = "neutral";
 		this.iconAligned = false;
 		this.name = "";
 		this.initials = "";
@@ -6426,7 +6464,7 @@ var NLDDAvatar = (_NLDDAvatar = class NLDDAvatar extends withTranslations(LitEle
 		this.icon = "";
 		this.accessibleLabel = "";
 		this.decorative = false;
-		this.tooltipTiming = "default";
+		this.tooltipTiming = "delay";
 		this.href = "";
 		this.noTab = false;
 		this.button = false;
@@ -6527,11 +6565,11 @@ __decorate([property({
 })], NLDDAvatar.prototype, "type", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("")
+	converter: reflectNonDefault("full")
 })], NLDDAvatar.prototype, "size", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("default")
+	converter: reflectNonDefault("neutral")
 })], NLDDAvatar.prototype, "color", void 0);
 __decorate([property({
 	type: Boolean,
@@ -6554,7 +6592,7 @@ __decorate([property({
 __decorate([property({
 	reflect: true,
 	attribute: "tooltip-timing",
-	converter: reflectNonDefault("default")
+	converter: reflectNonDefault("delay")
 })], NLDDAvatar.prototype, "tooltipTiming", void 0);
 __decorate([property({
 	type: String,
@@ -9085,7 +9123,7 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		});
 	}
 	_updateEmpty() {
-		const items = this._getItems();
+		const items = this.hasUpdated ? this._getItems() : Array.from(this.querySelectorAll(":scope > nldd-list-item"));
 		this._isEmpty = items.length === 0 || items.every((item) => item.hasAttribute("hidden"));
 		this._hasItems = items.length > 0;
 		this._hasEmptyState = !!this.querySelector(":scope > [slot=\"empty\"]");
@@ -9100,8 +9138,10 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 	* the app's to write and a house sentence was wrong more often than right.
 	* That leaves a real risk of a blank area with nothing in the accessibility
 	* tree either, so the list asks the person building it rather than
-	* answering for them. A listbox before you have typed is left alone: an
-	* empty search is not an empty list.
+	* answering for them. It asks about the state it is actually in: rows that
+	* are all hidden are covered by [slot="no-results"] as well as by the
+	* [slot="empty"] it falls back to. A listbox before you have typed is left
+	* alone: an empty search is not an empty list.
 	*/
 	_warnSilentEmpty() {}
 	/** Every option needs a stable id for aria-activedescendant. Assign one to
@@ -11540,16 +11580,16 @@ var nlddCodeMirrorTheme = [baseTheme, syntaxHighlighting(highlightStyle)];
 //#endregion
 //#region src/utilities/codemirror/languages.ts
 var loaders = {
-	json: async () => (await import("./dist-CRsR6ckU.js")).json(),
-	yaml: async () => (await import("./dist-la_b3ZSq.js")).yaml(),
-	javascript: async () => (await import("./dist-CjaG8dOI.js").then((n) => n.t)).javascript(),
-	typescript: async () => (await import("./dist-CjaG8dOI.js").then((n) => n.t)).javascript({ typescript: true }),
-	css: async () => (await import("./dist-C09E9-dJ.js").then((n) => n.r)).css(),
-	html: async () => (await import("./dist-762GHPyH.js").then((n) => n.t)).html(),
-	xml: async () => (await import("./dist-BJI4-6iQ.js")).xml(),
-	python: async () => (await import("./dist-BB7TxeMK.js")).python(),
-	rust: async () => (await import("./dist-DZoFKUO-.js")).rust(),
-	sql: async () => (await import("./dist-DaavuU6W.js")).sql(),
+	json: async () => (await import("./dist-LX8LuMac.js")).json(),
+	yaml: async () => (await import("./dist-CSrO_mYe.js")).yaml(),
+	javascript: async () => (await import("./dist-ByH8hQze.js").then((n) => n.t)).javascript(),
+	typescript: async () => (await import("./dist-ByH8hQze.js").then((n) => n.t)).javascript({ typescript: true }),
+	css: async () => (await import("./dist-B_Mnmrj4.js").then((n) => n.r)).css(),
+	html: async () => (await import("./dist-CX3DK4i7.js").then((n) => n.t)).html(),
+	xml: async () => (await import("./dist-eVFegyjM.js")).xml(),
+	python: async () => (await import("./dist-CRwuSgMM.js")).python(),
+	rust: async () => (await import("./dist-CbCO0WCd.js")).rust(),
+	sql: async () => (await import("./dist-DXZ-cFAl.js")).sql(),
 	markdown: async () => (await Promise.resolve().then(() => dist_exports)).markdown(),
 	bash: async () => new LanguageSupport(StreamLanguage.define((await import("./shell-C61GCsJA.js")).shell)),
 	toml: async () => new LanguageSupport(StreamLanguage.define((await import("./toml-C2HBbPgG.js")).toml)),
@@ -12834,11 +12874,12 @@ var nlddRichTextTranslations = { "components.rich-text.table-scroll-label": "Scr
 *   `overflow-wrap: break-word` safety net on p/li is always on, independent of
 *   this attribute, so long URLs and compounds break neatly instead of
 *   overflowing even without a dictionary.
-* @attr {string} color - 'inherit' lets all text follow the color of the
-*   surface (for colored areas such as the filled categories). Links stay
-*   underlined as an affordance; secondary text (figcaption) gets the same
-*   color at a lowered opacity. Known v1 gaps: inline code, mark, tables and hr
-*   keep their own surfaces. Empty = the default content colors.
+* @attr {string} color - 'content' (the default) takes the system's own content
+*   colors, each element its own. 'inherit' lets all text follow the color of
+*   the surface instead (for colored areas such as the filled categories).
+*   Links stay underlined as an affordance; secondary text (figcaption) gets
+*   the same color at a lowered opacity. Known v1 gaps: inline code, mark,
+*   tables and hr keep their own surfaces.
 * @attr {object} translations - Override translation keys; unset keys fall back to Dutch
 */
 var MANAGED_LABEL_ATTR = "data-nldd-managed-label";
@@ -12848,7 +12889,7 @@ var NLDDRichText = class NLDDRichText extends LitElement {
 		this.spacing = "snug";
 		this.centered = false;
 		this.hyphens = false;
-		this.color = "";
+		this.color = "content";
 		this.translations = {};
 	}
 	_t(key) {
@@ -12907,7 +12948,7 @@ __decorate([property({
 })], NLDDRichText.prototype, "hyphens", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("")
+	converter: reflectNonDefault("content")
 })], NLDDRichText.prototype, "color", void 0);
 __decorate([property({ type: Object })], NLDDRichText.prototype, "translations", void 0);
 NLDDRichText = __decorate([customElement("nldd-rich-text")], NLDDRichText);
@@ -13420,7 +13461,7 @@ function template$10() {
 * @attr {string} size - Text size on the body scale: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
 * @attr {string} weight - Font weight: 'regular' | 'medium' | 'bold' (default: 'regular'). With 'bold' a slotted `<strong>` no longer stands out: there is nothing bolder in the scale.
 * @attr {string} line-height - Line height: 'flat' | 'tight' | 'snug' | 'loose' (default: 'snug')
-* @attr {string} color - Text color: 'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit' (default: 'default'). 'default' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface.
+* @attr {string} color - Text color: 'content' (the default) | 'secondary' | 'accent' | 'success' | 'warning' | 'critical' | 'inherit'. 'content' and 'secondary' follow the surrounding content channel; 'inherit' takes the color it inherits, for text on a painted surface.
 * @attr {string} horizontal-alignment - Alignment of the text within the block: 'left' | 'center' | 'right' (default: 'left'). Aligns the words; `horizontal-alignment` on nldd-container moves the box.
 *
 * @slot - The text. Inline elements work as they are: `<strong>` and `<b>` take the bold weight from the scale, `<a>`, `<em>` and components such as `nldd-tag` are left alone.
@@ -13432,7 +13473,7 @@ var NLDDText = (_NLDDText = class NLDDText extends LitElement {
 		this.size = "md";
 		this.weight = "regular";
 		this.lineHeight = "snug";
-		this.color = "default";
+		this.color = "content";
 		this.horizontalAlignment = "left";
 	}
 	render() {
@@ -13454,7 +13495,7 @@ __decorate([property({
 })], NLDDText.prototype, "lineHeight", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("default")
+	converter: reflectNonDefault("content")
 })], NLDDText.prototype, "color", void 0);
 __decorate([property({
 	reflect: true,
@@ -13743,10 +13784,10 @@ function titleTemplate() {
 * @element nldd-title
 *
 * @attr {number} size - Visual size of the title: 1–6 (default: 3)
-* @attr {string} color - 'inherit' lets the title follow the text color of the
-*   surface (for colored areas such as the filled categories); overline and
-*   subtitle get the same color at a lowered opacity. Empty = the default
-*   content colors.
+* @attr {string} color - 'content' (the default) takes the system's own content
+*   colors. 'inherit' lets the title follow the text color of the surface
+*   instead (for colored areas such as the filled categories); overline and
+*   subtitle get the same color at a lowered opacity.
 *
 * @slot overline - Optional overline above the title
 * @slot - Title text (use h1–h6 for semantics)
@@ -13758,7 +13799,7 @@ var NLDDTitle = (_NLDDTitle = class NLDDTitle extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.size = 3;
-		this.color = "";
+		this.color = "content";
 	}
 	render() {
 		return titleTemplate();
@@ -13770,7 +13811,7 @@ __decorate([property({
 })], NLDDTitle.prototype, "size", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("")
+	converter: reflectNonDefault("content")
 })], NLDDTitle.prototype, "color", void 0);
 NLDDTitle = __decorate([customElement("nldd-title")], NLDDTitle);
 //#endregion
@@ -17834,7 +17875,7 @@ var codeEditorStyles = css`
 	/* # Host */
 
 	:host {
-		--__caret-width: var(--primitives-border-width-regular);
+		--_caret-width: var(--primitives-border-width-regular);
 		--_corner-radius: 0;
 		--_background-color: transparent;
 		--_border-color: transparent;
@@ -17936,7 +17977,7 @@ var codeEditorStyles = css`
 	   CodeMirror's theme cursor color without depending on an attribute. */
 	:host .cm-cursor.cm-cursor {
 		border-left-color: var(--primitives-color-accent-600);
-		border-left-width: var(--__caret-width);
+		border-left-width: var(--_caret-width);
 	}
 
 	/* Resize model — rows is the floor in every mode:
@@ -28668,8 +28709,65 @@ var pasteURLAsLink = /*@__PURE__*/ EditorView.domEventHandlers({ paste: (event,
 	return true;
 } });
 //#endregion
+//#region src/components/inputs/text-editor/text-editor.syntax.ts
+/** The innermost node at `pos` that `match` accepts, looking outward from there.
+*  `side` decides which node a position between two of them belongs to: -1 the
+*  one that ends there, 1 the one that starts there. Null when none matches. */
+function enclosingNode(state, pos, side, match) {
+	for (let node = syntaxTree(state).resolveInner(pos, side); node; node = node.parent) if (match(node)) return node;
+	return null;
+}
+/** `enclosingNode` for the common case: a node that goes by one of these names. */
+function enclosingNamed(state, pos, side, names) {
+	return enclosingNode(state, pos, side, typeof names === "string" ? (node) => node.name === names : (node) => names.has(node.name));
+}
+//#endregion
 //#region src/components/inputs/text-editor/text-editor.mentions.ts
-var MENTION_QUERY = /@[\w.-]*$/;
+/** The query being typed: a trigger at the start of the line or after
+*  whitespace, followed by name characters, up to the caret. Anchored that way
+*  so a trigger inside a word (an e-mail address, `piet@sam`) stays a plain
+*  character. The name class is ASCII for now; widening it changes what a
+*  source receives and is its own change. */
+var queryPatterns = /* @__PURE__ */ new Map();
+function queryPattern(triggers) {
+	const chars = Array.from(new Set(triggers.filter((t) => t.length === 1 && !/[\s\w]/.test(t)))).sort().join("");
+	if (!chars) return null;
+	let pattern = queryPatterns.get(chars);
+	if (!pattern) {
+		pattern = new RegExp(`(^|\\s)([${chars.replace(/[\\\]^-]/g, "\\$&")}])([\\w.-]*)$`);
+		queryPatterns.set(chars, pattern);
+	}
+	return pattern;
+}
+/** Code is quoted verbatim, so a trigger in a fenced block, an indented block
+*  or a backtick span is not a typeahead and must not open the list. */
+var CODE_NODES = /* @__PURE__ */ new Set([
+	"FencedCode",
+	"CodeBlock",
+	"InlineCode"
+]);
+function inCode(state, pos) {
+	return enclosingNamed(state, pos, 1, CODE_NODES) !== null;
+}
+/** The typeahead query at `pos` for one of `triggers`, or null when the text
+*  before the caret is not one. `from` is the trigger, `query` the typed text
+*  without it. Both the completion source and the reopen-on-delete path go
+*  through this, so they cannot disagree about what counts as a query. */
+function typeaheadQueryAt(state, pos, triggers) {
+	const pattern = queryPattern(triggers);
+	if (!pattern) return null;
+	const line = state.doc.lineAt(pos);
+	const match = pattern.exec(state.sliceDoc(line.from, pos));
+	if (!match) return null;
+	const from = line.from + match.index + match[1].length;
+	if (inCode(state, from)) return null;
+	return {
+		from,
+		to: pos,
+		query: match[3],
+		trigger: match[2]
+	};
+}
 /** Href prefix that marks a markdown link as a mention. */
 var MENTION_HREF_PREFIX = "user:";
 /** The markdown-compatible token stored for a mention (degrades to a plain link).
@@ -28679,7 +28777,11 @@ var MENTION_HREF_PREFIX = "user:";
 *  `]` or `)` would otherwise start a second, attacker-shaped link. The render
 *  layer reverses both via `unescapeMentionLabel` / `decodeMentionId`. */
 function mentionToken(candidate) {
-	return `[@${candidate.label.replace(/[[\]\\]/g, (c) => "\\" + c)}](${MENTION_HREF_PREFIX}${encodeURIComponent(candidate.id).replace(/[()<>]/g, (c) => "%" + c.charCodeAt(0).toString(16).toUpperCase())})`;
+	return `[@${candidate.text.replace(/[[\]\\]/g, (c) => "\\" + c)}](${MENTION_HREF_PREFIX}${encodeURIComponent(candidate.id).replace(/[()<>]/g, (c) => "%" + c.charCodeAt(0).toString(16).toUpperCase())})`;
+}
+/** What the built-in mention writes: the token and a space to go on typing. */
+function mentionInsert(candidate) {
+	return `${mentionToken(candidate)} `;
 }
 /** Reverse `mentionToken`'s label escaping for display. */
 function unescapeMentionLabel(label) {
@@ -28694,38 +28796,86 @@ function decodeMentionId(id) {
 		return id;
 	}
 }
-function completionSource(getSource, onInsert) {
+function defaultInsert(trigger) {
+	return (candidate) => `${trigger}${candidate.text} `;
+}
+/** The avatar, icon or symbol in front of a row, or nothing. A decorative
+*  avatar: the name stands beside it as the row's text. The icon is the size of
+*  a menu item's, and the symbol takes the same box, so a list that mixes them
+*  lines up. */
+function renderLead(completion) {
+	const { candidate } = completion;
+	if (candidate.avatar) {
+		const avatar = document.createElement("nldd-avatar");
+		avatar.setAttribute("name", candidate.text);
+		avatar.setAttribute("size", "32");
+		avatar.setAttribute("decorative", "");
+		if (candidate.avatar.src) avatar.setAttribute("src", candidate.avatar.src);
+		if (candidate.avatar.type) avatar.setAttribute("type", candidate.avatar.type);
+		return avatar;
+	}
+	if (candidate.icon) {
+		const icon = document.createElement("nldd-icon");
+		icon.setAttribute("name", candidate.icon);
+		icon.setAttribute("size", "20");
+		icon.setAttribute("aria-hidden", "true");
+		return icon;
+	}
+	if (candidate.symbol) {
+		const symbol = document.createElement("span");
+		symbol.className = "cm-nldd-symbol";
+		symbol.textContent = candidate.symbol;
+		symbol.setAttribute("aria-hidden", "true");
+		return symbol;
+	}
+	return null;
+}
+/** A row with an avatar takes two lines: the text above, the supporting text
+*  under it, like a title cell. */
+function rowClass(completion) {
+	return completion.candidate.avatar ? "cm-nldd-row-avatar" : "";
+}
+function completionSource(getTypeaheads, onChoose) {
 	return async (context) => {
-		const match = context.matchBefore(/@[\w.-]*/);
-		if (!match || match.from === match.to && !context.explicit) return null;
-		const source = getSource();
-		if (!source) return null;
-		const candidates = await source(match.text.slice(1));
-		if (!candidates?.length) return null;
-		return {
-			from: match.from,
-			filter: false,
-			options: candidates.map((candidate) => ({
-				label: `@${candidate.label}`,
-				detail: candidate.detail,
+		const lists = getTypeaheads();
+		const match = typeaheadQueryAt(context.state, context.pos, lists.map((t) => t.trigger));
+		if (!match) return null;
+		const onTrigger = lists.filter((t) => t.trigger === match.trigger);
+		const results = await Promise.all(onTrigger.map((t) => t.source(match.query)));
+		const options = [];
+		results.forEach((candidates, index) => {
+			const typeahead = onTrigger[index];
+			const insert = typeahead.insert ?? defaultInsert(match.trigger);
+			for (const candidate of candidates ?? []) options.push({
+				label: `${match.trigger}${candidate.text}`,
+				detail: candidate.supportingText,
+				candidate,
 				apply: (view, _completion, from, to) => {
-					const token = mentionToken(candidate);
+					const text = insert(candidate);
 					view.dispatch({
 						changes: {
 							from,
 							to,
-							insert: `${token} `
+							insert: text
 						},
-						selection: { anchor: from + token.length + 1 }
+						selection: { anchor: from + text.length },
+						userEvent: "input.complete"
 					});
-					onInsert({
-						id: candidate.id,
-						label: candidate.label,
+					onChoose({
+						typeahead,
+						trigger: match.trigger,
+						candidate,
 						from,
-						to: from + token.length
+						to: from + text.length
 					});
 				}
-			}))
+			});
+		});
+		if (!options.length) return null;
+		return {
+			from: match.from,
+			filter: false,
+			options
 		};
 	};
 }
@@ -28739,6 +28889,8 @@ var popupTheme = EditorView.theme({
 	".cm-tooltip.cm-tooltip-autocomplete > ul": {
 		fontFamily: "var(--primitives-font-family-body)",
 		fontSize: "var(--primitives-font-size-100)",
+		minWidth: "var(--primitives-area-280)",
+		boxSizing: "border-box",
 		maxHeight: "14em",
 		margin: "0",
 		padding: "var(--primitives-space-8)"
@@ -28754,6 +28906,32 @@ var popupTheme = EditorView.theme({
 		color: "var(--semantics-content-color)",
 		cursor: "default"
 	},
+	".cm-tooltip.cm-tooltip-autocomplete > ul > li > :is(nldd-avatar, nldd-icon, .cm-nldd-symbol)": { flex: "none" },
+	".cm-nldd-symbol": {
+		display: "inline-flex",
+		justifyContent: "center",
+		inlineSize: "20px"
+	},
+	".cm-tooltip.cm-tooltip-autocomplete > ul > li.cm-nldd-row-avatar": {
+		display: "grid",
+		gridTemplateColumns: "auto minmax(0, 1fr)",
+		alignContent: "center",
+		rowGap: "0",
+		minHeight: "var(--semantics-controls-md-min-size)"
+	},
+	".cm-tooltip.cm-tooltip-autocomplete > ul > li.cm-nldd-row-avatar > nldd-avatar": {
+		gridRow: "span 2",
+		alignSelf: "center"
+	},
+	".cm-tooltip.cm-tooltip-autocomplete > ul > li.cm-nldd-row-avatar > .cm-completionLabel": {
+		gridColumn: "2",
+		font: "var(--primitives-font-body-md-regular-tight)"
+	},
+	".cm-tooltip.cm-tooltip-autocomplete > ul > li.cm-nldd-row-avatar > .cm-completionDetail": {
+		gridColumn: "2",
+		marginLeft: "0",
+		font: "var(--primitives-font-body-sm-regular-tight)"
+	},
 	".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
 		backgroundColor: "var(--components-menu-item-is-highlighted-background-color)",
 		color: "var(--components-menu-item-is-highlighted-content-color)"
@@ -28771,22 +28949,26 @@ var popupTheme = EditorView.theme({
 	"@media (pointer: coarse)": { ".cm-tooltip.cm-tooltip-autocomplete > ul > li": { minHeight: "var(--semantics-controls-md-min-size)" } }
 });
 /**
-* @-mention typeahead. `getSource` is called with the text typed after `@` and
-* returns (a promise of) candidates; selecting one inserts the token and calls
-* `onInsert`. Without a source it is inert.
+* The typeaheads. `getTypeaheads` is read on every keystroke, so the editor can
+* hand over its current lists; choosing a candidate writes what the list's
+* `insert` says and calls `onChoose`. Without lists it is inert.
 */
-var reopenOnDelete = EditorView.updateListener.of((update) => {
-	if (!update.docChanged || completionStatus(update.state) !== null) return;
-	if (!update.transactions.some((tr) => tr.isUserEvent("delete"))) return;
-	const { head } = update.state.selection.main;
-	const before = update.state.sliceDoc(update.state.doc.lineAt(head).from, head);
-	if (MENTION_QUERY.test(before)) startCompletion(update.view);
-});
-function mentions(getSource, onInsert) {
+function typeaheads(getTypeaheads, onChoose) {
+	const reopenOnDelete = EditorView.updateListener.of((update) => {
+		if (!update.docChanged || completionStatus(update.state) !== null) return;
+		if (!update.transactions.some((tr) => tr.isUserEvent("delete"))) return;
+		const triggers = getTypeaheads().map((t) => t.trigger);
+		if (typeaheadQueryAt(update.state, update.state.selection.main.head, triggers)) startCompletion(update.view);
+	});
 	return [
 		autocompletion({
-			override: [completionSource(getSource, onInsert)],
-			icons: false
+			override: [completionSource(getTypeaheads, onChoose)],
+			icons: false,
+			addToOptions: [{
+				position: 20,
+				render: renderLead
+			}],
+			optionClass: rowClass
 		}),
 		reopenOnDelete,
 		popupTheme
@@ -28845,15 +29027,22 @@ var LinkOpenWidget = class extends WidgetType {
 	ignoreEvent() {
 		return true;
 	}
-	/** Keep the caret at the badge's right edge text-height, not the badge's own box
-	*  height (which is taller and would flip with the cursor's arrival direction). */
-	coordsAt(dom) {
+	/** The caret at the link's end has two places to be, and `side` says which: on
+	*  the link's side of the badge, or after the badge. Both at text height, not
+	*  the badge's own box (taller, and it would flip with the arrival direction).
+	*  The cursor layer treats the badge as a character with a stop on either
+	*  side, whether the link is a bare URL (text typed on the link's side extends
+	*  it) or a `[text](url)` link (text typed there lands after the link, and
+	*  so after its badge). Ignoring `side` drew both after the badge, so deleting
+	*  the last character of a URL looked like editing outside it. */
+	coordsAt(dom, _pos, side) {
 		const badge = dom.getBoundingClientRect();
 		const box = textCaretBox(dom) ?? {
 			top: badge.top,
 			bottom: badge.bottom
 		};
-		const x = badge.right + parseFloat(getComputedStyle(dom).marginRight);
+		const cs = getComputedStyle(dom);
+		const x = side < 0 ? badge.left - parseFloat(cs.marginLeft) : badge.right + parseFloat(cs.marginRight);
 		return {
 			left: x,
 			right: x,
@@ -28973,6 +29162,243 @@ function linkOpenBadge(label) {
 		}
 	}, { decorations: (plugin) => plugin.decorations });
 }
+/** Whether a link with a badge ends at `pos`: a `[text](url)` link or a bare
+*  URL, with a destination the badge accepts. The same tests as `buildBadges`,
+*  so a mention (a link too, but without a badge) is not one. */
+function linkEndsAt(state, pos) {
+	let refs = null;
+	return enclosingNode(state, pos, -1, (node) => {
+		if (node.to !== pos) return false;
+		if (node.name === "Link") return hrefOf(state, node, refs ?? (refs = referenceDefs(state))) !== null;
+		return node.name === "URL" && !inLinkContext(node) && bareHref(state, node) !== null;
+	}) !== null;
+}
+/** Whether a bare URL with a badge ends at `pos`: the link that text typed at
+*  its end extends, unlike a `[text](url)` link, which ends at its `)`. */
+function bareUrlEndsAt(state, pos) {
+	return enclosingNode(state, pos, -1, (node) => node.name === "URL" && node.to === pos && !inLinkContext(node) && bareHref(state, node) !== null) !== null;
+}
+//#endregion
+//#region src/components/inputs/text-editor/text-editor.emphasis.ts
+/** The emphasis nodes that live by the flanking rules, with the marker the
+*  editor writes for them. Inline code is not among them: a code span keeps its
+*  whitespace and never fails to close. */
+var EMPHASIS_MARKERS = /* @__PURE__ */ new Map([
+	["StrongEmphasis", "**"],
+	["Emphasis", "*"],
+	["Strikethrough", "~~"]
+]);
+/** The blocks that hold inline content. A held emphasis must stay within one:
+*  a paragraph break inside it (Enter twice) ends the run for good. */
+var INLINE_BLOCKS = /* @__PURE__ */ new Set([
+	"Paragraph",
+	"ATXHeading1",
+	"ATXHeading2",
+	"ATXHeading3",
+	"ATXHeading4",
+	"ATXHeading5",
+	"ATXHeading6",
+	"SetextHeading1",
+	"SetextHeading2",
+	"TableCell"
+]);
+/** What may sit between the end of a run's text and its closing marker for the
+*  marker to be moved back to the text: whitespace, and after a line break the
+*  scaffolding Enter writes for the next list item, task or quote line. Text
+*  there means the break fell inside the run, and that is left alone. */
+var TRAIL_RE = /^\s*(?:\n\s*(?:(?:[-*+]|\d+[.)]|>|\[[ xX]\])\s*)*)*$/;
+/** Starts a hold on markers just written around an empty selection: `****`
+*  parses as nothing, so there is no node to remember, but what is typed
+*  between them is meant to be bold. */
+var holdEmphasis = StateEffect.define({ map: (value, mapping) => ({
+	...value,
+	from: mapping.mapPos(value.from, 1),
+	to: mapping.mapPos(value.to, -1)
+}) });
+function emphasisAround(state, pos, side) {
+	return enclosingNode(state, pos, side, (node) => EMPHASIS_MARKERS.has(node.name));
+}
+function inlineBlockAt(state, pos) {
+	return enclosingNamed(state, pos, 1, INLINE_BLOCKS);
+}
+/** The innermost emphasis the main selection is inside of on both of its sides,
+*  as the tree parses it now. Just before the opening marker or just after the
+*  closing one is outside: text typed there lands outside the emphasis. */
+function liveEmphasis(state) {
+	const { from, to } = state.selection.main;
+	const left = emphasisAround(state, from, -1);
+	const right = left && emphasisAround(state, to, 1);
+	if (!left || !right || left.from !== right.from || left.to !== right.to) return null;
+	const len = EMPHASIS_MARKERS.get(left.name).length;
+	return {
+		from: left.from,
+		to: left.to,
+		name: left.name,
+		marker: state.sliceDoc(left.from, left.from + len),
+		live: true
+	};
+}
+/** Whether a remembered emphasis is still worth holding: the selection is between
+*  its markers, both markers are still there, no paragraph break cut it, and
+*  the parser has not made something else of its start. (Typing `**` inside
+*  bold splits it, and then the tree's own reading should show.) */
+function holds(state, held) {
+	const len = held.marker.length;
+	const { from, to } = state.selection.main;
+	if (from < held.from + len || to > held.to - len) return false;
+	const text = state.sliceDoc(held.from, held.to);
+	if (text.length < 2 * len || !text.startsWith(held.marker) || !text.endsWith(held.marker)) return false;
+	const block = inlineBlockAt(state, held.from);
+	if (!block || block.to < held.to) return false;
+	const parsed = emphasisAround(state, held.from, 1);
+	return !(parsed && parsed.name === held.name && parsed.from === held.from);
+}
+function mapHeld(held, through) {
+	return {
+		...held,
+		from: through.changes.mapPos(held.from, 1),
+		to: through.changes.mapPos(held.to, -1)
+	};
+}
+/** The emphasis the caret is in: the tree's own while it parses, and the held
+*  one, mapped along through edits, once it does not. Null outside any. */
+var heldEmphasisField = StateField.define({
+	create: (state) => liveEmphasis(state),
+	update(prev, tr) {
+		if (prev) {
+			const held = mapHeld({
+				...prev,
+				live: false
+			}, tr);
+			if (holds(tr.state, held)) return held;
+		}
+		const live = liveEmphasis(tr.state);
+		if (live) return live;
+		const seed = tr.effects.find((effect) => effect.is(holdEmphasis));
+		return seed ? {
+			...seed.value,
+			live: false
+		} : null;
+	}
+});
+/** The whitespace at the inside edges of `held`, or null when there is nothing
+*  to move: no whitespace at the edges, nothing but whitespace inside, or the
+*  markers are gone. The text ends where the opening block's text does: past
+*  a paragraph break the rest of the run can never be inside the emphasis, so
+*  it counts as trail, provided it is scaffolding and not text. */
+function repairFor(state, held) {
+	const len = held.marker.length;
+	const text = state.sliceDoc(held.from, held.to);
+	if (text.length < 2 * len || !text.startsWith(held.marker) || !text.endsWith(held.marker)) return null;
+	const inner = text.slice(len, text.length - len);
+	const lead = /^\s*/.exec(inner)[0].length;
+	const block = inlineBlockAt(state, held.from);
+	const inBlock = state.sliceDoc(held.from + len, Math.min(held.to - len, block ? block.to : held.to - len));
+	const contentEnd = held.from + len + inBlock.replace(/\s+$/, "").length;
+	if (contentEnd <= held.from + len + lead) return null;
+	const trail = held.to - len - contentEnd;
+	if (!lead && !trail) return null;
+	if (!TRAIL_RE.test(state.sliceDoc(contentEnd, held.to - len))) return null;
+	return {
+		from: held.from,
+		to: held.to,
+		len,
+		lead,
+		trail
+	};
+}
+/** Moves the lead in front of the opening marker and the trail past the closing
+*  one. Moving the whitespace rather than the markers keeps an annotation on
+*  the text on the text. */
+function repairChanges(state, r) {
+	const changes = [];
+	if (r.lead) changes.push({
+		from: r.from,
+		insert: state.sliceDoc(r.from + r.len, r.from + r.len + r.lead)
+	}, {
+		from: r.from + r.len,
+		to: r.from + r.len + r.lead
+	});
+	if (r.trail) changes.push({
+		from: r.to - r.len - r.trail,
+		to: r.to - r.len
+	}, {
+		from: r.to,
+		insert: state.sliceDoc(r.to - r.len - r.trail, r.to - r.len)
+	});
+	return changes;
+}
+/** Where a position lands after the repair. The markers and the whitespace swap
+*  places, and a caret in the whitespace goes with it past the marker: after
+*  the space it typed, outside the run. With `stay` it stays with the text,
+*  inside the markers. That is what a blur wants: a toolbar click blurs the
+*  editor before its command runs, and the command must find the caret where
+*  the typing was. */
+function mapRepair(pos, r, stay) {
+	const contentStart = r.from + r.len + r.lead;
+	const contentEnd = r.to - r.len - r.trail;
+	if (r.lead) {
+		if (pos > r.from && pos < r.from + r.len) return pos + r.lead;
+		if (pos >= r.from + r.len && pos < contentStart) return stay ? contentStart : pos - r.len;
+	}
+	if (r.trail) {
+		if (pos > contentEnd && pos <= r.to - r.len) return stay ? contentEnd : pos + r.len;
+		if (pos > r.to - r.len && pos < r.to) return pos - r.trail;
+	}
+	return pos;
+}
+function repairSpec(state, held, stay) {
+	const r = repairFor(state, held);
+	if (!r) return null;
+	const sel = state.selection;
+	return {
+		changes: repairChanges(state, r),
+		selection: EditorSelection.create(sel.ranges.map((range) => EditorSelection.range(mapRepair(range.anchor, r, stay), mapRepair(range.head, r, stay))), sel.mainIndex),
+		userEvent: "input.emphasis"
+	};
+}
+/** The changes that move edge whitespace out of `held`, for a command that
+*  steps out of the run itself. Empty when there is nothing to move. */
+function repairChangesFor(state, held) {
+	const r = repairFor(state, held);
+	return r ? repairChanges(state, r) : [];
+}
+/** Ends a hold at once, for a blur. The display must be right while the editor
+*  is unfocused, and the value it commits must be markdown that renders the way
+*  it looked. */
+function repairHeldEmphasis(view) {
+	const held = view.state.field(heldEmphasisField, false);
+	if (!held || held.live || view.state.readOnly) return;
+	const spec = repairSpec(view.state, held, true);
+	if (spec) view.dispatch(spec);
+}
+var heldEmphasis = [heldEmphasisField, ViewPlugin.fromClass(class {
+	constructor(view) {
+		this.view = view;
+		this.pending = null;
+		this.destroyed = false;
+	}
+	update(update) {
+		if (this.pending) this.pending = mapHeld(this.pending, update);
+		const before = update.startState.field(heldEmphasisField);
+		if (!before) return;
+		const gone = mapHeld(before, update);
+		const after = update.state.field(heldEmphasisField);
+		if (after && after.name === gone.name && after.from === gone.from && after.to === gone.to) return;
+		this.pending = gone;
+		queueMicrotask(() => this.flush());
+	}
+	flush() {
+		const held = this.pending;
+		this.pending = null;
+		if (!held || this.destroyed || this.view.state.readOnly) return;
+		const spec = repairSpec(this.view.state, held, false);
+		if (spec) this.view.dispatch(spec);
+	}
+	destroy() {
+		this.destroyed = true;
+	}
+})];
 //#endregion
 //#region src/components/inputs/text-editor/text-editor.markdown.ts
 var NODE_CLASS = {
@@ -29105,6 +29531,12 @@ function buildMarkDecorations(view) {
 			else if (MARK_NODES.has(node.name)) ranges.push(dimDeco.range(node.from, node.to));
 		}
 	});
+	const held = view.state.field(heldEmphasisField, false);
+	if (held && !held.live) {
+		const len = held.marker.length;
+		ranges.push(classDeco(NODE_CLASS[held.name]).range(held.from, held.to));
+		ranges.push(dimDeco.range(held.from, held.from + len), dimDeco.range(held.to - len, held.to));
+	}
 	return Decoration.set(ranges, true);
 }
 var markDecorationPlugin = ViewPlugin.fromClass(class {
@@ -29123,20 +29555,22 @@ function hangingLineDeco(length) {
 }
 /** Whether `pos` sits inside a fenced or indented code block — where a leading
 *  `-`/`1.`/`>` is literal code, not a list or quote marker. */
+var CODE_BLOCK_NODES = /* @__PURE__ */ new Set(["FencedCode", "CodeBlock"]);
 function inCodeBlock(state, pos) {
-	for (let n = syntaxTree(state).resolveInner(pos, 1); n; n = n.parent) if (n.name === "FencedCode" || n.name === "CodeBlock") return true;
-	return false;
+	return enclosingNamed(state, pos, 1, CODE_BLOCK_NODES) !== null;
 }
 function buildHangingIndent(state) {
 	const ranges = [];
-	for (let i = 1; i <= state.doc.lines; i++) {
-		const line = state.doc.line(i);
-		const match = line.text.match(HANGING_RE);
-		if (match && match[1].length && !inCodeBlock(state, line.from)) {
+	let from = 0;
+	for (const iter = state.doc.iterLines(); !iter.next().done;) {
+		const text = iter.value;
+		const match = HANGING_RE.exec(text);
+		if (match && match[1].length && !inCodeBlock(state, from)) {
 			const length = match[1].length;
-			ranges.push(hangingLineDeco(length).range(line.from));
-			ranges.push(prefixMonoDeco.range(line.from, line.from + length));
+			ranges.push(hangingLineDeco(length).range(from));
+			ranges.push(prefixMonoDeco.range(from, from + length));
 		}
+		from += text.length + 1;
 	}
 	return Decoration.set(ranges, true);
 }
@@ -29191,9 +29625,28 @@ function buildMentionChips(state) {
 	} });
 	return Decoration.set(ranges, true);
 }
+/** Whether moving the selection from `before` to `after` changes which mention a
+*  selection covers. Only then is the chip set worth rebuilding: walking the
+*  whole syntax tree on every arrow key, to find that nothing looks different,
+*  is the expensive way to do nothing. */
+function coverageChanged(chips, before, after) {
+	let changed = false;
+	chips.between(0, 1e9, (from, to) => {
+		const covers = (sel) => sel.from !== sel.to && sel.from <= from && sel.to >= to;
+		if (covers(before) !== covers(after)) {
+			changed = true;
+			return false;
+		}
+	});
+	return changed;
+}
 var mentionChipField = StateField.define({
 	create: (state) => buildMentionChips(state),
-	update: (value, tr) => tr.docChanged || !tr.startState.selection.eq(tr.state.selection) ? buildMentionChips(tr.state) : value,
+	update: (value, tr) => {
+		if (tr.docChanged) return buildMentionChips(tr.state);
+		if (tr.startState.selection.eq(tr.state.selection)) return value;
+		return coverageChanged(value, tr.startState.selection.main, tr.state.selection.main) ? buildMentionChips(tr.state) : value;
+	},
 	provide: (field) => EditorView.decorations.from(field)
 });
 var mentionAtomicRanges = EditorView.atomicRanges.of((view) => view.state.field(mentionChipField, false) ?? Decoration.none);
@@ -29201,21 +29654,21 @@ var mentionAtomicRanges = EditorView.atomicRanges.of((view) => view.state.field(
 var markdownEditing = [
 	markdown({ extensions: GFM }),
 	markDecorationPlugin,
+	heldEmphasis,
 	hangingIndentField,
 	Prec.highest(mentionChipField),
 	mentionAtomicRanges
 ];
 function mentionLinkAt(state, pos, side) {
-	for (let node = syntaxTree(state).resolveInner(pos, side); node; node = node.parent) {
-		if (node.name !== "Link") continue;
+	return enclosingNode(state, pos, side, (node) => {
+		if (node.name !== "Link") return false;
 		let url = null;
 		for (let child = node.firstChild; child; child = child.nextSibling) if (child.name === "URL") {
 			url = child;
 			break;
 		}
-		if (url && state.sliceDoc(url.from, url.to).startsWith("user:")) return node;
-	}
-	return null;
+		return url !== null && state.sliceDoc(url.from, url.to).startsWith("user:");
+	});
 }
 /** The mention whose collapsed token contains `pos` (used to select it on click). */
 function mentionRangeAt(state, pos) {
@@ -29286,54 +29739,40 @@ function desiredSentinels(groups, cleanText, canPlace = canPlaceSentinel) {
 	}
 	return out;
 }
-/** Build the desired doc text: `cleanText` with a sentinel inserted at each desired
-*  position (multiplicity honoured for touching groups). */
-function buildDesiredDoc(cleanText, desired) {
+/** How many sentinels each clean position wants (touching groups want two). */
+function desiredCounts(desired) {
 	const counts = /* @__PURE__ */ new Map();
 	for (const d of desired) counts.set(d.pos, (counts.get(d.pos) ?? 0) + 1);
-	let out = "";
-	for (let i = 0; i <= cleanText.length; i++) {
-		const n = counts.get(i) ?? 0;
-		if (n) out += "⁠".repeat(n);
-		if (i < cleanText.length) out += cleanText[i];
-	}
-	return out;
+	return counts;
 }
 /** Minimal changes (in current-doc coords) to turn `doc` into a document that holds
 *  exactly the sentinels the groups want — touching only sentinel characters, never
-*  the real text. `doc` and the target share the same clean text, so a two-pointer
-*  walk yields sentinel-only inserts/deletes. */
+*  the real text. One walk over `doc`, comparing the sentinel run at each clean
+*  position with the number wanted there. Building the target document first would
+*  cost a second copy of the text on every edit. */
 function reconcileSentinels(doc, groups, canPlace = canPlaceSentinel) {
-	const cleanText = stripSentinels(doc);
-	const desired = buildDesiredDoc(cleanText, desiredSentinels(groups, cleanText, canPlace));
+	const want = desiredCounts(desiredSentinels(groups, groups.length ? stripSentinels(doc) : "", canPlace));
 	const changes = [];
-	let i = 0;
-	let j = 0;
-	while (i < doc.length || j < desired.length) {
-		const dc = i < doc.length ? doc[i] : "";
-		const ec = j < desired.length ? desired[j] : "";
-		if (dc === ec) {
-			i++;
-			j++;
-		} else if (dc === "⁠") {
-			changes.push({
-				from: i,
-				to: i + 1
-			});
-			i++;
-		} else if (ec === "⁠") {
-			changes.push({
-				from: i,
-				to: i,
-				insert: "⁠"
-			});
-			j++;
-		} else {
-			i++;
-			j++;
-		}
+	let pos = 0;
+	let clean = 0;
+	for (;;) {
+		let have = 0;
+		while (pos + have < doc.length && doc[pos + have] === "⁠") have++;
+		const need = want.get(clean) ?? 0;
+		if (have > need) changes.push({
+			from: pos + need,
+			to: pos + have
+		});
+		else if (need > have) changes.push({
+			from: pos + have,
+			to: pos + have,
+			insert: "⁠".repeat(need - have)
+		});
+		pos += have;
+		if (pos >= doc.length) return changes;
+		pos++;
+		clean++;
 	}
-	return changes;
 }
 var LINE_START_MARKER = /^(\s*)(#{1,6}\s|[-*+]\s|\d+[.)]\s|>|`{3,}|~{3,})/;
 /** Default placement guard. Blocks the sentinel where U+2060 would break the
@@ -29341,13 +29780,13 @@ var LINE_START_MARKER = /^(\s*)(#{1,6}\s|[-*+]\s|\d+[.)]\s|>|`{3,}|~{3,})/;
 *  strikethrough run (`~~...~~`). Blocked edges fall back to a single caret stop. */
 function canPlaceSentinel(cleanText, pos, _kind) {
 	const lineStart = cleanText.lastIndexOf("\n", pos - 1) + 1;
-	const marker = cleanText.slice(lineStart).match(LINE_START_MARKER);
+	const lineEnd = cleanText.indexOf("\n", pos) === -1 ? cleanText.length : cleanText.indexOf("\n", pos);
+	const lineText = cleanText.slice(lineStart, lineEnd);
+	const marker = lineText.match(LINE_START_MARKER);
 	if (marker) {
 		if (pos < lineStart + marker[0].length) return false;
 	}
-	const lineText = cleanText.slice(lineStart, cleanText.indexOf("\n", pos) === -1 ? void 0 : cleanText.indexOf("\n", pos));
-	const rel = pos - lineStart;
-	if ((lineText.slice(0, rel).match(/~~/g) ?? []).length % 2 === 1) return false;
+	if ((lineText.slice(0, pos - lineStart).match(/~~/g) ?? []).length % 2 === 1) return false;
 	return true;
 }
 //#endregion
@@ -29444,7 +29883,10 @@ var AnnotationBadge = class extends WidgetType {
 			top: badge.top,
 			bottom: badge.bottom
 		};
-		const x = pos <= 0 ? badge.left - parseFloat(cs.marginLeft) : badge.right + parseFloat(cs.marginRight);
+		const tint = dom.closest(".cm-annotation");
+		const rects = tint ? tint.getClientRects() : null;
+		const lastLine = rects && rects.length ? rects[rects.length - 1] : null;
+		const x = pos <= 0 ? badge.left - parseFloat(cs.marginLeft) : lastLine ? lastLine.right : badge.right + parseFloat(cs.marginRight);
 		return {
 			left: x,
 			right: x,
@@ -29508,7 +29950,12 @@ function resolveGroup(group, doc, sents) {
 		endSent: textTo < doc.length && doc[textTo] === "⁠" ? textTo : null
 	};
 }
+var NOTHING = {
+	deco: Decoration.none,
+	atomic: Decoration.none
+};
 function buildAll(state, label) {
+	if (!state.field(annotationField).length) return NOTHING;
 	const doc = state.doc.toString();
 	const sel = state.selection.main;
 	const sents = sentinelPositions(doc);
@@ -29560,6 +30007,7 @@ function makeAnnotationRender(label) {
 	return StateField.define({
 		create: (state) => buildAll(state, label),
 		update: (value, tr) => {
+			if (value === NOTHING && !tr.state.field(annotationField).length) return value;
 			if (tr.docChanged || !tr.startState.selection.eq(tr.state.selection) || tr.effects.some((e) => e.is(setAnnotations))) return buildAll(tr.state, label);
 			return value;
 		},
@@ -29572,6 +30020,7 @@ function makeAnnotationRender(label) {
 var annotationSentinelFilter = EditorState.transactionFilter.of((tr) => {
 	const set = tr.effects.find((e) => e.is(setAnnotations));
 	if (!tr.docChanged && !set) return tr;
+	if (!(set || tr.effects.some((e) => e.is(pasteAnnotations) || e.is(annotationMove))) && !(tr.startState.field(annotationField, false) ?? []).length) return tr;
 	const postUserDoc = tr.newDoc.toString();
 	const cleanLen = stripSentinels(postUserDoc).length;
 	let anns;
@@ -29698,8 +30147,26 @@ function renumberOrderedLists(doc) {
 }
 /** Renumbers ordered lists in the same transaction as the edit that disturbed them,
 *  so it's one atomic (single-undo) step and the caret/selection maps through it. */
+/** Whether this change can have disturbed any numbering. It can when it adds or
+*  removes a line break, or when a line it touches is (or was) an ordered item.
+*  Typing inside a paragraph cannot, and that is the common case: without this
+*  test every keystroke read the whole document out and walked every line. */
+function mayRenumber(tr) {
+	let may = false;
+	tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+		if (may) return;
+		const before = tr.startState.doc;
+		if (inserted.lines > 1 || before.lineAt(fromA).number !== before.lineAt(toA).number) {
+			may = true;
+			return;
+		}
+		const ordered = (text) => ORDERED_RE.test(text.slice(BQ_PREFIX_RE.exec(text)[0].length));
+		if (ordered(before.lineAt(fromA).text) || ordered(tr.newDoc.lineAt(fromB).text) || ordered(tr.newDoc.lineAt(toB).text)) may = true;
+	});
+	return may;
+}
 var orderedListRenumber = EditorState.transactionFilter.of((tr) => {
-	if (!tr.docChanged) return tr;
+	if (!tr.docChanged || !mayRenumber(tr)) return tr;
 	const changes = renumberOrderedLists(tr.newDoc.toString());
 	if (changes.length === 0) return tr;
 	return [tr, {
@@ -29921,6 +30388,205 @@ var dragToMove = [
 	dragMovePlugin
 ];
 //#endregion
+//#region src/components/inputs/text-editor/text-editor.cursor.ts
+/** Below this the two edges of one position are the same place drawn twice, and
+*  only glyph overhang and pixel rounding tell them apart. A widget is a full
+*  icon wide and a line wrap is a line away, so neither comes near it. */
+var GLYPH_NOISE_PX = 2;
+/** The side the main caret is drawn on at `head`, when that is not for the
+*  selection's own assoc to say. Set by a step-over (its assoc does not survive
+*  the transaction: a later filter rebuilds the selection without it), by a
+*  click (CodeMirror reads the side of a click from the line, not from the
+*  pointer, and would land left of a badge you clicked right of), and by an
+*  edit: typing and a backward delete leave the caret at the end of what was
+*  just edited, so on the side that text is, the left; a forward delete leaves
+*  it where the removed text began, the right. */
+var sideHint = /* @__PURE__ */ new WeakMap();
+/** The side a step-over asks for, carried as an annotation. */
+var caretSide = Annotation.define();
+/** Where the pointer last went down or dragged, to read the side of a click. */
+var lastPointer = /* @__PURE__ */ new WeakMap();
+function edges(view, head) {
+	const before = view.coordsAtPos(head, -1);
+	const after = view.coordsAtPos(head, 1);
+	return before && after ? {
+		before,
+		after
+	} : null;
+}
+/** A line wrap puts the two sides a whole line apart. A few pixels is not that:
+*  a syntax marker is set in monospace, whose glyph box sits a little higher or
+*  lower than the body text's, and Safari rounds each edge to a whole pixel. */
+var WRAP_PX = 8;
+function onOneLine(e) {
+	return Math.abs(e.before.top - e.after.top) < WRAP_PX;
+}
+/** The side the caret is drawn on at `head`: 1 unless the two sides are
+*  genuinely apart and a hint, or else the arrival direction, says "before". */
+function drawnAssoc(view, head, assoc) {
+	const e = edges(view, head);
+	if (e && onOneLine(e) && Math.abs(e.before.left - e.after.left) <= GLYPH_NOISE_PX) return 1;
+	const hint = sideHint.get(view);
+	if (hint && hint.head === head) {
+		if (hint.side !== "pointer") return hint.side;
+		const p = lastPointer.get(view);
+		if (p && e) return Math.abs(p.x - e.before.left) <= Math.abs(p.x - e.after.left) ? -1 : 1;
+	}
+	if (assoc) return assoc < 0 ? -1 : 1;
+	return 1;
+}
+var pointerTracker = EditorView.domEventHandlers({
+	mousedown(event, view) {
+		lastPointer.set(view, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		return false;
+	},
+	mousemove(event, view) {
+		if (event.buttons) lastPointer.set(view, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		return false;
+	},
+	touchstart(event, view) {
+		const touch = event.touches[0];
+		if (touch) lastPointer.set(view, {
+			x: touch.clientX,
+			y: touch.clientY
+		});
+		return false;
+	}
+});
+/** Puts the caret on `side` of the link badge it stands at, without moving it in
+*  the document. Nothing to do (so the key falls through to its usual command)
+*  when there is no badge here, or the caret is on that side already. Only a
+*  link badge qualifies: a mention token or an annotation badge keeps its own
+*  Backspace and arrow behavior. The badge's two sides are not asked to share a
+*  line: the marker before it may measure a rounded pixel off in Safari, and a
+*  wrap can fall between the two. */
+function stepOver(side) {
+	return (view) => {
+		const { main } = view.state.selection;
+		if (!main.empty || !linkEndsAt(view.state, main.head) || !edges(view, main.head)) return false;
+		if (drawnAssoc(view, main.head, main.assoc) === side) return false;
+		view.dispatch({
+			selection: EditorSelection.cursor(main.head, side),
+			annotations: caretSide.of(side),
+			userEvent: "select"
+		});
+		return true;
+	};
+}
+var stepOverKeymap = Prec.high(keymap.of([
+	{
+		key: "ArrowLeft",
+		run: stepOver(-1)
+	},
+	{
+		key: "ArrowRight",
+		run: stepOver(1)
+	},
+	{
+		key: "Backspace",
+		run: stepOver(-1)
+	},
+	{
+		key: "Delete",
+		run: stepOver(1)
+	}
+]));
+/** Characters that end a bare URL by themselves (GFM: whitespace, `<`, and the
+*  punctuation it leaves off the end), so text starting with one lands after
+*  the badge on its own. Anything else would join the URL. */
+var ENDS_URL = /^[\s<?!.,:*_~)]/;
+/** Text typed right of the badge of a bare URL lands right of the badge. There
+*  is no boundary in markdown to put it behind: `www.apple.comx` is one URL. A
+*  space is that boundary, so the editor writes it before the text. */
+var typePastBadge = EditorView.inputHandler.of((view, from, to, text) => {
+	if (from !== to || !text || view.composing || ENDS_URL.test(text)) return false;
+	const { main } = view.state.selection;
+	if (!main.empty || main.head !== from || !bareUrlEndsAt(view.state, from) || !edges(view, from)) return false;
+	if (drawnAssoc(view, from, main.assoc) !== 1) return false;
+	view.dispatch({
+		changes: {
+			from,
+			insert: ` ${text}`
+		},
+		selection: { anchor: from + 1 + text.length },
+		userEvent: "input.type",
+		scrollIntoView: true
+	});
+	return true;
+});
+var stableCursor = [
+	layer({
+		above: true,
+		class: "cm-nldd-cursorLayer",
+		markers(view) {
+			const { state } = view;
+			const conf = getDrawSelectionConfig(state);
+			const out = [];
+			for (const r of state.selection.ranges) {
+				if (!r.empty && !conf.drawRangeCursor) continue;
+				const className = r === state.selection.main ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary";
+				const cursor = EditorSelection.cursor(r.head, drawnAssoc(view, r.head, r.assoc));
+				out.push(...RectangleMarker.forRange(view, className, cursor));
+			}
+			return out;
+		},
+		update(update, dom) {
+			if (update.docChanged || update.selectionSet) {
+				const { view } = update;
+				const head = update.state.selection.main.head;
+				const kept = sideHint.get(view);
+				let hint = kept ? {
+					...kept,
+					head: update.changes.mapPos(kept.head)
+				} : null;
+				const oldHead = update.startState.selection.main.head;
+				for (const tr of update.transactions) {
+					const asked = tr.annotation(caretSide);
+					if (asked) hint = {
+						head,
+						side: asked
+					};
+					else if (tr.isUserEvent("select.pointer")) hint = {
+						head,
+						side: "pointer"
+					};
+					else if (tr.isUserEvent("input") || tr.isUserEvent("delete.backward")) hint = {
+						head,
+						side: linkEndsAt(update.state, head) && !linkEndsAt(update.startState, oldHead) ? 1 : -1
+					};
+					else if (tr.isUserEvent("delete.forward")) hint = {
+						head,
+						side: 1
+					};
+					else if (tr.selection) hint = null;
+				}
+				if (hint) sideHint.set(view, hint);
+				else sideHint.delete(view);
+			}
+			if (update.transactions.some((tr) => tr.selection)) dom.style.animationName = dom.style.animationName === "cm-blink" ? "cm-blink2" : "cm-blink";
+			return update.docChanged || update.selectionSet;
+		},
+		mount(dom, view) {
+			dom.style.animationDuration = `${getDrawSelectionConfig(view.state).cursorBlinkRate}ms`;
+		}
+	}),
+	pointerTracker,
+	stepOverKeymap,
+	typePastBadge,
+	EditorView.theme({
+		".cm-cursorLayer": { display: "none" },
+		".cm-nldd-cursorLayer": { pointerEvents: "none" },
+		"&.cm-focused > .cm-scroller > .cm-nldd-cursorLayer": { animation: "steps(1) cm-blink 1.2s infinite" },
+		"&.cm-focused > .cm-scroller > .cm-nldd-cursorLayer .cm-cursor": { display: "block" }
+	})
+];
+//#endregion
 //#region src/components/inputs/text-editor/text-editor.commands.ts
 var EMPTY_FORMATS = {
 	bold: false,
@@ -29931,12 +30597,12 @@ var EMPTY_FORMATS = {
 	link: false,
 	bulletList: false,
 	orderedList: false,
+	taskList: false,
 	quote: false,
 	heading: 0
 };
 function enclosing(view, pos, nodeName, side = 1) {
-	for (let n = syntaxTree(view.state).resolveInner(pos, side); n; n = n.parent) if (n.name === nodeName) return n;
-	return null;
+	return enclosingNamed(view.state, pos, side, nodeName);
 }
 /** An inline format is "active" for the caret only when the node encloses it on
 *  *both* sides. At the outer edge (just before the opening marker or just after
@@ -29947,31 +30613,67 @@ function enclosingInline(view, pos, nodeName) {
 	const right = enclosing(view, pos, nodeName, 1);
 	return left && right && left.from === right.from && left.to === right.to ? right : null;
 }
-/** Wrap (or, if already wrapped, unwrap) each selection range with `marker`. */
+/** Wrap each selection range with `marker`, or unwrap it when it is already
+*  wrapped. A caret at the very end of the wrapped text steps out of the run
+*  instead: bold, type, bold ends with the caret after the bold, ready for the
+*  next word, not with the bold undone. */
 function toggleInlineWrap(view, marker, nodeName) {
 	if (view.state.readOnly) return;
+	const { state } = view;
 	const len = marker.length;
-	view.dispatch(view.state.changeByRange((range) => {
-		const wrap = enclosing(view, range.from, nodeName);
-		if (wrap) return {
-			changes: [{
+	const held = state.field(heldEmphasisField, false);
+	view.dispatch(state.changeByRange((range) => {
+		const text = state.sliceDoc(range.from, range.to);
+		const lead = /^\s*/.exec(text)[0].length;
+		if (!range.empty && lead === text.length) return { range };
+		const from = range.from + lead;
+		const to = range.to - /\s*$/.exec(text)[0].length;
+		const wrap = enclosing(view, from, nodeName) ?? (held && held.name === nodeName && from >= held.from && to <= held.to ? held : null);
+		if (wrap) {
+			const content = state.sliceDoc(wrap.from + len, wrap.to - len);
+			if (range.empty && from === wrap.to - len && content.trim()) {
+				const run = {
+					from: wrap.from,
+					to: wrap.to,
+					name: nodeName,
+					marker: state.sliceDoc(wrap.from, wrap.from + len),
+					live: false
+				};
+				const changes = EMPHASIS_MARKERS.has(nodeName) ? repairChangesFor(state, run) : [];
+				let pos = wrap.to;
+				while (/[ \t]/.test(state.sliceDoc(pos, pos + 1))) pos++;
+				return {
+					changes,
+					range: EditorSelection.cursor(pos)
+				};
+			}
+			const changes = state.changes([{
 				from: wrap.from,
 				to: wrap.from + len
 			}, {
 				from: wrap.to - len,
 				to: wrap.to
-			}],
-			range: EditorSelection.range(Math.max(wrap.from, range.from - len), Math.max(wrap.from, range.to - len))
-		};
+			}]);
+			return {
+				changes,
+				range: EditorSelection.range(changes.mapPos(range.anchor), changes.mapPos(range.head))
+			};
+		}
 		return {
 			changes: [{
-				from: range.from,
+				from,
 				insert: marker
 			}, {
-				from: range.to,
+				from: to,
 				insert: marker
 			}],
-			range: EditorSelection.range(range.from + len, range.to + len)
+			range: EditorSelection.range(from + len, to + len),
+			effects: range.empty && range === state.selection.main && EMPHASIS_MARKERS.has(nodeName) ? holdEmphasis.of({
+				from,
+				to: from + 2 * len,
+				name: nodeName,
+				marker
+			}) : void 0
 		};
 	}));
 	view.focus();
@@ -29993,20 +30695,51 @@ function minimalLineChange(line, next) {
 		insert: next.slice(p, next.length - s)
 	};
 }
-function mapSelectedLines(view, transform) {
-	if (view.state.readOnly) return;
+/** Dispatch line-level changes with the selection carried along. A caret that
+*  sits exactly where a marker is inserted (column 0 of an empty line, say) is
+*  mapped to *after* the insertion, so what is typed next lands in the item and
+*  not in front of its marker. Plain mapping would leave it before. */
+function dispatchLineChanges(view, changes) {
+	if (changes.length) {
+		const { state } = view;
+		const set = state.changes(changes);
+		const sel = state.selection.main;
+		view.dispatch({
+			changes: set,
+			selection: {
+				anchor: set.mapPos(sel.anchor, 1),
+				head: set.mapPos(sel.head, 1)
+			}
+		});
+	}
+	view.focus();
+}
+/** The selected line range, and whether it is a single blank line. The line
+*  commands skip blank lines because they separate items, but when the blank
+*  line is the only one selected (an empty document, a fresh paragraph) it is
+*  the whole target and must take the marker. */
+function selectedLines(view) {
 	const { state } = view;
 	const { from, to } = state.selection.main;
 	const first = state.doc.lineAt(from).number;
 	const last = state.doc.lineAt(to).number;
+	return {
+		first,
+		last,
+		loneBlank: first === last && state.doc.line(first).text.trim() === ""
+	};
+}
+function mapSelectedLines(view, transform) {
+	if (view.state.readOnly) return;
+	const { state } = view;
+	const { first, last } = selectedLines(view);
 	const changes = [];
 	for (let i = first; i <= last; i++) {
 		const line = state.doc.line(i);
 		const change = minimalLineChange(line, transform(line.text));
 		if (change) changes.push(change);
 	}
-	if (changes.length) view.dispatch({ changes });
-	view.focus();
+	dispatchLineChanges(view, changes);
 }
 function everySelectedLine(view, predicate) {
 	const { state } = view;
@@ -30036,39 +30769,56 @@ function setHeading(view, level) {
 }
 function toggleBulletList(view) {
 	const re = /^(\s*)[-*+]\s+/;
-	const allBulleted = everySelectedLine(view, (t) => re.test(t) || t.trim() === "");
+	const { loneBlank } = selectedLines(view);
+	const allBulleted = !loneBlank && everySelectedLine(view, (t) => re.test(t) || t.trim() === "");
 	mapSelectedLines(view, (t) => {
-		if (t.trim() === "") return t;
+		if (t.trim() === "" && !loneBlank) return t;
 		if (allBulleted) return t.replace(re, "$1");
 		return re.test(t) ? t : t.replace(/^(\s*)/, "$1- ");
 	});
 }
-var LIST_STRIP_RE = /^(\s*)(?:[-*+]|\d+[.)])\s+/;
+var TASK_RE = /^(\s*)[-*+]\s+\[[ xX]\]\s+/;
+/** Turn the selected lines into GFM task items (`- [ ] `), or back into plain
+*  bullets when they all are tasks already. A bullet or numbered item keeps its
+*  indent and becomes a task; toggling off leaves a bullet rather than bare text,
+*  so the list survives and only the box goes. Checking a box is not this
+*  command's job. */
+function toggleTaskList(view) {
+	const { loneBlank } = selectedLines(view);
+	const allTasks = !loneBlank && everySelectedLine(view, (t) => TASK_RE.test(t) || t.trim() === "");
+	mapSelectedLines(view, (t) => {
+		if (t.trim() === "" && !loneBlank) return t;
+		if (allTasks) return t.replace(TASK_RE, "$1- ");
+		if (TASK_RE.test(t)) return t;
+		return t.replace(LIST_STRIP_RE, "$1").replace(/^(\s*)/, "$1- [ ] ");
+	});
+}
+var LIST_STRIP_RE = /^(\s*)(?:[-*+]|\d+[.)])(?:\s+|$)/;
+var TASK_BOX_RE = /^(\s*)\[[ xX]\]\s+/;
 /** Set the selected lines to a list of `type`, replacing any existing list
 *  marker; `'none'` strips it. Ordered items are numbered within the selection.
 *  Unlike the toggles, this cleanly switches between list types (for a picker). */
 function setList(view, type) {
 	if (view.state.readOnly) return;
 	const { state } = view;
-	const { from, to } = state.selection.main;
-	const first = state.doc.lineAt(from).number;
-	const last = state.doc.lineAt(to).number;
+	const { first, last, loneBlank } = selectedLines(view);
 	const changes = [];
 	let number = 0;
 	for (let i = first; i <= last; i++) {
 		const line = state.doc.line(i);
-		const stripped = line.text.replace(LIST_STRIP_RE, type === "none" ? "" : "$1");
+		const withoutMarker = line.text.replace(LIST_STRIP_RE, type === "none" ? "" : "$1");
+		const wasItem = withoutMarker !== line.text;
+		const stripped = wasItem ? withoutMarker.replace(TASK_BOX_RE, type === "none" ? "" : "$1") : withoutMarker;
 		let next = stripped;
-		if (type !== "none" && stripped.trim() !== "") {
+		if (type !== "none" && (stripped.trim() !== "" || wasItem || loneBlank)) {
 			number += 1;
-			const marker = type === "bullet" ? "- " : `${number}. `;
+			const marker = type === "bullet" ? "- " : type === "task" ? "- [ ] " : `${number}. `;
 			next = stripped.replace(/^(\s*)/, `$1${marker}`);
 		}
 		const change = minimalLineChange(line, next);
 		if (change) changes.push(change);
 	}
-	if (changes.length) view.dispatch({ changes });
-	view.focus();
+	dispatchLineChanges(view, changes);
 }
 /** Nest the selected list item(s) under the nearest preceding item at the same
 *  level, indenting only as far as that parent's content column. That keeps the
@@ -30270,7 +31020,8 @@ function toggleCodeBlock(view) {
 function readActiveFormats(view) {
 	const { state } = view;
 	const pos = state.selection.main.head;
-	const has = (name) => enclosingInline(view, pos, name) !== null;
+	const held = state.field(heldEmphasisField, false);
+	const has = (name) => enclosingInline(view, pos, name) !== null || held?.name === name;
 	const lineText = state.doc.lineAt(pos).text;
 	const lineStart = state.doc.lineAt(pos).from;
 	const headingMatch = lineText.match(/^(#{1,6})\s/);
@@ -30284,6 +31035,7 @@ function readActiveFormats(view) {
 		link: realLinkAt(view, pos) !== null,
 		bulletList: !codeBlock && /^\s*[-*+]\s/.test(lineText),
 		orderedList: !codeBlock && /^\s*\d+[.)]\s/.test(lineText),
+		taskList: !codeBlock && TASK_RE.test(lineText),
 		quote: enclosing(view, lineStart, "Blockquote") !== null,
 		heading: codeBlock || !headingMatch ? 0 : headingMatch[1].length
 	};
@@ -30296,13 +31048,16 @@ var textEditorStyles = css`
 	/* # Host */
 
 	:host {
-		--__caret-width: var(--primitives-border-width-regular);
+		--_caret-width: var(--primitives-border-width-regular);
+		--_caret-ring-width: var(--primitives-border-width-thin);
 		--_corner-radius: 0;
 		--_background-color: transparent;
 		--_highlight-border-color: transparent;
 		--_highlight-border-shadow: none;
 		--_padding-block: 0px;
-		--_padding-inline: 0px;
+		/* Room for the caret's own ink at the first and last position of a line:
+		   its width plus its ring. Without it the edge carets are clipped. */
+		--_padding-inline: calc(var(--_caret-width) + var(--_caret-ring-width));
 		--_content-color: var(--semantics-content-color);
 		--_text-font: var(--primitives-font-body-md-regular-snug);
 		--_code-font: var(--primitives-font-monospace-md-regular-snug);
@@ -30439,16 +31194,14 @@ var textEditorStyles = css`
 		   surfaces in light and dark (accent-600 fell just short on white), so the
 		   caret stays clearly visible without washing out. */
 		border-left-color: var(--primitives-color-accent-700);
-		border-left-width: var(--__caret-width);
-		/* A thin surface-colored halo, like the drop cursor, so the caret stays legible
+		border-left-width: var(--_caret-width);
+		/* CodeMirror centers its own 1.2px caret with a -0.6px margin. Ours is wider,
+		   so recenter it on the insertion point from its own width. */
+		margin-left: calc(var(--_caret-width) / -2);
+		/* A thin surface-colored ring, like the drop cursor, so the caret stays legible
 		   even over a tinted token (annotation, inline code) where the accent alone can
 		   blend in. Blinks with the caret (opacity covers the shadow too). */
-		box-shadow: 0 0 0 var(--primitives-border-width-thin) var(--semantics-surfaces-base-background-color);
-		/* CodeMirror draws the caret ~0.6px left of the text position. At a line start
-		   with no inline padding (the simple variant) that overhangs the scroller's
-		   overflow edge, so the left of the 2px gets clipped and the caret looks thinner
-		   there than mid-line. Nudge it right so the full width stays inside the content. */
-		transform: translateX(0.6px);
+		box-shadow: 0 0 0 var(--_caret-ring-width) var(--semantics-surfaces-base-background-color);
 	}
 
 	:host .cm-scroller {
@@ -30912,12 +31665,20 @@ var nlddTextEditorTranslations = {
 *
 * Headless: there is no built-in toolbar. A consumer drives formatting via the
 * command methods (toggleBold/toggleItalic/toggleInlineCode/toggleStrikethrough/
-* toggleHeading/toggleBulletList/toggleQuote/toggleLink/runCommand to toggle, and
+* toggleHeading/toggleBulletList/toggleTaskList/toggleQuote/toggleLink/runCommand
+* to toggle, and
 * setHeading/setList for picker-style "set" semantics), reads the active formats
 * with getState(), listens to the nldd-text-editor-state event to render toggle
 * states, and forwards padding clicks with focusFromPoint(). Cmd/Ctrl+B/I/E/K are
-* bound out of the box. Commands keep focus on the editor. An @-mention typeahead
-* (mentionSource) collapses to an atomic token, and a W3C-style annotation overlay
+* bound out of the box. Commands keep focus on the editor. An inline toggle wraps
+* the selected text (whitespace at its edges stays outside the markers), unwraps
+* a run the caret is in, and with the caret at the very end of a run steps out
+* of it. Bold that a typed space has broken (`**woord **`) keeps its styling
+* while the caret is inside; the space moves outside the markers when the caret
+* leaves. insertAtCursor(text) puts text at the caret and replaceRange(from, to,
+* text) writes at the same clean offsets getSelection() reads. An @-mention typeahead
+* (mentionSource) collapses to an atomic token, further typeahead lists on their
+* own trigger (typeaheads) write what you tell them to, and a W3C-style annotation overlay
 * (annotations) marks ranges with a dashed underline, light tint and a count badge
 * without touching the underlying text.
 *
@@ -30937,6 +31698,7 @@ var nlddTextEditorTranslations = {
 * @attr {string} accessible-label - Accessible label forwarded to the editor. Set automatically by nldd-form-field.
 *
 * @prop {MentionSource} mentionSource - Consumer-supplied @-mention candidate source (property only). Without it, @-typeahead is inert.
+* @prop {Typeahead[]} typeaheads - Your own typeahead lists next to the @-mention (property only): each a trigger character (`#`, `:`, `/`), a `source` that returns candidates for the text typed after it, and an optional `insert` that decides what a choice writes (by default the trigger, the text and a space). Lists on one trigger are merged in order. A candidate is `{ id, text, supportingText? }` and can carry an `avatar` (its row then takes two lines, the supporting text under the text), an `icon` or a `symbol` for its row.
 * @attr {boolean} annotatable - Enable the annotation overlay (off by default). Annotations only render when this is set.
 * @prop {Annotation[]} annotations - Consumer-supplied annotation overlay (property only). Anchored by offset and mapped through edits; the text stays clean. Requires `annotatable`. Assign a NEW array to apply changes (Lit dirty-checks by identity, so in-place mutation like `.push()` won't re-render): `editor.annotations = [...editor.annotations, next]`.
 * @attr {object} translations - Override the editor's assistive-tech strings (the open-in-new-tab link badge and the annotation count badge). Unset keys fall back to Dutch.
@@ -30945,7 +31707,8 @@ var nlddTextEditorTranslations = {
 * @fires input - When the content changes (detail: { value })
 * @fires change - When the content is committed on blur (detail: { value })
 * @fires nldd-text-editor-state - When the selection or content changes (detail: TextEditorState), for toolbar toggle state
-* @fires nldd-text-editor-mention - When an @-mention is inserted (detail: MentionInsertedDetail with id, label, from, to)
+* @fires nldd-text-editor-mention - When an @-mention is inserted (detail: MentionInsertedDetail with id, text, from, to; clean offsets, like getSelection())
+* @fires nldd-text-editor-typeahead - When a candidate from one of the `typeaheads` is chosen (detail: TypeaheadChosenDetail with trigger, candidate, from, to; clean offsets)
 * @fires nldd-text-editor-annotation-click - When an annotation's count badge is clicked (detail: { ids: string[], rect: DOMRect }); rect is the badge's viewport box so a consumer can anchor its own note UI to it
 */
 var _NLDDTextEditor;
@@ -30967,6 +31730,12 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		this.resize = "auto";
 		this.variant = "simple";
 		this.accessibleLabel = "";
+		this.typeaheads = [];
+		this._mentionTypeahead = {
+			trigger: "@",
+			source: (query) => this.mentionSource?.(query) ?? [],
+			insert: mentionInsert
+		};
 		this.annotatable = false;
 		this.annotations = [];
 		this.translations = {};
@@ -30977,6 +31746,7 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		this._historyCompartment = new Compartment();
 		this.invalid = false;
 		this._cutBuffer = null;
+		this._lastState = null;
 		this._onScrollerPointerDown = (event) => {
 			if (event.target !== this.view?.scrollDOM) return;
 			if (this.view.state.readOnly) return;
@@ -31029,7 +31799,7 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		return [
 			nlddCodeMirrorTheme,
 			markdownEditing,
-			mentions(() => this.mentionSource, (detail) => this._emitMention(detail)),
+			typeaheads(() => this._typeaheadLists(), (choice) => this._onTypeaheadChosen(choice)),
 			Prec.low(orderedListRenumber),
 			annotations((count, quote) => this._t("components.text-editor.annotation-count-label", {
 				count,
@@ -31039,6 +31809,7 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 			Prec.highest(linkOpenBadge((url) => this._t("components.text-editor.open-in-new-tab-label", { url }))),
 			this._historyCompartment.of(history()),
 			drawSelection(),
+			stableCursor,
 			dropCursor(),
 			dragToMove,
 			Prec.highest(keymap.of([{
@@ -31082,6 +31853,20 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 					key: "Delete",
 					run: (view) => this._selectMentionBeforeDelete(view, 1)
 				},
+				{
+					key: "Mod-]",
+					run: (view) => {
+						indentListItems(view);
+						return true;
+					}
+				},
+				{
+					key: "Mod-[",
+					run: (view) => {
+						outdentListItems(view);
+						return true;
+					}
+				},
 				...defaultKeymap,
 				...historyKeymap
 			]),
@@ -31097,7 +31882,8 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 				focus: () => {
 					this._valueAtFocus = this.value;
 				},
-				blur: () => {
+				blur: (_event, view) => {
+					repairHeldEmphasis(view);
 					if (this.value !== this._valueAtFocus) this._emitChange();
 				},
 				mousedown: (event, view) => {
@@ -31154,7 +31940,7 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 	firstUpdated() {
 		this._initialValue = this.value;
 		this.style.setProperty("--_rows", String(this.rows));
-		this.mountEditor(this.value);
+		this.mountEditor(stripSentinels(this.value));
 		this.onEditorMounted();
 	}
 	onEditorMounted() {
@@ -31170,7 +31956,7 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		if (changed.has("rows")) this.style.setProperty("--_rows", String(this.rows));
 		if (this.view) {
 			if (changed.has("value")) {
-				if (stripSentinels(this.doc) !== this.value) this.setDoc(this.value);
+				if (stripSentinels(this.doc) !== this.value) this.setDoc(stripSentinels(this.value));
 				this.commitFormValue();
 			}
 			if (changed.has("disabled") || changed.has("readonly")) this.reconfigure(this._editableCompartment, this._editableExtension());
@@ -31221,8 +32007,14 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 	toggleBulletList() {
 		if (this.view) toggleBulletList(this.view);
 	}
+	/** Turn the selected lines into GFM task items (`- [ ] `), or back into
+	*  bullets when they all are tasks. Checking a box is not a command. */
+	toggleTaskList() {
+		if (this.view) toggleTaskList(this.view);
+	}
 	/** Set the list type, replacing any existing list ('none' strips it) — for an
-	*  exclusive list picker. */
+	*  exclusive list picker. A task keeps its checkbox only within its own type:
+	*  switching to bullet or ordered takes the box along with the marker. */
 	setList(type) {
 		if (this.view) setList(this.view, type);
 	}
@@ -31331,6 +32123,45 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		this._pasteText(stripSentinels(raw));
 		this.view?.focus();
 	}
+	/** Puts `text` at the caret, in place of the selection when there is one, and
+	*  leaves the caret after it, with focus on the editor. Plain text: markdown
+	*  in it stays as written and is styled like anything typed. Does nothing on
+	*  a read-only editor. */
+	insertAtCursor(text) {
+		if (!this.view || this.view.state.readOnly) return;
+		const clean = stripSentinels(text);
+		if (clean) this.view.dispatch({
+			...this.view.state.replaceSelection(clean),
+			userEvent: "input"
+		});
+		this.view.focus();
+	}
+	/** Replaces the text between two offsets with `text`, and leaves the caret
+	*  after it. The offsets are CLEAN, the same coordinates `getSelection()` and
+	*  the annotations speak, so a consumer can act on what it read there. Both
+	*  are clamped into the text, and `to` below `from` counts as an insert at
+	*  `from`. Does nothing on a read-only editor. */
+	replaceRange(from, to, text) {
+		if (!this.view || this.view.state.readOnly) return;
+		const doc = this.view.state.doc.toString();
+		const sentinels = sentinelPositions(doc);
+		const cleanLength = doc.length - sentinels.length;
+		const start = Math.max(0, Math.min(from, cleanLength));
+		const end = Math.max(start, Math.min(to, cleanLength));
+		const insert = stripSentinels(text);
+		const docFrom = cleanToDoc(sentinels, start);
+		const docTo = cleanToDoc(sentinels, end);
+		this.view.dispatch({
+			changes: {
+				from: docFrom,
+				to: docTo,
+				insert
+			},
+			selection: { anchor: docFrom + insert.length },
+			userEvent: "input"
+		});
+		this.view.focus();
+	}
 	/** Insert `text` at the selection, re-attaching the cut annotations when it matches
 	*  a cut made in this editor (a move, one-shot). Shared by the toolbar's paste()
 	*  and the native Cmd/Ctrl+V handler. */
@@ -31340,7 +32171,10 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		const sameText = (a, b) => a.replace(/\r\n/g, "\n") === b.replace(/\r\n/g, "\n");
 		const carry = !!(buffer && sameText(buffer.text, text) && buffer.anns.length > 0);
 		const at = docToClean(this.view.state.doc.toString(), this.view.state.selection.main.from);
-		const spec = this.view.state.replaceSelection(text);
+		const spec = {
+			...this.view.state.replaceSelection(text),
+			userEvent: "input.paste"
+		};
 		this.view.dispatch(carry ? {
 			...spec,
 			effects: pasteAnnotations.of({
@@ -31350,10 +32184,20 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		} : spec);
 		if (carry) this._cutBuffer = null;
 	}
-	/** Escape hatch: run a command by name (bold, italic, inlineCode,
-	*  strikethrough, bulletList, quote, heading [payload: level], link
-	*  [payload: href], copy, cut, paste). */
+	/** Escape hatch: run a command by name, so a toolbar can carry the name in its
+	*  markup instead of a method reference. Every method above is reachable.
+	*
+	*  Toggles (no payload): `bold`, `italic`, `inlineCode`, `strikethrough`,
+	*  `bulletList`, `taskList`, `quote`, `codeBlock`, `heading` (payload: the
+	*  level, default 1), `link` (payload: the href).
+	*  Setters: `setHeading` (payload: the level, 0 for a paragraph), `setList`
+	*  (payload: 'none' | 'bullet' | 'ordered' | 'task').
+	*  The rest: `indent`, `outdent`, `undo`, `redo`, `copy`, `cut`, `paste`.
+	*
+	*  An unknown name warns rather than doing nothing quietly: a typo in a
+	*  toolbar is otherwise invisible. */
 	runCommand(name, payload) {
+		const level = (fallback) => typeof payload === "number" ? payload : fallback;
 		switch (name) {
 			case "bold":
 				this.toggleBold();
@@ -31370,22 +32214,49 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 			case "bulletList":
 				this.toggleBulletList();
 				break;
+			case "taskList":
+				this.toggleTaskList();
+				break;
 			case "quote":
 				this.toggleQuote();
 				break;
+			case "codeBlock":
+				this.toggleCodeBlock();
+				break;
 			case "heading":
-				this.toggleHeading(typeof payload === "number" ? payload : 1);
+				this.toggleHeading(level(1));
+				break;
+			case "setHeading":
+				this.setHeading(level(0));
+				break;
+			case "setList":
+				this.setList(typeof payload === "string" ? payload : "none");
 				break;
 			case "link":
 				this.toggleLink(typeof payload === "string" ? payload : "");
 				break;
+			case "indent":
+				this.indent();
+				break;
+			case "outdent":
+				this.outdent();
+				break;
+			case "undo":
+				this.undo();
+				break;
+			case "redo":
+				this.redo();
+				break;
 			case "copy":
 				this.copy();
 				break;
 			case "cut":
 				this.cut();
 				break;
-			case "paste": this.paste();
+			case "paste":
+				this.paste();
+				break;
+			default: console.warn(`<nldd-text-editor>: runCommand('${name}') is not a command.`);
 		}
 	}
 	/** The formats active at the current selection (drives a toolbar's state). */
@@ -31451,8 +32322,43 @@ var NLDDTextEditor = (_NLDDTextEditor = class NLDDTextEditor extends DescribedBy
 		}));
 	}
 	_emitState() {
+		const state = this.getState();
+		const last = this._lastState;
+		if (last && last.empty === state.empty && last.canIndent === state.canIndent && last.canOutdent === state.canOutdent && last.canUndo === state.canUndo && last.canRedo === state.canRedo && Object.keys(state.active).every((key) => last.active[key] === state.active[key])) return;
+		this._lastState = state;
 		this.dispatchEvent(new CustomEvent("nldd-text-editor-state", {
-			detail: this.getState(),
+			detail: state,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_typeaheadLists() {
+		return this.mentionSource ? [this._mentionTypeahead, ...this.typeaheads] : this.typeaheads;
+	}
+	/** A choice from any list. Offsets in the events are clean, like
+	*  getSelection() and the annotations: the document carries sentinels the
+	*  value never shows. */
+	_onTypeaheadChosen(choice) {
+		if (!this.view) return;
+		const doc = this.view.state.doc.toString();
+		const from = docToClean(doc, choice.from);
+		if (choice.typeahead === this._mentionTypeahead) {
+			const { id, text } = choice.candidate;
+			this._emitMention({
+				id,
+				text,
+				from,
+				to: from + mentionToken(choice.candidate).length
+			});
+			return;
+		}
+		this.dispatchEvent(new CustomEvent("nldd-text-editor-typeahead", {
+			detail: {
+				trigger: choice.trigger,
+				candidate: choice.candidate,
+				from,
+				to: docToClean(doc, choice.to)
+			},
 			bubbles: true,
 			composed: true
 		}));
@@ -31552,6 +32458,7 @@ __decorate([property({
 	attribute: "accessible-label"
 })], NLDDTextEditor.prototype, "accessibleLabel", void 0);
 __decorate([property({ attribute: false })], NLDDTextEditor.prototype, "mentionSource", void 0);
+__decorate([property({ attribute: false })], NLDDTextEditor.prototype, "typeaheads", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -37491,6 +38398,7 @@ var pageStyles = css`
 		--_outer-inset-bottom: var(--context-inset-bottom, 0px);
 		--_header-height: 0px;
 		--_footer-height: 0px;
+		--_header-full-height: 0px;
 		/* Set from JS while the page owns the scroller. initial, not a length, so
 		   the fallback stands when the document scrolls instead. */
 		--_scroll-height: initial;
@@ -37644,6 +38552,7 @@ var pageStyles = css`
 	:host(:not([data-scroll="root"])) .page__scroll {
 		--context-inset-top: var(--_header-height);
 		--context-inset-bottom: var(--_footer-height);
+		padding-top: var(--_header-full-height);
 	}
 
 	:host([sticky-header]) .page__scroll {
@@ -37719,8 +38628,9 @@ function pageTemplate(component) {
 * A page layout with optional sticky header and footer.
 * Without sticky-header, the host is the scroll container and the header
 * is in normal flow. With sticky-header, the header becomes absolute and
-* .page__scroll takes over scrolling. A ResizeObserver on the header
-* sets padding-top on the scroll wrapper (only when not scrolled).
+* .page__scroll takes over scrolling, padded by the measured header height.
+* That padding freezes once you scroll, so a collapsing bar cannot drag the
+* content up under the cursor.
 *
 * In root-scroll mode (--context-scroll-mode: root, derived upstream by
 * nldd-app-view) the page stops owning a scroller: the document scrolls and the
@@ -37758,8 +38668,8 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._scrollMode = "nested";
 		this._scrollTarget = null;
 		this._scrollProvider = null;
-		this._headerObserver = null;
 		this._insetObserver = null;
+		this._headerFullHeight = 0;
 		this._mainSlot = null;
 		this._resizeRaf = 0;
 		this._onResize = () => {
@@ -37834,7 +38744,6 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._scrollProvider = null;
 		if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
 		this._teardownScrollListener();
-		this._teardownHeaderObserver();
 		this._teardownInsetObserver();
 		this._teardownMainSlotListener();
 	}
@@ -37862,10 +38771,8 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 	}
 	_configureScroll() {
 		this._teardownScrollListener();
-		this._teardownHeaderObserver();
-		if (this._scrollEl) this._scrollEl.style.paddingTop = "";
 		this._setupScrollListener();
-		if (this.stickyHeader && !this._isRoot) this._setupHeaderObserver();
+		this._headerFullHeight = 0;
 		this._setupInsetObserver();
 		this._onScroll();
 	}
@@ -37877,6 +38784,11 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 	* its anchor, and a consumer that had written the number down would be wrong
 	* from that moment on. A bar that is not sticky scrolls away and adds
 	* nothing, so it stays at zero.
+	*
+	* It also measures the padding the scroll wrapper reserves for an absolute
+	* sticky header. One observer owns both, because two of them writing styles
+	* that resize what the other watches is what leaves ResizeObserver
+	* notifications undelivered.
 	*/
 	_setupInsetObserver() {
 		this._teardownInsetObserver();
@@ -37884,10 +38796,11 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		const footer = this._footerEl;
 		if (!header || !footer) return;
 		const publish = () => {
-			this.style.setProperty("--_header-height", `${this.stickyHeader ? header.offsetHeight : 0}px`);
-			this.style.setProperty("--_footer-height", `${this.stickyFooter ? footer.offsetHeight : 0}px`);
+			this._publish("--_header-height", `${this.stickyHeader ? header.offsetHeight : 0}px`);
+			this._publish("--_footer-height", `${this.stickyFooter ? footer.offsetHeight : 0}px`);
+			this._publish("--_header-full-height", `${this._measureHeaderFullHeight(header)}px`);
 			if (this._isRoot) this.style.removeProperty("--_scroll-height");
-			else this.style.setProperty("--_scroll-height", `${this._scrollEl?.clientHeight ?? 0}px`);
+			else this._publish("--_scroll-height", `${this._scrollEl?.clientHeight ?? 0}px`);
 		};
 		publish();
 		this._insetObserver = new ResizeObserver(publish);
@@ -37901,6 +38814,27 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 			this._insetObserver = null;
 		}
 	}
+	/**
+	* Writes a published variable only when it changes. These values size the
+	* elements the observer watches, so a rewrite feeds the callback its own
+	* next notification, which is what Chromium reports as "ResizeObserver
+	* loop completed with undelivered notifications".
+	*/
+	_publish(name, value) {
+		if (this.style.getPropertyValue(name) === value) return;
+		this.style.setProperty(name, value);
+	}
+	/**
+	* The header at its full height: the last measurement taken at scroll top.
+	* A top title bar shrinks as you pass its anchor, and the space reserved for
+	* it must not shrink along, or the content it starts under is dragged up
+	* from under the cursor. Which mode reserves that space is the CSS's call.
+	*/
+	_measureHeaderFullHeight(header) {
+		if (!this.stickyHeader) return 0;
+		if (this.scrollTarget.scrollTop === 0) this._headerFullHeight = header.offsetHeight;
+		return this._headerFullHeight;
+	}
 	_setupScrollListener() {
 		const target = this.scrollEventTarget;
 		target.addEventListener("scroll", this._onScroll, { passive: true });
@@ -37912,23 +38846,6 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 			this._scrollTarget = null;
 		}
 	}
-	_setupHeaderObserver() {
-		this._teardownHeaderObserver();
-		const header = this._headerEl;
-		const scroll = this._scrollEl;
-		if (!header || !scroll) return;
-		this._headerObserver = new ResizeObserver(() => {
-			if (scroll.scrollTop > 0) return;
-			scroll.style.paddingTop = `${header.offsetHeight}px`;
-		});
-		this._headerObserver.observe(header);
-	}
-	_teardownHeaderObserver() {
-		if (this._headerObserver) {
-			this._headerObserver.disconnect();
-			this._headerObserver = null;
-		}
-	}
 	_setupMainSlotListener() {
 		this._teardownMainSlotListener();
 		const slot = this.shadowRoot?.querySelector("slot:not([name])") ?? null;
@@ -40160,10 +41077,6 @@ var sheetStyles = css`
 		background: var(--semantics-overlays-backdrop-color);
 	}
 
-	:host([modeless]) .sheet::backdrop {
-		background: transparent;
-	}
-
 	:host([placement="left"]) .sheet {
 		@media (min-width: ${mdMin$4}) {
 			inset: var(--semantics-overlays-inset) auto var(--semantics-overlays-inset) var(--semantics-overlays-inset);
@@ -40243,7 +41156,7 @@ function sheetTemplate(component) {
 	return html`
 		<dialog class="sheet"
 			aria-label=${component.accessibleLabel}
-			aria-modal=${component.modeless ? nothing : "true"}
+			aria-modal="true"
 			@pointerdown=${component._handleDialogPointerDown}
 			@click=${component._handleDialogClick}
 			@cancel=${component._handleCancel}
@@ -40252,6 +41165,9 @@ function sheetTemplate(component) {
 			<div class="sheet__body">
 				<slot></slot>
 			</div>
+			<!-- Inside the dialog, so it escapes the inertness a modal imposes on
+			     everything outside it. Plumbing, not consumer API. -->
+			<slot name="notifications"></slot>
 		</dialog>
 	`;
 }
@@ -40356,7 +41272,6 @@ function openWhenRendered(host, getDialog, open) {
 *
 * @attr {string} placement - Sheet position: 'left' | 'right' | 'bottom' (default: 'right')
 * @attr {string} height - Custom height for bottom sheets (and for any sheet on sm viewports, where all placements collapse to bottom). Accepts: `'full'` (default — viewport minus top-inset, identical to omitting the attribute), `'fit-content'` (collapse to content size), or any CSS length/percentage (e.g. `'50dvh'`, `'480px'`, `'50%'`). Always clamped to `100dvh - top-inset` so the sheet can't extend past the dismiss-tap area. No effect on side sheets at md+.
-* @attr {boolean} modeless - Non-modal (no backdrop or focus lock); the sheet is modal by default
 * @attr {string} accessible-label - Accessible name for the dialog, forwarded as aria-label (default: 'Venster')
 * @attr {string} width - Custom width for side sheets (left/right) as a CSS length (e.g. '480px', '32rem'). Applied from the md breakpoint up; ignored on sm (bottom sheet) and for `placement="bottom"`. Clamped to `100vw - 2 * inset` so the sheet always fits.
 *
@@ -40379,7 +41294,6 @@ var NLDDSheet = (_NLDDSheet = class NLDDSheet extends LitElement {
 		super(..._args);
 		this.placement = "right";
 		this.height = "";
-		this.modeless = false;
 		this.accessibleLabel = "Venster";
 		this.width = "";
 		this._hasWarnedLabel = false;
@@ -40430,8 +41344,7 @@ var NLDDSheet = (_NLDDSheet = class NLDDSheet extends LitElement {
 		this._cancelPendingOpen?.();
 		this._cancelPendingOpen = null;
 		this._closeEmitted = false;
-		if (this.modeless) dialog.show();
-		else dialog.showModal();
+		dialog.showModal();
 		this._manageFocus();
 		this.dispatchEvent(new CustomEvent("open", {
 			bubbles: true,
@@ -40470,7 +41383,6 @@ var NLDDSheet = (_NLDDSheet = class NLDDSheet extends LitElement {
 		this._pointerDownOnBackdrop = e.target === this._dialog;
 	}
 	_handleDialogClick(e) {
-		if (this.modeless) return;
 		if (e.target === this._dialog && this._pointerDownOnBackdrop) this.hide();
 	}
 	_emitClose() {
@@ -40503,10 +41415,6 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], NLDDSheet.prototype, "height", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], NLDDSheet.prototype, "modeless", void 0);
 __decorate([property({
 	type: String,
 	attribute: "accessible-label"
@@ -41707,7 +42615,7 @@ function windowTemplate(component) {
 	return html`
 		<dialog class="window"
 			aria-label=${component._resolvedAccessibleLabel}
-			aria-modal=${component.modeless ? nothing : "true"}
+			aria-modal="true"
 			@pointerdown=${component._handleDialogPointerDown}
 			@click=${component._handleDialogClick}
 			@cancel=${component._handleCancel}
@@ -41716,6 +42624,9 @@ function windowTemplate(component) {
 			<div class="window__body">
 				<slot></slot>
 			</div>
+			<!-- Inside the dialog, so it escapes the inertness a modal imposes on
+			     everything outside it. Plumbing, not consumer API. -->
+			<slot name="notifications"></slot>
 		</dialog>
 	`;
 }
@@ -41727,15 +42638,14 @@ var nlddWindowTranslations = { "components.window.accessible-label": "Venster" }
 /**
 * Nederlandse Digitale Dienst Window Component (Lit + TypeScript)
 *
-* A floating window based on the native <dialog> element. Can be shown modal or
-* modeless. Positionable through CSS values.
+* A floating window based on the native <dialog> element, positionable through
+* CSS values. Always modal.
 *
 * No header of its own: consumers use nldd-page with a sticky header inside for
 * a title bar.
 *
 * @element nldd-window
 *
-* @attr {boolean} modeless - Modeless (no backdrop or focus trap); the window is modal by default
 * @attr {boolean} no-light-dismiss - A click on the backdrop does not close the window. For windows where dismissing by accident costs work: a wizard, a form with filled-in fields. Escape and the dismiss button keep working.
 * @attr {string} accessible-label - (required) Accessible name (aria-label). Falls back to the i18n default ('Venster') when unset. Always pass a unique, descriptive name per window.
 * @attr {object} translations - Override translation keys; unset keys fall back to the Dutch default.
@@ -41760,7 +42670,6 @@ var _NLDDWindow;
 var NLDDWindow = (_NLDDWindow = class NLDDWindow extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.modeless = false;
 		this.noLightDismiss = false;
 		this.accessibleLabel = "";
 		this.translations = {};
@@ -41779,7 +42688,7 @@ var NLDDWindow = (_NLDDWindow = class NLDDWindow extends LitElement {
 			this._pointerDownOnBackdrop = this._isOnBackdrop(e);
 		};
 		this._handleDialogClick = (e) => {
-			if (this.modeless || this.noLightDismiss) return;
+			if (this.noLightDismiss) return;
 			if (this._isOnBackdrop(e) && this._pointerDownOnBackdrop) this.hide();
 		};
 		this._handleCancel = (e) => {
@@ -41833,8 +42742,7 @@ var NLDDWindow = (_NLDDWindow = class NLDDWindow extends LitElement {
 		const dialog = this._dialog;
 		if (!dialog) return;
 		this._closeEmitted = false;
-		if (this.modeless) dialog.show();
-		else dialog.showModal();
+		dialog.showModal();
 		this._applyPositionStyles();
 		this._manageFocus();
 		this.dispatchEvent(new CustomEvent("open", {
@@ -41896,10 +42804,6 @@ var NLDDWindow = (_NLDDWindow = class NLDDWindow extends LitElement {
 		return windowTemplate(this);
 	}
 }, _NLDDWindow.styles = windowStyles, _NLDDWindow);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], NLDDWindow.prototype, "modeless", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true,
@@ -43436,7 +44340,7 @@ var template$8 = function() {
 *
 * @element nldd-title-cell
 * @attr {1|2|3|4|5|6} size - Visual size of the title (default: 5)
-* @attr {'default' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'} color - Text color variant (default: 'default'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state.
+* @attr {'content' | 'secondary' | 'accent' | 'success' | 'warning' | 'critical'} color - Text color variant (default: 'content'). `secondary` demotes the title to match the muted overline/supporting-text. `accent`, `success`, `warning` and `critical` tint all three regions so the cell reads as a coherent state.
 * @attr {string} width - 'full' | 'fit-content' | CSS length (e.g. '200px', '20rem'). Default: 'full'
 * @attr {string} min-width - Minimum width as CSS length (e.g. '80px', '5rem')
 * @attr {string} max-width - Maximum width as CSS length (e.g. '300px', '20rem')
@@ -43473,7 +44377,7 @@ var NLDDTitleCell = (_NLDDTitleCell = class NLDDTitleCell extends VisibilityMixi
 	constructor(..._args) {
 		super(..._args);
 		this.size = 5;
-		this.color = "default";
+		this.color = "content";
 		this.width = "full";
 		this.horizontalAlignment = "left";
 		this.verticalAlignment = "center";
@@ -43531,7 +44435,7 @@ __decorate([property({
 })], NLDDTitleCell.prototype, "size", void 0);
 __decorate([property({
 	reflect: true,
-	converter: reflectNonDefault("default")
+	converter: reflectNonDefault("content")
 })], NLDDTitleCell.prototype, "color", void 0);
 __decorate([property({
 	reflect: true,
@@ -45109,8 +46013,10 @@ var NLDDMenuBar = (_NLDDMenuBar = class NLDDMenuBar extends withTranslations(Lit
 	}
 	/**
 	* Calculate which slotted items overflow and hide them behind an overflow button.
-	* Note: not unit-tested — JSDOM lacks layout support (offsetWidth, clientWidth).
-	* Covered by visual/E2E testing via Storybook stories.
+	* Tested both ways in menu-bar.test.ts: with real layout for the whole path, and
+	* with mocked widths for the arithmetic. The space reserved for the button needs
+	* the mocks — the button is a shrinkable flex item, so the rendered layout
+	* absorbs whatever the arithmetic leaves over and always looks right.
 	*/
 	_updateOverflow() {
 		const overflowButton = this._overflowButton;
@@ -45437,7 +46343,7 @@ var nlddLinkTranslations = { "components.link.opens-in-new-tab-label": "Opent in
 * @attr {string} href - Link target
 * @attr {string} target - Link target (e.g. '_blank'); adjusts rel automatically. With '_blank' the link adds a visually hidden "Opent in nieuw tabblad" announcement for screen readers (WCAG 2.1 SC 3.2.2).
 * @attr {string} rel - Link rel attribute; defaults to 'noopener noreferrer' with target='_blank'
-* @attr {string} size - Text size: 'xs' | 'sm' | 'md' | 'lg' | 'inherit'. Empty = inherit.
+* @attr {string} size - Text size: 'inherit' (the default) follows the surrounding text and lays the link out inline, so it wraps in running prose. 'xs' | 'sm' | 'md' | 'lg' pin a size and switch to inline-flex, which baseline-aligns a start or end icon with an explicit gap.
 * @attr {string} text - Link text (alternative to the default slot)
 * @attr {string} start-icon - Icon before the text
 * @attr {string} end-icon - Icon after the text
@@ -45457,6 +46363,7 @@ var NLDDLink = (_NLDDLink = class NLDDLink extends withTranslations(LitElement,
 		this.href = void 0;
 		this.target = void 0;
 		this.rel = void 0;
+		this.size = "inherit";
 		this.text = "";
 		this.startIcon = "";
 		this.endIcon = "";
@@ -45490,8 +46397,8 @@ __decorate([property({
 __decorate([property({ type: String })], NLDDLink.prototype, "target", void 0);
 __decorate([property({ type: String })], NLDDLink.prototype, "rel", void 0);
 __decorate([property({
-	type: String,
-	reflect: true
+	reflect: true,
+	converter: reflectNonDefault("inherit")
 })], NLDDLink.prototype, "size", void 0);
 __decorate([property({
 	reflect: true,
@@ -46447,7 +47354,7 @@ var NLDDTopNavigationBar = (_NLDDTopNavigationBar = class NLDDTopNavigationBar e
 			Promise.resolve().then(() => list_item_exports),
 			Promise.resolve().then(() => text_cell_exports),
 			Promise.resolve().then(() => icon_cell_exports),
-			import("./icon-Cd4BloIM.js").then((n) => n.n)
+			import("./icon-C_zwJZ_g.js").then((n) => n.n)
 		]);
 	}
 	_createGlobalMenuSheet() {
@@ -47748,7 +48655,7 @@ function documentTabBarItemTemplate(component) {
 				@click=${component._handleClick}
 			>${tabContent}</button>`;
 	return html`
-		<nldd-tooltip text=${tooltipText} timing=${component._isShort ? "default" : "never"}>
+		<nldd-tooltip text=${tooltipText} timing=${component._isShort ? "delay" : "never"}>
 			<div class="document-tab-bar__item">
 				${tab}
 				<button class="document-tab-bar__item-dismiss-button"
@@ -49097,11 +50004,15 @@ function modalDialogTemplate(component) {
 				icon=${component.icon || nothing}
 				text=${component.text || nothing}
 				supporting-text=${component.supportingText || nothing}
+				horizontal-alignment=${component.horizontalAlignment || nothing}
 				heading-level="2"
 			>
 				<slot></slot>
 				<slot slot="actions" name="actions"></slot>
 			</nldd-inline-dialog>
+			<!-- Inside the dialog, so it escapes the inertness a modal imposes on
+			     everything outside it. Plumbing, not consumer API. -->
+			<slot name="notifications"></slot>
 		</dialog>
 	`;
 }
@@ -49119,6 +50030,7 @@ function modalDialogTemplate(component) {
 * @attr {string} icon - Forwarded to nldd-inline-dialog; absent when not set
 * @attr {string} text - Forwarded to nldd-inline-dialog; main text
 * @attr {string} supporting-text - Forwarded to nldd-inline-dialog; supporting text
+* @attr {'left'|'center'} horizontal-alignment - Forwarded to nldd-inline-dialog. Unset derives it there: slotted content aligns left, a bare message stays centered.
 * @attr {string} accessible-label - Accessible name for the dialog (aria-label); falls back to text
 *
 * @slot - Optional custom content, forwarded to nldd-inline-dialog
@@ -49142,6 +50054,7 @@ var NLDDModalDialog = (_NLDDModalDialog = class NLDDModalDialog extends LitEleme
 		this.icon = "";
 		this.text = "";
 		this.supportingText = "";
+		this.horizontalAlignment = "";
 		this.accessibleLabel = "";
 		this._closing = false;
 		this._cancelPendingOpen = null;
@@ -49242,6 +50155,11 @@ __decorate([property({
 	attribute: "supporting-text",
 	converter: reflectNonDefault("")
 })], NLDDModalDialog.prototype, "supportingText", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "horizontal-alignment",
+	converter: reflectNonDefault("")
+})], NLDDModalDialog.prototype, "horizontalAlignment", void 0);
 __decorate([property({
 	type: String,
 	attribute: "accessible-label"
@@ -49909,6 +50827,63 @@ var REGION_ID = "nldd-notification-region";
 var MAX_DEPTH = 2;
 var frontObserver = null;
 var expanded = false;
+/**
+* A modal overlay paints in the browser's top layer, above the whole document
+* and out of reach of any z-index, and while one is open everything outside it
+* is inert: a region left on the body is not merely behind the sheet, it is
+* unclickable even once you put it in the top layer yourself. So the region
+* travels. It lives in the topmost open overlay and sinks back as they close,
+* which is also what makes a notification raised before the sheet opened come
+* along rather than stay behind it.
+*
+* Innermost last. Entries are verified on read rather than trusted, so an
+* overlay torn out of the DOM without closing cannot strand the region.
+*/
+var overlays = [];
+var watchingOverlays = false;
+function modalOf(host) {
+	const dialog = host.shadowRoot?.querySelector("dialog") ?? null;
+	return dialog?.matches(":modal") ? dialog : null;
+}
+function regionHost() {
+	while (overlays.length) {
+		const top = overlays[overlays.length - 1];
+		if (top.isConnected && modalOf(top)) return top;
+		overlays.pop();
+	}
+	return document.body;
+}
+function placeRegion(region) {
+	const host = regionHost();
+	if (region.parentElement === host) return;
+	if (host === document.body) region.removeAttribute("slot");
+	else region.setAttribute("slot", "notifications");
+	const carried = notifications(region);
+	carried.forEach((item) => item._setMoving?.(true));
+	host.appendChild(region);
+	carried.forEach((item) => item._setMoving?.(false));
+}
+function relocateRegion() {
+	const region = document.getElementById(REGION_ID);
+	if (region) placeRegion(region);
+}
+function watchOverlays() {
+	if (watchingOverlays) return;
+	watchingOverlays = true;
+	document.addEventListener("open", (event) => {
+		const host = event.target;
+		if (!host?.shadowRoot || !modalOf(host)) return;
+		if (!overlays.includes(host)) overlays.push(host);
+		relocateRegion();
+	});
+	document.addEventListener("close", (event) => {
+		const host = event.target;
+		const at = host ? overlays.indexOf(host) : -1;
+		if (at === -1) return;
+		overlays.splice(at, 1);
+		relocateRegion();
+	}, true);
+}
 function notifications(region) {
 	return Array.from(region.querySelectorAll(":scope > nldd-notification"));
 }
@@ -49941,7 +50916,7 @@ function ensureRegion(label) {
 	region.setAttribute("role", "region");
 	region.setAttribute("aria-label", label);
 	region.appendChild(makeExpander(region));
-	document.body.appendChild(region);
+	placeRegion(region);
 	return region;
 }
 /**
@@ -49971,7 +50946,9 @@ function makeExpander(region) {
 /** Newest in front: what just happened is what you want to read, and the older
 *  ones slide back and downwards behind it. */
 function joinRegion(notification, label) {
+	watchOverlays();
 	const region = ensureRegion(label);
+	placeRegion(region);
 	notification.style.pointerEvents = "auto";
 	region.prepend(notification);
 	syncStack(region);
@@ -50106,6 +51083,13 @@ var nlddNotificationTranslations = {
 * Nothing about the position is settable, so notifications from anywhere in an
 * application land in the same place and stack in the same order.
 *
+* A modal overlay is the one thing that moves it. An nldd-sheet, nldd-window or
+* nldd-modal-dialog paints in the browser's top layer, above the whole page and
+* out of reach of any z-index, and while one is open everything outside it is
+* inert. So the region goes in: into the topmost overlay that is open, and back
+* down as they close. A notification already on screen travels with it, and one
+* raised from inside a sheet is readable and reachable where it is raised.
+*
 * ## The stack
 * More than one is a deck, not a list: the front one is readable and the older
 * ones peek out below it, so a burst of messages takes the room of roughly one.
@@ -50258,6 +51242,12 @@ var NLDDNotification = (_NLDDNotification = class NLDDNotification extends withT
 		if (changed.has("variant")) this.setAttribute("role", this.variant === "critical" ? "alert" : "status");
 		if (changed.has("duration")) this._remainingDuration = this.duration;
 	}
+	/** Called by the region while it carries this notification to another
+	*  parent. A move disconnects the element, and without this the
+	*  notification would read its own disconnect as having been dismissed. */
+	_setMoving(moving) {
+		this._moving = moving;
+	}
 	/** Called by the region. Starting the clock here rather than on connect is
 	*  the whole point: a notification three deep in the deck is not counting. */
 	_setFront(isFront) {