@nldd/design-system 0.8.85 → 0.8.87

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-vbfhyo7f.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 { t as VisibilityMixin } from "./visibility-mixin-BU1vIMW7.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,
@@ -7468,10 +7506,10 @@ var containerStyles = css`
 		--_justify-content: initial;
 		--_justify-items: initial;
 		--_align-items: initial;
-		--_gap: 0;
-		--_sm-gap: var(--_gap);
-		--_md-gap: var(--_gap);
-		--_lg-gap: var(--_gap);
+		--_sm-gap: 0;
+		--_md-gap: 0;
+		--_lg-gap: 0;
+		--_gap: var(--_sm-gap);
 		--_padding-top: 0;
 		--_padding-right: 0;
 		--_padding-bottom: 0;
@@ -7492,19 +7530,17 @@ var containerStyles = css`
 		--_slot-sm-order: var(--_slot-order);
 		--_slot-md-order: var(--_slot-order);
 		--_slot-lg-order: var(--_slot-order);
-		/* One resolved gap for every layout to read. Multicol splits the gap
-		   over two properties (column-gap plus a margin on the items), so a
-		   per-breakpoint declaration would have to be repeated in three
-		   rules; swapping the var keeps that in one place. */
-		--_resolved-gap: var(--_gap);
-
-		@media (max-width: ${smMax$17}) { --_resolved-gap: var(--_sm-gap); }
-		@media (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_resolved-gap: var(--_md-gap); }
-		@media (min-width: ${lgMin$14}) { --_resolved-gap: var(--_lg-gap); }
-
-		@container layout-container (max-width: ${smMax$17}) { --_resolved-gap: var(--_sm-gap); }
-		@container layout-container (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_resolved-gap: var(--_md-gap); }
-		@container layout-container (min-width: ${lgMin$14}) { --_resolved-gap: var(--_lg-gap); }
+		/* Two sets, because a container inside a layout-container follows that
+		   container and anywhere else the viewport. Multicol reads the gap in three
+		   rules, so the value is swapped here rather than declared in each. The
+		   bare --_gap is what stands when neither set matches. */
+		@media (max-width: ${smMax$17}) { --_gap: var(--_sm-gap); }
+		@media (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_gap: var(--_md-gap); }
+		@media (min-width: ${lgMin$14}) { --_gap: var(--_lg-gap); }
+
+		@container layout-container (max-width: ${smMax$17}) { --_gap: var(--_sm-gap); }
+		@container layout-container (min-width: ${mdMin$20}) and (max-width: ${mdMax$13}) { --_gap: var(--_md-gap); }
+		@container layout-container (min-width: ${lgMin$14}) { --_gap: var(--_lg-gap); }
 
 		display: block;
 		width: var(--_width);
@@ -7587,7 +7623,7 @@ var containerStyles = css`
 		justify-content: var(--_justify-content);
 		justify-items: var(--_justify-items);
 		align-items: var(--_align-items);
-		gap: var(--_resolved-gap);
+		gap: var(--_gap);
 	}
 
 	:host([layout="row"]) .container__inner {
@@ -7610,7 +7646,7 @@ var containerStyles = css`
 	:host([layout="columns"]) .container__inner {
 		display: block;
 		columns: var(--_min-column-width);
-		column-gap: var(--_resolved-gap);
+		column-gap: var(--_gap);
 	}
 
 	:host([layout="columns"]) ::slotted(*) {
@@ -7623,14 +7659,14 @@ var containerStyles = css`
 	:host([layout="lanes"]) .container__inner {
 		display: block;
 		columns: var(--_min-column-width);
-		column-gap: var(--_resolved-gap);
+		column-gap: var(--_gap);
 	}
 
 	:host([layout="lanes"]) ::slotted(*) {
 		break-inside: avoid;
 		/* multicol has no row-gap; item margin supplies the vertical gap. The
 		   native branch resets this (grid-lanes gap covers both axes). */
-		margin-bottom: var(--_resolved-gap);
+		margin-bottom: var(--_gap);
 	}
 
 	@supports (display: grid-lanes) {
@@ -7754,6 +7790,57 @@ function containerTemplate(component) {
 	`;
 }
 //#endregion
