@heartlandone/vega 2.78.0 → 2.79.0

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

@@ -36,6 +36,7 @@ import { VegaCalendarPostOperationDateController } from './slimmers/common/contr
 import { VegaCalendarEventPreviewPopoverRenderer } from './slimmers/common/renderers/vega-calendar-event-preview-popover-renderer';
 import { VegaCalendarEventPreviewPopoverController } from './slimmers/common/controllers/vega-calendar-event-preivew-popover-controller';
 import { getSystemTimezone } from '../../helpers/calendar/utils';
+import { VegaCalendarDayViewFocusSlimmer } from './slimmers/common/controllers/vega-calendar-day-view-focus-slimmer';
 /**
  * @vegaVersion 2.14.0
  */
@@ -46,6 +47,7 @@ export class VegaCalendar {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaCalendarRenderer();
     this.switchPanelRenderer = new VegaCalendarSwitchPanelRenderer();
+    this.dayViewFocusSlimmer = new VegaCalendarDayViewFocusSlimmer();
     this.viewRenderer = new VegaCalendarViewRenderer();
     this.monthViewRenderer = new VegaCalendarMonthViewRenderer();
     this.viewWithTimeRenderer = new VegaCalendarViewWithTimeRenderer();
@@ -757,6 +759,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "switchPanelRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFocusSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "viewRenderer", void 0);

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-open-state-controller.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
@@ -13,6 +13,7 @@ import { CalendarDate } from '../../../../helpers/calendar';
 import { buildDatePickerAnnouncement } from '../../../../helpers/calendar/utils';
 import { getDeepActiveElementInShadow } from '../../../../utils/ui';
 import { VegaInternalTranslation } from '../../../../helpers/translation/internal-translation-controller';
+import { AriaDialogFocusableTrapSlimmer } from '../../../../helpers/slimmers/aria-dialog-focusable-trap-slimmer';
 /** The date picker element appender controller slimmer */
 export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
   /**
@@ -28,6 +29,14 @@ export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSl
       alignment: ['start', 'end'],
       isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
     }), () => new ClickOutsideOnlyToDismissStrategy(), 'isCalendarShow');
+    this.ariaDialogFocusableTrapSlimmer = createDynamicSlimmer(VegaDatePickerCalendarOpenStateController, AriaDialogFocusableTrapSlimmer, [], [{ mapFrom: 'show', mapTo: 'show' }], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        triggerEl: () => this.vegaDatePickerRenderer.getDatePickerContainer(),
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        dialogEl: () => this.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
+      },
+    ]);
     this.clearCalendarStateTaskQueue = new SynchronizeTaskQueue();
   }
   /**
@@ -197,6 +206,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendarOpenStateController.prototype, "ariaDialogFocusableTrapSlimmer", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -10,7 +10,12 @@ import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-co
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClear, VegaClose, VegaOpen, VegaMonthYearChange, VegaSelectionChange, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { tryGetDocument } from '../../../../utils/try-get-document';
+import { generateUUID } from '../../../../utils/misc';
 export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.calendarId = generateUUID();
+  }
   componentDidLoad() {
     this.appendCalendarToBodyIfMobile();
   }
@@ -20,6 +25,9 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   getCalendarRef() {
     return this.calendarRef;
   }
+  getCalendarId() {
+    return this.calendarId;
+  }
   getMobileModalRef() {
     return this.mobileModalRef;
   }
@@ -38,12 +46,21 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       } }, h("div", { slot: "modal-content" }, this.renderCalendar())));
   }
   renderCalendar() {
-    return (h("vega-box", { padding: {
+    const label = this.label ? `${this.label}, ` : '';
+    const picker = `${this.translationSlimmer.t('date picker')}`;
+    const ariaAttributes = this.isMobileDevice
+      ? {}
+      : {
+        'role': 'dialog',
+        'aria-modal': 'true',
+        'aria-label': `${label}${picker}`,
+      };
+    return (h("vega-box", Object.assign({}, ariaAttributes, { id: this.calendarId, padding: {
         default: 'size-12',
         S: 'size-32',
       }, corners: "rounded-12", backgroundColor: "bg-primary", shadow: "shadow-dropdown-menu", border: "border-input-field", ref: (ref) => {
         this.calendarContentBoxRef = ref;
-      }, class: "date-picker-content-box" },
+      }, class: "date-picker-content-box" }),
       h("vega-box", { width: this.getDefaultCalendarDimension('width'), height: this.getDefaultCalendarDimension('height') },
         h("vega-date-picker-calendar", { selection: this.value, mode: this.mode, minDate: this.minDate, maxDate: this.maxDate, clearButton: this.clearButton, format: this.format, staticHeight: this.dropdownConfig.staticHeight !== false, showYearMonthDropdowns: this.showYearMonthDropdowns, timezone: this.timezone, yearMonthDropdownProps: {
             isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
@@ -154,9 +171,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "allowRepick", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "label", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerValueController", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-input-renderer-base.abstract.js

@@ -21,7 +21,10 @@ export class VegaDatePickerInputRendererBase extends VegaSlimmer {
       else {
         this.vegaDatePickerValueController.setValue('');
       }
-      await this.calendarOpenStateController.hideCalendar();
+      if (this.isCalendarShow) {
+        await this.calendarOpenStateController.hideCalendar();
+      }
+      this.focusInput();
     };
     this.isClearIconVisible = () => {
       if (this.mode === 'range') {
@@ -51,6 +54,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "isCalendarShow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "vegaDatePickerValueController", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-range-input-renderer.js

@@ -13,17 +13,21 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
   constructor() {
     super(...arguments);
     this.render = () => {
+      const label = this.label ? `, ${this.label}` : '';
+      const picker = `, ${this.translationSlimmer.t('date picker')}`;
+      const startAriaLabel = `${this.translationSlimmer.t('Start Date')}${label}${picker}`;
+      const endAriaLabel = `${this.translationSlimmer.t('End Date')}${label}${picker}`;
       return (h(Fragment, null,
         h("div", { class: "date-picker-input" },
           this.vegaDatePickerRenderer.renderInputPrefix(),
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled, 
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled, role: "combobox", "aria-label": startAriaLabel, "aria-haspopup": "dialog", "aria-expanded": `${this.isCalendarShow}`, "aria-controls": this.vegaDatePickerCalendarRenderer.getCalendarId(), 
             // eslint-disable-next-line react/jsx-no-bind
             onClick: async () => await this.onInputClicked('start') })),
         h("span", { class: {
             'range-input-divider': true,
           } }),
         h("div", { class: "date-picker-input" },
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled, 
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled, role: "combobox", "aria-label": endAriaLabel, "aria-haspopup": "dialog", "aria-expanded": `${this.isCalendarShow}`, "aria-controls": this.vegaDatePickerCalendarRenderer.getCalendarId(), 
             // eslint-disable-next-line react/jsx-no-bind
             onClick: async () => await this.onInputClicked('end') }),
           this.renderClearIcon())));
@@ -89,6 +93,9 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
   getEndDateInputRef() {
     return this.endDateInputRef;
   }
+  focusInput() {
+    this.startDateInputRef.focus();
+  }
   async onInputClicked(type) {
     await this.calendarOpenStateController.showCalendar();
     await this.vegaDatePickerCalendarRenderer.triggerRepick(type);
@@ -97,6 +104,12 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "isCalendarShow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerFormatController", void 0);

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

@@ -15,7 +15,7 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderInputPrefix = () => {
-      return (h("div", { class: "vega-input-prefix" },
+      return (h("div", { class: "vega-input-prefix", "aria-hidden": "true" },
         h("vega-icon", { icon: VegaInternalIconManager.getIconKey('calendar'), color: "text-secondary", 
           // eslint-disable-next-line react/jsx-no-bind
           onClick: async () => {

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-single-input-renderer.js

@@ -15,7 +15,9 @@ export class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRender
     this.render = () => {
       return (h("div", { class: "date-picker-input" },
         this.vegaDatePickerRenderer.renderInputPrefix(),
-        h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, disabled: this.disabled, 
+        h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, disabled: this.disabled, role: "combobox", "aria-label": this.label
+            ? `${this.label}, ${this.translationSlimmer.t('date picker')}`
+            : this.translationSlimmer.t('date picker'), "aria-haspopup": "dialog", "aria-expanded": `${this.isCalendarShow}`, "aria-controls": this.vegaDatePickerCalendarRenderer.getCalendarId(), 
           /* eslint-disable-next-line react/jsx-no-bind */
           onClick: () => this.calendarOpenStateController.showCalendar() }),
         this.renderClearIcon()));
