@vonage/vivid 5.21.0 → 5.23.0

package/rich-text-editor/index.js

@@ -65,12 +65,20 @@ var Ee = (e) => i`<template :_ctx="${() => e}">
 	default: {
 		placement: void 0,
 		placementStrategy: h.AutoPlacementHorizontal,
+		shiftCrossAxis: !1,
 		strategy: "absolute"
 	},
 	autocomplete: {
 		placement: "bottom-start",
 		placementStrategy: h.Flip,
+		shiftCrossAxis: !1,
 		strategy: "fixed"
+	},
+	imageOptions: {
+		placement: "bottom",
+		placementStrategy: h.Flip,
+		shiftCrossAxis: !0,
+		strategy: "absolute"
 	}
 }, Oe = (e) => {
 	let t = e.tagFor(m);
@@ -78,6 +86,7 @@ var Ee = (e) => i`<template :_ctx="${() => e}">
 		:anchor="${(e) => e.anchorEl}"
 		:placement="${(e) => De[e.kind].placement}"
 		:placementStrategy="${(e) => De[e.kind].placementStrategy}"
+		:shiftCrossAxis="${(e) => De[e.kind].shiftCrossAxis}"
 		:open="${(e) => e.open}"
 		:offset="${(e) => e.offset}"
 		:strategy="${(e) => De[e.kind].strategy}"
@@ -5764,7 +5773,7 @@ var Ps = new N({ state: {
 	}
 } }), Fs = class extends w {
 	constructor(...e) {
-		super(...e), this.name = "RteCore", this.disabled = new ks(!1);
+		super(...e), this.name = "RteCore", this.disabled = new ks(!1), this.scrollThreshold = void 0, this.scrollMargin = void 0;
 	}
 	getStyles() {
 		return [
@@ -6535,6 +6544,10 @@ var Bc = zc(), Vc = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]
 		let { state: n, tr: r, schema: i, dispatchTransaction: a } = this[b];
 		r.replaceWith(0, n.doc.content.size, tl(i, e)), t?.selectContent ? r.setSelection(new Vt(r.doc)) : t?.cursorPlacement === "end" ? r.setSelection(j.atEnd(r.doc)) : r.setSelection(j.atStart(r.doc)), a(r);
 	}
+	scrollIntoView() {
+		let e = this[b];
+		e.view && e.dispatchTransaction(e.tr.scrollIntoView());
+	}
 }, rl = class {
 	getFeature(e) {
 		let t = this.config.featureMap.get(e);
@@ -6573,11 +6586,14 @@ var Bc = zc(), Vc = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]
 		this.initState(e), this.updateHostState(t), this.view?.updateState(this.state);
 	}
 	createView(e) {
+		let t = this.config.featureMap.get("RteCore");
 		this.view = new po((t) => {
 			t.part = "editor", e.appendChild(t);
 		}, {
 			state: this.state,
-			dispatchTransaction: this.dispatchTransaction
+			dispatchTransaction: this.dispatchTransaction,
+			...t?.scrollThreshold !== void 0 && { scrollThreshold: t.scrollThreshold },
+			...t?.scrollMargin !== void 0 && { scrollMargin: t.scrollMargin }
 		});
 	}
 	destroyViewIfNeeded() {
@@ -7490,6 +7506,18 @@ var ou = (e) => e.parent.textBetween(0, e.parentOffset, void 0, ""), su = cla
 			},
 			set disabled(n) {
 				t.disabled.setValue(e, n);
+			},
+			get scrollThreshold() {
+				return t.scrollThreshold;
+			},
+			set scrollThreshold(n) {
+				t.scrollThreshold = n, e.view?.setProps({ scrollThreshold: n });
+			},
+			get scrollMargin() {
+				return t.scrollMargin;
+			},
+			set scrollMargin(n) {
+				t.scrollMargin = n, e.view?.setProps({ scrollMargin: n });
 			}
 		};
 	}
