@vonage/vivid 5.24.0 → 5.25.0

package/unbundled/definition61.cjs

@@ -1,3795 +1,499 @@
-const require_chunk = require("./chunk.cjs");
+require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_definition = require("./definition5.cjs");
+const require_form_associated = require("./form-associated.cjs");
 const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition6.cjs");
-const require_definition$2 = require("./definition9.cjs");
-const require_definition$3 = require("./definition11.cjs");
-const require_definition$4 = require("./definition12.cjs");
-const require_divider = require("./divider.cjs");
-const require_randomId = require("./randomId.cjs");
-const require_definition$5 = require("./definition26.cjs");
-const require_definition$6 = require("./definition27.cjs");
-const require_definition$7 = require("./definition29.cjs");
-const require_definition$8 = require("./definition36.cjs");
-const require_slottable_request = require("./slottable-request.cjs");
-const require_definition$9 = require("./definition62.cjs");
+const require_definition = require("./definition9.cjs");
+const require_key_codes = require("./key-codes.cjs");
+const require_slider_template = require("./slider.template.cjs");
+const require_form_element = require("./form-element.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let prosemirror_model = require("prosemirror-model");
-let prosemirror_state = require("prosemirror-state");
-let prosemirror_view = require("prosemirror-view");
-let prosemirror_keymap = require("prosemirror-keymap");
-let prosemirror_commands = require("prosemirror-commands");
-let prosemirror_dropcursor = require("prosemirror-dropcursor");
-let prosemirror_gapcursor = require("prosemirror-gapcursor");
-let dompurify = require("dompurify");
-dompurify = require_chunk.__toESM(dompurify, 1);
-let prosemirror_history = require("prosemirror-history");
-let prosemirror_inputrules = require("prosemirror-inputrules");
-let prosemirror_transform = require("prosemirror-transform");
-let prosemirror_schema_basic = require("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}";
+let _microsoft_fast_web_utilities = require("@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/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 require_localized.WithObservableLocale(require_vivid_element.VividElement) {
-	/** @internal */
-	instanceChanged(prevInstance) {
-		prevInstance?.[require_slottable_request.impl].destroyViewIfNeeded();
-		this._initViewIfNeeded();
-		prevInstance?.[require_slottable_request.impl].styles.removeStylesFrom(this.shadowRoot);
-		this.instance?.[require_slottable_request.impl].styles.addStylesTo(this.shadowRoot);
-	}
-	_initViewIfNeeded() {
-		const instance = this.instance?.[require_slottable_request.impl];
-		if (instance && this.$fastController.isConnected && !instance.view) {
-			this._syncStateIfNeeded();
-			instance.createView(this._editorEl);
-		}
-	}
-	_destroyViewIfNeeded() {
-		this.instance?.[require_slottable_request.impl].destroyViewIfNeeded();
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this._initViewIfNeeded();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this._destroyViewIfNeeded();
-	}
-	/** @internal */
-	localeChanged() {
-		this._syncStateIfNeeded();
-	}
-	_syncStateIfNeeded() {
-		this.instance?.[require_slottable_request.impl].updateHostState({
-			locale: this.locale,
-			ctx: this._ctx
-		});
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.observable], RichTextEditor.prototype, "instance", void 0);
-//#endregion
-//#region src/lib/rich-text-editor/rich-text-editor.template.ts
-var RichTextEditorTemplate = (ctx) => {
-	return _microsoft_fast_element.html`<template :_ctx="${() => ctx}">
-		<div class="rte">
-			<slot name="editor-before"></slot>
-			<div class="editor-viewport" ${(0, _microsoft_fast_element.ref)("editorViewportElement")}>
-				<div class="editor-scroll-area" part="editor-scrollable-area">
-					<slot name="editor-start"></slot>
-					<div class="editor rich-text" ${(0, _microsoft_fast_element.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: require_definition$2.PlacementStrategy.AutoPlacementHorizontal,
-		shiftCrossAxis: false,
-		strategy: "absolute"
-	},
-	autocomplete: {
-		placement: "bottom-start",
-		placementStrategy: require_definition$2.PlacementStrategy.Flip,
-		shiftCrossAxis: false,
-		strategy: "fixed"
-	},
-	imageOptions: {
-		placement: "bottom",
-		placementStrategy: require_definition$2.PlacementStrategy.Flip,
-		shiftCrossAxis: true,
-		strategy: "absolute"
-	}
-};
-var popoverTemplate = (context) => {
-	const popup = context.tagFor(require_definition$2.Popup);
-	return _microsoft_fast_element.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 require_vivid_element.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();
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "kind", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "offset", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchorBlocksPopover", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchorEl", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "anchorId", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Popover.prototype, "requestedOpenState", void 0);
-require_decorate.__decorate([_microsoft_fast_element.volatile], Popover.prototype, "open", null);
-var popoverDefinition = require_vivid_element.defineVividComponent("rich-text-editor-popover", Popover, popoverTemplate, [require_definition$2.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 prosemirror_state.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 require_slottable_request.RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteForeignHtmlFeature";
-	}
-	getPlugins(rte) {
-		return [this.contribution(new prosemirror_state.Plugin({ props: {
-			transformPastedHTML: (html) => rte.foreignHtmlParser[require_slottable_request.impl].transform(html),
-			clipboardParser: rte.foreignHtmlParser[require_slottable_request.impl].parser,
-			clipboardSerializer: rte.foreignHtmlSerializer[require_slottable_request.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;
-};
-/**
-* When the cursor is positioned directly before an inline atom node (e.g. an image)
-* that wraps to the next line, browsers may display the cursor on the next line even
-* though typing inserts text on the previous line. A ZWSP between cursor and atom will be
-* layouted to the previous line and therefore fix the cursor position.
-*/
-var beforeAtomCursorFix = ($cursor) => {
-	const nodeAfter = $cursor.nodeAfter;
-	if (nodeAfter && nodeAfter.isInline && nodeAfter.isAtom && !nodeAfter.isText) return { afterCursor: true };
-	return null;
-};
-function createZwspWidget(style) {
-	const span = document.createElement("span");
-	span.textContent = "​";
-	for (const [prop, value] of Object.entries(style)) span.style.setProperty(prop, value);
-	return span;
-}
-var RteCursorFixFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteCursorFix";
-	}
-	getPlugins(rte) {
-		const cursorFixes = [atomCursorFix, beforeAtomCursorFix];
-		for (const markType of Object.values(rte.schema.marks)) {
-			const spec = markType.spec;
-			if (spec.cursorFix) cursorFixes.push(spec.cursorFix);
-		}
-		return [this.contribution(new prosemirror_state.Plugin({ props: { decorations: (state) => {
-			const { $cursor } = state.selection;
-			if (!$cursor) return null;
-			const decorations = [];
-			const cursorFixStyles = {};
-			let before = false;
-			let after = false;
-			for (const fn of cursorFixes) {
-				const result = fn($cursor, state);
-				if (!result) continue;
-				if (result.style) Object.assign(cursorFixStyles, result.style);
-				if (result.afterCursor) after = true;
-				else before = true;
-			}
-			if (before) decorations.push(prosemirror_view.Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: -1 }));
-			if (after) decorations.push(prosemirror_view.Decoration.widget($cursor.pos, () => createZwspWidget(cursorFixStyles), { side: 1 }));
-			if (decorations.length === 0) return null;
-			return prosemirror_view.DecorationSet.create(state.doc, decorations);
-		} } }))];
-	}
-};
-require_slottable_request.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. */
-var hostBridgePlugin = new prosemirror_state.Plugin({ state: {
-	init() {
-		return null;
-	},
-	apply(tr, value) {
-		const meta = tr.getMeta(hostBridgePlugin);
-		if (meta) return meta;
-		else return value;
-	}
-} });
-var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
-	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 splitFn = (0, prosemirror_commands.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)
-			};
-		});
-		const splitFnKeepMarks = (state, dispatch) => splitFn(state, dispatch && ((tr) => {
-			const marks = state.storedMarks || state.selection.$to.parentOffset && state.selection.$from.marks();
-			if (marks) tr.ensureMarks(marks);
-			dispatch(tr);
-		}));
-		const enterKeyChainCommands = (0, prosemirror_commands.chainCommands)(prosemirror_commands.newlineInCode, prosemirror_commands.createParagraphNear, prosemirror_commands.liftEmptyBlock, splitFnKeepMarks);
-		return [
-			this.contribution(this.disabled.plugin),
-			this.contribution(new prosemirror_state.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.contribution((0, prosemirror_keymap.keymap)({
-				...prosemirror_commands.baseKeymap,
-				Enter: enterKeyChainCommands,
-				"Shift-Enter": enterKeyChainCommands
-			})),
-			this.contribution((0, prosemirror_dropcursor.dropCursor)()),
-			this.contribution((0, prosemirror_gapcursor.gapCursor)()),
-			this.contribution(hostBridgePlugin)
-		];
-	}
-	getFeatures() {
-		return [
-			this,
-			new RteForeignHtmlFeatureImpl(),
-			new RteCursorFixFeatureImpl()
-		];
-	}
-};
-require_slottable_request.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.default.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.default.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[require_slottable_request.impl] = new RteHtmlParserImpl(config[require_slottable_request.impl], options);
-	}
-	/** Converts an HTML string to an RteDocument. */
-	parseDocument(html, options) {
-		return this[require_slottable_request.impl].parser.parse(this.parseHtml(html, options), { preserveWhitespace: true }).toJSON();
-	}
-	/** Converts an HTML string to an RteFragment. */
-	parseFragment(html, options) {
-		return this[require_slottable_request.impl].parser.parseSlice(this.parseHtml(html, options), { preserveWhitespace: true }).content.toJSON() ?? [];
-	}
-	parseHtml(html, options) {
-		const dom = dompurify.default.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);
-	}
-	/** Used by the editor when foreign HTML is pasted or dropped */
-	transform(html) {
-		return dompurify.default.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 prosemirror_model.DOMParser(schema, parserRules);
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/html-serializer.ts
-var RteHtmlSerializer = class {
-	constructor(config, options) {
-		this[require_slottable_request.impl] = new RteHtmlSerializerImpl(config[require_slottable_request.impl], options);
-	}
-	/** Converts an RteDocument to an HTML string. */
-	serializeDocument(doc, options) {
-		return this[require_slottable_request.impl].serializeFragment(doc.content, options);
-	}
-	/** Converts an RteFragment to an HTML string. */
-	serializeFragment(fragment, options) {
-		return this[require_slottable_request.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 prosemirror_model.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 = prosemirror_model.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 ? prosemirror_model.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[require_slottable_request.impl].getPublicInterface(Feature, featureId);
-		};
-		this[require_slottable_request.impl] = new RteInstanceImpl(this, config, options);
-	}
-	/** Returns the current document state. */
-	getDocument() {
-		return this[require_slottable_request.impl].state.doc.toJSON();
-	}
-	/** Reset the editor to its initial state. Optionally, an initial document can be provided. */
-	reset(initialDocument) {
-		this[require_slottable_request.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[require_slottable_request.impl];
-		tr.replaceSelection(new prosemirror_model.Slice(prosemirror_model.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 prosemirror_state.AllSelection ? new prosemirror_state.AllSelection(tr.doc) : prosemirror_state.TextSelection.between($anchor, $head));
-		else tr.setSelection(prosemirror_state.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[require_slottable_request.impl];
-		tr.replaceWith(0, state.doc.content.size, parseDocument(schema, newDocument));
-		if (options?.selectContent) tr.setSelection(new prosemirror_state.AllSelection(tr.doc));
-		else if (options?.cursorPlacement === "end") tr.setSelection(prosemirror_state.TextSelection.atEnd(tr.doc));
-		else tr.setSelection(prosemirror_state.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[require_slottable_request.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.facade = instanceFacade;
-		const config = configFacade[require_slottable_request.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 _microsoft_fast_element.ElementStyles(require_slottable_request.sortedContributions(config.features.flatMap((f) => f.getStyles())));
-		this.initState(options?.initialDocument);
-	}
-	initState(initialDoc) {
-		this.state = prosemirror_state.EditorState.create({
-			doc: parseDocument(this.schema, initialDoc),
-			schema: this.config.schema,
-			plugins: require_slottable_request.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 prosemirror_view.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[require_slottable_request.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,
-						[require_slottable_request.impl]: ctx
-					},
-					[require_slottable_request.impl]: ctx
-				});
-				active.push(mark);
-				activeContents.push(markContent);
-				rendered++;
-			}
-			activeContents[activeContents.length - 1].push({
-				type: "node",
-				node,
-				children: convertFragment(node.content ?? []),
-				[require_slottable_request.impl]: ctx
-			});
-		}
-		return {
-			type: "fragment",
-			content: result,
-			[require_slottable_request.impl]: ctx
-		};
-	};
-	return {
-		type: "node",
-		node: doc,
-		children: convertFragment(doc.content),
-		[require_slottable_request.impl]: ctx
-	};
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/config.ts
-var RteConfig = class {
-	constructor(features) {
-		this[require_slottable_request.impl] = new RteConfigImpl(features);
-	}
-	instantiateEditor(options) {
-		return new RteInstance(this, options);
-	}
-	instantiateView(document, options) {
-		return convertToView(document, {
-			config: this,
-			options: { ...options }
-		});
-	}
-};
-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(require_slottable_request.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 = require_slottable_request.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(require_slottable_request.sortedContributions(this.features.flatMap((f) => f.getTextblockAttrs())));
-		this.textblockMarks = new TextblockMarks(require_slottable_request.sortedContributions(this.features.flatMap((f) => f.getTextblockMarks())));
-		const schemaContributions = require_slottable_request.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 ?? {});
-		}
-		for (const referencedNodeName of this.textblockMarks.getReferencedNodeNames()) if (!(referencedNodeName in schemaSpec.nodes)) throw new Error(`Unknown node "${referencedNodeName}"`);
-		this.schema = new prosemirror_model.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 = [];
-	}
-	/** Evaluates a prop, returning its current value. */
-	evalProp(prop) {
-		return isPropBinding(prop) ? prop(this) : prop;
-	}
-	/** On every state change, prop is re-evaluated and passed to bindFn. */
-	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);
-	}
-	/** To be called on each state update to refresh all bindings. */
-	updateBindings() {
-		for (const binding of this.bindings) binding();
-	}
-	/** Whether to return focus to the editor after a toolbar action */
-	shouldReturnFocusToEditor() {
-		return this.evalProp(this.props.shouldReturnFocusToEditor);
-	}
-	/** Utility to more conveniently bind props to elements */
-	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(require_definition$6.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(require_definition$1.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(require_definition$4.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(require_definition$3.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: () => !(0, prosemirror_commands.toggleMark)(props.markType)(ctx.view.state),
-	onClick: () => {
-		(0, prosemirror_commands.toggleMark)(props.markType)(ctx.view.state, ctx.view.dispatch);
-	}
-});
-var createOption = (ctx, props) => {
-	const disabled = () => Boolean(ctx.evalProp(ctx.props.disabled) || ctx.evalProp(props.disabled));
-	const option = ctx.rte.createComponent(require_definition$7.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(require_definition$9.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(require_divider.Divider);
-	ctx.bindToEl(divider, {
-		className: "ui-divider",
-		orientation: "vertical"
-	});
-	return divider;
-};
-var createTextField = (ctx, props) => {
-	const textField = ctx.rte.createComponent(require_definition$5.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;
-	}
-	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
-			});
-		}
-	}
-	const processSlot = () => {
-		const first = slot.assignedElements({ flatten: true })[0];
-		if (first === currentEl) return;
-		cleanup();
-		if (first) {
-			currentEl = first;
-			applyPropsAndEvents(first);
-		}
-	};
-	slot.addEventListener("slotchange", processSlot);
-	queueMicrotask(processSlot);
-	return slot;
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/history.ts
-var RteHistoryFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteHistoryFeature";
-	}
-	getPlugins() {
-		return [this.contribution((0, prosemirror_history.history)()), this.contribution((0, prosemirror_keymap.keymap)({
-			"Mod-z": prosemirror_history.undo,
-			"Ctrl-y": prosemirror_history.redo,
-			"Cmd-Z": prosemirror_history.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) => !(0, prosemirror_history.undo)(ctx.view.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					(0, prosemirror_history.undo)(state, dispatch);
-				}
-			})
-		}, 1), this.contribution({
-			section: "history",
-			render: (ctx) => createButton(ctx, {
-				label: (ctx) => ctx.rte.getLocale().richTextEditor.redo,
-				icon: "redo-line",
-				disabled: (ctx) => !(0, prosemirror_history.redo)(ctx.view.state),
-				onClick: () => {
-					const { state, dispatch } = ctx.view;
-					(0, prosemirror_history.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 require_slottable_request.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
-					];
-				}
-			};
-		}
-		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);
-		}
-		return [this.contribution((0, prosemirror_keymap.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;
-	}
-	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;
-		};
-	}
-};
-//#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 require_slottable_request.RteFeatureImpl {
-	constructor(..._args) {
-		super(..._args);
-		this.name = "RteInputRulesFeature";
-	}
-	getPlugins(rte) {
-		const ruleSpecs = require_slottable_request.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((0, prosemirror_inputrules.inputRules)({ rules })));
-		plugins.push(this.contribution((0, prosemirror_keymap.keymap)({ Backspace: prosemirror_inputrules.undoInputRule }), require_slottable_request.contributionPriority.high));
-		const enterHandlers = ruleSpecs.filter((spec) => spec.enterHandler).map((spec) => spec.enterHandler);
-		if (enterHandlers.length > 0) plugins.push(this.contribution((0, prosemirror_keymap.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;
-		} }), require_slottable_request.contributionPriority.highest));
-		return plugins;
-	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/base.ts
-var RteBaseImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteBase";
-	}
-	getSchema() {
-		return [this.contribution({ nodes: {
-			doc: { content: "block+" },
-			text: { group: "inline" }
-		} })];
-	}
-	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()
-		];
-	}
-	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 });
-			}
-		};
-	}
-};
-var RteBase = require_slottable_request.featureFacade(RteBaseImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/text-block-picker.ts
-var RteTextBlockPickerFeatureImpl = class extends require_slottable_request.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 = require_slottable_request.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 require_slottable_request.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 require_slottable_request.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 prosemirror_state.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 = require_slottable_request.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 require_slottable_request.RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RtePlaceholderFeature";
-	}
-	getStyles() {
-		return [this.contribution(placeholder_style_default)];
-	}
-	getPlugins() {
-		const placeholderPlugin = new prosemirror_state.Plugin({ props: { decorations: (state) => {
-			if (state.doc.nodeSize === 4) {
-				const storedSize = state.schema.marks.fontSize?.isInSet(state.storedMarks ?? [])?.attrs.size;
-				return prosemirror_view.DecorationSet.create(state.doc, [prosemirror_view.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 = require_slottable_request.featureFacade(RtePlaceholderFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/hard-break.ts
-var RteHardBreakFeatureImpl = class extends require_slottable_request.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) => {
-			const marks = state.storedMarks || state.selection.$from.marks();
-			const tr = state.tr.replaceSelectionWith(state.schema.nodes.hardBreak.create(), true).scrollIntoView();
-			if (marks.length) tr.setStoredMarks(marks);
-			dispatch?.(tr);
-			return true;
-		};
-		const keyBindings = { "Shift-Enter": forceBreak };
-		return [this.contribution((0, prosemirror_keymap.keymap)(keyBindings), require_slottable_request.contributionPriority.high)];
-	}
-};
-var RteHardBreakFeature = require_slottable_request.featureFacade(RteHardBreakFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/font-size-picker.ts
-var mixedFontSize = Symbol("mixedFontSize");
-var RteFontSizePickerFeatureImpl = class extends require_slottable_request.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 { style: { "font-size": fontSizeMark.attrs.size } };
-				if (storedMarks.length === 0) {
-					const defaultSize = this.defaultFontSizeForNode?.[$cursor.parent.type.name];
-					if (defaultSize) return { style: { "font-size": defaultSize } };
-				}
-				return null;
-			}
-		} } })];
-	}
-	getPlugins() {
-		return [this.contribution((0, prosemirror_keymap.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 (!(0, prosemirror_commands.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 prosemirror_transform.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 = require_slottable_request.featureFacade(RteFontSizePickerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/internal/text-style.ts
-var RteTextStyleFeatureImpl = class extends require_slottable_request.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: prosemirror_schema_basic.marks.strong } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution((0, prosemirror_keymap.keymap)({ "Mod-b": (0, prosemirror_commands.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 = require_slottable_request.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: prosemirror_schema_basic.marks.em } })];
-	}
-	getPlugins(rte) {
-		return [this.contribution((0, prosemirror_keymap.keymap)({ "Mod-i": (0, prosemirror_commands.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 = require_slottable_request.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((0, prosemirror_keymap.keymap)({ "Mod-u": (0, prosemirror_commands.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 = require_slottable_request.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((0, prosemirror_keymap.keymap)({
-			"Alt-Shift-5": (0, prosemirror_commands.toggleMark)(rte.schema.marks.strikethrough),
-			"Cmd-Shift-X": (0, prosemirror_commands.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 = require_slottable_request.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((0, prosemirror_keymap.keymap)({ "Mod-M": (0, prosemirror_commands.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 = require_slottable_request.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 require_slottable_request.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)];
-	}
-	/** Determine the color of the current selection or null if colors are mixed */
-	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 prosemirror_transform.RemoveMarkStep(pos, pos + node.nodeSize, mark));
-				});
-			}
-			dispatch?.(tr.scrollIntoView());
-			return true;
-		};
-	}
-};
-var RteTextColorPickerFeature = require_slottable_request.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 prosemirror_state.AllSelection) {
-		const textSelection = prosemirror_state.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 prosemirror_model.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 prosemirror_transform.ReplaceAroundStep($li.before() - (atStart ? 1 : 0), $li.after() + (atEnd ? 1 : 0), $li.start(), $li.end(), new prosemirror_model.Slice((atStart ? prosemirror_model.Fragment.empty : prosemirror_model.Fragment.from(list.copy(prosemirror_model.Fragment.empty))).append(prosemirror_model.Fragment.from(defaultTextblock.create(rte.textblockAttrs.extractFromNode(getLi($li))))).append(atEnd ? prosemirror_model.Fragment.empty : prosemirror_model.Fragment.from(list.copy(prosemirror_model.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 prosemirror_transform.ReplaceAroundStep($li.before() - (canJoinWithPrev ? 1 : 0), $li.after() + (canJoinWithNext ? 1 : 0), $li.before(), $li.after(), new prosemirror_model.Slice(prosemirror_model.Fragment.from(listType.create(null, [])), openStart, openEnd), 1 - openStart));
-};
-var sinkNode = (rte, listType, $node, tr) => {
-	tr.step(new prosemirror_transform.ReplaceAroundStep($node.before(), $node.after(), $node.start(), $node.end(), new prosemirror_model.Slice(prosemirror_model.Fragment.from(listType.create(null, [rte.schema.nodes.listItem.create(rte.textblockAttrs.extractFromNode($node.parent))])), 0, 0), 2));
-};
-var RteListFeatureImpl = class extends require_slottable_request.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((0, prosemirror_keymap.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) } : {}
-		}), require_slottable_request.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 (0, prosemirror_commands.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 = require_slottable_request.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 require_slottable_request.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((0, prosemirror_keymap.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 = require_slottable_request.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 require_slottable_request.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
-				];
-			}
-		} } }, require_slottable_request.contributionPriority.high)];
-	}
-	getTextblockMarks() {
-		return [this.contribution({ markName: "link" })];
-	}
-	getInputRules() {
-		const linkRegex = new RegExp(`${linkPattern}$`);
-		return [this.contribution({
-			rule: new prosemirror_inputrules.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 prosemirror_state.Plugin({
-			props: { decorations: (state) => {
-				const link = this.getCurrentLink(state);
-				if (link) {
-					const deco = prosemirror_view.Decoration.inline(link.start, link.end, { id: "current-link" });
-					return prosemirror_view.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((0, prosemirror_keymap.keymap)({
-			Escape: (state) => {
-				if (this.getCurrentLink(state)) {
-					popup?.dismiss();
-					return true;
+//#region src/lib/range-slider/range-slider.ts
+var Direction = {
+	Increment: 1,
+	Decrement: -1
+};
+/**
+* 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 RangeSlider = class extends require_localized.Localized(require_form_element.FormElement(require_form_associated.FormAssociated(require_vivid_element.VividElement))) {
+	constructor(..._args) {
+		super(..._args);
+		this.#isInternalValueUpdate = false;
+		this.start = "";
+		this.end = "";
+		this.min = 0;
+		this.max = 10;
+		this.step = 1;
+		this.orientation = _microsoft_fast_web_utilities.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 === _microsoft_fast_web_utilities.keyHome) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
+			} else if (e.key === _microsoft_fast_web_utilities.keyEnd) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
+			} else {
+				if (e.shiftKey) return;
+				switch (e.key) {
+					case require_key_codes.keyArrowRight:
+					case _microsoft_fast_web_utilities.keyArrowDown:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction.Increment);
+						break;
+					case require_key_codes.keyArrowLeft:
+					case _microsoft_fast_web_utilities.keyArrowUp:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction.Decrement);
+						break;
 				}
-				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 prosemirror_state.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
+		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)}` });
 		};
