@vonage/vivid 5.17.0 → 5.18.0

package/unbundled/definition60.cjs

@@ -1,149 +1,147 @@
 require("./chunk.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_enums = require("./enums.cjs");
-const require_definition = require("./definition23.cjs");
-const require_definition$1 = require("./definition53.cjs");
+const require_slottable_request = require("./slottable-request.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/selectable-box/selectable-box.scss?inline
-var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+let prosemirror_model = require("prosemirror-model");
+//#region src/lib/rich-text-view/rich-text-view.scss?inline
+var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
 //#endregion
-//#region src/lib/selectable-box/selectable-box.ts
+//#region src/lib/rich-text-view/rich-text-view.ts
 /**
 * @public
-* @component selectable-box
-* @slot default - Slot for box's content.
-* @event {CustomEvent<undefined>} change - Fired when the checked state changes
-* @testAction check check #control
-* @testAction uncheck uncheck #control
-* @testQuery checked checked true
-* @testQuery unchecked checked false
-* @testRef control nestedShadow [data-vvd-component].control div.control
+* @component rich-text-view
+* @dynamicSlot `@vonage/vivid#RteChildSlotProps` child - Used for custom rendered children.
 */
-var SelectableBox = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
+var RichTextView = class extends require_vivid_element.VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.checked = false;
-		this.clickableBox = false;
-		this.controlPlacement = "end-stacked";
-		this.tight = false;
-		this.disabled = false;
+		this._slotCounter = 0;
+		this._slottedChildren = /* @__PURE__ */ new Set();
+		this._slotRequests = /* @__PURE__ */ new Set();
+		this._contentElement = null;
 	}
 	/**
 	* @internal
 	*/
-	_handleCheckedChange() {
-		if (this.disabled) return;
-		if (this.controlType === "radio" && this.checked) return;
-		this.checked = !this.checked;
-		if (this.clickableBox) this.$emit("change");
+	viewChanged(oldView, newView) {
+		if (oldView) this._removeStyles();
+		if (newView) this._addStyles(newView);
+		this._updateView();
+	}
+	_addStyles(view) {
+		const config = view[require_slottable_request.impl].config[require_slottable_request.impl];
+		this._styles = new _microsoft_fast_element.ElementStyles(require_slottable_request.sortedContributions(config.features.flatMap((f) => f.getStyles())));
+		this._styles.addStylesTo(this.shadowRoot);
+	}
+	_removeStyles() {
+		if (this._styles) {
+			this._styles.removeStylesFrom(this.shadowRoot);
+			this._styles = void 0;
+		}
+	}
+	_cleanupLightDom() {
+		for (const el of this._slottedChildren) this.removeChild(el);
+		for (const slotName of this._slotRequests) require_slottable_request.dispatchSlottableRequest(this, "child", slotName, require_slottable_request.removeSymbol);
+		this._slottedChildren.clear();
+		this._slotRequests.clear();
+		this._slotCounter = 0;
+	}
+	_updateView() {
+		if (!this._contentElement) return;
+		this._contentElement.innerHTML = "";
+		this._cleanupLightDom();
+		if (this.view) this._contentElement.appendChild(this._renderView(this.view));
+	}
+	_renderView(rteView) {
+		const ctx = rteView[require_slottable_request.impl];
+		if (rteView.type === "node" && rteView.node.type === "doc") rteView = rteView.children;
+		if (rteView.type === "fragment") {
+			const frag = document.createDocumentFragment();
+			for (const child of rteView.content) frag.appendChild(this._renderView(child));
+			return frag;
+		}
+		const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
+		if (customRenderedView) return this._handleCustomRender(rteView, customRenderedView);
+		else return this._renderDefault(rteView);
+	}
+	_handleCustomRender(rteView, customResult) {
+		const slotName = `child-view-${this._slotCounter++}`;
+		const slot = document.createElement("slot");
+		slot.setAttribute("name", slotName);
+		if (customResult === true) {
+			this._slotRequests.add(slotName);
+			require_slottable_request.dispatchSlottableRequest(this, "child", slotName, { view: rteView });
+		} else {
+			const { dom, contentDom = dom } = customResult;
+			const nestedView = document.createElement(this.tagName);
+			nestedView.view = rteView.children;
+			contentDom.appendChild(nestedView);
+			dom.setAttribute("slot", slotName);
+			this.appendChild(dom);
+			this._slottedChildren.add(dom);
+		}
+		return slot;
+	}
+	_renderDefault(view) {
+		const schema = view[require_slottable_request.impl].config[require_slottable_request.impl].schema;
+		if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
+		const item = view.type === "node" ? view.node : view.mark;
+		const pmItem = view.type === "node" ? prosemirror_model.Node.fromJSON(schema, item) : prosemirror_model.Mark.fromJSON(schema, item);
+		const spec = pmItem instanceof prosemirror_model.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
+		const { dom, contentDOM = dom } = prosemirror_model.DOMSerializer.renderSpec(document, spec);
+		const childrenRendered = this._renderView(view.children);
+		contentDOM.appendChild(childrenRendered);
+		return dom;
 	}
 	/**
 	* @internal
 	*/
-	_handleKeydown(event) {
-		if (this.disabled) return true;
-		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) return this._handleCheckedChange();
-		return true;
+	connectedCallback() {
+		super.connectedCallback();
+		this._updateView();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeStyles();
+		this._cleanupLightDom();
 	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "clickable-box",
-	mode: "boolean"
-})], SelectableBox.prototype, "clickableBox", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], SelectableBox.prototype, "connotation", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "control-type" })], SelectableBox.prototype, "controlType", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
-	attribute: "control-placement",
-	mode: "fromView"
-})], SelectableBox.prototype, "controlPlacement", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], RichTextView.prototype, "view", void 0);
 //#endregion
