@vonage/vivid 5.25.0 → 5.27.0

package/unbundled/definition9.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_definition = require("./definition6.cjs");
@@ -114,8 +113,10 @@ var Popup = class extends require_vivid_element.VividElement {
 		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.anchorEl, this.popupEl, () => void this.#autoUpdateCallback(), { animationFrame: this.animationFrame });
 	}
 	#togglePopover() {
-		if (this.popupEl && this.strategy === "fixed") if (this.open) this.popupEl.showPopover();
-		else this.popupEl.hidePopover();
+		if (this.popupEl && this.strategy === "fixed") {
+			if (this.open) this.popupEl.showPopover();
+			else this.popupEl.hidePopover();
+		}
 	}
 	#lastPositionUpdate;
 	#autoUpdateCallback;

package/unbundled/definition9.js

@@ -113,8 +113,10 @@ var Popup = class extends VividElement {
 		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => void this.#autoUpdateCallback(), { animationFrame: this.animationFrame });
 	}
 	#togglePopover() {
-		if (this.popupEl && this.strategy === "fixed") if (this.open) this.popupEl.showPopover();
-		else this.popupEl.hidePopover();
+		if (this.popupEl && this.strategy === "fixed") {
+			if (this.open) this.popupEl.showPopover();
+			else this.popupEl.hidePopover();
+		}
 	}
 	#lastPositionUpdate;
 	#autoUpdateCallback;

package/unbundled/delegates-aria.cjs

