@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/definition25.cjs

@@ -0,0 +1,360 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition.cjs");
+const require_definition$1 = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_affix = require("./affix.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+const require_with_contextual_help = require("./with-contextual-help.cjs");
+const require_char_count = require("./char-count.cjs");
+const require_mixins = require("./mixins.cjs");
+const require_text_field = require("./text-field.cjs");
+const require_definition$2 = require("./definition30.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/text-field/text-field.ts
+/**
+* Text field sub-types
+* @public
+*/
+var TextFieldType = {
+	email: "email",
+	password: "password",
+	tel: "tel",
+	text: "text",
+	url: "url"
+};
+var safariWorkaroundStyles = new _microsoft_fast_element.ElementStyles([`
+	._vvd-3-text-field-safari-workaround::placeholder {
+		opacity: 1 !important;
+		-webkit-text-fill-color: var(--_low-ink-color) !important;
+	}
+`]);
+var installSafariWorkaroundStyleIfNeeded = (forElement) => {
+	const root = forElement.getRootNode();
+	if (!safariWorkaroundStyles.isAttachedTo(root)) safariWorkaroundStyles.addStylesTo(root);
+};
+/**
+* Base class for text-field
+*
+* @public
+* @component text-field
+* @slot leading-action-items - Used to add action items to the start of the text-field.
+* @slot action-items - Used to add action items to the end of the text-field.
+* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
+* @vueModel modelValue value input `event.currentTarget.value`
+* @testAction fill fill #control
+* @testAction clear clear #control
+* @testAction blur blur #control
+* @testRef control light input[slot="_control"]
+*/
+var TextField = class extends require_with_contextual_help.WithContextualHelp(require_mixins.WithLightDOMFeedback(require_char_count.WithCharCount(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_form_element.FormElement(require_affix.AffixIcon(require_delegates_aria.DelegatesAria(require_form_associated.FormAssociated(require_vivid_element.VividElement))))))))) {
+	constructor(..._args) {
+		super(..._args);
+		this.proxy = document.createElement("input");
+		this.type = TextFieldType.text;
+	}
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.readOnly = this.readOnly;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	autofocusChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.autofocus = this.autofocus;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
+	}
+	/**
+	* @internal
+	*/
+	typeChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.type = this.type;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	listChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.setAttribute("list", this.list);
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	maxlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.maxLength = this.maxlength;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	minlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.minLength = this.minlength;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	patternChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.pattern = this.pattern;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	sizeChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.size = this.size;
+	}
+	/**
+	* @internal
+	*/
+	spellcheckChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.spellcheck = this.spellcheck;
+	}
+	/**
+	* @internal
+	*/
+	valueChanged(previous, next) {
+		super.valueChanged(previous, next);
+		this._updateControlValueIfNeeded();
+		if (this.charCount && this.maxlength) this._updateCharCountRemaining();
+	}
+	/**
+	* Update the controls value only if it is actually different from the actual value.
+	* This is important as to not reset the browser's "dirtiness" flag on the input, which is used for min/maxlength
+	* constraints.
+	* @internal
+	*/
+	_updateControlValueIfNeeded() {
+		if (this.control && this.control.value !== this.value) this.control.value = this.value;
+	}
+	/**
+	* Selects all the text in the text field
+	*
+	* @public
+	*/
+	select() {
+		this.control.select();
+	}
+	/**
+	* Handles the internal control's `input` event
+	* @internal
+	*/
+	handleTextInput() {
+		this.value = this.control.value;
+	}
+	/**
+	* Change event handler for inner control.
+	* @remarks
+	* "Change" events are not `composable` so they will not
+	* permeate the shadow DOM boundary. This fn effectively proxies
+	* the change event, emitting a `change` event whenever the internal
+	* control emits a `change` event
+	* @internal
+	*/
+	handleChange() {
+		this.$emit("change");
+	}
+	/** {@inheritDoc (FormAssociated:interface).validate} */
+	validate() {
+		super.validate(this.control);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.proxy.setAttribute("type", this.type);
+		this.validate();
+		if (this.autofocus) _microsoft_fast_element.Updates.enqueue(() => {
+			this.focus();
+		});
+		this._updateControlValueIfNeeded();
+		installSafariWorkaroundStyleIfNeeded(this);
+		this._renderCharCountRemaining();
+	}
+	focus() {
+		this.control?.focus();
+	}
+	#randomId = require_mixins.generateRandomId();
+	/**
+	* @internal
+	*/
+	get _uniqueId() {
+		return this.id || this.#randomId;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "readonly",
+	mode: "boolean"
+})], TextField.prototype, "readOnly", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TextField.prototype, "autofocus", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "placeholder", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "type", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "list", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], TextField.prototype, "maxlength", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], TextField.prototype, "minlength", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "pattern", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: _microsoft_fast_element.nullableNumberConverter })], TextField.prototype, "size", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], TextField.prototype, "spellcheck", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "shape", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], TextField.prototype, "autoComplete", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], TextField.prototype, "scale", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "inputmode" })], TextField.prototype, "inputMode", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], TextField.prototype, "actionItemsSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], TextField.prototype, "leadingActionItemsSlottedContent", void 0);
+//#endregion
+//#region src/lib/text-field/text-field.template.ts
+var getControlId = (id) => `vvd-text-field-control-${id}`;
+var getStateClasses = ({ errorValidationMessage, disabled, value, readOnly, placeholder, appearance, shape, label, successText, actionItemsSlottedContent, leadingActionItemsSlottedContent, icon, scale }) => (0, _microsoft_fast_web_utilities.classNames)(["error", Boolean(errorValidationMessage)], ["disabled", disabled], ["has-value", Boolean(value)], ["readonly", readOnly], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["no-label", !label], ["has-icon", !!icon], ["success", Boolean(successText)], ["action-items", !!actionItemsSlottedContent?.length], ["leading-action-items", !!leadingActionItemsSlottedContent?.length], ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)], [`size-${scale}`, Boolean(scale)]);
+var TextfieldTemplate = (context) => {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
+	return _microsoft_fast_element.html`
+		<div class="base ${getStateClasses}">
+			${(0, _microsoft_fast_element.when)((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
+			<div
+				class="label-wrapper"
+				?hidden=${(x) => !x.label && !x._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
+				<slot
+					name="contextual-help"
+					${(0, _microsoft_fast_element.slotted)("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
+			${require_mixins.renderInLightDOM(_microsoft_fast_element.html`
+				${(0, _microsoft_fast_element.when)((x) => x.label, _microsoft_fast_element.html`
+						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
+							${(x) => x.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${(0, _microsoft_fast_element.slotted)("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${require_mixins.renderInLightDOM(_microsoft_fast_element.html`<input
+							slot="_control"
+							id="${(x) => getControlId(x._uniqueId)}"
+							class="_vvd-3-text-field-safari-workaround"
+							@input="${(x) => x.handleTextInput()}"
+							@change="${(x) => x.handleChange()}"
+							@blur="${(x) => {
+		x.$emit("blur", void 0, { bubbles: false });
+	}}"
+							@focus="${(x) => {
+		x.$emit("focus", void 0, { bubbles: false });
+	}}"
+							?autofocus="${(x) => x.autofocus}"
+							?disabled="${(x) => x.disabled}"
+							?readonly="${(x) => x.readOnly}"
+							?required="${(x) => x.required}"
+							?spellcheck="${(x) => x.spellcheck}"
+							list="${(x) => x.list}"
+							maxlength="${(x) => x.maxlength}"
+							minlength="${(x) => x.minlength}"
+							pattern="${(x) => x.pattern}"
+							placeholder="${(x) => x.placeholder}"
+							size="${(x) => x.size}"
+							autocomplete="${(x) => x.autoComplete}"
+							type="${(x) => x.type}"
+							inputmode="${(x) => x.inputMode}"
+							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
+							value="${(x) => x.initialValue}"
+							${require_delegates_aria.delegateAria()}
+							${(0, _microsoft_fast_element.ref)("control")}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${(0, _microsoft_fast_element.slotted)("actionItemsSlottedContent")}
+					></slot>
+				</div>
+			</div>
+			${(x) => x._getFeedbackTemplate(context)}
+		</div>
+	`;
+};
+//#endregion
+//#region src/lib/text-field/definition.ts
+/**
+* @internal
+*/
+var textFieldDefinition = require_vivid_element.defineVividComponent("text-field", TextField, TextfieldTemplate, [
+	require_definition$1.iconDefinition,
+	require_mixins.feedbackMessageDefinition,
+	require_definition.visuallyHiddenDefinition,
+	require_definition$2.contextualHelpDefinition
+], {
+	styles: require_text_field.text_field_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the text-field elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTextField = require_vivid_element.createRegisterFunction(textFieldDefinition);
+//#endregion
+Object.defineProperty(exports, "TextField", {
+	enumerable: true,
+	get: function() {
+		return TextField;
+	}
+});
+Object.defineProperty(exports, "registerTextField", {
+	enumerable: true,
+	get: function() {
+		return registerTextField;
+	}
+});
+Object.defineProperty(exports, "textFieldDefinition", {
+	enumerable: true,
+	get: function() {
+		return textFieldDefinition;
+	}
+});

package/unbundled/definition25.js

@@ -0,0 +1,342 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { n as visuallyHiddenDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { a as affixIconTemplateFactory, t as AffixIcon } from "./affix.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { n as FormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
+import { t as WithCharCount } from "./char-count.js";
+import { a as feedbackMessageDefinition, i as renderInLightDOM, n as WithLightDOMFeedback, r as generateRandomId } from "./mixins.js";
+import { t as text_field_default } from "./text-field.js";
+import { t as contextualHelpDefinition } from "./definition30.js";
+import { ElementStyles, Updates, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/text-field/text-field.ts
+/**
+* Text field sub-types
+* @public
+*/
+var TextFieldType = {
+	email: "email",
+	password: "password",
+	tel: "tel",
+	text: "text",
+	url: "url"
+};
+var safariWorkaroundStyles = new ElementStyles([`
+	._vvd-3-text-field-safari-workaround::placeholder {
+		opacity: 1 !important;
+		-webkit-text-fill-color: var(--_low-ink-color) !important;
+	}
+`]);
+var installSafariWorkaroundStyleIfNeeded = (forElement) => {
+	const root = forElement.getRootNode();
+	if (!safariWorkaroundStyles.isAttachedTo(root)) safariWorkaroundStyles.addStylesTo(root);
+};
+/**
+* Base class for text-field
+*
+* @public
+* @component text-field
+* @slot leading-action-items - Used to add action items to the start of the text-field.
+* @slot action-items - Used to add action items to the end of the text-field.
+* @slot helper-text - Describes how to use the text-field. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the value has changed
+* @vueModel modelValue value input `event.currentTarget.value`
+* @testAction fill fill #control
+* @testAction clear clear #control
+* @testAction blur blur #control
+* @testRef control light input[slot="_control"]
+*/
+var TextField = class extends WithContextualHelp(WithLightDOMFeedback(WithCharCount(WithErrorText(WithSuccessText(FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))))))) {
+	constructor(..._args) {
+		super(..._args);
+		this.proxy = document.createElement("input");
+		this.type = TextFieldType.text;
+	}
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.readOnly = this.readOnly;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	autofocusChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.autofocus = this.autofocus;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.placeholder = this.placeholder;
+	}
+	/**
+	* @internal
+	*/
+	typeChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.type = this.type;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	listChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.setAttribute("list", this.list);
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	maxlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.maxLength = this.maxlength;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	minlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.minLength = this.minlength;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	patternChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) {
+			this.proxy.pattern = this.pattern;
+			this.validate();
+		}
+	}
+	/**
+	* @internal
+	*/
+	sizeChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.size = this.size;
+	}
+	/**
+	* @internal
+	*/
+	spellcheckChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.spellcheck = this.spellcheck;
+	}
+	/**
+	* @internal
+	*/
+	valueChanged(previous, next) {
+		super.valueChanged(previous, next);
+		this._updateControlValueIfNeeded();
+		if (this.charCount && this.maxlength) this._updateCharCountRemaining();
+	}
+	/**
+	* Update the controls value only if it is actually different from the actual value.
+	* This is important as to not reset the browser's "dirtiness" flag on the input, which is used for min/maxlength
+	* constraints.
+	* @internal
+	*/
+	_updateControlValueIfNeeded() {
+		if (this.control && this.control.value !== this.value) this.control.value = this.value;
+	}
+	/**
+	* Selects all the text in the text field
+	*
+	* @public
+	*/
+	select() {
+		this.control.select();
+	}
+	/**
+	* Handles the internal control's `input` event
+	* @internal
+	*/
+	handleTextInput() {
+		this.value = this.control.value;
+	}
+	/**
+	* Change event handler for inner control.
+	* @remarks
+	* "Change" events are not `composable` so they will not
+	* permeate the shadow DOM boundary. This fn effectively proxies
+	* the change event, emitting a `change` event whenever the internal
+	* control emits a `change` event
+	* @internal
+	*/
+	handleChange() {
+		this.$emit("change");
+	}
+	/** {@inheritDoc (FormAssociated:interface).validate} */
+	validate() {
+		super.validate(this.control);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.proxy.setAttribute("type", this.type);
+		this.validate();
+		if (this.autofocus) Updates.enqueue(() => {
+			this.focus();
+		});
+		this._updateControlValueIfNeeded();
+		installSafariWorkaroundStyleIfNeeded(this);
+		this._renderCharCountRemaining();
+	}
+	focus() {
+		this.control?.focus();
+	}
+	#randomId = generateRandomId();
+	/**
+	* @internal
+	*/
+	get _uniqueId() {
+		return this.id || this.#randomId;
+	}
+};
+__decorate([attr({
+	attribute: "readonly",
+	mode: "boolean"
+})], TextField.prototype, "readOnly", void 0);
+__decorate([attr({ mode: "boolean" })], TextField.prototype, "autofocus", void 0);
+__decorate([attr], TextField.prototype, "placeholder", void 0);
+__decorate([attr], TextField.prototype, "type", void 0);
+__decorate([attr], TextField.prototype, "list", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], TextField.prototype, "maxlength", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], TextField.prototype, "minlength", void 0);
+__decorate([attr], TextField.prototype, "pattern", void 0);
+__decorate([attr({ converter: nullableNumberConverter })], TextField.prototype, "size", void 0);
+__decorate([attr({ mode: "boolean" })], TextField.prototype, "spellcheck", void 0);
+__decorate([attr], TextField.prototype, "appearance", void 0);
+__decorate([attr], TextField.prototype, "shape", void 0);
+__decorate([attr], TextField.prototype, "autoComplete", void 0);
+__decorate([attr()], TextField.prototype, "scale", void 0);
+__decorate([attr({ attribute: "inputmode" })], TextField.prototype, "inputMode", void 0);
+__decorate([observable], TextField.prototype, "actionItemsSlottedContent", void 0);
+__decorate([observable], TextField.prototype, "leadingActionItemsSlottedContent", void 0);
+//#endregion
+//#region src/lib/text-field/text-field.template.ts
+var getControlId = (id) => `vvd-text-field-control-${id}`;
+var getStateClasses = ({ errorValidationMessage, disabled, value, readOnly, placeholder, appearance, shape, label, successText, actionItemsSlottedContent, leadingActionItemsSlottedContent, icon, scale }) => classNames(["error", Boolean(errorValidationMessage)], ["disabled", disabled], ["has-value", Boolean(value)], ["readonly", readOnly], ["placeholder", Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["no-label", !label], ["has-icon", !!icon], ["success", Boolean(successText)], ["action-items", !!actionItemsSlottedContent?.length], ["leading-action-items", !!leadingActionItemsSlottedContent?.length], ["no-leading", !(leadingActionItemsSlottedContent?.length || icon)], [`size-${scale}`, Boolean(scale)]);
+var TextfieldTemplate = (context) => {
+	const affixIconTemplate = affixIconTemplateFactory(context);
+	return html`
+		<div class="base ${getStateClasses}">
+			${when((x) => x.charCount && x.maxlength, (x) => x._getCharCountTemplate(context))}
+			<div
+				class="label-wrapper"
+				?hidden=${(x) => !x.label && !x._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
+				<slot
+					name="contextual-help"
+					${slotted("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
+			${renderInLightDOM(html`
+				${when((x) => x.label, html`
+						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
+							${(x) => x.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${slotted("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${renderInLightDOM(html`<input
+							slot="_control"
+							id="${(x) => getControlId(x._uniqueId)}"
+							class="_vvd-3-text-field-safari-workaround"
+							@input="${(x) => x.handleTextInput()}"
+							@change="${(x) => x.handleChange()}"
+							@blur="${(x) => {
+		x.$emit("blur", void 0, { bubbles: false });
+	}}"
+							@focus="${(x) => {
+		x.$emit("focus", void 0, { bubbles: false });
+	}}"
+							?autofocus="${(x) => x.autofocus}"
+							?disabled="${(x) => x.disabled}"
+							?readonly="${(x) => x.readOnly}"
+							?required="${(x) => x.required}"
+							?spellcheck="${(x) => x.spellcheck}"
+							list="${(x) => x.list}"
+							maxlength="${(x) => x.maxlength}"
+							minlength="${(x) => x.minlength}"
+							pattern="${(x) => x.pattern}"
+							placeholder="${(x) => x.placeholder}"
+							size="${(x) => x.size}"
+							autocomplete="${(x) => x.autoComplete}"
+							type="${(x) => x.type}"
+							inputmode="${(x) => x.inputMode}"
+							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
+							value="${(x) => x.initialValue}"
+							${delegateAria()}
+							${ref("control")}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${slotted("actionItemsSlottedContent")}
+					></slot>
+				</div>
+			</div>
+			${(x) => x._getFeedbackTemplate(context)}
+		</div>
+	`;
+};
+//#endregion
+//#region src/lib/text-field/definition.ts
+/**
+* @internal
+*/
+var textFieldDefinition = defineVividComponent("text-field", TextField, TextfieldTemplate, [
+	iconDefinition,
+	feedbackMessageDefinition,
+	visuallyHiddenDefinition,
+	contextualHelpDefinition
+], {
+	styles: text_field_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the text-field elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTextField = createRegisterFunction(textFieldDefinition);
+//#endregion
+export { textFieldDefinition as n, TextField as r, registerTextField as t };