@vonage/vivid 5.28.1 → 5.29.0

package/number-field/index.js

@@ -24,15 +24,22 @@ import { t as N } from "../bundled/mixins.js";
 import { t as P } from "../bundled/definition20.js";
 import { t as F } from "../bundled/divider.js";
 //#region src/lib/number-field/number-field.scss?inline
-var I = ".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{--_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}.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,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!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),.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}.control::slotted(input:autofill),.control:not(slot):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}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
+var I = ".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{--_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}.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,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!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),.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}.control::slotted(input:autofill),.control:not(slot):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}.base{--_text-field-gutter-end:70px}.base.no-steppers{--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}.base.no-steppers.size-condensed{--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.control-buttons[hidden]{display:none}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
 	up: 1,
 	down: -1
-};
-function z(e, t) {
-	let n = parseFloat(e.value), r = isNaN(n) ? e.min > 0 ? e.min : e.max < 0 ? e.max : e.min ? 0 : t * e.step : n + t * e.step;
-	e.value = Number(r.toFixed(12)).toString(), e._updatedValueAnnouncement = e.locale.numberField.updatedValueAnnouncement(e._presentationValue);
+}, z = 1;
+function B(e, t) {
+	let n = e._numericStep, r = parseFloat(e.value), i = isNaN(r) ? e.min > 0 ? e.min : e.max < 0 ? e.max : e.min ? 0 : t * n : r + t * n;
+	e.value = Number(i.toFixed(12)).toString(), e._updatedValueAnnouncement = e.locale.numberField.updatedValueAnnouncement(e._presentationValue);
 }