-	}
-	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;
+		this.#onDragEnd = () => {
+			this._draggingThumb = false;
+			this.#unregisterDragListeners();
 		};
 	}
-};
-var RteLinkFeature = require_slottable_request.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);
+	#isInternalValueUpdate;
+	/** @internal */
+	startChanged() {
+		this.currentStart = this.start;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
 		}
-		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;
-			require_slottable_request.dispatchSlottableRequest(host, "inline-image-placeholder", slotName, { url: this.imageUrl });
-			this.setContent(slot, { onDestroy: () => {
-				require_slottable_request.dispatchSlottableRequest(host, "inline-image-placeholder", slotName, require_slottable_request.removeSymbol);
-				onDestroy?.();
-			} });
-		} else this.setContent(null);
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	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 });
+	/** @internal */
+	initialStartChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.start = newValue;
+			this.dirtyValue = false;
+		}
 	}
-	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;
+	/** @internal */
+	currentStartChanged() {
+		this.start = this.currentStart;
 	}
-	destroy() {
-		this.setContent(null);
+	/** The start property, typed as a number. */
+	get startAsNumber() {
+		return parseFloat(this.start);
 	}
-};
-var RteInlineImageFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(config = {}) {
-		super();
-		this.config = config;
-		this.name = "RteInlineImageFeature";
+	set startAsNumber(next) {
+		this.start = next.toString();
 	}
-	getStyles() {
-		return [this.contribution(inline_image_style_default)];
+	/** @internal */
+	endChanged() {
+		this.currentEnd = this.end;
+		if (!this.#isInternalValueUpdate) {
+			this.dirtyValue = true;
+			this.#updateFormValue();
+		}
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	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"))
-					};
-				}
-			}],
-			/** Since we use a NodeView, this is only used for HTML serialization */
-			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];
-			}
-		} } })];
+	/** @internal */
+	initialEndChanged(_, newValue) {
+		if (newValue && !this.dirtyValue) {
+			this.end = newValue;
+			this.dirtyValue = false;
+		}
 	}
