@heartlandone/vega 2.88.0 → 2.90.0

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

@@ -10,7 +10,7 @@ export class VegaBreadcrumbCollapsedItemRenderer extends VegaSlimmer {
   render(items) {
     return (h("div", { class: "vega-breadcrumb-item" },
       h("vega-dropdown", { placement: ['bottom'], alignment: 'center', maxHeight: 200 },
-        h("vega-text", null, "..."),
+        h("vega-text", { text: "..." }),
         h("vega-box", { slot: "items" }, items.map((item) => (h("vega-dropdown-item", { key: item.label, label: item.label }, this.itemRenderer.render(item, { isInDropdown: true })))))),
       h("vega-icon", { icon: "chevron-right-rounded", size: "size-12", color: "text-secondary" })));
   }

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

@@ -108,6 +108,9 @@ a .vega-button-link-button-container {
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
   box-sizing: border-box;
   border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /**@TODO The border-color should change to design token when the UI design update*/

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -170,7 +170,7 @@ export class VegaButtonLink {
   }
   renderLabel() {
     return (this.label && (h("span", { class: "vega-button-link-label", part: "label-container" },
-      h("vega-text", { part: "label-text" }, this.label))));
+      h("vega-text", { part: "label-text", text: this.label }))));
   }
   renderIcon() {
     return (h("div", { class: `vega-button-link-${this.iconType} vega-flex-shrink-0 v-min-w-min` }, this.iconType === 'icon' ? (this.renderVegaIcon()) : (h("div", { class: "vega-button-link-button-container" }, this.renderVegaIcon()))));

package/dist/collection/components/vega-checkbox/vega-checkbox-group/vega-checkbox-group.css

@@ -51,20 +51,19 @@
   display: none;
 }
 