-var B = (e) => {
+var V = {
+	toView(e) {
+		return e === "any" ? "any" : i.toView(e);
+	},
+	fromView(e) {
+		return typeof e == "string" && e.trim().toLowerCase() === "any" ? "any" : i.fromView(e);
+	}
+}, H = (e) => {
 	let t = e.source;
 	return {
 		invalidCharacters: RegExp(`[^0-9\\-+e${t}]`, "g"),
@@ -40,12 +47,18 @@ var B = (e) => {
 		trailingDecimalSeparator: RegExp(`${t}$`),
 		decimalSeparator: e
 	};
-}, V = B(/\./), H = B(/,/), U = /^-?((\d*\.\d+)|(\d+))$/, W = class extends A(N(j(M(k(b(e(S(w(s))))))))) {
+}, U = H(/\./), W = H(/,/), G = /^-?((\d*\.\d+)|(\d+))$/, K = class extends A(N(j(M(k(b(e(S(w(s))))))))) {
 	constructor(...e) {
-		super(...e), this.proxy = document.createElement("input"), this.readOnly = !1, this.autofocus = !1, this.step = 1, this.isUserInput = !1, this._presentationValue = "", this._updatedValueAnnouncement = "", this.incrementButtonAriaLabel = null, this.decrementButtonAriaLabel = null;
+		super(...e), this.proxy = document.createElement("input"), this.readOnly = !1, this.autofocus = !1, this.step = 1, this.noSteppers = !1, this.isUserInput = !1, this._presentationValue = "", this._updatedValueAnnouncement = "", this.incrementButtonAriaLabel = null, this.decrementButtonAriaLabel = null;
 	}
 	stepChanged(e, t) {
-		this.proxy.setAttribute("step", Number.isFinite(t) ? t.toString() : "");
+		this.proxy.setAttribute("step", t === "any" ? "any" : Number.isFinite(t) ? t.toString() : ""), this.validate();
+	}
+	get _hasSteppers() {
+		return !this.noSteppers && this.step !== "any";
+	}
+	get _numericStep() {
+		return this.step === "any" ? z : this.step;
 	}
 	maxChanged(e, t) {
 		this.max = Math.max(t, this.min ?? t), this.proxy.max = this.max.toString(), this.validate();
@@ -60,10 +73,10 @@ var B = (e) => {
 		this.value = e.toString();
 	}
 	valueChanged(e, t) {
-		this.value = U.test(t) ? t : "", t === this.value && (this.control && !this.isUserInput && (this._presentationValue = this.#e(this.value)), super.valueChanged(e, this.value), e !== void 0 && !this.isUserInput && (this.$emit("input"), this.$emit("change")));
+		this.value = G.test(t) ? t : "", t === this.value && (this.control && !this.isUserInput && (this._presentationValue = this.#e(this.value)), super.valueChanged(e, this.value), e !== void 0 && !this.isUserInput && (this.$emit("input"), this.$emit("change")));
 	}
 	get _numberPatterns() {
-		return this.locale.common.useCommaAsDecimalSeparator ? H : V;
+		return this.locale.common.useCommaAsDecimalSeparator ? W : U;
 	}
 	#e(e) {
 		return e.replace(".", this.locale.common.useCommaAsDecimalSeparator ? "," : ".");
@@ -73,16 +86,16 @@ var B = (e) => {
 	}
 	#n(e) {
 		let t = e.replace(this._numberPatterns.trailingDecimalSeparator, "").replace(this._numberPatterns.decimalSeparator, ".");
-		return U.test(t) ? t : "";
+		return G.test(t) ? t : "";
 	}
 	validate() {
 		super.validate(this.control);
 	}
 	stepUp() {
-		z(this, R.up);
+		B(this, R.up);
 	}
 	stepDown() {
-		z(this, R.down);
+		B(this, R.down);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && n.enqueue(() => {
@@ -109,52 +122,57 @@ var B = (e) => {
 h([a({
 	attribute: "readonly",
 	mode: "boolean"
-})], W.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], W.prototype, "autofocus", void 0), h([a], W.prototype, "placeholder", void 0), h([a], W.prototype, "list", void 0), h([a({ converter: i })], W.prototype, "maxlength", void 0), h([a({ converter: i })], W.prototype, "minlength", void 0), h([a({ converter: i })], W.prototype, "size", void 0), h([a()], W.prototype, "scale", void 0), h([a({ converter: i })], W.prototype, "step", void 0), h([a({ converter: i })], W.prototype, "max", void 0), h([a({ converter: i })], W.prototype, "min", void 0), h([t], W.prototype, "defaultSlottedNodes", void 0), h([t], W.prototype, "_presentationValue", void 0), h([t], W.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], W.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], W.prototype, "decrementButtonAriaLabel", void 0), h([a], W.prototype, "appearance", void 0), h([a], W.prototype, "shape", void 0), h([a], W.prototype, "autoComplete", void 0);
+})], K.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], K.prototype, "autofocus", void 0), h([a], K.prototype, "placeholder", void 0), h([a], K.prototype, "list", void 0), h([a({ converter: i })], K.prototype, "maxlength", void 0), h([a({ converter: i })], K.prototype, "minlength", void 0), h([a({ converter: i })], K.prototype, "size", void 0), h([a()], K.prototype, "scale", void 0), h([a({ converter: V })], K.prototype, "step", void 0), h([a({
+	attribute: "no-steppers",
+	mode: "boolean"
+})], K.prototype, "noSteppers", void 0), h([a({ converter: i })], K.prototype, "max", void 0), h([a({ converter: i })], K.prototype, "min", void 0), h([t], K.prototype, "defaultSlottedNodes", void 0), h([t], K.prototype, "_presentationValue", void 0), h([t], K.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], K.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], K.prototype, "decrementButtonAriaLabel", void 0), h([a], K.prototype, "appearance", void 0), h([a], K.prototype, "shape", void 0), h([a], K.prototype, "autoComplete", void 0);
 //#endregion
 //#region src/lib/number-field/number-field.template.ts
-function G() {
+function q() {
 	return o` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
-function K(e) {
+function J(e) {
 	return e.shape === m.Pill ? m.Pill : null;
 }
-function q(e) {
+function Y(e) {
 	return e.disabled || e.readOnly ? "-1" : null;
 }
-function J(e) {
+function X(e) {
 	let t = e.tagFor(T), n = e.tagFor(F);
 	return o`
-		<div class="control-buttons" ?inert="${(e) => e.disabled || e.readOnly}">
+		<div class="control-buttons"
+			?hidden="${(e) => !e._hasSteppers}"
+			?inert="${(e) => e.disabled || e.readOnly}">
 			<${t} id="subtract" icon="minus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
-				aria-label=${(e) => e.decrementButtonAriaLabel || e.locale.numberField.decrementButtonLabel(e.step)}
-				shape="${K}"
+				aria-label=${(e) => e.decrementButtonAriaLabel || e.locale.numberField.decrementButtonLabel(e._numericStep)}
+				shape="${J}"
 				type="button"
 				size="${(e) => e.scale === "condensed" ? "super-condensed" : "condensed"}"
-				tabindex="${q}"
+				tabindex="${Y}"
 				@click="${(e) => e.stepDown()}"></${t}>
 			<${n} class="divider" orientation="vertical"></${n}>
 			<${t} id="add" icon="plus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
-				aria-label=${(e) => e.incrementButtonAriaLabel || e.locale.numberField.incrementButtonLabel(e.step)}
-				shape="${K}"
+				aria-label=${(e) => e.incrementButtonAriaLabel || e.locale.numberField.incrementButtonLabel(e._numericStep)}
+				shape="${J}"
 				type="button"
 				size="${(e) => e.scale === "condensed" ? "super-condensed" : "condensed"}"
-				tabindex="${q}"
+				tabindex="${Y}"
 				@click="${(e) => e.stepUp()}"></${t}>
 			</div>
 	`;
 }
 //#endregion
 //#region src/lib/number-field/definition.ts
-var Y = c("number-field", W, (e) => {
+var Z = c("number-field", K, (e) => {
 	let t = e.tagFor(p);
 	return o`
-		<div class="base ${(e) => g("connotation-accent", `appearance-${L.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["success", !!e.successText], [`size-${e.scale}`, !!e.scale])}">
+		<div class="base ${(e) => g("connotation-accent", `appearance-${L.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["success", !!e.successText], [`size-${e.scale}`, !!e.scale], ["no-steppers", !e._hasSteppers])}">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
-				${d((e) => e.label, G())}
+				${d((e) => e.label, q())}
 				<slot name="contextual-help" ${l("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="fieldset">
@@ -183,7 +201,7 @@ var Y = c("number-field", W, (e) => {
 						${u("control")}
 					/>
 				</div>
-				${() => J(e)}
+				${() => X(e)}
 			</div>
 			${(t) => t._getFeedbackTemplate(e)}
 			<${t} id="value-announcement" role="status" aria-atomic="true">
@@ -203,5 +221,5 @@ var Y = c("number-field", W, (e) => {
 });
 //#endregion
 //#region src/lib/number-field/index.ts
-r(Y)();
+r(Z)();
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.28.1",
+  "version": "5.29.0",
   "homepage": "https://apps.vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -43,7 +43,7 @@
     "@microsoft/fast-element": "^2.10.5",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^4.4.0",
-    "dompurify": "^3.4.14",
+    "dompurify": "^3.4.15",
     "prosemirror-commands": "^1.7.2",
     "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",
@@ -53,18 +53,18 @@
     "prosemirror-model": "1.25.4",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-transform": "^1.12.0",
+    "prosemirror-transform": "^1.12.1",
     "prosemirror-view": "1.41.8",
     "scroll-into-view-if-needed": "^3.1.0",
     "uuid": "^14.0.2",
     "vanilla-colorful": "^0.7.2",
-    "video.js": "^8.24.0"
+    "video.js": "^8.24.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
-    "@microsoft/api-extractor": "^7.59.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/user-event": "^14.6.6",
+    "@microsoft/api-extractor": "^7.59.1",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^20.19.43",
     "@vitest/browser": "^4.1.11",
     "@vitest/browser-playwright": "^4.1.11",
@@ -75,37 +75,37 @@
     "concurrently": "^9.2.4",
     "dialog-polyfill": "^0.5.6",
     "element-internals-polyfill": "^3.0.2",
-    "eslint": "^10.8.1",
+    "eslint": "^10.11.0",
     "eslint-formatter-compact": "^9.0.1",
     "eslint-plugin-barrel-files": "^3.0.1",
     "glob": "^13.0.6",
-    "sass": "^1.102.0",
+    "sass": "^1.104.1",
     "stylelint": "^16.26.1",
     "tsx": "^4.23.13",
     "typescript": "5.9.3",
-    "vite": "^8.2.2",
+    "vite": "^8.3.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.4.0",
     "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^9.1.0",
-    "@repo/browser-tests": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
+    "@repo/browser-tests": "1.0.0",
     "@repo/eslint-config": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
-    "@repo/internal-test-utils": "1.0.0",
     "@repo/metadata-extractor": "1.0.0",
-    "@repo/sass": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
-    "@repo/styles": "1.0.0",
+    "@repo/internal-test-utils": "1.0.0",
+    "@repo/sass": "1.0.0",
     "@repo/tokens": "1.0.0",
-    "@repo/tools": "1.0.0",
+    "@repo/styles": "1.0.0",
     "@repo/typescript-config": "1.0.0",
     "@repo/vite-config": "1.0.0",
+    "@repo/tools": "1.0.0",
     "@repo/vitest-config": "1.0.0",
     "@repo/vvd-jsx": "1.0.0",
-    "@vonage/vivid-icons": "4.12.0"
+    "@vonage/vivid-icons": "4.13.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {