@vonage/vivid 5.21.0 → 5.22.0

package/unbundled/definition14.js

@@ -21,7 +21,7 @@ function formatTime(time) {
 	if (!time || Number.isNaN(time)) return "0:00";
 	const min = Math.floor(time / 60);
 	const sec = Math.floor(time % 60);
-	return min + ":" + (sec < 10 ? "0" + sec : sec);
+	return `${min}:${sec < 10 ? `0${sec}` : sec}`;
 }
 var PAUSE = true;
 var PLAY = false;
@@ -43,6 +43,75 @@ var validSkipByConverter = {
 * @event {CustomEvent<undefined>} pause - Fires when the audio playback is paused.
 */
 var AudioPlayer = class extends Localized(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.playButtonAriaLabel = null;
+		this.pauseButtonAriaLabel = null;
+		this.sliderAriaLabel = null;
+		this.skipForwardButtonAriaLabel = null;
+		this.skipBackwardButtonAriaLabel = null;
+		this.disabled = false;
+		this.notime = false;
+		this.playbackRates = null;
+		this.#playerEl = new Audio();
+		this.#isProgrammaticSliderUpdate = false;
+		this.durationFallback = false;
+		this.#onPlay = () => {
+			if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
+		};
+		this.#onPause = () => {
+			if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
+		};
+		this.#pausedChanged = (pausing) => {
+			if (pausing === this.paused) {
+				this.#setPausedState();
+				return;
+			}
+			if (!this.paused) this.#playerEl.pause();
+			else {
+				this.#updateProgress();
+				this.#playerEl.play();
+			}
+			this.#setPausedState();
+		};
+		this.#updateProgress = () => {
+			Observable.notify(this, "currentTime");
+			const duration = this.duration;
+			const currentTime = this.currentTime;
+			const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
+			const percent = isValid ? currentTime / duration * 100 : 0;
+			/* v8 ignore else -- @preserve */
+			if (this.#sliderEl) {
+				this.#isProgrammaticSliderUpdate = true;
+				this.#sliderEl.value = percent.toString();
+				this.#isProgrammaticSliderUpdate = false;
+			}
+			if (isValid && percent === 100) this.pause();
+		};
+		this.#updateTotalTime = () => {
+			Observable.notify(this, "duration");
+			if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
+				if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
+			}
+		};
+		this.#updateCurrentTimeOnSliderChange = () => {
+			if (!this.paused && this.#sliderEl.isDragging) {
+				this.pause();
+				this.#dragInterval = window.setInterval(() => {
+					/* v8 ignore else -- @preserve */
+					if (!this.#sliderEl.isDragging || !this.isConnected) {
+						clearInterval(this.#dragInterval);
+						if (this.isConnected) this.play();
+					}
+				}, 0);
+			}
+			if (this.#isProgrammaticSliderUpdate) return;
+			this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
+		};
+		this.#setPausedState = () => {
+			Observable.notify(this, "paused");
+		};
+	}
 	/**
 	* @internal
 	*/
@@ -132,76 +201,6 @@ var AudioPlayer = class extends Localized(VividElement) {
 	}
 	#playerEl;
 	#isProgrammaticSliderUpdate;
