@globalpayments/vega 2.99.0 → 2.101.0

package/dist/collection/components/vega-button-group/vega-button-group-item/slimmers/renderers/vega-button-group-item-renderer.js

@@ -117,13 +117,20 @@ export class VegaButtonGroupItemRenderer extends VegaSlimmer {
    */
   getButtonProps() {
     return {
-      size: this.size,
-      icon: this.icon,
-      label: this.iconOnly ? '' : this.getDefaultLabel(),
-      iconAlign: this.iconAlign,
-      disabled: this.isDisabled(),
+      'size': this.size,
+      'icon': this.icon,
+      'label': this.iconOnly ? '' : this.getDefaultLabel(),
+      'iconAlign': this.iconAlign,
+      'disabled': this.isDisabled(),
+      // When the visible label is suppressed (icon-only), forward the label as
+      // `data-aria-label` so the underlying button maps it to `aria-label` via its
+      // `AriaAttributesValueMapper`, exposing an accessible name to screen readers
+      // (VD-8790). Both `vega-button-link` (tertiary) and `vega-button`
+      // (non-tertiary) are configured with that mapper, so the forwarding works on
+      // every variant.
+      'data-aria-label': this.iconOnly && this.label ? this.label : undefined,
       // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (node) => {
+      'ref': (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, this.buttonItemClickHandle);
       },
     };

package/dist/collection/components/vega-button-link/vega-button-link.css

@@ -137,22 +137,22 @@ a:active .vega-button-link-button-container {
 
 /* button color css - danger */
 a.vega-button-link-danger .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   color: rgba(var(--v-text-danger-link, 230, 50, 87, 1));
 }
 
 a.vega-button-link-danger:hover .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));
   color: rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1));
 }
 
 a.vega-button-link-danger:focus .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
 }
 
 a.vega-button-link-danger:active .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));
+  border-color: rgba(var(--v-border-color-danger-active, 189, 41, 71, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2));
   color: rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));
 }

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -134,7 +134,7 @@ export class VegaButtonLink {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-button-link-disabled': this.disabled,
       } },
