@vonage/vivid 5.18.0 → 5.20.0

package/unbundled/mixins.js

@@ -1,11 +1,11 @@
-import { o as defineVividComponent, t as VividElement } from "./vivid-element.js";
-import { n as visuallyHiddenDefinition } from "./definition.js";
-import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as VividElement, u as defineVividComponent } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
-import { HTMLDirective, Markup, attr, html, normalizeBinding, observable, slotted, when } from "@microsoft/fast-element";
+import { n as visuallyHiddenDefinition } from "./definition6.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";
-import { v4 } from "uuid";
 //#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
@@ -47,64 +47,6 @@ var FeedbackMessageTemplate = (ctx) => {
 };
 var feedbackMessageDefinition = defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: feedback_message_default });
 //#endregion
-//#region src/shared/templating/render-in-light-dom.ts
-var RenderInLightDomBehaviour = class {
-	constructor(directive) {
-		this.source = null;
-		this.templateBindingObserver = directive.templateBinding.createObserver(this, directive);
-	}
-	bind(controller) {
-		this.source = controller.source;
-		this.context = controller.context;
-		this.controller = controller;
-		if (!this.insertionPoint) {
-			this.insertionPoint = document.createComment("");
-			this.source.appendChild(this.insertionPoint);
-		}
-		this.templateBindingObserver.bind(controller);
-		this.handleChange(this.source, this.templateBindingObserver);
-	}
-	/**
-	* Handles change of the template itself.
-	*/
-	handleChange(source, args) {
-		/* v8 ignore else -- @preserve */
-		if (args === this.templateBindingObserver) {
-			const template = this.templateBindingObserver.bind(this.controller);
-			this.instantiateTemplate(template);
-		}
-	}
-	instantiateTemplate(template) {
-		if (this.view) this.view.dispose();
-		this.view = template.create();
-		this.view.bind(this.source, this.context);
-		this.view.insertBefore(this.insertionPoint);
-	}
-};
-var RenderInLightDomDirective = class {
-	constructor(templateBinding) {
-		this.targetNodeId = "";
-		this.templateBinding = templateBinding;
-		this.dataBinding = templateBinding;
-	}
-	createHTML(add) {
-		return Markup.comment(add(this));
-	}
-	createBehavior() {
-		return new RenderInLightDomBehaviour(this);
-	}
-};
-HTMLDirective.define(RenderInLightDomDirective);
-/**
-* Directive to render a template into the light DOM of the host element.
-*/
-function renderInLightDOM(templateOrTemplateBinding) {
-	return new RenderInLightDomDirective(normalizeBinding(templateOrTemplateBinding));
-}
-//#endregion
-//#region src/shared/utils/randomId.ts
-var generateRandomId = () => v4();
-//#endregion
 //#region src/shared/feedback/mixins.ts
 /**
 * Mixin for elements that display a feedback message.
@@ -226,4 +168,4 @@ var WithLightDOMFeedback = (Base) => {
 	return ElementWithLightDOMFeedback;
 };
 //#endregion
-export { feedbackMessageDefinition as a, renderInLightDOM as i, WithLightDOMFeedback as n, generateRandomId as r, WithFeedback as t };
+export { WithLightDOMFeedback as n, feedbackMessageDefinition as r, WithFeedback as t };

package/unbundled/picker-field.template.cjs

@@ -39,8 +39,22 @@ var PickerField = class extends require_with_contextual_help.WithContextualHelp(
 	constructor() {
 		super();
 		this.readOnly = false;
+		this.#onFocusIn = () => {
+			this.$emit("focus", void 0, { bubbles: false });
+		};
+		this.#onFocusOut = () => {
+			this.$emit("blur", void 0, { bubbles: false });
+		};
 		this.proxy = document.createElement("input");
+		this.#localeChangeHandler = { handleChange: () => {
+			this._updatePresentationValue();
+		} };
 		this._popupOpen = false;
+		this.#dismissOnClickOutside = (event) => {
+			if (!this._popupOpen) return;
+			const path = event.composedPath();
+			if (![this._dialogEl, this._pickerButtonEl].some((element) => path.includes(element))) this._closePopup(false);
+		};
 		this._presentationValue = "";
 		this.value = "";
 	}
@@ -64,12 +78,8 @@ var PickerField = class extends require_with_contextual_help.WithContextualHelp(
 		this.removeEventListener("focusout", this.#onFocusOut);
 		this.#stopObservingLocaleChanges();
 	}
-	#onFocusIn = () => {
-		this.$emit("focus", void 0, { bubbles: false });
-	};
-	#onFocusOut = () => {
-		this.$emit("blur", void 0, { bubbles: false });
-	};
+	#onFocusIn;
+	#onFocusOut;
 	/**
 	* @internal
 	*/