@@ -50,6 +52,9 @@ export class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRender
   getSingleDateInputRef() {
     return this.singleDateInputRef;
   }
+  focusInput() {
+    this.singleDateInputRef.focus();
+  }
 }
 __decorate([
   MapToComponentField()
@@ -57,6 +62,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "format", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "isCalendarShow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
@@ -66,3 +77,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "calendarOpenStateController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-grid/vega-grid.css

@@ -1808,4 +1808,76 @@
   :host(.XL\:v-grid-cols-12-auto) {
     grid-template-columns: repeat(1, auto);
   }
+}
+:host(.v-justify-items-start) {
+  justify-items: start;
+}
+
+:host(.v-justify-items-center) {
+  justify-items: center;
+}
+
+:host(.v-justify-items-end) {
+  justify-items: end;
+}
+
+:host(.v-justify-items-stretch) {
+  justify-items: stretch;
+}
+
+@media (min-width: 320px) {
+  :host(.S\:v-justify-items-start) {
+    justify-items: start;
+  }
+  :host(.S\:v-justify-items-center) {
+    justify-items: center;
+  }
+  :host(.S\:v-justify-items-end) {
+    justify-items: end;
+  }
+  :host(.S\:v-justify-items-stretch) {
+    justify-items: stretch;
+  }
+}
+@media (min-width: 768px) {
+  :host(.M\:v-justify-items-start) {
+    justify-items: start;
+  }
+  :host(.M\:v-justify-items-center) {
+    justify-items: center;
+  }
+  :host(.M\:v-justify-items-end) {
+    justify-items: end;
+  }
+  :host(.M\:v-justify-items-stretch) {
+    justify-items: stretch;
+  }
+}
+@media (min-width: 1024px) {
+  :host(.L\:v-justify-items-start) {
+    justify-items: start;
+  }
+  :host(.L\:v-justify-items-center) {
+    justify-items: center;
+  }
+  :host(.L\:v-justify-items-end) {
+    justify-items: end;
+  }
+  :host(.L\:v-justify-items-stretch) {
+    justify-items: stretch;
+  }
+}
+@media (min-width: 1440px) {
+  :host(.XL\:v-justify-items-start) {
+    justify-items: start;
+  }
+  :host(.XL\:v-justify-items-center) {
+    justify-items: center;
+  }
+  :host(.XL\:v-justify-items-end) {
+    justify-items: end;
+  }
+  :host(.XL\:v-justify-items-stretch) {
+    justify-items: stretch;
+  }
 }

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

@@ -65,6 +65,7 @@ export class VegaGrid {
       formatAndValidResponsiveToken(this.column, 'gridColumn'),
       formatAndValidResponsiveToken(this.row, 'gridRow'),
       formatAndValidResponsiveToken(this.gap, 'gap'),
+      formatAndValidResponsiveToken(this.justifyItems, 'gridJustifyItems'),
     ];
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString(classNames) },
       h("slot", null)), this.host);
