@heartlandone/vega 2.79.0 → 2.81.0

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

@@ -22,6 +22,7 @@ import { VegaDatePickerCalendarAllowRepickController } from './slimmers/controll
 import { DeviceType } from '../../../types/ui.type';
 import { getDeviceType } from '../../../utils/ui';
 import { VegaDatePickerCalendarHeaderRenderer } from './slimmers/renderers/vega-date-picker-calendar-header-render';
+import { VegaDatePickerCalendarIsDualMonthsController } from './slimmers/controllers/vega-date-picker-calendar-is-dual-months-controller';
 /**
  * @vegaVersion 2.0.0
  */
@@ -29,6 +30,7 @@ export class VegaDatePickerCalendar {
   constructor() {
     this.globalSlimmers = {};
     this.renderer = new VegaDatePickerCalendarRenderer();
+    this.isDualMonthsController = new VegaDatePickerCalendarIsDualMonthsController();
     this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
     this.headerRenderer = new VegaDatePickerCalendarHeaderRenderer();
     this.translationSlimmer = new TranslationSlimmer();
@@ -130,6 +132,9 @@ export class VegaDatePickerCalendar {
   watchMinCalendarDate() {
     methodPlaceholder();
   }
+  watchMode() {
+    methodPlaceholder();
+  }
   watchSelection() {
     methodPlaceholder();
   }
@@ -142,6 +147,9 @@ export class VegaDatePickerCalendar {
   watchTimezone() {
     methodPlaceholder();
   }
+  watchDualMonths() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to reset calendar to its initial state,
    * 	it include reset to current value and reset the current period.
@@ -162,7 +170,8 @@ export class VegaDatePickerCalendar {
     return sanitizeVegaComponent(h(Host, { class: {
         [this.size]: true,
         [this.mode]: true,
-        mobile: this.isMobileDevice,
+        'mobile': this.isMobileDevice,
+        'dual-months': this.isDualMonths,
       } }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-date-picker-calendar"; }
@@ -424,6 +433,26 @@ export class VegaDatePickerCalendar {
       },
       "defaultValue": "{}"
     },
+    "dualMonths": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Determines whether to show two months in date picker calendar.\n  It will be ignored when the device is mobile, that means the calendar will always show single month on mobile device regardless of the value of this prop."
+      },
+      "attribute": "dual-months",
+      "reflect": false
+    },
     "isDateDisabled": {
       "type": "unknown",
       "mutable": false,
@@ -486,7 +515,8 @@ export class VegaDatePickerCalendar {
     "hoverDate": {},
     "calendarSelection": {},
     "maxCalendarDate": {},
-    "minCalendarDate": {}
+    "minCalendarDate": {},
+    "isDualMonths": {}
   }; }
   static get events() { return [{
       "method": "vegaClear",
@@ -676,6 +706,9 @@ export class VegaDatePickerCalendar {
     }, {
       "propName": "minCalendarDate",
       "methodName": "watchMinCalendarDate"
+    }, {
+      "propName": "mode",
+      "methodName": "watchMode"
     }, {
       "propName": "selection",
       "methodName": "watchSelection"
@@ -688,6 +721,9 @@ export class VegaDatePickerCalendar {
     }, {
       "propName": "timezone",
       "methodName": "watchTimezone"
+    }, {
+      "propName": "dualMonths",
+      "methodName": "watchDualMonths"
     }]; }
 }
 __decorate([
@@ -696,6 +732,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "isDualMonthsController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);

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

@@ -289,7 +289,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
-        "resolved": "{ size?: ResponsiveType<SizeType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; handleClose?: () => boolean; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; margin?: ResponsiveType<MarginType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; handleClose?: () => boolean; height?: ResponsiveType<string | number>; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
         "references": {
           "Partial": {
             "location": "global"

package/dist/collection/components/vega-divider/slimmers/controllers/vega-divider-size-controller.js

@@ -48,7 +48,7 @@ export class VegaDividerSizeController extends VegaSlimmer {
       : ['top', 'bottom'].includes(direction)
         ? margin.y || margin[direction]
         : margin.x || margin[direction];
-    return directionMargin ? Spacing[directionMargin] : 0;
+    return directionMargin && directionMargin !== 'auto' ? Spacing[directionMargin] : 0;
   }
 }
 __decorate([

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

@@ -591,6 +591,43 @@
   margin-left: 2px;
 }
 
+:host(.v-m-auto),
+.v-m-auto {
+  margin: auto;
+}
+
+:host(.v-mx-auto),
+.v-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:host(.v-my-auto),
+.v-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+:host(.v-mt-auto),
+.v-mt-auto {
+  margin-top: auto;
+}
+
+:host(.v-mb-auto),
+.v-mb-auto {
+  margin-bottom: auto;
+}
+
+:host(.v-mr-auto),
+.v-mr-auto {
+  margin-right: auto;
+}
+
+:host(.v-ml-auto),
+.v-ml-auto {
+  margin-left: auto;
+}
+
 @media (min-width: 320px) {
   :host(.S\:v-m-0),
   .S\:v-m-0 {
@@ -1072,6 +1109,36 @@
   .S\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.S\:v-m-auto),
+  .S\:v-m-auto {
+    margin: auto;
+  }
+  :host(.S\:v-mx-auto),
+  .S\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.S\:v-my-auto),
+  .S\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mt-auto),
+  .S\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.S\:v-mb-auto),
+  .S\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mr-auto),
+  .S\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.S\:v-ml-auto),
+  .S\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 768px) {
   :host(.M\:v-m-0),
@@ -1554,6 +1621,36 @@
   .M\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.M\:v-m-auto),
+  .M\:v-m-auto {
+    margin: auto;
+  }
+  :host(.M\:v-mx-auto),
+  .M\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.M\:v-my-auto),
+  .M\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mt-auto),
+  .M\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.M\:v-mb-auto),
+  .M\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mr-auto),
+  .M\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.M\:v-ml-auto),
+  .M\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1024px) {
   :host(.L\:v-m-0),
@@ -2036,6 +2133,36 @@
   .L\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.L\:v-m-auto),
