@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition60.js

@@ -1,3598 +1,480 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
-import { n as WithObservableLocale } from "./localized.js";
-import { i as Button, t as buttonDefinition } from "./definition7.js";
-import { i as Popup, r as PlacementStrategy, t as popupDefinition } from "./definition10.js";
-import { i as MenuItem, t as menuItemDefinition } from "./definition12.js";
-import { r as Menu, t as menuDefinition } from "./definition13.js";
-import { t as Divider } from "./divider.js";
-import { t as generateRandomId } from "./randomId.js";
-import { n as textFieldDefinition, r as TextField } from "./definition26.js";
-import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
-import { r as ListboxOption, t as listboxOptionDefinition } from "./definition29.js";
-import { t as dividerDefinition } from "./definition35.js";
-import { a as featureFacade, c as impl, i as contributionPriority, n as removeSymbol, o as getFeatureImpl, r as RteFeatureImpl, s as sortedContributions, t as dispatchSlottableRequest } from "./slottable-request.js";
-import { n as selectDefinition, r as Select } from "./definition61.js";
-import { ElementStyles, html, observable, ref, volatile } from "@microsoft/fast-element";
-import { DOMParser, DOMSerializer, Fragment, NodeRange, Schema, Slice } from "prosemirror-model";
-import { AllSelection, EditorState, NodeSelection, Plugin, PluginKey, TextSelection } from "prosemirror-state";
-import { Decoration, DecorationSet, EditorView } from "prosemirror-view";
-import { keymap } from "prosemirror-keymap";
-import { autoJoin, baseKeymap, chainCommands, createParagraphNear, liftEmptyBlock, newlineInCode, splitBlockAs, toggleMark } from "prosemirror-commands";
-import { dropCursor } from "prosemirror-dropcursor";
-import { gapCursor } from "prosemirror-gapcursor";
-import DOMPurify from "dompurify";
-import { closeHistory, history, redo, undo } from "prosemirror-history";
-import { InputRule, inputRules, undoInputRule } from "prosemirror-inputrules";
-import { RemoveMarkStep, ReplaceAroundStep, dropPoint } from "prosemirror-transform";
-import { marks } from "prosemirror-schema-basic";
-//#region src/lib/rich-text-editor/rich-text-editor.scss?inline
-var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,8px);block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
-//#endregion
-//#region src/lib/rich-text-editor/rich-text-editor.ts
-/**
-* @public
-* @component rich-text-editor
-* @slot editor-before - Displayed before the scrollable editor area.
-* @slot editor-start - Displayed at the start of the scrollable editor area.
-* @slot editor-end - Displayed at the end of the scrollable editor area.
-* @slot editor-after - Displayed after the scrollable editor area.
-* @slot status - Displayed between the editor viewport and the toolbar.
-* @slot text-color-picker - Color picker for the RteTextColorFeature.
-* @dynamicSlot `{ url: string }` inline-image-placeholder - Placeholder content for inline images.
-* @dynamicSlot `{ id: string }` suggestions-empty - Empty state if no suggestions are found.
-*/
-var RichTextEditor = class extends WithObservableLocale(VividElement) {
-	/**
-	* @internal
-	*/
-	instanceChanged(prevInstance) {
-		prevInstance?.[impl].destroyViewIfNeeded();
-		this._initViewIfNeeded();
-		prevInstance?.[impl].styles.removeStylesFrom(this.shadowRoot);
-		this.instance?.[impl].styles.addStylesTo(this.shadowRoot);
-	}
-	_initViewIfNeeded() {
-		const instance = this.instance?.[impl];
-		if (instance && this.$fastController.isConnected && !instance.view) {
-			this._syncStateIfNeeded();
-			instance.createView(this._editorEl);
-		}
-	}
-	_destroyViewIfNeeded() {
-		this.instance?.[impl].destroyViewIfNeeded();
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._initViewIfNeeded();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._destroyViewIfNeeded();
-	}
-	/**
-	* @internal
-	*/
-	localeChanged() {
-		this._syncStateIfNeeded();
-	}
-	_syncStateIfNeeded() {
-		this.instance?.[impl].updateHostState({
-			locale: this.locale,
-			ctx: this._ctx
-		});
-	}
-};
-__decorate([observable], RichTextEditor.prototype, "instance", void 0);
-//#endregion
-//#region src/lib/rich-text-editor/rich-text-editor.template.ts
-var RichTextEditorTemplate = (ctx) => {
-	return html`<template :_ctx="${() => ctx}">
-		<div class="rte">
-			<slot name="editor-before"></slot>
-			<div class="editor-viewport" ${ref("editorViewportElement")}>
-				<div class="editor-scroll-area" part="editor-scrollable-area">
-					<slot name="editor-start"></slot>
-					<div class="editor rich-text" ${ref("_editorEl")}></div>
-					<div class="popovers"></div>
-					<slot name="editor-end"></slot>
-				</div>
-			</div>
-			<slot name="editor-after"></slot>
-			<slot name="status"></slot>
-			<div class="toolbar"></div>
-		</div>
-	</template>`;
-};
-//#endregion
-//#region src/lib/rich-text-editor/popover.ts
-var Kind = {
-	default: {
-		placement: void 0,
-		placementStrategy: PlacementStrategy.AutoPlacementHorizontal,
-		shiftCrossAxis: false,
-		strategy: "absolute"
-	},
-	autocomplete: {
-		placement: "bottom-start",
-		placementStrategy: PlacementStrategy.Flip,
-		shiftCrossAxis: false,
-		strategy: "fixed"
-	},
-	imageOptions: {
-		placement: "bottom",
-		placementStrategy: PlacementStrategy.Flip,
-		shiftCrossAxis: true,
-		strategy: "absolute"
-	}
-};
-var popoverTemplate = (context) => {
-	const popup = context.tagFor(Popup);
-	return html`<${popup}
-		:anchor="${(x) => x.anchorEl}"
-		:placement="${(x) => Kind[x.kind].placement}"
-		:placementStrategy="${(x) => Kind[x.kind].placementStrategy}"
-		:shiftCrossAxis="${(x) => Kind[x.kind].shiftCrossAxis}"
-		:open="${(x) => x.open}"
-		:offset="${(x) => x.offset}"
-		:strategy="${(x) => Kind[x.kind].strategy}"
-		exportparts="vvd-theme-alternate"
-	>
-		<slot></slot>
-	</${popup}>`;
-};
-var Popover = class extends VividElement {
-	constructor(..._args) {
-		super(..._args);
-		this.kind = "default";
-		this.anchorBlocksPopover = false;
-		this.onAnchorBlockPopoverChanged = () => {
-			this.anchorBlocksPopover = this.anchorEl?.dataset.blockPopover === "true" || false;
-		};
-		this.requestedOpenState = false;
-	}
-	static setBlockPopover(onElement, block) {
-		onElement.dataset.blockPopover = block ? "true" : "false";
-		const event = new CustomEvent("block-popover-changed", {
-			bubbles: false,
-			composed: false
-		});
-		onElement.dispatchEvent(event);
-	}
-	/** Closes the popover. It reopens when anchorEl changes to a new element that does not block it. */
-	dismiss() {
-		this.anchorBlocksPopover = true;
-	}
-	anchorElChanged(prev, next) {
-		prev?.removeEventListener("block-popover-changed", this.onAnchorBlockPopoverChanged);
-		next?.addEventListener("block-popover-changed", this.onAnchorBlockPopoverChanged);
-		this.onAnchorBlockPopoverChanged();
-	}
-	anchorIdChanged() {
-		this.updateAnchor();
-	}
-	updateAnchor() {
-		if (this.anchorId && this.isConnected) this.anchorEl = this.getRootNode().getElementById(this.anchorId) || void 0;
-		else this.anchorEl = void 0;
-	}
-	requestOpenState(open) {
-		this.requestedOpenState = open;
-	}
-	get open() {
-		return this.requestedOpenState && !!this.anchorEl && !this.anchorBlocksPopover;
-	}
-	#observer;
-	connectedCallback() {
-		super.connectedCallback();
-		this.updateAnchor();
-		this.#observer = new MutationObserver((records) => {
-			if (records.some((r) => Array.from(r.addedNodes).some((n) => n instanceof HTMLElement && n.id === this.anchorId))) this.updateAnchor();
-		});
-		this.#observer.observe(this.getRootNode(), {
-			childList: true,
-			subtree: true
-		});
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#observer.disconnect();
-	}
-};
-__decorate([observable], Popover.prototype, "kind", void 0);
-__decorate([observable], Popover.prototype, "offset", void 0);
-__decorate([observable], Popover.prototype, "anchorBlocksPopover", void 0);
-__decorate([observable], Popover.prototype, "anchorEl", void 0);
-__decorate([observable], Popover.prototype, "anchorId", void 0);
-__decorate([observable], Popover.prototype, "requestedOpenState", void 0);
-__decorate([volatile], Popover.prototype, "open", null);
-var popoverDefinition = defineVividComponent("rich-text-editor-popover", Popover, popoverTemplate, [popupDefinition], {});
-//#endregion
-//#region ../../node_modules/.pnpm/prosemirror-view@1.41.8/node_modules/prosemirror-view/style/prosemirror.css?inline
-var prosemirror_default = ".ProseMirror{word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;position:relative}.ProseMirror pre{white-space:pre-wrap}.ProseMirror li{position:relative}.ProseMirror-hideselection ::selection{background:0 0}.ProseMirror-hideselection ::selection{background:0 0}.ProseMirror-hideselection{caret-color:#0000}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror-selectednode{outline:2px solid #8cf}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";pointer-events:none;border:2px solid #8cf;position:absolute;inset:-2px -2px -2px -32px}img.ProseMirror-separator{border:none!important;margin:0!important;display:inline!important}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/default-textblock.ts
-function defaultTextblockForMatch(match) {
-	for (let i = 0; i < match.edgeCount; i++) {
-		const { type } = match.edge(i);
-		/* v8 ignore if -- @preserve It's currently not possible to exercise this code in our RTE */
-		if (type.isTextblock && !type.hasRequiredAttrs()) return type;
-	}
-	/* v8 ignore next 1 -- @preserve*/
-	throw new Error("No default textblock found.");
-}
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/ui.style.scss?inline
-var ui_style_default = "[data-class=ui-select]{min-inline-size:120px;margin-block:-4px}.ui-divider{block-size:20px}.ui-button-group{gap:4px;display:flex}.ui-tooltip,.ui-menu{--_popup-display:contents;display:contents}.ui-tooltip-wrapper{display:contents}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/feature-state.ts
-var FeatureState = class {
-	constructor(initialValue) {
-		this.plugin = new Plugin({ state: {
-			init: () => initialValue,
-			apply: (tr, value) => {
-				const meta = tr.getMeta(this.plugin);
-				return meta !== void 0 ? meta : value;
-			}
-		} });
-	}
-	getValue(rte) {
-		return this.plugin.getState(rte.state);
-	}
-	setValue(rte, newValue) {
-		rte.dispatchTransaction(rte.tr.setMeta(this.plugin, newValue));
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
-var core_style_default = ".ProseMirror{box-sizing:border-box;padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1 0 0}.ProseMirror-selectednode{--focus-stroke-gap-color:transparent;--focus-border-radius:2px;outline:none;position:relative}.ProseMirror-selectednode:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.editor--disabled .ProseMirror{color:var(--vvd-color-neutral-300);cursor:not-allowed}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
-var RteForeignHtmlFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteForeignHtmlFeature";
-	}
-	getPlugins(rte) {
-		return [this.contribution(new Plugin({ props: {
-			transformPastedHTML: (html) => rte.foreignHtmlParser[impl].transform(html),
-			clipboardParser: rte.foreignHtmlParser[impl].parser,
-			clipboardSerializer: rte.foreignHtmlSerializer[impl].serializer
-		} }))];
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/cursor-fix.ts
-/**
-* When the cursor is positioned after an inline atom node at the end of a line,
-* browsers may display the cursor inside the atom.
-*/
-var atomCursorFix = ($cursor) => {
-	if (!($cursor.parentOffset === $cursor.parent.content.size)) return null;
-	const nodeBefore = $cursor.nodeBefore;
-	if (nodeBefore && nodeBefore.isInline && nodeBefore.isAtom && !nodeBefore.isText) return {};
-	return null;
-};
-var RteCursorFixFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteCursorFix";
-	}
-	getPlugins(rte) {
-		const cursorFixes = [atomCursorFix];
-		for (const markType of Object.values(rte.schema.marks)) {
-			const spec = markType.spec;
-			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
-		}
-		return [this.contribution(new Plugin({ props: { decorations: (state) => {
-			const { $cursor } = state.selection;
-			if (!$cursor) return null;
-			let cursorFix = null;
-			for (const fn of cursorFixes) {
-				const result = fn($cursor, state);
-				if (result) Object.assign(cursorFix ??= {}, result);
-			}
-			if (!cursorFix) return null;
-			return DecorationSet.create(state.doc, [Decoration.widget($cursor.pos, () => {
-				const span = document.createElement("span");
-				span.textContent = "​";
-				for (const [prop, value] of Object.entries(cursorFix)) span.style.setProperty(prop, value);
-				return span;
-			}, { side: -1 })]);
-		} } }))];
-	}
+import { n as FormAssociated } from "./form-associated.js";
+import { t as Localized } from "./localized.js";
+import { i as Popup, r as PlacementStrategy, t as popupDefinition } from "./definition9.js";
+import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
+import { a as defaultToOneConverter, i as lerp, n as getMarkersTemplate, o as roundToStepValue, r as inverseLerp } from "./slider.template.js";
+import { t as FormElement } from "./form-element.js";
+import { attr, html, nullableNumberConverter, observable, ref, when } from "@microsoft/fast-element";
+import { Orientation, classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, limit } from "@microsoft/fast-web-utilities";
+//#region src/lib/range-slider/range-slider.scss?inline
+var range_slider_default = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}";
+//#endregion
+//#region src/lib/range-slider/range-slider.ts
+var Direction$1 = {
+	Increment: 1,
+	Decrement: -1
 };
-featureFacade(RteCursorFixFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/core.ts
 /**
-* Plugin to bring state from the host web component into ProseMirror.
+* Base class for range-slider
+*
+* @component range-slider
+* @public
+* @event {CustomEvent<undefined>} input:start - Event emitted when the start value changes
+* @event {CustomEvent<undefined>} input:end - Event emitted when the end value changes
+* @event {CustomEvent<undefined>} input - Event emitted when either the start or end value changes.
+* @event {CustomEvent<undefined>} change - Event emitted when either the start or end value changes.
+* @vueModel start start input:start `event.currentTarget.start`
+* @vueModel end end input:end `event.currentTarget.end`
+* @vueModel startAsNumber startAsNumber input:start `event.currentTarget.startAsNumber`
+* @vueModel endAsNumber endAsNumber input:end `event.currentTarget.endAsNumber`
+* @testSelector byLabel byLabel
+* @testAction slideStartTo slideTo #track #startThumb
+* @testAction slideEndTo slideTo #track #endThumb
+* @testQuery range rangeAsNumber
+* @testRef track shadow .control
+* @testRef startThumb shadow #start-thumb
+* @testRef endThumb shadow #end-thumb
 */
-var hostBridgePlugin = new Plugin({ state: {
-	init() {
-		return null;
-	},
-	apply(tr, value) {
-		const meta = tr.getMeta(hostBridgePlugin);
-		if (meta) return meta;
-		else return value;
-	}
-} });
-var RteCoreImpl = class extends RteFeatureImpl {
+var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElement))) {
 	constructor(..._args) {
 		super(..._args);
-		this.name = "RteCore";
-		this.disabled = new FeatureState(false);
-		this.scrollThreshold = void 0;
-		this.scrollMargin = void 0;
-	}
-	getStyles() {
-		return [
-			this.contribution(prosemirror_default),
-			this.contribution(core_style_default),
-			this.contribution(ui_style_default)
-		];
-	}
-	getPlugins(rte) {
-		const enterKeyChainCommands = chainCommands(newlineInCode, createParagraphNear, liftEmptyBlock, splitBlockAs((node, atEnd, $from) => {
-			if (!atEnd) return {
-				type: node.type,
-				attrs: node.attrs
-			};
-			return {
-				type: defaultTextblockForMatch($from.node($from.depth - 1).contentMatchAt($from.indexAfter($from.depth - 1))),
-				attrs: rte.textblockAttrs.extractFromNode(node)
-			};
-		}));
-		return [
-			this.contribution(this.disabled.plugin),
-			this.contribution(new Plugin({
-				props: {
-					editable: () => !this.disabled.getValue(rte),
-					handleDOMEvents: { click: (_view, event) => {
-						if (this.disabled.getValue(rte)) {
-							event.preventDefault();
-							return true;
-						}
-						return false;
-					} }
-				},
-				view: (view) => {
-					const popovers = view.dom.getRootNode().querySelector(".popovers");
-					const updateDisabled = () => {
-						const disabled = this.disabled.getValue(rte);
-						popovers.classList.toggle("popovers--disabled", disabled);
-						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
-					};
-					updateDisabled();
-					return { update: () => {
-						updateDisabled();
-					} };
+		this.#isInternalValueUpdate = false;
+		this.start = "";
+		this.end = "";
+		this.min = 0;
+		this.max = 10;
+		this.step = 1;
+		this.orientation = Orientation.horizontal;
+		this.ariaStartLabel = null;
+		this.ariaEndLabel = null;
+		this.markers = false;
+		this.pin = false;
+		this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
+		this.proxy = document.createElement("input");
+		this._trackEl = null;
+		this._startThumbEl = null;
+		this._endThumbEl = null;
+		this._draggingThumb = false;
+		this._visiblyFocusedThumb = null;
+		this._hoveredThumb = null;
+		this._startThumbCss = "";
+		this._endThumbCss = "";
+		this._selectedRangeCss = "";
+		this.#isNonVisibleFocus = false;
+		this.#onThumbFocus = (e) => {
+			if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
+			this.#isNonVisibleFocus = false;
+		};
+		this.#onThumbBlur = () => {
+			this._visiblyFocusedThumb = null;
+		};
+		this.#onVisibilityChange = () => {
+			if (document.hidden && (this.shadowRoot.activeElement === this._startThumbEl || this.shadowRoot.activeElement === this._endThumbEl)) this.#isNonVisibleFocus = true;
+		};
+		this.#onMouseOver = (e) => {
+			this._hoveredThumb = this.#getThumbIdFromEvent(e);
+		};
+		this.#onMouseOut = () => {
+			this._hoveredThumb = null;
+		};
+		this.#onThumbMousedown = (event) => {
+			if (this.disabled || event.defaultPrevented) return;
+			let target = event.target;
+			if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) target = this._startThumbEl;
+			this.#focusThumbNonVisibly(target);
+			this._draggingThumb = this.#getThumbId(target);
+			this.#registerDragHandlers();
+		};
+		this.#onThumbKeydown = (e) => {
+			const thumb = this.#getThumbIdFromEvent(e);
+			this._visiblyFocusedThumb = thumb;
+			if (e.key === keyHome) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
+			} else if (e.key === keyEnd) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
+			} else {
+				if (e.shiftKey) return;
+				switch (e.key) {
+					case keyArrowRight$1:
+					case keyArrowDown:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction$1.Increment);
+						break;
+					case keyArrowLeft$1:
+					case keyArrowUp:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction$1.Decrement);
+						break;
 				}
