@heartlandone/vega 2.77.1 → 2.79.0

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-flex/vega-flex.css

@@ -3710,6 +3710,10 @@
   flex-direction: column;
 }
 
+:host(.v-flex-column) {
+  flex-direction: column;
+}
+
 :host(.v-flex-row-reverse) {
   flex-direction: row-reverse;
 }
@@ -3718,6 +3722,10 @@
   flex-direction: column-reverse;
 }
 
+:host(.v-flex-column-reverse) {
+  flex-direction: column-reverse;
+}
+
 @media (min-width: 320px) {
   :host(.S\:v-flex-row) {
     flex-direction: row;
@@ -3725,12 +3733,18 @@
   :host(.S\:v-flex-col) {
     flex-direction: column;
   }
+  :host(.S\:v-flex-column) {
+    flex-direction: column;
+  }
   :host(.S\:v-flex-row-reverse) {
     flex-direction: row-reverse;
   }
   :host(.S\:v-flex-col-reverse) {
     flex-direction: column-reverse;
   }
+  :host(.S\:v-flex-column-reverse) {
+    flex-direction: column-reverse;
+  }
 }
 @media (min-width: 768px) {
   :host(.M\:v-flex-row) {
@@ -3739,12 +3753,18 @@
   :host(.M\:v-flex-col) {
     flex-direction: column;
   }
+  :host(.M\:v-flex-column) {
+    flex-direction: column;
+  }
   :host(.M\:v-flex-row-reverse) {
     flex-direction: row-reverse;
   }
   :host(.M\:v-flex-col-reverse) {
     flex-direction: column-reverse;
   }
+  :host(.M\:v-flex-column-reverse) {
+    flex-direction: column-reverse;
+  }
 }
 @media (min-width: 1024px) {
   :host(.L\:v-flex-row) {
@@ -3753,12 +3773,18 @@
   :host(.L\:v-flex-col) {
     flex-direction: column;
   }
+  :host(.L\:v-flex-column) {
+    flex-direction: column;
+  }
   :host(.L\:v-flex-row-reverse) {
     flex-direction: row-reverse;
   }
   :host(.L\:v-flex-col-reverse) {
     flex-direction: column-reverse;
   }
+  :host(.L\:v-flex-column-reverse) {
+    flex-direction: column-reverse;
+  }
 }
 @media (min-width: 1440px) {
   :host(.XL\:v-flex-row) {
@@ -3767,12 +3793,18 @@
   :host(.XL\:v-flex-col) {
     flex-direction: column;
   }
+  :host(.XL\:v-flex-column) {
+    flex-direction: column;
+  }
   :host(.XL\:v-flex-row-reverse) {
     flex-direction: row-reverse;
   }
   :host(.XL\:v-flex-col-reverse) {
     flex-direction: column-reverse;
   }
+  :host(.XL\:v-flex-column-reverse) {
+    flex-direction: column-reverse;
+  }
 }
 :host(.v-items-start) {
   align-items: flex-start;

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

@@ -166,7 +166,7 @@ export class VegaFlex {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<FlexDirectionType>",
-        "resolved": "\"col\" | \"col-reverse\" | \"row\" | \"row-reverse\" | { S?: \"row\" | \"col\" | \"row-reverse\" | \"col-reverse\"; M?: \"row\" | \"col\" | \"row-reverse\" | \"col-reverse\"; L?: \"row\" | \"col\" | \"row-reverse\" | \"col-reverse\"; XL?: \"row\" | \"col\" | \"row-reverse\" | \"col-reverse\"; default?: \"row\" | \"col\" | \"row-reverse\" | \"col-reverse\"; }",
+        "resolved": "\"col\" | \"col-reverse\" | \"column\" | \"column-reverse\" | \"row\" | \"row-reverse\" | { S?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; M?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; L?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; XL?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; default?: \"row\" | \"col\" | \"column\" | \"row-reverse\" | \"col-reverse\" | \"column-reverse\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

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);
@@ -83,7 +84,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridColumnsType>",
-        "resolved": "3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
+        "resolved": "3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -113,7 +114,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GridRowsType>",
-        "resolved": "3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 2 | 1 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
+        "resolved": "3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\" | { S?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; M?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; L?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; XL?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; default?: 3 | 4 | 9 | 6 | 2 | 1 | 5 | 7 | 8 | 10 | 11 | 12 | \"1-auto\" | \"2-auto\" | \"3-auto\" | \"4-auto\" | \"5-auto\" | \"6-auto\" | \"7-auto\" | \"8-auto\" | \"9-auto\" | \"10-auto\" | \"11-auto\" | \"12-auto\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -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-container-renderer.js

@@ -49,7 +49,7 @@ export class VegaInputInputContainerRenderer extends VegaSlimmer {
         [`vega-input-size-${this.size}`]: true,
         'vega-input-disabled': this.disabled,
         'compact-input-width': this.isCompactInputWidth,
-      }, onClick: this.onContainerClick, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, onClick: this.onContainerClick, "aria-disabled": this.disabled ? 'true' : undefined, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       this.prefixSlotRenderer.render(),
       this.renderPrefixText(),
       this.inputRenderer.render(),

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/slimmers/renderers/vega-input-prefix-slot-renderer.js

@@ -15,7 +15,7 @@ export class VegaInputPrefixSlotRenderer extends VegaSlimmer {
           'vega-input-prefix': true,
           'vega-input-prefix-slot': hasSlotContent,
         }, part: "prefix-icon-container" },
-        this.prefixIcon && !hasSlotContent ? (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })) : null,
+        this.prefixIcon && !hasSlotContent ? (h("vega-icon", { icon: this.prefixIcon, size: "size-16", "aria-hidden": "true" })) : null,
         h("slot", { name: "prefix-icon" })));
     }
   }