@heartlandone/vega 2.80.0 → 2.82.0

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

@@ -162,6 +162,42 @@
   background-color: rgba(var(--v-bg-status-warning, 255, 220, 131, 1));
 }
 
+:host(.banner-no-title) .banner-prefix-icon {
+  padding-top: 2px;
+}
+:host(.banner-no-title) .banner-close-button {
+  padding-top: 6px;
+}
+:host(.banner-no-title) .banner-content-container .banner-content > vega-font:last-child {
+  padding-top: 0px;
+}
+@media (min-width: 768px) {
+  :host(.banner-no-title) .banner-prefix-icon {
+    padding-top: 0px;
+  }
+  :host(.banner-no-title) .banner-close-button {
+    padding-top: 3px;
+  }
+}
+
+:host(.banner-no-title.banner-mobile) .banner-prefix-icon {
+  padding-top: 2px;
+}
+:host(.banner-no-title.banner-mobile) .banner-close-button {
+  padding-top: 2px;
+}
+:host(.banner-no-title.banner-mobile) .banner-content-container .banner-content {
+  padding-top: 0px;
+}
+@media (min-width: 768px) {
+  :host(.banner-no-title.banner-mobile) .banner-prefix-icon {
+    padding-top: 1px;
+  }
+  :host(.banner-no-title.banner-mobile) .banner-close-button {
+    padding-top: 3px;
+  }
+}
+
 :host(.banner-hidden) {
   display: none;
 }

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