-	getPlugins(rte) {
-		let popover;
-		return [this.contribution(new prosemirror_state.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((0, prosemirror_keymap.keymap)({ Escape: (state) => {
-			if (this.getSelectedInlineImage(state)) {
-				popover?.dismiss();
-				return true;
-			}
-			return false;
-		} }))];
+	/** @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;
+		}
+		this.#updateFormValue();
 	}
-	calculateSmallWidth(naturalWidth) {
-		return `${Math.min(300, naturalWidth / 2)}px`;
+	#applyStep(thumb, direction) {
+		this.#updateValues({ [thumb]: this.#roundToNearestStep(thumb, Number(this[thumb]) + direction * this.step).toString() });
 	}
-	getSelectedInlineImage(state) {
-		const sel = state.selection;
-		if (sel instanceof prosemirror_state.NodeSelection && sel.node.type === state.schema.nodes.inlineImage) return {
-			pos: sel.from,
-			node: sel.node
-		};
-		return null;
+	/** @internal */
+	orientationChanged() {
+		if (this.$fastController.isConnected) this.#updateThumbPositions();
 	}
-	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;
-		};
+	/** @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);
+		}
 	}
-	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;
+	/** Resets `start` and `end` to their initial values when the form is reset. */
+	formResetCallback() {
+		this.#updateValues({
+			start: this.initialStart ?? this.min.toString(),
+			end: this.initialEnd ?? this.max.toString()
+		});
+		super.formResetCallback();
 	}