@@ -8674,7 +8702,7 @@ var fd = y(class extends w {
 	}
 	initializeImg(e) {
 		this.img.className = "inline-image", this.update(e), this.img.addEventListener("load", () => {
-			let e = this.getPos?.();
+			let e = this.getPos();
 			if (e) {
 				let { state: t, dispatch: n } = this.view, r = t.doc.nodeAt(e);
 				if (!r || r.attrs.naturalWidth === this.img.naturalWidth && r.attrs.naturalHeight === this.img.naturalHeight) return;
@@ -8761,7 +8789,7 @@ var fd = y(class extends w {
 					popupPlacement: "bottom",
 					shouldReturnFocusToEditor: !0
 				});
-				t = e.createComponent(E), t.offset = 4;
+				t = e.createComponent(E), t.kind = "imageOptions", t.offset = 4;
 				let i = Il(r, {
 					className: "inline-image-popover",
 					children: [
@@ -8807,7 +8835,7 @@ var fd = y(class extends w {
 		})), this.contribution(U({ Escape: (e) => this.getSelectedInlineImage(e) ? (t?.dismiss(), !0) : !1 }))];
 	}
 	calculateSmallWidth(e) {
-		return Math.min(300, e / 2) + "px";
+		return `${Math.min(300, e / 2)}px`;
 	}
 	getSelectedInlineImage(e) {
 		let t = e.selection;
@@ -8914,20 +8942,20 @@ var fd = y(class extends w {
 				let n = Array.from(t.clipboardData.files);
 				return n.length ? (i(n, { type: "selection" }), !0) : !1;
 			},
-			handleDrop: (e, t, n, r) => {
-				let a = Array.from(t.dataTransfer.files);
-				if (!a.length) return !1;
-				let o = e.posAtCoords({
+			handleDrop: (e, t) => {
+				let n = Array.from(t.dataTransfer.files);
+				if (!n.length) return !1;
+				let r = e.posAtCoords({
 					left: t.clientX,
 					top: t.clientY
 				}).pos;
 				if (e.dragging && e.dragging.slice) {
-					let t = ht(e.state.doc, o, e.dragging.slice);
-					t != null && (o = t);
+					let t = ht(e.state.doc, r, e.dragging.slice);
+					t != null && (r = t);
 				}
-				return i(a, {
+				return i(n, {
 					type: "pos",
-					pos: o
+					pos: r
 				}), !0;
 			}
 		} }))];
@@ -8936,29 +8964,29 @@ var fd = y(class extends w {
 	constructor(e) {
 		super(), this.config = e, this.name = "RteDebugFeature";
 	}
-	getPlugins(e) {
-		let t = /* @__PURE__ */ new WeakMap(), n = !1, r = (e) => {
-			t.get(e) === void 0 && (n = this.config.onViewportDragOver?.(e) ?? !1);
-		}, i = (e) => {
+	getPlugins() {
+		let e = /* @__PURE__ */ new WeakMap(), t = !1, n = (n) => {
+			e.get(n) === void 0 && (t = this.config.onViewportDragOver?.(n) ?? !1);
+		}, r = (e) => {
 			this.config.onViewportDrop?.(e), this.config.onViewportDragFinish?.();
-		}, a = () => {
+		}, i = () => {
 			this.config.onViewportDragFinish?.();
-		}, o = !1, s = () => {
-			o = !0, window.setTimeout(() => o = !1, 0);
-		}, c = () => {
-			o || this.config.onViewportDragFinish?.();
+		}, a = !1, o = () => {
+			a = !0, window.setTimeout(() => a = !1, 0);
+		}, s = () => {
+			a || this.config.onViewportDragFinish?.();
 		};
 		return [this.contribution(new N({ view: (e) => {
 			let t = e.root.host.editorViewportElement;
-			return t.addEventListener("dragover", r), t.addEventListener("drop", i), t.addEventListener("dragend", a), t.addEventListener("dragenter", s), t.addEventListener("dragleave", c), { destroy() {
-				t.removeEventListener("dragover", r), t.removeEventListener("drop", i), t.removeEventListener("dragend", a), t.removeEventListener("dragenter", s), t.removeEventListener("dragleave", c);
+			return t.addEventListener("dragover", n), t.addEventListener("drop", r), t.addEventListener("dragend", i), t.addEventListener("dragenter", o), t.addEventListener("dragleave", s), { destroy() {
+				t.removeEventListener("dragover", n), t.removeEventListener("drop", r), t.removeEventListener("dragend", i), t.removeEventListener("dragenter", o), t.removeEventListener("dragleave", s);
 			} };
 		} })), this.contribution(new N({ props: { handleDOMEvents: {
-			dragover: (e, r) => {
+			dragover: (n, r) => {
 				let i = this.config.onViewportDragOver?.(r) ?? !1;
-				return t.set(r, i), n = i, i ? (r.stopImmediatePropagation(), r.preventDefault(), !0) : !1;
+				return e.set(r, i), t = i, i ? (r.stopImmediatePropagation(), r.preventDefault(), !0) : !1;
 			},
-			drop: (e, t) => n
+			drop: () => t
 		} } }), pe.high)];
 	}
 }), Sd = y(class extends w {

package/selectable-box/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`:host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}`,l=class extends a.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};r.t([e.m({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.m({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.m],l.prototype,`connotation`,void 0),r.t([e.m({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.m({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.m({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.m({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:a,disabled:o})=>i.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${a}`,!!a],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let i=r.tagFor(o.r);return e.p`${t.t(e=>e.controlType!==`radio`,e.p`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`:host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}`,l=class extends a.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){if(this.disabled)return!0;if((e.code===`Space`||e.code===`Enter`)&&this.clickableBox){this._handleCheckedChange();return}return!0}};r.t([e.m({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.m({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.m],l.prototype,`connotation`,void 0),r.t([e.m({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.m({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.m({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.m({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:a,disabled:o})=>i.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${a}`,!!a],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let i=r.tagFor(o.r);return e.p`${t.t(e=>e.controlType!==`radio`,e.p`
 		<${i}
 			${a.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"

package/selectable-box/index.js

@@ -15,7 +15,12 @@ var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:
 		this.disabled || this.controlType === "radio" && this.checked || (this.checked = !this.checked, this.clickableBox && this.$emit("change"));
 	}
 	_handleKeydown(e) {
-		return this.disabled ? !0 : (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
+		if (this.disabled) return !0;
+		if ((e.code === "Space" || e.code === "Enter") && this.clickableBox) {
+			this._handleCheckedChange();
+			return;
+		}
+		return !0;
 	}
 };
 s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({

package/shared/color-picker/base-color-picker.d.ts

@@ -457,17 +457,17 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+        valueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+        initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
         disabled: boolean;
-        disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+        disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
         name: string;
-        nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+        nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
         required: boolean;
-        requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+        requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity: (() => boolean) & (() => boolean);

package/shared/feedback/mixins.d.ts

@@ -440,7 +440,7 @@ export type ElementWithFeedback = MixinType<typeof WithFeedback>;
 export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         _slottedHelperTextIds: string[];
-        _helperTextSlottedContentChanged(_: HTMLElement[], newContent: HTMLElement[]): void;
+        _helperTextSlottedContentChanged(_: HTMLElement[] | undefined, newContent: HTMLElement[]): void;
         get _feedbackDescribedBy(): string;
         _feedbackId: string;
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;

package/shared/foundation/button/button.d.ts

@@ -434,17 +434,17 @@ declare const VividFoundationButton_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         connectedCallback(): void;

package/shared/foundation/form-associated/form-associated.d.ts

@@ -13,17 +13,17 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         connectedCallback(): void;
@@ -486,17 +486,17 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         disconnectedCallback: (() => void) & (() => void) & (() => void);

package/shared/foundation/listbox/listbox.d.ts

@@ -10,7 +10,7 @@ export declare class Listbox extends VividElement {
     static slottedOptionFilter: (n: HTMLElement) => boolean;
     protected _validSelectedIndex(index: number): number;
     selectFirstOption(): void;
-    protected _newDefaultSelectedIndex(prev: ListboxOption[], next: ListboxOption[], currentSelectedIndex: number): number | null;
+    protected _newDefaultSelectedIndex(prev: ListboxOption[], next: ListboxOption[], _currentSelectedIndex: number): number | null;
     protected _isDefaultSelected(option: ListboxOption): boolean;
     protected setSelectedOptions(): void;
 }

package/shared/patterns/form-elements/form-element.d.ts

@@ -20,17 +20,17 @@ export declare const FormElement: <T extends Constructor<FormAssociatedElement>>
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;

package/shared/patterns/form-elements/with-contextual-help.d.ts

@@ -23,17 +23,17 @@ export declare const WithContextualHelp: <T extends Constructor<FormElementEleme
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;

package/shared/patterns/form-elements/with-error-text.d.ts

@@ -3,7 +3,7 @@ import { FormElementElement } from './form-element';
 export declare const WithErrorText: <T extends Constructor<FormElementElement>>(Base: T) => {
     new (...args: any[]): {
         errorText?: string;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
         "__#private@#blockValidateCalls": boolean;
         "__#private@#originalValidateFn": () => void;
         "__#private@#forceCustomError"(errorMessage: string): void;
@@ -26,17 +26,17 @@ export declare const WithErrorText: <T extends Constructor<FormElementElement>>(
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;

package/shared/picker-field/mixins/calendar-picker.d.ts

@@ -101,17 +101,17 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
     dirtyValue: boolean;
     proxySlot?: HTMLSlotElement;
     value: string;
-    valueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    valueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -984,7 +984,7 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
         _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;

package/shared/picker-field/mixins/calendar-picker.template.d.ts

@@ -99,17 +99,17 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
     dirtyValue: boolean;
     proxySlot?: HTMLSlotElement;
     value: string;
-    valueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    valueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -982,7 +982,7 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
         _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;

package/shared/picker-field/mixins/min-max-calendar-picker.d.ts

@@ -5,10 +5,10 @@ import { CalendarPickerElement } from './calendar-picker';
 export declare const ValidDateFilter: ValueConverter;
 export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<CalendarPickerElement>>(SuperClass: T) => (abstract new (...args: any[]) => {
     min: string;
-    minChanged(_: string, newMin: string): void;
+    minChanged(_: string | undefined, newMin: string): void;
     get _resolvedMinDate(): DateStr | "";
     max: string;
-    maxChanged(_: string, newMax: string): void;
+    maxChanged(_: string | undefined, newMax: string): void;
     get _resolvedMaxDate(): DateStr | "";
     _selectedMonth: import('../../datetime/month').Month;
     _adjustSelectedMonthToEnsureVisibilityOf(date: DateStr): boolean;
@@ -105,17 +105,17 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
     dirtyValue: boolean;
     proxySlot?: HTMLSlotElement;
     value: string;
-    valueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    valueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -988,7 +988,7 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
         _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;

package/shared/picker-field/mixins/single-date-picker.d.ts

@@ -5,7 +5,7 @@ import { SingleValuePickerElement } from './single-value-picker';
 export declare const SingleDatePickerMixin: <T extends AbstractConstructor<CalendarPickerElement & SingleValuePickerElement>>(Base: T) => (abstract new (...args: any[]) => {
     _dateValue(): DateStr | "";
     _withUpdatedDate(dateStr: DateStr): string;
-    valueChanged(previous: string, next: string): void;
+    valueChanged(previous: string | undefined, next: string): void;
     _onDateClick(date: DateStr): void;
     _isDateSelected(date: DateStr): boolean;
     _isDateAriaSelected(date: DateStr): boolean;
@@ -106,13 +106,13 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -985,7 +985,7 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
         _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;

package/shared/picker-field/mixins/single-value-picker.d.ts

@@ -5,7 +5,7 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    valueChanged(previous: string, next: string): void;
+    valueChanged(previous: string | undefined, next: string): void;
     _updatePresentationValue(): void;
     _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
@@ -66,13 +66,13 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     get currentValue(): string;
     set currentValue(value: string);
     initialValue: string;
-    initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     disabled: boolean;
-    disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     name: string;
-    nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+    nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
     required: boolean;
-    requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+    requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
     get elementInternals(): ElementInternals | null;
     proxyEventsToBlock: string[];
     checkValidity: (() => boolean) & (() => boolean);
@@ -945,7 +945,7 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
         _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
-    errorTextChanged(_: string, newErrorText: string | undefined): void;
+    errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
     "__#private@#blockValidateCalls": boolean;
     "__#private@#originalValidateFn": () => void;
     "__#private@#forceCustomError"(errorMessage: string): void;