@vonage/vivid 5.18.0 → 5.19.0

package/unbundled/definition55.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as CheckableFormAssociated } from "./form-associated.js";
 import { t as FormElement } from "./form-element.js";
@@ -6,7 +6,7 @@ import { t as WithErrorText } from "./with-error-text.js";
 import { Updates, attr, html, observable, when } from "@microsoft/fast-element";
 import { classNames, keySpace } from "@microsoft/fast-web-utilities";
 //#region src/lib/radio/radio.scss?inline
-var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+var radio_default = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/radio/radio.ts
 /**
@@ -51,6 +51,28 @@ var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(Vivi
 			return true;
 		};
 		this.proxy = document.createElement("input");
+		this.#validateValueMissingWithSiblings = () => {
+			const siblings = this.#radioSiblings;
+			const group = this.#radioGroup;
+			if (siblings && siblings.length > 1) {
+				if (siblings.some((x) => x.checked)) {
+					this.setValidity({ valueMissing: false });
+					this.errorValidationMessage = "";
+					if (group) group.errorValidationMessage = "";
+				}
+			}
+		};
+		this.#syncSiblingsRequiredValidationStatus = () => {
+			if (this.elementInternals && !this.validity.valueMissing) {
+				const siblings = this.#radioSiblings;
+				const group = this.#radioGroup;
+				if (siblings && siblings.length > 1) siblings.forEach((x) => {
+					x.elementInternals.setValidity({ valueMissing: false });
+					x.errorValidationMessage = "";
+					if (group) group.errorValidationMessage = "";
+				});
+			}
+		};
 		this.proxy.setAttribute("type", "radio");
 		this.proxy.setAttribute("name", this.name);
 		this.checked = this.defaultChecked;
@@ -103,28 +125,8 @@ var Radio = class extends WithErrorText(FormElement(CheckableFormAssociated(Vivi
 		if (parentGroup) return parentGroup;
 		return null;
 	}
-	#validateValueMissingWithSiblings = () => {
-		const siblings = this.#radioSiblings;
-		const group = this.#radioGroup;
-		if (siblings && siblings.length > 1) {
-			if (siblings.some((x) => x.checked)) {
-				this.setValidity({ valueMissing: false });
-				this.errorValidationMessage = "";
-				if (group) group.errorValidationMessage = "";
-			}
-		}
-	};
-	#syncSiblingsRequiredValidationStatus = () => {
-		if (this.elementInternals && !this.validity.valueMissing) {
-			const siblings = this.#radioSiblings;
-			const group = this.#radioGroup;
-			if (siblings && siblings.length > 1) siblings.forEach((x) => {
-				x.elementInternals.setValidity({ valueMissing: false });
-				x.errorValidationMessage = "";
-				if (group) group.errorValidationMessage = "";
-			});
-		}
-	};
+	#validateValueMissingWithSiblings;
+	#syncSiblingsRequiredValidationStatus;
 	/**
 	* @internal
 	*/

package/unbundled/definition56.cjs

@@ -26,7 +26,8 @@ var RadioGroup = class extends require_mixins.WithFeedback(require_vivid_element
 		this.orientation = _microsoft_fast_web_utilities.Orientation.horizontal;
 		this.slottedRadioButtons = [];
 		this.radioErrorHandler = (e) => {
-			this.errorValidationMessage = e.target.errorValidationMessage || "";
+			const radio = e.target;
+			this.errorValidationMessage = radio.errorValidationMessage || "";
 		};
 		this.radioChangeHandler = (e) => {
 			const changedRadio = e.target;

package/unbundled/definition56.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as delegateAria } from "./delegates-aria.js";
 import { n as keyArrowRight$1, t as keyArrowLeft$1 } from "./key-codes.js";
@@ -25,7 +25,8 @@ var RadioGroup = class extends WithFeedback(VividElement) {
 		this.orientation = Orientation.horizontal;
 		this.slottedRadioButtons = [];
 		this.radioErrorHandler = (e) => {
-			this.errorValidationMessage = e.target.errorValidationMessage || "";
+			const radio = e.target;
+			this.errorValidationMessage = radio.errorValidationMessage || "";
 		};
 		this.radioChangeHandler = (e) => {
 			const changedRadio = e.target;

package/unbundled/definition57.cjs

@@ -41,6 +41,7 @@ var Direction = {
 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;
@@ -62,8 +63,68 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		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;
+				}
+			}
+		};
+		this.#onDragMove = (e) => {
+			if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
+			const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+			const value = this.#calculateValueFromMouseEvent(sourceEvent);
+			this.#updateValues({ [this._draggingThumb]: `${this.#roundToNearestStep(this._draggingThumb, value)}` });
+		};
+		this.#onDragEnd = () => {
+			this._draggingThumb = false;
+			this.#unregisterDragListeners();
+		};
 	}
