@vonage/vivid 5.27.0 → 5.28.1

package/unbundled/definition63.cjs

@@ -1,6 +1,7 @@
 const require_rolldown_runtime = require("./rolldown-runtime.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
 const require_definition = require("./definition5.cjs");
 const require_localized = require("./localized.cjs");
 const require_definition$1 = require("./definition6.cjs");
@@ -32,7 +33,7 @@ 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,calc(8px + var(--_border-width,0px)));block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.rte.appearance-fieldset{--_border-width:1px;border:var(--_border-width) solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;transition:border-color .2s}.rte.appearance-fieldset:focus-within{--focus-stroke-gap-color:transparent;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))}.rte.appearance-fieldset .editor-viewport{border-start-start-radius:inherit;border-start-end-radius:inherit}.rte.appearance-fieldset .editor-scroll-area{background:0 0}.rte.appearance-fieldset .toolbar{border-end-end-radius:inherit;border-end-start-radius:inherit}.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}";
+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}.rte.appearance-fieldset{background-color:var(--_appearance-color-fill);outline:1px solid var(--_appearance-color-outline);outline-offset:-1px;border-radius:8px;transition:outline-color .2s,background-color .2s}.rte.appearance-fieldset:focus-within{--focus-stroke-gap-color:transparent;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))}.rte.appearance-fieldset .editor-viewport{border-start-start-radius:inherit;border-start-end-radius:inherit}.rte.appearance-fieldset .editor-scroll-area{background:0 0}.rte.appearance-fieldset .toolbar{border-end-end-radius:inherit;border-end-start-radius:inherit}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.ts
 /**
@@ -47,10 +48,16 @@ var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline
 * @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) {
+var RichTextEditor = class extends require_delegates_aria.DelegatesAria(require_localized.WithObservableLocale(require_vivid_element.VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this._disabled = false;
+	}
 	/** @internal */
 	instanceChanged(prevInstance) {
 		prevInstance?.[require_slottable_request.impl].destroyViewIfNeeded();
+		if (prevInstance) prevInstance[require_slottable_request.impl].onDisabledChanged = null;
+		this._disabled = false;
 		this._initViewIfNeeded();
 		prevInstance?.[require_slottable_request.impl].styles.removeStylesFrom(this.shadowRoot);
 		this.instance?.[require_slottable_request.impl].styles.addStylesTo(this.shadowRoot);
@@ -59,7 +66,10 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 		const instance = this.instance?.[require_slottable_request.impl];
 		if (instance && this.$fastController.isConnected && !instance.view) {
 			this._syncStateIfNeeded();
-			instance.createView(this._editorEl);
+			instance.onDisabledChanged = (disabled) => {
+				this._disabled = disabled;
+			};
+			instance.createView(this._editableEl);
 		}
 	}
 	_destroyViewIfNeeded() {
@@ -72,6 +82,7 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._destroyViewIfNeeded();
+		if (this.instance) this.instance[require_slottable_request.impl].onDisabledChanged = null;
 	}
 	/** @internal */
 	localeChanged() {
@@ -83,21 +94,37 @@ var RichTextEditor = class extends require_localized.WithObservableLocale(requir
 			ctx: this._ctx
 		});
 	}
+	/** @internal */
+	focus(options) {
+		const view = this.instance?.[require_slottable_request.impl].view;
+		if (view && view.editable) {
+			this._editableEl.focus(options);
+			view.focus();
+		} else super.focus(options);
+	}
 };
 require_decorate.__decorate([_microsoft_fast_element.observable], RichTextEditor.prototype, "instance", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], RichTextEditor.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], RichTextEditor.prototype, "state", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RichTextEditor.prototype, "_disabled", 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="${(x) => (0, _microsoft_fast_web_utilities.classNames)("rte", `connotation-accent`, "with-idle", "with-hover", [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("rte", `connotation-accent`, "with-idle", "with-hover", "with-disabled", "with-error", "with-success", ["disabled", x._disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["error", x.state === "error"], ["success", x.state === "success"])}"
 		>
 			<slot name="editor-before"></slot>