+//#region src/utilities/spacing-scale.ts
+/**
+* The spacing scale, for the attributes that take a step of it.
+*
+* Spacing is rhythm: the point of a scale is that the space between things is
+* the same handful of numbers on every page, so a value beside it is not a
+* finer choice but a break in the pattern. These attributes take a step and
+* nothing else, and this is the one place that turns a step into its token.
+*
+* Which also settles what the attribute means. `gap="16"` in a component that
+* expected a CSS length wrote `--_gap: 16`, which is not one: the declaration
+* fell away and the gap became zero with nothing said. Anything this cannot
+* place is refused and named in dev instead, a length included — writing an
+* unplaceable value is that same silent zero.
+*/
+/** Every step there is. `'0'` is a value, not the absence of one. */
+var SPACING_SCALE = [
+	"0",
+	"2",
+	"4",
+	"6",
+	"8",
+	"10",
+	"12",
+	"16",
+	"20",
+	"24",
+	"28",
+	"32",
+	"40",
+	"44",
+	"48",
+	"56",
+	"64",
+	"80",
+	"96"
+];
+/**
+* A step of the scale as the token it stands for.
+*
+* Returns null when there is nothing to set, so a caller can remove the
+* property rather than write an empty one. `element` and `attribute` are only
+* there to name the offender in a dev warning.
+*/
+function spacingToValue(value, element, attribute) {
+	if (value === void 0 || value === "") return null;
+	const step = String(value).trim();
+	if (SPACING_SCALE.includes(step)) return step === "0" ? "0" : `var(--primitives-space-${step})`;
+	return null;
+}
+//#endregion
 //#region src/components/layout/container/container.ts
 /**
 * Nederlandse Digitale Dienst Container Component (Lit + TypeScript)
@@ -7804,8 +7891,11 @@ function containerTemplate(component) {
 * independent of the surrounding page width.
 *
 * `layout="lanes"` packs items into balanced columns using native CSS grid
-* lanes where supported, falling back to CSS multicol (column-order)
-* elsewhere. CSS-only, no JS. Honours `gap` on both axes and `column-count`.
+* lanes where supported, falling back to CSS multicol (column-order) elsewhere.
+* CSS-only, no JS. Honours `gap` on both axes and `column-count`. Note that
+* nldd-collection's lanes falls back to its own grid rather than to multicol:
+* that component pages, and multicol redistributes the whole set every time
+* load-more adds to it.
 *
 * @element nldd-container
 *
@@ -7877,10 +7967,11 @@ var ORDER_ATTRS = [
 	"md-order",
 	"lg-order"
 ];
-function sizeToValue(size) {
-	if (size === void 0) return null;
-	if (size === "0") return "0";
-	return `var(--primitives-space-${size})`;
+/** A step as its token. `attribute` only names the offender in a dev warning,
+*  so it has to be the attribute the value was written on: with a dozen padding
+*  attributes, "padding/gap is not a step" does not say which one to fix. */
+function sizeToValue(size, attribute) {
+	return spacingToValue(size, "nldd-container", attribute);
 }
 var NLDDContainer = (_NLDDContainer = class NLDDContainer extends LitElement {
 	constructor(..._args) {
@@ -7983,10 +8074,10 @@ var NLDDContainer = (_NLDDContainer = class NLDDContainer extends LitElement {
 			setProp("--_align-items", horizontal);
 			setProp("--_justify-items", null);
 		}
-		setProp("--_gap", sizeToValue(this.gap));
-		setProp("--_sm-gap", sizeToValue(this.smGap));
-		setProp("--_md-gap", sizeToValue(this.mdGap));
-		setProp("--_lg-gap", sizeToValue(this.lgGap));
+		const plainGap = sizeToValue(this.gap, "gap");
+		setProp("--_sm-gap", sizeToValue(this.smGap, "sm-gap") ?? plainGap);
+		setProp("--_md-gap", sizeToValue(this.mdGap, "md-gap") ?? plainGap);
+		setProp("--_lg-gap", sizeToValue(this.lgGap, "lg-gap") ?? plainGap);
 		for (const scope of [
 			"",
 			"sm",
@@ -7995,16 +8086,25 @@ var NLDDContainer = (_NLDDContainer = class NLDDContainer extends LitElement {
 		]) {
 			const [top, right, bottom, left] = this.resolvePadding(scope);
 			const prefix = scope ? `${scope}-` : "";
-			setProp(`--_${prefix}padding-top`, sizeToValue(top));
-			setProp(`--_${prefix}padding-right`, sizeToValue(right));
-			setProp(`--_${prefix}padding-bottom`, sizeToValue(bottom));
-			setProp(`--_${prefix}padding-left`, sizeToValue(left));
+			setProp(`--_${prefix}padding-top`, sizeToValue(top?.size, top?.attribute ?? "padding"));
+			setProp(`--_${prefix}padding-right`, sizeToValue(right?.size, right?.attribute ?? "padding"));
+			setProp(`--_${prefix}padding-bottom`, sizeToValue(bottom?.size, bottom?.attribute ?? "padding"));
+			setProp(`--_${prefix}padding-left`, sizeToValue(left?.size, left?.attribute ?? "padding"));
 		}
 	}
+	/** The four sides, each with the attribute it came from: `padding-top` wins
+	*  over `padding-block`, which wins over `padding`, and a warning about a bad
+	*  value has to name the one that was actually written. */
 	resolvePadding(scope) {
 		const get = (key) => {
 			const prop = scope ? `${scope}${key}` : key.charAt(0).toLowerCase() + key.slice(1);
-			return this[prop];
+			const size = this[prop];
+			if (size === void 0) return void 0;
+			const name = key.replace(/([A-Z])/g, (match, letter, index) => (index ? "-" : "") + letter.toLowerCase());
+			return {
+				size,
+				attribute: scope ? `${scope}-${name}` : name
+			};
 		};
 		const all = get("Padding");
 		const inline = get("PaddingInline");
@@ -8247,7 +8347,10 @@ var listStyles = css`
 		box-sizing: border-box;
 	}
 
-	/* Nothing in it and nothing said about it: not a thing on the page. */
+	/* Nothing in it, nothing said about it and no controls of its own: not a
+	   thing on the page, so a parent that spaces its children keeps no room for
+	   it either. The surface is already gone with .list__main; this takes the
+	   box out of the flow. */
 	:host(.is-blank) {
 		display: none;
 	}
@@ -8330,6 +8433,10 @@ var listStyles = css`
 		display: none;
 	}
 
+	.list__search-bar[hidden] {
+		display: none;
+	}
+
 	.list__main {
 		display: flex;
 		flex-direction: column;
@@ -8528,18 +8635,22 @@ var listStyles = css`
 `;
 //#endregion
 //#region src/components/lists-and-tables/list/list.template.ts
-var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, listbox }) => {
+var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, hasItems, hasEmptyState, hasNoResultsState, listbox }) => {
 	const isNavigation = type === "navigation";
 	const isListbox = type === "listbox";
 	const skipItemsLabel = isNavigation || isListbox;
-	const itemsRole = isListbox ? "listbox" : type === "tree" ? "tree" : "list";
-	const showEmpty = isEmpty && !(isListbox && listbox.searchValue === "");
-	const showMain = !isEmpty || showEmpty;
+	const itemsRole = isListbox ? "listbox" : type === "tree" ? "tree" : type === "radiogroup" ? "radiogroup" : "list";
+	const isNoResults = isEmpty && hasItems;
+	const noResultsFallsBack = isNoResults && !hasNoResultsState && hasEmptyState;
+	const showNoResults = isNoResults && hasNoResultsState && !(isListbox && listbox.searchValue === "");
+	const showEmpty = !isNoResults && isEmpty && hasEmptyState || noResultsFallsBack && !(isListbox && listbox.searchValue === "");
+	const showMain = !isEmpty || showEmpty || showNoResults;
+	const showControls = hasItems;
 	return html`
 		<div class="list">
 			<div class="list__header">
 				${isListbox ? html`
-					<div class="list__search-bar">
+					<div class="list__search-bar" ?hidden=${!showControls}>
 						<div class="list__search-field">
 							<label class="list__search-field-label">
 								<div class="list__search-field-icon"
@@ -8583,7 +8694,7 @@ var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, listbox }) => {
 						</div>
 					</div>
 				` : nothing}
-				<div class="list__toolbar" ?hidden=${!hasToolbar}>
+				<div class="list__toolbar" ?hidden=${!hasToolbar || !showControls}>
 					<slot name="toolbar"></slot>
 				</div>
 			</div>
@@ -8597,9 +8708,10 @@ var template$14 = ({ itemsLabel, hasToolbar, type, isEmpty, listbox }) => {
 					<slot></slot>
 				</div>
 				<div class="list__empty"
-					?hidden=${!showEmpty}
+					?hidden=${!showEmpty && !showNoResults}
 				>
-					<slot name="empty"></slot>
+					<slot name="empty" ?hidden=${!showEmpty}></slot>
+					<slot name="no-results" ?hidden=${!showNoResults}></slot>
 				</div>
 			</div>
 		</div>
@@ -8646,6 +8758,9 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		this._mergedTranslations = { ...nlddListTranslations };
 		this._hasToolbar = false;
 		this._hasSearchBarEnd = false;
+		this._hasEmptyState = false;
+		this._hasNoResultsState = false;
+		this._hasItems = false;
 		this._isEmpty = false;
 		this._searchValue = "";
 		this._activeId = "";
@@ -8861,6 +8976,8 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 		toolbarSlot?.addEventListener("slotchange", () => queueMicrotask(() => {
 			this._hasToolbar = toolbarSlot.assignedElements().length > 0;
 		}));
+		(this.shadowRoot?.querySelector("slot[name=\"empty\"]"))?.addEventListener("slotchange", () => queueMicrotask(() => this._updateEmpty()));
+		(this.shadowRoot?.querySelector("slot[name=\"no-results\"]"))?.addEventListener("slotchange", () => queueMicrotask(() => this._updateEmpty()));
 		this._itemsObserver = new MutationObserver((mutations) => {
 			const isRow = (node) => node instanceof Element && node.tagName.toLowerCase() === "nldd-list-item";
 			if (!mutations.some((m) => {
@@ -9006,9 +9123,12 @@ 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.classList.toggle("is-blank", this._isEmpty && !this.querySelector(":scope > [slot=\"empty\"]"));
+		this._hasItems = items.length > 0;
+		this._hasEmptyState = !!this.querySelector(":scope > [slot=\"empty\"]");
+		this._hasNoResultsState = !!this.querySelector(":scope > [slot=\"no-results\"]");
+		this.classList.toggle("is-blank", this._isEmpty && !this._hasItems && !this._hasEmptyState);
 		this._warnSilentEmpty();
 	}
 	/**
@@ -9018,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
@@ -9431,6 +9553,9 @@ var NLDDList = (_NLDDList2 = class NLDDList extends LitElement {
 			hasToolbar: this._hasToolbar,
 			type: this.type,
 			isEmpty: this._isEmpty,
+			hasItems: this._hasItems,
+			hasEmptyState: this._hasEmptyState,
+			hasNoResultsState: this._hasNoResultsState,
 			listbox: {
 				listboxId: this._listboxId,
 				searchValue: this._searchValue,
@@ -9477,6 +9602,9 @@ __decorate([property({ type: Object })], NLDDList.prototype, "translations", voi
 __decorate([state()], NLDDList.prototype, "_mergedTranslations", void 0);
 __decorate([state()], NLDDList.prototype, "_hasToolbar", void 0);
 __decorate([state()], NLDDList.prototype, "_hasSearchBarEnd", void 0);
+__decorate([state()], NLDDList.prototype, "_hasEmptyState", void 0);
+__decorate([state()], NLDDList.prototype, "_hasNoResultsState", void 0);
+__decorate([state()], NLDDList.prototype, "_hasItems", void 0);
 __decorate([state()], NLDDList.prototype, "_isEmpty", void 0);
 __decorate([state()], NLDDList.prototype, "_searchValue", void 0);
 __decorate([state()], NLDDList.prototype, "_activeId", void 0);
@@ -9905,7 +10033,7 @@ var listItemStyles = css`
 //#region src/components/lists-and-tables/list-item/list-item.template.ts
 var content = html`<slot></slot>`;
 var divider = html`<div class="list-item__divider"></div>`;
-var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex, isHighlighted = false, checkbox = false, checked = false, expanded, showChildren = false, hasCheckedSegment = false, disabled = false) => {
+var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex, isHighlighted = false, checkbox = false, radio = false, checked = false, expanded, showChildren = false, hasCheckedSegment = false, disabled = false) => {
 	const ariaExpanded = expanded === void 0 ? nothing : String(expanded);
 	const children = showChildren ? html`<div class="list-item__children"
 			role="group"
@@ -9938,6 +10066,16 @@ var template$13 = (button, href, target, rel, opensInNewTabLabel, actionTabindex
 			>${content}</button>
 			${divider}
 		</div>${children}`;
+	if (radio) return html`<div class=${blockClass}>
+			<button class="list-item__action"
+				type="button"
+				role="radio"
+				?disabled=${disabled}
+				aria-checked=${String(checked)}
+				tabindex=${actionTabindex ?? nothing}
+			>${content}</button>
+			${divider}
+		</div>${children}`;
 	if (button) return html`<div class=${blockClass}>
 			<button class="list-item__action"
 				type="button"
@@ -10018,6 +10156,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.current = false;
 		this.button = false;
 		this.checkbox = false;
+		this.radio = false;
 		this.checked = false;
 		this.disabled = false;
 		this.reorderable = false;
@@ -10050,6 +10189,14 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 					composed: true
 				}));
 			}
+			if (this.radio && !this.checkbox && !this.href && !this.checked && e.composedPath().includes(this._action)) {
+				this.checked = true;
+				this.dispatchEvent(new CustomEvent("change", {
+					detail: { checked: true },
+					bubbles: true,
+					composed: true
+				}));
+			}
 		};
 		this._handleFocusIn = () => {
 			this._action?.classList.toggle("is-pointer-focus", isPointerMode());
@@ -10171,7 +10318,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	*/
 	get _isRovingStop() {
 		if (this.disabled) return false;
-		if (this.href || this.button || this.checkbox) return true;
+		if (this.href || this.button || this.checkbox || this.radio) return true;
 		if (this._ownDescendants("nldd-list-item-segment:not([disabled])").length > 0) return true;
 		return this._rovingControls().some((control) => !control.hasAttribute("disabled"));
 	}
@@ -10205,7 +10352,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	*  inside `:host()`, and the row's own padding is what has to change — a
 	*  `::slotted()` rule could only reach the segment. */
 	_updateInteractive() {
-		const interactive = !!this.href || this.button || this.checkbox || this._ownDescendants("nldd-list-item-segment").length > 0;
+		const interactive = !!this.href || this.button || this.checkbox || this.radio || this._ownDescendants("nldd-list-item-segment").length > 0;
 		this.classList.toggle("is-interactive", interactive);
 		const ownChildren = Array.from(this.children).filter((el) => el.getAttribute("slot") !== "children");
 		const isSegment = (el) => el?.tagName.toLowerCase() === "nldd-list-item-segment";
@@ -10262,8 +10409,8 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		});
 	}
 	updated(changed) {
-		if (changed.has("selected") || changed.has("current") || changed.has("button") || changed.has("checkbox") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
-		if (changed.has("button") || changed.has("checkbox") || changed.has("href")) this._updateInteractive();
+		if (changed.has("selected") || changed.has("current") || changed.has("button") || changed.has("checkbox") || changed.has("radio") || changed.has("href") || changed.has("_parentType")) this._updateAriaState();
+		if (changed.has("button") || changed.has("checkbox") || changed.has("radio") || changed.has("href")) this._updateInteractive();
 		if (changed.has("expanded")) {
 			this._relayExpanded();
 			this._warnOnStrayExpanded();
@@ -10334,7 +10481,10 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 		this.childRows.forEach(fn);
 	}
 	_updateAriaState() {
-		if (this._parentType === "tree") {
+		if (this._parentType === "radiogroup") {
+			this.setAttribute("role", "none");
+			this.removeAttribute("aria-selected");
+		} else if (this._parentType === "tree") {
 			this.setAttribute("role", "treeitem");
 			this.removeAttribute("aria-selected");
 		} else if (this._isListboxOption) {
@@ -10577,7 +10727,7 @@ var NLDDListItem = (_NLDDListItem2 = class NLDDListItem extends withTranslations
 	render() {
 		const opensInNewTabLabel = this.href && this.target === "_blank" ? this._t("components.list-item.opens-in-new-tab-label") : void 0;
 		const actionTabindex = this._isListboxOption ? "-1" : this._arrowNavigation ? this._rovingActive ? "0" : "-1" : void 0;
-		return template$13(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment, this.disabled);
+		return template$13(this.button, this.href, this.target, this.rel, opensInNewTabLabel, actionTabindex, this._highlighted, this.checkbox, this.radio, this.checked, this._resolvedExpanded, this._showChildren, this._hasCheckedSegment, this.disabled);
 	}
 }, _NLDDListItem = _NLDDListItem2, _NLDDListItem2.styles = [listItemStyles], _NLDDListItem2.SIZED_CELLS = "nldd-text-cell, nldd-drag-handle-cell", _NLDDListItem2);
 __decorate([property({
@@ -10600,6 +10750,10 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], NLDDListItem.prototype, "checkbox", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], NLDDListItem.prototype, "radio", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -11426,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)),
@@ -12720,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";
@@ -12734,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) {
@@ -12793,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);
@@ -13306,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.
@@ -13318,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() {
@@ -13340,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,
@@ -13629,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)
@@ -13644,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();
@@ -13656,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
@@ -17720,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;
@@ -17822,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:
@@ -28554,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).
@@ -28565,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) {
@@ -28580,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
 		};
 	};
 }
@@ -28625,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)"
@@ -28640,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)"
@@ -28657,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
@@ -28731,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,
@@ -28859,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 = {
@@ -28991,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 {
@@ -29009,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);
 }
@@ -29077,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);
@@ -29087,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) {
@@ -29172,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
@@ -29227,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
@@ -29330,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,
@@ -29394,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);
@@ -29446,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;
 		},
@@ -29458,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;
@@ -29584,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, {
@@ -29807,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,
@@ -29817,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
@@ -29833,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();
@@ -29879,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;
@@ -29922,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
@@ -30156,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/);
@@ -30170,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
 	};
@@ -30182,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);
@@ -30325,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 {
@@ -30798,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.
 *
@@ -30823,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.
@@ -30831,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;
@@ -30853,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 = {};
@@ -30863,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;
@@ -30915,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,
@@ -30925,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([{
@@ -30968,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
 			]),
@@ -30983,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) => {
@@ -31040,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() {
@@ -31056,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());
@@ -31107,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);
 	}
@@ -31217,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. */
@@ -31226,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({
@@ -31236,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();
@@ -31256,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). */
@@ -31337,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
 		}));
@@ -31438,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
@@ -35580,7 +36601,7 @@ var barSplitViewStyles = css`
 	/* Root-scroll mode: the document scrolls (ScrollModeController /
 	   --context-scroll-mode). Bars become sticky layers that stay put while the
 	   main content scrolls under them; their measured heights are published into
-	   --context-layer-top/bottom (see bar-split-view.ts) so a descendant
+	   --context-inset-top/bottom (see bar-split-view.ts) so a descendant
 	   nldd-page's sticky header/footer stack below/above them. The sticky insets
 	   and those offsets are set by JS; bars paint above the content. */
 	:host([data-scroll="root"]) {
@@ -35876,12 +36897,12 @@ var mdMaxPx = parseInt(breakpoints.mdMax);
 var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this._scrollMode = new ScrollModeController(this, () => this._updateLayerOffsets());
+		this._scrollMode = new ScrollModeController(this, () => this._updateInsets());
 		this.background = "inherit";
 		this._currentBreakpoint = null;
 		this._observer = null;
 		this._resizeObserver = null;
-		this._updateLayerOffsets = () => {
+		this._updateInsets = () => {
 			const block = this.shadowRoot?.querySelector(".bar-split-view") ?? null;
 			const main = block?.querySelector(".bar-split-view__main") ?? null;
 			if (!block || !main) return;
@@ -35892,25 +36913,25 @@ var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitEl
 					el.style.top = "";
 					el.style.bottom = "";
 				});
-				main.style.removeProperty("--context-layer-top");
-				main.style.removeProperty("--context-layer-bottom");
+				main.style.removeProperty("--context-inset-top");
+				main.style.removeProperty("--context-inset-bottom");
 				return;
 			}
 			const cs = getComputedStyle(this);
-			let top = parseFloat(cs.getPropertyValue("--context-layer-top")) || 0;
+			let top = parseFloat(cs.getPropertyValue("--context-inset-top")) || 0;
 			for (let i = 0; i < mainIndex; i++) {
 				children[i].style.top = `${top}px`;
 				children[i].style.bottom = "";
 				top += children[i].offsetHeight;
 			}
-			main.style.setProperty("--context-layer-top", `${top}px`);
-			let bottom = parseFloat(cs.getPropertyValue("--context-layer-bottom")) || 0;
+			main.style.setProperty("--context-inset-top", `${top}px`);
+			let bottom = parseFloat(cs.getPropertyValue("--context-inset-bottom")) || 0;
 			for (let i = children.length - 1; i > mainIndex; i--) {
 				children[i].style.bottom = `${bottom}px`;
 				children[i].style.top = "";
 				bottom += children[i].offsetHeight;
 			}
-			main.style.setProperty("--context-layer-bottom", `${bottom}px`);
+			main.style.setProperty("--context-inset-bottom", `${bottom}px`);
 		};
 	}
 	connectedCallback() {
@@ -35936,7 +36957,7 @@ var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitEl
 				this._currentBreakpoint = bp;
 				this.requestUpdate();
 			}
-			this._updateLayerOffsets();
+			this._updateInsets();
 		});
 		this._resizeObserver.observe(this);
 	}