-.vega-label {
+vega-field-label {
   margin-bottom: 16px;
+  display: block;
 }
-
-.vega-label label {
+vega-field-label::part(container) {
   font-family: "Inter", sans-serif;
   font-size: 18px;
   font-weight: 500;
   line-height: 30px;
   letter-spacing: 0px;
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .vega-label label {
+  vega-field-label::part(container) {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -73,7 +72,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .vega-label label {
+  vega-field-label::part(container) {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -82,7 +81,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .vega-label label {
+  vega-field-label::part(container) {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -90,10 +89,8 @@
     letter-spacing: 0px;
   }
 }
-
-.vega-require {
-  color: rgba(var(--v-text-error, 189, 41, 71, 1));
-  margin-left: 4px;
+vega-field-label::part(label) {
+  word-break: normal;
 }
 
 .vega-hint {

package/dist/collection/components/vega-checkbox/vega-checkbox-group/vega-checkbox-group.js

@@ -8,15 +8,16 @@ import { Component, h, Element, Prop, Event, Watch, Host } from '@stencil/core';
 import { RequiredFieldRule } from '../../../helpers/validator/rules/required-field-rule';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { ComponentLoadRequired } from '../../../decorators/method-decorators/component-load-required';
-import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_USER_INTERACTION, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../helpers/change-manager/change-manager';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
 import { ChildNodesNotifyObserverSlimmer, } from '../../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
-import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaUserChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { isArrayEqual } from '../../../utils/array';
 /**
  * @vegaVersion 1.0.7
  */
@@ -37,9 +38,14 @@ export class VegaCheckboxGroup {
       touchableAreaGetter: () => this.touchableAreaGetter(),
     });
     this.checkboxValueChangeObserver = new ChildNodesNotifyObserverSlimmer(CHECKBOX_VALUE_CHANGE, (input) => this.childCheckboxValueChange(input));
-    this.checkboxEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaFlexElement);
+    this.checkboxUserInteractionObserver = new ChildNodesNotifyObserverSlimmer(CHECKBOX_USER_INTERACTION, () => {
+      this.userInteractionPending = true;
+    });
+    this.checkboxEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaUserChange], () => this.vegaFlexElement);
     this.changeEventEmitter = createEventEmitSlimmer(VegaCheckboxGroup, VegaChange);
+    this.userChangeEventEmitter = createEventEmitSlimmer(VegaCheckboxGroup, VegaUserChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.userInteractionPending = false;
     /**
      * Specifies the label or title for the checkbox group.
      *    It provides descriptive text that helps identify
@@ -77,6 +83,16 @@ export class VegaCheckboxGroup {
      * @vegaVersion 1.3.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.90.0
+     */
+    this.optional = false;
     /**
      * Provides a supplementary prompt message that
      *    assists users in selecting the appropriate
@@ -122,9 +138,20 @@ export class VegaCheckboxGroup {
       return inputArray;
     };
   }
-  async watchValue() {
+  async watchValue(newValue, oldValue) {
+    // Snapshot + unconditional clear so a no-op assignment cannot leak the
+    // flag into the next legitimate prop-driven update. Even when the
+    // array-equality guard early-returns below, the flag must already be cleared.
+    const wasUserInteraction = this.userInteractionPending;
+    this.userInteractionPending = false;
+    if (isArrayEqual(newValue, oldValue, /* ignoreOrder */ true)) {
+      return;
+    }
     this.initCheckboxArray();
     this.changeEventEmitter.emit(this.value);
+    if (wasUserInteraction) {
+      this.userChangeEventEmitter.emit(this.value);
+    }
     ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
       detail: this.value,
@@ -144,6 +171,24 @@ export class VegaCheckboxGroup {
     this.initCheckboxArray();
     this.notifyGroupDisabledChange();
   }
+  /**
+   * Check the value prop to avoid unnecessary updates when the new value
+   * is element-wise equal to the old value (same elements, different array reference).
+   *
+   * @param {unknown} newValue - The new prop value.
+   * @param {unknown} oldValue - The old prop value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'value' &&
+      Array.isArray(newValue) &&
+      Array.isArray(oldValue) &&
+      isArrayEqual(newValue, oldValue, /* ignoreOrder */ true)) {
+      return false;
+    }
+    return true;
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-checkbox-group-dark-change-background-color }
@@ -160,13 +205,7 @@ export class VegaCheckboxGroup {
       this.renderHintDom()), this.host);
   }
   renderLabelDom() {
-    return (this.label && (h("div", { class: "vega-label" },
-      h("label", { "aria-label": this.label },
-        this.label,
-        this.renderRequireDom()))));
-  }
-  renderRequireDom() {
-    return this.required ? h("span", { class: "vega-require" }, "*") : null;
+    return (this.label && (h("vega-field-label", { label: this.label, isFieldRequired: this.required, optional: this.optional, disabled: this.disabled })));
   }
   renderHintDom() {
     return (this.hint && (h("div", { class: "vega-hint" },
@@ -326,6 +365,30 @@ export class VegaCheckboxGroup {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.90.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "hint": {
       "type": "string",
       "mutable": false,
@@ -432,6 +495,57 @@ export class VegaCheckboxGroup {
         "resolved": "string[]",
         "references": {}
       }
+    }, {
+      "method": "vegaUserChange",
+      "name": "vegaUserChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "remarks",
+            "text": "Calling `event.preventDefault()` is a no-op \u2014 it does not roll\nback `value` nor suppress the paired `vegaChange` event.\n`cancelable: true` is retained only for parity with `vegaChange`."
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-group-user-change}"
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-group-user-change-programmatic}"
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-group-user-change-no-double}"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "An event emitter notifying changes in the value of the checkbox group\n  triggered exclusively by user interaction (mouse click or keyboard\n  activation) on a nested checkbox.\n\nUnlike `vegaChange`, this event does NOT fire when the `value` prop\n  is reassigned programmatically. Use this event when you want to\n  react only to real user input (e.g., analytics, derived\n  \"select all\" state)."
+      },
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      }
+    }, {
+      "method": "userChange",
+      "name": "userChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "An event emitter notifying changes in the value\n  of any nested checkbox within the checkbox group,\n  triggered exclusively by user interaction (mouse click or keyboard activation)."
+      },
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      }
     }, {
       "method": "change",
       "name": "change",
@@ -478,12 +592,18 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "checkboxValueChangeObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "checkboxUserInteractionObserver", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "checkboxEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckboxGroup.prototype, "userChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckboxGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -5,17 +5,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Host, h, Element, Prop, Event, Watch, Method, State } from '@stencil/core';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { CheckBoxRequiredRule } from '../../helpers/validator/rules/check-box-required-rule';
 import ChangeManager from '../../helpers/change-manager/change-manager';
-import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { CHECKBOX_GROUP_DISABLED_CHANGE, CHECKBOX_USER_INTERACTION, CHECKBOX_VALUE_CHANGE, FORM_ELEMENT_VALUE_CHANGE, } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../helpers/change-manager/observer/observer';
 import { arrayToClassString, findParent } from '../../utils/ui';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaUserChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaCheckboxShowErrorController } from './slimmers/controllers/vega-checkbox-show-error-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