@@ -77,9 +87,7 @@ var PickerField = class extends require_with_contextual_help.WithContextualHelp(
 		if (this.proxy) this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
 		super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
 	}
-	#localeChangeHandler = { handleChange: () => {
-		this._updatePresentationValue();
-	} };
+	#localeChangeHandler;
 	#localeChangeObserver;
 	#startObservingLocaleChanges() {
 		this.#localeChangeObserver = _microsoft_fast_element.Observable.binding(() => this.locale, this.#localeChangeHandler);
@@ -88,11 +96,7 @@ var PickerField = class extends require_with_contextual_help.WithContextualHelp(
 	#stopObservingLocaleChanges() {
 		this.#localeChangeObserver.dispose();
 	}
-	#dismissOnClickOutside = (event) => {
-		if (!this._popupOpen) return;
-		const path = event.composedPath();
-		if (![this._dialogEl, this._pickerButtonEl].some((element) => path.includes(element))) this._closePopup(false);
-	};
+	#dismissOnClickOutside;
 	#openPopupIfPossible() {
 		/* v8 ignore else -- @preserve */
 		if (!this.readOnly) this._popupOpen = true;
@@ -127,7 +131,8 @@ var PickerField = class extends require_with_contextual_help.WithContextualHelp(
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this._presentationValue = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this._presentationValue = textField.value;
 	}
 	/**
 	* @internal

package/unbundled/picker-field.template.js

@@ -38,8 +38,22 @@ var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(Fo
 	constructor() {
 		super();
 		this.readOnly = false;
+		this.#onFocusIn = () => {
+			this.$emit("focus", void 0, { bubbles: false });
+		};
+		this.#onFocusOut = () => {
+			this.$emit("blur", void 0, { bubbles: false });
+		};
 		this.proxy = document.createElement("input");
+		this.#localeChangeHandler = { handleChange: () => {
+			this._updatePresentationValue();
+		} };
 		this._popupOpen = false;
+		this.#dismissOnClickOutside = (event) => {
+			if (!this._popupOpen) return;
+			const path = event.composedPath();
+			if (![this._dialogEl, this._pickerButtonEl].some((element) => path.includes(element))) this._closePopup(false);
+		};
 		this._presentationValue = "";
 		this.value = "";
 	}
@@ -63,12 +77,8 @@ var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(Fo
 		this.removeEventListener("focusout", this.#onFocusOut);
 		this.#stopObservingLocaleChanges();
 	}
-	#onFocusIn = () => {
-		this.$emit("focus", void 0, { bubbles: false });
-	};
-	#onFocusOut = () => {
-		this.$emit("blur", void 0, { bubbles: false });
-	};
+	#onFocusIn;
+	#onFocusOut;
 	/**
 	* @internal
 	*/
@@ -76,9 +86,7 @@ var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(Fo
 		if (this.proxy) this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
 		super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
 	}
-	#localeChangeHandler = { handleChange: () => {
-		this._updatePresentationValue();
-	} };
+	#localeChangeHandler;
 	#localeChangeObserver;
 	#startObservingLocaleChanges() {
 		this.#localeChangeObserver = Observable.binding(() => this.locale, this.#localeChangeHandler);
@@ -87,11 +95,7 @@ var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(Fo
 	#stopObservingLocaleChanges() {
 		this.#localeChangeObserver.dispose();
 	}
-	#dismissOnClickOutside = (event) => {
-		if (!this._popupOpen) return;
-		const path = event.composedPath();
-		if (![this._dialogEl, this._pickerButtonEl].some((element) => path.includes(element))) this._closePopup(false);
-	};
+	#dismissOnClickOutside;
 	#openPopupIfPossible() {
 		/* v8 ignore else -- @preserve */
 		if (!this.readOnly) this._popupOpen = true;