@@ -35981,7 +37002,7 @@ var NLDDBarSplitView = (_NLDDBarSplitView = class NLDDBarSplitView extends LitEl
 		});
 	}
 	updated() {
-		this._updateLayerOffsets();
+		this._updateInsets();
 	}
 	render() {
 		return barSplitViewTemplate(this);
@@ -37370,6 +38391,16 @@ var pageStyles = css`
 
 	:host {
 		--_background-color: var(--context-parent-background-color, var(--semantics-surfaces-base-background-color));
+		/* The insets this page arrived with, parked before it adds its own:
+		   republishing --context-inset-top on the element it reads from would be
+		   a cycle. */
+		--_outer-inset-top: var(--context-inset-top, 0px);
+		--_outer-inset-bottom: var(--context-inset-bottom, 0px);
+		--_header-height: 0px;
+		--_footer-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;
 
 		display: flex;
 		background-color: var(--_background-color);
@@ -37408,9 +38439,8 @@ var pageStyles = css`
 
 	/* Root-scroll mode: the DOCUMENT scrolls (see nldd-app-view), not the page.
 	   The page stops owning an inner scroll container and its sticky-header/footer
-	   become real position:sticky layers against the document, offset by the
-	   cumulative layer heights above/below (--context-layer-top/bottom, published
-	   by any bars sitting outside the page). The mode is derived upstream and
+	   stick against the document, offset by the insets above and below
+	   (--context-inset-top/bottom, published by any bars outside the page). The mode is derived upstream and
 	   delivered as --context-scroll-mode; nldd-page reflects it to [data-scroll]
 	   so these (higher-specificity, later) rules win over the nested ones. */
 	:host([data-scroll="root"]) {
@@ -37446,7 +38476,7 @@ var pageStyles = css`
 	:host([data-scroll="root"]) .page {
 		overflow: visible;
 		flex-shrink: 0;
-		min-height: calc(100dvh - var(--context-layer-top, 0px) - var(--context-layer-bottom, 0px));
+		min-height: calc(100dvh - var(--context-inset-top, 0px) - var(--context-inset-bottom, 0px));
 	}
 
 
@@ -37481,7 +38511,7 @@ var pageStyles = css`
 		opacity: 0;
 		background: linear-gradient(to bottom, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
 		pointer-events: none;
-		height: var(--primitives-space-32);
+		height: var(--primitives-space-24);
 		transition: opacity var(--primitives-transition-duration-medium) var(--primitives-transition-easing-default);
 	}
 
@@ -37495,18 +38525,34 @@ var pageStyles = css`
 	   only mattered for the absolute overlay. */
 	:host([data-scroll="root"][sticky-header]) .page__header {
 		position: sticky;
-		top: var(--context-layer-top, 0px);
+		top: var(--context-inset-top, 0px);
 		left: auto;
 		right: auto;
 	}
 
+	/* The page adds its own bars to the insets it inherited, so sticky content
+	   inside clears them without knowing a number. The header sits outside this
+	   element and keeps the value without itself in it. */
 	.page__scroll {
+		--context-inset-top: calc(var(--_outer-inset-top) + var(--_header-height));
+		--context-inset-bottom: calc(var(--_outer-inset-bottom) + var(--_footer-height));
+		/* The height sticky content can cap itself on. Unset while the document
+		   scrolls, where the viewport is the whole story. */
+		--context-scroller-height: var(--_scroll-height, 100dvh);
+
 		display: flex;
 		min-height: 0;
 		flex-direction: column;
 		flex-grow: 1;
 	}
 
+	/* Nested scrolling: a sticky child is measured against this element, so the
+	   bars above the page fall outside it and only its own header counts. */
+	:host(:not([data-scroll="root"])) .page__scroll {
+		--context-inset-top: var(--_header-height);
+		--context-inset-bottom: var(--_footer-height);
+	}
+
 	:host([sticky-header]) .page__scroll {
 		overflow-y: auto;
 		overflow-x: hidden;
@@ -37545,12 +38591,12 @@ var pageStyles = css`
 		right: 0;
 		background: linear-gradient(to top, color-mix(in srgb, var(--_background-color) 95%, transparent), transparent);
 		pointer-events: none;
-		height: var(--primitives-space-32);
+		height: var(--primitives-space-24);
 	}
 
 	/* Root-scroll mode: footer sticks to the document bottom, above any bottom bars. */
 	:host([data-scroll="root"][sticky-footer]) .page__footer {
-		bottom: var(--context-layer-bottom, 0px);
+		bottom: var(--context-inset-bottom, 0px);
 	}
 `;
 //#endregion
@@ -37585,10 +38631,18 @@ function pageTemplate(component) {
 *
 * 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
-* sticky header/footer become position:sticky layers offset by
-* --context-layer-top/bottom. The mode is read on connect/resize and reflected
+* sticky header/footer stick against the document, offset by
+* --context-inset-top/bottom. The mode is read on connect/resize and reflected
 * to [data-scroll] so the CSS can branch.
 *
+* The page passes those insets on to its own content, with its sticky header
+* and footer added: anything sticky inside (an nldd-sidebar-section, a sticky
+* table head) reads --context-inset-top / --context-inset-bottom and clears
+* every bar above and below it without being told a number. The heights are
+* measured, because a top title bar shrinks as you scroll past its anchor. While
+* the page owns the scroller, only its own bars count: the chrome above the page
+* sits outside that scroller and does not push sticky content down.
+*
 * @element nldd-page
 *
 * @attr {boolean} sticky-header - Sticky header
@@ -37612,6 +38666,7 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		this._scrollTarget = null;
 		this._scrollProvider = null;
 		this._headerObserver = null;
+		this._insetObserver = null;
 		this._mainSlot = null;
 		this._resizeRaf = 0;
 		this._onResize = () => {
@@ -37660,6 +38715,9 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 	get _scrollEl() {
 		return this.shadowRoot?.querySelector(".page__scroll") ?? null;
 	}
+	get _footerEl() {
+		return this.shadowRoot?.querySelector(".page__footer") ?? null;
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.style.containerType = "inline-size";
@@ -37684,6 +38742,7 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		if (this._resizeRaf) cancelAnimationFrame(this._resizeRaf);
 		this._teardownScrollListener();
 		this._teardownHeaderObserver();
+		this._teardownInsetObserver();
 		this._teardownMainSlotListener();
 	}
 	firstUpdated() {
@@ -37714,8 +38773,41 @@ var NLDDPage = (_NLDDPage = class NLDDPage extends LitElement {
 		if (this._scrollEl) this._scrollEl.style.paddingTop = "";
 		this._setupScrollListener();
 		if (this.stickyHeader && !this._isRoot) this._setupHeaderObserver();
+		this._setupInsetObserver();
 		this._onScroll();
 	}
+	/**
+	* Publishes the page's own sticky bars as insets, so sticky content inside
+	* the page knows how far to clear.
+	*
+	* Measured rather than assumed: a top title bar shrinks as you scroll past
+	* 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.
+	*/
+	_setupInsetObserver() {
+		this._teardownInsetObserver();
+		const header = this._headerEl;
+		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`);
+			if (this._isRoot) this.style.removeProperty("--_scroll-height");
+			else this.style.setProperty("--_scroll-height", `${this._scrollEl?.clientHeight ?? 0}px`);
+		};
+		publish();
+		this._insetObserver = new ResizeObserver(publish);
+		this._insetObserver.observe(header);
+		this._insetObserver.observe(footer);
+		if (this._scrollEl) this._insetObserver.observe(this._scrollEl);
+	}
+	_teardownInsetObserver() {
+		if (this._insetObserver) {
+			this._insetObserver.disconnect();
+			this._insetObserver = null;
+		}
+	}
 	_setupScrollListener() {
 		const target = this.scrollEventTarget;
 		target.addEventListener("scroll", this._onScroll, { passive: true });
@@ -39632,10 +40724,10 @@ var sidebarSectionStyles = css`
 		--_lg-padding-top: initial;
 		--_lg-padding-bottom: initial;
 		--_max-width: var(--semantics-page-sections-body-max-width);
-		/* Sticky insets default to 16px top and bottom; override via sticky-top /
-		   sticky-bottom to clear other sticky page elements (e.g. a sticky header). */
-		--_sticky-top: var(--primitives-space-16);
-		--_sticky-bottom: var(--primitives-space-16);
+		/* 24px clear of the insets nldd-page publishes. 24 is the depth of a
+		   sticky header's fade, so the box starts where the fade ends. */
+		--_sticky-top: calc(var(--context-inset-top, 0px) + var(--primitives-space-24));
+		--_sticky-bottom: calc(var(--context-inset-bottom, 0px) + var(--primitives-space-24));
 		--_sidebar-width: var(--primitives-area-320);
 
 		display: flex;
@@ -39768,7 +40860,9 @@ var sidebarSectionStyles = css`
 			position: sticky;
 			top: var(--_sticky-top);
 			bottom: var(--_sticky-bottom);
-			max-height: calc(100dvh - var(--_sticky-top) - var(--_sticky-bottom));
+			/* What the scroller shows, not what the window is: a viewport-tall cap
+			   hangs out the bottom by the height of the chrome around the page. */
+			max-height: calc(var(--context-scroller-height, 100dvh) - var(--_sticky-top) - var(--_sticky-bottom));
 			overflow-y: auto;
 		}
 	}