@@ -166,6 +167,35 @@ export class VegaGrid {
       },
       "attribute": "gap",
       "reflect": false
+    },
+    "justifyItems": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<GridJustifyItemsType>",
+        "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\" | { S?: \"center\" | \"start\" | \"end\" | \"stretch\"; M?: \"center\" | \"start\" | \"end\" | \"stretch\"; L?: \"center\" | \"start\" | \"end\" | \"stretch\"; XL?: \"center\" | \"start\" | \"end\" | \"stretch\"; default?: \"center\" | \"start\" | \"end\" | \"stretch\"; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "GridJustifyItemsType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.79.0"
+          }],
+        "text": "Specifies how grid items are aligned along the inline (row) axis.\n\nIt can be provided as one of: `start`, `center`, `end`, or `stretch`.\n\nAlternatively, you can use a responsive map to define different values for\n   various breakpoints. The keys in the map should represent the breakpoints,\n   such as `default` or `L`."
+      },
+      "attribute": "justify-items",
+      "reflect": false
     }
   }; }
   static get elementRef() { return "host"; }

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

@@ -72,7 +72,7 @@ export class VegaInputInputRenderer extends VegaSlimmer {
   }
   render() {
     return (h("div", { class: "vega-input-input" },
-      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, minLength: this.minLength, maxLength: this.maxLength, 
+      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, readOnly: this.readOnly, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, minLength: this.minLength, maxLength: this.maxLength, 
         /* eslint-disable-next-line react/jsx-no-bind */
         onBlur: (e) => this.handleInputBlur(e), 
         /* eslint-disable-next-line react/jsx-no-bind */
@@ -137,6 +137,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "inputmode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "readOnly", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "placeholder", void 0);

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

@@ -224,6 +224,16 @@ export class VegaInput {
      * @vegaVersion 1.0.5
      */
     this.autocomplete = 'off';
+    /**
+     * Sets the input field as read-only, preventing direct keyboard input.
+     *
+     * When set to `true`, prevents manual keyboard text entry in the input field on
+     *    all platforms. On touch devices, this typically suppresses the virtual keyboard.
+     *
+     * @default false
+     * @vegaVersion 2.79.0
+     */
+    this.readOnly = false;
     /**
      * When `true`, enforces email format validation on the input value.
      *
@@ -751,6 +761,30 @@ export class VegaInput {
       "attribute": "inputmode",
       "reflect": false
     },
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.79.0"
+          }],
+        "text": "Sets the input field as read-only, preventing direct keyboard input.\n\nWhen set to `true`, prevents manual keyboard text entry in the input field on\n   all platforms. On touch devices, this typically suppresses the virtual keyboard."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "prefixIcon": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-open-state-controller.js

@@ -4,15 +4,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
 import { findParent } from '../../../../utils/ui';
 import { VegaModalOpenState } from '../models/vega-modal-open-state';
+import { AriaDialogFocusableTrapSlimmer } from '../../../../helpers/slimmers/aria-dialog-focusable-trap-slimmer';
 /**
  * Modal open state controller
  */
 export class VegaModalOpenStateController extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.ariaDialogFocusableTrapSlimmer = createDynamicSlimmer(VegaModalOpenStateController, AriaDialogFocusableTrapSlimmer, [], [{ mapFrom: 'ariaDialogToggle', mapTo: 'toggle' }], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        triggerEl: () => null,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        dialogEl: () => this.renderer.getModalContainerRef(),
+      },
+    ]);
     /*
      * The below method is e2e-test covered in
      * @see{module:vega-modal-toggle-interactive-e2e}
@@ -45,6 +54,12 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       this.toggle();
     }
   }
+  /**
+   * Component lifecycle - [componentDidRender]
+   */
+  componentDidRender() {
+    methodPlaceholder();
+  }
   /**
    * Toggle modal while openState changed.
    *
@@ -164,6 +179,14 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       this.changeOpenState(false, trigger);
     }
   }
+  /**
+   * Toggles the aria-dialog attribute based on the open state.
+   *
+   * @param {boolean} isOpen - Indicates whether the modal is open.
+   */
+  ariaDialogToggle(isOpen) {
+    methodPlaceholder(isOpen);
+  }
   /**
    * Updates the internal open state snapshot so watchers can react to the new value.
    *
@@ -196,6 +219,7 @@ export class VegaModalOpenStateController extends VegaSlimmer {
     this.layoutController.setModalWidth();
     this.emitEvent();
     this.setModalVisibility();
+    this.ariaDialogToggle(this.openState.isOpen);
   }
   /*
    * The below method is e2e-test covered in
@@ -306,12 +330,21 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalOpenStateController.prototype, "zIndexController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModalOpenStateController.prototype, "ariaDialogFocusableTrapSlimmer", void 0);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaModalOpenStateController.prototype, "disconnectedCallback", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaModalOpenStateController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaModalOpenStateController.prototype, "componentDidRender", null);
 __decorate([
   MapToComponentMethod('watchOpenState')
 ], VegaModalOpenStateController.prototype, "watchOpenState", null);

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

@@ -6,12 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { Fragment, h, Host } from '@stencil/core';
+import { generateUUID } from '../../../../utils/misc';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
 /**
  * Modal renderer
  */
 export class VegaModalRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.titleId = generateUUID();
+  }
   getModalContentRef() {
     return this.modalContent;
   }
@@ -26,7 +31,7 @@ export class VegaModalRenderer extends VegaSlimmer {
         'align-center': this.deprecatedPropertySlimmer.getValue() && this.openState.isOpen,
         'animation': this.animation,
       } },