-	#isInternalValueUpdate = false;
+	#isInternalValueUpdate;
 	/**
 	* @internal
 	*/
@@ -239,7 +300,7 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 	#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);
 	}
-	#isNonVisibleFocus = false;
+	#isNonVisibleFocus;
 	#focusThumbNonVisibly(thumb) {
 		this.#isNonVisibleFocus = true;
 		thumb.focus();
@@ -303,55 +364,13 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		this.#focusThumbNonVisibly(this.#thumbs[thumb]);
 		this.#registerDragHandlers();
 	}
-	#onThumbFocus = (e) => {
-		if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
-		this.#isNonVisibleFocus = false;
-	};
-	#onThumbBlur = () => {
-		this._visiblyFocusedThumb = null;
-	};
-	#onVisibilityChange = () => {
-		if (document.hidden && (this.shadowRoot.activeElement === this._startThumbEl || this.shadowRoot.activeElement === this._endThumbEl)) this.#isNonVisibleFocus = true;
-	};
-	#onMouseOver = (e) => {
-		this._hoveredThumb = this.#getThumbIdFromEvent(e);
-	};
-	#onMouseOut = () => {
-		this._hoveredThumb = null;
-	};
-	#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();
-	};
-	#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;
-			}
-		}
-	};
+	#onThumbFocus;
+	#onThumbBlur;
+	#onVisibilityChange;
+	#onMouseOver;
+	#onMouseOut;
+	#onThumbMousedown;
+	#onThumbKeydown;
 	#registerDragHandlers() {
 		window.addEventListener("mousemove", this.#onDragMove, { passive: true });
 		window.addEventListener("touchmove", this.#onDragMove, { passive: true });
@@ -366,16 +385,8 @@ var RangeSlider = class extends require_localized.Localized(require_form_element
 		window.removeEventListener("touchmove", this.#onDragMove);
 		window.removeEventListener("touchend", this.#onDragEnd);
 	}
-	#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)}` });
-	};
-	#onDragEnd = () => {
-		this._draggingThumb = false;
-		this.#unregisterDragListeners();
-	};
+	#onDragMove;
+	#onDragEnd;
 };
 require_decorate.__decorate([_microsoft_fast_element.observable], RangeSlider.prototype, "start", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({

package/unbundled/definition57.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { c as createRegisterFunction, s as defineVividComponent, t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as FormAssociated } from "./form-associated.js";
 import { t as FormElement } from "./form-element.js";
@@ -40,6 +40,7 @@ var Direction$1 = {
 var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElement))) {
 	constructor(..._args) {
 		super(..._args);
+		this.#isInternalValueUpdate = false;
 		this.start = "";
 		this.end = "";
 		this.min = 0;
@@ -61,8 +62,68 @@ var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElemen
 		this._startThumbCss = "";
 		this._endThumbCss = "";
 		this._selectedRangeCss = "";
+		this.#isNonVisibleFocus = false;
+		this.#onThumbFocus = (e) => {
+			if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
+			this.#isNonVisibleFocus = false;
+		};
+		this.#onThumbBlur = () => {
+			this._visiblyFocusedThumb = null;
+		};
+		this.#onVisibilityChange = () => {
+			if (document.hidden && (this.shadowRoot.activeElement === this._startThumbEl || this.shadowRoot.activeElement === this._endThumbEl)) this.#isNonVisibleFocus = true;
+		};
+		this.#onMouseOver = (e) => {
+			this._hoveredThumb = this.#getThumbIdFromEvent(e);
+		};
+		this.#onMouseOut = () => {
+			this._hoveredThumb = null;
+		};
+		this.#onThumbMousedown = (event) => {
+			if (this.disabled || event.defaultPrevented) return;
+			let target = event.target;
+			if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) target = this._startThumbEl;
+			this.#focusThumbNonVisibly(target);
+			this._draggingThumb = this.#getThumbId(target);
+			this.#registerDragHandlers();
+		};
+		this.#onThumbKeydown = (e) => {
+			const thumb = this.#getThumbIdFromEvent(e);
+			this._visiblyFocusedThumb = thumb;
+			if (e.key === keyHome) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
+			} else if (e.key === keyEnd) {
+				e.preventDefault();
+				this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
+			} else {
+				if (e.shiftKey) return;
+				switch (e.key) {
+					case keyArrowRight$1:
+					case keyArrowDown:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction$1.Increment);
+						break;
+					case keyArrowLeft$1:
+					case keyArrowUp:
+						e.preventDefault();
+						this.#applyStep(thumb, Direction$1.Decrement);
+						break;
+				}
+			}
+		};
+		this.#onDragMove = (e) => {
+			if (this.disabled || e.defaultPrevented || !this._draggingThumb) return;
+			const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+			const value = this.#calculateValueFromMouseEvent(sourceEvent);
+			this.#updateValues({ [this._draggingThumb]: `${this.#roundToNearestStep(this._draggingThumb, value)}` });
+		};
+		this.#onDragEnd = () => {
+			this._draggingThumb = false;
+			this.#unregisterDragListeners();
+		};
 	}