-			<div class="editor-viewport" ${(0, _microsoft_fast_element.ref)("editorViewportElement")}>
+			<div
+				class="editor-viewport"
+				part="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="editor rich-text">
+						<div part="editor" ${require_delegates_aria.delegateAria()} ${(0, _microsoft_fast_element.ref)("_editableEl")}></div>
+					</div>
 					<div class="popovers"></div>
 					<slot name="editor-end"></slot>
 				</div>
@@ -246,7 +273,7 @@ var FeatureState = class {
 };
 //#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}";
+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(--_appearance-color-text,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 {
@@ -390,6 +417,7 @@ var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
 						const disabled = this.disabled.getValue(rte);
 						popovers.classList.toggle("popovers--disabled", disabled);
 						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
+						rte.onDisabledChanged?.(disabled);
 					};
 					updateDisabled();
 					return { update: () => {
@@ -601,7 +629,7 @@ var RteInstance = class {
 		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 $from = tr.doc.resolve(tr.mapping.map(state.selection.from, -1));
 		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));
@@ -651,6 +679,7 @@ var RteInstanceImpl = class {
 	constructor(instanceFacade, configFacade, options) {
 		this.options = options;
 		this.view = null;
+		this.onDisabledChanged = null;
 		this.dispatchTransaction = (tr) => {
 			const prevState = this.state;
 			this.state = this.state.apply(tr);
@@ -682,12 +711,9 @@ var RteInstanceImpl = class {
 		this.updateHostState(currentHostState);
 		this.view?.updateState(this.state);
 	}
-	createView(target) {
+	createView(mountTarget) {
 		const core = this.config.featureMap.get("RteCore");
-		this.view = new prosemirror_view.EditorView((editor) => {
-			editor.part = "editor";
-			target.appendChild(editor);
-		}, {
+		this.view = new prosemirror_view.EditorView({ mount: mountTarget }, {
 			state: this.state,
 			dispatchTransaction: this.dispatchTransaction,
 			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
@@ -2408,6 +2434,7 @@ var RteAlignmentFeatureImpl = class extends require_slottable_request.RteFeature
 					textAlign: align
 				});
 			});
+			if (state.storedMarks) tr.setStoredMarks(state.storedMarks);
 			dispatch?.(tr.scrollIntoView());
 			return true;
 		};
@@ -3204,24 +3231,57 @@ var RteToolbarButtonFeature = require_slottable_request.featureFacade(RteToolbar
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/atom.ts
 var isGenerator = (value) => value !== null && typeof value === "object" && "next" in value;
+var VALID_VARIANT = /^[a-zA-Z0-9-]+$/;
+var normalizeResolvedValue = (value) => {
+	if (value == null) return {
+		text: "",
+		variant: []
+	};
+	if (typeof value === "string") return {
+		text: value,
+		variant: []
+	};
+	return {
+		text: value.text,
+		variant: (value.variant ?? []).filter((v) => {
+			if (!VALID_VARIANT.test(v)) {
+				console.warn(`[rich-text-editor] Ignoring invalid atom variant "${v}".`);
+				return false;
+			}
+			return true;
+		})
+	};
+};
+var partsFor = (atomName, variant) => [`node--${atomName}`, ...variant.map((v) => `atom-variant--${v}`)].join(" ");
 var AtomView = class {
 	constructor(node, config, atomName) {
+		this.atomName = 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.render(null);
 			this.handleResolvedGenerator(result);
-		} else this.dom.textContent = result ?? "";
+		} else this.render(result);
+	}
+	render(value) {
+		const { text, variant } = normalizeResolvedValue(value);
+		if (this.dom.textContent !== text) this.dom.textContent = text;
+		const parts = partsFor(this.atomName, variant);
+		if (this.dom.getAttribute("part") !== parts) this.dom.setAttribute("part", parts);
 	}
 	async handleResolvedGenerator(generator) {
 		const iterator = generator[Symbol.asyncIterator]();
-		let result;
-		do {
-			result = await iterator.next();
-			this.dom.textContent = result.value ?? "";
-		} while (!result.done);
+		try {
+			let result;
+			do {
+				result = await iterator.next();
+				this.render(result.value ?? null);
+			} while (!result.done);
+		} catch (error) {
+			this.render(null);
+			console.warn("[rich-text-editor] Error while resolving atom value:", error);
+		}
 	}
 };
 var RteAtomFeatureImpl = class extends require_slottable_request.RteFeatureImpl {
@@ -3248,7 +3308,7 @@ var RteAtomFeatureImpl = class extends require_slottable_request.RteFeatureImpl
 				if (serializedValue === null) return document.createDocumentFragment();
 				return [
 					"span",
-					{ part: `node--${this.atomName}` },
+					{ part: partsFor(this.atomName, []) },
 					serializedValue
 				];
 			},

package/unbundled/definition63.js

@@ -1,5 +1,6 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
 import { n as WithObservableLocale } from "./localized.js";
 import { i as Button, t as buttonDefinition } from "./definition6.js";
@@ -30,7 +31,7 @@ import { InputRule, inputRules, undoInputRule } from "prosemirror-inputrules";
 import { RemoveMarkStep, ReplaceAroundStep, dropPoint } from "prosemirror-transform";
 import { marks } from "prosemirror-schema-basic";
 //#region src/lib/rich-text-editor/rich-text-editor.scss?inline
-var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline:var(--rich-text-editor-padding-inline,16px);--editor-padding-block:var(--rich-text-editor-padding-block,calc(8px + var(--_border-width,0px)));block-size:100%;max-block-size:inherit;min-block-size:inherit;flex-direction:column;display:flex}.rte.appearance-fieldset{--_border-width:1px;border:var(--_border-width) solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;transition:border-color .2s}.rte.appearance-fieldset:focus-within{--focus-stroke-gap-color:transparent;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))}.rte.appearance-fieldset .editor-viewport{border-start-start-radius:inherit;border-start-end-radius:inherit}.rte.appearance-fieldset .editor-scroll-area{background:0 0}.rte.appearance-fieldset .toolbar{border-end-end-radius:inherit;border-end-start-radius:inherit}.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}";
+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}.rte.appearance-fieldset{background-color:var(--_appearance-color-fill);outline:1px solid var(--_appearance-color-outline);outline-offset:-1px;border-radius:8px;transition:outline-color .2s,background-color .2s}.rte.appearance-fieldset:focus-within{--focus-stroke-gap-color:transparent;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))}.rte.appearance-fieldset .editor-viewport{border-start-start-radius:inherit;border-start-end-radius:inherit}.rte.appearance-fieldset .editor-scroll-area{background:0 0}.rte.appearance-fieldset .toolbar{border-end-end-radius:inherit;border-end-start-radius:inherit}.editor{display:contents}.editor-viewport{contain:layout;flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.editor-scroll-area{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;flex-direction:column;flex:1;min-block-size:0;display:flex;overflow-y:auto}.editor-scroll-area ::-webkit-scrollbar{width:4px}.editor-scroll-area ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.editor-scroll-area ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popovers--disabled>*{display:none!important}";
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.ts
 /**
@@ -45,10 +46,16 @@ var rich_text_editor_default = ":host{display:block}.rte{--editor-padding-inline
 * @dynamicSlot `{ url: string }` inline-image-placeholder - Placeholder content for inline images.
 * @dynamicSlot `{ id: string }` suggestions-empty - Empty state if no suggestions are found.
 */
-var RichTextEditor = class extends WithObservableLocale(VividElement) {
+var RichTextEditor = class extends DelegatesAria(WithObservableLocale(VividElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this._disabled = false;
+	}
 	/** @internal */
 	instanceChanged(prevInstance) {
 		prevInstance?.[impl].destroyViewIfNeeded();
+		if (prevInstance) prevInstance[impl].onDisabledChanged = null;
+		this._disabled = false;
 		this._initViewIfNeeded();
 		prevInstance?.[impl].styles.removeStylesFrom(this.shadowRoot);
 		this.instance?.[impl].styles.addStylesTo(this.shadowRoot);
@@ -57,7 +64,10 @@ var RichTextEditor = class extends WithObservableLocale(VividElement) {
 		const instance = this.instance?.[impl];
 		if (instance && this.$fastController.isConnected && !instance.view) {
 			this._syncStateIfNeeded();
-			instance.createView(this._editorEl);
+			instance.onDisabledChanged = (disabled) => {
+				this._disabled = disabled;
+			};
+			instance.createView(this._editableEl);
 		}
 	}
 	_destroyViewIfNeeded() {
@@ -70,6 +80,7 @@ var RichTextEditor = class extends WithObservableLocale(VividElement) {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this._destroyViewIfNeeded();
+		if (this.instance) this.instance[impl].onDisabledChanged = null;
 	}
 	/** @internal */
 	localeChanged() {
@@ -81,21 +92,37 @@ var RichTextEditor = class extends WithObservableLocale(VividElement) {
 			ctx: this._ctx
 		});
 	}
+	/** @internal */
+	focus(options) {
+		const view = this.instance?.[impl].view;
+		if (view && view.editable) {
+			this._editableEl.focus(options);
+			view.focus();
+		} else super.focus(options);
+	}
 };
 __decorate([observable], RichTextEditor.prototype, "instance", void 0);
 __decorate([attr], RichTextEditor.prototype, "appearance", void 0);
+__decorate([attr], RichTextEditor.prototype, "state", void 0);
+__decorate([observable], RichTextEditor.prototype, "_disabled", void 0);
 //#endregion
 //#region src/lib/rich-text-editor/rich-text-editor.template.ts
 var RichTextEditorTemplate = (ctx) => {
 	return html`<template :_ctx="${() => ctx}">
 		<div
-			class="${(x) => classNames("rte", `connotation-accent`, "with-idle", "with-hover", [`appearance-${x.appearance}`, Boolean(x.appearance)])}"
+			class="${(x) => classNames("rte", `connotation-accent`, "with-idle", "with-hover", "with-disabled", "with-error", "with-success", ["disabled", x._disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], ["error", x.state === "error"], ["success", x.state === "success"])}"
 		>
 			<slot name="editor-before"></slot>
-			<div class="editor-viewport" ${ref("editorViewportElement")}>
+			<div
+				class="editor-viewport"
+				part="editor-viewport"
+				${ref("editorViewportElement")}
+			>
 				<div class="editor-scroll-area" part="editor-scrollable-area">
 					<slot name="editor-start"></slot>
-					<div class="editor rich-text" ${ref("_editorEl")}></div>
+					<div class="editor rich-text">
+						<div part="editor" ${delegateAria()} ${ref("_editableEl")}></div>
+					</div>
 					<div class="popovers"></div>
 					<slot name="editor-end"></slot>
 				</div>
@@ -244,7 +271,7 @@ var FeatureState = class {
 };
 //#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}";
+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(--_appearance-color-text,var(--vvd-color-neutral-300));cursor:not-allowed}";
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/foreign-html.ts
 var RteForeignHtmlFeatureImpl = class extends RteFeatureImpl {
@@ -388,6 +415,7 @@ var RteCoreImpl = class extends RteFeatureImpl {
 						const disabled = this.disabled.getValue(rte);
 						popovers.classList.toggle("popovers--disabled", disabled);
 						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
+						rte.onDisabledChanged?.(disabled);
 					};
 					updateDisabled();
 					return { update: () => {
@@ -599,7 +627,7 @@ var RteInstance = class {
 		const { state, tr, schema, dispatchTransaction } = this[impl];
 		tr.replaceSelection(new Slice(Fragment.fromJSON(schema, content), 0, 0));
 		tr.doc.check();
-		const $from = tr.doc.resolve(tr.mapping.map(state.selection.from));
+		const $from = tr.doc.resolve(tr.mapping.map(state.selection.from, -1));
 		const $to = tr.doc.resolve(tr.selection.to);
 		const [$head, $anchor] = options?.cursorPlacement === "start" ? [$from, $to] : [$to, $from];
 		if (options?.selectContent) tr.setSelection(state.selection instanceof AllSelection ? new AllSelection(tr.doc) : TextSelection.between($anchor, $head));
@@ -649,6 +677,7 @@ var RteInstanceImpl = class {
 	constructor(instanceFacade, configFacade, options) {
 		this.options = options;
 		this.view = null;
+		this.onDisabledChanged = null;
 		this.dispatchTransaction = (tr) => {
 			const prevState = this.state;
 			this.state = this.state.apply(tr);
@@ -680,12 +709,9 @@ var RteInstanceImpl = class {
 		this.updateHostState(currentHostState);
 		this.view?.updateState(this.state);
 	}
-	createView(target) {
+	createView(mountTarget) {
 		const core = this.config.featureMap.get("RteCore");
-		this.view = new EditorView((editor) => {
-			editor.part = "editor";
-			target.appendChild(editor);
-		}, {
+		this.view = new EditorView({ mount: mountTarget }, {
 			state: this.state,
 			dispatchTransaction: this.dispatchTransaction,
 			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
@@ -2406,6 +2432,7 @@ var RteAlignmentFeatureImpl = class extends RteFeatureImpl {
 					textAlign: align
 				});
 			});
+			if (state.storedMarks) tr.setStoredMarks(state.storedMarks);
 			dispatch?.(tr.scrollIntoView());
 			return true;
 		};
@@ -3202,24 +3229,57 @@ var RteToolbarButtonFeature = featureFacade(RteToolbarButtonFeatureImpl);
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/atom.ts
 var isGenerator = (value) => value !== null && typeof value === "object" && "next" in value;
+var VALID_VARIANT = /^[a-zA-Z0-9-]+$/;
+var normalizeResolvedValue = (value) => {
+	if (value == null) return {
+		text: "",
+		variant: []
+	};
+	if (typeof value === "string") return {
+		text: value,
+		variant: []
+	};
+	return {
+		text: value.text,
+		variant: (value.variant ?? []).filter((v) => {
+			if (!VALID_VARIANT.test(v)) {
+				console.warn(`[rich-text-editor] Ignoring invalid atom variant "${v}".`);
+				return false;
+			}
+			return true;
+		})
+	};
+};
+var partsFor = (atomName, variant) => [`node--${atomName}`, ...variant.map((v) => `atom-variant--${v}`)].join(" ");
 var AtomView = class {
 	constructor(node, config, atomName) {
+		this.atomName = 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.render(null);
 			this.handleResolvedGenerator(result);
-		} else this.dom.textContent = result ?? "";
+		} else this.render(result);
+	}
+	render(value) {
+		const { text, variant } = normalizeResolvedValue(value);
+		if (this.dom.textContent !== text) this.dom.textContent = text;
+		const parts = partsFor(this.atomName, variant);
+		if (this.dom.getAttribute("part") !== parts) this.dom.setAttribute("part", parts);
 	}
 	async handleResolvedGenerator(generator) {
 		const iterator = generator[Symbol.asyncIterator]();
-		let result;
-		do {
-			result = await iterator.next();
-			this.dom.textContent = result.value ?? "";
-		} while (!result.done);
+		try {
+			let result;
+			do {
+				result = await iterator.next();
+				this.render(result.value ?? null);
+			} while (!result.done);
+		} catch (error) {
+			this.render(null);
+			console.warn("[rich-text-editor] Error while resolving atom value:", error);
+		}
 	}
 };
 var RteAtomFeatureImpl = class extends RteFeatureImpl {
@@ -3246,7 +3306,7 @@ var RteAtomFeatureImpl = class extends RteFeatureImpl {
 				if (serializedValue === null) return document.createDocumentFragment();
 				return [
 					"span",
-					{ part: `node--${this.atomName}` },
+					{ part: partsFor(this.atomName, []) },
 					serializedValue
 				];
 			},

package/unbundled/definition75.cjs

@@ -3,6 +3,7 @@ const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_icon = require("./icon.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
+const require_localized = require("./localized.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
 const require_data_grid_options = require("./data-grid.options.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -173,7 +174,7 @@ var TableCellTemplate = () => {
 * @component table-sorting-button
 * @event {CustomEvent<undefined>} sort - Emitted when sorting button is clicked.
 */
-var TableSortingButton = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
+var TableSortingButton = class extends require_localized.Localized(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement)) {
 	get #nextDirection() {
 		if (!this.direction || this.direction === "none") return "asc";
 		else if (this.direction === "asc") return "desc";
@@ -193,14 +194,26 @@ var TableSortingButton = class extends require_delegates_aria.DelegatesAria(requ
 require_decorate.__decorate([_microsoft_fast_element.attr], TableSortingButton.prototype, "direction", void 0);
 //#endregion
 //#region src/lib/table/table-sorting-button.template.ts
+var getSortStateKey = (x) => {
+	switch (x.direction) {
+		case "asc": return "ascending";
+		case "desc": return "descending";
+		default: return "none";
+	}
+};
+var getSortAnnouncement = (x) => {
+	const key = getSortStateKey(x);
+	const { sortStatus, sortInstruction } = x.locale.tableSortingButton;
+	return `${sortStatus[key]} ${sortInstruction[key]}`;
+};
 var TableSortingButtonTemplate = (context) => {
 	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
-		<template
-			@click="${(x) => x.toggleSort()}"
-			${require_host_semantics.applyHostSemantics({ role: "button" })}
-		>
-			<button>
+		<template @click="${(x) => x.toggleSort()}">
+			<button
+				type="button"
+				${require_delegates_aria.delegateAria({ ariaLabel: (x) => x.ariaLabel || getSortAnnouncement(x) })}
+			>
 				${(x) => {
 		switch (x.direction) {
 			case "asc": return _microsoft_fast_element.html`<${iconTag} name="sort-asc-line"></${iconTag}>`;

package/unbundled/definition75.js

@@ -2,7 +2,8 @@ import { d as createRegisterFunction, t as VividElement, u as defineVividCompone
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Icon } from "./icon.js";
-import { t as DelegatesAria } from "./delegates-aria.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.js";
 import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
 import { t as DataGridCellRole } from "./data-grid.options.js";
 import { attr, html } from "@microsoft/fast-element";
@@ -173,7 +174,7 @@ var TableCellTemplate = () => {
 * @component table-sorting-button
 * @event {CustomEvent<undefined>} sort - Emitted when sorting button is clicked.
 */
-var TableSortingButton = class extends DelegatesAria(VividElement) {
+var TableSortingButton = class extends Localized(DelegatesAria(VividElement)) {
 	get #nextDirection() {
 		if (!this.direction || this.direction === "none") return "asc";
 		else if (this.direction === "asc") return "desc";
@@ -193,14 +194,26 @@ var TableSortingButton = class extends DelegatesAria(VividElement) {
 __decorate([attr], TableSortingButton.prototype, "direction", void 0);
 //#endregion
 //#region src/lib/table/table-sorting-button.template.ts
+var getSortStateKey = (x) => {
+	switch (x.direction) {
+		case "asc": return "ascending";
+		case "desc": return "descending";
+		default: return "none";
+	}
+};
+var getSortAnnouncement = (x) => {
+	const key = getSortStateKey(x);
+	const { sortStatus, sortInstruction } = x.locale.tableSortingButton;
+	return `${sortStatus[key]} ${sortInstruction[key]}`;
+};
 var TableSortingButtonTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	return html`
-		<template
-			@click="${(x) => x.toggleSort()}"
-			${applyHostSemantics({ role: "button" })}
-		>
-			<button>
+		<template @click="${(x) => x.toggleSort()}">
+			<button
+				type="button"
+				${delegateAria({ ariaLabel: (x) => x.ariaLabel || getSortAnnouncement(x) })}
+			>
 				${(x) => {
 		switch (x.direction) {
 			case "asc": return html`<${iconTag} name="sort-asc-line"></${iconTag}>`;

package/unbundled/definition8.cjs

@@ -35,8 +35,8 @@ var CONNOTATION_ICON_MAP = {
 * @slot main - The main content of the Alert.
 * @slot action-items - Add action items to the Alert using this slot.
 * @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<undefined>} open - Fired when the Alert is opened
-* @event {CustomEvent<undefined>} close - Fired when the Alert is closed
+* @event {CustomEvent<undefined>} open - Fired when the Alert is opened.
+* @event {CustomEvent<undefined>} close - Fired when the Alert is closed.
 * @testSelector byHeadline byHeadline
 * @testQuery open open true
 * @testQuery closed open false

package/unbundled/definition8.js

@@ -35,8 +35,8 @@ var CONNOTATION_ICON_MAP = {
 * @slot main - The main content of the Alert.
 * @slot action-items - Add action items to the Alert using this slot.
 * @slot icon - The preferred way to add an icon to the component.
-* @event {CustomEvent<undefined>} open - Fired when the Alert is opened
-* @event {CustomEvent<undefined>} close - Fired when the Alert is closed
+* @event {CustomEvent<undefined>} open - Fired when the Alert is opened.
+* @event {CustomEvent<undefined>} close - Fired when the Alert is closed.
 * @testSelector byHeadline byHeadline
 * @testQuery open open true
 * @testQuery closed open false