@@ -39908,8 +41002,8 @@ var sheetStyles = css`
 		   sticky header sticks to that edge instead of to a bar that stands
 		   outside. See findScrollModeProvider for the other half. */
 		--context-scroll-mode: nested;
-		--context-layer-top: 0px;
-		--context-layer-bottom: 0px;
+		--context-inset-top: 0px;
+		--context-inset-bottom: 0px;
 
 		display: flex;
 		position: fixed;
@@ -39973,10 +41067,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);
@@ -40056,7 +41146,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}
@@ -40169,7 +41259,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.
 *
@@ -40192,7 +41281,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;
@@ -40243,8 +41331,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,
@@ -40283,7 +41370,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() {
@@ -40316,10 +41402,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"
@@ -40922,29 +42004,21 @@ var collectionStyles = css`
 		--_item-width: var(--primitives-area-280);
 		--_focus-ring-z-index: 1;
 
-		@media (max-width: ${smMax$4}) {
-			--_gap: var(--components-collection-sm-gap);
-		}
-
-		@media (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) {
-			--_gap: var(--components-collection-md-gap);
-		}
-
-		@media (min-width: ${lgMin$2}) {
-			--_gap: var(--components-collection-lg-gap);
-		}
+		/* Two sets, because a collection inside a layout-container follows that
+		   container and anywhere else the viewport. The bare --_gap is what
+		   stands when neither set matches. */
+		--_sm-gap: var(--components-collection-sm-gap);
+		--_md-gap: var(--components-collection-md-gap);
+		--_lg-gap: var(--components-collection-lg-gap);
+		--_gap: var(--_sm-gap);
 
-		@container layout-container (max-width: ${smMax$4}) {
-			--_gap: var(--components-collection-sm-gap);
-		}
-
-		@container layout-container (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) {
-			--_gap: var(--components-collection-md-gap);
-		}
+		@media (max-width: ${smMax$4}) { --_gap: var(--_sm-gap); }
+		@media (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) { --_gap: var(--_md-gap); }
+		@media (min-width: ${lgMin$2}) { --_gap: var(--_lg-gap); }
 
-		@container layout-container (min-width: ${lgMin$2}) {
-			--_gap: var(--components-collection-lg-gap);
-		}
+		@container layout-container (max-width: ${smMax$4}) { --_gap: var(--_sm-gap); }
+		@container layout-container (min-width: ${mdMin$3}) and (max-width: ${mdMax$2}) { --_gap: var(--_md-gap); }
+		@container layout-container (min-width: ${lgMin$2}) { --_gap: var(--_lg-gap); }
 
 		display: flex;
 		width: 100%;
@@ -40991,6 +42065,27 @@ var collectionStyles = css`
 		flex-direction: column;
 	}
 
+
+	/* ## Lanes */
+
+	/* Falls back to the grid above, not to the multicol nldd-container uses:
+	   this component pages, and multicol redistributes the whole set every time
+	   load-more adds to it. */
+	:host([layout="lanes"]) .collection__items {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(min(var(--_item-width), 100%), 1fr));
+	}
+
+	:host([layout="lanes"]) .collection__items ::slotted(*) {
+		min-width: 0;
+	}
+
+	@supports (display: grid-lanes) {
+		:host([layout="lanes"]) .collection__items {
+			display: grid-lanes;
+		}
+	}
+
 	/* ## Horizontal scroll */
 
 	:host([layout="horizontal-scroll"]) .collection__items {
@@ -41141,7 +42236,7 @@ var nlddCollectionTranslations = {
 * Nederlandse Digitale Dienst Collection Component (Lit + TypeScript)
 *
 * A container for displaying collections of items.
-* Supports grid, stack, and horizontal scroll layouts.
+* Supports grid, stack, lanes and horizontal scroll layouts.
 * In grid and stack modes, items are paginated via a load-more button. In
 * horizontal scroll, the prev/next controls and the edge fade appear only when
 * the items overflow the container.
@@ -41150,12 +42245,15 @@ var nlddCollectionTranslations = {
 *
 * @element nldd-collection
 *
-* @attr {string} layout - Layout mode: 'grid' | 'stack' | 'horizontal-scroll' (default: 'grid')
+* @attr {string} layout - Layout mode: 'grid' | 'stack' | 'lanes' | 'horizontal-scroll' (default: 'grid')
 * @attr {boolean} show-load-more - Show load-more button in grid/stack (default: false)
 * @attr {number} max-items - Number of visible items per page (default: 24)
 * @attr {boolean} lazy-load - Automatically load more items when the button becomes visible
-* @attr {string} item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid layout used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width.
-* @attr {string} gap - Custom gap between items (any CSS length, e.g. '8px'). Overrides the responsive default at every breakpoint; unset keeps the default.
+* @attr {string} item-width - Preferred width for each item (e.g. '280px', '20rem'). In grid and lanes layouts used as the minimum column width (columns will be at least this wide; 1fr if container allows more). In horizontal scroll used as flex-basis. Never forces horizontal overflow — the value is clamped to container width.
+* @attr {string} gap - Gap between items, as a step of the spacing scale ('0', '2', '4', '6', '8', '10', '12', '16', '20', '24', '28', '32', '40', '44', '48', '56', '64', '80', '96'). Overrides the responsive default at every breakpoint; unset keeps the default.
+* @attr {string} sm-gap - Gap at sm, overriding `gap` there
+* @attr {string} md-gap - Gap at md, overriding `gap` there
+* @attr {string} lg-gap - Gap at lg, overriding `gap` there
 * @attr {object} translations - Translation overrides; unset keys fall back to Dutch. Available keys: 'components.collection.previous-action', 'components.collection.next-action', 'components.collection.load-more-action'
 *
 * @migration The `load-more-label` attribute has been removed.
@@ -41229,9 +42327,16 @@ var NLDDCollection = (_NLDDCollection = class NLDDCollection extends LitElement
 			if (this.itemWidth) this.style.setProperty("--_item-width", this.itemWidth);
 			else this.style.removeProperty("--_item-width");
 		}
-		if (changedProperties.has("gap")) {
-			if (this.gap) this.style.setProperty("--_gap", this.gap);
-			else this.style.removeProperty("--_gap");
+		if (changedProperties.has("gap") || changedProperties.has("smGap") || changedProperties.has("mdGap") || changedProperties.has("lgGap")) {
+			const plain = spacingToValue(this.gap, "nldd-collection", "gap");
+			const write = (name, size, attribute) => {
+				const value = size === void 0 ? plain : spacingToValue(size, "nldd-collection", attribute) ?? plain;
+				if (value === null) this.style.removeProperty(name);
+				else this.style.setProperty(name, value);
+			};
+			write("--_sm-gap", this.smGap, "sm-gap");
+			write("--_md-gap", this.mdGap, "md-gap");
+			write("--_lg-gap", this.lgGap, "lg-gap");
 		}
 		if (this.lazyLoad && this._loadMoreBtn && !this._intersectionObserver) {
 			this._intersectionObserver = new IntersectionObserver(([entry]) => {
@@ -41334,6 +42439,21 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], NLDDCollection.prototype, "gap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "sm-gap"
+})], NLDDCollection.prototype, "smGap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "md-gap"
+})], NLDDCollection.prototype, "mdGap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "lg-gap"
+})], NLDDCollection.prototype, "lgGap", void 0);
 __decorate([property({ type: Object })], NLDDCollection.prototype, "translations", void 0);
 __decorate([state()], NLDDCollection.prototype, "_visibleCount", void 0);
 __decorate([state()], NLDDCollection.prototype, "_totalCount", void 0);
@@ -41482,7 +42602,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}
@@ -41502,15 +42622,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.
@@ -41535,7 +42654,6 @@ var _NLDDWindow;
 var NLDDWindow = (_NLDDWindow = class NLDDWindow extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.modeless = false;
 		this.noLightDismiss = false;
 		this.accessibleLabel = "";
 		this.translations = {};
@@ -41554,7 +42672,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) => {
@@ -41608,8 +42726,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", {
@@ -41671,10 +42788,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,
@@ -43211,7 +44324,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')
@@ -43248,7 +44361,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";
@@ -43306,7 +44419,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,
@@ -45212,7 +46325,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
@@ -45232,6 +46345,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 = "";
@@ -45265,8 +46379,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,
@@ -45475,6 +46589,21 @@ var topNavigationBarStyles = css`
 	/* # Block */
 
 	.top-navigation-bar {
+		/* The ribbon's width, and with it everything measured against the ribbon:
+		   its own height and the wordmark beside it. Here rather than on :host,
+		   because a container query cannot measure the container it sits on. */
+		@container (max-width: ${smMax$2}) {
+			--_logo-width: var(--semantics-brand-ribbon-sm-width);
+		}
+
+		@container (min-width: ${mdMin$1}) and (max-width: ${mdMax}) {
+			--_logo-width: var(--semantics-brand-ribbon-md-width);
+		}
+
+		@container (min-width: ${lgMin}) {
+			--_logo-width: var(--semantics-brand-ribbon-lg-width);
+		}
+
 		box-sizing: border-box;
 		display: flex;
 		flex-direction: column;
@@ -45523,18 +46652,6 @@ var topNavigationBarStyles = css`
 		align-self: start;
 		align-items: center;
 		justify-content: center;
-
-		@container (max-width: ${smMax$2}) {
-			--_logo-width: var(--semantics-brand-ribbon-sm-width);
-		}
-
-		@container (min-width: ${mdMin$1}) and (max-width: ${mdMax}) {
-			--_logo-width: var(--semantics-brand-ribbon-md-width);
-		}
-
-		@container (min-width: ${lgMin}) {
-			--_logo-width: var(--semantics-brand-ribbon-lg-width);
-		}
 	}
 
 	.top-navigation-bar__logo svg {
@@ -45587,17 +46704,37 @@ var topNavigationBarStyles = css`
 	/* ## Wordmark */
 
 	.top-navigation-bar__wordmark {
+		box-sizing: border-box;
 		display: flex;
+		/* A grid item is at least as wide as its longest word unless told
+		   otherwise, and the column it sits in is one of the two that keep the
+		   ribbon centred. One unbreakable name would push the ribbon off centre
+		   and the page past the screen. */
+		min-width: 0;
 		min-height: calc(var(--_logo-width) * 2);
 		grid-column: 3;
 		flex-direction: column;
 		color: var(--_wordmark-content-color);
+
+		/* The distance the text keeps from the top edge once it outgrows the
+		   ribbon. Only at the top: space under it would raise the bar for
+		   nothing. The minimum gives up the same 12, so the text still centres
+		   on the middle of the ribbon rather than 6px below it. */
+		@container (max-width: ${smMax$2}) {
+			align-self: start;
+			min-height: calc(var(--_logo-width) * 2 - var(--primitives-space-12));
+			padding-block-start: var(--primitives-space-12);
+		}
 	}
 
 	.top-navigation-bar__wordmark-spacer {
 		height: var(--_logo-width);
 		flex-grow: 0;
 		flex-shrink: 0;
+
+		@container (max-width: ${smMax$2}) {
+			display: none;
+		}
 	}
 
 	.top-navigation-bar__wordmark-content {
@@ -45607,6 +46744,21 @@ var topNavigationBarStyles = css`
 		flex-shrink: 1;
 		flex-basis: 50%;
 		max-width: var(--_wordmark-max-width);
+		/* anywhere rather than break-word: only this one takes the break into
+		   the min-content width, which is what the track measures. A name that
+		   cannot break wraps mid-word here, because a name cut off by an
+		   ellipsis cannot be read at all. */
+		overflow-wrap: anywhere;
+
+		/* Centred against the ribbon, and what does not fit grows downward: an
+		   auto margin takes positive free space and never negative, so the text
+		   cannot ride up past the top. Growing is the flex item's job here, and
+		   an item that grows leaves nothing for the margins to centre with. */
+		@container (max-width: ${smMax$2}) {
+			flex-grow: 0;
+			flex-basis: auto;
+			margin-block: auto;
+		}
 	}
 
 	.top-navigation-bar__wordmark-title {
@@ -46184,7 +47336,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() {
@@ -47485,7 +48637,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"
@@ -48741,10 +49893,10 @@ var modalDialogStyles = css`
 	.modal-dialog {
 		/* Where the app's layout context ends, as in nldd-sheet: the dialog scrolls
 		   itself and starts at its own top edge, so anything inside it stops
-		   following the app's scroll mode and its layer offsets. */
+		   following the app's scroll mode and its insets. */
 		--context-scroll-mode: nested;
-		--context-layer-top: 0px;
-		--context-layer-bottom: 0px;
+		--context-inset-top: 0px;
+		--context-inset-bottom: 0px;
 
 		box-sizing: border-box;
 		outline: none;
@@ -48834,6 +49986,7 @@ 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>
@@ -48856,6 +50009,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
@@ -48879,6 +50033,7 @@ var NLDDModalDialog = (_NLDDModalDialog = class NLDDModalDialog extends LitEleme
 		this.icon = "";
 		this.text = "";
 		this.supportingText = "";
+		this.horizontalAlignment = "";
 		this.accessibleLabel = "";
 		this._closing = false;
 		this._cancelPendingOpen = null;
@@ -48979,6 +50134,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"
@@ -51460,6 +52620,21 @@ var progressCircleStyles = css`
 	.progress-circle__segment-indicator--mintgroen { stroke: var(--semantics-categories-mintgroen-filled-background-color); }
 
 
+	/* ## Filter flood color
+
+	   Here rather than in a style attribute, which a strict style-src drops.
+	   The color of an arc varies per segment, so that one is set through the
+	   CSSOM instead. */
+
+	.progress-circle__flood--track {
+		flood-color: var(--_track-border-color);
+	}
+
+	.progress-circle__flood--indeterminate {
+		flood-color: var(--_indeterminate-border-color);
+	}
+
+
 	/* # Spinner (indeterminate)
 	   GitHub-style: a fixed-width arc (25 / 100 = quarter turn, 90°) that
 	   simply rotates around the circle. Calmer than Material's elastic
@@ -51651,7 +52826,7 @@ function progressCircleTemplate(component, onSlotChange) {
 					<filter id="progress-circle-border-track-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 						<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 						<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-						<feFlood style="flood-color: var(--_track-border-color)" result="flood"></feFlood>
+						<feFlood class="progress-circle__flood progress-circle__flood--track" result="flood"></feFlood>
 						<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 						<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 					</filter>
@@ -51659,7 +52834,7 @@ function progressCircleTemplate(component, onSlotChange) {
 						<filter id="progress-circle-border-${color}-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-							<feFlood style="flood-color: var(--semantics-categories-${color}-filled-highlight-border-color)" result="flood"></feFlood>
+							<feFlood class="progress-circle__flood" style=${styleMap({ floodColor: `var(--semantics-categories-${color}-filled-highlight-border-color)` })} result="flood"></feFlood>
 							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 						</filter>
@@ -51668,7 +52843,7 @@ function progressCircleTemplate(component, onSlotChange) {
 						<filter id="progress-circle-border-indeterminate-${uid}" filterUnits="userSpaceOnUse" x="-10" y="-10" width="120" height="120" color-interpolation-filters="sRGB">
 							<feMorphology in="SourceGraphic" operator="erode" radius=${borderErodeRadius} result="eroded"></feMorphology>
 							<feComposite operator="out" in="SourceGraphic" in2="eroded" result="edge"></feComposite>
-							<feFlood style="flood-color: var(--_indeterminate-border-color)" result="flood"></feFlood>
+							<feFlood class="progress-circle__flood progress-circle__flood--indeterminate" result="flood"></feFlood>
 							<feComposite operator="in" in="flood" in2="edge" result="colored"></feComposite>
 							<feComposite operator="over" in="colored" in2="SourceGraphic"></feComposite>
 						</filter>