-};
-var RteInlineImageFeature = require_slottable_request.featureFacade(RteInlineImageFeatureImpl);
-//#endregion
-//#region src/shared/utils/promise.ts
-var resolvePromise = async (promise) => {
-	try {
-		return {
-			type: "ok",
-			result: await promise
-		};
-	} catch (e) {
+	get #thumbs() {
 		return {
-			type: "error",
-			error: e
+			start: this._startThumbEl,
+			end: this._endThumbEl
 		};
 	}
-};
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/file-handler.ts
-var RteFileHandlerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteFileHandlerFeature";
-	}
-	getPlugins(rte) {
-		const insertPointPlaceholderPlugin = new prosemirror_state.Plugin({
-			state: {
-				init() {
-					return prosemirror_view.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 = prosemirror_view.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 = require_randomId.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 = prosemirror_model.Slice.fromJSON(rte.schema, { content: fragment });
-				tr.replaceSelection(parsed);
-			} else {
-				const parsed = prosemirror_model.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 prosemirror_state.Plugin({ props: {
-			handlePaste: (_view, event) => {
-				const files = Array.from(event.clipboardData.files);
-				if (!files.length) return false;
-				handleFiles(files, { type: "selection" });
-				return true;
+	get #thumbConstraints() {
+		return {
+			start: {
+				min: this.min,
+				max: this.endAsNumber
 			},
-			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 = (0, prosemirror_transform.dropPoint)(view.state.doc, target, view.dragging.slice);
-					if (point != null) target = point;
-				}
-				handleFiles(files, {
-					type: "pos",
-					pos: target
-				});
-				return true;
-			}
-		} }))];
+			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 === _microsoft_fast_web_utilities.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 - require_slider_template.inverseLerp(this.min, this.max, value)) * 100;
+	}
+	#calculateValueFromMouseEvent(e) {
+		const trackClientRect = this._trackEl.getBoundingClientRect();
+		const [minPos, maxPos, valuePos] = this.orientation === _microsoft_fast_web_utilities.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 require_slider_template.lerp(this.min, this.max, require_slider_template.inverseLerp(minPos, maxPos, valuePos));
 	}