-			})),
-			this.contribution(keymap({
-				...baseKeymap,
-				Enter: enterKeyChainCommands,
-				"Shift-Enter": enterKeyChainCommands
-			})),
-			this.contribution(dropCursor()),
-			this.contribution(gapCursor()),
-			this.contribution(hostBridgePlugin)
-		];
-	}
-	getFeatures() {
-		return [
-			this,
-			new RteForeignHtmlFeatureImpl(),
-			new RteCursorFixFeatureImpl()
-		];
-	}
-};
-featureFacade(RteCoreImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/sanitization.ts
-var DEFAULT_ALLOWED_URI_REGEXP = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var ALLOWED_URI_REGEXP_WITH_BLOB = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|blob):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-var ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
-var domPurifyConfig = { ALLOWED_URI_REGEXP: ALLOWED_URI_REGEXP_WITH_BLOB };
-/**
-* Sanitize potentially dangerous URLs, like "javascript:", in anchor href attributes.
-* Returns empty string if the URL is unsafe.
-*/
-var sanitizeLinkHref = (url) => {
-	if (!DEFAULT_ALLOWED_URI_REGEXP.test(url.replace(ATTR_WHITESPACE, ""))) return "";
-	const anchor = document.createElement("a");
-	anchor.setAttribute("href", url);
-	/* v8 ignore next -- since href is already validated it's probably always present @preserve */
-	return DOMPurify.sanitize(anchor, {
-		RETURN_DOM: true,
-		...domPurifyConfig
-	}).querySelector("a").getAttribute("href") ?? "";
-};
-/**
-* Sanitize potentially dangerous URLs, like "javascript:", in image src attributes.
-* Returns empty string if the URL is unsafe.
-*/
-var sanitizeImageSrc = (url) => {
-	const img = document.createElement("img");
-	img.setAttribute("src", url);
-	return DOMPurify.sanitize(img, {
-		RETURN_DOM: true,
-		...domPurifyConfig
-	}).querySelector("img").getAttribute("src") ?? "";
-};
-/**
-* Escapes a CSS value for insertion into style attribute.
-* E.g. "15px; background: red" => "15px"
-*/
-var escapeCssProperty = (value) => value.replace(/[;!].*/, "");
-//#endregion
-//#region src/lib/rich-text-editor/rte/html-parser.ts
-var copy = (obj) => ({ ...obj });
-var parseRulesFromSchema = (schema) => ({
-	nodes: Object.fromEntries(Object.keys(schema.nodes).map((name) => [name, (schema.nodes[name].spec.parseDOM ?? []).map(copy)])),
-	marks: Object.fromEntries(Object.keys(schema.marks).map((name) => [name, (schema.marks[name].spec.parseDOM ?? []).map(copy)]))
-});
-var RteHtmlParser = class {
-	constructor(config, options) {
-		this[impl] = new RteHtmlParserImpl(config[impl], options);
-	}
-	/**
-	* Converts an HTML string to an RteDocument.
-	*/
-	parseDocument(html, options) {
-		return this[impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
-	}
-	/**
-	* Converts an HTML string to an RteFragment.
-	*/
-	parseFragment(html, options) {
-		return this[impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
-	}
-	parseHtml(html, options) {
-		const dom = DOMPurify.sanitize(html, {
-			RETURN_DOM: true,
-			...domPurifyConfig
-		});
-		const container = document.createDocumentFragment();
-		container.appendChild(dom);
-		options?.modifyDom?.(container);
-		return container;
-	}
-};
-var RteHtmlParserImpl = class {
-	constructor(config, options) {
-		const rules = parseRulesFromSchema(config.schema);
-		options?.modifyParseRules?.(rules);
-		this.parser = buildDomParser(config.schema, rules);
-	}
-	transform(html) {
-		return DOMPurify.sanitize(html);
-	}
-};
-var buildDomParser = (schema, { marks, nodes }) => {
-	const parserRules = [];
-	const priority = (rule) => rule.priority ?? 50;
-	function insert(rule) {
-		let i = 0;
-		for (; i < parserRules.length; i++) {
-			const next = parserRules[i];
-			if (priority(next) < priority(rule)) break;
-		}
-		parserRules.splice(i, 0, rule);
-	}
-	for (const name in marks) marks[name]?.forEach((rule) => {
-		insert(rule = copy(rule));
-		if (!(rule.mark || rule.ignore || rule.clearMark)) rule.mark = name;
-	});
-	for (const name in nodes) nodes[name]?.forEach((rule) => {
-		insert(rule = copy(rule));
-		if (!(rule.node || rule.ignore || rule.mark)) rule.node = name;
-	});
-	parserRules.push({
-		tag: "br",
-		closeParent: true
-	});
-	return new DOMParser(schema, parserRules);
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/html-serializer.ts
-var RteHtmlSerializer = class {
-	constructor(config, options) {
-		this[impl] = new RteHtmlSerializerImpl(config[impl], options);
-	}
-	/**
-	* Converts an RteDocument to an HTML string.
-	*/
-	serializeDocument(doc, options) {
-		return this[impl].serializeFragment(doc.content, options);
-	}
-	/**
-	* Converts an RteFragment to an HTML string.
-	*/
-	serializeFragment(fragment, options) {
-		return this[impl].serializeFragment(fragment, options);
-	}
-};
-var RteHtmlSerializerImpl = class RteHtmlSerializerImpl {
-	constructor(config, options) {
-		this.config = config;
-		const serializers = RteHtmlSerializerImpl.domSerializersFromSchema(config.schema);
-		Object.assign(serializers.nodes, options?.serializers?.nodes ?? {});
-		Object.assign(serializers.marks, options?.serializers?.marks ?? {});
-		this.serializer = new DOMSerializer(serializers.nodes, serializers.marks);
-	}
-	static domSerializersFromSchema(schema) {
-		const result = {
-			nodes: {},
-			marks: {}
+			}
 		};
-		for (const name in schema.marks) {
-			const toDOM = schema.marks[name].spec.toDOM;
-			if (toDOM) result.marks[name] = toDOM;
-		}
-		for (const name in schema.nodes) {
-			const toDOM = schema.nodes[name].spec.serializeToDOM ?? schema.nodes[name].spec.toDOM;
-			if (toDOM) result.nodes[name] = toDOM;
-		}
-		result.nodes.text = (node) => document.createTextNode(node.text);
-		return result;
-	}
-	serializeFragment(fragment, options) {
-		const parsedFragment = Fragment.fromJSON(this.config.schema, fragment);
-		const serializedFragment = this.serializer.serializeFragment(parsedFragment);
-		const container = document.createDocumentFragment();
-		container.appendChild(serializedFragment);
-		options?.modifyDom?.(container);
-		const output = document.createElement("div");
-		output.appendChild(container);
-		return output.innerHTML;
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/instance.ts
-var parseDocument = (schema, doc) => {
-	const node = schema.topNodeType.createAndFill(null, doc ? Fragment.fromJSON(schema, doc.content) : null);
-	if (!node) throw new Error("Document could not be parsed");
-	node.check();
-	return node;
-};
-var RteInstance = class {
-	constructor(config, options) {
-		this.options = options;
-		this.feature = (Feature, featureId) => {
-			return this[impl].getPublicInterface(Feature, featureId);
+		this.#onDragMove = (e) => {
+			if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
+			const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+			const value = this.#calculateValueFromMouseEvent(sourceEvent);
+			this.#updateValues({ [this._draggingThumb]: `${this.#roundToNearestStep(this._draggingThumb, value)}` });
 		};
-		this[impl] = new RteInstanceImpl(this, config, options);
-	}
-	/**
-	* Returns the current document state.
-	*/
-	getDocument() {
-		return this[impl].state.doc.toJSON();
-	}
-	/**
-	* Reset the editor to its initial state. Optionally, an initial document can be provided.
-	*/
-	reset(initialDocument) {
-		this[impl].reset(initialDocument);
-	}
-	/**
-	* Replaces the current selection with the given content.
-	* If no text is selected, this inserts the content at the cursor position.
-	*/
-	replaceSelection(content, options) {
-		const { state, tr, schema, dispatchTransaction } = this[impl];
-		tr.replaceSelection(new Slice(Fragment.fromJSON(schema, content), 0, 0));
-		tr.doc.check();
-		const $from = tr.doc.resolve(tr.mapping.map(state.selection.from));
-		const $to = tr.doc.resolve(tr.selection.to);
-		const [$head, $anchor] = options?.cursorPlacement === "start" ? [$from, $to] : [$to, $from];
-		if (options?.selectContent) tr.setSelection(state.selection instanceof AllSelection ? new AllSelection(tr.doc) : TextSelection.between($anchor, $head));
-		else tr.setSelection(TextSelection.between($head, $head));
-		dispatchTransaction(tr);
-	}
-	/**
-	* Replaces the entire document with the given new document.
-	* Unlike reset, this preserves the rest of the editor state. The undo history is preserved, so the user can undo the replacement.
-	*/
-	replaceDocument(newDocument, options) {
-		const { state, tr, schema, dispatchTransaction } = this[impl];
-		tr.replaceWith(0, state.doc.content.size, parseDocument(schema, newDocument));
-		if (options?.selectContent) tr.setSelection(new AllSelection(tr.doc));
-		else if (options?.cursorPlacement === "end") tr.setSelection(TextSelection.atEnd(tr.doc));
-		else tr.setSelection(TextSelection.atStart(tr.doc));
-		dispatchTransaction(tr);
-	}
-	/**
-	* Scrolls the cursor into view.
-	* Has no effect if the editor is not currently mounted.
-	*/
-	scrollIntoView() {
-		const instance = this[impl];
-		if (!instance.view) return;
-		instance.dispatchTransaction(instance.tr.scrollIntoView());
-	}
-};
-var RteInstanceImpl = class {
-	getFeature(name) {
-		const f = this.config.featureMap.get(name);
-		if (!f) throw new Error(`Feature not found: ${name}`);
-		return f;
-	}
-	getPublicInterface(Feature, featureId) {
-		const instances = this.config.featureFacadesMap.get(Feature);
-		if (!instances || instances.length === 0) throw new Error(`Feature not found`);
-		if (instances[0].featureId !== void 0) {
-			if (featureId === void 0) throw new Error(`No featureId provided for multi-instance feature.`);
-			const instance = instances.find((f) => f.featureId === featureId);
-			if (!instance) throw new Error(`Feature with id "${featureId}" not found`);
-			return instance.getPublicInterface(this);
-		}
-		if (featureId !== void 0) throw new Error(`Feature does not support featureId`);
-		return instances[0].getPublicInterface(this);
-	}
-	constructor(instanceFacade, configFacade, options) {
-		this.options = options;
-		this.view = null;
-		this.dispatchTransaction = (tr) => {
-			const prevState = this.state;
-			this.state = this.state.apply(tr);
-			this.view?.updateState(this.state);
-			if (prevState.doc !== this.state.doc) this.options?.onChange?.();
-			return this.state;
+		this.#onDragEnd = () => {
+			this._draggingThumb = false;
+			this.#unregisterDragListeners();
 		};
-		this.facade = instanceFacade;
-		const config = configFacade[impl];
-		this.config = config;
-		this.schema = config.schema;
-		this.textblockAttrs = config.textblockAttrs;
-		this.features = config.features;
-		this.foreignHtmlParser = options?.foreignHtmlParser ?? new RteHtmlParser(configFacade);
-		this.foreignHtmlSerializer = options?.foreignHtmlSerializer ?? new RteHtmlSerializer(configFacade);
-		this.styles = new ElementStyles(sortedContributions(config.features.flatMap((f) => f.getStyles())));
-		this.initState(options?.initialDocument);
-	}
-	initState(initialDoc) {
-		this.state = EditorState.create({
-			doc: parseDocument(this.schema, initialDoc),
-			schema: this.config.schema,
-			plugins: sortedContributions(this.config.features.flatMap((feature) => feature.getPlugins(this)))
-		});
-	}
-	reset(initialDocument) {
-		const currentHostState = hostBridgePlugin.getState(this.state);
-		this.initState(initialDocument);
-		this.updateHostState(currentHostState);
-		this.view?.updateState(this.state);
-	}
-	createView(target) {
-		const core = this.config.featureMap.get("RteCore");
-		this.view = new EditorView((editor) => {
-			editor.part = "editor";
-			target.appendChild(editor);
-		}, {
-			state: this.state,
-			dispatchTransaction: this.dispatchTransaction,
-			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
-			...core?.scrollMargin !== void 0 && { scrollMargin: core.scrollMargin }
-		});
-	}
-	destroyViewIfNeeded() {
-		if (this.view) {
-			this.view.destroy();
-			this.view = null;
-		}
-	}
-	createComponent(type) {
-		return document.createElement(this.hostState().ctx.tagFor(type, true));
-	}
-	getLocale() {
-		return this.hostState().locale;
-	}
-	get tr() {
-		return this.state.tr;
-	}
-	hostState() {
-		const state = hostBridgePlugin.getState(this.state);
-		if (!state) throw new Error("No host state available");
-		return state;
-	}
-	updateHostState(hostState) {
-		this.dispatchTransaction(this.tr.setMeta(hostBridgePlugin, hostState));
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/textblock-attrs.ts
-var TextblockAttrs = class {
-	constructor(specs) {
-		this.specs = specs;
-		this.attrs = {};
-		for (const spec of specs) this.attrs[spec.name] = { default: spec.default };
-	}
-	fromDOM(dom) {
-		return Object.assign({}, ...this.specs.map((s) => ({ [s.name]: s.fromDOM(dom) })));
-	}
-	getStyle(node) {
-		return this.specs.flatMap((s) => s.toStyles(node)).join("; ");
-	}
-	getDOMAttrsProperties(node) {
-		if (!this.specs.length) return {};
-		return { style: this.getStyle(node) };
-	}
-	getDOMAttrs(node) {
-		if (!this.specs.length) return [];
-		return [this.getDOMAttrsProperties(node)];
-	}
-	extractFromNode(node) {
-		return Object.assign({}, ...Object.keys(this.attrs).map((attr) => ({ [attr]: node.attrs[attr] })));
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/textblock-marks.ts
-var TextblockMarks = class {
-	constructor(specs) {
-		this.specs = specs;
 	}
-	getAllowedMarksForNode(nodeName) {
-		return this.specs.filter((spec) => !spec.onNodeName || spec.onNodeName === nodeName).map((spec) => spec.markName);
-	}
-	getReferencedNodeNames() {
-		return new Set(this.specs.map((spec) => spec.onNodeName).filter(Boolean));
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/view.ts
-/**
-* Converts an RteDocument to an RteView tree for rendering outside the editor.
-* The logic is adapted from ProseMirror's DOM serialization to ensure the resulting structure
-* matches the editor's HTML structure.
-*/
-var convertToView = (doc, ctx) => {
-	const schema = ctx.config[impl].schema;
-	const getMarkRank = (mark) => schema.marks[mark.type].rank;
-	const marksEqual = (a, b) => {
-		if (a.type !== b.type) return false;
-		const attrsA = a.attrs;
-		const attrsB = b.attrs;
-		if (attrsA === attrsB) return true;
-		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
-		if (!attrsA || !attrsB) return false;
-		const keysA = Object.keys(attrsA);
-		const keysB = Object.keys(attrsB);
-		/* v8 ignore next -- not currently reachable since all attrs are required @preserve */
-		if (keysA.length !== keysB.length) return false;
-		for (const key of keysA) if (attrsA[key] !== attrsB[key]) return false;
-		return true;
-	};
-	const convertFragment = (nodes) => {
-		const result = [];
-		const active = [];
-		const activeContents = [result];
-		for (const node of nodes) {
-			const nodeMarks = [...node.marks ?? []].sort((a, b) => getMarkRank(a) - getMarkRank(b));
-			let keep = 0;
-			let rendered = 0;
-			while (keep < active.length && rendered < nodeMarks.length) {
-				if (!marksEqual(active[keep], nodeMarks[rendered])) break;
-				keep++;
-				rendered++;
-			}
-			while (active.length > keep) {
-				active.pop();
-				activeContents.pop();
-			}
-			while (rendered < nodeMarks.length) {
-				const mark = nodeMarks[rendered];
-				const markContent = [];
-				activeContents[activeContents.length - 1].push({
-					type: "mark",
-					mark,
-					children: {
-						type: "fragment",
-						content: markContent,
-						[impl]: ctx
-					},
-					[impl]: ctx
-				});
-				active.push(mark);
-				activeContents.push(markContent);
-				rendered++;
-			}
-			activeContents[activeContents.length - 1].push({
-				type: "node",
-				node,
-				children: convertFragment(node.content ?? []),
-				[impl]: ctx
-			});
+	#isInternalValueUpdate;
+	/** @internal */
+	startChanged() {
+		this.currentStart = this.start;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
 		}
-		return {
-			type: "fragment",
-			content: result,
-			[impl]: ctx
-		};
-	};
-	return {
-		type: "node",
-		node: doc,
-		children: convertFragment(doc.content),
-		[impl]: ctx
-	};
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/config.ts
-var RteConfig = class {
-	constructor(features) {
-		this[impl] = new RteConfigImpl(features);
-	}
-	instantiateEditor(options) {
-		return new RteInstance(this, options);
-	}
-	instantiateView(document, options) {
-		return convertToView(document, {
-			config: this,
-			options: { ...options }
-		});
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-};
-var RteConfigImpl = class {
-	constructor(featuresFacades) {
-		const resolveFeatures = (features) => features.flatMap((f) => f.getFeatures().flatMap((subFeature) => subFeature === f ? f : resolveFeatures([subFeature])));
-		this.features = resolveFeatures(featuresFacades.map(getFeatureImpl));
-		this.featureMap = /* @__PURE__ */ new Map();
-		for (const f of this.features) {
-			if (this.featureMap.has(f.name)) throw new Error(`Duplicate feature: ${f.name}`);
-			this.featureMap.set(f.name, f);
-		}
-		this.featureFacadesMap = /* @__PURE__ */ new Map();
-		for (const facade of featuresFacades) {
-			const FacadeClass = facade.constructor;
-			const feature = getFeatureImpl(facade);
-			const instances = this.featureFacadesMap.get(FacadeClass);
-			if (instances) instances.push(feature);
-			else this.featureFacadesMap.set(FacadeClass, [feature]);
-		}
-		if (!this.featureMap.has("RteBase")) throw new Error("RteBase feature is required");
-		if (this.featureMap.has("RteLinkFeature") && !this.featureMap.has("RteToolbarFeature")) throw new Error("RteToolbarFeature is required for RteLinkFeature");
-		this.textblockAttrs = new TextblockAttrs(sortedContributions(this.features.flatMap((f) => f.getTextblockAttrs())));
-		this.textblockMarks = new TextblockMarks(sortedContributions(this.features.flatMap((f) => f.getTextblockMarks())));
-		const schemaContributions = sortedContributions(this.features.flatMap((f) => f.getSchema(this.textblockAttrs, this.textblockMarks)));
-		const schemaSpec = {
-			nodes: {},
-			marks: {}
-		};
-		for (const schema of schemaContributions) {
-			Object.assign(schemaSpec.nodes, schema.nodes ?? {});
-			Object.assign(schemaSpec.marks, schema.marks ?? {});
+	/** @internal */
+	initialStartChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.start = newValue;
+			this.dirtyValue = false;
 		}
-		for (const referencedNodeName of this.textblockMarks.getReferencedNodeNames()) if (!(referencedNodeName in schemaSpec.nodes)) throw new Error(`Unknown node "${referencedNodeName}"`);
-		this.schema = new Schema(schemaSpec);
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/ui.ts
-var isPropBinding = (prop) => typeof prop === "function";
-var on = (event, prop, handler) => [
-	event,
-	prop,
-	handler
-];
-var UiCtx = class {
-	constructor(view, rte, props) {
-		this.view = view;
-		this.rte = rte;
-		this.props = props;
-		this.bindings = [];
-	}
-	evalProp(prop) {
-		return isPropBinding(prop) ? prop(this) : prop;
 	}
-	bindProp(prop, bindFn) {
-		if (prop === void 0) return;
-		else if (isPropBinding(prop)) {
-			const binding = () => bindFn(prop(this));
-			this.bindings.push(binding);
-			binding();
-		} else bindFn(prop);
+	/** @internal */
+	currentStartChanged() {
+		this.start = this.currentStart;
 	}
-	updateBindings() {
-		for (const binding of this.bindings) binding();
-	}
-	shouldReturnFocusToEditor() {
-		return this.evalProp(this.props.shouldReturnFocusToEditor);
-	}
-	bindToEl(target, props = {}, events = [], children = []) {
-		for (const name in props) this.bindProp(props[name], (value) => {
-			target[name] = value;
-		});
-		for (const [name, value, bindFn] of events) if (value) target.addEventListener(name, bindFn(value));
-		for (const child of children) target.appendChild(child);
-	}
-};
-var createDiv = (ctx, props) => {
-	const div = document.createElement("div");
-	ctx.bindToEl(div, {
-		className: props.className,
-		slot: props.slot
-	}, [], props.children);
-	return div;
-};
-var createAnchor = (ctx, props) => {
-	const anchor = document.createElement("a");
-	ctx.bindToEl(anchor, {
-		href: props.href,
-		target: props.target,
-		rel: props.rel,
-		className: props.className
-	}, [], props.children);
-	return anchor;
-};
-var wrapperTargets = /* @__PURE__ */ new WeakMap();
-var createOptionalTooltip = (ctx, props) => {
-	const tooltip = ctx.rte.createComponent(Tooltip);
-	tooltip.setAttribute("exportparts", "vvd-theme-alternate");
-	ctx.bindToEl(tooltip, {
-		className: "ui-tooltip",
-		text: props.label,
-		placement: ctx.props.popupPlacement
-	});
-	ctx.bindProp(props.enabled, (enabled) => {
-		if (!enabled) tooltip.open = false;
-		tooltip.anchor = enabled ? props.anchor : void 0;
-	});
-	const wrapper = createDiv(ctx, {
-		className: "ui-tooltip-wrapper",
-		slot: props.slot,
-		children: [props.anchor, tooltip]
-	});
-	wrapperTargets.set(wrapper, props.anchor);
-	return wrapper;
-};
-var createButton = (ctx, props) => {
-	const variant = () => ctx.evalProp(props.variant) ?? "toolbar";
-	const size = () => variant() === "toolbar" ? "super-condensed" : "condensed";
-	const appearanceInactive = () => variant() === "popover-primary" ? "outlined" : "ghost-light";
-	const appearanceActive = () => variant() === "toolbar-menu" || variant() === "popover" ? "filled" : appearanceInactive();
-	const appearance = () => ctx.evalProp(props.active) ? appearanceActive() : appearanceInactive();
-	const connotation = () => ctx.evalProp(props.connotation) ?? (variant() === "toolbar-menu" && ctx.evalProp(props.active) ? "cta" : void 0);
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const button = ctx.rte.createComponent(Button);
-	ctx.bindToEl(button, {
-		size,
-		appearance,
-		disabled,
-		icon: props.icon,
-		autofocus: props.autofocus,
-		connotation,
-		[props.icon ? "ariaLabel" : "label"]: props.label,
-		pressed: () => Boolean(ctx.evalProp(props.active)),
-		ariaPressed: props.active !== void 0 ? () => ctx.evalProp(props.active) ? "true" : "false" : void 0
-	}, [on("click", props.onClick, (onClick) => () => {
-		if (!onClick() && ctx.shouldReturnFocusToEditor()) ctx.view.focus();
-	})]);
-	return createOptionalTooltip(ctx, {
-		enabled: () => Boolean(ctx.evalProp(props.icon) && !ctx.evalProp(props.noTooltip) && !disabled()),
-		label: props.label,
-		anchor: button,
-		slot: props.slot
-	});
-};
-var createMenu = (ctx, props) => {
-	const menu = ctx.rte.createComponent(Menu);
-	ctx.bindToEl(menu, {
-		className: "ui-menu",
-		autoDismiss: true,
-		ariaLabel: props.label,
-		anchor: wrapperTargets.get(props.trigger) ?? props.trigger,
-		placement: ctx.props.popupPlacement,
-		offset: () => ctx.evalProp(ctx.props.menuOffset) ?? null
-	}, [], props.children);
-	const fragment = document.createDocumentFragment();
-	fragment.appendChild(props.trigger);
-	fragment.appendChild(menu);
-	return fragment;
-};
-var createMenuItem = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const item = ctx.rte.createComponent(MenuItem);
-	ctx.bindToEl(item, {
-		text: props.text,
-		checked: props.checked,
-		disabled,
-		controlType: "radio",
-		checkedAppearance: "tick-only"
-	}, [on("change", props.onSelect, (onSelect) => () => {
-		if (item.checked && !item.disabled) {
-			if (ctx.evalProp(props.checked) !== item.checked) {
-				onSelect();
-				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
-			}
-		}
-	})]);
-	return item;
-};
-var createButtonGroup = (ctx, props) => createDiv(ctx, {
-	slot: props.slot,
-	className: "ui-button-group",
-	children: props.children
-});
-function markActive(state, type) {
-	const { from, $from, to, empty } = state.selection;
-	if (empty) return !!type.isInSet(state.storedMarks || $from.marks());
-	else return state.doc.rangeHasMark(from, to, type);
-}
-var createMarkToggle = (ctx, props) => createButton(ctx, {
-	label: props.label,
-	icon: props.icon,
-	active: () => markActive(ctx.view.state, props.markType),
-	disabled: () => !toggleMark(props.markType)(ctx.view.state),
-	onClick: () => {
-		toggleMark(props.markType)(ctx.view.state, ctx.view.dispatch);
+	/** The start property, typed as a number. */
+	get startAsNumber() {
+		return parseFloat(this.start);
 	}
-});
-var createOption = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const option = ctx.rte.createComponent(ListboxOption);
-	ctx.bindToEl(option, {
-		value: props.value,
-		text: props.text,
-		disabled
-	});
-	return option;
-};
-var createSelect = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled));
-	const select = ctx.rte.createComponent(Select);
-	select.setAttribute("data-class", "ui-select");
-	ctx.bindToEl(select, {
-		placeholder: " ",
-		ariaLabel: props.label,
-		appearance: "ghost",
-		disabled
-	}, [on("change", props.onSelect, (onSelect) => () => {
-		const value = select.value;
-		if (value) {
-			onSelect(value);
-			if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
-		}
-	})], props.children);
-	queueMicrotask(() => {
-		ctx.bindProp(props.value, (value) => select.value = value);
-	});
-	let hideTooltip = false;
-	select.addEventListener("vwc-popup:open", () => {
-		hideTooltip = true;
-		ctx.updateBindings();
-	});
-	select.addEventListener("vwc-popup:close", () => {
-		hideTooltip = false;
-		ctx.updateBindings();
-	});
-	return createOptionalTooltip(ctx, {
-		enabled: () => !hideTooltip && !disabled(),
-		label: props.label,
-		anchor: select
-	});
-};
-var createDivider = (ctx) => {
-	const divider = ctx.rte.createComponent(Divider);
-	ctx.bindToEl(divider, {
-		className: "ui-divider",
-		orientation: "vertical"
-	});
-	return divider;
-};
-var createTextField = (ctx, props) => {
-	const textField = ctx.rte.createComponent(TextField);
-	ctx.bindToEl(textField, {
-		label: props.label,
-		value: props.value,
-		placeholder: props.placeholder,
-		slot: props.slot,
-		autofocus: props.autofocus,
-		type: props.type,
-		helperText: props.helperText
-	}, [on("input", props.onInput, (onInput) => () => {
-		onInput(textField.value);
-	})]);
-	return textField;
-};
-var createText = (ctx, props) => {
-	const textNode = document.createTextNode("");
-	ctx.bindToEl(textNode, { textContent: props.text });
-	return textNode;
-};
-var createSingleSlot = (ctx, props) => {
-	const slot = document.createElement("slot");
-	slot.name = props.name;
-	let currentEl = null;
-	const listeners = [];
-	function cleanup() {
-		for (const { el, type, handler } of listeners) el.removeEventListener(type, handler);
-		listeners.length = 0;
-		currentEl = null;
+	set startAsNumber(next) {
+		this.start = next.toString();
 	}
-	for (const [key, prop] of Object.entries(props.assignedProps)) ctx.bindProp(prop, (value) => {
-		if (currentEl) currentEl[key] = value;
-	});
-	function applyPropsAndEvents(el) {
-		for (const [key, prop] of Object.entries(props.assignedProps)) el[key] = ctx.evalProp(prop);
-		for (const [type, handler] of Object.entries(props.assignedEvents)) {
-			const listener = (e) => {
-				handler(e);
-				if (ctx.shouldReturnFocusToEditor()) ctx.view.focus();
-			};
-			el.addEventListener(type, listener);
-			listeners.push({
-				el,
-				type,
-				handler: listener
-			});
+	/** @internal */
+	endChanged() {
+		this.currentEnd = this.end;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
 		}
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	const processSlot = () => {
-		const first = slot.assignedElements({ flatten: true })[0];
-		if (first === currentEl) return;
-		cleanup();
-		if (first) {
-			currentEl = first;
-			applyPropsAndEvents(first);
+	/** @internal */
+	initialEndChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.end = newValue;
+			this.dirtyValue = false;
 		}
-	};
-	slot.addEventListener("slotchange", processSlot);
-	queueMicrotask(processSlot);
-	return slot;
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/history.ts
-var RteHistoryFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteHistoryFeature";
-	}
-	getPlugins() {
-		return [this.contribution(history()), this.contribution(keymap({
-			"Mod-z": undo,
-			"Ctrl-y": redo,
-			"Cmd-Z": redo
-		}))];
 	}
-	getToolbarItems() {
-		if (!this.config.showToolbarButtons) return [];
-		return [this.contribution({
-			section: "history",
-			render: (ctx) => createButton(ctx, {
-				label: (ctx) => ctx.rte.getLocale().richTextEditor.undo,
-				icon: "undo-line",
-				disabled: (ctx) => !undo(ctx.view.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					undo(state, dispatch);
-				}
-			})
-		}, 1), this.contribution({
-			section: "history",
-			render: (ctx) => createButton(ctx, {
-				label: (ctx) => ctx.rte.getLocale().richTextEditor.redo,
-				icon: "redo-line",
-				disabled: (ctx) => !redo(ctx.view.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					redo(state, dispatch);
-				}
-			})
-		}, 2)];
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/basic-text-blocks.style.scss?inline
-var basic_text_blocks_style_default = "h1,h2,h3,p{all:unset;display:block}h1:first-child,h2:first-child,h3:first-child,p:first-child{margin-block-start:0}h1:last-child,h2:last-child,h3:last-child,p:last-child{margin-block-end:0}p{font:var(--vvd-typography-base);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:16px;line-height:20px}.heading-step-1{font:var(--vvd-typography-heading-4);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:24px 12px;line-height:28px}.heading-step-2{font:var(--vvd-typography-heading-3);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:24px 12px;line-height:36px}.heading-step-3{font:var(--vvd-typography-heading-2);font-variant-ligatures:unset;font-feature-settings:unset;margin-block:32px 16px;line-height:42px}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/basic-text-blocks.ts
-var RteBasicTextBlocksImpl = class extends RteFeatureImpl {
-	constructor(enabledBlocks) {
-		super();
-		this.enabledBlocks = enabledBlocks;
-		this.name = "RteBasicTextBlocks";
-	}
-	getStyles() {
-		return [this.contribution(basic_text_blocks_style_default)];
-	}
-	getSchema(textblockAttrs, textblockMarks) {
-		const nodes = {};
-		if (this.enabledBlocks.paragraph) nodes["paragraph"] = {
-			group: "block",
-			content: "inline*",
-			attrs: { ...textblockAttrs.attrs },
-			parseDOM: [{
-				tag: "p",
-				getAttrs: (dom) => textblockAttrs.fromDOM(dom)
-			}],
-			marks: textblockMarks.getAllowedMarksForNode("paragraph").join(" "),
-			toDOM(node) {
-				return [
-					"p",
-					{
-						part: `node--paragraph`,
-						...textblockAttrs.getDOMAttrsProperties(node)
-					},
-					0
-				];
-			},
-			serializeToDOM(node) {
-				return [
-					"p",
-					...textblockAttrs.getDOMAttrs(node),
-					0
-				];
-			}
-		};
-		let headingCount = 0;
-		for (const level of [
-			3,
-			2,
-			1
-		]) {
-			const nodeName = `heading${level}`;
-			const tag = `h${level}`;
-			if (!this.enabledBlocks[nodeName]) continue;
-			headingCount++;
-			const visualLevel = headingCount;
-			nodes[nodeName] = {
-				group: "block",
-				content: "inline*",
-				attrs: { ...textblockAttrs.attrs },
-				parseDOM: [{
-					tag,
-					getAttrs: (dom) => textblockAttrs.fromDOM(dom)
-				}],
-				marks: textblockMarks.getAllowedMarksForNode(nodeName).join(" "),
-				defining: true,
-				toDOM(node) {
-					return [
-						tag,
-						{
-							class: `heading-step-${visualLevel}`,
-							part: `node--${nodeName}`,
-							...textblockAttrs.getDOMAttrsProperties(node)
-						},
-						0
-					];
-				},
-				serializeToDOM(node) {
-					return [
-						tag,
-						...textblockAttrs.getDOMAttrs(node),
-						0
-					];
-				}
-			};
+	/** @internal */
+	currentEndChanged() {
+		this.end = this.currentEnd;
+	}
+	/** The end property, typed as a number. */
+	get endAsNumber() {
+		return parseFloat(this.end);
+	}
+	set endAsNumber(next) {
+		this.end = next.toString();
+	}
+	#updateValues({ start, end }, emitEvents = true) {
+		if (start === this.start) start = void 0;
+		if (end === this.end) end = void 0;
+		if (start === void 0 && end === void 0) return;
+		this.#isInternalValueUpdate = true;
+		if (start !== void 0) this.start = start;
+		if (end !== void 0) this.end = end;
+		this.#isInternalValueUpdate = false;
+		if (emitEvents) {
+			if (start !== void 0) this.$emit("input:start");
+			if (end !== void 0) this.$emit("input:end");
+			this.$emit("input");
+			this.$emit("change");
+			this.dirtyValue = true;
 		}
-		return [this.contribution({ nodes })];
-	}
-	getPlugins(rte) {
-		const keyBindings = {};
-		if (this.enabledBlocks.paragraph) keyBindings["Mod-Alt-0"] = this.setBlockType(rte, "paragraph");
-		for (const level of [
-			1,
-			2,
-			3
-		]) {
-			const nodeName = `heading${level}`;
-			if (this.enabledBlocks[nodeName]) keyBindings[`Mod-Alt-${level}`] = this.setBlockType(rte, nodeName);
+		this.#updateFormValue();
+	}
+	#applyStep(thumb, direction) {
+		this.#updateValues({ [thumb]: this.#roundToNearestStep(thumb, Number(this[thumb]) + direction * this.step).toString() });
+	}
+	/** @internal */
+	orientationChanged() {
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
+	}
+	/** @internal */
+	nameChanged(previous, next) {
+		super.nameChanged(previous, next);
+		this.#updateFormValue();
+	}
+	#updateFormValue() {
+		if (!this.name) this.setFormValue(null);
+		else {
+			const formData = new FormData();
+			formData.append(this.name, this.start);
+			formData.append(this.name, this.end);
+			this.setFormValue(formData);
 		}
-		return [this.contribution(keymap(keyBindings))];
 	}
-	getCurrentBlockType(state) {
-		const { $from, $to } = state.selection;
-		const fromTopBlock = $from.depth === 0 ? state.doc.childAfter($from.pos).node : $from.node(1);
-		if (fromTopBlock !== ($to.depth === 0 ? state.doc.childBefore($to.pos).node : $to.node(1))) return null;
-		if (!(fromTopBlock.type.name in this.enabledBlocks)) return null;
-		return fromTopBlock.type.name;
+	formResetCallback() {
+		this.#updateValues({
+			start: this.initialStart ?? this.min.toString(),
+			end: this.initialEnd ?? this.max.toString()
+		});
+		super.formResetCallback();
 	}
-	setBlockType(rte, name) {
-		return (state, dispatch) => {
-			const { from, to } = state.selection;
-			const tr = state.tr;
-			let supportedNodeFound = false;
-			state.doc.nodesBetween(from, to, (node, pos) => {
-				if (node.type.name in this.enabledBlocks) {
-					supportedNodeFound = true;
-					tr.setBlockType(pos, pos + node.nodeSize, state.schema.nodes[name], (oldNode) => rte.textblockAttrs.extractFromNode(oldNode));
-				}
-				return false;
-			});
-			if (!supportedNodeFound) return false;
-			dispatch?.(tr);
-			return true;
+	get #thumbs() {
+		return {
+			start: this._startThumbEl,
+			end: this._endThumbEl
 		};
 	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/utils/text-before-cursor.ts
-/**
-* Get the text content before the cursor position in the current text block.
-*/
-var textBeforeCursor = ($cursor) => $cursor.parent.textBetween(0, $cursor.parentOffset, void 0, "");
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/input-rules.ts
-/**
-* Aggregates all input rules from other features.
-*/
-var RteInputRulesFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteInputRulesFeature";
+	get #thumbConstraints() {
+		return {
+			start: {
+				min: this.min,
+				max: this.endAsNumber
+			},
+			end: {
+				min: this.startAsNumber,
+				max: this.max
+			}
+		};
+	}
+	#getThumbId(thumb) {
+		return thumb === this._startThumbEl ? "start" : "end";
+	}
+	#getThumbIdFromEvent(e) {
+		return this.#getThumbId(e.target);
+	}
+	#updateThumbPositions() {
+		const startOffsetPct = this.#thumbTrackEndOffset(this.startAsNumber);
+		const endOffsetPct = this.#thumbTrackEndOffset(this.endAsNumber);
+		const [dirProp, dimProp] = this.orientation === Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
+		const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
+		this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
+		this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
+		this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
+	}
+	#thumbTrackEndOffset(value) {
+		return (1 - inverseLerp(this.min, this.max, value)) * 100;
+	}
+	#calculateValueFromMouseEvent(e) {
+		const trackClientRect = this._trackEl.getBoundingClientRect();
+		const [minPos, maxPos, valuePos] = this.orientation === Orientation.horizontal ? [
+			this._trackEl.clientLeft,
+			this._trackEl.clientWidth,
+			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+		] : [
+			trackClientRect.top,
+			trackClientRect.bottom,
+			e.pageY - document.documentElement.scrollTop
+		];
+		return lerp(this.min, this.max, inverseLerp(minPos, maxPos, valuePos));
 	}
-	getPlugins(rte) {
-		const ruleSpecs = sortedContributions(rte.config.features.flatMap((f) => f.getInputRules(rte)));
-		if (ruleSpecs.length === 0) return [];
-		const plugins = [];
-		const rules = ruleSpecs.map((spec) => spec.rule);
-		plugins.push(this.contribution(inputRules({ rules })));
-		plugins.push(this.contribution(keymap({ Backspace: undoInputRule }), contributionPriority.high));
-		const enterHandlers = ruleSpecs.filter((spec) => spec.enterHandler).map((spec) => spec.enterHandler);
-		if (enterHandlers.length > 0) plugins.push(this.contribution(keymap({ Enter: (state, dispatch) => {
-			const { $cursor } = state.selection;
-			if (!$cursor) return false;
-			const textBefore = textBeforeCursor($cursor);
-			for (const { regex, handler } of enterHandlers) {
-				const match = regex.exec(textBefore);
-				if (!match) continue;
-				const matchStart = $cursor.pos - $cursor.parentOffset + match.index;
-				const tr = handler(state, match, matchStart, matchStart + match[0].length);
-				if (tr) dispatch?.(tr);
-				break;
-			}
-			return false;
-		} }), contributionPriority.highest));
-		return plugins;
+	#roundToNearestStep(thumb, value) {
+		return limit(this.#thumbConstraints[thumb].min, this.#thumbConstraints[thumb].max, roundToStepValue(value - this.min, this.step) + this.min);
 	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/base.ts
-var RteBaseImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteBase";
+	#isNonVisibleFocus;
+	#focusThumbNonVisibly(thumb) {
+		this.#isNonVisibleFocus = true;
+		thumb.focus();
+		this.#isNonVisibleFocus = false;
 	}
-	getSchema() {
-		return [this.contribution({ nodes: {
-			doc: { content: "block+" },
-			text: { group: "inline" }
-		} })];
+	/** @internal */
+	_isThumbPopupOpen(thumb) {
+		return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
 	}
-	getFeatures() {
-		return [
-			this,
-			new RteCoreImpl(),
-			new RteHistoryFeatureImpl({ showToolbarButtons: this.config?.historyToolbarButtons ?? true }),
-			new RteBasicTextBlocksImpl({
-				heading1: this.config?.heading1 ?? false,
-				heading2: this.config?.heading2 ?? false,
-				heading3: this.config?.heading3 ?? false,
-				paragraph: this.config?.paragraph ?? true
-			}),
-			new RteInputRulesFeatureImpl()
-		];
+	connectedCallback() {
+		super.connectedCallback();
+		this.#updateValues({
+			start: this.start || this.initialStart || this.min.toString(),
+			end: this.end || this.initialEnd || this.max.toString()
+		}, false);
+		this.#registerThumbListeners();
+		this.#updateThumbPositions();
+		document.addEventListener("visibilitychange", this.#onVisibilityChange);
 	}
-	getPublicInterface(rte) {
-		const core = rte.getFeature("RteCore");
-		return {
-			get disabled() {
-				return core.disabled.getValue(rte);
-			},
-			set disabled(value) {
-				core.disabled.setValue(rte, value);
-			},
-			get scrollThreshold() {
-				return core.scrollThreshold;
-			},
-			set scrollThreshold(value) {
-				core.scrollThreshold = value;
-				rte.view?.setProps({ scrollThreshold: value });
-			},
-			get scrollMargin() {
-				return core.scrollMargin;
-			},
-			set scrollMargin(value) {
-				core.scrollMargin = value;
-				rte.view?.setProps({ scrollMargin: value });
-			}
-		};
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#unregisterThumbListeners();
+		this.#unregisterDragListeners();
+		document.removeEventListener("visibilitychange", this.#onVisibilityChange);
+	}
+	#registerThumbListeners() {
+		for (const thumb of ["start", "end"]) {
+			this.#thumbs[thumb].addEventListener("keydown", this.#onThumbKeydown);
+			this.#thumbs[thumb].addEventListener("mousedown", this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb].addEventListener("touchstart", this.#onThumbMousedown, { passive: true });
+			this.#thumbs[thumb].addEventListener("mouseover", this.#onMouseOver, { passive: true });
+			this.#thumbs[thumb].addEventListener("mouseout", this.#onMouseOut, { passive: true });
+			this.#thumbs[thumb].addEventListener("focus", this.#onThumbFocus);
+			this.#thumbs[thumb].addEventListener("blur", this.#onThumbBlur);
+		}
 	}
-};
-var RteBase = featureFacade(RteBaseImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/text-block-picker.ts
-var RteTextBlockPickerFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteTextBlockPickerFeature";
-	}
-	getToolbarItems(rte) {
-		const blocks = rte.getFeature("RteBasicTextBlocks");
-		return [this.contribution({
-			section: "font",
-			render: (ctx) => {
-				return createSelect(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.paragraphStyles,
-					value: (ctx) => blocks.getCurrentBlockType(ctx.view.state) ?? "",
-					onSelect: (value) => {
-						const { state, dispatch } = ctx.view;
-						blocks.setBlockType(rte, value)(state, dispatch);
-					},
-					children: this.config.options.map((opt) => createOption(ctx, {
-						text: opt.label,
-						value: opt.node,
-						disabled: () => !blocks.setBlockType(rte, opt.node)(ctx.view.state)
-					}))
-				});
-			}
-		}, 1)];
-	}
-};
-var RteTextBlockPickerFeature = featureFacade(RteTextBlockPickerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/toolbar.style.scss?inline
-var toolbar_style_default = ".toolbar{background-color:var(--vvd-color-neutral-50);flex-wrap:wrap;align-items:center;gap:8px;padding:4px;display:flex}.toolbar--hidden{display:none}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/toolbar.ts
-var RteToolbarFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteToolbarFeature";
-		this.hidden = new FeatureState(false);
-	}
-	getStyles() {
-		return [this.contribution(toolbar_style_default)];
-	}
-	getPlugins(rte) {
-		const sections = [
-			"history",
-			"font",
-			"text-style",
-			"textblock",
-			"insert"
-		];
-		const itemsBySection = new Map(sections.map((section) => [section, []]));
-		for (const toolbarItem of sortedContributions(rte.features.flatMap((f) => f.getToolbarItems(rte)))) itemsBySection.get(toolbarItem.section).push(toolbarItem);
-		const core = rte.getFeature("RteCore");
-		return [this.contribution(this.hidden.plugin), this.contribution(new Plugin({ view: (view) => {
-			let focusCameFromEditorWithMouse = false;
-			const ctx = new UiCtx(view, rte, {
-				popupPlacement: this.config?.popupDirection === "outward" ? "bottom" : "top",
-				menuOffset: 8,
-				disabled: () => core.disabled.getValue(rte),
-				shouldReturnFocusToEditor: () => focusCameFromEditorWithMouse
-			});
-			const toolbar = view.dom.getRootNode().querySelector(".toolbar");
-			let mouseDownTime = -Infinity;
-			const onMouseDown = () => {
-				if (view.hasFocus()) focusCameFromEditorWithMouse = true;
-				mouseDownTime = Date.now();
-			};
-			const onFocusIn = () => {
-				if (Date.now() - mouseDownTime > 250) focusCameFromEditorWithMouse = false;
-			};
-			const onFocusOut = (e) => {
-				if (!toolbar.contains(e.relatedTarget)) focusCameFromEditorWithMouse = false;
-			};
-			toolbar.addEventListener("mousedown", onMouseDown, { capture: true });
-			toolbar.addEventListener("focusin", onFocusIn);
-			toolbar.addEventListener("focusout", onFocusOut);
-			ctx.bindProp(() => this.hidden.getValue(rte), (hidden) => {
-				toolbar.classList.toggle("toolbar--hidden", hidden);
-			});
-			let openSection = false;
-			for (const section of sections) {
-				const items = itemsBySection.get(section);
-				if (items.length && openSection) {
-					toolbar.appendChild(createDivider(ctx));
-					openSection = false;
-				}
-				for (const toolbarItemSpec of items) {
-					toolbar.appendChild(toolbarItemSpec.render(ctx));
-					openSection = true;
-				}
-			}
-			return {
-				update() {
-					ctx.updateBindings();
-				},
-				destroy() {
-					toolbar.innerHTML = "";
-					toolbar.removeEventListener("mousedown", onMouseDown, { capture: true });
-					toolbar.removeEventListener("focusin", onFocusIn);
-					toolbar.removeEventListener("focusout", onFocusOut);
-					focusCameFromEditorWithMouse = false;
-				}
-			};
-		} }))];
-	}
-	getPublicInterface(rte) {
-		const hidden = this.hidden;
-		return {
-			get hidden() {
-				return hidden.getValue(rte);
-			},
-			set hidden(value) {
-				hidden.setValue(rte, value);
-			}
-		};
-	}
-};
-var RteToolbarFeature = featureFacade(RteToolbarFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/placeholder.style.scss?inline
-var placeholder_style_default = ".placeholder{display:contents}.placeholder:before{color:var(--vvd-color-neutral-600);content:attr(data-placeholder);font-size:var(--placeholder-font-size,inherit);inset-inline:var(--editor-padding-inline);line-height:inherit;pointer-events:none;position:absolute}.editor--disabled .placeholder:before{color:var(--vvd-color-neutral-300)}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/placeholder.ts
-var RtePlaceholderFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RtePlaceholderFeature";
-	}
-	getStyles() {
-		return [this.contribution(placeholder_style_default)];
-	}
-	getPlugins() {
-		const placeholderPlugin = new Plugin({ props: { decorations: (state) => {
-			if (state.doc.nodeSize === 4) {
-				const storedSize = state.schema.marks.fontSize?.isInSet(state.storedMarks ?? [])?.attrs.size;
-				return DecorationSet.create(state.doc, [Decoration.widget(1, () => {
-					const placeholder = document.createElement("span");
-					placeholder.className = "placeholder";
-					placeholder.dataset.placeholder = this.config.text;
-					if (storedSize) placeholder.style.setProperty("--placeholder-font-size", storedSize);
-					return placeholder;
-				})]);
-			}
-			return null;
-		} } });
-		return [this.contribution(placeholderPlugin)];
-	}
-};
-var RtePlaceholderFeature = featureFacade(RtePlaceholderFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/hard-break.ts
-var RteHardBreakFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteHardBreakFeature";
-	}
-	getSchema() {
-		return [this.contribution({ nodes: { hardBreak: {
-			inline: true,
-			group: "inline",
-			selectable: false,
-			parseDOM: [{ tag: "br" }],
-			toDOM() {
-				return ["br"];
-			}
-		} } })];
-	}
-	getPlugins(_rte) {
-		const forceBreak = (state, dispatch) => {
-			dispatch?.(state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView());
-			return true;
-		};
-		const keyBindings = { "Shift-Enter": forceBreak };
-		return [this.contribution(keymap(keyBindings), contributionPriority.high)];
-	}
-};
-var RteHardBreakFeature = featureFacade(RteHardBreakFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/font-size-picker.ts
-var mixedFontSize = Symbol("mixedFontSize");
-var RteFontSizePickerFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteFontSizePickerFeature";
-		this.fontSizes = config.options;
-		if (config.onBlocks) {
-			this.defaultFontSizeForNode = {};
-			for (const block of config.onBlocks) this.defaultFontSizeForNode[block.node] = block.defaultSize ?? null;
-		}
-	}
-	getTextblockMarks() {
-		if (this.config?.onBlocks) return this.config.onBlocks.map((block) => this.contribution({
-			markName: "fontSize",
-			onNodeName: block.node
-		}));
-		return [this.contribution({ markName: "fontSize" })];
-	}
-	getSchema() {
-		return [this.contribution({ marks: { fontSize: {
-			attrs: { size: { validate: "string" } },
-			parseDOM: [{
-				tag: "span[style*='font-size']",
-				getAttrs: (node) => {
-					const size = node.getAttribute("style").match(/font-size:\s*([^;]+)/)?.[1]?.trim();
-					if (size) return { size };
-					return false;
-				}
-			}],
-			toDOM: (mark) => {
-				return [
-					"span",
-					{ style: `font-size: ${escapeCssProperty(mark.attrs.size)};` },
-					0
-				];
-			},
-			cursorFix: ($cursor, state) => {
-				const storedMarks = state.storedMarks;
-				if (!storedMarks) return null;
-				const fontSizeMark = storedMarks.find((m) => m.type.name === "fontSize");
-				if (fontSizeMark) return { "font-size": fontSizeMark.attrs.size };
-				if (storedMarks.length === 0) {
-					const defaultSize = this.defaultFontSizeForNode?.[$cursor.parent.type.name];
-					if (defaultSize) return { "font-size": defaultSize };
-				}
-				return null;
-			}
-		} } })];
-	}
-	getPlugins() {
-		return [this.contribution(keymap({
-			"Mod-Shift-.": this.adjustFontSize(-1),
-			"Mod-Shift-,": this.adjustFontSize(1)
-		}))];
-	}
-	getToolbarItems(rte) {
-		return [this.contribution({
-			section: "font",
-			render: (ctx) => createMenu(ctx, {
-				label: () => rte.getLocale().richTextEditor.textSize,
-				trigger: createButton(ctx, {
-					label: () => rte.getLocale().richTextEditor.textSize,
-					icon: "text-size-line"
-				}),
-				children: this.fontSizes.map((fs) => createMenuItem(ctx, {
-					text: fs.label,
-					checked: () => this.getFontSizeFromSelection(ctx.view.state) === fs.size,
-					disabled: () => !this.setFontSize(fs.size)(ctx.view.state),
-					onSelect: () => {
-						const { state, dispatch } = ctx.view;
-						this.setFontSize(fs.size)(state, dispatch);
-					}
-				}))
-			})
-		}, 2)];
-	}
-	getFontSizeFromSelection(state) {
-		const { from, to, $from, empty } = state.selection;
-		const { fontSize } = state.schema.marks;
-		if (empty) {
-			const defaultSize = this.defaultFontSizeForNode?.[$from.parent.type.name] ?? null;
-			return fontSize.isInSet(state.storedMarks || $from.marks())?.attrs.size ?? defaultSize;
-		}
-		let size = null;
-		const observeSize = (observedSize) => {
-			if (size === null) size = observedSize ?? null;
-			else if (observedSize !== size) size = mixedFontSize;
-		};
-		state.doc.nodesBetween(from, to, (node, _, parent) => {
-			if (size === mixedFontSize) return false;
-			if (!node.isLeaf) {
-				if (node.type.allowsMarkType(fontSize) && node.childCount === 0) observeSize(this.defaultFontSizeForNode?.[node.type.name]);
-				return true;
-			}
-			observeSize(fontSize.isInSet(node.marks)?.attrs.size ?? (parent && this.defaultFontSizeForNode?.[parent.type.name]));
-			return true;
-		});
-		return size;
-	}
-	setFontSize(size) {
-		return (state, dispatch) => {
-			const { from, to, empty, $from } = state.selection;
-			const { fontSize } = state.schema.marks;
-			if (!toggleMark(fontSize, { size })(state)) return false;
-			const tr = state.tr;
-			if (empty) {
-				const newStoredMarks = (state.storedMarks || []).filter((m) => m.type !== fontSize);
-				if (size !== this.defaultFontSizeForNode?.[$from.parent.type.name]) newStoredMarks.push(fontSize.create({ size }));
-				tr.setStoredMarks(newStoredMarks);
-			} else {
-				tr.addMark(from, to, fontSize.create({ size }));
-				tr.doc.nodesBetween(from, to, (node, pos, parent) => {
-					if (!node.isInline) return;
-					const mark = fontSize.isInSet(node.marks);
-					const defaultSize = this.defaultFontSizeForNode?.[parent.type.name];
-					if (mark && mark.attrs.size === defaultSize) tr.step(new RemoveMarkStep(pos, pos + node.nodeSize, mark));
-				});
-			}
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-	adjustFontSize(adjustment) {
-		return (state, dispatch) => {
-			const currentSize = this.getFontSizeFromSelection(state);
-			if (currentSize === null || currentSize === mixedFontSize) return false;
-			const nextIndex = this.fontSizes.findIndex((fs) => fs.size === currentSize) + adjustment;
-			if (nextIndex < 0 || nextIndex >= this.fontSizes.length) return false;
-			return this.setFontSize(this.fontSizes[nextIndex].size)(state, dispatch);
-		};
-	}
-};
-var RteFontSizePickerFeature = featureFacade(RteFontSizePickerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/text-style.ts
-var RteTextStyleFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-	}
-	getTextblockMarks() {
-		if (this.config?.onBlocks) return this.config.onBlocks.map((block) => this.contribution({
-			markName: this.markName,
-			onNodeName: block.node
-		}));
-		return [this.contribution({ markName: this.markName })];
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/bold.ts
-var RteBoldFeatureImpl = class extends RteTextStyleFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteBoldFeature";
-		this.markName = "bold";
-	}
-	getSchema() {
-		return [this.contribution({ marks: { bold: marks.strong } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution(keymap({ "Mod-b": toggleMark(rte.schema.marks.bold) }))];
-	}
-	getToolbarItems(rte) {
-		return [this.contribution({
-			section: "text-style",
-			render: (ctx) => createMarkToggle(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.bold,
-				icon: "bold-line",
-				markType: rte.schema.marks.bold
-			})
-		}, 1)];
-	}
-};
-var RteBoldFeature = featureFacade(RteBoldFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/italic.ts
-var RteItalicFeatureImpl = class extends RteTextStyleFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteItalicFeature";
-		this.markName = "italic";
-	}
-	getSchema() {
-		return [this.contribution({ marks: { italic: marks.em } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution(keymap({ "Mod-i": toggleMark(rte.schema.marks.italic) }))];
-	}
-	getToolbarItems(rte) {
-		return [this.contribution({
-			section: "text-style",
-			render: (ctx) => createMarkToggle(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.italic,
-				icon: "italic-line",
-				markType: rte.schema.marks.italic
-			})
-		}, 2)];
-	}
-};
-var RteItalicFeature = featureFacade(RteItalicFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/underline.ts
-var RteUnderlineFeatureImpl = class extends RteTextStyleFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteUnderlineFeature";
-		this.markName = "underline";
-	}
-	getSchema() {
-		return [this.contribution({ marks: { underline: {
-			parseDOM: [{ tag: "u" }],
-			toDOM() {
-				return ["u", 0];
-			}
-		} } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution(keymap({ "Mod-u": toggleMark(rte.schema.marks.underline) }))];
-	}
-	getToolbarItems(rte) {
-		return [this.contribution({
-			section: "text-style",
-			render: (ctx) => createMarkToggle(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.underline,
-				icon: "underline-line",
-				markType: rte.schema.marks.underline
-			})
-		}, 3)];
-	}
-};
-var RteUnderlineFeature = featureFacade(RteUnderlineFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/strikethrough.ts
-var RteStrikethroughFeatureImpl = class extends RteTextStyleFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteStrikethroughFeature";
-		this.markName = "strikethrough";
-	}
-	getSchema() {
-		return [this.contribution({ marks: { strikethrough: {
-			parseDOM: [{ tag: "s" }, { tag: "del" }],
-			toDOM() {
-				return ["s", 0];
-			}
-		} } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution(keymap({
-			"Alt-Shift-5": toggleMark(rte.schema.marks.strikethrough),
-			"Cmd-Shift-X": toggleMark(rte.schema.marks.strikethrough)
-		}))];
-	}
-	getToolbarItems(rte) {
-		return [this.contribution({
-			section: "text-style",
-			render: (ctx) => createMarkToggle(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.strikethrough,
-				icon: "strikethrough-line",
-				markType: rte.schema.marks.strikethrough
-			})
-		}, 4)];
-	}
-};
-var RteStrikethroughFeature = featureFacade(RteStrikethroughFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/monospace.style.scss?inline
-var monospace_style_default = "tt{font:var(--vvd-typography-base-code);font-variant-ligatures:unset;font-feature-settings:unset;font-size:unset;font-weight:unset;line-height:unset}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/monospace.ts
-var RteMonospaceFeatureImpl = class extends RteTextStyleFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteMonospaceFeature";
-		this.markName = "monospace";
-	}
-	getStyles() {
-		return [this.contribution(monospace_style_default)];
-	}
-	getSchema() {
-		return [this.contribution({ marks: { monospace: {
-			parseDOM: [{ tag: "tt" }, { tag: "code" }],
-			toDOM() {
-				return ["tt", 0];
-			}
-		} } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution(keymap({ "Mod-M": toggleMark(rte.schema.marks.monospace) }))];
-	}
-	getToolbarItems(rte) {
-		return [this.contribution({
-			section: "text-style",
-			render: (ctx) => createMarkToggle(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.monospace,
-				icon: "monospace-line",
-				markType: rte.schema.marks.monospace
-			})
-		}, 5)];
-	}
-};
-var RteMonospaceFeature = featureFacade(RteMonospaceFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/text-color-picker.ts
-function markApplies(doc, ranges, type) {
-	for (let i = 0; i < ranges.length; i++) {
-		const { $from, $to } = ranges[i];
-		let can = $from.depth == 0 ? doc.type.allowsMarkType(type) : false;
-		doc.nodesBetween($from.pos, $to.pos, (node) => {
-			if (can) return false;
-			can = node.inlineContent && node.type.allowsMarkType(type);
-			return true;
-		});
-		if (can) return true;
-	}
-	return false;
-}
-var mixedColor = Symbol("mixedColor");
-var RteTextColorPickerFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteTextColorPicker";
-		if (config?.onBlocks) {
-			this.defaultColorForNode = {};
-			for (const block of config.onBlocks) this.defaultColorForNode[block.node] = block.defaultColor ?? null;
-		}
-	}
-	getTextblockMarks() {
-		if (this.config?.onBlocks) return this.config.onBlocks.map((block) => this.contribution({
-			markName: "textColor",
-			onNodeName: block.node
-		}));
-		return [this.contribution({ markName: "textColor" })];
-	}
-	getSchema() {
-		return [this.contribution({ marks: { textColor: {
-			attrs: { color: { validate: "string" } },
-			parseDOM: [{
-				tag: "span[data-text-color]",
-				getAttrs: (dom) => {
-					return { color: dom.getAttribute("data-text-color") };
-				}
-			}, {
-				style: "color",
-				getAttrs: (value) => {
-					return { color: value };
-				}
-			}],
-			toDOM(node) {
-				const { color } = node.attrs;
-				return [
-					"span",
-					{
-						style: `color: ${escapeCssProperty(color)};`,
-						"data-text-color": color
-					},
-					0
-				];
-			},
-			inclusive: true
-		} } })];
-	}
-	getToolbarItems() {
-		return [this.contribution({
-			section: "text-style",
-			render: (ctx) => {
-				const tooltipButton = createButton(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.textColor,
-					disabled: () => !this.setColor("any")(ctx.view.state),
-					icon: "textcolor-line"
-				});
-				const button = tooltipButton.firstElementChild;
-				return createDiv(ctx, { children: [tooltipButton, createSingleSlot(ctx, {
-					name: "text-color-picker",
-					assignedProps: {
-						anchor: button,
-						value: () => this.getSelectionColor(ctx.view.state) || ""
-					},
-					assignedEvents: { change: (e) => {
-						const value = e.currentTarget.value;
-						this.setColor(value)(ctx.view.state, ctx.view.dispatch);
-					} }
-				})] });
-			}
-		}, 6)];
-	}
-	getSelectionColor(state) {
-		const { selection } = state;
-		const { textColor } = state.schema.marks;
-		const { from, to, $from, empty } = selection;
-		if (empty) {
-			const defaultColor = this.defaultColorForNode?.[$from.parent.type.name] ?? null;
-			return textColor.isInSet(state.storedMarks || $from.marks())?.attrs.color ?? defaultColor;
-		}
-		let selectionColor = null;
-		const observeColor = (observedColor) => {
-			if (selectionColor === null) selectionColor = observedColor ?? null;
-			else if (observedColor !== selectionColor) selectionColor = mixedColor;
-		};
-		state.doc.nodesBetween(from, to, (node, _pos, parent) => {
-			if (selectionColor === mixedColor) return false;
-			if (!node.isLeaf) {
-				if (node.type.allowsMarkType(textColor) && node.childCount === 0) observeColor(this.defaultColorForNode?.[node.type.name]);
-				return true;
-			}
-			observeColor(textColor.isInSet(node.marks)?.attrs.color ?? (parent && this.defaultColorForNode?.[parent.type.name]));
-			return true;
-		});
-		return selectionColor === mixedColor ? null : selectionColor;
-	}
-	setColor(color) {
-		return (state, dispatch) => {
-			const { textColor } = state.schema.marks;
-			const { from, to, empty, $from } = state.selection;
-			if (!markApplies(state.doc, state.selection.ranges, textColor)) return false;
-			const tr = state.tr;
-			if (empty) {
-				const newStoredMarks = (state.storedMarks || []).filter((m) => m.type !== textColor);
-				if (color !== this.defaultColorForNode?.[$from.parent.type.name]) newStoredMarks.push(textColor.create({ color }));
-				tr.setStoredMarks(newStoredMarks);
-			} else {
-				tr.addMark(from, to, textColor.create({ color }));
-				tr.doc.nodesBetween(from, to, (node, pos, parent) => {
-					if (!node.isInline) return;
-					const mark = textColor.isInSet(node.marks);
-					const defaultColor = this.defaultColorForNode?.[parent.type.name];
-					if (mark && mark.attrs.color === defaultColor) tr.step(new RemoveMarkStep(pos, pos + node.nodeSize, mark));
-				});
-			}
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-};
-var RteTextColorPickerFeature = featureFacade(RteTextColorPickerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/list.style.scss?inline
-var list_style_default = ".rich-text ul,.rich-text ol{padding-inline-start:1.5em}.rich-text li{list-style-position:inside}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/list.ts
-var atStartOfNode = ($cursor) => $cursor.parentOffset === 0;
-var isEmpty = (node) => node.nodeSize === 2;
-var listDepth = ($li) => $li.depth - 1;
-var outOfListDepth = ($li) => $li.depth - 2;
-var getLi = ($li) => $li.parent;
-var getList = ($li) => $li.node(listDepth($li));
-var isNested = ($li) => $li.depth > 2;
-var isFirstChild = ($pos, depth) => $pos.index(depth) === 0;
-var isLastChild = ($pos, depth) => $pos.index(depth) === $pos.node(depth).childCount - 1;
-var prevSibling = ($pos, depth) => {
-	const parent = $pos.node(depth);
-	const index = $pos.index(depth);
-	return parent.maybeChild(index - 1);
-};
-var nextSibling = ($pos, depth) => {
-	const parent = $pos.node(depth);
-	const index = $pos.index(depth);
-	return parent.maybeChild(index + 1);
-};
-var asTextSelection = (selection) => {
-	let { $from, $to } = selection;
-	if (selection instanceof AllSelection) {
-		const textSelection = TextSelection.between(selection.$from, selection.$to);
-		$from = textSelection.$from;
-		$to = textSelection.$to;
-	}
-	return {
-		$from,
-		$to
-	};
-};
-var getSharedAncestor = ($from, $to) => $from.sameParent($to) ? $from.node(-1) : $from.node($from.sharedDepth($to.pos));
-var cursorInListItem = (state) => {
-	const { $cursor } = state.selection;
-	if ($cursor?.parent.type === state.schema.nodes.listItem) return $cursor;
-	return null;
-};
-var allListItemsAreOfType = (state, $from, $to, type) => {
-	let currentListType;
-	let allLisAreOurType = true;
-	state.doc.nodesBetween($from.pos, $to.pos, (node) => {
-		if (node.type.isInGroup("list")) currentListType = node.type;
-		if (node.type === state.schema.nodes.listItem && currentListType !== type) allLisAreOurType = false;
-	});
-	return allLisAreOurType;
-};
-var lift = (rte, $li, tr) => {
-	if (isNested($li)) liftToOuterList($li, tr);
-	else liftOutOfList(rte, $li, tr);
-};
-var liftToOuterList = ($li, tr) => {
-	const liRange = new NodeRange($li.doc.resolve($li.before()), $li.doc.resolve($li.after()), $li.depth - 1);
-	tr.lift(liRange, $li.depth - 2);
-};
-var liftOutOfList = (rte, $li, tr) => {
-	const list = getList($li);
-	const listIndex = $li.index(outOfListDepth($li));
-	const defaultTextblock = defaultTextblockForMatch($li.node(outOfListDepth($li)).contentMatchAt(listIndex + 1));
-	const atStart = isFirstChild($li, listDepth($li));
-	const atEnd = isLastChild($li, listDepth($li));
-	tr.step(new ReplaceAroundStep($li.before() - (atStart ? 1 : 0), $li.after() + (atEnd ? 1 : 0), $li.start(), $li.end(), new Slice((atStart ? Fragment.empty : Fragment.from(list.copy(Fragment.empty))).append(Fragment.from(defaultTextblock.create(rte.textblockAttrs.extractFromNode(getLi($li))))).append(atEnd ? Fragment.empty : Fragment.from(list.copy(Fragment.empty))), atStart ? 0 : 1, atEnd ? 0 : 1), (atStart ? 0 : 1) + 1));
-};
-var sink = (rte, listType, $node, tr) => {
-	if ($node.parent.type === rte.schema.nodes.listItem) sinkLi(listType, $node, tr);
-	else sinkNode(rte, listType, $node, tr);
-};
-var sinkLi = (listType, $li, tr) => {
-	const canJoinWithPrev = prevSibling($li, listDepth($li))?.type === listType;
-	const canJoinWithNext = nextSibling($li, listDepth($li))?.type === listType;
-	const openStart = canJoinWithPrev ? 1 : 0;
-	const openEnd = canJoinWithNext ? 1 : 0;
-	tr.step(new ReplaceAroundStep($li.before() - (canJoinWithPrev ? 1 : 0), $li.after() + (canJoinWithNext ? 1 : 0), $li.before(), $li.after(), new Slice(Fragment.from(listType.create(null, [])), openStart, openEnd), 1 - openStart));
-};
-var sinkNode = (rte, listType, $node, tr) => {
-	tr.step(new ReplaceAroundStep($node.before(), $node.after(), $node.start(), $node.end(), new Slice(Fragment.from(listType.create(null, [rte.schema.nodes.listItem.create(rte.textblockAttrs.extractFromNode($node.parent))])), 0, 0), 2));
-};
-var RteListFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteListFeature";
-		if (!config.bulletList && !config.numberedList) throw new Error("RteListFeature requires at least one of bulletList or numberedList to be enabled");
-	}
-	getStyles() {
-		return [this.contribution(list_style_default)];
-	}
-	getSchema(textblockAttrs) {
-		return [this.contribution({ nodes: {
-			listItem: {
-				content: "inline*",
-				attrs: textblockAttrs.attrs,
-				defining: true,
-				parseDOM: [{
-					tag: "li",
-					getAttrs: (dom) => textblockAttrs.fromDOM(dom)
-				}],
-				toDOM(node) {
-					return [
-						"li",
-						...textblockAttrs.getDOMAttrs(node),
-						0
-					];
-				}
-			},
-			...this.config.bulletList ? { bulletList: {
-				group: "block list",
-				content: "(listItem | list)+",
-				parseDOM: [{ tag: "ul" }],
-				toDOM() {
-					return ["ul", 0];
-				}
-			} } : {},
-			...this.config.numberedList ? { numberedList: {
-				group: "block list",
-				content: "(listItem | list)+",
-				parseDOM: [{ tag: "ol" }],
-				toDOM() {
-					return ["ol", 0];
-				}
-			} } : {}
-		} })];
-	}
-	getPlugins(rte) {
-		this.rte = rte;
-		const tabCommand = (state, dispatch) => {
-			const $liCursor = cursorInListItem(state);
-			if ($liCursor && atStartOfNode($liCursor)) {
-				const tr = state.tr;
-				sinkLi(getList($liCursor).type, $liCursor, tr);
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			}
-			return false;
-		};
-		const shiftTabCommand = (state, dispatch) => {
-			const $liCursor = cursorInListItem(state);
-			if ($liCursor && atStartOfNode($liCursor) && isNested($liCursor)) {
-				const tr = state.tr;
-				liftToOuterList($liCursor, tr);
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			}
-			return false;
-		};
-		const enterCommand = (state, dispatch) => {
-			const $liCursor = cursorInListItem(state);
-			if ($liCursor && isEmpty(getLi($liCursor))) {
-				const tr = state.tr;
-				lift(this.rte, $liCursor, tr);
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			}
-			return false;
-		};
-		const backspaceCommand = (state, dispatch) => {
-			const $liCursor = cursorInListItem(state);
-			if ($liCursor && atStartOfNode($liCursor)) {
-				if (isFirstChild($liCursor, listDepth($liCursor)) && prevSibling($liCursor, outOfListDepth($liCursor))?.type === getList($liCursor).type) return false;
-				const tr = state.tr;
-				lift(this.rte, $liCursor, tr);
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			}
-			return false;
-		};
-		return [this.contribution(keymap({
-			Enter: enterCommand,
-			Backspace: backspaceCommand,
-			Tab: tabCommand,
-			"Shift-Tab": shiftTabCommand,
-			...this.config.bulletList ? { "Mod-Shift-8": this.toggleList(rte.schema.nodes.bulletList) } : {},
-			...this.config.numberedList ? { "Mod-Shift-7": this.toggleList(rte.schema.nodes.numberedList) } : {}
-		}), contributionPriority.high)];
-	}
-	getToolbarItems(rte) {
-		const toolbarItems = [];
-		if (this.config.bulletList) toolbarItems.push(this.contribution({
-			section: "textblock",
-			render: (ctx) => createButton(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.bulletList,
-				icon: "bullet-list-2-line",
-				active: () => this.isSelectionInList(rte.schema.nodes.bulletList, ctx.rte.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					this.toggleList(rte.schema.nodes.bulletList)(state, dispatch);
-				}
-			})
-		}, 1));
-		if (this.config.numberedList) toolbarItems.push(this.contribution({
-			section: "textblock",
-			render: (ctx) => createButton(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.numberedList,
-				icon: "list-numbered-line",
-				active: () => this.isSelectionInList(rte.schema.nodes.numberedList, ctx.rte.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					this.toggleList(rte.schema.nodes.numberedList)(state, dispatch);
-				}
-			})
-		}, 2));
-		return toolbarItems;
-	}
-	toggleList(type) {
-		return autoJoin((state, dispatch) => {
-			const { $from, $to } = asTextSelection(state.selection);
-			if (getSharedAncestor($from, $to).type.isInGroup("list")) if (allListItemsAreOfType(state, $from, $to, type)) {
-				const tr = state.tr;
-				state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
-					if (node.type === state.schema.nodes.listItem) {
-						const $li = tr.doc.resolve(tr.mapping.map(pos + 1));
-						lift(this.rte, $li, tr);
-					}
-				});
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			} else {
-				const tr = state.tr;
-				state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
-					if (node.type.isInGroup("list") && node.type !== type) tr.setNodeMarkup(pos, type, node.attrs);
-				});
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			}
-			else {
-				const tr = state.tr;
-				state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
-					if (!node.isTextblock) return;
-					const $node = tr.doc.resolve(tr.mapping.map(pos + 1));
-					sink(this.rte, type, $node, tr);
-				});
-				dispatch?.(tr.scrollIntoView());
-				return true;
-			}
-		}, (before, after) => before.type === type && after.type === type);
-	}
-	isSelectionInList(type, state) {
-		const { $from, $to } = asTextSelection(state.selection);
-		if (getSharedAncestor($from, $to).type.isInGroup("list")) return allListItemsAreOfType(state, $from, $to, type);
-		else return false;
-	}
-};
-var RteListFeature = featureFacade(RteListFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/alignment.ts
-var alignments = [
-	{
-		value: "left",
-		icon: "align-left-line",
-		label: "left"
-	},
-	{
-		value: "center",
-		icon: "align-center-line",
-		label: "center"
-	},
-	{
-		value: "right",
-		icon: "align-right-line",
-		label: "right"
-	}
-];
-var validTextAlign = (value) => alignments.find((a) => a.value === value)?.value ?? "left";
-var RteAlignmentFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteAlignmentFeature";
-	}
-	getTextblockAttrs() {
-		return [this.contribution({
-			name: "textAlign",
-			default: "left",
-			fromDOM(dom) {
-				return validTextAlign(dom.style.textAlign);
-			},
-			toStyles(node) {
-				return [`text-align: ${validTextAlign(node.attrs.textAlign)}`];
-			}
-		})];
-	}
-	getPlugins() {
-		return [this.contribution(keymap({
-			"Mod-L": this.setAlignment("left"),
-			"Mod-E": this.setAlignment("center"),
-			"Mod-R": this.setAlignment("right")
-		}))];
-	}
-	getToolbarItems() {
-		return [this.contribution({
-			section: "textblock",
-			render: (ctx) => createMenu(ctx, {
-				label: () => ctx.rte.getLocale().richTextEditor.alignment,
-				trigger: createButton(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.alignment,
-					icon: () => {
-						const currentAlign = this.getAlignmentFromSelection(ctx.view.state);
-						return alignments.find((a) => a.value === currentAlign)?.icon ?? "align-left-line";
-					}
-				}),
-				children: [createButtonGroup(ctx, {
-					slot: "header",
-					children: alignments.map((align, index) => createButton(ctx, {
-						icon: align.icon,
-						label: () => ctx.rte.getLocale().richTextEditor.alignments[align.label],
-						noTooltip: true,
-						variant: "toolbar-menu",
-						autofocus: () => {
-							const currentAlign = this.getAlignmentFromSelection(ctx.view.state);
-							if ((currentAlign === "mixed" || currentAlign === null) && index === 0) return true;
-							return align.value === currentAlign;
-						},
-						active: () => this.getAlignmentFromSelection(ctx.view.state) === align.value,
-						disabled: () => this.getAlignmentFromSelection(ctx.view.state) === null,
-						onClick: () => {
-							const { state, dispatch } = ctx.view;
-							this.setAlignment(align.value)(state, dispatch);
-						}
-					}))
-				})]
-			})
-		}, 3)];
-	}
-	getAlignmentFromSelection(state) {
-		const { selection } = state;
-		const { from, to } = selection;
-		let align = null;
-		state.doc.nodesBetween(from, to, (node) => {
-			if (align === "mixed") return;
-			if (node.type.isTextblock) {
-				if (!align) align = node.attrs.textAlign;
-				else if (align !== node.attrs.textAlign) align = "mixed";
-			}
-		});
-		return align;
-	}
-	setAlignment(align) {
-		return (state, dispatch) => {
-			const { tr, selection } = state;
-			const { from, to } = selection;
-			state.doc.nodesBetween(from, to, (node, pos) => {
-				if (node.type.isTextblock) tr.setNodeMarkup(pos, node.type, {
-					...node.attrs,
-					textAlign: align
-				});
-			});
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-};
-var RteAlignmentFeature = featureFacade(RteAlignmentFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/link.style.scss?inline
-var link_style_default = ".link-popover{flex-direction:column;gap:8px;inline-size:450px;padding:16px;display:flex}.link-popover-header{justify-content:space-between;align-items:center;display:flex}.link-popover-label{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.link-popover-content{flex-direction:column;gap:16px;display:flex}.link,.rich-text a[href],.link:visited,.rich-text a[href]:visited{color:var(--vvd-color-cta-600)}.link:hover,.rich-text a[href]:hover{color:var(--vvd-color-cta-500)}.link:active,.rich-text a[href]:active{color:var(--vvd-color-cta-400)}.link-action-bar{justify-content:end;gap:8px;display:flex}.link-toolbar-menu{flex-direction:column;gap:16px;inline-size:368px;padding:8px;display:flex}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/link.ts
-var linkPattern = "(?:https?://|www\\.)[^\\s<]+";
-function convertToLink(state, matchedText, start, end) {
-	if (state.doc.rangeHasMark(start, start + 1, state.schema.marks.link)) return null;
-	const link = matchedText.replace(/[.,;:!?) ]+$/, "");
-	const href = link.startsWith("www.") ? `https://${link}` : link;
-	const linkMark = state.schema.marks.link.create({ href });
-	const linkEnd = start + link.length;
-	const trailingChars = matchedText.slice(link.length);
-	const tr = state.tr.addMark(start, linkEnd, linkMark);
-	if (trailingChars) tr.replaceWith(linkEnd, end, state.schema.text(trailingChars));
-	return tr;
-}
-var RteLinkFeatureImpl = class extends RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteLinkFeature";
-		this.removeLink = (state, dispatch) => {
-			const tr = state.tr;
-			const existingLink = this.getCurrentLink(state);
-			tr.removeMark(existingLink.start, existingLink.end, state.schema.marks.link);
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-	getStyles() {
-		return [this.contribution(link_style_default)];
-	}
-	getSchema() {
-		return [this.contribution({ marks: { link: {
-			attrs: { href: { validate: "string" } },
-			inclusive: false,
-			parseDOM: [{
-				tag: "a[href]",
-				getAttrs(dom) {
-					return { href: dom.getAttribute("href") };
-				}
-			}],
-			toDOM(node) {
-				const { href } = node.attrs;
-				return [
-					"a",
-					{ href: sanitizeLinkHref(href) },
-					0
-				];
-			}
-		} } }, contributionPriority.high)];
-	}
-	getTextblockMarks() {
-		return [this.contribution({ markName: "link" })];
-	}
-	getInputRules() {
-		const linkRegex = new RegExp(`${linkPattern}$`);
-		return [this.contribution({
-			rule: new InputRule(new RegExp(`${linkPattern} $`), (state, match, start, end) => convertToLink(state, match[0], start, end)),
-			enterHandler: {
-				regex: linkRegex,
-				handler: (state, match, start, end) => convertToLink(state, match[0], start, end)
-			}
-		})];
-	}
-	getPlugins(rte) {
-		const insertLinkCommand = () => {
-			this.toolbarMenu.open = true;
-			return true;
-		};
-		let popup;
-		return [this.contribution(new Plugin({
-			props: { decorations: (state) => {
-				const link = this.getCurrentLink(state);
-				if (link) {
-					const deco = Decoration.inline(link.start, link.end, { id: "current-link" });
-					return DecorationSet.create(state.doc, [deco]);
-				}
-				return null;
-			} },
-			view: (view) => {
-				const ctx = new UiCtx(view, rte, {
-					popupPlacement: "bottom",
-					shouldReturnFocusToEditor: true
-				});
-				popup = rte.createComponent(Popover);
-				popup.anchorId = "current-link";
-				const content = createDiv(ctx, {
-					className: "link-popover",
-					children: [createDiv(ctx, {
-						className: "link-popover-header",
-						children: [createDiv(ctx, {
-							className: "link-popover-label",
-							children: [createText(ctx, { text: () => this.getCurrentLink(ctx.view.state)?.text || "" })]
-						}), createButton(ctx, {
-							icon: "close-line",
-							label: () => ctx.rte.getLocale().richTextEditor.close,
-							noTooltip: true,
-							onClick: () => {
-								popup.dismiss();
-							}
-						})]
-					}), createDiv(ctx, {
-						className: "link-popover-content",
-						children: [createAnchor(ctx, {
-							className: "link",
-							href: () => this.getCurrentLink(ctx.view.state)?.href || "",
-							target: "_blank",
-							rel: "noopener",
-							children: [createText(ctx, { text: () => this.getCurrentLink(ctx.view.state)?.href || "" })]
-						}), createDiv(ctx, {
-							className: "link-action-bar",
-							children: [createButton(ctx, {
-								icon: "delete-line",
-								label: () => ctx.rte.getLocale().richTextEditor.delete,
-								connotation: "alert",
-								variant: "popover",
-								noTooltip: true,
-								onClick: () => {
-									const { state, dispatch } = ctx.view;
-									this.removeLink(state, dispatch);
-								}
-							}), createButton(ctx, {
-								icon: "edit-line",
-								label: () => ctx.rte.getLocale().richTextEditor.edit,
-								variant: "popover",
-								noTooltip: true,
-								onClick: () => {
-									this.toolbarMenu.open = true;
-									popup.requestOpenState(false);
-									return true;
-								}
-							})]
-						})]
-					})]
-				});
-				popup.appendChild(content);
-				view.dom.getRootNode().querySelector(".popovers").appendChild(popup);
-				return {
-					update: (view) => {
-						const state = view.state;
-						ctx.updateBindings();
-						const link = this.getCurrentLink(state);
-						popup.requestOpenState(Boolean(link));
-					},
-					destroy: () => {
-						popup.remove();
-					}
-				};
-			}
-		})), this.contribution(keymap({
-			Escape: (state) => {
-				if (this.getCurrentLink(state)) {
-					popup?.dismiss();
-					return true;
-				}
-				return false;
-			},
-			"Mod-k": insertLinkCommand
-		}))];
-	}
-	getToolbarItems(rte) {
-		const getSelectionText = (state) => {
-			const { from, to } = state.selection;
-			if (from === to) return "";
-			return state.doc.textBetween(from, to, " ");
-		};
-		const isValidUrl = (url) => {
-			try {
-				new URL(url);
-				return true;
-			} catch {
-				return false;
-			}
-		};
-		return [this.contribution({
-			section: "insert",
-			render: (ctx) => {
-				const textField = createTextField(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.linkText,
-					placeholder: () => ctx.rte.getLocale().richTextEditor.linkTextPlaceholder,
-					slot: "header",
-					autofocus: true,
-					value: () => this.getCurrentLink(ctx.view.state)?.text || getSelectionText(ctx.view.state) || "",
-					onInput: () => {
-						updateValidation();
-					}
-				});
-				const urlField = createTextField(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.linkUrl,
-					type: "url",
-					placeholder: () => ctx.rte.getLocale().richTextEditor.linkUrlPlaceholder,
-					helperText: () => ctx.rte.getLocale().richTextEditor.linkUrlHelperText,
-					slot: "header",
-					value: () => this.getCurrentLink(ctx.view.state)?.href || "",
-					onInput: () => {
-						updateValidation();
-					}
-				});
-				const applyButton = createButton(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.apply,
-					variant: "popover-primary",
-					disabled: () => {
-						const link = this.getCurrentLink(ctx.view.state);
-						return !(link && link.text.length && isValidUrl(link.href));
-					},
-					onClick: () => {
-						const { state, dispatch } = ctx.view;
-						this.insertLink(rte, urlField.value, textField.value)(state, dispatch);
-						this.toolbarMenu.open = false;
-					}
-				});
-				const updateValidation = () => {
-					applyButton.querySelector("[data-vvd-component=\"button\"]").disabled = !(textField.value.length && isValidUrl(urlField.value));
-				};
-				const menu = createMenu(ctx, {
-					label: () => ctx.rte.getLocale().richTextEditor.hyperlink,
-					trigger: createButton(ctx, {
-						label: () => ctx.rte.getLocale().richTextEditor.hyperlink,
-						icon: "link-line"
-					}),
-					children: [createDiv(ctx, {
-						className: "link-toolbar-menu",
-						slot: "header",
-						children: [
-							textField,
-							urlField,
-							createDiv(ctx, {
-								className: "link-action-bar",
-								slot: "header",
-								children: [createButton(ctx, {
-									label: () => ctx.rte.getLocale().richTextEditor.cancel,
-									variant: "popover",
-									onClick: () => {
-										this.toolbarMenu.open = false;
-									}
-								}), applyButton]
-							})
-						]
-					})]
-				});
-				this.toolbarMenu = menu.lastElementChild;
-				return menu;
-			}
-		}, 1)];
-	}
-	getCurrentLink(state) {
-		const selection = state.selection;
-		if (!(selection instanceof TextSelection)) return null;
-		const linkMark = state.schema.marks.link;
-		const { $from, $to } = selection;
-		const selectionStartMarks = state.selection.empty ? $from.marks() : $from.nodeAfter?.marks ?? [];
-		const targetHref = linkMark.isInSet(selectionStartMarks)?.attrs.href;
-		if (!targetHref) return null;
-		const isTargetLink = (node) => linkMark.isInSet(node.marks)?.attrs.href === targetHref;
-		let currentRun = null;
-		const runs = [];
-		state.doc.nodesBetween($from.start(), $to.end(), (node, pos) => {
-			if (!node.isText) return true;
-			const nodeEnd = pos + node.nodeSize;
-			if (isTargetLink(node)) if (!currentRun) {
-				currentRun = {
-					start: pos,
-					end: nodeEnd
-				};
-				runs.push(currentRun);
-			} else currentRun.end = nodeEnd;
-			else currentRun = null;
-			return false;
-		});
-		const selectionRun = runs.find((run) => run.start <= selection.from && run.end >= selection.to);
-		if (!selectionRun) return null;
-		return {
-			text: state.doc.textBetween(selectionRun.start, selectionRun.end, " "),
-			href: targetHref,
-			start: selectionRun.start,
-			end: selectionRun.end
-		};
-	}
-	insertLink(rte, href, text) {
-		return (state, dispatch) => {
-			let { from, to } = state.selection;
-			const tr = state.tr;
-			const existingLink = this.getCurrentLink(state);
-			if (existingLink) {
-				from = existingLink.start;
-				to = existingLink.end;
-			}
-			tr.insertText(text, from, to);
-			tr.addMark(from, from + text.length, rte.schema.marks.link.create({ href }));
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-};
-var RteLinkFeature = featureFacade(RteLinkFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/inline-image.style.scss?inline
-var inline_image_style_default = ".inline-image-wrapper{vertical-align:text-bottom;display:inline-block}.inline-image{block-size:auto;display:block}.inline-image-popover{align-items:center;gap:4px;padding:8px;display:flex}.inline-image-placeholder{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);font-feature-settings:normal;font-variant-ligatures:normal;overflow-wrap:normal;pointer-events:none;white-space:normal}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/inline-image.ts
-var isGenerator$1 = (value) => value !== null && Boolean(value["next"]);
-var uniqueId = 1;
-var generateUniqueId = () => uniqueId++;
-var InlineImageView = class {
-	constructor(node, view, getPos, config) {
-		this.view = view;
-		this.getPos = getPos;
-		this.config = config;
-		this.content = null;
-		this.dom = document.createElement("div");
-		this.dom.className = "inline-image-wrapper";
-		this.imageUrl = node.attrs.imageUrl;
-		this.img = document.createElement("img");
-		this.initializeImg(node);
-		const resolveResult = this.config.resolveUrl ? this.config.resolveUrl(this.imageUrl) : this.imageUrl;
-		const initialResolvedUrl = isGenerator$1(resolveResult) ? null : resolveResult;
-		this.handleResolvedUrl(initialResolvedUrl);
-		if (isGenerator$1(resolveResult)) this.handleResolvedUrlGenerator(resolveResult);
-	}
-	setContent(content, { onDestroy, allowPopover } = {}) {
-		this.content?.remove();
-		this.onContentDestroy?.();
-		this.content = content;
-		if (content) {
-			this.onContentDestroy = onDestroy;
-			this.dom.appendChild(content);
-		}
-		Popover.setBlockPopover(this.dom, !allowPopover);
-	}
-	async handleResolvedUrlGenerator(generator) {
-		const iterator = generator[Symbol.asyncIterator]();
-		let result;
-		do {
-			result = await iterator.next();
-			this.handleResolvedUrl(result.value);
-		} while (!result.done);
-	}
-	handleResolvedUrl(result) {
-		if (typeof result === "string") this.renderImg(result);
-		else if (result?.type === "placeholder") {
-			const slotName = `inline-image-placeholder-${generateUniqueId()}`;
-			const slot = document.createElement("slot");
-			slot.className = "inline-image-placeholder";
-			slot.name = slotName;
-			const onDestroy = result.create?.(slotName);
-			const host = this.view.dom.getRootNode().host;
-			dispatchSlottableRequest(host, "inline-image-placeholder", slotName, { url: this.imageUrl });
-			this.setContent(slot, { onDestroy: () => {
-				dispatchSlottableRequest(host, "inline-image-placeholder", slotName, removeSymbol);
-				onDestroy?.();
-			} });
-		} else this.setContent(null);
-	}
-	initializeImg(node) {
-		this.img.className = "inline-image";
-		this.update(node);
-		this.img.addEventListener("load", () => {
-			const pos = this.getPos();
-			if (pos) {
-				const { state, dispatch } = this.view;
-				const currentNode = state.doc.nodeAt(pos);
-				if (!currentNode || currentNode.attrs.naturalWidth === this.img.naturalWidth && currentNode.attrs.naturalHeight === this.img.naturalHeight) return;
-				const tr = state.tr;
-				tr.setNodeAttribute(pos, "naturalWidth", this.img.naturalWidth);
-				tr.setNodeAttribute(pos, "naturalHeight", this.img.naturalHeight);
-				tr.setMeta("addToHistory", false);
-				dispatch(tr);
-			}
-		});
-	}
-	renderImg(src) {
-		this.img.src = sanitizeImageSrc(src);
-		this.setContent(this.img, { allowPopover: true });
-	}
-	update(node) {
-		this.img.alt = node.attrs.alt;
-		this.img.width = node.attrs.naturalWidth;
-		this.img.height = node.attrs.naturalHeight;
-		this.img.style.maxWidth = node.attrs.size;
-		return true;
-	}
-	destroy() {
-		this.setContent(null);
-	}
-};
-var RteInlineImageFeatureImpl = class extends RteFeatureImpl {
-	constructor(config = {}) {
-		super();
-		this.config = config;
-		this.name = "RteInlineImageFeature";
-	}
-	getStyles() {
-		return [this.contribution(inline_image_style_default)];
-	}
-	getSchema() {
-		return [this.contribution({ nodes: { inlineImage: {
-			inline: true,
-			group: "inline",
-			selectable: true,
-			atom: true,
-			attrs: {
-				imageUrl: { validate: "string" },
-				alt: {
-					validate: "string",
-					default: ""
-				},
-				size: {
-					validate: "string|null",
-					default: null
-				},
-				naturalWidth: {
-					validate: "number|null",
-					default: null
-				},
-				naturalHeight: {
-					validate: "number|null",
-					default: null
-				}
-			},
-			parseDOM: [{
-				tag: "img[src],img[data-src]",
-				getAttrs: (dom) => {
-					const parseDimension = (dim) => {
-						const value = parseInt(dim ?? "", 10);
-						return isNaN(value) ? null : value;
-					};
-					const srcAttr = dom.getAttribute("data-src") ?? dom.getAttribute("src");
-					const imageUrl = this.config.parseUrlFromHtml ? this.config.parseUrlFromHtml(srcAttr) : srcAttr;
-					if (imageUrl === null) return false;
-					return {
-						imageUrl,
-						alt: dom.getAttribute("alt") || "",
-						size: dom.style.maxWidth || null,
-						naturalWidth: parseDimension(dom.getAttribute("width")),
-						naturalHeight: parseDimension(dom.getAttribute("height"))
-					};
-				}
-			}],
-			toDOM: (node) => {
-				const { imageUrl, alt, size, naturalWidth, naturalHeight } = node.attrs;
-				const resolvedUrl = this.config.serializeUrlToHtml ? this.config.serializeUrlToHtml(imageUrl) : imageUrl;
-				if (resolvedUrl === null) return document.createTextNode("");
-				const attrs = {
-					src: sanitizeImageSrc(resolvedUrl),
-					"data-src": resolvedUrl,
-					alt
-				};
-				if (size) attrs.style = `max-width: ${escapeCssProperty(size)}; height: auto;`;
-				if (naturalWidth) attrs.width = naturalWidth;
-				if (naturalHeight) attrs.height = naturalHeight;
-				return ["img", attrs];
-			}
-		} } })];
-	}
-	getPlugins(rte) {
-		let popover;
-		return [this.contribution(new Plugin({
-			props: { nodeViews: { inlineImage: (node, view, getPos) => new InlineImageView(node, view, getPos, this.config) } },
-			view: (view) => {
-				const ctx = new UiCtx(view, rte, {
-					popupPlacement: "bottom",
-					shouldReturnFocusToEditor: true
-				});
-				popover = rte.createComponent(Popover);
-				popover.kind = "imageOptions";
-				popover.offset = 4;
-				const content = createDiv(ctx, {
-					className: "inline-image-popover",
-					children: [
-						createButton(ctx, {
-							label: () => ctx.rte.getLocale().richTextEditor.imageSizes.small,
-							variant: "popover",
-							active: () => this.getSelectedImageSize(ctx.view.state) === "small",
-							onClick: () => {
-								this.setSelectedImageSize("small")(ctx.view.state, ctx.view.dispatch);
-							}
-						}),
-						createDivider(ctx),
-						createButton(ctx, {
-							label: () => ctx.rte.getLocale().richTextEditor.imageSizes.fit,
-							variant: "popover",
-							active: () => this.getSelectedImageSize(ctx.view.state) === "fit",
-							onClick: () => {
-								this.setSelectedImageSize("fit")(ctx.view.state, ctx.view.dispatch);
-							}
-						}),
-						createDivider(ctx),
-						createButton(ctx, {
-							label: () => ctx.rte.getLocale().richTextEditor.imageSizes.original,
-							variant: "popover",
-							active: () => this.getSelectedImageSize(ctx.view.state) === "original",
-							onClick: () => {
-								this.setSelectedImageSize("original")(ctx.view.state, ctx.view.dispatch);
-							}
-						})
-					]
-				});
-				popover.appendChild(content);
-				view.dom.getRootNode().querySelector(".popovers").appendChild(popover);
-				return {
-					update: (view) => {
-						ctx.updateBindings();
-						const selectedImage = this.getSelectedInlineImage(view.state);
-						if (selectedImage) {
-							popover.anchorEl = view.nodeDOM(selectedImage.pos);
-							popover.requestOpenState(true);
-						} else {
-							popover.anchorEl = void 0;
-							popover.requestOpenState(false);
-						}
-					},
-					destroy: () => {
-						popover.remove();
-					}
-				};
-			}
-		})), this.contribution(keymap({ Escape: (state) => {
-			if (this.getSelectedInlineImage(state)) {
-				popover?.dismiss();
-				return true;
-			}
-			return false;
-		} }))];
-	}
-	calculateSmallWidth(naturalWidth) {
-		return `${Math.min(300, naturalWidth / 2)}px`;
-	}
-	getSelectedInlineImage(state) {
-		const sel = state.selection;
-		if (sel instanceof NodeSelection && sel.node.type === state.schema.nodes.inlineImage) return {
-			pos: sel.from,
-			node: sel.node
-		};
-		return null;
-	}
-	setSelectedImageSize(size) {
-		return (state, dispatch) => {
-			const selectedImage = this.getSelectedInlineImage(state);
-			if (!selectedImage) return false;
-			const { naturalWidth } = selectedImage.node.attrs;
-			if (size === "small" && naturalWidth === null) return false;
-			const tr = state.tr;
-			tr.setNodeAttribute(selectedImage.pos, "size", size === "small" ? this.calculateSmallWidth(naturalWidth) : size === "fit" ? "100%" : null);
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-	getSelectedImageSize(state) {
-		const selectedImage = this.getSelectedInlineImage(state);
-		if (!selectedImage) return null;
-		const { size, naturalWidth } = selectedImage.node.attrs;
-		if (naturalWidth !== null && size === this.calculateSmallWidth(naturalWidth)) return "small";
-		if (size === "100%") return "fit";
-		if (size === null) return "original";
-		return null;
-	}
-};
-var RteInlineImageFeature = featureFacade(RteInlineImageFeatureImpl);
-//#endregion
-//#region src/shared/utils/promise.ts
-var resolvePromise = async (promise) => {
-	try {
-		return {
-			type: "ok",
-			result: await promise
-		};
-	} catch (e) {
-		return {
-			type: "error",
-			error: e
-		};
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/file-handler.ts
-var RteFileHandlerFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteFileHandlerFeature";
-	}
-	getPlugins(rte) {
-		const insertPointPlaceholderPlugin = new Plugin({
-			state: {
-				init() {
-					return DecorationSet.empty;
-				},
-				apply(tr, set) {
-					set = set.map(tr.mapping, tr.doc);
-					const action = tr.getMeta(insertPointPlaceholderPlugin);
-					if (action && action.add) {
-						const placeholder = document.createElement("placeholder");
-						const deco = Decoration.widget(action.add.pos, placeholder, {
-							id: action.add.id,
-							relaxedSide: true
-						});
-						set = set.add(tr.doc, [deco]);
-					} else if (action && action.remove) set = set.remove(set.find(void 0, void 0, (spec) => spec.id == action.remove.id));
-					return set;
-				}
-			},
-			props: { decorations(state) {
-				return this.getState(state);
-			} }
-		});
-		const createInsertPointPlaceholder = (tr, pos) => {
-			const id = generateRandomId();
-			tr.setMeta(insertPointPlaceholderPlugin, { add: {
-				id,
-				pos
-			} });
-			return {
-				getPos: (state) => {
-					const found = insertPointPlaceholderPlugin.getState(state).find(void 0, void 0, (spec) => spec.id == id);
-					return found.length ? found[0].from : null;
-				},
-				remove: (tr) => {
-					tr.setMeta(insertPointPlaceholderPlugin, { remove: { id } });
-				}
-			};
-		};
-		const insertFragment = (tr, fragment, insertPoint) => {
-			if (insertPoint.type === "selection") {
-				const parsed = Slice.fromJSON(rte.schema, { content: fragment });
-				tr.replaceSelection(parsed);
-			} else {
-				const parsed = Fragment.fromJSON(rte.schema, fragment);
-				tr.insert(insertPoint.pos, parsed);
-			}
-		};
-		const handleFiles = (files, insertPoint) => {
-			const result = this.config.handleFiles(files);
-			if (result === null) return;
-			else if (result instanceof Promise) handleAsyncResult(result, insertPoint);
-			else handleSyncResult(result, insertPoint);
-		};
-		const handleSyncResult = (result, insertPoint) => {
-			const tr = rte.state.tr;
-			insertFragment(tr, result, insertPoint);
-			rte.dispatchTransaction(tr);
-		};
-		const handleAsyncResult = async (promise, insertPoint) => {
-			const tr = rte.state.tr;
-			if (insertPoint.type === "selection" && !tr.selection.empty) tr.deleteSelection();
-			const placeholder = createInsertPointPlaceholder(tr, insertPoint.type === "selection" ? tr.selection.from : insertPoint.pos);
-			rte.dispatchTransaction(tr);
-			const resolved = await resolvePromise(promise);
-			const updatedPos = placeholder.getPos(rte.state);
-			const insertTr = rte.state.tr;
-			placeholder.remove(insertTr);
-			if (updatedPos !== null && resolved.type === "ok") insertFragment(insertTr, resolved.result, {
-				type: "pos",
-				pos: updatedPos
-			});
-			rte.dispatchTransaction(insertTr);
-			if (resolved.type === "error") console.error("Error in handleFiles handler:", resolved.error);
-		};
-		return [this.contribution(insertPointPlaceholderPlugin), this.contribution(new Plugin({ props: {
-			handlePaste: (_view, event) => {
-				const files = Array.from(event.clipboardData.files);
-				if (!files.length) return false;
-				handleFiles(files, { type: "selection" });
-				return true;
-			},
-			handleDrop: (view, event) => {
-				const files = Array.from(event.dataTransfer.files);
-				if (!files.length) return false;
-				let target = view.posAtCoords({
-					left: event.clientX,
-					top: event.clientY
-				}).pos;
-				if (view.dragging && view.dragging.slice) {
-					const point = dropPoint(view.state.doc, target, view.dragging.slice);
-					if (point != null) target = point;
-				}
-				handleFiles(files, {
-					type: "pos",
-					pos: target
-				});
-				return true;
-			}
-		} }))];
-	}
-};
-var RteFileHandlerFeature = featureFacade(RteFileHandlerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/drop-handler.ts
-var RteDropHandlerFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteDebugFeature";
-	}
-	getPlugins() {
-		const dragOverResults = /* @__PURE__ */ new WeakMap();
-		let lastResult = false;
-		const onDragOver = (event) => {
-			if (dragOverResults.get(event) !== void 0) return;
-			lastResult = this.config.onViewportDragOver?.(event) ?? false;
-		};
-		const onDrop = (event) => {
-			this.config.onViewportDrop?.(event);
-			this.config.onViewportDragFinish?.();
-		};
-		const onDragEnd = () => {
-			this.config.onViewportDragFinish?.();
-		};
-		let isEntering = false;
-		const onDragEnter = () => {
-			isEntering = true;
-			window.setTimeout(() => isEntering = false, 0);
-		};
-		const onDragLeave = () => {
-			if (isEntering) return;
-			this.config.onViewportDragFinish?.();
-		};
-		return [this.contribution(new Plugin({ view: (view) => {
-			const viewport = view.root.host.editorViewportElement;
-			viewport.addEventListener("dragover", onDragOver);
-			viewport.addEventListener("drop", onDrop);
-			viewport.addEventListener("dragend", onDragEnd);
-			viewport.addEventListener("dragenter", onDragEnter);
-			viewport.addEventListener("dragleave", onDragLeave);
-			return { destroy() {
-				viewport.removeEventListener("dragover", onDragOver);
-				viewport.removeEventListener("drop", onDrop);
-				viewport.removeEventListener("dragend", onDragEnd);
-				viewport.removeEventListener("dragenter", onDragEnter);
-				viewport.removeEventListener("dragleave", onDragLeave);
-			} };
-		} })), this.contribution(new Plugin({ props: { handleDOMEvents: {
-			dragover: (_view, event) => {
-				const result = this.config.onViewportDragOver?.(event) ?? false;
-				dragOverResults.set(event, result);
-				lastResult = result;
-				if (result) {
-					event.stopImmediatePropagation();
-					event.preventDefault();
-					return true;
-				}
-				return false;
-			},
-			drop: () => {
-				return lastResult;
-			}
-		} } }), contributionPriority.high)];
-	}
-};
-var RteDropHandlerFeature = featureFacade(RteDropHandlerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/toolbar-button.ts
-var RteToolbarButtonFeatureImpl = class extends RteFeatureImpl {
-	constructor(featureId, options) {
-		super();
-		this.featureId = featureId;
-		this.options = options;
-		this.name = `RteToolbarButtonFeature[${featureId}]`;
-	}
-	getToolbarItems() {
-		return [this.contribution({
-			section: "insert",
-			render: (ctx) => createButton(ctx, {
-				label: this.options.label,
-				icon: this.options.icon,
-				onClick: () => {
-					this.executeAction(ctx);
-				}
-			})
-		}, 2 + (this.options.order ?? 0) / Number.MAX_SAFE_INTEGER)];
-	}
-	executeAction(ctx) {
-		const { action } = this.options;
-		switch (action.type) {
-			case "insert-text": {
-				const { state, dispatch } = ctx.view;
-				const { from, to } = state.selection;
-				dispatch(state.tr.insertText(action.text, from, to));
-				break;
-			}
-		}
-	}
-};
-var RteToolbarButtonFeature = featureFacade(RteToolbarButtonFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/atom.ts
-var isGenerator = (value) => value !== null && typeof value === "object" && "next" in value;
-var AtomView = class {
-	constructor(node, config, atomName) {
-		this.dom = document.createElement("span");
-		this.dom.className = "atom-wrapper";
-		this.dom.setAttribute("part", `node--${atomName}`);
-		const result = config.resolveValue ? config.resolveValue(node.attrs.value) : node.attrs.value;
-		if (isGenerator(result)) {
-			this.dom.textContent = "";
-			this.handleResolvedGenerator(result);
-		} else this.dom.textContent = result ?? "";
-	}
-	async handleResolvedGenerator(generator) {
-		const iterator = generator[Symbol.asyncIterator]();
-		let result;
-		do {
-			result = await iterator.next();
-			this.dom.textContent = result.value ?? "";
-		} while (!result.done);
-	}
-};
-var RteAtomFeatureImpl = class extends RteFeatureImpl {
-	constructor(atomName, config = {}) {
-		super();
-		this.atomName = atomName;
-		this.config = config;
-		this.name = `RteAtomFeature[${atomName}]`;
-	}
-	getSchema() {
-		const atomSpec = {
-			inline: true,
-			group: "inline",
-			selectable: true,
-			atom: true,
-			attrs: { value: { validate: "string" } },
-			parseDOM: [{
-				tag: `span[data-atom-type="${this.atomName}"][data-value]`,
-				getAttrs: (dom) => ({ value: dom.getAttribute("data-value") })
-			}],
-			toDOM: (node) => {
-				const serializedValue = this.config.serializeValueToHtml ? this.config.serializeValueToHtml(node.attrs.value) : node.attrs.value;
-				if (serializedValue === null) return document.createDocumentFragment();
-				return [
-					"span",
-					{ part: `node--${this.atomName}` },
-					serializedValue
-				];
-			},
-			serializeToDOM: (node) => {
-				const serializedValue = this.config.serializeValueToHtml ? this.config.serializeValueToHtml(node.attrs.value) : node.attrs.value;
-				if (serializedValue === null) return document.createTextNode("");
-				return [
-					"span",
-					{
-						"data-atom-type": this.atomName,
-						"data-value": node.attrs.value
-					},
-					serializedValue
-				];
-			}
-		};
-		return [this.contribution({ nodes: { [this.atomName]: atomSpec } })];
-	}
-	getPlugins(_rte) {
-		return [this.contribution(new Plugin({ props: { nodeViews: { [this.atomName]: (node) => new AtomView(node, this.config, this.atomName) } } }))];
-	}
-};
-var RteAtomFeature = featureFacade(RteAtomFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/input-rule.ts
-var RteInputRuleFeatureImpl = class extends RteFeatureImpl {
-	constructor(featureId, options) {
-		super();
-		this.featureId = featureId;
-		this.options = options;
-		this.name = `RteInputRuleFeature[${featureId}]`;
-	}
-	getInputRules(rte) {
-		const basePattern = `(?:${this.options.pattern.source})`;
-		const handler = (state, match, start, end) => {
-			const fragment = this.options.handler(match);
-			if (!fragment) return null;
-			return state.tr.replaceWith(start, end, Fragment.fromJSON(rte.schema, fragment));
-		};
-		const spec = { rule: new InputRule(this.options.matchAfterWhitespace ? new RegExp(`${basePattern} $`) : new RegExp(`${basePattern}$`), handler) };
-		if (this.options.matchAfterWhitespace) spec.enterHandler = {
-			regex: new RegExp(`${basePattern}$`),
-			handler
-		};
-		return [this.contribution(spec)];
-	}
-};
-var RteInputRuleFeature = featureFacade(RteInputRuleFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/keyboard-shortcuts.ts
-function toCommand(handler, rteInstance) {
-	return (_state, _dispatch) => handler(rteInstance);
-}
-var RteKeyboardShortcutsFeatureImpl = class extends RteFeatureImpl {
-	constructor(featureId, options) {
-		super();
-		this.featureId = featureId;
-		this.options = options;
-		this.name = `RteKeyboardShortcutsFeature[${featureId}]`;
-	}
-	getPlugins(rte) {
-		const bindings = {};
-		for (const [key, handler] of Object.entries(this.options.shortcuts)) bindings[key] = toCommand(handler, rte.facade);
-		return [this.contribution(keymap(bindings), contributionPriority.high)];
-	}
-};
-var RteKeyboardShortcutsFeature = featureFacade(RteKeyboardShortcutsFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/suggest.style.scss?inline
-var suggest_style_default = ".suggest-popover{flex-direction:column;gap:2px;max-block-size:408px;min-inline-size:128px;max-inline-size:248px;padding:4px;display:flex}.suggest-loading-widget{vertical-align:middle;white-space:normal;align-items:center;margin-inline-start:2px;display:inline-flex}.suggest-empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}.suggest-item--visible-focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}";
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/suggest.ts
-var isPopoverOpen = (state) => Boolean(state?.suggestions && !state.dismissed);
-var popoverShowsResults = (state) => isPopoverOpen(state) && state.suggestions.items.length > 0;
-function findMatch(state, regex) {
-	const { $cursor } = state.selection;
-	if (!$cursor) return null;
-	const textBefore = textBeforeCursor($cursor);
-	const match = regex.exec(textBefore);
-	if (!match) return null;
-	const blockStart = $cursor.pos - $cursor.parentOffset;
-	return {
-		text: match[0],
-		groups: [...match],
-		start: blockStart + match.index,
-		end: blockStart + match.index + match[0].length
-	};
-}
-var replaceMatch = (view, match, fragment) => {
-	const { state } = view;
-	view.dispatch(closeHistory(state.tr));
-	const tr = view.state.tr;
-	tr.replaceWith(match.start, match.end, Fragment.fromJSON(view.state.schema, fragment));
-	const newPos = tr.mapping.map(match.end);
-	tr.setSelection(TextSelection.create(tr.doc, newPos));
-	view.dispatch(tr.scrollIntoView());
-};
-var RteSuggestFeatureImpl = class extends RteFeatureImpl {
-	selectSuggestion(view, suggestState, suggestion) {
-		const fragment = this.options.select(suggestion);
-		replaceMatch(view, suggestState.match, fragment);
-		view.focus();
-	}
-	async startLoadingSuggestions(match, dispatch) {
-		const gen = ++this.loadGeneration;
-		const suggestions = await this.options.load(match);
-		if (gen !== this.loadGeneration) return;
-		dispatch({
-			type: "load",
-			generation: gen,
-			suggestions
-		});
-	}
-	constructor(featureId, options) {
-		super();
-		this.featureId = featureId;
-		this.options = options;
-		this.pluginKey = new PluginKey("suggest");
-		this.loadGeneration = 0;
-		this.name = `RteSuggestFeature[${featureId}]`;
-	}
-	getStyles() {
-		return [this.contribution(suggest_style_default)];
-	}
-	getPlugins(rte) {
-		const createSuggestActionTr = (action) => rte.state.tr.setMeta(this.pluginKey, action);
-		const dispatchSuggestAction = (action) => rte.dispatchTransaction(createSuggestActionTr(action));
-		const suggestPlugin = new Plugin({
-			key: this.pluginKey,
-			state: {
-				init: () => null,
-				apply: (tr, prevState, _prevEditor, newEditor) => {
-					const match = findMatch(newEditor, this.options.pattern);
-					if (!match) return null;
-					if (!prevState && !tr.docChanged) return null;
-					if (prevState?.dismissed) return prevState;
-					const loadingDecoration = (isLoading) => {
-						if (!isLoading) return DecorationSet.empty;
-						return Boolean(prevState?.loadingDecoration.find().length ?? 0) ? prevState.loadingDecoration.map(tr.mapping, tr.doc) : DecorationSet.create(tr.doc, [Decoration.widget(match.end, () => {
-							const wrapper = document.createElement("span");
-							wrapper.className = "suggest-loading-widget";
-							const spinner = rte.createComponent(ProgressRing);
-							spinner.size = -6;
-							wrapper.appendChild(spinner);
-							return wrapper;
-						}, {
-							ignoreSelection: true,
-							side: 1
-						})]);
-					};
-					const action = tr.getMeta(this.pluginKey);
-					if (prevState && action) switch (action.type) {
-						case "load": return {
-							...prevState,
-							suggestions: {
-								generation: action.generation,
-								items: action.suggestions,
-								selectedIndex: 0,
-								visibleFocus: false
-							},
-							loadingDecoration: loadingDecoration(false)
-						};
-						case "navigate": {
-							/* v8 ignore next 3 -- defensive: navigate is only dispatched after results are loaded @preserve */
-							if (!prevState.suggestions?.items.length) return prevState;
-							if (!prevState.suggestions.visibleFocus) return {
-								...prevState,
-								suggestions: {
-									...prevState.suggestions,
-									visibleFocus: true
-								}
-							};
-							const newIndex = Math.max(0, Math.min(prevState.suggestions.items.length - 1, prevState.suggestions.selectedIndex + (action.action === "up" ? -1 : 1)));
-							return {
-								...prevState,
-								suggestions: {
-									...prevState.suggestions,
-									selectedIndex: newIndex
-								}
-							};
-						}
-						case "dismiss": return {
-							...prevState,
-							dismissed: true,
-							loadingDecoration: DecorationSet.empty
-						};
-					}
-					if (!prevState) {
-						this.startLoadingSuggestions(match.groups, dispatchSuggestAction);
-						return {
-							match,
-							loadingDecoration: loadingDecoration(true)
-						};
-					}
-					const matchChanged = match.groups[0] !== prevState.match.groups[0];
-					if (matchChanged) this.startLoadingSuggestions(match.groups, dispatchSuggestAction);
-					return {
-						...prevState,
-						match,
-						suggestions: prevState.suggestions ? {
-							...prevState.suggestions,
-							visibleFocus: false
-						} : void 0,
-						loadingDecoration: loadingDecoration(matchChanged)
-					};
-				}
-			},
-			props: { decorations: (state) => {
-				const suggestState = this.pluginKey.getState(state);
-				if (!suggestState) return null;
-				return suggestState.loadingDecoration.add(state.doc, [Decoration.inline(suggestState.match.start, suggestState.match.end, { id: `suggest-anchor-${this.featureId}` })]);
-			} },
-			view: (view) => {
-				const ctx = new UiCtx(view, rte, {
-					popupPlacement: "bottom",
-					shouldReturnFocusToEditor: true
-				});
-				const popover = rte.createComponent(Popover);
-				popover.anchorId = `suggest-anchor-${this.featureId}`;
-				popover.kind = "autocomplete";
-				popover.offset = 4;
-				const content = createDiv(ctx, {
-					className: "suggest-popover",
-					children: []
-				});
-				popover.appendChild(content);
-				view.dom.getRootNode().querySelector(".popovers").appendChild(popover);
-				const emptySlotName = `${this.featureId}-suggestions-empty`;
-				const host = view.dom.getRootNode().host;
-				let emptySlotShowing = false;
-				const updateEmptySlotShowing = (showing) => {
-					if (!emptySlotShowing && showing) dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, { id: this.featureId });
-					if (emptySlotShowing && !showing) dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, removeSymbol);
-					emptySlotShowing = showing;
-				};
-				const updatePopoverContent = (suggestState) => {
-					content.innerHTML = "";
-					const suggestions = suggestState.suggestions;
-					const showEmptyState = suggestions.items.length === 0;
-					updateEmptySlotShowing(showEmptyState);
-					if (showEmptyState) {
-						const emptySlot = document.createElement("slot");
-						emptySlot.name = emptySlotName;
-						emptySlot.textContent = rte.getLocale().richTextEditor.suggestNoResults;
-						content.appendChild(createDiv(ctx, {
-							className: "suggest-empty-message",
-							children: [emptySlot]
-						}));
-						return;
-					}
-					for (const [index, suggestion] of suggestions.items.entries()) {
-						const item = rte.createComponent(ListboxOption);
-						item.text = suggestion.text;
-						item.textSecondary = suggestion.textSecondary;
-						if (index === suggestions.selectedIndex) {
-							item._highlighted = true;
-							item.dataset.highlighted = "true";
-							if (suggestions.visibleFocus) item.classList.add("suggest-item--visible-focus");
-							queueMicrotask(() => {
-								item.scrollIntoView({ block: "nearest" });
-							});
-						}
-						item.addEventListener("click", (e) => {
-							e.preventDefault();
-							e.stopPropagation();
-							this.selectSuggestion(view, suggestState, suggestion);
-						});
-						content.appendChild(item);
-					}
-				};
-				return {
-					update: (view) => {
-						ctx.updateBindings();
-						const suggestState = this.pluginKey.getState(view.state);
-						const showPopover = isPopoverOpen(suggestState);
-						popover.requestOpenState(showPopover);
-						if (showPopover) updatePopoverContent(suggestState);
-						else updateEmptySlotShowing(false);
-					},
-					destroy: () => {
-						updateEmptySlotShowing(false);
-						popover.remove();
-					}
-				};
-			}
-		});
-		return [this.contribution(suggestPlugin), this.contribution(keymap({
-			ArrowUp: (state, dispatch) => {
-				if (!popoverShowsResults(this.pluginKey.getState(state))) return false;
-				dispatch?.(createSuggestActionTr({
-					type: "navigate",
-					action: "up"
-				}));
-				return true;
-			},
-			ArrowDown: (state, dispatch) => {
-				if (!popoverShowsResults(this.pluginKey.getState(state))) return false;
-				dispatch?.(createSuggestActionTr({
-					type: "navigate",
-					action: "down"
-				}));
-				return true;
-			},
-			Enter: (state, _dispatch, view) => {
-				const suggestState = this.pluginKey.getState(state);
-				if (!popoverShowsResults(suggestState)) return false;
-				const suggestion = suggestState.suggestions.items[suggestState.suggestions.selectedIndex];
-				/* v8 ignore next 3 -- defensive: view is always passed by keymap @preserve */
-				if (view) this.selectSuggestion(view, suggestState, suggestion);
-				return true;
-			},
-			Escape: (state, dispatch) => {
-				if (!isPopoverOpen(this.pluginKey.getState(state))) return false;
-				dispatch?.(createSuggestActionTr({ type: "dismiss" }));
-				return true;
-			}
-		}), contributionPriority.high)];
-	}
-};
-var RteSuggestFeature = featureFacade(RteSuggestFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/character-count.ts
-var countCharacters = (doc) => doc.textBetween(0, doc.content.size, void 0, " ").length;
-var RteCharacterCountFeatureImpl = class extends RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteCharacterCountFeature";
-	}
-	getPlugins() {
-		const limit = this.config?.limit;
-		if (limit === void 0) return [];
-		return [this.contribution(new Plugin({ filterTransaction: (transaction, state) => {
-			if (!transaction.docChanged) return true;
-			const oldSize = countCharacters(state.doc);
-			const newSize = countCharacters(transaction.doc);
-			if (newSize <= limit) return true;
-			if (oldSize > limit) return newSize <= oldSize;
-			if (!transaction.getMeta("paste")) return false;
-			const pos = transaction.selection.$head.pos;
-			const from = pos - (newSize - limit);
-			const to = pos;
-			transaction.deleteRange(from, to);
-			return countCharacters(transaction.doc) <= limit;
-		} }))];
-	}
-	getPublicInterface(rte) {
-		const limit = this.config?.limit;
-		return {
-			get characters() {
-				return countCharacters(rte.state.doc);
-			},
-			get limit() {
-				return limit;
-			}
-		};
+	#unregisterThumbListeners() {
+		for (const thumb of ["start", "end"]) {
+			this.#thumbs[thumb].removeEventListener("keydown", this.#onThumbKeydown);
+			this.#thumbs[thumb].removeEventListener("mousedown", this.#onThumbMousedown);
+			this.#thumbs[thumb].removeEventListener("touchstart", this.#onThumbMousedown);
+			this.#thumbs[thumb].removeEventListener("mouseover", this.#onMouseOver);
+			this.#thumbs[thumb].removeEventListener("mouseout", this.#onMouseOut);
+			this.#thumbs[thumb].removeEventListener("focus", this.#onThumbFocus);
+			this.#thumbs[thumb].removeEventListener("blur", this.#onThumbBlur);
+		}
 	}
+	/** @internal */
+	_onMouseDown(e) {
+		if (this.disabled || this._draggingThumb) return;
+		const value = this.#calculateValueFromMouseEvent(e);
+		const startDistance = Math.abs(value - Number(this.start));
+		const endDistance = Math.abs(value - Number(this.end));
+		const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
+		this.#updateValues({ [thumb]: `${this.#roundToNearestStep(thumb, value)}` });
+		this._draggingThumb = thumb;
+		this.#focusThumbNonVisibly(this.#thumbs[thumb]);
+		this.#registerDragHandlers();
+	}
+	#onThumbFocus;
+	#onThumbBlur;
+	#onVisibilityChange;
+	#onMouseOver;
+	#onMouseOut;
+	#onThumbMousedown;
+	#onThumbKeydown;
+	#registerDragHandlers() {
+		window.addEventListener("mousemove", this.#onDragMove, { passive: true });
+		window.addEventListener("touchmove", this.#onDragMove, { passive: true });
+		window.addEventListener("mouseup", this.#onDragEnd);
+		window.addEventListener("touchend", this.#onDragEnd);
+		window.document.addEventListener("mouseleave", this.#onDragEnd);
+	}
+	#unregisterDragListeners() {
+		window.removeEventListener("mouseup", this.#onDragEnd);
+		window.document.removeEventListener("mouseleave", this.#onDragEnd);
+		window.removeEventListener("mousemove", this.#onDragMove);
+		window.removeEventListener("touchmove", this.#onDragMove);
+		window.removeEventListener("touchend", this.#onDragEnd);
+	}
+	#onDragMove;
+	#onDragEnd;
+};
+__decorate([observable], RangeSlider.prototype, "start", void 0);
+__decorate([attr({
+	mode: "fromView",
+	attribute: "start"
+})], RangeSlider.prototype, "initialStart", void 0);
+__decorate([attr({ attribute: "current-start" })], RangeSlider.prototype, "currentStart", void 0);
+__decorate([observable], RangeSlider.prototype, "end", void 0);
+__decorate([attr({
+	mode: "fromView",
+	attribute: "end"
+})], RangeSlider.prototype, "initialEnd", void 0);
+__decorate([attr({ attribute: "current-end" })], RangeSlider.prototype, "currentEnd", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], RangeSlider.prototype, "min", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], RangeSlider.prototype, "max", void 0);
+__decorate([attr({ converter: defaultToOneConverter })], RangeSlider.prototype, "step", void 0);
+__decorate([attr], RangeSlider.prototype, "orientation", void 0);
+__decorate([attr({ attribute: "aria-start-label" })], RangeSlider.prototype, "ariaStartLabel", void 0);
+__decorate([attr({ attribute: "aria-end-label" })], RangeSlider.prototype, "ariaEndLabel", void 0);
+__decorate([attr({ mode: "boolean" })], RangeSlider.prototype, "markers", void 0);
+__decorate([attr], RangeSlider.prototype, "connotation", void 0);
+__decorate([attr({ mode: "boolean" })], RangeSlider.prototype, "pin", void 0);
+__decorate([observable], RangeSlider.prototype, "valueTextFormatter", void 0);
+__decorate([observable], RangeSlider.prototype, "_draggingThumb", void 0);
+__decorate([observable], RangeSlider.prototype, "_visiblyFocusedThumb", void 0);
+__decorate([observable], RangeSlider.prototype, "_hoveredThumb", void 0);
+__decorate([observable], RangeSlider.prototype, "_startThumbCss", void 0);
+__decorate([observable], RangeSlider.prototype, "_endThumbCss", void 0);
+__decorate([observable], RangeSlider.prototype, "_selectedRangeCss", void 0);
+//#endregion
+//#region src/lib/range-slider/range-slider.template.ts
+var getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames("thumb-container", ["focus-visible", _visiblyFocusedThumb === thumb]);
+var RangeSliderTemplate = (context) => {
+	const popupTag = context.tagFor(Popup);
+	return html` <template
+		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
+	>
+		<div
+			class="${(x) => classNames("control", ["disabled", x.disabled], [`connotation-${x.connotation}`, Boolean(x.connotation)])} ${(x) => x.orientation}"
+		>
+			<div class="positioning-region">
+				<div ${ref("_trackEl")} class="track">
+					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
+					${when((x) => x.markers, html`${(x) => getMarkersTemplate(x.orientation === Orientation.horizontal, Math.floor((x.max - x.min) / x.step))}`)}
+				</div>
+				<div
+					id="start-thumb"
+					${ref("_startThumbEl")}
+					class="${getThumbClassesFor("start")}"
+					style="${(x) => x._startThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
+					aria-valuenow="${(x) => x.start}"
+					aria-valuemin="${(x) => x.min}"
+					aria-valuemax="${(x) => x.end}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				${when((x) => x.pin, html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._startThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("start")}
+					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
+				</${popupTag}>`)}
+				<div
+					id="end-thumb"
+					${ref("_endThumbEl")}
+					class="${getThumbClassesFor("end")}"
+					style="${(x) => x._endThumbCss}"
+					role="slider"
+					tabindex="${(x) => x.disabled ? null : 0}"
+					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
+					aria-valuenow="${(x) => x.end}"
+					aria-valuemin="${(x) => x.start}"
+					aria-valuemax="${(x) => x.max}"
+					aria-disabled="${(x) => x.disabled}"
+					aria-orientation="${(x) => x.orientation}"
+				></div>
+				${when((x) => x.pin, html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._endThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("end")}
+					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
+				</${popupTag}>`)}
+			</div>
+		</div>
+	</template>`;
 };
-var RteCharacterCountFeature = featureFacade(RteCharacterCountFeatureImpl);
 //#endregion
-//#region src/lib/rich-text-editor/definition.ts
-var richTextEditorDefinition = defineVividComponent("rich-text-editor", RichTextEditor, RichTextEditorTemplate, [
-	dividerDefinition,
-	selectDefinition,
-	listboxOptionDefinition,
-	buttonDefinition,
-	tooltipDefinition,
-	menuDefinition,
-	menuItemDefinition,
-	textFieldDefinition,
-	popoverDefinition,
-	progressRingDefinition
-], {
-	styles: rich_text_editor_default,
+//#region src/lib/range-slider/definition.ts
+/** @internal */
+var rangeSliderDefinition = defineVividComponent("range-slider", RangeSlider, RangeSliderTemplate, [popupDefinition], {
+	styles: range_slider_default,
 	shadowOptions: { delegatesFocus: true }
 });
 /**
-* Registers the rich-text-editor element with the design system.
+* Registers the range-slider element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerRichTextEditor = createRegisterFunction(richTextEditorDefinition);
+var registerRangeSlider = createRegisterFunction(rangeSliderDefinition);
 //#endregion
-export { RichTextEditor as A, RtePlaceholderFeature as C, RteConfig as D, RteBase as E, RteHtmlSerializer as O, RteHardBreakFeature as S, RteTextBlockPickerFeature as T, RteStrikethroughFeature as _, RteKeyboardShortcutsFeature as a, RteBoldFeature as b, RteToolbarButtonFeature as c, RteInlineImageFeature as d, RteLinkFeature as f, RteMonospaceFeature as g, RteTextColorPickerFeature as h, RteSuggestFeature as i, RteHtmlParser as k, RteDropHandlerFeature as l, RteListFeature as m, richTextEditorDefinition as n, RteInputRuleFeature as o, RteAlignmentFeature as p, RteCharacterCountFeature as r, RteAtomFeature as s, registerRichTextEditor as t, RteFileHandlerFeature as u, RteUnderlineFeature as v, RteToolbarFeature as w, RteFontSizePickerFeature as x, RteItalicFeature as y };
+export { registerRangeSlider as n, RangeSlider as r, rangeSliderDefinition as t };