+  .L\:v-m-auto {
+    margin: auto;
+  }
+  :host(.L\:v-mx-auto),
+  .L\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.L\:v-my-auto),
+  .L\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mt-auto),
+  .L\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.L\:v-mb-auto),
+  .L\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mr-auto),
+  .L\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.L\:v-ml-auto),
+  .L\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1440px) {
   :host(.XL\:v-m-0),
@@ -2518,6 +2645,36 @@
   .XL\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.XL\:v-m-auto),
+  .XL\:v-m-auto {
+    margin: auto;
+  }
+  :host(.XL\:v-mx-auto),
+  .XL\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.XL\:v-my-auto),
+  .XL\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mt-auto),
+  .XL\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.XL\:v-mb-auto),
+  .XL\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mr-auto),
+  .XL\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.XL\:v-ml-auto),
+  .XL\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 /**

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

@@ -125,7 +125,7 @@ export class VegaDivider {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<MarginType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

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

@@ -4,9 +4,10 @@ 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, methodPlaceholder } from 'vega-slimmer/core';
+import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { getDeepActiveElementInShadow } from '../../../../utils/ui';
+import { AriaDialogFocusableTrapSlimmer } from '../../../../helpers/slimmers/aria-dialog-focusable-trap-slimmer';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -18,6 +19,18 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    */
   constructor() {
     super(() => this.generateShowConfigFactory(), () => this.trigger);
+    this.ariaDialogFocusableTrapSlimmer = createDynamicSlimmer(VegaDropdownAppenderController, AriaDialogFocusableTrapSlimmer, [], [
+      { mapFrom: 'show', mapTo: 'show' },
+      { mapFrom: 'hide', mapTo: 'hide' },
+      { mapFrom: 'ariaComponentDidLoad', mapTo: 'componentDidLoad' },
+    ], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        triggerEl: () => this.host,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        dialogEl: () => this.renderer.getDropdownContentBoxRef(),
+      },
+    ]);
     this.lastFocusedElement = null;
   }
   /**
@@ -32,6 +45,20 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
   disconnectedCallback() {
     methodPlaceholder();
   }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaPopover.componentDidRender}
+   */
+  componentDidRender() {
+    methodPlaceholder();
+  }
+  /**
+   * This controller extends `ElementAppenderSlimmer`, which already uses `componentDidLoad`.
+   * To avoid overriding the parent lifecycle mapping, we expose `ariaComponentDidLoad`
+   * here and map it to `componentDidLoad` for the ARIA slimmer.
+   */
+  ariaComponentDidLoad() {
+    methodPlaceholder();
+  }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
    * based on the result.