-};
-var RteFileHandlerFeature = require_slottable_request.featureFacade(RteFileHandlerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/drop-handler.ts
-var RteDropHandlerFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(config) {
-		super();
-		this.config = config;
-		this.name = "RteDebugFeature";
+	#roundToNearestStep(thumb, value) {
+		return (0, _microsoft_fast_web_utilities.limit)(this.#thumbConstraints[thumb].min, this.#thumbConstraints[thumb].max, require_slider_template.roundToStepValue(value - this.min, this.step) + this.min);
 	}
-	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 prosemirror_state.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 prosemirror_state.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;
-			}
-		} } }), require_slottable_request.contributionPriority.high)];
+	#isNonVisibleFocus;
+	#focusThumbNonVisibly(thumb) {
+		this.#isNonVisibleFocus = true;
+		thumb.focus();
+		this.#isNonVisibleFocus = false;
 	}
-};
-var RteDropHandlerFeature = require_slottable_request.featureFacade(RteDropHandlerFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/toolbar-button.ts
-var RteToolbarButtonFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
-	constructor(featureId, options) {
-		super();
-		this.featureId = featureId;
-		this.options = options;
-		this.name = `RteToolbarButtonFeature[${featureId}]`;
+	/** @internal */
+	_isThumbPopupOpen(thumb) {
+		return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
 	}
-	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)];
+	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);
 	}
