@vonage/vivid 4.8.0 → 4.10.0

package/shared/icon.cjs

@@ -196,22 +196,28 @@ const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = (iconId) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION)).then(
-  extractSvg
-);
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
+  signal
+}).then(extractSvg);
 const resolveIcon = memoizeWith(
   identity,
-  (iconId = "") => iconId.trim() ? loadSvg(iconId) : Promise.resolve("")
+  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
 );
 class Icon extends index.FoundationElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
+    this.#abortController = null;
   }
   get iconUrl() {
     return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
   }
+  #abortController;
   async nameChanged() {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+    this.#abortController = new AbortController();
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
@@ -222,7 +228,7 @@ class Icon extends index.FoundationElement {
         }
       }, PLACEHOLDER_TIMEOUT);
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name).then((svg) => {
+    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
       this._svg = svg;
     }).catch(() => {
       this._svg = void 0;

package/shared/icon.js

@@ -194,22 +194,28 @@ const extractSvg = (response) => {
   assertIsValidResponse(response);
   return response.text();
 };
-const loadSvg = (iconId) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION)).then(
-  extractSvg
-);
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
+  signal
+}).then(extractSvg);
 const resolveIcon = memoizeWith(
   identity,
-  (iconId = "") => iconId.trim() ? loadSvg(iconId) : Promise.resolve("")
+  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
 );
 class Icon extends FoundationElement {
   constructor() {
     super(...arguments);
     this.iconLoaded = false;
+    this.#abortController = null;
   }
   get iconUrl() {
     return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
   }
+  #abortController;
   async nameChanged() {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+    this.#abortController = new AbortController();
     this._svg = void 0;
     this.iconLoaded = false;
     let timeout = setTimeout(() => {
@@ -220,7 +226,7 @@ class Icon extends FoundationElement {
         }
       }, PLACEHOLDER_TIMEOUT);
     }, PLACEHOLDER_DELAY);
-    await resolveIcon(this.name).then((svg) => {
+    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
       this._svg = svg;
     }).catch(() => {
       this._svg = void 0;

package/shared/patterns/anchor.d.ts

@@ -0,0 +1,18 @@
+import { ARIAGlobalStatesAndProperties } from './aria-global';
+export declare class Anchor {
+    download: string;
+    href: string;
+    hreflang: string;
+    ping: string;
+    referrerpolicy: string;
+    rel: string;
+    target: '_self' | '_blank' | '_parent' | '_top';
+    type: string;
+}
+export declare class DelegatesARIALink {
+    ariaExpanded: 'true' | 'false' | string | null;
+}
+export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+}
+export interface Anchor extends DelegatesARIALink {
+}

package/shared/patterns/anchored.d.ts

@@ -14,10 +14,10 @@ export declare function anchored<T extends {
         _slottedAnchor?: HTMLElement[] | undefined;
         _slottedAnchorChanged(): void;
         _anchorEl?: HTMLElement | undefined;
-        "__#6@#updateAnchorEl": () => void;
-        "__#6@#observer"?: MutationObserver | undefined;
-        "__#6@#observeMissingAnchor": (anchorId: string) => void;
-        "__#6@#cleanupObserverIfNeeded": () => void;
+        "__#7@#updateAnchorEl": () => void;
+        "__#7@#observer"?: MutationObserver | undefined;
+        "__#7@#observeMissingAnchor": (anchorId: string) => void;
+        "__#7@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
     };

package/shared/patterns/aria-global.d.ts

@@ -0,0 +1,21 @@
+export declare class ARIAGlobalStatesAndProperties {
+    ariaAtomic: 'true' | 'false' | string | null;
+    ariaBusy: 'true' | 'false' | string | null;
+    ariaControls: string | null;
+    ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
+    ariaDescribedby: string | null;
+    ariaDetails: string | null;
+    ariaDisabled: 'true' | 'false' | string | null;
+    ariaErrormessage: string | null;
+    ariaFlowto: string | null;
+    ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
+    ariaHidden: 'false' | 'true' | string | null;
+    ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
+    ariaKeyshortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    ariaLive: 'assertive' | 'off' | 'polite' | string | null;
+    ariaOwns: string | null;
+    ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
+    ariaRoledescription: string | null;
+}

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

@@ -34,10 +34,10 @@ export declare function formElements<T extends {
         [x: string]: any;
         label?: string | undefined;
         errorValidationMessage: string;
-        "__#1@#forceErrorDisplay": boolean;
-        "__#1@#hasBeenTouched": boolean;
+        "__#2@#forceErrorDisplay": boolean;
+        "__#2@#hasBeenTouched": boolean;
         connectedCallback(): void;
-        "__#1@#handleInvalidEvent": () => void;
+        "__#2@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         formResetCallback(): void;
         validate: () => void;
@@ -50,9 +50,9 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#2@#blockValidateCalls": boolean;
+        "__#3@#blockValidateCalls": boolean;
         errorTextChanged(_: string, newErrorText: string | undefined): void;
-        "__#2@#forceCustomError"(errorMessage: string): void;
-        "__#2@#clearCustomErrorAndRevalidate"(): void;
+        "__#3@#forceCustomError"(errorMessage: string): void;
+        "__#3@#clearCustomErrorAndRevalidate"(): void;
     };
 } & T;