-      h("a", { part: "link", tabIndex: this.disabled ? -1 : 0, role: isButton ? 'button' : 'link', "aria-label": this.label.trim() || 'No label defined', href: href, onClick: this.onClick, class: {
+      h("a", { part: "link", tabIndex: this.disabled ? -1 : 0, role: isButton ? 'button' : 'link', "aria-label": this.label.trim() || 'No label defined', "aria-disabled": this.disabled ? 'true' : null, href: href, onClick: this.onClick, class: {
           'vega-button-link': true,
           [`vega-button-link-size-${this.size}`]: true,
           'vega-button-link-left-button': this.hasIconButton('left'),
@@ -143,7 +143,7 @@ export class VegaButtonLink {
           'icon': this.icon ? true : false,
           [this.size]: true,
         }, rel: "noopener noreferrer", target: this.target },
-        h("div", { class: "vega-button-link-content" }, this.renderContent()))), this.host);
+        h("div", { class: "vega-button-link-content", "aria-hidden": "true" }, this.renderContent()))), this.host);
   }
   hasIconButton(position) {
     return this.icon && this.iconType === 'button' && this.iconAlign === position;

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-event-item-renderer.js

@@ -11,8 +11,16 @@ import { getCalendarEventSlotName } from '../../../utils';
 import ChangeManager from '../../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalCalendarEventPreviewUpdate } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { findParent } from '../../../../../utils/ui';
 /** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
 export class VegaCalendarEventItemRenderer extends VegaSlimmer {
+  /**
+   * While it is a single event and the trigger is hover, we should show the preview popover when mouse enter on the event item.
+   */
+  previewingEvent(event, targetCalendarViewDate, isGroupEvent) {
+    this.eventPreviewEmitter.emit({ rawEvent: event.event });
+    this.setupPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
+  }
   /**
    * render event component
    *
@@ -24,11 +32,18 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
   render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
     return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: `${item.eventKey}-${item.startTime.toString()}-${item.endTime.toString()}`, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
-        this.handleEventClick(item);
-        this.enabledEventPreview &&
-          this.setupPreviewContainer(item, targetCalendarViewDate, isGroupEvent);
-      } }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
+      onClick: () => this.onEventClick(item, targetCalendarViewDate, isGroupEvent) }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
+  }
+  /**
+   * While it is a group event or the trigger is click with single event, we should show the preview popover when click on the event item.
+   */
+  onEventClick(event, targetCalendarViewDate, isGroupEvent) {
+    var _a;
+    this.handleEventClick(event);
+    if (this.enabledEventPreview &&
+      (isGroupEvent || ((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) !== 'hover')) {
+      this.previewingEvent(event, targetCalendarViewDate, isGroupEvent);
+    }
   }
   /**
    * emit vega click event
@@ -42,6 +57,7 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
     const previewContainer = this.eventPreviewPopoverController.getEventPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
     if (previewContainer) {
       const preview = this.renderer.getEventPreviewRef();
+      this.hidePreviousPreviewPopover(previewContainer);
       if (isGroupEvent) {
         preview.classList.remove('single-event-preview');
         preview.classList.add('group-event-preview');
@@ -73,6 +89,24 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
       previewContainer.append(preview);
     }
   }
+  /**
+   * 1. The popover is not closed immediately when mouse leave.
+   * 2. The event preview popover shares a single preview component.
+   * While a new event item is hovered, it will make previous event popover empty, this will emit the popover flash in view.
+   * To avoid this, we hide the previous preview popover when a new event item is hovered.
+   * Ticket: https://gethired.atlassian.net/browse/VD-9920
+   */
+  hidePreviousPreviewPopover(previewContainer) {
+    var _a;
+    const preview = this.renderer.getEventPreviewRef();
+    const previousPreviewContainer = preview.parentElement;
+    if (((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) === 'hover' &&
+      previousPreviewContainer &&
+      previousPreviewContainer !== previewContainer) {
+      const box = findParent(previewContainer, 'vega-popover-content-box');
+      box && box.classList.add('vega-force-hidden');
+    }
+  }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
 __decorate([
@@ -90,9 +124,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-event-preview-popover-renderer.js

@@ -14,6 +14,7 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.popoverHideObserver = null;
+    this.popoverRefMap = new WeakMap();
   }
   render(event, targetCalendarViewDate, classMap) {
     return this.enabledEventPreview
@@ -21,11 +22,13 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
       : this.eventItemRenderer.render(event, classMap, targetCalendarViewDate);
   }
   renderPreviewPopover(event, classMap, targetCalendarViewDate) {
+    var _a;
     return (h("vega-popover", { isScreenPosition: true, placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
         'event-preview-popover': true,
         'block': true,
-      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {
+      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, trigger: ((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) || 'click', ref: (el) => {
         this.setPopoverHideObserver(el);
+        this.listenPopoverRef(event, el, targetCalendarViewDate);
       } },
       h("div", { slot: "popover-content", class: "event-preview-popover-content" }, this.eventItemRenderer.render(event, classMap, targetCalendarViewDate)),
       h("div", { slot: "popover" },
@@ -44,6 +47,39 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
       ChangeManager.unregister(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
   }
+  listenPopoverRef(item, popover, targetCalendarViewDate) {
+    const onPopoverMouseEnter = (e) => {
+      this.onPopoverMouseEnter(e, item, targetCalendarViewDate);
+    };
+    if (popover) {
+      this.popoverRefMap.set(item, popover);
+      popover.removeEventListener('mouseenter', onPopoverMouseEnter);
+      popover.addEventListener('mouseenter', onPopoverMouseEnter);
+    }
+    else if (this.popoverRefMap.has(item)) {
+      const popoverRef = this.popoverRefMap.get(item);
+      if (popoverRef) {
+        popoverRef.removeEventListener('mouseenter', onPopoverMouseEnter);
+        this.popoverRefMap.delete(item);
+      }
+    }
+  }
+  /**
+   * When the mouse enters the popover, if the trigger is hover, we should show the preview popover when mouse enter on the event item.
+   * If the group event is previewing, we should prevent the popover from showing.
+   */
+  onPopoverMouseEnter(event, eventItem, targetCalendarViewDate) {
+    var _a;
+    if (this.enabledEventPreview && ((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) === 'hover') {
+      if (this.monthEventRenderer.isGroupEventPreviewing()) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      else {
+        this.eventItemRenderer.previewingEvent(eventItem, targetCalendarViewDate, false);
+      }
+    }
+  }
 }
 VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
 __decorate([
@@ -64,6 +100,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "monthEventRenderer", void 0);

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.js

@@ -11,7 +11,7 @@ import { VegaInternalCalendarEventPreviewClear, VegaInternalCalendarEventPreview
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import ChangeManager from '../../../../../helpers/change-manager/change-manager';
-import { VegaPopoverHide } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 /** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
 export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
@@ -19,6 +19,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     super(...arguments);
     this.maxMonthDisplayEventsCount = 2;
     this.popoverHideObserver = null;
+    this.isGroupEventPreviewingFlag = false;
   }
   /**
    * current row dates all events.
@@ -67,6 +68,14 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
   getMoreEventsBoxRef() {
     return this.moreEventsBoxRef;
   }
+  /**
+   * Check if a group event preview is currently being displayed
+   *
+   * @returns {boolean} - True if a group event preview is being displayed, false otherwise
+   */
+  isGroupEventPreviewing() {
+    return this.isGroupEventPreviewingFlag;
+  }
   /**
    * render the current date events
    *
@@ -115,7 +124,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       });
       return (h("div", { class: "month-event-more" },
         h("vega-popover", { trigger: "click", placement: "right", padding: '0', ref: (el) => {
-            this.setPopoverHideObserver(el);
+            this.setPopoverObserver(el);
           }, isScreenPosition: true },
           h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
           h("vega-flex", { slot: "popover" },
@@ -185,7 +194,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     return rowEvents;
   }
-  setPopoverHideObserver(popover) {
+  setPopoverObserver(popover) {
     if (popover) {
       this.popoverHideObserver = new Observer((_payload) => true, async () => await popover.hide());
       ChangeManager.register(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
@@ -194,10 +203,20 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       ChangeManager.unregister(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
     // we should clear current event in vega-calendar-event-preview when popover hide
-    popover &&
+    if (popover) {
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        this.isGroupEventPreviewingFlag = false;
         ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.renderer.getEventPreviewRef(), VegaInternalCalendarEventPreviewClear), {});
       });
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, () => {
+        this.isGroupEventPreviewingFlag = true;
+      });
+    }
+    else if (this.groupPopoverRef) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.groupPopoverRef, VegaPopoverHide);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.groupPopoverRef, VegaPopoverShow);
+    }
+    this.groupPopoverRef = popover;
   }
 }
 __decorate([

package/dist/collection/components/vega-calendar/vega-calendar.js

@@ -14,7 +14,7 @@ import { VegaCalendarMonthViewRenderer } from './slimmers/month-view/renderers/v
 import { VegaCalendarViewWithTimeRenderer } from './slimmers/day-view/renderers/vega-calendar-view-with-time-renderer';
 import { VegaCalendarTimeLineRenderer } from './slimmers/day-view/renderers/vega-calendar-time-line-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaDateClick, VegaDateDblClick, VegaEventClick, VegaEventEdit, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaDateClick, VegaDateDblClick, VegaEventClick, VegaEventEdit, VegaEventPreview, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { CalendarDate } from '../../helpers/calendar';
 import { VegaCalendarViewController } from './slimmers/common/controllers/vega-calendar-view-controller';
 import { VegaCalendarCurrentPeriodController } from './slimmers/common/controllers/vega-calendar-current-period-controller';
@@ -77,6 +77,7 @@ export class VegaCalendar {
     this.eventResponsiveController = new VegaCalendarEventResponsiveController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
     this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
+    this.eventPreviewEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventPreview);
     this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.moreActionClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaMoreActionClick);
     this.dateClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateClick);
@@ -551,6 +552,29 @@ export class VegaCalendar {
           }],
         "text": "A callback function that determines the visibility of action buttons in the event preview popover for each calendar event.\nIt receives the raw event data and the associated date, and should return an object indicating which action buttons should be visible in the popover.\nThis allows for dynamic customization of the event preview based on the specific event being clicked."
       }
+    },
+    "eventPreviewPopoverProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaCalendarEventPreviewPopoverProps",
+        "resolved": "{ trigger: \"click\" | \"hover\"; }",
+        "references": {
+          "VegaCalendarEventPreviewPopoverProps": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.101.0"
+          }],
+        "text": "Configuration options for the event preview popover behavior.\nAllows customization of how the popover is triggered (hover or click).\nBy default, the popover triggers on click."
+      }
     }
   }; }
   static get states() { return {
@@ -609,6 +633,55 @@ export class VegaCalendar {
           }
         }
       }
+    }, {
+      "method": "vegaEventPreview",
+      "name": "vegaEventPreview",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.101.0"
+          }],
+        "text": "An event emitter notifying that a calendar event is ready to review."
+      },
+      "complexType": {
+        "original": "VegaCalendarEventPreviewInfo",
+        "resolved": "{ rawEvent: VegaCalendarRawEvent; }",
+        "references": {
+          "VegaCalendarEventPreviewInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "eventPreview",
+      "name": "eventPreview",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.101.0"
+          }],
+        "text": "An event emitter notifying that a calendar event is ready to review."
+      },
+      "complexType": {
+        "original": "VegaCalendarEventPreviewInfo",
+        "resolved": "{ rawEvent: VegaCalendarRawEvent; }",
+        "references": {
+          "VegaCalendarEventPreviewInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
     }, {
       "method": "vegaEventClick",
       "name": "vegaEventClick",
@@ -1007,6 +1080,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventClickEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventPreviewEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dateDblClickEmitter", void 0);

package/dist/collection/components/vega-code-block/vega-code-block.css

@@ -63,23 +63,23 @@
   padding-left: var(--v-code-block-pl);
 }
 
-:host::part(select-container) {
+vega-input-select::part(select-container) {
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 4px;
 }
-:host::part(selected-box), :host::part(placeholder) {
+vega-input-select::part(selected-box), vega-input-select::part(placeholder) {
   font-size: 14px;
   user-select: none;
 }
-:host::part(toggle-icon-container) {
+vega-input-select::part(toggle-icon-container) {
   width: 12px;
   height: 12px;
   line-height: 12px;
 }
-:host::part(toggle-icon) {
+vega-input-select::part(toggle-icon) {
   width: 12px;
   height: 12px;
 }

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-keyboard-controller.js

@@ -0,0 +1,148 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { KeyboardManagerSlimmer } from '../../../../helpers/slimmers/keyboard-manager-slimmer';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { markOverlayHandledEscape } from '../../../../helpers/keyboard/overlay-escape-coordination';
+/**
+ * The `VegaDropdownKeyboardController` class is responsible for managing keyboard events
+ * for a dropdown component.
+ */
+export class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
+  /**
+   * The constructor function sets up keyboard event listeners for a dropdown component.
+   */
+  constructor() {
+    super((target) => {
+      const dropdownRef = this.renderer.getDropdownRef();
+      const virtualContainerRef = this.renderer.getVirtualContainerRef();
+      // VD-9605: In template mode, items are slotted into dropdownContentBoxRef (not
+      // virtualContainerRef), so include it in scope so Arrow/Escape listeners fire correctly.
+      const dropdownContentBoxRef = this.renderer.getDropdownContentBoxRef();
+      return [
+        {
+          keyCode: 'Tab',
+          activeElementInScope: [target.host],
+          callback: target.showDropdownIfHover,
+        },
+        {
+          keyCode: 'Escape',
+          activeElementInScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ () => target.appenderController.hide(),
+        },
+        {
+          // Additional `keydown` listener so Escape can close the dropdown when
+          // screen readers (e.g. VoiceOver) intercept the `keyup` event or move
+          // focus elsewhere after activating the trigger (e.g. into a rich-text
+          // editor's editable content). When the dropdown is shown, Escape
+          // should always close it regardless of where focus currently is.
+          //
+          // Registered in the capture phase so ancestor focus-trap containers
+          // (e.g. a Bootstrap modal's own keydown handler attached to the modal
+          // element) do not also react to the same Escape press and close
+          // themselves before the dropdown handles it. The callback calls
+          // `stopPropagation` to prevent the event from reaching descendant
+          // listeners, and tags the event with a marker that vega-modal's
+          // Escape handler checks so the modal does not also close on the
+          // same key press — Escape should close only the innermost overlay.
+          // We deliberately do NOT use `stopImmediatePropagation` because
+          // other document listeners on the same target (e.g. focus-restore
+          // observers in toolbar slimmers) still need to observe the key.
+          keyCode: 'Escape',
+          eventName: 'keydown',
+          capture: true,
+          preventDefault: true,
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ (event) => {
+            if (target.isDropdownShow) {
+              event.stopPropagation();
+              markOverlayHandledEscape(event);
+              target.appenderController.hide();
+            }
+          },
+        },
+        {
+          keyCode: ['ArrowUp', 'ArrowDown'],
+          activeElementInScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // VD-9605: listen on keydown and preventDefault so arrow keys move the
+          // dropdown selection instead of scroll-chaining the underlying page.
+          eventName: 'keydown',
+          preventDefault: true,
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ (event) => target.controlDirectionByKeyboard(event.code),
+        },
+        {
+          keyCode: 'Tab',
+          activeElementOutScope: [
+            target.host,
+            dropdownRef,
+            virtualContainerRef,
+            dropdownContentBoxRef,
+          ],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ () => target.isDropdownShow && target.appenderController.hide(),
+        },
+      ];
+    });
+    /* istanbul ignore next */
+    /**
+     * The below method is e2e-test covered in @see{module:vega-dropdown-keyboard-control-e2e}
+     */
+    this.showDropdownIfHover = async () => {
+      if (this.trigger === 'hover') {
+        this.appenderController.show();
+      }
+    };
+    /* istanbul ignore next */
+    /**
+     * The below method is e2e-test covered in @see{module:vega-dropdown-keyboard-control-e2e}
+     *
+     * @param {string} code - current keyboard code.
+     */
+    this.controlDirectionByKeyboard = (code) => {
+      var _a, _b;
+      const nextItem = this.renderer.getNextActiveItem(code);
+      if (!nextItem) {
+        return;
+      }
+      // VD-9605: focus without letting the browser scroll the page, then scroll the
+      // dropdown list so the newly-focused item stays inside the visible viewport.
+      // Fall back to the host element if the inner <li> is absent (e.g. template mode).
+      const focusTarget = (_b = (_a = nextItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) !== null && _b !== void 0 ? _b : nextItem;
+      focusTarget.focus({ preventScroll: true });
+      nextItem.scrollIntoView({ block: 'nearest' });
+    };
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "trigger", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-scrollable-controller.js

@@ -60,7 +60,7 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
   async scrollToSelectedIndex() {
     this.renderModeController.isSourceRenderMode()
       ? await this.scrollToVirtualIndex()
-      : this.scrollToTemplateIndex();
+      : await this.scrollToTemplateIndex();
   }
   /**
    * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
@@ -79,7 +79,10 @@ export class VegaDropdownScrollableController extends VegaSlimmer {
   /**
    * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
    */
-  scrollToTemplateIndex() {
+  async scrollToTemplateIndex() {
+    if (!this.getSelectedKey())
+      return;
+    await new Promise((resolve) => requestAnimationFrame(() => resolve()));
     const scrolledKey = this.getSelectedKey();
     if (scrolledKey) {
       const dropdownContent = this.renderer.getDropdownContentBoxRef();

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-renderer.js

@@ -87,6 +87,11 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   }
   /* istanbul ignore next */
   getAllItems() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      // VD-9605: In template mode, appendItemsToContentBox() moves the [slot='items'] div
+      // into dropdownContentBoxRef's light DOM. Items are NOT inside dropdownRef.
+      return Array.from(this.dropdownContentBoxRef.querySelectorAll('vega-dropdown-item'));
+    }
     const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
     const itemContainer = virtualScroll
       ? virtualScroll.shadowRoot
@@ -95,6 +100,18 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   }
   /* istanbul ignore next */
   getCurrentActiveItem() {
+    var _a, _b, _c, _d;
+    if (!this.renderModeController.isSourceRenderMode()) {
+      // VD-9605: In template mode, items live in dropdownContentBoxRef's light DOM.
+      // getActiveElement() traversal stops at shadow boundaries; instead find the focused
+      // item by checking which item's shadow root reports an active element (focused <li>).
+      const items = Array.from(this.dropdownContentBoxRef.querySelectorAll('vega-dropdown-item'));
+      // VD-9605: Use the item's own root node so focus is detected correctly even when
+      // vega-dropdown is nested inside another Shadow DOM. getRootNode() returns the
+      // nearest Document or ShadowRoot, which owns the activeElement for that tree.
+      const docActive = (_c = (_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.getRootNode()) === null || _b === void 0 ? void 0 : _b.activeElement) !== null && _c !== void 0 ? _c : null;
+      return ((_d = items.find((item) => { var _a; return ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) != null || item === docActive; })) !== null && _d !== void 0 ? _d : null);
+    }
     return findParent(getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
   }
   /* istanbul ignore next */