-	constructor() {
-		super();
-		this.playButtonAriaLabel = null;
-		this.pauseButtonAriaLabel = null;
-		this.sliderAriaLabel = null;
-		this.skipForwardButtonAriaLabel = null;
-		this.skipBackwardButtonAriaLabel = null;
-		this.disabled = false;
-		this.notime = false;
-		this.playbackRates = null;
-		this.#playerEl = new Audio();
-		this.#isProgrammaticSliderUpdate = false;
-		this.durationFallback = false;
-		this.#onPlay = () => {
-			if (!this.#sliderEl?.isDragging) this.$emit("play", void 0, { bubbles: false });
-		};
-		this.#onPause = () => {
-			if (!this.#sliderEl?.isDragging) this.$emit("pause", void 0, { bubbles: false });
-		};
-		this.#pausedChanged = (pausing) => {
-			if (pausing === this.paused) {
-				this.#setPausedState();
-				return;
-			}
-			if (!this.paused) this.#playerEl.pause();
-			else {
-				this.#updateProgress();
-				this.#playerEl.play();
-			}
-			this.#setPausedState();
-		};
-		this.#updateProgress = () => {
-			Observable.notify(this, "currentTime");
-			const duration = this.duration;
-			const currentTime = this.currentTime;
-			const isValid = Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime) && currentTime >= 0;
-			const percent = isValid ? currentTime / duration * 100 : 0;
-			/* v8 ignore else -- @preserve */
-			if (this.#sliderEl) {
-				this.#isProgrammaticSliderUpdate = true;
-				this.#sliderEl.value = percent.toString();
-				this.#isProgrammaticSliderUpdate = false;
-			}
-			if (isValid && percent === 100) this.pause();
-		};
-		this.#updateTotalTime = () => {
-			Observable.notify(this, "duration");
-			if (!Number.isFinite(this.#playerEl.duration) || this.#playerEl.duration <= 0) {
-				if (this.durationFallback) this.#fetchAndCacheAudioBuffer();
-			}
-		};
-		this.#updateCurrentTimeOnSliderChange = () => {
-			if (!this.paused && this.#sliderEl.isDragging) {
-				this.pause();
-				this.#dragInterval = window.setInterval(() => {
-					/* v8 ignore else -- @preserve */
-					if (!this.#sliderEl.isDragging || !this.isConnected) {
-						clearInterval(this.#dragInterval);
-						if (this.isConnected) this.play();
-					}
-				}, 0);
-			}
-			if (this.#isProgrammaticSliderUpdate) return;
-			/* v8 ignore else -- @preserve */
-			if (this.#playerEl) this.currentTime = this.duration * Number(this.#sliderEl.value) / 100;
-		};
-		this.#setPausedState = () => {
-			Observable.notify(this, "paused");
-		};
-	}
 	connectedCallback() {
 		super.connectedCallback();
 		this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
@@ -274,7 +273,7 @@ __decorate([attr({
 })], AudioPlayer.prototype, "durationFallback", void 0);
 //#endregion
 //#region src/lib/audio-player/audio-player.template.ts
-var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => classNames(["disabled", Boolean(disabled) || !duration], ["two-lines", !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))], ["playback", Boolean(playbackRates)]);
+var getClasses = ({ notime, disabled, duration, skipBy, playbackRates }) => classNames(["disabled", disabled || !duration], ["two-lines", !notime && (Boolean(Number(skipBy)) || Boolean(playbackRates))], ["playback", Boolean(playbackRates)]);
 var isMenuItemChekced = (playbackRate, { parent }) => {
 	return playbackRate === parent.playbackRate;
 };
@@ -329,12 +328,10 @@ function renderSlider(context) {
 }
 function renderTimestamp() {
 	return html` <div class="time-stamp">
-		<span class="current-time"
-			>${(x) => formatTime(x.currentTime || 0)}</span
-		>
+		<span class="current-time">${(x) => formatTime(x.currentTime || 0)}</span>
 		${when((x) => x.duration && x.duration !== Infinity, html`
 				<span>/</span>
-				<span class="total-time">${(x) => formatTime(x?.duration)}</span>
+				<span class="total-time">${(x) => formatTime(x.duration)}</span>
 			`)}
 	</div>`;
 }

package/unbundled/definition15.cjs