-      h("div", { class: "modal-dialog" }, this.renderContainer())));
+      h("div", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, tabIndex: -1 }, this.renderContainer())));
   }
   renderContainer() {
     const padding = formatAndValidResponsiveToken(this.padding, 'padding');
@@ -42,7 +47,7 @@ export class VegaModalRenderer extends VegaSlimmer {
         'vega-modal-header-with-icon': this.showCloseButton,
         'vega-modal-header-with-content-scroll': this.isContentScrollable(),
         [padding]: true,
-      } },
+      }, id: this.titleId },
       this.renderTitle(),
       this.showCloseButton && this.renderCloseBtn()));
   }

package/dist/collection/components/vega-popover/slimmers/controllers/vega-popover-appender-controller.js

@@ -48,6 +48,7 @@ export class VegaPopoverAppenderController extends ElementAppenderSlimmer {
   }
   /**
    * Register a remote method to update the target element of the popover.
+   * TODO: refactor to using Change Manager
    */
   registerRemoteMethod() {
     remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalPopoverUpdateTarget), (target) => {

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.js

@@ -13,6 +13,8 @@ import { VegaRichTextContentStateController } from './slimmers/controllers/vega-
 import { findParent } from '../../utils/ui';
 import { waitForComponentDidRender } from '../../helpers/common/wait-for-component-did-render';
 import { RTEExtensionStylesController } from './slimmers/controllers/vega-rich-text-content-extensions-styles-controller';
+import { DarkModeStateControllerSlimmer } from '../../helpers/slimmers/dark-mode-state-controller-slimmer';
+import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 /**
  * @vegaVersion 2.34.0
  */
@@ -23,6 +25,7 @@ export class VegaRichTextContent {
     this.vegaRichTextContentRenderer = new VegaRichTextContentRenderer();
     this.vegaRichTextContentStateController = new VegaRichTextContentStateController();
     this.vegaRichTextContentExtensionsStylesController = new RTEExtensionStylesController();
+    this.darkModeStateControllerSlimmer = new DarkModeStateControllerSlimmer();
     /**
      * Specifies whether the rich text content is editable.
      *
@@ -33,6 +36,7 @@ export class VegaRichTextContent {
      * Holds the custom styles generated by extensions.
      */
     this.extensionStyles = '';
+    this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
     /**
      * Defines the configuration for rich text content extensions.
      * It enables support for custom nodes, ensuring that extended content is rendered correctly.
@@ -122,7 +126,8 @@ export class VegaRichTextContent {
   static get states() { return {
     "placeholder": {},
     "contentEditable": {},
-    "extensionStyles": {}
+    "extensionStyles": {},
+    "isInDarkMode": {}
   }; }
   static get methods() { return {
     "vegaFocus": {
@@ -176,3 +181,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextContent.prototype, "vegaRichTextContentExtensionsStylesController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextContent.prototype, "darkModeStateControllerSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/action-handle-strategy.abstract.js

@@ -1,6 +1,7 @@
 import RTEDTOClassManager from '../../../../helpers/rte-manager/dto-class-manager';
 import { LogUtility } from '../../../../utils/log';
 import { generateUUID } from '../../../../utils/misc';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 /**
@@ -92,6 +93,15 @@ export class ActionHandleStrategy {
       return this.isCaretPositionAtTextBlockEnd(block, node, offset);
     }
   }
+  /**
+   * Get the registered DOM element by the RTE entity.
+   *
+   * @param {RTEBlock | RTENode} instance - The RTE block or node instance.
+   * @returns {Nullable<HTMLElement>} The registered DOM element.
+   */
+  getDOMByEntity(instance) {
+    return stateEntityRenderingRegistry.getDOMByEntity(instance);
+  }
   /**
    * Checks if the caret position is at the end of a specified RTETextNode.
    *