@vonage/vivid 5.25.0 → 5.27.0

package/unbundled/mixins.cjs

@@ -1,52 +1,7 @@
-require("./chunk.cjs");
-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");
+const require_feedback_message = require("./feedback-message.cjs");
 const require_randomId = require("./randomId.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
 //#region src/shared/feedback/mixins.ts
 /** Mixin for elements that display a feedback message. */
 var WithFeedback = (Base) => {
@@ -87,7 +42,7 @@ var WithFeedback = (Base) => {
 		}
 		/** @internal */
 		_getFeedbackTemplate(ctx) {
-			const feedbackTag = ctx.tagFor(FeedbackMessage);
+			const feedbackTag = ctx.tagFor(require_feedback_message.FeedbackMessage);
 			return _microsoft_fast_element.html`
 				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
 					${(x) => x._internalFeedback().message}
@@ -131,7 +86,7 @@ var WithLightDOMFeedback = (Base) => {
 		}
 		/** @internal */
 		_getFeedbackTemplate(ctx) {
-			const feedbackTag = ctx.tagFor(FeedbackMessage);
+			const feedbackTag = ctx.tagFor(require_feedback_message.FeedbackMessage);
 			return _microsoft_fast_element.html`
 				<slot name="_feedback"></slot>
 				${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<${feedbackTag}
@@ -166,9 +121,3 @@ Object.defineProperty(exports, "WithLightDOMFeedback", {
 		return WithLightDOMFeedback;
 	}
 });
-Object.defineProperty(exports, "feedbackMessageDefinition", {
-	enumerable: true,
-	get: function() {
-		return feedbackMessageDefinition;
-	}
-});

package/unbundled/mixins.js

@@ -1,51 +1,7 @@
-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 { t as FeedbackMessage } from "./feedback-message.js";
 import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
-import { attr, html, observable, slotted, 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
+import { attr, html, observable, slotted } from "@microsoft/fast-element";
 //#region src/shared/feedback/mixins.ts
 /** Mixin for elements that display a feedback message. */
 var WithFeedback = (Base) => {
@@ -153,4 +109,4 @@ var WithLightDOMFeedback = (Base) => {
 	return ElementWithLightDOMFeedback;
 };
 //#endregion
-export { WithLightDOMFeedback as n, feedbackMessageDefinition as r, WithFeedback as t };
+export { WithLightDOMFeedback as n, WithFeedback as t };

package/unbundled/numberConverter.cjs

@@ -10,9 +10,12 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
             </animateTransform>
         </g>
     </g>
-</svg>`, e = {
+</svg>`;
+//#endregion
+//#region ../icons/dist/index.mjs
+var e = {
 	name: "@vonage/vivid-icons",
-	version: "4.11.0",
+	version: "4.12.0",
 	type: "module",
 	exports: {
 		".": {
@@ -45,7 +48,9 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 		vite: "catalog:",
 		"vite-plugin-dts": "catalog:"
 	}
-}, t = "https://icon.resources.vonage.com", n = e.version;
+};
+var t = "https://icon.resources.vonage.com";
+var n = e.version;
 `${t}${n}`;
 //#endregion
 //#region src/shared/icon/utils.ts

package/unbundled/numberConverter.js

@@ -10,9 +10,12 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
             </animateTransform>
         </g>
     </g>
-</svg>`, e = {
+</svg>`;
+//#endregion
+//#region ../icons/dist/index.mjs
+var e = {
 	name: "@vonage/vivid-icons",
-	version: "4.11.0",
+	version: "4.12.0",
 	type: "module",
 	exports: {
 		".": {
@@ -45,7 +48,9 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 		vite: "catalog:",
 		"vite-plugin-dts": "catalog:"
 	}
-}, t = "https://icon.resources.vonage.com", n = e.version;
+};
+var t = "https://icon.resources.vonage.com";
+var n = e.version;
 `${t}${n}`;
 //#endregion
 //#region src/shared/icon/utils.ts

package/unbundled/optgroup.cjs

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

package/unbundled/option.cjs

@@ -1,11 +1,12 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.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/option/option.ts
+var optionConnotation = require_component_enum.componentEnum(["accent", "cta"], "accent");
 /**
 * Determines if the element is a {@link (ListboxOption:class)}
 *
@@ -174,3 +175,9 @@ Object.defineProperty(exports, "isListboxOption", {
 		return isListboxOption;
 	}
 });
+Object.defineProperty(exports, "optionConnotation", {
+	enumerable: true,
+	get: function() {
+		return optionConnotation;
+	}
+});

package/unbundled/option.js

@@ -1,10 +1,12 @@
 import { t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { n as AffixIconWithTrailing } from "./affix.js";
+import { t as componentEnum } from "./component-enum.js";
 import { t as HostSemantics } from "./host-semantics.js";
 import { attr, observable, volatile } from "@microsoft/fast-element";
 import { isHTMLElement } from "@microsoft/fast-web-utilities";
 //#region src/lib/option/option.ts
+var optionConnotation = componentEnum(["accent", "cta"], "accent");
 /**
 * Determines if the element is a {@link (ListboxOption:class)}
 *
@@ -161,4 +163,4 @@ __decorate([volatile], ListboxOption.prototype, "_matchedRange", null);
 __decorate([attr], ListboxOption.prototype, "connotation", void 0);
 __decorate([attr({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
 //#endregion
-export { isListboxOption as n, ListboxOption as t };
+export { isListboxOption as n, optionConnotation as r, ListboxOption as t };

package/unbundled/picker-field.template.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_form_associated = require("./form-associated.cjs");
@@ -6,9 +5,9 @@ const require_localized = require("./localized.cjs");
 const require_definition = require("./definition6.cjs");
 const require_dialog = require("./dialog.cjs");
 const require_definition$1 = require("./definition9.cjs");
-const require_mixins = require("./mixins.cjs");
 const require_form_element = require("./form-element.cjs");
 const require_with_error_text = require("./with-error-text.cjs");
+const require_mixins = require("./mixins.cjs");
 const require_with_contextual_help = require("./with-contextual-help.cjs");
 const require_definition$2 = require("./definition26.cjs");
 const require_trapped_focus = require("./trapped-focus.cjs");

package/unbundled/picker-field.template.js

@@ -5,9 +5,9 @@ import { t as Localized } from "./localized.js";
 import { i as Button } from "./definition6.js";
 import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
 import { i as Popup } from "./definition9.js";
-import { t as WithFeedback } from "./mixins.js";
 import { t as FormElement } from "./form-element.js";
 import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithFeedback } from "./mixins.js";
 import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { r as TextField } from "./definition26.js";
 import { t as TrappedFocus } from "./trapped-focus.js";

package/unbundled/randomId.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let uuid = require("uuid");
 //#region src/shared/templating/render-in-light-dom.ts

package/unbundled/{chunk.cjs → rolldown-runtime.cjs}

@@ -24,7 +24,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));

package/unbundled/scrollIntoView.cjs

@@ -8,7 +8,6 @@ function scrollIntoView(element, parent, position) {
 		case "nearest":
 			if (offsetTop < parent.scrollTop) parent.scrollTop = offsetTop;
 			if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
-			break;
 	}
 }
 function flatTreeOffsetTop(element) {

package/unbundled/scrollIntoView.js

@@ -8,7 +8,6 @@ function scrollIntoView(element, parent, position) {
 		case "nearest":
 			if (offsetTop < parent.scrollTop) parent.scrollTop = offsetTop;
 			if (offsetTop + element.offsetHeight > parent.scrollTop + parent.offsetHeight) parent.scrollTop = offsetTop + element.offsetHeight - parent.offsetHeight;
-			break;
 	}
 }
 function flatTreeOffsetTop(element) {