@@ -41,7 +41,7 @@ var getClasses = ({ appearance, connotation, shape, size }) => (0, _microsoft_fa
 */
 function renderIcon(iconTag) {
 	return _microsoft_fast_element.html`
-		<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
+		<${iconTag} name="${(x) => x.icon ? x.icon : "user-line"}"></${iconTag}>
 	`;
 }
 /**

package/unbundled/definition15.js

@@ -40,7 +40,7 @@ var getClasses = ({ appearance, connotation, shape, size }) => classNames("base"
 */
 function renderIcon(iconTag) {
 	return html`
-		<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
+		<${iconTag} name="${(x) => x.icon ? x.icon : "user-line"}"></${iconTag}>
 	`;
 }
 /**

package/unbundled/definition17.cjs

@@ -37,7 +37,7 @@ var Banner = class extends require_affix.AffixIcon(require_localized.Localized(r
 		this.removable = false;
 		this.#handleRemoveEnd = () => {
 			this.$emit("removed");
-			this.parentElement && this.parentElement.removeChild(this);
+			this.parentElement?.removeChild(this);
 		};
 		this.#closeOnKeyDown = (e) => {
 			if (e.key !== "Escape" || !this.removable) return;

package/unbundled/definition17.js

@@ -36,7 +36,7 @@ var Banner = class extends AffixIcon(Localized(DelegatesAria(VividElement))) {
 		this.removable = false;
 		this.#handleRemoveEnd = () => {
 			this.$emit("removed");
-			this.parentElement && this.parentElement.removeChild(this);
+			this.parentElement?.removeChild(this);
 		};
 		this.#closeOnKeyDown = (e) => {
 			if (e.key !== "Escape" || !this.removable) return;

package/unbundled/definition19.cjs

@@ -61,7 +61,8 @@ var Breadcrumb = class extends require_delegates_aria.DelegatesAria(require_vivi
 	*/
 	setAriaCurrent(item, isLastNode) {
 		const childNodeWithHref = this.findChildWithHref(item);
-		if (childNodeWithHref !== null) isLastNode ? childNodeWithHref.setAttribute("aria-current", "page") : childNodeWithHref.removeAttribute("aria-current");
+		if (childNodeWithHref !== null) if (isLastNode) childNodeWithHref.setAttribute("aria-current", "page");
+		else childNodeWithHref.removeAttribute("aria-current");
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.observable], Breadcrumb.prototype, "slottedBreadcrumbItems", void 0);

package/unbundled/definition19.js

@@ -60,7 +60,8 @@ var Breadcrumb = class extends DelegatesAria(VividElement) {
 	*/
 	setAriaCurrent(item, isLastNode) {
 		const childNodeWithHref = this.findChildWithHref(item);
-		if (childNodeWithHref !== null) isLastNode ? childNodeWithHref.setAttribute("aria-current", "page") : childNodeWithHref.removeAttribute("aria-current");
+		if (childNodeWithHref !== null) if (isLastNode) childNodeWithHref.setAttribute("aria-current", "page");
+		else childNodeWithHref.removeAttribute("aria-current");
 	}
 };
 __decorate([observable], Breadcrumb.prototype, "slottedBreadcrumbItems", void 0);

package/unbundled/definition2.cjs

