@heartlandone/vega 2.80.0 → 2.81.0

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

@@ -112,7 +112,7 @@ export class VegaCard {
       "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-chip/vega-chip.js

@@ -168,7 +168,7 @@ export class VegaChip {
   renderIcon(icon) {
     return (h("vega-icon", { icon: icon, size: icon === 'close'
         ? VegaChip.closeIconSizeMap[this.currentSize]
-        : VegaChip.iconSizeMap[this.currentSize] }));
+        : VegaChip.iconSizeMap[this.currentSize], color: icon !== 'close' ? this.iconColor : undefined }));
   }
   renderDot() {
     const size = VegaChip.iconSizeMap[this.currentSize];
@@ -494,6 +494,31 @@ export class VegaChip {
       "attribute": "icon-align",
       "reflect": false,
       "defaultValue": "'left'"
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TextColorsTokenType",
+        "resolved": "\"text-primary\" | \"text-secondary\" | \"text-inverted-primary\" | \"text-inverted-secondary\" | \"text-black\" | \"text-white\" | \"text-brand\" | \"text-danger-link\" | \"text-danger-link-hover\" | \"text-danger-link-active\" | \"text-danger-link-focus\" | \"text-danger-link-visited\" | \"text-disabled\" | \"text-error\" | \"text-input-disabled\" | \"text-input-placeholder\" | \"text-link\" | \"text-link-hover\" | \"text-link-active\" | \"text-link-focus\" | \"text-link-visited\" | \"text-on-action\" | \"text-on-danger\" | \"text-on-disabled\" | \"text-sidebar-link\" | \"text-sidebar-link-hover\" | \"text-sidebar-link-selected\" | \"text-site-footer-link\" | \"text-site-footer-link-hover\" | \"text-site-footer-link-active\" | \"text-success\" | \"text-inverted-success\" | \"text-accent1-primary\" | \"text-accent2-primary\" | \"text-accent3-primary\" | \"text-accent4-primary\" | \"text-accent5-primary\" | \"text-accent6-primary\" | \"text-accent7-primary\" | \"text-accent8-primary\" | \"text-accent9-primary\" | \"text-accent10-primary\"",
+        "references": {
+          "TextColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Specifies the color of the icon displayed within the chip.\n\nThis property is applicable only when the chip's type is set to `label`\n   and an `icon` is provided."
+      },
+      "attribute": "icon-color",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-current-period-controller.js

@@ -52,7 +52,7 @@ export class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePicke
    * Goto next two month period while range mode.
    */
   gotoNextPeriod() {
-    const period = this.isRangeView()
+    const period = this.isDualMonths
       ? this.currentPeriod.next().next()
       : this.currentPeriod.next();
     this.updateCalendarPeriod(period);
@@ -62,7 +62,7 @@ export class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePicke
    * Goto previous two month period while range mode.
    */
   gotoPreviousPeriod() {
-    const period = this.isRangeView()
+    const period = this.isDualMonths
       ? this.currentPeriod.previous().previous()
       : this.currentPeriod.previous();
     this.updateCalendarPeriod(period);
@@ -104,14 +104,6 @@ export class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePicke
     }
     this.updateCalendarPeriod(new MonthPeriod(currentDate, true, this.timezone));
   }
-  /**
-   * Check is range view
-   *
-   * @returns {boolean} -
-   */
-  isRangeView() {
-    return this.mode === 'range' && !this.isMobileDevice;
-  }
   /**
    * Get current year month by period
    *
@@ -181,6 +173,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "isDualMonths", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-is-dual-months-controller.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { VegaSlimmer, MapToComponentMethod, MapToComponentField } from 'vega-slimmer/core';
+/**
+ * Controller to determine if the calendar should render dual months or not.
+ *    It will set isDualMonths to false if it's a mobile device, otherwise it will check the dualMonths prop or if the mode is range.
+ */
+export class VegaDatePickerCalendarIsDualMonthsController extends VegaSlimmer {
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setIsDualMonths();
+  }
+  /**
+   * Watch for changes in the mode prop to determine if we need to update the isDualMonths field.
+   *  If the mode changes, we will re-evaluate whether we should render dual months or not.
+   */
+  watchMode() {
+    this.setIsDualMonths();
+  }
+  /**
+   * Watch for changes in the dualMonths prop to determine if we need to update the isDualMonths field.
+   */
+  watchDualMonths() {
+    this.setIsDualMonths();
+  }
+  /**
+   * Sets the isDualMonths field based on the device type, dualMonths prop, and mode.
+   *  If it's a mobile device, it will always set isDualMonths to false. Otherwise, it will set it to the value of the dualMonths prop if it's defined, or true if the mode is 'range'.
+   */
+  setIsDualMonths() {
+    if (this.isMobileDevice) {
+      this.isDualMonths = false;
+    }
+    else {
+      this.isDualMonths =
+        typeof this.dualMonths === 'boolean' ? this.dualMonths : this.mode === 'range';
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "dualMonths", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "isDualMonths", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchMode')
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "watchMode", null);
+__decorate([
+  MapToComponentMethod('watchDualMonths')
+], VegaDatePickerCalendarIsDualMonthsController.prototype, "watchDualMonths", null);

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

@@ -37,7 +37,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
       }, iconColor: isDisabled ? 'text-disabled' : 'text-link', size: this.getNavigationIconSize(), disabled: isDisabled }));
   }
   renderNextIcon() {
-    const period = this.mode === 'range' ? this.currentPeriod.next() : this.currentPeriod;
+    const period = this.isDualMonths ? this.currentPeriod.next() : this.currentPeriod;
     const endDate = period.current.lastDateOfMonth();
     const isDisabled = this.maxCalendarDate &&
       (endDate.isAfter(this.maxCalendarDate) || endDate.equal(this.maxCalendarDate));
@@ -51,7 +51,7 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
       }, size: this.getNavigationIconSize(), iconColor: isDisabled ? 'text-disabled' : 'text-link', disabled: isDisabled }));
   }
   renderToday() {
-    const hasLabel = this.mode === 'range' && !this.isMobileDevice && this.size !== 'small';
+    const hasLabel = this.isDualMonths && this.size !== 'small';
     return (h("vega-button-link", { class: {
         'button-today': true,
         'with-label': hasLabel,
@@ -86,9 +86,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "yearMonthSwitcherRender", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerCalendarHeaderRenderer.prototype, "mode", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriodController", void 0);
@@ -106,4 +103,4 @@ __decorate([
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "timezone", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarHeaderRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerCalendarHeaderRenderer.prototype, "isDualMonths", void 0);

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

@@ -25,12 +25,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       h("div", { class: "aria-announcement", "aria-live": "polite", "aria-atomic": "true" }, this.buildAnnouncement())));
   }
   renderContainer() {
-    const shouldRenderRangeMonth = this.shouldRenderRangeMonth();
-    return (h("div", { class: {
-        /* eslint-disable @typescript-eslint/naming-convention */
-        'container__months': true,
-        'columns-2': shouldRenderRangeMonth,
-      } }, shouldRenderRangeMonth ? this.renderRangeMonth() : this.monthItemRenderer.render('start')));
+    return (h("div", { class: "container__months" }, this.isDualMonths ? this.renderRangeMonth() : this.monthItemRenderer.render('start')));
   }
   renderRangeMonth() {
     return (h(Fragment, null,
@@ -45,9 +40,6 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
           });
         }, label: this.translationSlimmer.t('Clear') }))));
   }