-	#isInternalValueUpdate = false;
+	#isInternalValueUpdate;
 	/**
 	* @internal
 	*/
@@ -238,7 +299,7 @@ var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElemen
 	#roundToNearestStep(thumb, value) {
 		return limit(this.#thumbConstraints[thumb].min, this.#thumbConstraints[thumb].max, roundToStepValue(value - this.min, this.step) + this.min);
 	}
-	#isNonVisibleFocus = false;
+	#isNonVisibleFocus;
 	#focusThumbNonVisibly(thumb) {
 		this.#isNonVisibleFocus = true;
 		thumb.focus();
@@ -302,55 +363,13 @@ var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElemen
 		this.#focusThumbNonVisibly(this.#thumbs[thumb]);
 		this.#registerDragHandlers();
 	}
-	#onThumbFocus = (e) => {
-		if (!this.#isNonVisibleFocus) this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
-		this.#isNonVisibleFocus = false;
-	};
-	#onThumbBlur = () => {
-		this._visiblyFocusedThumb = null;
-	};
-	#onVisibilityChange = () => {
-		if (document.hidden && (this.shadowRoot.activeElement === this._startThumbEl || this.shadowRoot.activeElement === this._endThumbEl)) this.#isNonVisibleFocus = true;
-	};
-	#onMouseOver = (e) => {
-		this._hoveredThumb = this.#getThumbIdFromEvent(e);
-	};
-	#onMouseOut = () => {
-		this._hoveredThumb = null;
-	};
-	#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();
-	};
-	#onThumbKeydown = (e) => {
-		const thumb = this.#getThumbIdFromEvent(e);
-		this._visiblyFocusedThumb = thumb;
-		if (e.key === keyHome) {
-			e.preventDefault();
-			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
-		} else if (e.key === keyEnd) {
-			e.preventDefault();
-			this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
-		} else {
-			if (e.shiftKey) return;
-			switch (e.key) {
-				case keyArrowRight$1:
-				case keyArrowDown:
-					e.preventDefault();
-					this.#applyStep(thumb, Direction$1.Increment);
-					break;
-				case keyArrowLeft$1:
-				case keyArrowUp:
-					e.preventDefault();
-					this.#applyStep(thumb, Direction$1.Decrement);
-					break;
-			}
-		}
-	};
+	#onThumbFocus;
+	#onThumbBlur;
+	#onVisibilityChange;
+	#onMouseOver;
+	#onMouseOut;
+	#onThumbMousedown;
+	#onThumbKeydown;
 	#registerDragHandlers() {
 		window.addEventListener("mousemove", this.#onDragMove, { passive: true });
 		window.addEventListener("touchmove", this.#onDragMove, { passive: true });
@@ -365,16 +384,8 @@ var RangeSlider = class extends Localized(FormElement(FormAssociated(VividElemen
 		window.removeEventListener("touchmove", this.#onDragMove);
 		window.removeEventListener("touchend", this.#onDragEnd);
 	}
-	#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)}` });
-	};
-	#onDragEnd = () => {
-		this._draggingThumb = false;
-		this.#unregisterDragListeners();
-	};
+	#onDragMove;
+	#onDragEnd;
 };
 __decorate([observable], RangeSlider.prototype, "start", void 0);
 __decorate([attr({

package/unbundled/definition58.cjs

@@ -25,7 +25,7 @@ let prosemirror_dropcursor = require("prosemirror-dropcursor");
 let prosemirror_gapcursor = require("prosemirror-gapcursor");
 let prosemirror_history = require("prosemirror-history");
 let dompurify = require("dompurify");
-dompurify = require_chunk.__toESM(dompurify);
+dompurify = require_chunk.__toESM(dompurify, 1);
 let prosemirror_inputrules = require("prosemirror-inputrules");
 let prosemirror_transform = require("prosemirror-transform");
 let prosemirror_schema_basic = require("prosemirror-schema-basic");
@@ -193,7 +193,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Popover.protot
 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.6/node_modules/prosemirror-view/style/prosemirror.css?inline
+//#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
@@ -230,7 +230,7 @@ var FeatureState = class {
 };
 //#endregion
 //#region src/lib/rich-text-editor/rte/features/internal/core.style.scss?inline
-var core_style_default = ".ProseMirror{padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1}.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%)}";
+var core_style_default = ".ProseMirror{padding:var(--editor-padding-block) var(--editor-padding-inline);outline:none;flex:1}.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/utils/ui.ts
 var isPropBinding = (prop) => typeof prop === "function";
@@ -312,6 +312,7 @@ var createButton = (ctx, props) => {
 	const size = () => variant() === "toolbar" ? "super-condensed" : "condensed";
 	const appearanceInactive = () => variant() === "popover-primary" ? "outlined" : "ghost-light";
 	const appearance = () => ctx.evalProp(props.active) ? "filled" : 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, {
@@ -320,8 +321,9 @@ var createButton = (ctx, props) => {
 		disabled,
 		icon: props.icon,
 		autofocus: props.autofocus,
-		connotation: props.connotation,
-		[props.icon ? "ariaLabel" : "label"]: props.label
+		connotation,
+		[props.icon ? "ariaLabel" : "label"]: props.label,
+		ariaPressed: () => ctx.evalProp(props.active) ? "true" : null
 	}, [on("click", props.onClick, (onClick) => () => {
 		if (!onClick()) ctx.view.focus();
 	})]);
@@ -367,6 +369,7 @@ var createMenuItem = (ctx, props) => {
 	return item;
 };
 var createButtonGroup = (ctx, props) => createDiv(ctx, {
+	slot: props.slot,
 	className: "ui-button-group",
 	children: props.children
 });
@@ -647,12 +650,14 @@ var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
 				},
 				view: (view) => {
 					const popovers = view.dom.getRootNode().querySelector(".popovers");
-					const updatePopoversDisabled = () => {
-						popovers.classList.toggle("popovers--disabled", this.disabled.getValue(rte));
+					const updateDisabled = () => {
+						const disabled = this.disabled.getValue(rte);
+						popovers.classList.toggle("popovers--disabled", disabled);
+						view.dom.parentElement.classList.toggle("editor--disabled", disabled);
 					};
-					updatePopoversDisabled();
+					updateDisabled();
 					return { update: () => {
-						updatePopoversDisabled();
+						updateDisabled();
 					} };
 				}
 			})),
@@ -1446,7 +1451,7 @@ var RteToolbarFeatureImpl = class extends require_slottable_request.RteFeatureIm
 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}";
+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 {
@@ -2246,23 +2251,26 @@ var RteAlignmentFeatureImpl = class extends require_slottable_request.RteFeature
 						return alignments.find((a) => a.value === currentAlign)?.icon ?? "align-left-line";
 					}
 				}),
-				children: [createButtonGroup(ctx, { children: alignments.map((align, index) => createButton(ctx, {
-					icon: align.icon,
-					label: () => ctx.rte.getLocale().richTextEditor.alignments[align.label],
+				children: [createButtonGroup(ctx, {
 					slot: "header",
-					noTooltip: true,
-					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);
-					}
-				})) })]
+					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)];
 	}