@@ -162,12 +189,21 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdownAppenderController.prototype, "ariaDialogFocusableTrapSlimmer", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownAppenderController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaDropdownAppenderController.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaDropdownAppenderController.prototype, "ariaComponentDidLoad", null);
 __decorate([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);

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

@@ -57,7 +57,7 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   }
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
-    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, "data-vega-no-event-prevent": eventPreventFlag },
+    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, role: "dialog", "aria-modal": "true", "aria-label": "Dropdown menu list", "data-vega-no-event-prevent": eventPreventFlag },
       h("div", { ref: (e) => (this.dropdownRef = e), class: "vega-dropdown" },
         h("div", { class: "vega-dropdown-actions" },
           this.resetRenderer.render(),
@@ -133,6 +133,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "isDropdownShow", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);

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

@@ -591,6 +591,43 @@
   margin-left: 2px;
 }
 
+:host(.v-m-auto),
+.v-m-auto {
+  margin: auto;
+}
+
+:host(.v-mx-auto),
+.v-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:host(.v-my-auto),
+.v-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+:host(.v-mt-auto),
+.v-mt-auto {
+  margin-top: auto;
+}
+
+:host(.v-mb-auto),
+.v-mb-auto {
+  margin-bottom: auto;
+}
+
+:host(.v-mr-auto),
+.v-mr-auto {
+  margin-right: auto;
+}
+
+:host(.v-ml-auto),
+.v-ml-auto {
+  margin-left: auto;
+}
+
 @media (min-width: 320px) {
   :host(.S\:v-m-0),
   .S\:v-m-0 {
@@ -1072,6 +1109,36 @@
   .S\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.S\:v-m-auto),
+  .S\:v-m-auto {
+    margin: auto;
+  }
+  :host(.S\:v-mx-auto),
+  .S\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.S\:v-my-auto),
+  .S\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mt-auto),
+  .S\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.S\:v-mb-auto),
+  .S\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mr-auto),
+  .S\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.S\:v-ml-auto),
+  .S\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 768px) {
   :host(.M\:v-m-0),
@@ -1554,6 +1621,36 @@
   .M\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.M\:v-m-auto),
+  .M\:v-m-auto {
+    margin: auto;
+  }
+  :host(.M\:v-mx-auto),
+  .M\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.M\:v-my-auto),
+  .M\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mt-auto),
+  .M\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.M\:v-mb-auto),
+  .M\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mr-auto),
+  .M\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.M\:v-ml-auto),
+  .M\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1024px) {
   :host(.L\:v-m-0),
@@ -2036,6 +2133,36 @@
   .L\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.L\:v-m-auto),
+  .L\:v-m-auto {
+    margin: auto;
+  }
+  :host(.L\:v-mx-auto),
+  .L\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.L\:v-my-auto),
+  .L\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mt-auto),
+  .L\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.L\:v-mb-auto),
+  .L\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mr-auto),
+  .L\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.L\:v-ml-auto),
+  .L\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1440px) {
   :host(.XL\:v-m-0),
@@ -2518,6 +2645,36 @@
   .XL\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.XL\:v-m-auto),
+  .XL\:v-m-auto {
+    margin: auto;
+  }
+  :host(.XL\:v-mx-auto),
+  .XL\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.XL\:v-my-auto),
+  .XL\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mt-auto),
+  .XL\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.XL\:v-mb-auto),
+  .XL\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mr-auto),
+  .XL\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.XL\:v-ml-auto),
+  .XL\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
 :host(.v-gap-0),

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

@@ -108,7 +108,7 @@ export class VegaFlex {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<MarginType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
         "references": {
           "ResponsiveType": {
             "location": "import",