@@ -126,7 +130,8 @@ var PickerField = class extends WithContextualHelp(WithFeedback(WithErrorText(Fo
 	* @internal
 	*/
 	_onTextFieldInput(event) {
-		this._presentationValue = event.currentTarget.value;
+		const textField = event.currentTarget;
+		this._presentationValue = textField.value;
 	}
 	/**
 	* @internal

package/unbundled/platform.cjs

@@ -0,0 +1,17 @@
+//#region src/shared/utils/platform.ts
+/**
+* Returns true if the current platform is Apple (macOS, iOS, iPadOS).
+*/
+function isApplePlatform() {
+	/* v8 ignore next 3 -- @preserve */
+	if (typeof navigator === "undefined") return false;
+	const ua = navigator.userAgent.toLowerCase();
+	return ua.includes("mac") || ua.includes("iphone") || ua.includes("ipad");
+}
+//#endregion
+Object.defineProperty(exports, "isApplePlatform", {
+	enumerable: true,
+	get: function() {
+		return isApplePlatform;
+	}
+});

package/unbundled/platform.js

@@ -0,0 +1,12 @@
+//#region src/shared/utils/platform.ts
+/**
+* Returns true if the current platform is Apple (macOS, iOS, iPadOS).
+*/
+function isApplePlatform() {
+	/* v8 ignore next 3 -- @preserve */
+	if (typeof navigator === "undefined") return false;
+	const ua = navigator.userAgent.toLowerCase();
+	return ua.includes("mac") || ua.includes("iphone") || ua.includes("ipad");
+}
+//#endregion
+export { isApplePlatform as t };

package/unbundled/randomId.cjs

@@ -0,0 +1,47 @@
+require("./chunk.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let uuid = require("uuid");
+//#region src/shared/templating/render-in-light-dom.ts
+var RenderInLightDomDirective = class {
+	constructor(template) {
+		this.template = template;
+	}
+	createHTML(add) {
+		return _microsoft_fast_element.Markup.comment(add(this));
+	}
+	createBehavior() {
+		return this;
+	}
+	bind(controller) {
+		const view = this.template.create();
+		view.bind(controller.source, controller.context);
+		view.appendTo(controller.source);
+		controller.onUnbind({ unbind: () => {
+			if (view.firstChild.parentNode && view.lastChild.parentNode) view.dispose();
+			else view.unbind();
+		} });
+	}
+};
+_microsoft_fast_element.HTMLDirective.define(RenderInLightDomDirective);
+/**
+* Directive to render a template into the light DOM of the host element.
+*/
+function renderInLightDOM(template) {
+	return new RenderInLightDomDirective(template);
+}
+//#endregion
+//#region src/shared/utils/randomId.ts
+var generateRandomId = () => (0, uuid.v4)();
+//#endregion
+Object.defineProperty(exports, "generateRandomId", {
+	enumerable: true,
+	get: function() {
+		return generateRandomId;
+	}
+});
+Object.defineProperty(exports, "renderInLightDOM", {
+	enumerable: true,
+	get: function() {
+		return renderInLightDOM;
+	}
+});

package/unbundled/randomId.js

@@ -0,0 +1,35 @@
+import { HTMLDirective, Markup } from "@microsoft/fast-element";
+import { v4 } from "uuid";
+//#region src/shared/templating/render-in-light-dom.ts
+var RenderInLightDomDirective = class {
+	constructor(template) {
+		this.template = template;
+	}
+	createHTML(add) {
+		return Markup.comment(add(this));
+	}
+	createBehavior() {
+		return this;
+	}
+	bind(controller) {
+		const view = this.template.create();
+		view.bind(controller.source, controller.context);
+		view.appendTo(controller.source);
+		controller.onUnbind({ unbind: () => {
+			if (view.firstChild.parentNode && view.lastChild.parentNode) view.dispose();
+			else view.unbind();
+		} });
+	}
+};
+HTMLDirective.define(RenderInLightDomDirective);
+/**
+* Directive to render a template into the light DOM of the host element.
+*/
+function renderInLightDOM(template) {
+	return new RenderInLightDomDirective(template);
+}
+//#endregion
+//#region src/shared/utils/randomId.ts
+var generateRandomId = () => v4();
+//#endregion
+export { renderInLightDOM as n, generateRandomId as t };

package/unbundled/text-field.cjs

@@ -1,5 +1,5 @@
 //#region src/lib/text-field/text-field.scss?inline
-var text_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base{--_connotation-color-primary:var(--vvd-text-field-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-field-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-field-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-field-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-field-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-field-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-field-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-field-accent-soft,var(--vvd-color-neutral-100));--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
+var text_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base{--_connotation-color-primary:var(--vvd-text-field-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-field-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-field-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-field-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-field-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-field-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-field-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-field-accent-soft,var(--vvd-color-neutral-100));--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
 //#endregion
 Object.defineProperty(exports, "text_field_default", {
 	enumerable: true,

package/unbundled/text-field.js

@@ -1,4 +1,4 @@
 //#region src/lib/text-field/text-field.scss?inline
-var text_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base{--_connotation-color-primary:var(--vvd-text-field-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-field-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-field-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-field-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-field-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-field-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-field-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-field-accent-soft,var(--vvd-color-neutral-100));--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
+var text_field_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{display:inline-block}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.base{--_connotation-color-primary:var(--vvd-text-field-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-text-field-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-text-field-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-text-field-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-text-field-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-text-field-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-text-field-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-text-field-accent-soft,var(--vvd-color-neutral-100));--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
 //#endregion
 export { text_field_default as t };

package/unbundled/time-selection-picker.template.cjs

@@ -377,6 +377,9 @@ var TimeSelectionPicker = (Base) => {
 			super(..._args);
 			this.minutesStep = null;
 			this.secondsStep = null;
+			this.#clockChangeHandler = { handleChange: () => {
+				if (this.value) this._presentationValue = this._toPresentationValue(this.value);
+			} };
 		}
 		/**
 		* @internal
@@ -399,9 +402,7 @@ var TimeSelectionPicker = (Base) => {
 			if (this._use12hClock) format += " aa";
 			return format;
 		}
-		#clockChangeHandler = { handleChange: () => {
-			if (this.value) this._presentationValue = this._toPresentationValue(this.value);
-		} };
+		#clockChangeHandler;
 		#clockChangeObserver;
 		#startObservingClockChanges() {
 			this.#clockChangeObserver = _microsoft_fast_element.Observable.binding(() => this._use12hClock, this.#clockChangeHandler);

package/unbundled/time-selection-picker.template.js

@@ -1,4 +1,4 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
 import { t as Localized } from "./localized.js";
 import { n as ignoreEventInFocusTraps } from "./trapped-focus.js";
@@ -376,6 +376,9 @@ var TimeSelectionPicker = (Base) => {
 			super(..._args);
 			this.minutesStep = null;
 			this.secondsStep = null;
+			this.#clockChangeHandler = { handleChange: () => {
+				if (this.value) this._presentationValue = this._toPresentationValue(this.value);
+			} };
 		}
 		/**
 		* @internal
@@ -398,9 +401,7 @@ var TimeSelectionPicker = (Base) => {
 			if (this._use12hClock) format += " aa";
 			return format;
 		}
-		#clockChangeHandler = { handleChange: () => {
-			if (this.value) this._presentationValue = this._toPresentationValue(this.value);
-		} };
+		#clockChangeHandler;
 		#clockChangeObserver;
 		#startObservingClockChanges() {
 			this.#clockChangeObserver = Observable.binding(() => this._use12hClock, this.#clockChangeHandler);

package/unbundled/vivid-element.cjs

@@ -64,6 +64,9 @@ var getSubscribers = (source) => {
 var subscribeToAriaPropertyChanges = (source, listener) => {
 	getSubscribers(source).push(listener);
 };
+var unsubscribeFromAriaPropertyChanges = (source, listener) => {
+	getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
+};
 var publishAriaPropertyChange = (source, changedAriaProperty) => {
 	getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
 };
@@ -101,10 +104,9 @@ var handleElementConnectedCallback = (element) => {
 //#endregion
 //#region src/shared/aria/aria-mixin.ts
 /**
-* Properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
-* IDREF properties are omitted.
+* Value properties of the ARIAMixin (see: https://www.w3.org/TR/wai-aria-1.3/#ARIAMixin) which is applied to Element.
 */
-var ariaMixinProperties = [
+var ariaValueProperties = [
 	"role",
 	"ariaAtomic",
 	"ariaAutoComplete",
@@ -148,6 +150,27 @@ var ariaMixinProperties = [
 	"ariaValueText",
 	"ariaRelevant"
 ];
+/**
+* Single-element IDREF properties of the ARIAMixin
+* Not yet supported.
+*/
+/**
+* Multi-element IDREF properties of the ARIAMixin.
+*/
+var ariaIdrefsProperties = [
+	"ariaControls",
+	"ariaDescribedBy",
+	"ariaDetails",
+	"ariaErrorMessage",
+	"ariaFlowTo",
+	"ariaLabelledBy",
+	"ariaOwns"
+];
+var ariaProperties = [...ariaValueProperties, ...ariaIdrefsProperties];
+/**
+* Derives the HTML attribute name from an ARIA property name.
+* e.g. `ariaLabel` → `aria-label`
+*/
 var ariaAttributeName = (ariaPropertyName) => ariaPropertyName.replace("aria", "aria-").toLowerCase();
 /**
 * Mixin for all components. Declares all ARIA attributes.
@@ -157,14 +180,14 @@ var AriaMixin = (Base) => {
 		constructor(...args) {
 			super(...args);
 			this._vividAriaBehaviour = "default";
-			for (const ariaProperty of ariaMixinProperties) this[`_${ariaProperty}`] = null;
+			for (const ariaProperty of ariaProperties) this[`_${ariaProperty}`] = null;
 		}
 		connectedCallback() {
 			super.connectedCallback();
 			handleElementConnectedCallback(this);
 		}
 	}
-	for (const ariaProperty of ariaMixinProperties) {
+	for (const ariaProperty of ariaProperties) {
 		(0, _microsoft_fast_element.attr)({
 			attribute: ariaAttributeName(ariaProperty),
 			mode: "fromView"
@@ -177,6 +200,41 @@ var AriaMixin = (Base) => {
 	return AriaMixinElement;
 };
 //#endregion
+//#region src/shared/framework/reactive-controller.ts
+/**
+* Mixin implementing ReactiveControllerHost for custom elements.
+*/
+var ReactiveControllerHostSupport = (Base) => {
+	class ReactiveControllerHostSupportElement extends Base {
+		#controllers = /* @__PURE__ */ new Set();
+		/**
+		* Adds a controller to the host, which sets up the controller's lifecycle
+		* methods to be called with the host's lifecycle.
+		* @internal
+		*/
+		_addController(controller) {
+			this.#controllers.add(controller);
+			if (this.$fastController.isConnected) controller.hostConnected?.();
+		}
+		/**
+		* Removes a controller from the host.
+		* @internal
+		*/
+		_removeController(controller) {
+			this.#controllers.delete(controller);
+		}
+		connectedCallback() {
+			super.connectedCallback();
+			for (const controller of this.#controllers) controller.hostConnected?.();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback();
+			for (const controller of this.#controllers) controller.hostDisconnected?.();
+		}
+	}
+	return ReactiveControllerHostSupportElement;
+};
+//#endregion
 //#region src/shared/deprecation/replaced-props.ts
 function createMetadataLocator() {
 	const metadataMap = /* @__PURE__ */ new WeakMap();
@@ -239,9 +297,9 @@ var ReplacedPropHandling = (Base) => {
 * @testAction focus focus #locator
 * @testAction blur blur #locator
 */
-var VividElement = class extends AriaMixin(ReplacedPropHandling(_microsoft_fast_element.FASTElement)) {
+var VividElement = class extends AriaMixin(ReplacedPropHandling(ReactiveControllerHostSupport(_microsoft_fast_element.FASTElement))) {
 	static {
-		this.VIVID_VERSION = "5.18.0";
+		this.VIVID_VERSION = "5.20.0";
 	}
 	/**
 	* Add data-vvd-component attribute with component name globally,
@@ -266,10 +324,16 @@ Object.defineProperty(exports, "ariaAttributeName", {
 		return ariaAttributeName;
 	}
 });
-Object.defineProperty(exports, "ariaMixinProperties", {
+Object.defineProperty(exports, "ariaIdrefsProperties", {
+	enumerable: true,
+	get: function() {
+		return ariaIdrefsProperties;
+	}
+});
+Object.defineProperty(exports, "ariaValueProperties", {
 	enumerable: true,
 	get: function() {
-		return ariaMixinProperties;
+		return ariaValueProperties;
 	}
 });
 Object.defineProperty(exports, "createRegisterFunction", {
@@ -284,6 +348,18 @@ Object.defineProperty(exports, "defineVividComponent", {
 		return defineVividComponent;
 	}
 });
+Object.defineProperty(exports, "handleAriaPropertyChange", {
+	enumerable: true,
+	get: function() {
+		return handleAriaPropertyChange;
+	}
+});
+Object.defineProperty(exports, "publishAriaPropertyChange", {
+	enumerable: true,
+	get: function() {
+		return publishAriaPropertyChange;
+	}
+});
 Object.defineProperty(exports, "replaces", {
 	enumerable: true,
 	get: function() {
@@ -296,3 +372,9 @@ Object.defineProperty(exports, "subscribeToAriaPropertyChanges", {
 		return subscribeToAriaPropertyChanges;
 	}
 });
+Object.defineProperty(exports, "unsubscribeFromAriaPropertyChanges", {
+	enumerable: true,
+	get: function() {
+		return unsubscribeFromAriaPropertyChanges;
+	}
+});