package/shared/text-anchor.cjs

@@ -1,9 +1,91 @@
 'use strict';
 
 const affix = require('./affix.cjs');
-const anchor = require('./anchor.cjs');
 const index = require('./index.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const ariaGlobal = require('./aria-global.cjs');
+const startEnd = require('./start-end.cjs');
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+class Anchor extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+index.__decorate([
+    index.attr
+], Anchor.prototype, "download", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "href", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "hreflang", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "ping", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "referrerpolicy", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "rel", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "target", void 0);
+index.__decorate([
+    index.attr
+], Anchor.prototype, "type", void 0);
+index.__decorate([
+    index.observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+index.__decorate([
+    index.attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +96,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class TextAnchor extends anchor.Anchor {
+class TextAnchor extends Anchor {
   /**
    * Allows subclasses to provide a body template that will be rendered inside the anchor.
    * @internal

package/shared/text-anchor.js

@@ -1,7 +1,89 @@
 import { A as AffixIcon } from './affix.js';
-import { A as Anchor } from './anchor.js';
-import { a as attr } from './index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
 import { a as applyMixins } from './apply-mixins.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+class Anchor extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+__decorate([
+    attr
+], Anchor.prototype, "download", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "href", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "hreflang", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "ping", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "referrerpolicy", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "rel", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "target", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "type", void 0);
+__decorate([
+    observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins(Anchor, StartEnd, DelegatesARIALink);
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 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 Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";
@@ -79,16 +79,6 @@
   --vvd-color-announcement-700: #f8b9e7;
   --vvd-color-announcement-800: #ffdcf7;
   --vvd-color-announcement-900: #ffedfb;
-  --vvd-color-alert-50: #3e0004;
-  --vvd-color-alert-100: #6e0000;
-  --vvd-color-alert-200: #9f0202;
-  --vvd-color-alert-300: #cd0d0d;
-  --vvd-color-alert-400: #e61d1d;
-  --vvd-color-alert-500: #f75959;
-  --vvd-color-alert-600: #fe9696;
-  --vvd-color-alert-700: #ffbbbb;
-  --vvd-color-alert-800: #fedfdf;
-  --vvd-color-alert-900: #ffeef2;
   --vvd-color-success-50: #0a1e11;
   --vvd-color-success-100: #183a1e;
   --vvd-color-success-200: #155923;
@@ -99,6 +89,26 @@
   --vvd-color-success-700: #86e090;
   --vvd-color-success-800: #cfeed4;
   --vvd-color-success-900: #e1f8e5;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-neutral-tint-50: #191828;
+  --vvd-color-neutral-tint-100: #31304f;
+  --vvd-color-neutral-tint-200: #494977;
+  --vvd-color-neutral-tint-300: #63628d;
+  --vvd-color-neutral-tint-400: #727198;
+  --vvd-color-neutral-tint-500: #908fae;
+  --vvd-color-neutral-tint-600: #b2b1c7;
+  --vvd-color-neutral-tint-700: #cbcbd9;
+  --vvd-color-neutral-tint-800: #e5e5ec;
+  --vvd-color-neutral-tint-900: #f2f3f9;
   --vvd-color-surface-0dp: #0d0d0d;
   --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
   --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
@@ -209,6 +219,17 @@
   --vvd-color-alert-800: #6e0000;
   --vvd-color-alert-900: #3e0004;
   --vvd-color-alert-950: #250004;
+  --vvd-color-neutral-tint-50: #f2f3f9;
+  --vvd-color-neutral-tint-100: #e5e5ec;
+  --vvd-color-neutral-tint-200: #cbcbd9;
+  --vvd-color-neutral-tint-300: #b2b1c7;
+  --vvd-color-neutral-tint-400: #908fae;
+  --vvd-color-neutral-tint-500: #727198;
+  --vvd-color-neutral-tint-600: #63628d;
+  --vvd-color-neutral-tint-700: #494977;
+  --vvd-color-neutral-tint-800: #31304f;
+  --vvd-color-neutral-tint-900: #191828;
+  --vvd-color-neutral-tint-950: #0d0c15;
   --vvd-color-surface-0dp: #ffffff;
   --vvd-color-surface-2dp: #ffffff;
   --vvd-color-surface-4dp: #ffffff;

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";
@@ -105,6 +105,17 @@
   --vvd-color-alert-800: #6e0000;
   --vvd-color-alert-900: #3e0004;
   --vvd-color-alert-950: #250004;
+  --vvd-color-neutral-tint-50: #f2f3f9;
+  --vvd-color-neutral-tint-100: #e5e5ec;
+  --vvd-color-neutral-tint-200: #cbcbd9;
+  --vvd-color-neutral-tint-300: #b2b1c7;
+  --vvd-color-neutral-tint-400: #908fae;
+  --vvd-color-neutral-tint-500: #727198;
+  --vvd-color-neutral-tint-600: #63628d;
+  --vvd-color-neutral-tint-700: #494977;
+  --vvd-color-neutral-tint-800: #31304f;
+  --vvd-color-neutral-tint-900: #191828;
+  --vvd-color-neutral-tint-950: #0d0c15;
   --vvd-color-surface-0dp: #ffffff;
   --vvd-color-surface-2dp: #ffffff;
   --vvd-color-surface-4dp: #ffffff;
@@ -189,16 +200,6 @@
   --vvd-color-announcement-700: #f8b9e7;
   --vvd-color-announcement-800: #ffdcf7;
   --vvd-color-announcement-900: #ffedfb;
-  --vvd-color-alert-50: #3e0004;
-  --vvd-color-alert-100: #6e0000;
-  --vvd-color-alert-200: #9f0202;
-  --vvd-color-alert-300: #cd0d0d;
-  --vvd-color-alert-400: #e61d1d;
-  --vvd-color-alert-500: #f75959;
-  --vvd-color-alert-600: #fe9696;
-  --vvd-color-alert-700: #ffbbbb;
-  --vvd-color-alert-800: #fedfdf;
-  --vvd-color-alert-900: #ffeef2;
   --vvd-color-success-50: #0a1e11;
   --vvd-color-success-100: #183a1e;
   --vvd-color-success-200: #155923;
@@ -209,6 +210,26 @@
   --vvd-color-success-700: #86e090;
   --vvd-color-success-800: #cfeed4;
   --vvd-color-success-900: #e1f8e5;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-neutral-tint-50: #191828;
+  --vvd-color-neutral-tint-100: #31304f;
+  --vvd-color-neutral-tint-200: #494977;
+  --vvd-color-neutral-tint-300: #63628d;
+  --vvd-color-neutral-tint-400: #727198;
+  --vvd-color-neutral-tint-500: #908fae;
+  --vvd-color-neutral-tint-600: #b2b1c7;
+  --vvd-color-neutral-tint-700: #cbcbd9;
+  --vvd-color-neutral-tint-800: #e5e5ec;
+  --vvd-color-neutral-tint-900: #f2f3f9;
   --vvd-color-surface-0dp: #0d0d0d;
   --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
   --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 09 Oct 2024 14:15:03 GMT
+ * Generated on Wed, 23 Oct 2024 11:35:04 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -3857,6 +3857,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": ">"
@@ -3871,7 +3880,7 @@
           "name": "IconConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 17
+            "endIndex": 19
           }
         },
         {