@vonage/vivid 4.30.0 → 4.30.1

package/lib/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
-export type BadgeConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
+export type BadgeConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
 export type BadgeAppearance = ExtractFromEnum<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle | Appearance.SubtleLight>;
 export type BadgeShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 export type BadgeSize = ExtractFromEnum<Size, Size.Normal | Size.Expanded>;

package/lib/date-picker/date-picker.d.ts

@@ -812,7 +812,7 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _isPresentationValueInvalid(): boolean;
 }) & (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
@@ -821,7 +821,7 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _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/lib/date-time-picker/date-time-picker.d.ts

@@ -28,7 +28,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _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;
@@ -1602,7 +1602,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _isPresentationValueInvalid(): boolean;
 }) & (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
@@ -1611,7 +1611,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _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/lib/time-picker/time-picker.d.ts

@@ -30,7 +30,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _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;
@@ -798,7 +798,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "4.30.0",
+  "version": "4.30.1",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",

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/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.30.1";
   }
   /**
    * 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.30.1";
   }
   /**
    * 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;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 14 Aug 2025 08:21:38 GMT
+ * Generated on Thu, 14 Aug 2025 08:21:43 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.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, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -1286,6 +1286,15 @@
               "text": "Connotation.Information",
               "canonicalReference": "@vonage/vivid!Connotation.Information:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -1300,7 +1309,7 @@
           "name": "BadgeConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 17
+            "endIndex": 19
           }
         },
         {