@@ -110,7 +110,7 @@ export class VegaBox {
       "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-breadcrumb/slimmers/renderers/vega-breadcrumb-item-renderer.js

@@ -22,13 +22,13 @@ export class VegaBreadcrumbItemRenderer extends VegaSlimmer {
     return (h("div", { class: "vega-breadcrumb-item", key: item.label }, this.renderContent(item, options)));
   }
   renderContent(item, options) {
-    if (options.isCompactMode && !options.isLastItem) {
+    if (options.isCompactMode && (!options.isLastItem || this.lastItemClickable)) {
       return (h(Fragment, null,
         this.renderIcon('chevron-left-rounded', 'text-link'),
         this.renderLabel(item)));
     }
     else if (options.isLastItem) {
-      return this.renderLabel(item, true);
+      return this.renderLabel(item, !this.lastItemClickable);
     }
     else if (options.isInDropdown) {
       return this.renderLink(item, false, true);
@@ -42,11 +42,11 @@ export class VegaBreadcrumbItemRenderer extends VegaSlimmer {
   renderIcon(icon, color) {
     return h("vega-icon", { icon: icon, size: "size-12", color: color });
   }
-  renderLabel(item, isLastItem) {
-    return item.tooltip ? (h("vega-tooltip", { text: item.tooltip, placement: ['bottom'] }, this.renderLink(item, isLastItem))) : (this.renderLink(item, isLastItem));
+  renderLabel(item, isPlainLabel) {
+    return item.tooltip ? (h("vega-tooltip", { text: item.tooltip, placement: ['bottom'] }, this.renderLink(item, isPlainLabel))) : (this.renderLink(item, isPlainLabel));
   }
-  renderLink(item, isLastItem, isInDropdown = false) {
-    return isLastItem ? (h("span", { class: "vega-breadcrumb-last-label" }, item.label)) : (h("vega-button-link", { label: item.label, link: item.href, eventful: true, class: {
+  renderLink(item, isPlainLabel, isInDropdown = false) {
+    return isPlainLabel ? (h("span", { class: "vega-breadcrumb-last-label" }, item.label)) : (h("vega-button-link", { label: item.label, link: item.href, eventful: true, class: {
         'vega-breadcrumb-dropdown-link': isInDropdown,
       }, ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
@@ -55,6 +55,9 @@ export class VegaBreadcrumbItemRenderer extends VegaSlimmer {
       } }));
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaBreadcrumbItemRenderer.prototype, "lastItemClickable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaBreadcrumbItemRenderer.prototype, "clickEventEmitter", void 0);

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

@@ -21,6 +21,7 @@ export class VegaBreadcrumbRenderer extends VegaSlimmer {
     return (h("div", { class: {
         'vega-breadcrumb': true,
         'compact-mode': this.isCompactMode,
+        'last-item-clickable': this.lastItemClickable,
         'collapsed': this.isCollapsed(),
         'single': this.items.length === 1,
       }, ref: (node) => (this.vegaBreadcrumbContainerRef = node) }, this.renderItems()));
@@ -53,6 +54,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaBreadcrumbRenderer.prototype, "compactOnMobile", void 0);
+__decorate([
+  MapToComponentField()
+], VegaBreadcrumbRenderer.prototype, "lastItemClickable", void 0);
 __decorate([
   MapToComponentField()
 ], VegaBreadcrumbRenderer.prototype, "maxItems", void 0);

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

@@ -140,6 +140,12 @@
 :host .vega-breadcrumb.compact-mode .vega-breadcrumb-item:nth-last-child(2) {
   display: flex;
 }
+:host .vega-breadcrumb.compact-mode.last-item-clickable .vega-breadcrumb-item:nth-last-child(2) {
+  display: none;
+}
+:host .vega-breadcrumb.compact-mode.last-item-clickable .vega-breadcrumb-item:last-child {
+  display: flex;
+}
 :host .vega-breadcrumb.compact-mode.single .vega-breadcrumb-item {
   display: flex;
   font-family: "Inter", sans-serif;

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

@@ -60,6 +60,16 @@ export class VegaBreadcrumb {
      * @vegaVersion 2.66.0
      */
     this.compactOnMobile = true;
+    /**
+     * Determines whether the last breadcrumb item is clickable.
+     *
+     * When `false` (default), the last item is rendered as plain text.
+     * When `true`, the last item becomes a clickable link, styled
+     * the same as the other breadcrumb items.
+     *
+     * @vegaVersion 2.81.0
+     */
+    this.lastItemClickable = false;
   }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
@@ -143,6 +153,27 @@ export class VegaBreadcrumb {
       "attribute": "compact-on-mobile",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "lastItemClickable": {
+      "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 the last breadcrumb item is clickable.\n\nWhen `false` (default), the last item is rendered as plain text.\nWhen `true`, the last item becomes a clickable link, styled\nthe same as the other breadcrumb items."
+      },
+      "attribute": "last-item-clickable",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

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

@@ -214,4 +214,8 @@
 
 :host(.button-group-item-button-secondary) .vega-button-variant-secondary.vega-button-disabled {
   border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+}
+
+:host(.button-group-item-button-secondary.button-group-all-disabled) .vega-button-variant-secondary.vega-button-disabled {
+  border: 2px solid rgba(var(--v-border-secondary-btn-disabled, 176, 180, 181, 1));
 }

package/dist/collection/components/vega-button-group/slimmers/controllers/vega-button-group-all-items-disabled-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 { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-slimmer';
+import { TagNameAndAttributeMutationFilter } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-filters';
+/** The `VegaButtonGroupAllItemsDisabledController` class monitors child button group items' disabled state and computes whether all items are disabled. */
+export class VegaButtonGroupAllItemsDisabledController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mutationObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: /* istanbul ignore next */ () => this.host,
+      options: {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['disabled'],
+      },
+      mutationFilter: TagNameAndAttributeMutationFilter('VEGA-BUTTON-GROUP-ITEM'),
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => this.updateAllItemsDisabledState(),
+    });
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.updateAllItemsDisabledState();
+  }
+  /**
+   * Check if all button group items are disabled and update the state.
+   */
+  updateAllItemsDisabledState() {
+    const items = this.host.querySelectorAll('vega-button-group-item');
+    this.allItemsDisabled =
+      items.length > 0 &&
+        Array.from(items).every((item) => item.disabled);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaButtonGroupAllItemsDisabledController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaButtonGroupAllItemsDisabledController.prototype, "allItemsDisabled", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonGroupAllItemsDisabledController.prototype, "mutationObserver", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaButtonGroupAllItemsDisabledController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaButtonGroupAllItemsDisabledController.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-button-group/vega-button-group-item/slimmers/controllers/vega-button-group-item-sub-state-controller.js

@@ -31,6 +31,10 @@ export class VegaButtonGroupItemSubStateController extends SubStateObserverSlimm
           subStateName: 'parentDisabled',
           parentStateName: 'disabled',
         },
+        {
+          subStateName: 'allItemsDisabled',
+          parentStateName: 'allItemsDisabled',
+        },
       ],
     });
   }
@@ -47,3 +51,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaButtonGroupItemSubStateController.prototype, "parentDisabled", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaButtonGroupItemSubStateController.prototype, "allItemsDisabled", void 0);

package/dist/collection/components/vega-button-group/vega-button-group-item/slimmers/renderers/vega-button-group-item-renderer.js

@@ -85,11 +85,12 @@ export class VegaButtonGroupItemRenderer extends VegaSlimmer {
    */
   renderButtonItem() {
     const buttonProps = this.getButtonProps();
+    const allDisabledClass = this.parentDisabled || this.allItemsDisabled ? ' button-group-all-disabled' : '';
     if (this.variant === 'tertiary') {
-      return (h("vega-button-link", Object.assign({ class: `button-group-item-button-${this.variant}` }, buttonProps)));
+      return (h("vega-button-link", Object.assign({ class: `button-group-item-button-${this.variant}${allDisabledClass}` }, buttonProps)));
     }
     else {
-      return (h("vega-button", Object.assign({ class: `button-group-item-button-${this.variant}`, variant: this.variant }, buttonProps)));
+      return (h("vega-button", Object.assign({ class: `button-group-item-button-${this.variant}${allDisabledClass}`, variant: this.variant }, buttonProps)));
     }
   }
   /**
@@ -159,6 +160,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaButtonGroupItemRenderer.prototype, "parentDisabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaButtonGroupItemRenderer.prototype, "allItemsDisabled", void 0);
 __decorate([
   MapToComponentField()
 ], VegaButtonGroupItemRenderer.prototype, "iconOnly", void 0);

package/dist/collection/components/vega-button-group/vega-button-group-item/vega-button-group-item.js

@@ -23,6 +23,7 @@ export class VegaButtonGroupItem {
     this.size = 'default';
     this.iconAlign = 'left';
     this.parentDisabled = false;
+    this.allItemsDisabled = false;
     /**
      * Specifies whether to display the icon only.
      *
@@ -127,7 +128,7 @@ export class VegaButtonGroupItem {
         "text": "Specifies whether the button group item is disabled."
       },
       "attribute": "disabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "itemKey": {
@@ -205,7 +206,8 @@ export class VegaButtonGroupItem {
     "variant": {},
     "size": {},
     "iconAlign": {},
-    "parentDisabled": {}
+    "parentDisabled": {},
+    "allItemsDisabled": {}
   }; }
   static get elementRef() { return "host"; }
 }

package/dist/collection/components/vega-button-group/vega-button-group.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 { h, Component, Element, Host, Prop, Watch, Event } from '@stencil/core';
+import { h, Component, Element, Host, Prop, State, Watch, Event } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
@@ -12,6 +12,7 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaButtonGroupClickController } from './slimmers/controllers/vega-button-group-click-controller';
+import { VegaButtonGroupAllItemsDisabledController } from './slimmers/controllers/vega-button-group-all-items-disabled-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonGroupRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-group/runtime-metrics-payload-definition';
 /**
@@ -27,7 +28,10 @@ export class VegaButtonGroup {
     this.sizeNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'size', 'watchSize');
     this.iconAlignNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'iconAlign', 'watchIconAlign');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'disabled', 'watchDisabled');
+    this.allItemsDisabledNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'allItemsDisabled', 'watchAllItemsDisabled');
+    this.allItemsDisabledController = new VegaButtonGroupAllItemsDisabledController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonGroupRuntimeMetricsPayloadDefinition);
+    this.allItemsDisabled = false;
     /**
      * Specifies the visual style and prominence of the button group.
      *
@@ -55,6 +59,9 @@ export class VegaButtonGroup {
      */
     this.disabled = false;
   }
+  watchAllItemsDisabled() {
+    methodPlaceholder();
+  }
   watchVariant() {
     methodPlaceholder();
   }
@@ -182,6 +189,9 @@ export class VegaButtonGroup {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "allItemsDisabled": {}
+  }; }
   static get events() { return [{
       "method": "vegaClick",
       "name": "vegaClick",
@@ -224,6 +234,9 @@ export class VegaButtonGroup {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "allItemsDisabled",
+      "methodName": "watchAllItemsDisabled"
+    }, {
       "propName": "variant",
       "methodName": "watchVariant"
     }, {
@@ -261,6 +274,12 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonGroup.prototype, "disabledNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "allItemsDisabledNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "allItemsDisabledController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -3112,6 +3112,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 {
@@ -3593,6 +3630,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),
@@ -4075,6 +4142,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),
@@ -4557,6 +4654,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),
@@ -5039,6 +5166,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 */
 :host(.v-bg-brand),

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

@@ -154,5 +154,4 @@
 
 :host vega-flex {
   flex-wrap: wrap;
-  max-width: 264px;
 }