@@ -3,10 +3,12 @@ const require_aria_binding_directive = require("./aria-binding-directive.cjs");
 //#region src/shared/aria/delegates-aria.ts
 /** Directive to delegate ARIA properties to the target element. */
 function delegateAria(boundProperties = {}, options = {}) {
+	const forwardedValueProperties = new Set((options.onlySpecified ? [] : require_vivid_element.ariaValueProperties).filter((p) => !(p in boundProperties)));
+	const forwardedIdrefsProperties = new Set((options.onlySpecified ? [] : require_vivid_element.ariaIdrefsProperties).filter((p) => !(p in boundProperties)));
 	return new require_aria_binding_directive.AriaBindingDirective({
 		boundProperties,
-		forwardedValueProperties: new Set((options.onlySpecified ? [] : require_vivid_element.ariaValueProperties).filter((p) => !(p in boundProperties))),
-		forwardedIdrefsProperties: new Set((options.onlySpecified ? [] : require_vivid_element.ariaIdrefsProperties).filter((p) => !(p in boundProperties)))
+		forwardedValueProperties,
+		forwardedIdrefsProperties
 	});
 }
 /**

package/unbundled/delegates-aria.js

@@ -3,10 +3,12 @@ import { n as IdrefsController, t as AriaBindingDirective } from "./aria-binding
 //#region src/shared/aria/delegates-aria.ts
 /** Directive to delegate ARIA properties to the target element. */
 function delegateAria(boundProperties = {}, options = {}) {
+	const forwardedValueProperties = new Set((options.onlySpecified ? [] : ariaValueProperties).filter((p) => !(p in boundProperties)));
+	const forwardedIdrefsProperties = new Set((options.onlySpecified ? [] : ariaIdrefsProperties).filter((p) => !(p in boundProperties)));
 	return new AriaBindingDirective({
 		boundProperties,
-		forwardedValueProperties: new Set((options.onlySpecified ? [] : ariaValueProperties).filter((p) => !(p in boundProperties))),
-		forwardedIdrefsProperties: new Set((options.onlySpecified ? [] : ariaIdrefsProperties).filter((p) => !(p in boundProperties)))
+		forwardedValueProperties,
+		forwardedIdrefsProperties
 	});
 }
 /**

package/unbundled/divider.cjs

@@ -1,11 +1,11 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_enums = require("./enums.cjs");
+const require_component_enum = require("./component-enum.cjs");
 const require_host_semantics = require("./host-semantics.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/divider/divider.ts
+var dividerAppearance = require_component_enum.componentEnum(["ghost", "subtle"], "ghost");
 /**
 * @deprecated This will be removed along with the divider's role attribute
 * Divider roles
@@ -25,7 +25,6 @@ var Divider = class extends require_host_semantics.HostSemantics(require_vivid_e
 		super(..._args);
 		this.role = DividerRole.separator;
 		this.orientation = _microsoft_fast_web_utilities.Orientation.horizontal;
-		this.appearance = require_enums.Appearance.Ghost;
 	}
 };
 require_decorate.__decorate([_microsoft_fast_element.attr], Divider.prototype, "orientation", void 0);
@@ -43,3 +42,9 @@ Object.defineProperty(exports, "DividerRole", {
 		return DividerRole;
 	}
 });
+Object.defineProperty(exports, "dividerAppearance", {
+	enumerable: true,
+	get: function() {
+		return dividerAppearance;
+	}
+});

package/unbundled/divider.js

@@ -1,10 +1,11 @@
 import { t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { t as Appearance } from "./enums.js";
+import { t as componentEnum } from "./component-enum.js";
 import { t as HostSemantics } from "./host-semantics.js";
 import { attr } from "@microsoft/fast-element";
 import { Orientation } from "@microsoft/fast-web-utilities";
 //#region src/lib/divider/divider.ts
+var dividerAppearance = componentEnum(["ghost", "subtle"], "ghost");
 /**
 * @deprecated This will be removed along with the divider's role attribute
 * Divider roles
@@ -24,10 +25,9 @@ var Divider = class extends HostSemantics(VividElement) {
 		super(..._args);
 		this.role = DividerRole.separator;
 		this.orientation = Orientation.horizontal;
-		this.appearance = Appearance.Ghost;
 	}
 };
 __decorate([attr], Divider.prototype, "orientation", void 0);
 __decorate([attr], Divider.prototype, "appearance", void 0);
 //#endregion
-export { DividerRole as n, Divider as t };
+export { DividerRole as n, dividerAppearance as r, Divider as t };

package/unbundled/en-US.cjs

@@ -1,5 +1,5 @@
-//#region ../../node_modules/.pnpm/video.js@8.23.7/node_modules/video.js/dist/lang/en.json
-var en_exports = /* @__PURE__ */ require("./chunk.cjs").__exportAll({
+//#region ../../node_modules/.pnpm/video.js@8.24.0/node_modules/video.js/dist/lang/en.json
+var en_exports = /* @__PURE__ */ require("./rolldown-runtime.cjs").__exportAll({
 	Background: () => Background,
 	Black: () => Black,
 	Blue: () => Blue,
@@ -238,9 +238,9 @@ var enUS = {
 		dateFormat: "MM/dd/yyyy",
 		dateFormatPlaceholder: "MM/DD/YYYY",
 		chooseDateLabel: "Choose date",
-		changeDateLabel: (date) => `Change date, ${date}`,
+		changeDateLabel: /* istanbul ignore next */ (date) => `Change date, ${date}`,
 		chooseDatesLabel: "Choose dates",
-		changeDatesLabel: (range) => `Change dates, ${range}`,
+		changeDatesLabel: /* istanbul ignore next */ (range) => `Change dates, ${range}`,
 		prevYearLabel: "Previous year",
 		prevMonthLabel: "Previous month",
 		nextMonthLabel: "Next month",
@@ -248,17 +248,17 @@ var enUS = {
 		todayLabel: "today",
 		selectedLabel: "selected",
 		currentLabel: "current",
-		changeMonthLabel: (month) => `Change month, ${month} selected`,
-		showCalendarForMonthLabel: (month) => `Show calendar for ${month}`,
+		changeMonthLabel: /* istanbul ignore next */ (month) => `Change month, ${month} selected`,
+		showCalendarForMonthLabel: /* istanbul ignore next */ (month) => `Show calendar for ${month}`,
 		invalidDateError: "Please enter a valid date.",
 		invalidDateRangeError: "Please enter a valid date range.",
-		startDateAfterMinDateError: (minDate) => `The start date must be ${minDate} or later.`,
-		endDateBeforeMaxDateError: (maxDate) => `The end date must be ${maxDate} or earlier.`
+		startDateAfterMinDateError: /* istanbul ignore next */ (minDate) => `The start date must be ${minDate} or later.`,
+		endDateBeforeMaxDateError: /* istanbul ignore next */ (maxDate) => `The end date must be ${maxDate} or earlier.`
 	},
 	timePicker: {
 		defaultTo12HourClock: true,
 		chooseTimeLabel: "Choose time",
-		changeTimeLabel: (time) => `Change time, ${time}`,
+		changeTimeLabel: /* istanbul ignore next */ (time) => `Change time, ${time}`,
 		hoursLabel: "hours",
 		minutesLabel: "minutes",
 		secondsLabel: "seconds",
@@ -267,12 +267,12 @@ var enUS = {
 	},
 	dateTimePicker: {
 		chooseDateTimeLabel: "Choose date and time",
-		changeDateTimeLabel: (dateTime) => `Change date and time, ${dateTime}`,
+		changeDateTimeLabel: /* istanbul ignore next */ (dateTime) => `Change date and time, ${dateTime}`,
 		invalidDateTimeError: "Please enter a valid date and time.",
-		dateBeforeMinDateError: (minDate) => `Date must be ${minDate} or later.`,
-		dateAfterMaxDateError: (maxDate) => `Date must be ${maxDate} or earlier.`,
-		timeBeforeMinTimeError: (minTime) => `Time must be ${minTime} or later.`,
-		timeAfterMaxTimeError: (maxTime) => `Time must be ${maxTime} or earlier.`
+		dateBeforeMinDateError: /* istanbul ignore next */ (minDate) => `Date must be ${minDate} or later.`,
+		dateAfterMaxDateError: /* istanbul ignore next */ (maxDate) => `Date must be ${maxDate} or earlier.`,
+		timeBeforeMinTimeError: /* istanbul ignore next */ (minTime) => `Time must be ${minTime} or later.`,
+		timeAfterMaxTimeError: /* istanbul ignore next */ (maxTime) => `Time must be ${maxTime} or earlier.`
 	},
 	filePicker: {
 		invalidFileTypeError: "You can't select files of this type.",
@@ -294,9 +294,9 @@ var enUS = {
 	popover: { dismissButtonLabel: "Close" },
 	banner: { dismissButtonLabel: "Close" },
 	numberField: {
-		incrementButtonLabel: (step) => step === 1 ? "Increase value" : `Increase value by ${step}`,
-		decrementButtonLabel: (step) => step === 1 ? "Decrease value" : `Decrease value by ${step}`,
-		updatedValueAnnouncement: (value) => `Updated value: ${value}`
+		incrementButtonLabel: /* istanbul ignore next */ (step) => step === 1 ? "Increase value" : `Increase value by ${step}`,
+		decrementButtonLabel: /* istanbul ignore next */ (step) => step === 1 ? "Decrease value" : `Decrease value by ${step}`,
+		updatedValueAnnouncement: /* istanbul ignore next */ (value) => `Updated value: ${value}`
 	},
 	splitButton: { showMoreActionsLabel: "Show more actions" },
 	videoPlayer: en_exports,
@@ -318,9 +318,10 @@ var enUS = {
 		digitSevenLabel: "7 PQRS",
 		digitEightLabel: "8 TUV",
 		digitNineLabel: "9 WXYZ",
-		digitAsteriskLabel: "*",
+		digitAsteriskLabel: "Asterisk",
 		digitZeroLabel: "0",
-		digitHashtagLabel: "#",
+		digitZeroDescription: "Press and hold to type a plus sign",
+		digitHashtagLabel: "Pound",
 		errorLabel: "Error:"
 	},
 	tab: { dismissButtonLabel: "Press the DELETE key to close this tab" },
@@ -335,11 +336,11 @@ var enUS = {
 		selectedAllMessage: "All options selected",
 		deselectedAllMessage: "All options deselected",
 		loadingOptionsMessage: "Loading...",
-		removeTagButtonLabel: (label) => `Remove ${label}`,
-		optionSelectedMessage: (name) => `Option ${name} selected.`,
-		optionDeselectedMessage: (name) => `Option ${name} deselected.`,
-		optionFocusedMessage: (name, position, total, selected) => `Option ${name} focused, ${selected ? "selected, " : ""}${position} of ${total}.`,
-		maxSelectedMessage: (total, limit) => `${total} of ${limit} selected.`
+		removeTagButtonLabel: /* istanbul ignore next */ (label) => `Remove ${label}`,
+		optionSelectedMessage: /* istanbul ignore next */ (name) => `Option ${name} selected.`,
+		optionDeselectedMessage: /* istanbul ignore next */ (name) => `Option ${name} deselected.`,
+		optionFocusedMessage: /* istanbul ignore next */ (name, position, total, selected) => `Option ${name} focused, ${selected ? "selected, " : ""}${position} of ${total}.`,
+		maxSelectedMessage: /* istanbul ignore next */ (total, limit) => `${total} of ${limit} selected.`
 	},
 	richTextEditor: {
 		paragraphStyles: "Paragraph styles",
@@ -394,8 +395,8 @@ var enUS = {
 		ctaIcon: "Call to action:"
 	},
 	charCount: {
-		charactersLimitMessage: (limit) => `You can enter up to ${limit} characters`,
-		charactersRemainingMessage: (total) => `You have ${total} characters remaining`
+		charactersLimitMessage: /* istanbul ignore next */ (limit) => `You can enter up to ${limit} characters`,
+		charactersRemainingMessage: /* istanbul ignore next */ (total) => `You have ${total} characters remaining`
 	},
 	dataGrid: { cell: {
 		selected: "Selected",
@@ -416,11 +417,11 @@ var enUS = {
 	pagination: {
 		previousPageLabel: "Go to previous page",
 		nextPageLabel: "Go to next page",
-		goToPageLabel: (index) => `Go to page ${index}`
+		goToPageLabel: /* istanbul ignore next */ (index) => `Go to page ${index}`
 	},
-	tag: { remove: (label) => `Remove ${label}` },
-	toggletip: { anchorLabel: (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information` },
-	baseColorPicker: { colorSwatchLabel: (value, label, selected) => {
+	tag: { remove: /* istanbul ignore next */ (label) => `Remove ${label}` },
+	toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information` },
+	baseColorPicker: { colorSwatchLabel: /* istanbul ignore next */ (value, label, selected) => {
 		let swatchLabel = label ? `Select ${label}, hex: ${value}` : `Select ${value}`;
 		if (selected) swatchLabel += `, selected.`;
 		return swatchLabel;
@@ -435,9 +436,9 @@ var enUS = {
 		closeButtonLabel: "Close Color Picker",
 		copyButtonLabel: "Copy color to clipboard",
 		copyErrorText: "Copy failed. Clipboard access was blocked. Try again.",
-		copySuccessMessage: (value) => `Color ${value} copied to clipboard.`,
-		selectionSuccessMessage: (value) => `Color ${value} selected.`,
-		maxSwatchesMessage: (total, limit) => `${total} of ${limit} colors saved.`
+		copySuccessMessage: /* istanbul ignore next */ (value) => `Color ${value} copied to clipboard.`,
+		selectionSuccessMessage: /* istanbul ignore next */ (value) => `Color ${value} selected.`,
+		maxSwatchesMessage: /* istanbul ignore next */ (total, limit) => `${total} of ${limit} colors saved.`
 	}
 };
 //#endregion

package/unbundled/en-US.js

@@ -1,5 +1,5 @@
-import { t as __exportAll } from "./chunk.js";
-//#region ../../node_modules/.pnpm/video.js@8.23.7/node_modules/video.js/dist/lang/en.json
+import { t as __exportAll } from "./rolldown-runtime.js";
+//#region ../../node_modules/.pnpm/video.js@8.24.0/node_modules/video.js/dist/lang/en.json
 var en_exports = /* @__PURE__ */ __exportAll({
 	Background: () => Background,
 	Black: () => Black,
@@ -239,9 +239,9 @@ var enUS = {
 		dateFormat: "MM/dd/yyyy",
 		dateFormatPlaceholder: "MM/DD/YYYY",
 		chooseDateLabel: "Choose date",
-		changeDateLabel: (date) => `Change date, ${date}`,
+		changeDateLabel: /* istanbul ignore next */ (date) => `Change date, ${date}`,
 		chooseDatesLabel: "Choose dates",
-		changeDatesLabel: (range) => `Change dates, ${range}`,
+		changeDatesLabel: /* istanbul ignore next */ (range) => `Change dates, ${range}`,
 		prevYearLabel: "Previous year",
 		prevMonthLabel: "Previous month",
 		nextMonthLabel: "Next month",
@@ -249,17 +249,17 @@ var enUS = {
 		todayLabel: "today",
 		selectedLabel: "selected",
 		currentLabel: "current",
-		changeMonthLabel: (month) => `Change month, ${month} selected`,
-		showCalendarForMonthLabel: (month) => `Show calendar for ${month}`,
+		changeMonthLabel: /* istanbul ignore next */ (month) => `Change month, ${month} selected`,
+		showCalendarForMonthLabel: /* istanbul ignore next */ (month) => `Show calendar for ${month}`,
 		invalidDateError: "Please enter a valid date.",
 		invalidDateRangeError: "Please enter a valid date range.",
-		startDateAfterMinDateError: (minDate) => `The start date must be ${minDate} or later.`,
-		endDateBeforeMaxDateError: (maxDate) => `The end date must be ${maxDate} or earlier.`
+		startDateAfterMinDateError: /* istanbul ignore next */ (minDate) => `The start date must be ${minDate} or later.`,
+		endDateBeforeMaxDateError: /* istanbul ignore next */ (maxDate) => `The end date must be ${maxDate} or earlier.`
 	},
 	timePicker: {
 		defaultTo12HourClock: true,
 		chooseTimeLabel: "Choose time",
-		changeTimeLabel: (time) => `Change time, ${time}`,
+		changeTimeLabel: /* istanbul ignore next */ (time) => `Change time, ${time}`,
 		hoursLabel: "hours",
 		minutesLabel: "minutes",
 		secondsLabel: "seconds",
@@ -268,12 +268,12 @@ var enUS = {
 	},
 	dateTimePicker: {
 		chooseDateTimeLabel: "Choose date and time",
-		changeDateTimeLabel: (dateTime) => `Change date and time, ${dateTime}`,
+		changeDateTimeLabel: /* istanbul ignore next */ (dateTime) => `Change date and time, ${dateTime}`,
 		invalidDateTimeError: "Please enter a valid date and time.",
-		dateBeforeMinDateError: (minDate) => `Date must be ${minDate} or later.`,
-		dateAfterMaxDateError: (maxDate) => `Date must be ${maxDate} or earlier.`,
-		timeBeforeMinTimeError: (minTime) => `Time must be ${minTime} or later.`,
-		timeAfterMaxTimeError: (maxTime) => `Time must be ${maxTime} or earlier.`
+		dateBeforeMinDateError: /* istanbul ignore next */ (minDate) => `Date must be ${minDate} or later.`,
+		dateAfterMaxDateError: /* istanbul ignore next */ (maxDate) => `Date must be ${maxDate} or earlier.`,
+		timeBeforeMinTimeError: /* istanbul ignore next */ (minTime) => `Time must be ${minTime} or later.`,
+		timeAfterMaxTimeError: /* istanbul ignore next */ (maxTime) => `Time must be ${maxTime} or earlier.`
 	},
 	filePicker: {
 		invalidFileTypeError: "You can't select files of this type.",
@@ -295,9 +295,9 @@ var enUS = {
 	popover: { dismissButtonLabel: "Close" },
 	banner: { dismissButtonLabel: "Close" },
 	numberField: {
-		incrementButtonLabel: (step) => step === 1 ? "Increase value" : `Increase value by ${step}`,
-		decrementButtonLabel: (step) => step === 1 ? "Decrease value" : `Decrease value by ${step}`,
-		updatedValueAnnouncement: (value) => `Updated value: ${value}`
+		incrementButtonLabel: /* istanbul ignore next */ (step) => step === 1 ? "Increase value" : `Increase value by ${step}`,
+		decrementButtonLabel: /* istanbul ignore next */ (step) => step === 1 ? "Decrease value" : `Decrease value by ${step}`,
+		updatedValueAnnouncement: /* istanbul ignore next */ (value) => `Updated value: ${value}`
 	},
 	splitButton: { showMoreActionsLabel: "Show more actions" },
 	videoPlayer: en_exports,
@@ -319,9 +319,10 @@ var enUS = {
 		digitSevenLabel: "7 PQRS",
 		digitEightLabel: "8 TUV",
 		digitNineLabel: "9 WXYZ",
-		digitAsteriskLabel: "*",
+		digitAsteriskLabel: "Asterisk",
 		digitZeroLabel: "0",
-		digitHashtagLabel: "#",
+		digitZeroDescription: "Press and hold to type a plus sign",
+		digitHashtagLabel: "Pound",
 		errorLabel: "Error:"
 	},
 	tab: { dismissButtonLabel: "Press the DELETE key to close this tab" },
@@ -336,11 +337,11 @@ var enUS = {
 		selectedAllMessage: "All options selected",
 		deselectedAllMessage: "All options deselected",
 		loadingOptionsMessage: "Loading...",
-		removeTagButtonLabel: (label) => `Remove ${label}`,
-		optionSelectedMessage: (name) => `Option ${name} selected.`,
-		optionDeselectedMessage: (name) => `Option ${name} deselected.`,
-		optionFocusedMessage: (name, position, total, selected) => `Option ${name} focused, ${selected ? "selected, " : ""}${position} of ${total}.`,
-		maxSelectedMessage: (total, limit) => `${total} of ${limit} selected.`
+		removeTagButtonLabel: /* istanbul ignore next */ (label) => `Remove ${label}`,
+		optionSelectedMessage: /* istanbul ignore next */ (name) => `Option ${name} selected.`,
+		optionDeselectedMessage: /* istanbul ignore next */ (name) => `Option ${name} deselected.`,
+		optionFocusedMessage: /* istanbul ignore next */ (name, position, total, selected) => `Option ${name} focused, ${selected ? "selected, " : ""}${position} of ${total}.`,
+		maxSelectedMessage: /* istanbul ignore next */ (total, limit) => `${total} of ${limit} selected.`
 	},
 	richTextEditor: {
 		paragraphStyles: "Paragraph styles",
@@ -395,8 +396,8 @@ var enUS = {
 		ctaIcon: "Call to action:"
 	},
 	charCount: {
-		charactersLimitMessage: (limit) => `You can enter up to ${limit} characters`,
-		charactersRemainingMessage: (total) => `You have ${total} characters remaining`
+		charactersLimitMessage: /* istanbul ignore next */ (limit) => `You can enter up to ${limit} characters`,
+		charactersRemainingMessage: /* istanbul ignore next */ (total) => `You have ${total} characters remaining`
 	},
 	dataGrid: { cell: {
 		selected: "Selected",
@@ -417,11 +418,11 @@ var enUS = {
 	pagination: {
 		previousPageLabel: "Go to previous page",
 		nextPageLabel: "Go to next page",
-		goToPageLabel: (index) => `Go to page ${index}`
+		goToPageLabel: /* istanbul ignore next */ (index) => `Go to page ${index}`
 	},
-	tag: { remove: (label) => `Remove ${label}` },
-	toggletip: { anchorLabel: (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information` },
-	baseColorPicker: { colorSwatchLabel: (value, label, selected) => {
+	tag: { remove: /* istanbul ignore next */ (label) => `Remove ${label}` },
+	toggletip: { anchorLabel: /* istanbul ignore next */ (ariaLabel) => ariaLabel ? `Show more information about ${ariaLabel}` : `Show more information` },
+	baseColorPicker: { colorSwatchLabel: /* istanbul ignore next */ (value, label, selected) => {
 		let swatchLabel = label ? `Select ${label}, hex: ${value}` : `Select ${value}`;
 		if (selected) swatchLabel += `, selected.`;
 		return swatchLabel;
@@ -436,9 +437,9 @@ var enUS = {
 		closeButtonLabel: "Close Color Picker",
 		copyButtonLabel: "Copy color to clipboard",
 		copyErrorText: "Copy failed. Clipboard access was blocked. Try again.",
-		copySuccessMessage: (value) => `Color ${value} copied to clipboard.`,
-		selectionSuccessMessage: (value) => `Color ${value} selected.`,
-		maxSwatchesMessage: (total, limit) => `${total} of ${limit} colors saved.`
+		copySuccessMessage: /* istanbul ignore next */ (value) => `Color ${value} copied to clipboard.`,
+		selectionSuccessMessage: /* istanbul ignore next */ (value) => `Color ${value} selected.`,
+		maxSwatchesMessage: /* istanbul ignore next */ (total, limit) => `${total} of ${limit} colors saved.`
 	}
 };
 //#endregion

package/unbundled/feedback-message.cjs

@@ -0,0 +1,59 @@
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_icon = require("./icon.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition22.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/shared/feedback/feedback-message.scss?inline
+var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
+//#endregion
+//#region src/shared/feedback/feedback-message.ts
+/** Renders a feedback message of the given type. When type='none', nothing is rendered. */
+var FeedbackMessage = class extends require_localized.Localized(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "none";
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], FeedbackMessage.prototype, "type", void 0);
+function iconTemplate(context, icon, textI18nKey) {
+	const iconTag = context.tagFor(require_icon.Icon);
+	return _microsoft_fast_element.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
+}
+function iconForType(context) {
+	const iconTemplateForType = {
+		none: "",
+		helper: "",
+		error: iconTemplate(context, "info-line", "errorIconText"),
+		success: iconTemplate(context, "check-circle-line", "successIconText")
+	};
+	return _microsoft_fast_element.html`${(x) => iconTemplateForType[x.type]}`;
+}
+var shouldAnnounce = (type) => type === "error";
+var FeedbackMessageTemplate = (ctx) => {
+	const message = _microsoft_fast_element.html`<div
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("message", `${x.type}-message`)}"
+	>
+		${iconForType(ctx)}<slot></slot>
+	</div>`;
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => !shouldAnnounce(x.type), message)}
+		<span class="announcement" role="status" aria-live="polite">
+			${(0, _microsoft_fast_element.when)((x) => shouldAnnounce(x.type), message)}
+		</span>`;
+};
+var feedbackMessageDefinition = require_vivid_element.defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [require_definition.iconDefinition, require_definition$1.visuallyHiddenDefinition], { styles: feedback_message_default });
+//#endregion
+Object.defineProperty(exports, "FeedbackMessage", {
+	enumerable: true,
+	get: function() {
+		return FeedbackMessage;
+	}
+});
+Object.defineProperty(exports, "feedbackMessageDefinition", {
+	enumerable: true,
+	get: function() {
+		return feedbackMessageDefinition;
+	}
+});

package/unbundled/feedback-message.js

@@ -0,0 +1,48 @@
+import { t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { t as iconDefinition } from "./definition.js";
+import { t as __decorate } from "./decorate.js";
+import { t as Icon } from "./icon.js";
+import { t as Localized } from "./localized.js";
+import { n as visuallyHiddenDefinition } from "./definition22.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/shared/feedback/feedback-message.scss?inline
+var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
+//#endregion
+//#region src/shared/feedback/feedback-message.ts
+/** Renders a feedback message of the given type. When type='none', nothing is rendered. */
+var FeedbackMessage = class extends Localized(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "none";
+	}
+};
+__decorate([attr], FeedbackMessage.prototype, "type", void 0);
+function iconTemplate(context, icon, textI18nKey) {
+	const iconTag = context.tagFor(Icon);
+	return html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
+}
+function iconForType(context) {
+	const iconTemplateForType = {
+		none: "",
+		helper: "",
+		error: iconTemplate(context, "info-line", "errorIconText"),
+		success: iconTemplate(context, "check-circle-line", "successIconText")
+	};
+	return html`${(x) => iconTemplateForType[x.type]}`;
+}
+var shouldAnnounce = (type) => type === "error";
+var FeedbackMessageTemplate = (ctx) => {
+	const message = html`<div
+		class="${(x) => classNames("message", `${x.type}-message`)}"
+	>
+		${iconForType(ctx)}<slot></slot>
+	</div>`;
+	return html`${when((x) => !shouldAnnounce(x.type), message)}
+		<span class="announcement" role="status" aria-live="polite">
+			${when((x) => shouldAnnounce(x.type), message)}
+		</span>`;
+};
+var feedbackMessageDefinition = defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: feedback_message_default });
+//#endregion
+export { feedbackMessageDefinition as n, FeedbackMessage as t };

package/unbundled/form-associated.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -251,9 +250,7 @@ var FormAssociated = (Base) => {
 		/** @internal */
 		_keypressHandler(e) {
 			switch (e.key) {
-				case _microsoft_fast_web_utilities.keyEnter:
-					if (this.form instanceof HTMLFormElement) this.form.querySelector("[type=submit]")?.click();
-					break;
+				case _microsoft_fast_web_utilities.keyEnter: if (this.form instanceof HTMLFormElement) this.form.querySelector("[type=submit]")?.click();
 			}
 		}
 		/**

package/unbundled/form-associated.js

@@ -250,9 +250,7 @@ var FormAssociated = (Base) => {
 		/** @internal */
 		_keypressHandler(e) {
 			switch (e.key) {
-				case keyEnter:
-					if (this.form instanceof HTMLFormElement) this.form.querySelector("[type=submit]")?.click();
-					break;
+				case keyEnter: if (this.form instanceof HTMLFormElement) this.form.querySelector("[type=submit]")?.click();
 			}
 		}
 		/**

package/unbundled/form-element.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/form-elements/form-element.ts

package/unbundled/icon.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_numberConverter = require("./numberConverter.cjs");
 const require_decorate = require("./decorate.cjs");

package/unbundled/kbd-shortcut.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/kbd-shortcut.ts

package/unbundled/linkable.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");

package/unbundled/listbox.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_option = require("./option.cjs");
@@ -140,7 +139,6 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 				/* v8 ignore else -- @preserve */
 				if (Listbox.slottedOptionFilter(source)) this.selectedIndex = this.options.indexOf(source);
 				this.setSelectedOptions();
-				break;
 		}
 	}
 	/**

package/unbundled/listbox.js

@@ -139,7 +139,6 @@ var Listbox = class Listbox extends VividElement {
 				/* v8 ignore else -- @preserve */
 				if (Listbox.slottedOptionFilter(source)) this.selectedIndex = this.options.indexOf(source);
 				this.setSelectedOptions();
-				break;
 		}
 	}
 	/**

package/unbundled/localized.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_en_US = require("./en-US.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");