-//#region src/lib/selectable-box/selectable-box.template.ts
-var getClasses = ({ connotation, tight, checked, clickableBox, controlPlacement, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["tight", tight], ["selected", checked], ["clickable", clickableBox], ["readonly", !clickableBox], [`control-placement-${controlPlacement}`, Boolean(controlPlacement)], ["disabled", disabled]);
-function handleControlChange(x) {
-	if (!x.clickableBox) x._handleCheckedChange();
-}
-function checkbox(context) {
-	const checkboxTag = context.tagFor(require_definition.Checkbox);
-	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.controlType !== "radio", _microsoft_fast_element.html`
-		<${checkboxTag}
-			${require_delegates_aria.delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
-			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox ${(x) => x.controlPlacement}"
-			connotation="${(x) => x.connotation === "cta" ? require_enums.Connotation.CTA : require_enums.Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${checkboxTag}>`)} `;
-}
-function radio(context) {
-	const radioTag = context.tagFor(require_definition$1.Radio);
-	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.controlType === "radio", _microsoft_fast_element.html`
-		<${radioTag}
-			${require_delegates_aria.delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
-			@change="${(x) => handleControlChange(x)}"
-			class="control radio ${(x) => x.controlPlacement}"
-			connotation="${(x) => x.connotation === "cta" ? require_enums.Connotation.CTA : require_enums.Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${radioTag}>`)} `;
-}
-var SelectableBoxTemplate = (context) => {
-	return _microsoft_fast_element.html`<template>
-		<div
-			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
-			${require_delegates_aria.delegateAria({
-		role: (x) => x.clickableBox ? "button" : null,
-		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
-		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
-		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
-	})}
-			@keydown="${(x, c) => x._handleKeydown(c.event)}"
-			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
-		>
-			${checkbox(context)} ${radio(context)}
-			<slot></slot>
-		</div>
-	</template>`;
-};
+//#region src/lib/rich-text-view/rich-text-view.template.ts
+var RichTextViewTemplate = () => _microsoft_fast_element.html`<div class="content rich-text" ${(0, _microsoft_fast_element.ref)("_contentElement")}></div>`;
 //#endregion