-  shouldRenderRangeMonth() {
-    return this.mode === 'range' && !this.isMobileDevice;
-  }
   clearCalendar() {
     this.clearEventEmitter.emit();
     changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), {});
@@ -92,7 +84,7 @@ __decorate([
 ], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);
+], VegaDatePickerCalendarRenderer.prototype, "isDualMonths", void 0);

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

@@ -15,7 +15,7 @@ import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../..
 import { MonthNames } from '../../constants';
 export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
   render() {
-    const canRender = this.mode !== 'range' || this.showYearMonthDropdowns || this.isMobileDevice;
+    const canRender = !this.isDualMonths || this.showYearMonthDropdowns;
     return (canRender && (h("vega-flex", { justifyContent: 'center' },
       this.showYearMonthDropdowns
         ? this.renderMonthDropdownSwitcher()
@@ -162,4 +162,4 @@ __decorate([
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "mode", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isDualMonths", void 0);

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

@@ -23,8 +23,7 @@ export class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
       this.renderDays(periodView, period)));
   }
   renderCurrentYearMonth(period) {
-    return (this.mode === 'range' &&
-      !this.isMobileDevice && (h("vega-box", { class: "current-month-year" },
+    return (this.isDualMonths && (h("vega-box", { class: "current-month-year" },
       this.translationSlimmer.t(period.current.getMonthName()),
       ' ',
       period.current.year)));
@@ -130,10 +129,10 @@ __decorate([
 ], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "isDualMonths", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "dateIndicator", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);
+], VegaDatePickerMonthItemRenderer.prototype, "dateIndicator", void 0);

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

@@ -13,9 +13,9 @@
   height: 100%;
 }
 
-:host(.small.range) .calendar.static-height .container__main,
-:host(.regular.range) .calendar.static-height .container__main,
-:host(.large.range) .calendar.static-height .container__main {
+:host(.small.dual-months) .calendar.static-height .container__main,
+:host(.regular.dual-months) .calendar.static-height .container__main,
+:host(.large.dual-months) .calendar.static-height .container__main {
   aspect-ratio: 1/1;
 }
 
@@ -386,7 +386,7 @@
   left: calc(50% - 2px);
 }
 
-:host(.small.range) .calendar .container__main {
+:host(.small.dual-months) .calendar .container__main {
   width: 100%;
   max-width: 600px;
   max-height: 360px;
@@ -694,7 +694,7 @@
   left: calc(50% - 2px);
 }
 
-:host(.regular.range) .calendar .container__main {
+:host(.regular.dual-months) .calendar .container__main {
   width: 100%;
   max-width: 900px;
   max-height: 450px;
@@ -1078,7 +1078,7 @@
   border-color: rgba(var(--v-text-on-action, 252, 252, 252, 1));
 }
 
-:host(.large.range) .calendar .container__main {
+:host(.large.dual-months) .calendar .container__main {
   width: 100%;
   max-width: 1200px;
   max-height: 600px;
@@ -1093,10 +1093,16 @@
   display: flex;
 }
 
-.calendar .container__months.columns-2 {
+:host(.dual-months) .calendar .container__months {
   width: 100%;
   flex-direction: row;
 }
+:host(.dual-months) .calendar .container__months .month-item:first-of-type {
+  padding-right: var(--vega-date-picker-calendar-range-space-size);
+}
+:host(.dual-months) .calendar .container__months .month-item:last-of-type {
+  padding-left: var(--vega-date-picker-calendar-range-space-size);
+}
 
 .calendar .container__months .month-item {
   box-sizing: content-box;
@@ -1108,14 +1114,6 @@
   flex-direction: column;
 }
 
-.calendar .container__months.columns-2 .month-item:first-of-type {
-  padding-right: var(--vega-date-picker-calendar-range-space-size);
-}
-
-.calendar .container__months.columns-2 .month-item:last-of-type {
-  padding-left: var(--vega-date-picker-calendar-range-space-size);
-}
-
 .calendar .container__months .month-item:nth-child(2)::before {
   background-color: rgba(var(--v-bg-divider, 171, 198, 216, 1));
   margin-bottom: 32px;

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 */
 /**