@@ -48,12 +47,15 @@ export class VegaCheckbox {
       touchableAreaGetter: () => [this.inputRef],
     });
     this.changeEventEmitter = createEventEmitSlimmer(VegaCheckbox, VegaChange);
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, {
+    this.userChangeEventEmitter = createEventEmitSlimmer(VegaCheckbox, VegaUserChange);
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaUserChange], () => this.host, {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.labelClickPending = false;
+    this.isUserInteraction = false;
     /**
      * Indicates whether the parent checkbox group is disabled.
      */
@@ -146,7 +148,62 @@ export class VegaCheckbox {
       if (this.indeterminate) {
         this.indeterminate = false;
       }
+      this.isUserInteraction = true;
       this.checked = e.currentTarget.checked;
+      // Defensive: Stencil watchers run synchronously on the setter, so by
+      // the time the line above returns, watchCheckedChange has already run
+      // (or been skipped under a future same-value guard, e.g. VD-8009).
+      // Queue an unconditional clear as a safety net so a skipped watcher
+      // can never leak the flag into the next prop-driven update.
+      this.isUserInteraction = false;
+    };
+    // Toggle checked directly on Enter to avoid synthetic click bubbling through
+    // the <label>, which would fire vegaChange twice via a second onChange.
+    this.onInputKeyDown = (e) => {
+      if (e.key !== 'Enter')
+        return;
+      e.preventDefault();
+      if (this.isDisabled())
+        return;
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
+      this.isUserInteraction = true;
+      this.checked = !this.checked;
+      this.isUserInteraction = false;
+    };
+    /**
+     * Suppresses the duplicate `click` event that bubbles to the host when the
+     *    browser performs the label's default activation behavior. Clicking the
+     *    label area dispatches one click on the label (which bubbles to the
+     *    host), and the browser then synthesizes a second click on the wrapped
+     *    `<input>`, which also bubbles through the label to the host — causing
+     *    the consumer's `onClick` to fire twice.
+     *
+     * We tag the original label-area click with `labelClickPending = true` and,
+     *    when the synthetic input click bubbles back through the label, call
+     *    `stopPropagation()` to prevent the duplicate from leaving the host.
+     *    The input still toggles natively (no `preventDefault`), so `change`
+     *    fires once and `vegaChange` is emitted exactly once via the normal
+     *    `@Watch('checked')` path. This avoids the spurious same-value emission
+     *    that an optimistic local toggle would cause in React controlled
+     *    components, where the parent re-renders the same `checked` value.
+     */
+    this.onLabelClick = (e) => {
+      if (e.target === this.inputRef) {
+        if (this.labelClickPending) {
+          e.stopPropagation();
+          this.labelClickPending = false;
+        }
+        return;
+      }
+      this.labelClickPending = true;
+      // Defensive reset for cases where no synthetic input click follows
+      // (e.g. disabled input, or the click landing outside the label's
+      // associated form control).
+      setTimeout(() => {
+        this.labelClickPending = false;
+      }, 0);
     };
     this.onSelectedIconClick = (e) => {
       e.stopPropagation();
@@ -159,8 +216,18 @@ export class VegaCheckbox {
     this.checked = this.identifier !== '' ? newValue === this.identifier : newValue === true;
   }
   watchCheckedChange() {
+    // Snapshot + unconditional clear so the user-interaction flag never
+    // leaks into a later prop-driven update. Stencil's prop setter only
+    // invokes @Watch when the value actually changed, so a click that
+    // does not flip `checked` would otherwise leave the flag set.
+    const wasUserInteraction = this.isUserInteraction;
+    this.isUserInteraction = false;
     this.initValue();
     this.changeEventEmitter.emit(this.value);
+    if (wasUserInteraction) {
+      this.userChangeEventEmitter.emit(this.value);
+      ChangeManager.notify(CHECKBOX_USER_INTERACTION, { host: this.host, detail: this.value });
+    }
     ChangeManager.notify(CHECKBOX_VALUE_CHANGE, { host: this.host, detail: this.value });
     ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
       host: this.host,
@@ -181,6 +248,21 @@ export class VegaCheckbox {
     this.initValue();
     this.initAndRegisterGroupDisabledObserver();
   }
+  /**
+   * Prevents redundant updates when the checked prop is set
+   *    to the same value (e.g., from parent re-renders in React).
+   *
+   * @param {unknown} newValue - The new prop value.
+   * @param {unknown} oldValue - The old prop value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'checked' && newValue === oldValue) {
+      return false;
+    }
+    return true;
+  }
   componentDidRender() {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
@@ -211,8 +293,8 @@ export class VegaCheckbox {
           'vega-checkbox-container',
           this.showError && 'error',
           this.size && `size-${this.size}`,
-        ]), ref: (e) => (this.inputContainerRef = e) },
-        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+        ]), ref: (e) => (this.inputContainerRef = e), onClick: this.onLabelClick },
+        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: this.onInputKeyDown }),
         h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1, "aria-hidden": "true" }, this.renderIconDom()),
         h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
@@ -488,6 +570,63 @@ export class VegaCheckbox {
         "resolved": "boolean | string",
         "references": {}
       }
+    }, {
+      "method": "vegaUserChange",
+      "name": "vegaUserChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "remarks",
+            "text": "Calling `event.preventDefault()` is a no-op \u2014 it does not roll\nback `checked`/`value` nor suppress the paired `vegaChange` event.\n`cancelable: true` is retained only for parity with `vegaChange`."
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-user-change}"
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-user-change-keyboard}"
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-user-change-keyboard-enter}"
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-user-change-programmatic}"
+          }, {
+            "name": "see",
+            "text": "{module :vega-checkbox-user-change-containment}"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "An event emitter notifying changes in the value of the checkbox\n   triggered exclusively by user interaction (mouse click or keyboard activation).\n\nUnlike `vegaChange`, this event does NOT fire when the `checked` or `value`\n   prop is reassigned programmatically. Use this event when you want to react\n   only to real user input (e.g., analytics, derived \"select all\" state)."
+      },
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      }
+    }, {
+      "method": "userChange",
+      "name": "userChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "An event emitter notifying changes in the value of the checkbox\n   triggered exclusively by user interaction (mouse click or keyboard activation)."
+      },
+      "complexType": {
+        "original": "string | boolean",
+        "resolved": "boolean | string",
+        "references": {}
+      }
     }, {
       "method": "change",
       "name": "change",
@@ -558,6 +697,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckbox.prototype, "userChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "dropdownEventPrevent", void 0);

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

@@ -2032,6 +2032,7 @@
   max-width: 100%;
   position: relative;
   border-radius: 9999px;
+  vertical-align: middle;
 }
 :host vega-flex {
   border-radius: 9999px;

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

@@ -183,7 +183,7 @@ export class VegaChip {
   }
   renderText() {
     return (h("span", { class: "vega-chip-text" },
-      h("vega-text", { overflow: "ellipsis", key: this.text }, this.text)));
+      h("vega-text", { overflow: "ellipsis", text: this.text, key: this.text })));
   }
   setCurrentSize() {
     this.currentSize = ResponsiveFormatFacade.formatCustom(this.size);

package/dist/collection/components/vega-color-picker/vega-color-picker.js

@@ -66,6 +66,16 @@ export class VegaColorPicker {
      * @vegaVersion 1.13.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * Specifies the label or title for the color picker.
      *
@@ -145,7 +155,7 @@ export class VegaColorPicker {
         }))));
     };
     this.renderHintMessage = () => {
-      return h("vega-text", null, this.hint);
+      return h("vega-text", { text: this.hint });
     };
     this.updateValueProp = async (e) => {
       if (!this.disabled) {
@@ -176,7 +186,7 @@ export class VegaColorPicker {
       this.hint && this.renderHintMessage()), this.host);
   }
   renderLabelDom() {
-    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { "is-field-required": this.required, optional: this.optional, disabled: this.disabled, label: this.label }));
   }
   getValidColumns() {
     const flooredColumns = Math.floor(this.columns);
@@ -299,6 +309,30 @@ export class VegaColorPicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "label": {
       "type": "string",
       "mutable": false,

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

@@ -11,6 +11,7 @@ import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manage
 import { VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
+import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
 export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -103,12 +104,20 @@ export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
       this.renderItemsSlot()));
   }
   renderContainer() {
+    const formattedMaxHeight = formatAndValidResponsiveToken(this.containerMaxHeight, 'widthAndHeight');
+    const containerContentStyle = formattedMaxHeight
+      ? {
+        maxHeight: formattedMaxHeight,
+      }
+      : undefined;
     return (h("div", { class: {
         'vega-combo-box-container': true,
         [`vega-combo-box-size-${this.size}`]: true,
-      } },
+      } }, formattedMaxHeight ? (h("div", { class: "vega-combo-box-container-content", style: containerContentStyle },
+      this.renderSelectedContainer(),
+      this.renderInputContainer())) : (h(Fragment, null,
       this.renderSelectedContainer(),
-      this.renderInputContainer()));
+      this.renderInputContainer()))));
   }
   renderItemsSlot() {
     return (this.isTemplateMode && (h("div", { slot: "items", ref: (ref) => {
@@ -160,6 +169,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaComboBoxDropdownRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaComboBoxDropdownRenderer.prototype, "containerMaxHeight", void 0);
 __decorate([
   MapToComponentField()
 ], VegaComboBoxDropdownRenderer.prototype, "vegaDropdownProps", void 0);