-	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;
-			}
+	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 RteToolbarButtonFeature = require_slottable_request.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 require_slottable_request.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") })
-			}],
-			/** Since we use a NodeView, toDOM is only used for Rich Text View */
-			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 prosemirror_state.Plugin({ props: { nodeViews: { [this.atomName]: (node) => new AtomView(node, this.config, this.atomName) } } }))];
-	}
-};
-var RteAtomFeature = require_slottable_request.featureFacade(RteAtomFeatureImpl);
-//#endregion
-//#region src/lib/rich-text-editor/rte/features/input-rule.ts
-var RteInputRuleFeatureImpl = class extends require_slottable_request.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, prosemirror_model.Fragment.fromJSON(rte.schema, fragment));
-		};
-		const spec = { rule: new prosemirror_inputrules.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 = require_slottable_request.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 require_slottable_request.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((0, prosemirror_keymap.keymap)(bindings), require_slottable_request.contributionPriority.high)];
-	}
-};
-var RteKeyboardShortcutsFeature = require_slottable_request.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((0, prosemirror_history.closeHistory)(state.tr));
-	const tr = view.state.tr;
-	tr.replaceWith(match.start, match.end, prosemirror_model.Fragment.fromJSON(view.state.schema, fragment));
-	const newPos = tr.mapping.map(match.end);
-	tr.setSelection(prosemirror_state.TextSelection.create(tr.doc, newPos));
-	view.dispatch(tr.scrollIntoView());
-};
-var RteSuggestFeatureImpl = class extends require_slottable_request.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 prosemirror_state.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 prosemirror_state.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 prosemirror_view.DecorationSet.empty;
-						return Boolean(prevState?.loadingDecoration.find().length ?? 0) ? prevState.loadingDecoration.map(tr.mapping, tr.doc) : prosemirror_view.DecorationSet.create(tr.doc, [prosemirror_view.Decoration.widget(match.end, () => {
-							const wrapper = document.createElement("span");
-							wrapper.className = "suggest-loading-widget";
-							const spinner = rte.createComponent(require_definition.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: prosemirror_view.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, [prosemirror_view.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) require_slottable_request.dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, { id: this.featureId });
-					if (emptySlotShowing && !showing) require_slottable_request.dispatchSlottableRequest(host, "suggestions-empty-state", emptySlotName, require_slottable_request.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(require_definition$7.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((0, prosemirror_keymap.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;
-			}
-		}), require_slottable_request.contributionPriority.high)];
-	}
-};
-var RteSuggestFeature = require_slottable_request.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 require_slottable_request.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 prosemirror_state.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;
+};
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "start", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "fromView",
+	attribute: "start"
+})], RangeSlider.prototype, "initialStart", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "current-start" })], RangeSlider.prototype, "currentStart", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "end", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "fromView",
+	attribute: "end"
+})], RangeSlider.prototype, "initialEnd", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "current-end" })], RangeSlider.prototype, "currentEnd", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], RangeSlider.prototype, "min", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], RangeSlider.prototype, "max", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_slider_template.defaultToOneConverter })], RangeSlider.prototype, "step", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], RangeSlider.prototype, "orientation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aria-start-label" })], RangeSlider.prototype, "ariaStartLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "aria-end-label" })], RangeSlider.prototype, "ariaEndLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], RangeSlider.prototype, "markers", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], RangeSlider.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], RangeSlider.prototype, "pin", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "valueTextFormatter", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_draggingThumb", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_visiblyFocusedThumb", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_hoveredThumb", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_startThumbCss", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_endThumbCss", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "_selectedRangeCss", void 0);
+//#endregion
+//#region src/lib/range-slider/range-slider.template.ts
+var getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => (0, _microsoft_fast_web_utilities.classNames)("thumb-container", ["focus-visible", _visiblyFocusedThumb === thumb]);
+var RangeSliderTemplate = (context) => {
+	const popupTag = context.tagFor(require_definition.Popup);
+	return _microsoft_fast_element.html` <template
+		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
+	>
+		<div
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["disabled", x.disabled], [`connotation-${x.connotation}`, Boolean(x.connotation)])} ${(x) => x.orientation}"
+		>
+			<div class="positioning-region">
+				<div ${(0, _microsoft_fast_element.ref)("_trackEl")} class="track">
+					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
+					${(0, _microsoft_fast_element.when)((x) => x.markers, _microsoft_fast_element.html`${(x) => require_slider_template.getMarkersTemplate(x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal, Math.floor((x.max - x.min) / x.step))}`)}
+				</div>
+				<div
+					id="start-thumb"
+					${(0, _microsoft_fast_element.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>
+				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._startThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("start")}
+					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.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"
+					${(0, _microsoft_fast_element.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>
+				${(0, _microsoft_fast_element.when)((x) => x.pin, _microsoft_fast_element.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._endThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("end")}
+					:placementStrategy=${(x) => x.orientation === _microsoft_fast_web_utilities.Orientation.horizontal ? require_definition.PlacementStrategy.AutoPlacementHorizontal : require_definition.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 = require_slottable_request.featureFacade(RteCharacterCountFeatureImpl);
 //#endregion
-//#region src/lib/rich-text-editor/definition.ts
-var richTextEditorDefinition = require_vivid_element.defineVividComponent("rich-text-editor", RichTextEditor, RichTextEditorTemplate, [
-	require_definition$8.dividerDefinition,
-	require_definition$9.selectDefinition,
-	require_definition$7.listboxOptionDefinition,
-	require_definition$1.buttonDefinition,
-	require_definition$6.tooltipDefinition,
-	require_definition$4.menuDefinition,
-	require_definition$3.menuItemDefinition,
-	require_definition$5.textFieldDefinition,
-	popoverDefinition,
-	require_definition.progressRingDefinition
-], {
-	styles: rich_text_editor_default,
+//#region src/lib/range-slider/definition.ts
+/** @internal */
+var rangeSliderDefinition = require_vivid_element.defineVividComponent("range-slider", RangeSlider, RangeSliderTemplate, [require_definition.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 = require_vivid_element.createRegisterFunction(richTextEditorDefinition);
+var registerRangeSlider = require_vivid_element.createRegisterFunction(rangeSliderDefinition);
 //#endregion
-Object.defineProperty(exports, "RichTextEditor", {
-	enumerable: true,
-	get: function() {
-		return RichTextEditor;
-	}
-});
-Object.defineProperty(exports, "RteAlignmentFeature", {
-	enumerable: true,
-	get: function() {
-		return RteAlignmentFeature;
-	}
-});
-Object.defineProperty(exports, "RteAtomFeature", {
-	enumerable: true,
-	get: function() {
-		return RteAtomFeature;
-	}
-});
-Object.defineProperty(exports, "RteBase", {
-	enumerable: true,
-	get: function() {
-		return RteBase;
-	}
-});
-Object.defineProperty(exports, "RteBoldFeature", {
-	enumerable: true,
-	get: function() {
-		return RteBoldFeature;
-	}
-});
-Object.defineProperty(exports, "RteCharacterCountFeature", {
-	enumerable: true,
-	get: function() {
-		return RteCharacterCountFeature;
-	}
-});
-Object.defineProperty(exports, "RteConfig", {
-	enumerable: true,
-	get: function() {
-		return RteConfig;
-	}
-});
-Object.defineProperty(exports, "RteDropHandlerFeature", {
-	enumerable: true,
-	get: function() {
-		return RteDropHandlerFeature;
-	}
-});
-Object.defineProperty(exports, "RteFileHandlerFeature", {
-	enumerable: true,
-	get: function() {
-		return RteFileHandlerFeature;
-	}
-});
-Object.defineProperty(exports, "RteFontSizePickerFeature", {
-	enumerable: true,
-	get: function() {
-		return RteFontSizePickerFeature;
-	}
-});
-Object.defineProperty(exports, "RteHardBreakFeature", {
-	enumerable: true,
-	get: function() {
-		return RteHardBreakFeature;
-	}
-});
-Object.defineProperty(exports, "RteHtmlParser", {
-	enumerable: true,
-	get: function() {
-		return RteHtmlParser;
-	}
-});
-Object.defineProperty(exports, "RteHtmlSerializer", {
-	enumerable: true,
-	get: function() {
-		return RteHtmlSerializer;
-	}
-});
-Object.defineProperty(exports, "RteInlineImageFeature", {
-	enumerable: true,
-	get: function() {
-		return RteInlineImageFeature;
-	}
-});
-Object.defineProperty(exports, "RteInputRuleFeature", {
-	enumerable: true,
-	get: function() {
-		return RteInputRuleFeature;
-	}
-});
-Object.defineProperty(exports, "RteItalicFeature", {
-	enumerable: true,
-	get: function() {
-		return RteItalicFeature;
-	}
-});
-Object.defineProperty(exports, "RteKeyboardShortcutsFeature", {
-	enumerable: true,
-	get: function() {
-		return RteKeyboardShortcutsFeature;
-	}
-});
-Object.defineProperty(exports, "RteLinkFeature", {
-	enumerable: true,
-	get: function() {
-		return RteLinkFeature;
-	}
-});
-Object.defineProperty(exports, "RteListFeature", {
-	enumerable: true,
-	get: function() {
-		return RteListFeature;
-	}
-});
-Object.defineProperty(exports, "RteMonospaceFeature", {
-	enumerable: true,
-	get: function() {
-		return RteMonospaceFeature;
-	}
-});
-Object.defineProperty(exports, "RtePlaceholderFeature", {
-	enumerable: true,
-	get: function() {
-		return RtePlaceholderFeature;
-	}
-});
-Object.defineProperty(exports, "RteStrikethroughFeature", {
-	enumerable: true,
-	get: function() {
-		return RteStrikethroughFeature;
-	}
-});
-Object.defineProperty(exports, "RteSuggestFeature", {
-	enumerable: true,
-	get: function() {
-		return RteSuggestFeature;
-	}
-});
-Object.defineProperty(exports, "RteTextBlockPickerFeature", {
-	enumerable: true,
-	get: function() {
-		return RteTextBlockPickerFeature;
-	}
-});
-Object.defineProperty(exports, "RteTextColorPickerFeature", {
-	enumerable: true,
-	get: function() {
-		return RteTextColorPickerFeature;
-	}
-});
-Object.defineProperty(exports, "RteToolbarButtonFeature", {
-	enumerable: true,
-	get: function() {
-		return RteToolbarButtonFeature;
-	}
-});
-Object.defineProperty(exports, "RteToolbarFeature", {
-	enumerable: true,
-	get: function() {
-		return RteToolbarFeature;
-	}
-});
-Object.defineProperty(exports, "RteUnderlineFeature", {
+Object.defineProperty(exports, "RangeSlider", {
 	enumerable: true,
 	get: function() {
-		return RteUnderlineFeature;
+		return RangeSlider;
 	}
 });
-Object.defineProperty(exports, "registerRichTextEditor", {
+Object.defineProperty(exports, "rangeSliderDefinition", {
 	enumerable: true,
 	get: function() {
-		return registerRichTextEditor;
+		return rangeSliderDefinition;
 	}
 });
-Object.defineProperty(exports, "richTextEditorDefinition", {
+Object.defineProperty(exports, "registerRangeSlider", {
 	enumerable: true,
 	get: function() {
-		return richTextEditorDefinition;
+		return registerRangeSlider;
 	}
 });