@vonage/vivid 4.30.0 → 4.31.0

package/shared/definition13.cjs

@@ -539,7 +539,7 @@ class Calendar extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.hour12 = false;
-    this.stickyMode = enums.Sticky.None;
+    this.stickyMode = enums.Sticky.All;
     /**
      * @internal
      */

package/shared/definition13.js

@@ -537,7 +537,7 @@ class Calendar extends VividElement {
   constructor() {
     super(...arguments);
     this.hour12 = false;
-    this.stickyMode = Sticky.None;
+    this.stickyMode = Sticky.All;
     /**
      * @internal
      */

package/shared/definition15.cjs

@@ -169,7 +169,7 @@ const CheckboxTemplate = (context) => {
 		>
 			<div class="control">
 				${when.when(
-    (x) => x.checked,
+    (x) => x.checked && !x.indeterminate,
     vividElement.html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`
   )}
 				${when.when(

package/shared/definition15.js

@@ -167,7 +167,7 @@ const CheckboxTemplate = (context) => {
 		>
 			<div class="control">
 				${when(
-    (x) => x.checked,
+    (x) => x.checked && !x.indeterminate,
     html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`
   )}
 				${when(

package/shared/definition31.cjs

@@ -211,7 +211,7 @@ class Menu extends anchored.Anchored(delegatesAria.DelegatesAria(vividElement.Vi
     }
   }
   get #triggerBehaviour() {
-    return this.trigger ?? "legacy";
+    return this.trigger ?? "auto";
   }
   openChanged(_, newValue) {
     if (newValue) {

package/shared/definition31.js

@@ -209,7 +209,7 @@ class Menu extends Anchored(DelegatesAria(VividElement)) {
     }
   }
   get #triggerBehaviour() {
-    return this.trigger ?? "legacy";
+    return this.trigger ?? "auto";
   }
   openChanged(_, newValue) {
     if (newValue) {

package/shared/definition5.cjs

@@ -379,7 +379,7 @@ const AudioPlayerTemplate = (context) => {
 			${when.when(
     (x) => Boolean(x.playbackRates),
     vividElement.html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition5.js

@@ -377,7 +377,7 @@ const AudioPlayerTemplate = (context) => {
 			${when(
     (x) => Boolean(x.playbackRates),
     html`
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
+			<${menuTag} class="playback-rates" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"

package/shared/definition56.cjs

@@ -78,7 +78,7 @@ __decorateClass([
   vividElement.attr({ mode: "boolean" })
 ], Tag.prototype, "selected");
 
-const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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 (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;padding:0;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}.dismiss-button:focus{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}";
+const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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 (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}";
 
 const getClasses = ({
   connotation,
@@ -100,12 +100,13 @@ const getClasses = ({
 );
 function renderDismissButton(iconTag) {
   return vividElement.html`
-	<span
+	<button
 		class="dismiss-button"
 		aria-label="${(x) => x.locale.tag.remove(x.label)}"
+		?disabled="${(x) => x.disabled}"
 		@click="${(x) => x.remove()}">
 		<${iconTag} name="close-line"></${iconTag}>
-	</span>`;
+	</button>`;
 }
 const tagTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
@@ -115,7 +116,7 @@ const tagTemplate = (context) => {
 		${delegatesAria.delegateAria({
     role: "option",
     ariaDisabled: (x) => x.disabled,
-    ariaSelected: (x) => x.selectable
+    ariaSelected: (x) => x.selected && x.selectable
   })}
 		tabindex="${(x) => x.disabled || x.removable ? null : 0}"
 		@keydown="${(x, c) => x.handleKeydown(c.event)}"

package/shared/definition56.js

@@ -76,7 +76,7 @@ __decorateClass([
   attr({ mode: "boolean" })
 ], Tag.prototype, "selected");
 
-const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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 (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;padding:0;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}.dismiss-button:focus{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}";
+const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.disabled,:disabled).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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 (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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))}";
 
 const getClasses = ({
   connotation,
@@ -98,12 +98,13 @@ const getClasses = ({
 );
 function renderDismissButton(iconTag) {
   return html`
-	<span
+	<button
 		class="dismiss-button"
 		aria-label="${(x) => x.locale.tag.remove(x.label)}"
+		?disabled="${(x) => x.disabled}"
 		@click="${(x) => x.remove()}">
 		<${iconTag} name="close-line"></${iconTag}>
-	</span>`;
+	</button>`;
 }
 const tagTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
@@ -113,7 +114,7 @@ const tagTemplate = (context) => {
 		${delegateAria({
     role: "option",
     ariaDisabled: (x) => x.disabled,
-    ariaSelected: (x) => x.selectable
+    ariaSelected: (x) => x.selected && x.selectable
   })}
 		tabindex="${(x) => x.disabled || x.removable ? null : 0}"
 		@keydown="${(x, c) => x.handleKeydown(c.event)}"

package/shared/definition60.cjs

@@ -3,6 +3,7 @@
 const definition = require('./definition67.cjs');
 const vividElement = require('./vivid-element.cjs');
 const anchored = require('./anchored.cjs');
+const localized = require('./localized.cjs');
 const index = require('./index.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
@@ -18,10 +19,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Toggletip extends anchored.Anchored(vividElement.VividElement) {
+class Toggletip extends localized.Localized(anchored.Anchored(vividElement.VividElement)) {
   constructor() {
     super(...arguments);
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.#originalAriaLabel = null;
     this.alternate = false;
     this.placement = "right";
     this.open = false;
@@ -39,7 +40,7 @@ class Toggletip extends anchored.Anchored(vividElement.VividElement) {
       }
     };
   }
-  #ANCHOR_ARIA_LABEL_SUFFIX;
+  #originalAriaLabel;
   openChanged(oldValue, newValue) {
     if (oldValue === void 0) return;
     if (newValue) {
@@ -69,7 +70,8 @@ class Toggletip extends anchored.Anchored(vividElement.VividElement) {
   }
   #setupAnchor(a) {
     a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+    this.#originalAriaLabel = a.ariaLabel;
+    a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
     this.#updateAnchor(a);
   }
   #updateAnchor(a) {
@@ -78,8 +80,7 @@ class Toggletip extends anchored.Anchored(vividElement.VividElement) {
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+    if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
     a.removeAttribute("aria-expanded");
     a.removeAttribute("data-expanded");
   }

package/shared/definition60.js

@@ -1,6 +1,7 @@
 import { P as Popup, p as popupDefinition } from './definition67.js';
 import { D as DOM, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
+import { L as Localized } from './localized.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
@@ -16,10 +17,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Toggletip extends Anchored(VividElement) {
+class Toggletip extends Localized(Anchored(VividElement)) {
   constructor() {
     super(...arguments);
-    this.#ANCHOR_ARIA_LABEL_SUFFIX = " ; Show more information";
+    this.#originalAriaLabel = null;
     this.alternate = false;
     this.placement = "right";
     this.open = false;
@@ -37,7 +38,7 @@ class Toggletip extends Anchored(VividElement) {
       }
     };
   }
-  #ANCHOR_ARIA_LABEL_SUFFIX;
+  #originalAriaLabel;
   openChanged(oldValue, newValue) {
     if (oldValue === void 0) return;
     if (newValue) {
@@ -67,7 +68,8 @@ class Toggletip extends Anchored(VividElement) {
   }
   #setupAnchor(a) {
     a.addEventListener("click", this.#openIfClosed, true);
-    a.ariaLabel = (a.ariaLabel ?? "") + this.#ANCHOR_ARIA_LABEL_SUFFIX;
+    this.#originalAriaLabel = a.ariaLabel;
+    a.ariaLabel = `${this.locale.toggletip.anchorLabel(a.ariaLabel || "")}`;
     this.#updateAnchor(a);
   }
   #updateAnchor(a) {
@@ -76,8 +78,7 @@ class Toggletip extends Anchored(VividElement) {
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel)
-      a.ariaLabel = a.ariaLabel.replace(this.#ANCHOR_ARIA_LABEL_SUFFIX, "");
+    if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
     a.removeAttribute("aria-expanded");
     a.removeAttribute("data-expanded");
   }

package/shared/localization/Locale.d.ts

@@ -22,6 +22,7 @@ import type { DataGridLocale } from '../../lib/data-grid/locale';
 import type { PaginationLocale } from '../../lib/pagination/locale';
 import type { TagLocale } from '../../lib/tag/locale';
 import type { Connotation } from '../../lib/enums';
+import type { ToggletipLocale } from '../../lib/toggletip/locale';
 type ConnotationAnnoncementLocale = {
     [key in Connotation as `${key}Icon`]: string;
 };
@@ -54,5 +55,6 @@ export interface Locale {
     dataGrid: DataGridLocale;
     pagination: PaginationLocale;
     tag: TagLocale;
+    toggletip: ToggletipLocale;
 }
 export {};

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

@@ -814,7 +814,7 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
@@ -2391,6 +2391,6 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _isPresentationValueInvalid(): boolean;
 }) & T_6;

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

@@ -7,7 +7,7 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;

package/shared/picker-field/mixins/time-selection-picker.d.ts

@@ -9,7 +9,7 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;
@@ -802,7 +802,7 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
     _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -29,7 +29,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
     _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
@@ -797,7 +797,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;

package/shared/single-date-picker.cjs

@@ -15,7 +15,7 @@ const SingleDatePickerMixin = (Base) => {
      * @internal
      */
     _onDateClick(date) {
-      this._updateValueDueToUserInteraction(this._withUpdatedDate(date));
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(date), false);
     }
     /**
      * @internal

package/shared/single-date-picker.js

@@ -13,7 +13,7 @@ const SingleDatePickerMixin = (Base) => {
      * @internal
      */
     _onDateClick(date) {
-      this._updateValueDueToUserInteraction(this._withUpdatedDate(date));
+      this._updateValueDueToUserInteraction(this._withUpdatedDate(date), false);
     }
     /**
      * @internal

package/shared/single-value-picker.cjs

@@ -37,27 +37,34 @@ const SingleValuePicker = (Base) => {
     /**
      * @internal
      */
-    _updateValueDueToUserInteraction(newValue) {
-      this.value = newValue;
-      this.$emit("change");
-      this.$emit("input");
+    _updateValueDueToUserInteraction(newValue, isIntermediateUpdate) {
+      if (this.value !== newValue) {
+        this._isInternalValueUpdate = true;
+        this.value = newValue;
+        this._isInternalValueUpdate = false;
+        this.$emit("input");
+      }
+      if (!isIntermediateUpdate) {
+        this._updatePresentationValue();
+        this.$emit("change");
+      }
     }
     /**
      * @internal
      */
     _onTextFieldChange() {
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         return;
       }
       try {
-        this.value = this._parsePresentationValue(this._presentationValue);
-        this.$emit("change");
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          false
+        );
       } catch (_) {
         const invalidPresentationValue = this._presentationValue;
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         this._presentationValue = invalidPresentationValue;
         return;
       }
@@ -67,24 +74,18 @@ const SingleValuePicker = (Base) => {
      */
     _onTextFieldInput(event) {
       super._onTextFieldInput(event);
-      this._isInternalValueUpdate = true;
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("input");
+        this._updateValueDueToUserInteraction("", true);
         return;
       }
       try {
-        const parsedValue = this._parsePresentationValue(
-          this._presentationValue
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          true
         );
-        if (this.value !== parsedValue) {
-          this.value = parsedValue;
-          this.$emit("input");
-        }
       } catch (_) {
         return;
       }
-      this._isInternalValueUpdate = false;
     }
     /**
      * @internal
@@ -104,7 +105,7 @@ const SingleValuePicker = (Base) => {
      * @internal
      */
     _onClearClick() {
-      this._updateValueDueToUserInteraction("");
+      this._updateValueDueToUserInteraction("", false);
       super._onClearClick();
     }
   }

package/shared/single-value-picker.js

@@ -35,27 +35,34 @@ const SingleValuePicker = (Base) => {
     /**
      * @internal
      */
-    _updateValueDueToUserInteraction(newValue) {
-      this.value = newValue;
-      this.$emit("change");
-      this.$emit("input");
+    _updateValueDueToUserInteraction(newValue, isIntermediateUpdate) {
+      if (this.value !== newValue) {
+        this._isInternalValueUpdate = true;
+        this.value = newValue;
+        this._isInternalValueUpdate = false;
+        this.$emit("input");
+      }
+      if (!isIntermediateUpdate) {
+        this._updatePresentationValue();
+        this.$emit("change");
+      }
     }
     /**
      * @internal
      */
     _onTextFieldChange() {
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         return;
       }
       try {
-        this.value = this._parsePresentationValue(this._presentationValue);
-        this.$emit("change");
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          false
+        );
       } catch (_) {
         const invalidPresentationValue = this._presentationValue;
-        this.value = "";
-        this.$emit("change");
+        this._updateValueDueToUserInteraction("", false);
         this._presentationValue = invalidPresentationValue;
         return;
       }
@@ -65,24 +72,18 @@ const SingleValuePicker = (Base) => {
      */
     _onTextFieldInput(event) {
       super._onTextFieldInput(event);
-      this._isInternalValueUpdate = true;
       if (this._presentationValue === "") {
-        this.value = "";
-        this.$emit("input");
+        this._updateValueDueToUserInteraction("", true);
         return;
       }
       try {
-        const parsedValue = this._parsePresentationValue(
-          this._presentationValue
+        this._updateValueDueToUserInteraction(
+          this._parsePresentationValue(this._presentationValue),
+          true
         );
-        if (this.value !== parsedValue) {
-          this.value = parsedValue;
-          this.$emit("input");
-        }
       } catch (_) {
         return;
       }
-      this._isInternalValueUpdate = false;
     }
     /**
      * @internal
@@ -102,7 +103,7 @@ const SingleValuePicker = (Base) => {
      * @internal
      */
     _onClearClick() {
-      this._updateValueDueToUserInteraction("");
+      this._updateValueDueToUserInteraction("", false);
       super._onClearClick();
     }
   }

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

@@ -600,7 +600,8 @@ const TimeSelectionPicker = (Base) => {
      */
     _onInlineTimePickerChange(event) {
       this._updateValueDueToUserInteraction(
-        this._withUpdatedTime(event.detail)
+        this._withUpdatedTime(event.detail),
+        false
       );
     }
     /**

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

@@ -598,7 +598,8 @@ const TimeSelectionPicker = (Base) => {
      */
     _onInlineTimePickerChange(event) {
       this._updateValueDueToUserInteraction(
-        this._withUpdatedTime(event.detail)
+        this._withUpdatedTime(event.detail),
+        false
       );
     }
     /**

package/shared/vivid-element.cjs

@@ -2734,7 +2734,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.30.0";
+    this.VIVID_VERSION = "4.31.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/shared/vivid-element.js

@@ -2732,7 +2732,7 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.30.0";
+    this.VIVID_VERSION = "4.31.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;