@globalpayments/vega 2.40.0 → 2.42.0

package/dist/cjs/{app-globals-cdd0972c.js → app-globals-77b1f80b.js}

@@ -1,20 +1,20 @@
 'use strict';
 
-const featureFlagController = require('./feature-flag-controller-7b22e598.js');
-const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-00dbdf29.js');
-const contentState = require('./content-state-c5b47ca1.js');
+const featureFlagController = require('./feature-flag-controller-ccf4a113.js');
+const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-1c91112a.js');
+const contentState = require('./content-state-45707be4.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const vegaDialogController = require('./vega-dialog-controller-fe610705.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
-const iconManager = require('./icon-manager-edc2400b.js');
-const index$1 = require('./index-0546e2ea.js');
-require('./ui-5fd9b267.js');
-const translation = require('./translation-6848c389.js');
+const iconManager = require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./ui-13b42af0.js');
+const translation = require('./translation-2c8a32bb.js');
 const typography = require('./typography-4560e7f1.js');
 const validCreditCardNumberRule = require('./valid-credit-card-number-rule-4a1b00b8.js');
-const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
+const index$1 = require('./index-84ce6b33.js');
+const staticSubjectTitle = require('./static-subject-title-64175f06.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const observer = require('./observer-f49483e8.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 const index = require('./index-09acd3c9.js');
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -133,10 +133,10 @@ class VegaTranslateObserverSlimmer extends globalSlimmerRegistry.VegaSlimmer {
    * Registers an observer to watch for translation updates, which triggers a forced update on the component.
    */
   connectedCallback() {
-    const observer$1 = new observer.Observer(this.isAcceptable.bind(this), () => {
+    const observer = new domNodeSubjectFactory.Observer(this.isAcceptable.bind(this), () => {
       index.forceUpdate(this.component);
     });
-    changeManager.ChangeManager.register(staticSubjectTitle.UPDATE_TRANSLATION, observer$1);
+    changeManager.ChangeManager.register(staticSubjectTitle.UPDATE_TRANSLATION, observer);
   }
   /**
    * Determines whether the observer should accept changes.
@@ -222,7 +222,7 @@ function injectVegaLogLevelIntoGlobal() {
  * Inject VegaDialog to global as a public api
  */
 function injectVegaDialogIntoGlobal() {
-  globalThis.VegaDialog = vegaDialogController.VegaDialog;
+  globalThis.VegaDialog = vegaSkeletonLoaderController.VegaDialog;
 }
 /**
  * register global vega slimmers
@@ -313,7 +313,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
  * Inject VegaPublicValidationRules to global as a public api
  */
 function injectVegaPublicValidationRules() {
-  void Promise.resolve().then(function () { return require('./public-rules-90b972e5.js'); }).then((module) => {
+  void Promise.resolve().then(function () { return require('./public-rules-7994300f.js'); }).then((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
     });

package/dist/cjs/{array-5adef7b2.js → array-3aa164ce.js}

@@ -78,7 +78,7 @@ function getLongestTextLengthFromArray(textArray) {
  * revertArrayFromFlatArray([1,2,3,4,5,6],[])
  * @param {T[]} flatArr - an array of elements that have been flattened into a single array.
  * @param {T[]} lengthArr - `lengthArr` is an array of numbers that specifies the length of each sub-array that the `flatArr`
- * @returns {T[]|T[][]} The function `revertArrayFromFlatArray` returns either a single-dimensional array of type `T[]` or a two-dimensional array of type `T[][]`
+ * @returns {T[] | T[][]} The function `revertArrayFromFlatArray` returns either a single-dimensional array of type `T[]` or a two-dimensional array of type `T[][]`
  */
 function convertArrayToNestedArray(flatArr, lengthArr) {
   if (lengthArr.length) {
@@ -136,7 +136,7 @@ function sortArrayOrNestedArray(data, sortBy) {
  * @param {string[]} [existArray] - The `existArray` parameter is an optional array of strings that
  * represents the desired order of the elements in the `needSortArray`. If provided, the function will
  * sort the elements in `needSortArray` based on their position in `existArray`. If not provided, the default exist array will use the default order of the array
- * @returns {unknown[] | unknown[][]} The function `sortAsExistArray` returns a sorted array or nested array of type `T[] |
+ * @returns {T[] | T[][]} The function `sortAsExistArray` returns a sorted array or nested array of type `T[] |
  * T[][]`. The sorting is based on the order of elements in the `existArray` parameter, or if
  * `existArray` is not provided, it is based on the order of appearance of elements in the input array
  * or nested array. The sorting is done using the `sortArrayOrNested

package/dist/cjs/{child-nodes-event-prevent-slimmer-af2addec.js → child-nodes-event-prevent-slimmer-7f59159e.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-981dfd1c.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-cd87600e.js');
 const vegaEnvManager = require('./vega-env-manager-23b8b23c.js');
-const featureFlagController = require('./feature-flag-controller-7b22e598.js');
+const featureFlagController = require('./feature-flag-controller-ccf4a113.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/{child-nodes-notify-observer-slimmer-4e60a929.js → child-nodes-notify-observer-slimmer-100dbe59.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const observer = require('./observer-f49483e8.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const ui = require('./ui-5fd9b267.js');
+const ui = require('./ui-13b42af0.js');
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -64,7 +64,7 @@ class ChildNodesNotifyObserverSlimmer extends globalSlimmerRegistry.VegaSlimmer
    */
   connectedCallback() {
     if (this.subject) {
-      this.notifyObserver = new observer.Observer(this.isAcceptableObserverPayload.bind(this), this.handleObserver);
+      this.notifyObserver = new domNodeSubjectFactory.Observer(this.isAcceptableObserverPayload.bind(this), this.handleObserver);
       changeManager.ChangeManager.register(this.subject, this.notifyObserver);
     }
   }

package/dist/cjs/{component-load-required-16d76afa.js → component-load-required-6cc74719.js}

@@ -5,7 +5,7 @@
  * For example in {@link VegaDatePicker},
  * we want to make sure when {@code @Watch('value')} method is invoked, it should wait for the component is loaded before executing
  *
- * @returns {Function} The function decorated
+ * @returns {FunctionDecoratedType} The function decorated
  */
 function ComponentLoadRequired() {
   return (componentClass, _decoratedMethodName, decoratedMethod) => {

package/dist/cjs/{content-state-c5b47ca1.js → content-state-45707be4.js}

@@ -1,14 +1,13 @@
 'use strict';
 
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4ba74761.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
-const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
-const observer = require('./observer-f49483e8.js');
+const staticSubjectTitle = require('./static-subject-title-64175f06.js');
 
 var tinycolor = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 // This file is autogenerated. It's used to publish CJS to npm.
@@ -2550,7 +2549,7 @@ class ColorSchemaOverridingController {
    *
    * @param {OverridableToken} overrideColorToken The token will be overridden
    * @param {VegaThemeOverrideColors} overrideColors the payload of override colors
-   * @returns {string} The css var value
+   * @returns {Nullable<string>} The css var value
    */
   parseCssVarValue(overrideColorToken, overrideColors) {
     var _a;
@@ -2815,7 +2814,7 @@ class DarkModeStyleController {
   constructor() {
     this.dynamicCustomDarkModeColor = {};
     this.darkModeColorAllTokens = {};
-    this.observer = new observer.Observer(this.isAcceptObserver.bind(this), (isDark) => {
+    this.observer = new domNodeSubjectFactory.Observer(this.isAcceptObserver.bind(this), (isDark) => {
       if (isDark) {
         this.generateDarkModeStyle();
       }
@@ -3086,6 +3085,15 @@ class StateEntityRenderingRegistry {
   getDOMByEntity(entity) {
     return this.entityToDOM.get(entity);
   }
+  /**
+   * Delete the dirty element to entity ref.
+   *
+   * @example Convert text node to the link node, the old span will change to the link wrapper element, and there will be a new text span, so we need remove the old span ref from the map.
+   * @param {HTMLElement} dom - The dirty element ref.
+   */
+  removeDirtyDomRef(dom) {
+    this.domToEntity.delete(dom);
+  }
 }
 const stateEntityRenderingRegistry = new StateEntityRenderingRegistry();
 
@@ -3189,7 +3197,7 @@ class IndentAnnotation extends BlockAnnotation {
   /**
    * Generate the JSON item of the annotation
    *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
    */
   toJSON() {
     return this.indent > 0 ? { indent: this.indent } : null;
@@ -3225,9 +3233,12 @@ class ActionHandleStrategyRegistry {
   /**
    * Get the special strategy that handle the action logic.
    *
+   * @typedef T generic type
+   * @typedef target generic type
+   * @typedef R generic type
    * @param {string} actionType - The special action type or the action class name.
    * @param {string} targetClass - The rich text node class name.
-   * @returns {Nullable<ActionHandleStrategy>} - The action handle strategy instance if defined.
+   * @returns {Nullable<ActionHandleStrategy<T, target, R>>} - The action handle strategy instance if defined.
    */
   static get(actionType, targetClass) {
     const strategyMap = this.registry.get(targetClass);
@@ -3238,9 +3249,10 @@ class ActionHandleStrategyRegistry {
   /**
    * Get the special strategy from the registry and run the strategy execute method.
    *
+   * @typedef R generic type
    * @param {ModifyContentAction | AnnotationAction} action - The update node action instance.
    * @param {RTENode | RTEBlock | VegaRTEContent} RTEInstance - The rich text editor node.
-   * @returns {unknown} The return value of the strategy method execute invoke result.
+   * @returns {R | undefined} The return value of the strategy method execute invoke result.
    */
   static executeTheStrategy(action, RTEInstance) {
     const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
@@ -3299,8 +3311,9 @@ class RTEBlock {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
-   * @returns {Nullable<BlockAnnotation> | Nullable<LinkGroupAnnotation>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);
@@ -3366,8 +3379,9 @@ class RTENode {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {RTENodeAnnotationMapKey} type - Annotation type
-   * @returns {Nullable<RTENodeAnnotationMapValue>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);
@@ -3501,9 +3515,10 @@ class ActionHandleStrategy {
   /**
    * Public method to invoke the handle logic.
    *
+   * @typedef R generic type
    * @param {ModifyContentAction | AnnotationAction} action - The action instance. Contains the action type and necessary params.
    * @param {RTENode | RTEBlock | VegaRTEContent} target - The rich text node instance that will be modified.
-   * @returns {unknown} - The invoke result in special strategy.
+   * @returns {R} - The invoke result in special strategy.
    */
   execute(action, target) {
     globalSlimmerRegistry.LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);
@@ -3603,7 +3618,7 @@ class RTEImageNode extends RTENode {
    *
    * @param {VegaRTEImageNode} node - The node to be converted.
    * @param {RTEImageBlock} parentBlock - The parent block
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
    */
   static from(node, parentBlock) {
     const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
@@ -4191,7 +4206,7 @@ class ItalicAnnotation extends NodeAnnotation {
    * Generate the map item for the annotation
    *
    * @param {boolean} italic - Italic annotation
-   * @returns {Nullable<[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]>} Map item for the annotation
+   * @returns {[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]} Map item for the annotation
    */
   static from(italic) {
     return [exports.NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];
@@ -4415,7 +4430,7 @@ class LinkAnnotation extends NodeAnnotation {
   /**
    * Generate the JSON representation of the annotation
    *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
    */
   toJSON() {
     return { link: { href: this.link.href, groupKey: this.link.groupKey } };
@@ -4464,7 +4479,7 @@ class LinkGroupAnnotationAction extends AnnotationAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {LinkGroupAnnotation} The annotation
+   * @returns {Annotation} The annotation
    */
   toAnnotation() {
     return new LinkGroupAnnotation(this.groupKey);
@@ -4645,7 +4660,7 @@ class NodeSplitTextStrategy extends ActionHandleStrategy {
    *
    * @param {Range} range - Selection range
    * @param {RTETextNode} target - RTETextNode
-   * @returns {RTETextNode[] | this} RTETextNode array
+   * @returns {RTETextNode[] | RTETextNode} RTETextNode array
    */
   splitTextNode(range, target) {
     const { startContainer, endContainer, startOffset } = range;
@@ -4726,7 +4741,7 @@ class ClearFormattingAnnotationAction extends TextSplittableAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {ClearFormattingAnnotation} the annotation
+   * @returns {Annotation} the annotation
    */
   toAnnotation() {
     return new ClearFormattingAnnotation();
@@ -6112,7 +6127,7 @@ class RTEListItemBlock extends RTETextBlock {
    * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
    *
    * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
-   * @returns {RTEListBlock} Return an instance of `RTEListItemBlock`
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
    */
   static from(block) {
     const listItemBlock = new RTEListItemBlock(block.id);
@@ -6500,7 +6515,7 @@ class VegaRTEContent {
    * Converts a JSON array of blocks to a class array of RTEContentBlock.
    *
    * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
-   * @returns {RTEContentBlock[]} The converted array of RTEContentBlock.
+   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
    */
   static fromJSON(value) {
     const blocks = value.map((block) => {

package/dist/cjs/{create-public-api-runtime-metrics-slimmer-54c3f73b.js → create-public-api-runtime-metrics-slimmer-a3d17afb.js}

@@ -155,7 +155,7 @@ class VegaPublicAPIRuntimeMetricsSlimmerBase extends globalSlimmerRegistry.VegaS
    * The `CurrentlyInvokedMethodName` is a public API method name, it comes from the `InjectVegaTelemetrySlimmer` definition and assignment
    *
    * @param {unknown[]} [args] - The `args` parameter passed in when the slimmer method is executed
-   * @returns {Record<string, unknown>} The `getPublicAPIMetricsPayload` method returns an object with the following
+   * @returns {Nullable<Record<string, unknown>>} The `getPublicAPIMetricsPayload` method returns an object with the following
    * structure:
    * {
    * 	publicAPIName: string, // The public api name

package/dist/cjs/{deprecated-property-slimmer-fc729fd9.js → deprecated-property-slimmer-4f15005f.js}

@@ -17,7 +17,8 @@ class DeprecatedPropertySlimmerBase extends globalSlimmerRegistry.VegaSlimmer {
    * The `getValue` function returns either the old property or the new property based on a deep equality
    * check.
    *
-   * @returns {unknown} The `getValue` method returns either the `oldProperty` or `newProperty` based on the result
+   * @typedef T generic type
+   * @returns {T} The `getValue` method returns either the `oldProperty` or `newProperty` based on the result
    * of the `deepEqual` comparison between them. If `newProperty` is deeply equal to `oldProperty`, then
    * `oldProperty` is returned; otherwise, `newProperty` is returned.
    */
@@ -30,11 +31,12 @@ class DeprecatedPropertySlimmerBase extends globalSlimmerRegistry.VegaSlimmer {
 /**
  * Create dynamic deprecated property slimmer
  *
+ * @typedef K generic type
  * @param {ClassPrototype} mapFromClass - It represents the class that you want to map from.
  * @param {string} newPropertyName - The new prop name or name path
  * @param {string} oldPropertyName - The old prop name or name path
  * @param {unknown} defaultValue - The default value of the prop
- * @returns {DeprecatedPropertySlimmerBase<unknown>} - deprecated property slimmer
+ * @returns {DeprecatedPropertySlimmerBase<K>} - deprecated property slimmer
  */
 function createDeprecatedPropertySlimmer(mapFromClass, newPropertyName, oldPropertyName, defaultValue) {
   return dynamicSlimmer.createDynamicSlimmer(mapFromClass, DeprecatedPropertySlimmerBase, [{ mapFrom: 'host', mapTo: 'host' }], [], [

package/dist/cjs/{design-token-36eb5def.js → design-token-d8362603.js}

@@ -3,7 +3,7 @@
 const typeGuard = require('./type-guard-4ba85fdc.js');
 const breakpoints = require('./breakpoints-ebde4837.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const responsiveFormatFacade = require('./responsive-format-facade-a1983026.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9439e9ae.js');
 const typography = require('./typography-4560e7f1.js');
 const stateBackgroundColorFormatter = require('./state-background-color-formatter-e585a027.js');
 const ui = require('./ui-32e69595.js');
@@ -200,7 +200,7 @@ function formatTokenWithModes(token, modes) {
  * If the token is a valid spacing token, return the CSS class string. Otherwise, log an error message
  *
  * @param {unknown} token - The value that was passed into the function.
- * @returns {string} The the CSS class string of the padding token.
+ * @returns {Nullable<string>} The the CSS class string of the padding token.
  */
 function formatAndValidPadding(token) {
   if (typeGuard.isSpacingTokenType(token)) {
@@ -215,7 +215,7 @@ function formatAndValidPadding(token) {
  * a valid border style type, otherwise it logs an invalid value message.
  *
  * @param {unknown} token - The `token` parameter is a value that represents a border style type.
- * @returns {string} The function `formatAndValidBorderStyle` returns a string that is formatted as
+ * @returns {Nullable<string>} The function `formatAndValidBorderStyle` returns a string that is formatted as
  * `v-border-` if the `token` parameter is of a valid border style type. If the `token` is not
  * a valid border style type, it logs an invalid value message and does not return anything (implicitly
  * returns `undefined`).
@@ -233,7 +233,7 @@ function formatAndValidBorderStyle(token) {
  * error message
  *
  * @param {unknown} token - The value passed in by the user.
- * @returns {string} The the CSS class string of the border radius token.
+ * @returns {Nullable<string>} The the CSS class string of the border radius token.
  */
 function formatAndValidBorderRadius(token) {
   if (typeGuard.isBorderRadiusTokenType(token)) {
@@ -247,7 +247,7 @@ function formatAndValidBorderRadius(token) {
  * If the token is a valid border color, return CSS class string of the border color. Otherwise, log an error message
  *
  * @param {unknown} token - The value passed in by the user.
- * @returns {string}  return the CSS class string of the border color
+ * @returns {Nullable<string>}  return the CSS class string of the border color
  */
 function formatAndValidBorderColor(token) {
   if (typeGuard.isBorderColorTokenType(token)) {
@@ -262,7 +262,7 @@ function formatAndValidBorderColor(token) {
  *
  * @param {unknown} token - The value of the token.
  * @param {TokenMode[]} withModes - TokenMode[] = []
- * @returns {string} CSS class string for the background color token with modes supported.
+ * @returns {Nullable<string>} CSS class string for the background color token with modes supported.
  */
 function formatAndValidBackgroundColor(token, withModes = []) {
   if (typeGuard.isBackgroundColorTokenType(token)) {
@@ -278,7 +278,7 @@ function formatAndValidBackgroundColor(token, withModes = []) {
  *
  * @param {unknown} token - The token to format.
  * @param {TokenMode[]} withModes - TokenMode[] = []
- * @returns {string} A CSS class string that is either a valid color or a valid color with modes.
+ * @returns {Nullable<string>} A CSS class string that is either a valid color or a valid color with modes.
  */
 function formatAndValidTextColor(token, withModes = []) {
   if (typeGuard.isTextColorTokenType(token)) {
@@ -292,7 +292,7 @@ function formatAndValidTextColor(token, withModes = []) {
  * If the token is a valid breakpoint, return CSS class string for the flex breakpoint. Otherwise, log an error
  *
  * @param {unknown} token - The value of the breakpoint.
- * @returns {string} CSS class string for the flex breakpoint.
+ * @returns {Nullable<string>} CSS class string for the flex breakpoint.
  */
 function formatAndValidFlexBreakpoint(token) {
   if (typeGuard.isBreakpointsTokenType(token)) {
@@ -306,7 +306,7 @@ function formatAndValidFlexBreakpoint(token) {
  * If the token is a breakpoint, return the breakpoint value. Otherwise, log an error and return 0
  *
  * @param {unknown} token - The value passed in by the user.
- * @returns {number} value of the breakpoint.
+ * @returns {Nullable<number>} value of the breakpoint.
  */
 function formatAndValidBreakpointSize(token) {
   if (typeGuard.isBreakpointsTokenType(token)) {
@@ -321,7 +321,7 @@ function formatAndValidBreakpointSize(token) {
  * error message
  *
  * @param {unknown} token - The value passed in by the user.
- * @returns {string} CSS class string for the given gap token.
+ * @returns {Nullable<string>} CSS class string for the given gap token.
  */
 function formatAndValidGap(token) {
   if (typeGuard.isSpacingTokenType(token)) {
@@ -336,7 +336,7 @@ function formatAndValidGap(token) {
  *
  * @param {string} token - The token to format.
  * @param {TokenMode[]} withModes - TokenMode[] = []
- * @returns {string} CSS class string of the shadow token with modes supported
+ * @returns {Nullable<string>} CSS class string of the shadow token with modes supported
  */
 function formatAndValidShadow(token, withModes = []) {
   if (typeGuard.isShadowsTokenType(token)) {
@@ -352,7 +352,7 @@ function formatAndValidShadow(token, withModes = []) {
  * @typedef Flag key of ManagedResponsiveScopeInput
  * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} token - The token to format.
  * @param {Flag} flag - The flag that the token is being formatted for.
- * @returns {Nullable<string>} A nullable string
+ * @returns {Nullable<ManagedResponsiveScopeOutput[Flag]>} A nullable string
  */
 function formatAndValidResponsiveToken(token, flag) {
   if (token !== null && token !== undefined) {
@@ -363,7 +363,7 @@ function formatAndValidResponsiveToken(token, flag) {
  * The function `formatAndValidTypographyToken` formats a typography token by adding a prefix and checks if it is a valid typography token.
  *
  * @param {string} token - The `token` parameter is a string that represents a typography token.
- * @returns {string} a string value.
+ * @returns {Nullable<string>} a string value.
  */
 function formatAndValidTypographyToken(token) {
   if (typeGuard.isTypographyTokenType(token)) {

package/dist/cjs/{dom-node-subject-factory-ce1777a9.js → dom-node-subject-factory-6a2aa462.js}

@@ -1,6 +1,35 @@
 'use strict';
 
-const ui = require('./ui-5fd9b267.js');
+const ui = require('./ui-13b42af0.js');
+
+/**
+ *  An Observer is a class that has a listener method that accepts a value of type T
+ *  and calls the listener method with a value of type T
+ */
+class Observer {
+  /**
+   * It accepts a function that accepts a value and returns a boolean, and a function that accepts a value of the type that
+   * the first function accepts
+   *
+   * @typedef T generic type parameter
+   * @param {(input: unknown) => input is T} accept - A function that indicate if the input is acceptable by the observer
+   * @param {(input: T) => void} listener - A function handle the input for the observer if the input is accepted
+   */
+  constructor(accept, listener) {
+    this.accept = accept;
+    this.listener = listener;
+  }
+  /**
+   * If the input is of the type that this handler is interested in, then call the listener function
+   *
+   * @param {unknown} input - unknown
+   */
+  notify(input) {
+    if (this.accept(input)) {
+      this.listener(input);
+    }
+  }
+}
 
 /** The VegaEventID class represents an event ID with both a Vega name and a native name. */
 class VegaEventID {
@@ -169,7 +198,7 @@ class DomNodeSubjectFactory {
    *
    * @param {HTMLElement} childNode - Child node.
    * @param {VegaEventIDInterface} eventId - eventId.
-   * @returns {DomNodeSubject} - Parent node subject.
+   * @returns {Nullable<DomNodeSubject>} - Parent node subject.
    */
   getSubjectFromParentNodeByEventId(childNode, eventId) {
     let subject;
@@ -200,6 +229,7 @@ class DomNodeSubjectFactory {
 }
 const domNodeSubjectFactory = new DomNodeSubjectFactory();
 
+exports.Observer = Observer;
 exports.VegaActionButtonClick = VegaActionButtonClick;
 exports.VegaActionClick = VegaActionClick;
 exports.VegaBlur = VegaBlur;

package/dist/cjs/{dom-node-subject-observer-factory-80b3ac6c.js → dom-node-subject-observer-factory-8f9ed458.js}

@@ -1,8 +1,7 @@
 'use strict';
 
 const changeManager = require('./change-manager-a297e4d2.js');
-const observer = require('./observer-f49483e8.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 
 /**
  * The function `domAcceptableHandle` always returns `true`.
@@ -24,7 +23,7 @@ class DomNodeSubjectObserverFactory {
    */
   static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
     if (node) {
-      const domNodesObserver = new observer.Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
+      const domNodesObserver = new domNodeSubjectFactory.Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
       DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
       changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(node, eventId), domNodesObserver);
     }

package/dist/cjs/{element-appender-slimmer-4f0dc8c6.js → element-appender-slimmer-ad1e5774.js}

@@ -1,16 +1,16 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const ui = require('./ui-5fd9b267.js');
-const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
+const ui = require('./ui-13b42af0.js');
+const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-1c91112a.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-bb1eaebe.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
 const ui$1 = require('./ui-32e69595.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
-const responsiveFormatFacade = require('./responsive-format-facade-a1983026.js');
+const responsiveFormatFacade = require('./responsive-format-facade-9439e9ae.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const staticSubjectTitle = require('./static-subject-title-c589a1bd.js');
-const observer = require('./observer-f49483e8.js');
+const staticSubjectTitle = require('./static-subject-title-64175f06.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
 
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -594,7 +594,7 @@ class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer
   /**
    * Retrieves and formats the translocation.
    *
-   * @returns {TranslocationType} current translocation.
+   * @returns {Nullable<TranslocationType>} current translocation.
    */
   getTranslocation() {
     const translocation = this.showConfig.translocation;
@@ -932,7 +932,7 @@ class ElementAppender {
       return;
     this.toggleShow(false);
     this.resetContainerPosition();
-    internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+    vegaSkeletonLoaderController.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
   }
   /**
    * Update position while window scroll.
@@ -956,7 +956,7 @@ class ElementAppender {
       return;
     this.removeVisibleAppendElement(this.showConfig.appendableElement);
     this.resetContainerPosition();
-    internalVegaZIndexManager.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+    vegaSkeletonLoaderController.InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
     this.showConfig.appendableElement.remove();
     this.disconnectResizeObserver();
   }
@@ -1047,6 +1047,7 @@ class ElementAppender {
     if (!this.showConfig.isScreenPosition) {
       this.initVisibleAppendElement();
     }
+    this.showConfig.appendableElement.classList.add('vega-element-appender-appendable');
     this.showConfig.appendableElement.style.boxSizing = 'border-box';
     this.positionCalculationController.setCalculationStrategy();
   }
@@ -1081,7 +1082,7 @@ class ElementAppender {
    * @returns {void}
    */
   setZIndex() {
-    internalVegaZIndexManager.InternalVegaZIndexManager.setZIndex(this.showConfig.appendableElement, 'base');
+    vegaSkeletonLoaderController.InternalVegaZIndexManager.setZIndex(this.showConfig.appendableElement, 'base');
   }
   /**
    * If the showConfigCallback is a function, call it and return the result, otherwise return the
@@ -1194,7 +1195,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       if (this.shouldListenerWork('custom') &&
         this.isShowing() &&
         this.showConfig &&
-        !ui.isParent(currentTarget, this.showConfig.appendableElement) &&
+        !ui.findParent(currentTarget, '.vega-element-appender-appendable') &&
         !ui.isParent(currentTarget, this.showConfig.target) &&
         ui.findParent(currentTarget, 'vega-modal') === ui.findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();
@@ -1311,7 +1312,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
    * Sets up an observer to handle scroll events in a shadow root element.
    */
   listenShadowRootElementScrolling() {
-    this.shadowRootElementScrollingObserver = new observer.Observer(this.canAcceptShadowRootScrollEvent.bind(this), this.globalScrollHandler.bind(this));
+    this.shadowRootElementScrollingObserver = new domNodeSubjectFactory.Observer(this.canAcceptShadowRootScrollEvent.bind(this), this.globalScrollHandler.bind(this));
     changeManager.ChangeManager.register(staticSubjectTitle.SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
   }
   /**

package/dist/cjs/{event-emit-slimmer-208a19e4.js → event-emit-slimmer-93183c4d.js}

@@ -3,9 +3,9 @@
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-981dfd1c.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-6a2aa462.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-8f9ed458.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-cd87600e.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;