@heartlandone/vega 2.78.0 → 2.80.0

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

@@ -60,7 +60,7 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
    */
   renderBackgroundModeEvent() {
     const disabled = this.calendarEvent.disabled;
-    return (h("div", { role: "button", tabIndex: 0, class: {
+    return (h("div", { class: {
         'slot-container': this.slotMode,
         'background-color-mode': true,
         'event-bg-color': !disabled,
@@ -83,13 +83,13 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
       [variantText]: true,
     };
     if (isMonthEvent) {
-      return (h("div", { role: "button", tabIndex: 0, class: classMap, ref: (node) => (this.slotContainerRef = node) },
+      return (h("div", { class: classMap, ref: (node) => (this.slotContainerRef = node) },
         !this.slotMode && this.renderEventStatus(),
         this.slotMode ? this.getSlotElement() : this.defaultNormalMonthEventContentRender()));
     }
     else {
       const eventDuration = this.calendarEvent.getEventMinutes();
-      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0, ref: (node) => (this.slotContainerRef = node) },
+      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), ref: (node) => (this.slotContainerRef = node) },
         !this.slotMode && this.renderEventStatus(),
         h("div", { class: "cover-block" }),
         this.slotMode
@@ -138,7 +138,7 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
           'title-word-wrap': eventDuration > 30,
         }, ref: (node) => (this.eventTitleContainerRef = node) }, title),
       h("div", { class: "event-time" },
-        h("vega-icon", { size: "size-12", icon: VegaInternalIconManager.getIconKey('clock-three') }),
+        h("vega-icon", { size: "size-12", "aria-hidden": "true", icon: VegaInternalIconManager.getIconKey('clock-three') }),
         h("span", null, `${startTime.toString(this.timeFormat)} - ${endTime.toString(this.timeFormat)}`))));
   }
   /**

package/dist/collection/components/vega-calendar/vega-calendar-event/vega-calendar-event.css

@@ -11,6 +11,7 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
+  outline: none;
 }
 :host .background-color-mode {
   border-radius: 2px;
@@ -55,10 +56,6 @@
   padding-left: 8px;
   padding-right: 8px;
 }
-:host .background-color-mode:focus {
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 0px;
-}
 :host .event-container {
   display: block;
   width: 100%;
@@ -163,10 +160,6 @@
 :host(.month-event) .event-container:active {
   background-color: rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1));
 }
-:host(.month-event) .event-container:focus {
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 0px;
-}
 
 :host(.day-event) .event-container {
   position: relative;
@@ -340,10 +333,6 @@
 :host(.day-event) .event-container.disabled .event-status {
   background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
 }
-:host(.day-event) .event-container:focus {
-  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 0px;
-}
 :host(.day-event) .slot-container {
   min-height: 16px;
 }
@@ -366,6 +355,20 @@
   line-height: 24px;
 }
 
+:host(:focus) .background-color-mode,
+:host(:focus-visible) .background-color-mode {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+}
+
+:host(.month-event:focus) .event-container,
+:host(.month-event:focus-visible) .event-container,
+:host(.day-event:focus) .event-container,
+:host(.day-event:focus-visible) .event-container {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+}
+
 .stripe {
   background-image: linear-gradient(-45deg, transparent 25%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 25% 50%, transparent 50% 75%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 75% 100%);
 }

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

@@ -40,7 +40,7 @@ export class VegaCalendarEvent {
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(h(Host, null, this.calendarEvent ? this.renderer.render() : null), this.host);
+    return sanitizeVegaComponent(h(Host, { role: this.calendarEvent ? 'button' : undefined, tabindex: this.calendarEvent ? 0 : undefined }, this.calendarEvent ? this.renderer.render() : null), this.host);
   }
   static get is() { return "vega-calendar-event"; }
   static get encapsulation() { return "shadow"; }

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

@@ -14,11 +14,22 @@ import clockIcon from '../../assets/clock';
 import { vegaNonceManager } from '../../../../../helpers/csp/vega-nonce-manager';
 import { findParent } from '../../../../../utils/ui';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalCalendarEventPreviewHide } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalCalendarEventPreviewHide, VegaInternalDialogContentReady, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
 export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
   componentWillLoad() {
     this.calendarRef = findParent(this.host, 'vega-calendar');
   }
+  /**
+   * Notifies the calendar host via ChangeManager that the event preview content has been rendered
+   * and is ready for focus management (e.g., focusing the close button for VoiceOver).
+   */
+  componentDidRender() {
+    const contentBox = findParent(this.host, 'vega-popover-content-box');
+    if (this.currentEvent && contentBox && !contentBox.classList.contains('vega-force-hidden')) {
+      ChangeManager.notify(DomNodeSubjectFactory.getSubject(contentBox, VegaInternalDialogContentReady), {});
+    }
+  }
   render() {
     return (this.currentEvent && (h("vega-box", { class: "event-preview" },
       this.injectBackgroundColorStyle(),
@@ -31,7 +42,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
   }
   renderActions() {
     return (h("vega-flex", { justifyContent: "end", class: "preview-actions" },
-      h("vega-button-circle", { icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
+      h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Close event preview detail'), icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
         /* eslint-disable-next-line react/jsx-no-bind */
         onVegaClick: this.onHidePopover.bind(this) })));
   }
@@ -40,7 +51,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
     return (h(Fragment, null,
       h("vega-flex", { alignItems: "start", gap: "size-16" }, this.renderEventTitle()),
       h("vega-flex", { alignItems: "start", gap: "size-12" },
-        h("vega-icon", { icon: VegaInternalIconManager.getIconKey('clock'), color: "text-secondary" }),
+        h("vega-icon", { "aria-hidden": "true", icon: VegaInternalIconManager.getIconKey('clock'), color: "text-secondary" }),
         h("vega-flex", { direction: "col", gap: "size-4" },
           h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateDateTimeString(this.previewPayload.targetCalendarViewDate, this.previewPayload.timeFormat)),
           currentEvent.isRepeatEvent && (h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateRepeatString()))))));
@@ -87,6 +98,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewDetailRenderer.prototype, "currentEvent", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventPreviewDetailRenderer.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaCalendarEventPreviewDetailRenderer.prototype, "componentDidRender", null);

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

@@ -656,7 +656,7 @@
   padding-bottom: 2px;
   padding-top: 3px;
 }
-.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus) {
+.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow:not(:focus)::part(event-container) {
   outline: 2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1));
 }
 .calendar-view-container .day-event-col .time-event-block:focus-within {

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-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-month-item-renderer.js

@@ -30,9 +30,8 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       period.current.year)));
   }
   renderWeek(periodView) {
-    return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
-      const fullName = this.translationSlimmer.t(`${weekDay}-full`);
-      return (h("div", { key: weekDay, role: "columnheader", "aria-label": fullName }, this.translationSlimmer.t(`${weekDay}-short`)));
+    return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1, "aria-hidden": "true" }, periodView.weekdays.map((weekDay) => {
+      return (h("div", { key: weekDay }, this.translationSlimmer.t(`${weekDay}-short`)));
     })));
   }
   renderDays(periodView, period) {
@@ -58,6 +57,7 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
     const isDisabled = this.isDateDisabled(day.toDate());
     const isInRange = day.isAfter(currentRangeDates[0]) && day.isBefore(currentRangeDates[1]);
     const canInterActive = isCurrentMonth && !isLockedDate && !isDisabled;
+    const weekDayShortName = this.translationSlimmer.t(`${day.getWeekDayShortName()}-full`);
     return (h("div", { key: `${day.month}-${day.date}`, class: isCurrentMonth && {
         'day-item': true,
         'is-today': day.equal(this.today),
@@ -70,8 +70,8 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: () => canInterActive && this.selectionController.onDayClick(day), 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": `${day.getMonthName()} ${day.date} ${day.year}`, "aria-hidden": isCurrentMonth ? undefined : 'true', "aria-disabled": isLockedDate || isDisabled ? 'true' : undefined, tabIndex: canInterActive ? 0 : -1 },
-      h("div", { class: "day-content" }, isCurrentMonth ? day.date : '')));
+      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": `${day.getMonthName()} ${day.date} ${day.year} ${weekDayShortName}`, "aria-hidden": isCurrentMonth ? undefined : 'true', "aria-disabled": isLockedDate || isDisabled ? 'true' : undefined, tabIndex: canInterActive ? 0 : -1 },
+      h("div", { class: "day-content", "aria-hidden": "true" }, isCurrentMonth ? day.date : '')));
   }
   getCurrentRangeDates() {
     const startDate = this.calendarSelection.startDate;

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"; }