@vonage/vivid 5.21.0 → 5.23.0

package/unbundled/definition60.cjs

@@ -113,12 +113,20 @@ var Kind = {
 	default: {
 		placement: void 0,
 		placementStrategy: require_definition$2.PlacementStrategy.AutoPlacementHorizontal,
+		shiftCrossAxis: false,
 		strategy: "absolute"
 	},
 	autocomplete: {
 		placement: "bottom-start",
 		placementStrategy: require_definition$2.PlacementStrategy.Flip,
+		shiftCrossAxis: false,
 		strategy: "fixed"
+	},
+	imageOptions: {
+		placement: "bottom",
+		placementStrategy: require_definition$2.PlacementStrategy.Flip,
+		shiftCrossAxis: true,
+		strategy: "absolute"
 	}
 };
 var popoverTemplate = (context) => {
@@ -127,6 +135,7 @@ var popoverTemplate = (context) => {
 		:anchor="${(x) => x.anchorEl}"
 		:placement="${(x) => Kind[x.kind].placement}"
 		:placementStrategy="${(x) => Kind[x.kind].placementStrategy}"
+		:shiftCrossAxis="${(x) => Kind[x.kind].shiftCrossAxis}"
 		:open="${(x) => x.open}"
 		:offset="${(x) => x.offset}"
 		:strategy="${(x) => Kind[x.kind].strategy}"
@@ -316,6 +325,8 @@ var RteCoreImpl = class extends require_slottable_request.RteFeatureImpl {
 		super(..._args);
 		this.name = "RteCore";
 		this.disabled = new FeatureState(false);
+		this.scrollThreshold = void 0;
+		this.scrollMargin = void 0;
 	}
 	getStyles() {
 		return [
@@ -595,6 +606,15 @@ var RteInstance = class {
 		else tr.setSelection(prosemirror_state.TextSelection.atStart(tr.doc));
 		dispatchTransaction(tr);
 	}
+	/**
+	* Scrolls the cursor into view.
+	* Has no effect if the editor is not currently mounted.
+	*/
+	scrollIntoView() {
+		const instance = this[require_slottable_request.impl];
+		if (!instance.view) return;
+		instance.dispatchTransaction(instance.tr.scrollIntoView());
+	}
 };
 var RteInstanceImpl = class {
 	getFeature(name) {
@@ -649,12 +669,15 @@ var RteInstanceImpl = class {
 		this.view?.updateState(this.state);
 	}
 	createView(target) {
+		const core = this.config.featureMap.get("RteCore");
 		this.view = new prosemirror_view.EditorView((editor) => {
 			editor.part = "editor";
 			target.appendChild(editor);
 		}, {
 			state: this.state,
-			dispatchTransaction: this.dispatchTransaction
+			dispatchTransaction: this.dispatchTransaction,
+			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
+			...core?.scrollMargin !== void 0 && { scrollMargin: core.scrollMargin }
 		});
 	}
 	destroyViewIfNeeded() {
@@ -1365,6 +1388,20 @@ var RteBaseImpl = class extends require_slottable_request.RteFeatureImpl {
 			},
 			set disabled(value) {
 				core.disabled.setValue(rte, value);
+			},
+			get scrollThreshold() {
+				return core.scrollThreshold;
+			},
+			set scrollThreshold(value) {
+				core.scrollThreshold = value;
+				rte.view?.setProps({ scrollThreshold: value });
+			},
+			get scrollMargin() {
+				return core.scrollMargin;
+			},
+			set scrollMargin(value) {
+				core.scrollMargin = value;
+				rte.view?.setProps({ scrollMargin: value });
 			}
 		};
 	}
@@ -1955,7 +1992,7 @@ var RteTextColorPickerFeatureImpl = class extends require_slottable_request.RteF
 			if (selectionColor === null) selectionColor = observedColor ?? null;
 			else if (observedColor !== selectionColor) selectionColor = mixedColor;
 		};
-		state.doc.nodesBetween(from, to, (node, pos, parent) => {
+		state.doc.nodesBetween(from, to, (node, _pos, parent) => {
 			if (selectionColor === mixedColor) return false;
 			if (!node.isLeaf) {
 				if (node.type.allowsMarkType(textColor) && node.childCount === 0) observeColor(this.defaultColorForNode?.[node.type.name]);
@@ -2704,7 +2741,7 @@ var InlineImageView = class {
 		this.img.className = "inline-image";
 		this.update(node);
 		this.img.addEventListener("load", () => {
-			const pos = this.getPos?.();
+			const pos = this.getPos();
 			if (pos) {
 				const { state, dispatch } = this.view;
 				const currentNode = state.doc.nodeAt(pos);
@@ -2811,6 +2848,7 @@ var RteInlineImageFeatureImpl = class extends require_slottable_request.RteFeatu
 					shouldReturnFocusToEditor: true
 				});
 				popover = rte.createComponent(Popover);
+				popover.kind = "imageOptions";
 				popover.offset = 4;
 				const content = createDiv(ctx, {
 					className: "inline-image-popover",
@@ -2871,7 +2909,7 @@ var RteInlineImageFeatureImpl = class extends require_slottable_request.RteFeatu
 		} }))];
 	}
 	calculateSmallWidth(naturalWidth) {
-		return Math.min(300, naturalWidth / 2) + "px";
+		return `${Math.min(300, naturalWidth / 2)}px`;
 	}
 	getSelectedInlineImage(state) {
 		const sel = state.selection;
@@ -3004,13 +3042,13 @@ var RteFileHandlerFeatureImpl = class extends require_slottable_request.RteFeatu
 			if (resolved.type === "error") console.error("Error in handleFiles handler:", resolved.error);
 		};
 		return [this.contribution(insertPointPlaceholderPlugin), this.contribution(new prosemirror_state.Plugin({ props: {
-			handlePaste: (view, event) => {
+			handlePaste: (_view, event) => {
 				const files = Array.from(event.clipboardData.files);
 				if (!files.length) return false;
 				handleFiles(files, { type: "selection" });
 				return true;
 			},
-			handleDrop: (view, event, slice, moved) => {
+			handleDrop: (view, event) => {
 				const files = Array.from(event.dataTransfer.files);
 				if (!files.length) return false;
 				let target = view.posAtCoords({
@@ -3039,7 +3077,7 @@ var RteDropHandlerFeatureImpl = class extends require_slottable_request.RteFeatu
 		this.config = config;
 		this.name = "RteDebugFeature";
 	}
-	getPlugins(rte) {
+	getPlugins() {
 		const dragOverResults = /* @__PURE__ */ new WeakMap();
 		let lastResult = false;
 		const onDragOver = (event) => {
@@ -3077,7 +3115,7 @@ var RteDropHandlerFeatureImpl = class extends require_slottable_request.RteFeatu
 				viewport.removeEventListener("dragleave", onDragLeave);
 			} };
 		} })), this.contribution(new prosemirror_state.Plugin({ props: { handleDOMEvents: {
-			dragover: (view, event) => {
+			dragover: (_view, event) => {
 				const result = this.config.onViewportDragOver?.(event) ?? false;
 				dragOverResults.set(event, result);
 				lastResult = result;
@@ -3088,7 +3126,7 @@ var RteDropHandlerFeatureImpl = class extends require_slottable_request.RteFeatu
 				}
 				return false;
 			},
-			drop: (view, event) => {
+			drop: () => {
 				return lastResult;
 			}
 		} } }), require_slottable_request.contributionPriority.high)];

package/unbundled/definition60.js

@@ -111,12 +111,20 @@ var Kind = {
 	default: {
 		placement: void 0,
 		placementStrategy: PlacementStrategy.AutoPlacementHorizontal,
+		shiftCrossAxis: false,
 		strategy: "absolute"
 	},
 	autocomplete: {
 		placement: "bottom-start",
 		placementStrategy: PlacementStrategy.Flip,
+		shiftCrossAxis: false,
 		strategy: "fixed"
+	},
+	imageOptions: {
+		placement: "bottom",
+		placementStrategy: PlacementStrategy.Flip,
+		shiftCrossAxis: true,
+		strategy: "absolute"
 	}
 };
 var popoverTemplate = (context) => {
@@ -125,6 +133,7 @@ var popoverTemplate = (context) => {
 		:anchor="${(x) => x.anchorEl}"
 		:placement="${(x) => Kind[x.kind].placement}"
 		:placementStrategy="${(x) => Kind[x.kind].placementStrategy}"
+		:shiftCrossAxis="${(x) => Kind[x.kind].shiftCrossAxis}"
 		:open="${(x) => x.open}"
 		:offset="${(x) => x.offset}"
 		:strategy="${(x) => Kind[x.kind].strategy}"
@@ -314,6 +323,8 @@ var RteCoreImpl = class extends RteFeatureImpl {
 		super(..._args);
 		this.name = "RteCore";
 		this.disabled = new FeatureState(false);
+		this.scrollThreshold = void 0;
+		this.scrollMargin = void 0;
 	}
 	getStyles() {
 		return [
@@ -593,6 +604,15 @@ var RteInstance = class {
 		else tr.setSelection(TextSelection.atStart(tr.doc));
 		dispatchTransaction(tr);
 	}
+	/**
+	* Scrolls the cursor into view.
+	* Has no effect if the editor is not currently mounted.
+	*/
+	scrollIntoView() {
+		const instance = this[impl];
+		if (!instance.view) return;
+		instance.dispatchTransaction(instance.tr.scrollIntoView());
+	}
 };
 var RteInstanceImpl = class {
 	getFeature(name) {
@@ -647,12 +667,15 @@ var RteInstanceImpl = class {
 		this.view?.updateState(this.state);
 	}
 	createView(target) {
+		const core = this.config.featureMap.get("RteCore");
 		this.view = new EditorView((editor) => {
 			editor.part = "editor";
 			target.appendChild(editor);
 		}, {
 			state: this.state,
-			dispatchTransaction: this.dispatchTransaction
+			dispatchTransaction: this.dispatchTransaction,
+			...core?.scrollThreshold !== void 0 && { scrollThreshold: core.scrollThreshold },
+			...core?.scrollMargin !== void 0 && { scrollMargin: core.scrollMargin }
 		});
 	}
 	destroyViewIfNeeded() {
@@ -1363,6 +1386,20 @@ var RteBaseImpl = class extends RteFeatureImpl {
 			},
 			set disabled(value) {
 				core.disabled.setValue(rte, value);
+			},
+			get scrollThreshold() {
+				return core.scrollThreshold;
+			},
+			set scrollThreshold(value) {
+				core.scrollThreshold = value;
+				rte.view?.setProps({ scrollThreshold: value });
+			},
+			get scrollMargin() {
+				return core.scrollMargin;
+			},
+			set scrollMargin(value) {
+				core.scrollMargin = value;
+				rte.view?.setProps({ scrollMargin: value });
 			}
 		};
 	}
@@ -1953,7 +1990,7 @@ var RteTextColorPickerFeatureImpl = class extends RteFeatureImpl {
 			if (selectionColor === null) selectionColor = observedColor ?? null;
 			else if (observedColor !== selectionColor) selectionColor = mixedColor;
 		};
-		state.doc.nodesBetween(from, to, (node, pos, parent) => {
+		state.doc.nodesBetween(from, to, (node, _pos, parent) => {
 			if (selectionColor === mixedColor) return false;
 			if (!node.isLeaf) {
 				if (node.type.allowsMarkType(textColor) && node.childCount === 0) observeColor(this.defaultColorForNode?.[node.type.name]);
@@ -2702,7 +2739,7 @@ var InlineImageView = class {
 		this.img.className = "inline-image";
 		this.update(node);
 		this.img.addEventListener("load", () => {
-			const pos = this.getPos?.();
+			const pos = this.getPos();
 			if (pos) {
 				const { state, dispatch } = this.view;
 				const currentNode = state.doc.nodeAt(pos);
@@ -2809,6 +2846,7 @@ var RteInlineImageFeatureImpl = class extends RteFeatureImpl {
 					shouldReturnFocusToEditor: true
 				});
 				popover = rte.createComponent(Popover);
+				popover.kind = "imageOptions";
 				popover.offset = 4;
 				const content = createDiv(ctx, {
 					className: "inline-image-popover",
@@ -2869,7 +2907,7 @@ var RteInlineImageFeatureImpl = class extends RteFeatureImpl {
 		} }))];
 	}
 	calculateSmallWidth(naturalWidth) {
-		return Math.min(300, naturalWidth / 2) + "px";
+		return `${Math.min(300, naturalWidth / 2)}px`;
 	}
 	getSelectedInlineImage(state) {
 		const sel = state.selection;
@@ -3002,13 +3040,13 @@ var RteFileHandlerFeatureImpl = class extends RteFeatureImpl {
 			if (resolved.type === "error") console.error("Error in handleFiles handler:", resolved.error);
 		};
 		return [this.contribution(insertPointPlaceholderPlugin), this.contribution(new Plugin({ props: {
-			handlePaste: (view, event) => {
+			handlePaste: (_view, event) => {
 				const files = Array.from(event.clipboardData.files);
 				if (!files.length) return false;
 				handleFiles(files, { type: "selection" });
 				return true;
 			},
-			handleDrop: (view, event, slice, moved) => {
+			handleDrop: (view, event) => {
 				const files = Array.from(event.dataTransfer.files);
 				if (!files.length) return false;
 				let target = view.posAtCoords({
@@ -3037,7 +3075,7 @@ var RteDropHandlerFeatureImpl = class extends RteFeatureImpl {
 		this.config = config;
 		this.name = "RteDebugFeature";
 	}
-	getPlugins(rte) {
+	getPlugins() {
 		const dragOverResults = /* @__PURE__ */ new WeakMap();
 		let lastResult = false;
 		const onDragOver = (event) => {
@@ -3075,7 +3113,7 @@ var RteDropHandlerFeatureImpl = class extends RteFeatureImpl {
 				viewport.removeEventListener("dragleave", onDragLeave);
 			} };
 		} })), this.contribution(new Plugin({ props: { handleDOMEvents: {
-			dragover: (view, event) => {
+			dragover: (_view, event) => {
 				const result = this.config.onViewportDragOver?.(event) ?? false;
 				dragOverResults.set(event, result);
 				lastResult = result;
@@ -3086,7 +3124,7 @@ var RteDropHandlerFeatureImpl = class extends RteFeatureImpl {
 				}
 				return false;
 			},
-			drop: (view, event) => {
+			drop: () => {
 				return lastResult;
 			}
 		} } }), contributionPriority.high)];

package/unbundled/definition61.cjs

@@ -200,7 +200,10 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 	* @internal
 	*/
 	focusinHandler(e) {
-		if (!this.multiple) return super.focusinHandler(e);
+		if (!this.multiple) {
+			super.focusinHandler(e);
+			return;
+		}
 		/* v8 ignore else -- @preserve */
 		if (!this.shouldSkipFocus && e.target === e.currentTarget) {
 			this.uncheckAllOptions();
@@ -290,7 +293,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 			_microsoft_fast_element.Updates.enqueue(() => this.focus());
 			return;
 		}
-		const didClose = prev === true && next === false;
+		const didClose = prev && !next;
 		const selectionChangedWhileOpen = this.indexWhenOpened !== this.selectedIndex;
 		if (didClose && selectionChangedWhileOpen) this.updateValue(true);
 	}
@@ -484,7 +487,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 				}
 			default:
 				/* v8 ignore else -- @preserve */
-				if (key.length === 1) this.handleTypeAhead(`${key}`);
+				if (key.length === 1) this.handleTypeAhead(key);
 				return;
 		}
 	}
@@ -617,7 +620,7 @@ var Select = class extends require_mixins.WithLightDOMFeedback(require_with_cont
 	* @internal
 	*/
 	_onClearButtonClick() {
-		if (this.multiple) this.selectedOptions?.forEach((o) => {
+		if (this.multiple) this.selectedOptions.forEach((o) => {
 			/* v8 ignore else -- @preserve */
 			if (!o.disabled) o.selected = false;
 		});
@@ -764,7 +767,10 @@ function renderControl(context) {
 */
 function ifNotFromFeedback(handler) {
 	return (x, c) => {
-		if (!c.event.composedPath().includes(x._feedbackWrapper)) return handler(x, c.event);
+		if (!c.event.composedPath().includes(x._feedbackWrapper)) {
+			handler(x, c.event);
+			return;
+		}
 		return true;
 	};
 }
@@ -786,7 +792,7 @@ var SelectTemplate = (context) => {
 			@focusin="${ifNotFromFeedback((x, e) => x.focusinHandler(e))}"
 			@focusout="${ifNotFromFeedback((x, e) => x.focusoutHandler(e))}"
 			@keydown="${ifNotFromFeedback((x, e) => {
-		x.open && require_dialog.handleEscapeKeyAndStopPropogation(e);
+		if (x.open) require_dialog.handleEscapeKeyAndStopPropogation(e);
 		return x.keydownHandler(e);
 	})}"
 			@mousedown="${ifNotFromFeedback((x, e) => x.mousedownHandler(e))}"

package/unbundled/definition61.js

@@ -199,7 +199,10 @@ var Select = class extends WithLightDOMFeedback(WithContextualHelp(WithErrorText
 	* @internal
 	*/
 	focusinHandler(e) {
-		if (!this.multiple) return super.focusinHandler(e);
+		if (!this.multiple) {
+			super.focusinHandler(e);
+			return;
+		}
 		/* v8 ignore else -- @preserve */
 		if (!this.shouldSkipFocus && e.target === e.currentTarget) {
 			this.uncheckAllOptions();
@@ -289,7 +292,7 @@ var Select = class extends WithLightDOMFeedback(WithContextualHelp(WithErrorText
 			Updates.enqueue(() => this.focus());
 			return;
 		}
-		const didClose = prev === true && next === false;
+		const didClose = prev && !next;
 		const selectionChangedWhileOpen = this.indexWhenOpened !== this.selectedIndex;
 		if (didClose && selectionChangedWhileOpen) this.updateValue(true);
 	}
@@ -483,7 +486,7 @@ var Select = class extends WithLightDOMFeedback(WithContextualHelp(WithErrorText
 				}
 			default:
 				/* v8 ignore else -- @preserve */
-				if (key.length === 1) this.handleTypeAhead(`${key}`);
+				if (key.length === 1) this.handleTypeAhead(key);
 				return;
 		}
 	}
@@ -616,7 +619,7 @@ var Select = class extends WithLightDOMFeedback(WithContextualHelp(WithErrorText
 	* @internal
 	*/
 	_onClearButtonClick() {
-		if (this.multiple) this.selectedOptions?.forEach((o) => {
+		if (this.multiple) this.selectedOptions.forEach((o) => {
 			/* v8 ignore else -- @preserve */
 			if (!o.disabled) o.selected = false;
 		});
@@ -763,7 +766,10 @@ function renderControl(context) {
 */
 function ifNotFromFeedback(handler) {
 	return (x, c) => {
-		if (!c.event.composedPath().includes(x._feedbackWrapper)) return handler(x, c.event);
+		if (!c.event.composedPath().includes(x._feedbackWrapper)) {
+			handler(x, c.event);
+			return;
+		}
 		return true;
 	};
 }
@@ -785,7 +791,7 @@ var SelectTemplate = (context) => {
 			@focusin="${ifNotFromFeedback((x, e) => x.focusinHandler(e))}"
 			@focusout="${ifNotFromFeedback((x, e) => x.focusoutHandler(e))}"
 			@keydown="${ifNotFromFeedback((x, e) => {
-		x.open && handleEscapeKeyAndStopPropogation(e);
+		if (x.open) handleEscapeKeyAndStopPropogation(e);
 		return x.keydownHandler(e);
 	})}"
 			@mousedown="${ifNotFromFeedback((x, e) => x.mousedownHandler(e))}"

package/unbundled/definition64.cjs

@@ -45,7 +45,10 @@ var SelectableBox = class extends require_delegates_aria.DelegatesAria(require_v
 	*/
 	_handleKeydown(event) {
 		if (this.disabled) return true;
-		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) return this._handleCheckedChange();
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
+		}
 		return true;
 	}
 };

package/unbundled/definition64.js

@@ -44,7 +44,10 @@ var SelectableBox = class extends DelegatesAria(VividElement) {
 	*/
 	_handleKeydown(event) {
 		if (this.disabled) return true;
-		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) return this._handleCheckedChange();
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
+		}
 		return true;
 	}
 };

package/unbundled/definition65.cjs

@@ -25,7 +25,8 @@ var SideDrawer = class extends require_vivid_element.VividElement {
 	attributeChangedCallback(name, oldValue, newValue) {
 		super.attributeChangedCallback(name, oldValue, newValue);
 		switch (name) {
-			case "open": this.open ? this.#open() : this.#close();
+			case "open": if (this.open) this.#open();
+			else this.#close();
 		}
 	}
 	#close() {

package/unbundled/definition65.js

@@ -24,7 +24,8 @@ var SideDrawer = class extends VividElement {
 	attributeChangedCallback(name, oldValue, newValue) {
 		super.attributeChangedCallback(name, oldValue, newValue);
 		switch (name) {
-			case "open": this.open ? this.#open() : this.#close();
+			case "open": if (this.open) this.#open();
+			else this.#close();
 		}
 	}
 	#close() {

package/unbundled/definition67.cjs

@@ -46,6 +46,7 @@ var SplitButton = class extends require_affix.AffixIcon(require_localized.Locali
 			event.stopImmediatePropagation();
 			return;
 		} else this.$emit("action-click", void 0, { bubbles: false });
+		return true;
 	}
 	/**
 	* Handles indicator click events.
@@ -59,6 +60,7 @@ var SplitButton = class extends require_affix.AffixIcon(require_localized.Locali
 			event.stopImmediatePropagation();
 			return;
 		} else this.$emit("indicator-click", void 0, { bubbles: false });
+		return true;
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], SplitButton.prototype, "connotation", void 0);

package/unbundled/definition67.js

@@ -45,6 +45,7 @@ var SplitButton = class extends AffixIcon(Localized(DelegatesAria(VividElement))
 			event.stopImmediatePropagation();
 			return;
 		} else this.$emit("action-click", void 0, { bubbles: false });
+		return true;
 	}
 	/**
 	* Handles indicator click events.
@@ -58,6 +59,7 @@ var SplitButton = class extends AffixIcon(Localized(DelegatesAria(VividElement))
 			event.stopImmediatePropagation();
 			return;
 		} else this.$emit("indicator-click", void 0, { bubbles: false });
+		return true;
 	}
 };
 __decorate([attr], SplitButton.prototype, "connotation", void 0);

package/unbundled/definition69.cjs

@@ -29,7 +29,8 @@ var Switch = class extends require_delegates_aria.DelegatesAria(require_form_ass
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
-		this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
+		if (this.readOnly) this.classList.add("readonly");
+		else this.classList.remove("readonly");
 	}
 	/**
 	* @internal
@@ -68,7 +69,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 require_decorate.__decorate([_microsoft_fast_element.observable], Switch.prototype, "defaultSlottedNodes", void 0);
 //#endregion
 //#region src/lib/switch/switch.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control", ["appearance-filled", _.checked], ["checked", _.checked], ["disabled", _.disabled], ["readonly", _.readOnly], [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]);
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["appearance-filled", x.checked], ["checked", x.checked], ["disabled", x.disabled], ["readonly", x.readOnly], [`connotation-${x.connotation}`, x.checked && Boolean(x.connotation)]);
 var SwitchTemplate = _microsoft_fast_element.html`
 	<template>
 		<div

package/unbundled/definition69.js

@@ -28,7 +28,8 @@ var Switch = class extends DelegatesAria(CheckableFormAssociated(VividElement))
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
-		this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
+		if (this.readOnly) this.classList.add("readonly");
+		else this.classList.remove("readonly");
 	}
 	/**
 	* @internal
@@ -67,7 +68,7 @@ __decorate([attr({
 __decorate([observable], Switch.prototype, "defaultSlottedNodes", void 0);
 //#endregion
 //#region src/lib/switch/switch.template.ts
-var getClasses = (_) => classNames("control", ["appearance-filled", _.checked], ["checked", _.checked], ["disabled", _.disabled], ["readonly", _.readOnly], [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]);
+var getClasses = (x) => classNames("control", ["appearance-filled", x.checked], ["checked", x.checked], ["disabled", x.disabled], ["readonly", x.readOnly], [`connotation-${x.connotation}`, x.checked && Boolean(x.connotation)]);
 //#endregion
 //#region src/lib/switch/definition.ts
 /**

package/unbundled/definition7.cjs

@@ -43,6 +43,7 @@ var Button = class extends require_affix.AffixIconWithTrailing(require_localized
 			event.stopImmediatePropagation();
 			return;
 		}
+		return true;
 	}
 };
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: {
@@ -94,7 +95,7 @@ function getEffectiveAppearance(appearance, pressed) {
 	}
 	return resolvedAppearance;
 }
-var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator, pressed }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${connotation}`, Boolean(connotation)], `appearance-${getEffectiveAppearance(appearance, pressed)}`, ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", Boolean(stacked)], ["active", ariaExpanded === "true" || active]);
+var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator, pressed }) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${connotation}`, Boolean(connotation)], `appearance-${getEffectiveAppearance(appearance, pressed)}`, ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", stacked], ["active", ariaExpanded === "true" || active]);
 function renderIconOrPending(context, icon, pending, size = require_enums.Size.Normal) {
 	if (pending && size != require_enums.Size.SuperCondensed) {
 		const progressTag = context.tagFor(require_definition$1.ProgressRing);

package/unbundled/definition7.js

@@ -42,6 +42,7 @@ var Button = class extends AffixIconWithTrailing(Localized(Linkable(VividFoundat
 			event.stopImmediatePropagation();
 			return;
 		}
+		return true;
 	}
 };
 __decorate([attr({ converter: {
@@ -93,7 +94,7 @@ function getEffectiveAppearance(appearance, pressed) {
 	}
 	return resolvedAppearance;
 }
-var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator, pressed }) => classNames("control", [`connotation-${connotation}`, Boolean(connotation)], `appearance-${getEffectiveAppearance(appearance, pressed)}`, ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", Boolean(stacked)], ["active", ariaExpanded === "true" || active]);
+var getClasses = ({ connotation, appearance, shape, iconTrailing, icon, label, disabled, pending, stacked, size, iconSlottedContent, ariaExpanded, active, dropdownIndicator, pressed }) => classNames("control", [`connotation-${connotation}`, Boolean(connotation)], `appearance-${getEffectiveAppearance(appearance, pressed)}`, ["disabled", disabled || pending], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-only", !label && !!(icon || iconSlottedContent?.length) && !dropdownIndicator], ["icon-trailing", iconTrailing], ["stacked", stacked], ["active", ariaExpanded === "true" || active]);
 function renderIconOrPending(context, icon, pending, size = Size.Normal) {
 	if (pending && size != Size.SuperCondensed) {
 		const progressTag = context.tagFor(ProgressRing);

package/unbundled/definition71.cjs

@@ -54,7 +54,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView
 require_decorate.__decorate([_microsoft_fast_element.observable], Tab.prototype, "active", void 0);
 //#endregion
 //#region src/lib/tab/tab.template.ts
-var getClasses = ({ connotation, disabled, active, iconTrailing, shape, removable }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)], [`shape-${shape}`, Boolean(shape)], ["disabled", Boolean(disabled)], ["selected", Boolean(active)], ["icon-trailing", iconTrailing], ["removable", removable]);
+var getClasses = ({ connotation, disabled, active, iconTrailing, shape, removable }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation) && active], [`shape-${shape}`, Boolean(shape)], ["disabled", disabled], ["selected", active], ["icon-trailing", iconTrailing], ["removable", removable]);
 function renderDismissButton(context) {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`<button

package/unbundled/definition71.js

@@ -53,7 +53,7 @@ __decorate([attr({ mode: "fromView" })], Tab.prototype, "tabIndex", void 0);
 __decorate([observable], Tab.prototype, "active", void 0);
 //#endregion
 //#region src/lib/tab/tab.template.ts
-var getClasses = ({ connotation, disabled, active, iconTrailing, shape, removable }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation) && Boolean(active)], [`shape-${shape}`, Boolean(shape)], ["disabled", Boolean(disabled)], ["selected", Boolean(active)], ["icon-trailing", iconTrailing], ["removable", removable]);
+var getClasses = ({ connotation, disabled, active, iconTrailing, shape, removable }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation) && active], [`shape-${shape}`, Boolean(shape)], ["disabled", disabled], ["selected", active], ["icon-trailing", iconTrailing], ["removable", removable]);
 function renderDismissButton(context) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`<button