-//#region src/lib/selectable-box/definition.ts
-/**
-* @internal
-*/
-var selectableBoxDefinition = require_vivid_element.defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [require_definition.checkboxDefinition, require_definition$1.radioDefinition], {
-	styles: selectable_box_default,
+//#region src/lib/rich-text-view/definition.ts
+var richTextViewDefinition = require_vivid_element.defineVividComponent("rich-text-view", RichTextView, RichTextViewTemplate, [], {
+	styles: rich_text_view_default,
 	shadowOptions: { delegatesFocus: true }
 });
 /**
-* Registers the selectable-box element with the design system.
+* Registers the rich-text-view element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSelectableBox = require_vivid_element.createRegisterFunction(selectableBoxDefinition);
+var registerRichTextView = require_vivid_element.createRegisterFunction(richTextViewDefinition);
 //#endregion
-Object.defineProperty(exports, "SelectableBox", {
+Object.defineProperty(exports, "RichTextView", {
 	enumerable: true,
 	get: function() {
-		return SelectableBox;
+		return RichTextView;
 	}
 });
-Object.defineProperty(exports, "registerSelectableBox", {
+Object.defineProperty(exports, "registerRichTextView", {
 	enumerable: true,
 	get: function() {
-		return registerSelectableBox;
+		return registerRichTextView;
 	}
 });
-Object.defineProperty(exports, "selectableBoxDefinition", {
+Object.defineProperty(exports, "richTextViewDefinition", {
 	enumerable: true,
 	get: function() {
-		return selectableBoxDefinition;
+		return richTextViewDefinition;
 	}
 });

package/unbundled/definition60.js

@@ -1,131 +1,129 @@
 import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } 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 Connotation } from "./enums.js";
-import { r as Checkbox, t as checkboxDefinition } from "./definition23.js";
-import { r as Radio, t as radioDefinition } from "./definition53.js";
-import { attr, html, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/selectable-box/selectable-box.scss?inline
-var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+import { c as impl, n as removeSymbol, s as sortedContributions, t as dispatchSlottableRequest } from "./slottable-request.js";
+import { ElementStyles, html, observable, ref } from "@microsoft/fast-element";
+import { DOMSerializer, Mark, Node } from "prosemirror-model";
+//#region src/lib/rich-text-view/rich-text-view.scss?inline
+var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
 //#endregion
-//#region src/lib/selectable-box/selectable-box.ts
+//#region src/lib/rich-text-view/rich-text-view.ts
 /**
 * @public
-* @component selectable-box
-* @slot default - Slot for box's content.
-* @event {CustomEvent<undefined>} change - Fired when the checked state changes
-* @testAction check check #control
-* @testAction uncheck uncheck #control
-* @testQuery checked checked true
-* @testQuery unchecked checked false
-* @testRef control nestedShadow [data-vvd-component].control div.control
+* @component rich-text-view
+* @dynamicSlot `@vonage/vivid#RteChildSlotProps` child - Used for custom rendered children.
 */
-var SelectableBox = class extends DelegatesAria(VividElement) {
+var RichTextView = class extends VividElement {
 	constructor(..._args) {
 		super(..._args);
-		this.checked = false;
-		this.clickableBox = false;
-		this.controlPlacement = "end-stacked";
-		this.tight = false;
-		this.disabled = false;
+		this._slotCounter = 0;
+		this._slottedChildren = /* @__PURE__ */ new Set();
+		this._slotRequests = /* @__PURE__ */ new Set();
+		this._contentElement = null;
 	}
 	/**
 	* @internal
 	*/
-	_handleCheckedChange() {
-		if (this.disabled) return;
-		if (this.controlType === "radio" && this.checked) return;
-		this.checked = !this.checked;
-		if (this.clickableBox) this.$emit("change");
+	viewChanged(oldView, newView) {
+		if (oldView) this._removeStyles();
+		if (newView) this._addStyles(newView);
+		this._updateView();
+	}
+	_addStyles(view) {
+		const config = view[impl].config[impl];
+		this._styles = new ElementStyles(sortedContributions(config.features.flatMap((f) => f.getStyles())));
+		this._styles.addStylesTo(this.shadowRoot);
+	}
+	_removeStyles() {
+		if (this._styles) {
+			this._styles.removeStylesFrom(this.shadowRoot);
+			this._styles = void 0;
+		}
+	}
+	_cleanupLightDom() {
+		for (const el of this._slottedChildren) this.removeChild(el);
+		for (const slotName of this._slotRequests) dispatchSlottableRequest(this, "child", slotName, removeSymbol);
+		this._slottedChildren.clear();
+		this._slotRequests.clear();
+		this._slotCounter = 0;
+	}
+	_updateView() {
+		if (!this._contentElement) return;
+		this._contentElement.innerHTML = "";
+		this._cleanupLightDom();
+		if (this.view) this._contentElement.appendChild(this._renderView(this.view));
+	}
+	_renderView(rteView) {
+		const ctx = rteView[impl];
+		if (rteView.type === "node" && rteView.node.type === "doc") rteView = rteView.children;
+		if (rteView.type === "fragment") {
+			const frag = document.createDocumentFragment();
+			for (const child of rteView.content) frag.appendChild(this._renderView(child));
+			return frag;
+		}
+		const customRenderedView = ctx.options.renderChildView?.(rteView) ?? false;
+		if (customRenderedView) return this._handleCustomRender(rteView, customRenderedView);
+		else return this._renderDefault(rteView);
+	}
+	_handleCustomRender(rteView, customResult) {
+		const slotName = `child-view-${this._slotCounter++}`;
+		const slot = document.createElement("slot");
+		slot.setAttribute("name", slotName);
+		if (customResult === true) {
+			this._slotRequests.add(slotName);
+			dispatchSlottableRequest(this, "child", slotName, { view: rteView });
+		} else {
+			const { dom, contentDom = dom } = customResult;
+			const nestedView = document.createElement(this.tagName);
+			nestedView.view = rteView.children;
+			contentDom.appendChild(nestedView);
+			dom.setAttribute("slot", slotName);
+			this.appendChild(dom);
+			this._slottedChildren.add(dom);
+		}
+		return slot;
+	}
+	_renderDefault(view) {
+		const schema = view[impl].config[impl].schema;
+		if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
+		const item = view.type === "node" ? view.node : view.mark;
+		const pmItem = view.type === "node" ? Node.fromJSON(schema, item) : Mark.fromJSON(schema, item);
+		const spec = pmItem instanceof Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
+		const { dom, contentDOM = dom } = DOMSerializer.renderSpec(document, spec);
+		const childrenRendered = this._renderView(view.children);
+		contentDOM.appendChild(childrenRendered);
+		return dom;
 	}
 	/**
 	* @internal
 	*/
-	_handleKeydown(event) {
-		if (this.disabled) return true;
-		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) return this._handleCheckedChange();
-		return true;
+	connectedCallback() {
+		super.connectedCallback();
+		this._updateView();
+	}
+	/**
+	* @internal
+	*/
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._removeStyles();
+		this._cleanupLightDom();
 	}
 };
-__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
-__decorate([attr({
-	attribute: "clickable-box",
-	mode: "boolean"
-})], SelectableBox.prototype, "clickableBox", void 0);
-__decorate([attr], SelectableBox.prototype, "connotation", void 0);
-__decorate([attr({ attribute: "control-type" })], SelectableBox.prototype, "controlType", void 0);
-__decorate([attr({
-	attribute: "control-placement",
-	mode: "fromView"
-})], SelectableBox.prototype, "controlPlacement", void 0);
-__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
-__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
+__decorate([observable], RichTextView.prototype, "view", void 0);
 //#endregion
-//#region src/lib/selectable-box/selectable-box.template.ts
-var getClasses = ({ connotation, tight, checked, clickableBox, controlPlacement, disabled }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["tight", tight], ["selected", checked], ["clickable", clickableBox], ["readonly", !clickableBox], [`control-placement-${controlPlacement}`, Boolean(controlPlacement)], ["disabled", disabled]);
-function handleControlChange(x) {
-	if (!x.clickableBox) x._handleCheckedChange();
-}
-function checkbox(context) {
-	const checkboxTag = context.tagFor(Checkbox);
-	return html`${when((x) => x.controlType !== "radio", html`
-		<${checkboxTag}
-			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
-			@change="${(x) => handleControlChange(x)}"
-			class="control checkbox ${(x) => x.controlPlacement}"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${checkboxTag}>`)} `;
-}
-function radio(context) {
-	const radioTag = context.tagFor(Radio);
-	return html`${when((x) => x.controlType === "radio", html`
-		<${radioTag}
-			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
-			@change="${(x) => handleControlChange(x)}"
-			class="control radio ${(x) => x.controlPlacement}"
-			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${radioTag}>`)} `;
-}
-var SelectableBoxTemplate = (context) => {
-	return html`<template>
-		<div
-			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
-			${delegateAria({
-		role: (x) => x.clickableBox ? "button" : null,
-		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
-		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
-		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
-	})}
-			@keydown="${(x, c) => x._handleKeydown(c.event)}"
-			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
-		>
-			${checkbox(context)} ${radio(context)}
-			<slot></slot>
-		</div>
-	</template>`;
-};
+//#region src/lib/rich-text-view/rich-text-view.template.ts
+var RichTextViewTemplate = () => html`<div class="content rich-text" ${ref("_contentElement")}></div>`;
 //#endregion
-//#region src/lib/selectable-box/definition.ts
-/**
-* @internal
-*/
-var selectableBoxDefinition = defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [checkboxDefinition, radioDefinition], {
-	styles: selectable_box_default,
+//#region src/lib/rich-text-view/definition.ts
+var richTextViewDefinition = defineVividComponent("rich-text-view", RichTextView, RichTextViewTemplate, [], {
+	styles: rich_text_view_default,
 	shadowOptions: { delegatesFocus: true }
 });
 /**
-* Registers the selectable-box element with the design system.
+* Registers the rich-text-view element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerSelectableBox = createRegisterFunction(selectableBoxDefinition);
+var registerRichTextView = createRegisterFunction(richTextViewDefinition);
 //#endregion
-export { selectableBoxDefinition as n, SelectableBox as r, registerSelectableBox as t };
+export { richTextViewDefinition as n, RichTextView as r, registerRichTextView as t };