@@ -93,7 +93,7 @@ var header = (context, hTagName) => {
 	`;
 };
 var AccordionItemTemplate = (context) => _microsoft_fast_element.html`
-	${(x) => header(context, "h" + x.headinglevel)}
+	${(x) => header(context, `h${x.headinglevel}`)}
 	<div
 		id="${(x) => x.id}-panel"
 		aria-labelledby="${(x) => x.id}"

package/unbundled/definition2.js

@@ -92,7 +92,7 @@ var header = (context, hTagName) => {
 	`;
 };
 var AccordionItemTemplate = (context) => html`
-	${(x) => header(context, "h" + x.headinglevel)}
+	${(x) => header(context, `h${x.headinglevel}`)}
 	<div
 		id="${(x) => x.id}-panel"
 		aria-labelledby="${(x) => x.id}"

package/unbundled/definition21.cjs

@@ -44,7 +44,7 @@ function getDay(el) {
 	if (cellOrHeader) {
 		const { parentElement } = cellOrHeader;
 		/* v8 ignore else -- @preserve */
-		if (parentElement) return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
+		if (parentElement) return Array.from(parentElement.children).indexOf(cellOrHeader);
 	}
 }
 function getHour(e, el, hours) {
@@ -58,7 +58,7 @@ function getHour(e, el, hours) {
 var getEventContext = function(e) {
 	if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
 	const [el] = e.composedPath();
-	if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
+	if (!(el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
 	const day = getDay(el);
 	let hour;
 	if (e instanceof MouseEvent) hour = getHour(e, el, this._hours);
@@ -97,7 +97,7 @@ var Calendar = class extends require_vivid_element.VividElement {
 		this.stickyMode = require_enums.Sticky.All;
 		this._hours = 24;
 		this._days = 7;
-		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
+		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(i + 1)));
 		this._generateDaysArr = (dateArr) => {
 			if (dateArr.length == this._days) return dateArr;
 			const lastDate = new Date(dateArr[dateArr.length - 1]);

package/unbundled/definition21.js

@@ -43,7 +43,7 @@ function getDay(el) {
 	if (cellOrHeader) {
 		const { parentElement } = cellOrHeader;
 		/* v8 ignore else -- @preserve */
-		if (parentElement) return parentElement.children && Array.from(parentElement.children).indexOf(cellOrHeader);
+		if (parentElement) return Array.from(parentElement.children).indexOf(cellOrHeader);
 	}
 }
 function getHour(e, el, hours) {
@@ -57,7 +57,7 @@ function getHour(e, el, hours) {
 var getEventContext = function(e) {
 	if (!(e instanceof KeyboardEvent || e instanceof MouseEvent)) throw new Error("Invalid event. Event must be instance of KeyboardEvent or MouseEvent");
 	const [el] = e.composedPath();
-	if (!(el && el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
+	if (!(el instanceof HTMLElement && this.shadowRoot.contains(el))) throw new Error("Invalid event. Event must contain a target object which is a direct descendant of calendar");
 	const day = getDay(el);
 	let hour;
 	if (e instanceof MouseEvent) hour = getHour(e, el, this._hours);
@@ -96,7 +96,7 @@ var Calendar = class extends VividElement {
 		this.stickyMode = Sticky.All;
 		this._hours = 24;
 		this._days = 7;
-		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(++i)));
+		this.hoursAsDatetime = Array.from({ length: this._hours - 1 }).fill(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0))).map((d, i) => new Date(d.setHours(i + 1)));
 		this._generateDaysArr = (dateArr) => {
 			if (dateArr.length == this._days) return dateArr;
 			const lastDate = new Date(dateArr[dateArr.length - 1]);

package/unbundled/definition23.cjs

@@ -78,7 +78,7 @@ var Checkbox = class extends require_delegates_aria.DelegatesAria(require_mixins
 	*/
 	checkedChanged(prev, next) {
 		super.checkedChanged(prev, next);
-		this.ariaChecked = next == true ? "true" : "false";
+		this.ariaChecked = next ? "true" : "false";
 		if (prev !== void 0) this.$emit("input");
 	}
 };
@@ -96,7 +96,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 require_decorate.__decorate([_microsoft_fast_element.observable], Checkbox.prototype, "slottedContent", void 0);
 //#endregion
 //#region src/lib/checkbox/checkbox.template.ts
-var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", Boolean(readOnly)], ["checked", Boolean(checked) || Boolean(indeterminate)], ["disabled", Boolean(disabled)], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
+var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", readOnly], ["checked", checked || indeterminate], ["disabled", disabled], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
 var CheckboxTemplate = (context) => {
 	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`<template>

package/unbundled/definition23.js

@@ -77,7 +77,7 @@ var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSucces
 	*/
 	checkedChanged(prev, next) {
 		super.checkedChanged(prev, next);
-		this.ariaChecked = next == true ? "true" : "false";
+		this.ariaChecked = next ? "true" : "false";
 		if (prev !== void 0) this.$emit("input");
 	}
 };
@@ -95,7 +95,7 @@ __decorate([attr({
 __decorate([observable], Checkbox.prototype, "slottedContent", void 0);
 //#endregion
 //#region src/lib/checkbox/checkbox.template.ts
-var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", Boolean(readOnly)], ["checked", Boolean(checked) || Boolean(indeterminate)], ["disabled", Boolean(disabled)], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
+var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", readOnly], ["checked", checked || indeterminate], ["disabled", disabled], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
 var CheckboxTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
 	return html`<template>

package/unbundled/definition24.cjs

@@ -70,7 +70,7 @@ var Toggletip = class extends require_localized.Localized(require_anchored.Ancho
 	#setupAnchor(a) {
 		a.addEventListener("click", this.#openIfClosed, true);
 		this.#originalAriaLabel = a.ariaLabel;
-		a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
+		a.ariaLabel = this.locale.toggletip.anchorLabel(a.ariaLabel || "");
 		this.#updateAnchor(a);
 	}
 	#updateAnchor(a) {

package/unbundled/definition24.js

@@ -69,7 +69,7 @@ var Toggletip = class extends Localized(Anchored(VividElement)) {
 	#setupAnchor(a) {
 		a.addEventListener("click", this.#openIfClosed, true);
 		this.#originalAriaLabel = a.ariaLabel;
-		a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
+		a.ariaLabel = this.locale.toggletip.anchorLabel(a.ariaLabel || "");
 		this.#updateAnchor(a);
 	}
 	#updateAnchor(a) {

package/unbundled/definition27.cjs

@@ -96,7 +96,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
-var getClasses = ({ open }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", Boolean(open)]);
+var getClasses = ({ open }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
 	return _microsoft_fast_element.html`

package/unbundled/definition27.js

@@ -95,7 +95,7 @@ __decorate([attr({ mode: "fromView" })], Tooltip.prototype, "placement", void 0)
 __decorate([attr({ mode: "boolean" })], Tooltip.prototype, "open", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
-var getClasses = ({ open }) => classNames("control", ["open", Boolean(open)]);
+var getClasses = ({ open }) => classNames("control", ["open", open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(Popup);
 	return html`

package/unbundled/definition28.cjs

@@ -127,7 +127,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 		const value = this.value;
 		if (typeof value !== "string" || !require_base_color_picker.isValidHexColor(value)) return;
 		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-		const idx = swatches.findIndex((s) => s?.value === value);
+		const idx = swatches.findIndex((s) => s.value === value);
 		if (idx !== -1) swatches.splice(idx, 1);
 		swatches.unshift({ value });
 		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
@@ -188,7 +188,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	*/
 	maxSwatchesChanged() {
 		const maxCount = this._maxSwatchesNormalized;
-		if (this.savedColors?.length > maxCount) {
+		if (this.savedColors.length > maxCount) {
 			this.savedColors = this.savedColors.slice(0, maxCount);
 			this._setSavedColors(this.savedColors);
 		}
@@ -197,7 +197,7 @@ var ColorPicker = class extends require_with_contextual_help.WithContextualHelp(
 	* @internal
 	*/
 	_onPickerColorChanged(e) {
-		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
+		if (typeof e.detail.value === "string") this.value = e.detail.value;
 	}
 	/**
 	* @internal
@@ -325,7 +325,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], ColorPicker.pr
 function renderTextField(textFieldTag, iconTag) {
 	const getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
 	return _microsoft_fast_element.html`
-		<${textFieldTag} 
+		<${textFieldTag}
 			id="text-field"
 			class="${getClasses}"
 			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
@@ -349,15 +349,15 @@ function renderTextField(textFieldTag, iconTag) {
 			${require_delegates_aria.delegateAria()}
 			${(0, _microsoft_fast_element.ref)("_textFieldEl")}
 		>
-			<button 
+			<button
 				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
 				aria-expanded="${(x) => x.open}"
   			aria-haspopup="dialog"
-				class="button ${(x) => (0, _microsoft_fast_web_utilities.classNames)(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
-				style="--button-color: ${(x) => x._buttonColor};" 
+				class="button ${(x) => (0, _microsoft_fast_web_utilities.classNames)(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}"
+				style="--button-color: ${(x) => x._buttonColor};"
 				?disabled="${(x) => x.disabled}"
 				@click="${(x) => x._onButtonClick()}"
-				slot="action-items" 
+				slot="action-items"
 				${(0, _microsoft_fast_element.ref)("_buttonEl")}>
 				<${iconTag} name="edit-line"></${iconTag}>
 			</button>
@@ -380,8 +380,8 @@ function renderPopupHeader(buttonTag, iconTag) {
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
 			</h2>
-			<${buttonTag} size="condensed" 
-				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
+			<${buttonTag} size="condensed"
+				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}"
 				@click="${(x) => x._handleCloseRequest()}">
 				<${iconTag} slot="icon" name="close-line"></${iconTag}>
 			</${buttonTag}>
@@ -405,17 +405,17 @@ function renderPopupBody(buttonTag, iconTag, tooltipTag) {
 					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
 					${(0, _microsoft_fast_element.ref)("_vcHexInputEl")}
 				>
-					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}"
 						placeholder="${(x) => x.placeholder}"
-    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+    				@blur="${(_, c) => c.event.stopImmediatePropagation()}"
 						part="input">
 				</${_microsoft_fast_element.html.partial(vcInputTag)}>
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}"
 					exportparts="vvd-theme-alternate">
-					<${buttonTag} 
-						slot="anchor" size="normal" 
-						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					<${buttonTag}
+						slot="anchor" size="normal"
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}"
 						@click="${(x) => x._copyValueToClipboard(x.value)}">
 						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
 					</${buttonTag}>
@@ -445,8 +445,8 @@ function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
 			>
 				${(0, _microsoft_fast_element.repeat)((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
 				${(0, _microsoft_fast_element.when)((x) => !x.disableSavedColors, _microsoft_fast_element.html`
-						<${tooltipTag} placement="top" 
-							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+						<${tooltipTag} placement="top"
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}"
 							exportparts="vvd-theme-alternate">
 							<${buttonTag}
 								slot="anchor"
@@ -491,11 +491,11 @@ var ColorPickerTemplate = (context) => {
 				:open="${(x) => x.open}"
 				:anchor="${(x) => x._buttonEl}"
 				placement="top"
-				offset="10" 
+				offset="10"
 				${(0, _microsoft_fast_element.ref)("_popupEl")}>
-				<div class="dialog" 
-					role="dialog" 
-					aria-modal="true" 
+				<div class="dialog"
+					role="dialog"
+					aria-modal="true"
 					aria-labelledby="color-picker-title">
 					${renderPopupHeader(buttonTag, iconTag)}
 					${renderPopupBody(buttonTag, iconTag, tooltipTag)}

package/unbundled/definition28.js

@@ -126,7 +126,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 		const value = this.value;
 		if (typeof value !== "string" || !isValidHexColor(value)) return;
 		const swatches = Array.isArray(this.savedColors) ? [...this.savedColors] : [];
-		const idx = swatches.findIndex((s) => s?.value === value);
+		const idx = swatches.findIndex((s) => s.value === value);
 		if (idx !== -1) swatches.splice(idx, 1);
 		swatches.unshift({ value });
 		this.savedColors = swatches.slice(0, this._maxSwatchesNormalized);
@@ -187,7 +187,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	*/
 	maxSwatchesChanged() {
 		const maxCount = this._maxSwatchesNormalized;
-		if (this.savedColors?.length > maxCount) {
+		if (this.savedColors.length > maxCount) {
 			this.savedColors = this.savedColors.slice(0, maxCount);
 			this._setSavedColors(this.savedColors);
 		}
@@ -196,7 +196,7 @@ var ColorPicker = class extends WithContextualHelp(WithFeedback(WithErrorText(Wi
 	* @internal
 	*/
 	_onPickerColorChanged(e) {
-		if (typeof e.detail?.value === "string") this.value = e.detail?.value;
+		if (typeof e.detail.value === "string") this.value = e.detail.value;
 	}
 	/**
 	* @internal
@@ -324,7 +324,7 @@ __decorate([observable], ColorPicker.prototype, "_ariaLiveDescription", void 0);
 function renderTextField(textFieldTag, iconTag) {
 	const getClasses = (_) => classNames("control");
 	return html`
-		<${textFieldTag} 
+		<${textFieldTag}
 			id="text-field"
 			class="${getClasses}"
 			pattern="${ColorPicker.HEX_COLOR_PATTERN.source}"
@@ -348,15 +348,15 @@ function renderTextField(textFieldTag, iconTag) {
 			${delegateAria()}
 			${ref("_textFieldEl")}
 		>
-			<button 
+			<button
 				aria-label="${(x) => x.locale.colorPicker.pickerButtonLabel}"
 				aria-expanded="${(x) => x.open}"
   			aria-haspopup="dialog"
-				class="button ${(x) => classNames(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}" 
-				style="--button-color: ${(x) => x._buttonColor};" 
+				class="button ${(x) => classNames(x._applyContrastClass(x._buttonColor) ? "contrast" : "", x.disabled ? "disabled" : "")}"
+				style="--button-color: ${(x) => x._buttonColor};"
 				?disabled="${(x) => x.disabled}"
 				@click="${(x) => x._onButtonClick()}"
-				slot="action-items" 
+				slot="action-items"
 				${ref("_buttonEl")}>
 				<${iconTag} name="edit-line"></${iconTag}>
 			</button>
@@ -379,8 +379,8 @@ function renderPopupHeader(buttonTag, iconTag) {
 			<h2 class="header-title" id="color-picker-title">
 				<slot name="popup-text">${(x) => x.locale.colorPicker.popupLabel}</slot>
 			</h2>
-			<${buttonTag} size="condensed" 
-				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}" 
+			<${buttonTag} size="condensed"
+				aria-label="${(x) => x.locale.colorPicker.closeButtonLabel}"
 				@click="${(x) => x._handleCloseRequest()}">
 				<${iconTag} slot="icon" name="close-line"></${iconTag}>
 			</${buttonTag}>
@@ -404,17 +404,17 @@ function renderPopupBody(buttonTag, iconTag, tooltipTag) {
 					@color-changed="${(x, c) => x._onPickerColorChanged(c.event)}"
 					${ref("_vcHexInputEl")}
 				>
-					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}" 
+					<input name="hex-code-input" aria-label="${(x) => x.locale.colorPicker.hexInputLabel}"
 						placeholder="${(x) => x.placeholder}"
-    				@blur="${(x, c) => c.event.stopImmediatePropagation()}"
+    				@blur="${(_, c) => c.event.stopImmediatePropagation()}"
 						part="input">
 				</${html.partial(vcInputTag)}>
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.locale.colorPicker.copyButtonLabel}"
 					exportparts="vvd-theme-alternate">
-					<${buttonTag} 
-						slot="anchor" size="normal" 
-						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}" 
+					<${buttonTag}
+						slot="anchor" size="normal"
+						aria-label="${(x) => x.locale.colorPicker.copyButtonLabel}"
 						@click="${(x) => x._copyValueToClipboard(x.value)}">
 						<${iconTag} slot="icon" name="${(x) => x.copyIconName}"></${iconTag}>
 					</${buttonTag}>
@@ -444,8 +444,8 @@ function renderPopupFooter(buttonTag, iconTag, tooltipTag) {
 			>
 				${repeat((x) => x.allSwatches, (x) => x._renderColorSwatch(iconTag, tooltipTag), { positioning: true })}
 				${when((x) => !x.disableSavedColors, html`
-						<${tooltipTag} placement="top" 
-							text="${(x) => x.locale.colorPicker.saveButtonLabel}" 
+						<${tooltipTag} placement="top"
+							text="${(x) => x.locale.colorPicker.saveButtonLabel}"
 							exportparts="vvd-theme-alternate">
 							<${buttonTag}
 								slot="anchor"
@@ -490,11 +490,11 @@ var ColorPickerTemplate = (context) => {
 				:open="${(x) => x.open}"
 				:anchor="${(x) => x._buttonEl}"
 				placement="top"
-				offset="10" 
+				offset="10"
 				${ref("_popupEl")}>
-				<div class="dialog" 
-					role="dialog" 
-					aria-modal="true" 
+				<div class="dialog"
+					role="dialog"
+					aria-modal="true"
 					aria-labelledby="color-picker-title">
 					${renderPopupHeader(buttonTag, iconTag)}
 					${renderPopupBody(buttonTag, iconTag, tooltipTag)}

package/unbundled/definition29.cjs

@@ -165,7 +165,7 @@ require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.protot
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
 //#endregion
 //#region src/lib/option/option.template.ts
-var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", Boolean(x.selected)], ["hover", Boolean(x._highlighted)], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["disabled", x.disabled], ["selected", x.selected], ["hover", x._highlighted], ["active", Boolean(x.checked)], ["icon", Boolean(x.icon)], ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]);
 function text() {
 	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.text || x.textSecondary, _microsoft_fast_element.html`<span class="text">
 			${(0, _microsoft_fast_element.when)((x) => x.text, _microsoft_fast_element.html`<span class="text-primary">