@heartlandone/vega 2.81.0 → 2.83.0

package/dist/cjs/vega-carousel.cjs.entry.js

@@ -7,19 +7,19 @@ const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const component = require('./component-1e352960.js');
 const effect = require('./effect-98e88068.js');
-const responsiveFormatFacade = require('./responsive-format-facade-9cae7f27.js');
+const responsiveFormatFacade = require('./responsive-format-facade-2cab7344.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-bee6b676.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const deprecatedPropertySlimmer = require('./deprecated-property-slimmer-300a3929.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
-require('./type-guard-362d7da3.js');
+require('./type-guard-3ec852d7.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-9f58a4e4.js');
+require('./internal-translation-controller-fb1532f4.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-5829a298.js');
 require('./breakpoints-1cc2c4c6.js');
@@ -32,7 +32,7 @@ require('./dynamic-slimmer-f31fdfd7.js');
 require('./dom-node-subject-observer-factory-9110cb94.js');
 require('./observer-f49483e8.js');
 require('./ui-ae4ee13d.js');
-require('./internal-vega-event-manager-cc0f511c.js');
+require('./internal-vega-event-manager-fef893bf.js');
 require('./object-b53e9416.js');
 
 var TouchDirection;

package/dist/cjs/vega-checkbox_2.cjs.entry.js

@@ -12,12 +12,12 @@ const observer = require('./observer-f49483e8.js');
 const ui = require('./ui-ae4ee13d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-982dbfe4.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-bee6b676.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-0f3a028e.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
-const vegaInternalEventId = require('./vega-internal-event-id-a1837fa2.js');
+const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-9b7095a4.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const componentLoadRequired = require('./component-load-required-6cc74719.js');
 const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-2631c381.js');
@@ -25,7 +25,7 @@ require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./string-39438062.js');
 require('./misc-3d30df91.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-translation-controller-9f58a4e4.js');
+require('./internal-translation-controller-fb1532f4.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -36,8 +36,8 @@ require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-e5b50cbf.js');
-require('./internal-vega-event-manager-cc0f511c.js');
+require('./sub-state-observer-slimmer-b8f6f27b.js');
+require('./internal-vega-event-manager-fef893bf.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-9129ef52.js');
 require('./index-f054eb5d.js');
@@ -96,7 +96,7 @@ __decorate$2([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaCheckboxShowErrorController.prototype, "disconnectedCallback", null);
 
-const vegaCheckboxCss = ":host{display:inline-block;vertical-align:middle}.vega-checkbox-container{position:relative;display:flex;-webkit-tap-highlight-color:transparent}.vega-checkbox-container>input[type=checkbox]{position:absolute;left:0px;top:0px;opacity:0;width:24px;height:24px;padding:0px;margin:0px}.vega-checkbox-container>.vega-checkbox-icon{display:inline-block;box-sizing:border-box;width:24px;height:24px;border-style:solid;border-width:2px;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1));position:relative;left:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:4px;min-width:24px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.vega-checkbox-container>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px}.vega-checkbox-container>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon{display:inline-flex;align-items:center;justify-content:center}:host(.disabled) .vega-checkbox-container{cursor:not-allowed}:host(:not(.disabled)) .vega-checkbox-container{cursor:pointer}.vega-checkbox-container .vega-require{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px;vertical-align:middle}.vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}.vega-checkbox-container.error>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))}:host(.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon>vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-label-container{display:inline-block;margin-left:12px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.disabled) .vega-checkbox-container>.vega-checkbox-label-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.vega-error{display:block;margin-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-checkbox-label-container.vega-hidden{display:none}.vega-hidden{display:none}.size-default input[type=checkbox]{width:24px;height:24px}.size-default .vega-checkbox-icon{width:24px;height:24px;min-width:24px;border-radius:4px}.size-default .vega-checkbox-label-container{margin-left:12px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.size-small input[type=checkbox]{width:16px;height:16px}.size-small .vega-checkbox-icon{width:16px;height:16px;min-width:16px;border-radius:2px}.size-small .vega-checkbox-label-container{margin-left:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}";
+const vegaCheckboxCss = ":host{display:inline-block;vertical-align:middle}.vega-checkbox-container{position:relative;display:flex;-webkit-tap-highlight-color:transparent}.vega-checkbox-container>input[type=checkbox]{position:absolute;left:0px;top:0px;opacity:0;width:24px;height:24px;padding:0px;margin:0px}.vega-checkbox-container>.vega-checkbox-icon{display:inline-block;box-sizing:border-box;width:24px;height:24px;border-style:solid;border-width:2px;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1));position:relative;left:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:4px;min-width:24px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon,:host(.indeterminate) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));display:inline-flex;align-items:center;justify-content:center}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:hover,:host(.indeterminate) .vega-checkbox-container>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.vega-checkbox-container>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px}.vega-checkbox-container>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-action-active, 29, 65, 195, 1))}:host(.checked) .vega-checkbox-container>.vega-checkbox-icon:active,:host(.indeterminate) .vega-checkbox-container>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}:host(.disabled) .vega-checkbox-container{cursor:not-allowed}:host(:not(.disabled)) .vega-checkbox-container{cursor:pointer}.vega-checkbox-container .vega-require{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px;vertical-align:middle}.vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon,:host(.indeterminate) .vega-checkbox-container.error>.vega-checkbox-icon{background-color:rgba(var(--v-bg-danger, 189, 41, 71, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:hover,:host(.indeterminate) .vega-checkbox-container.error>.vega-checkbox-icon:hover{background-color:rgba(var(--v-bg-danger-hover, 233, 71, 104, 1))}.vega-checkbox-container.error>input[type=checkbox]:focus-visible+.vega-checkbox-icon{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px}:host(.checked) .vega-checkbox-container.error>.vega-checkbox-icon:active,:host(.indeterminate) .vega-checkbox-container.error>.vega-checkbox-icon:active{background-color:rgba(var(--v-bg-danger-active, 230, 50, 87, 1))}.vega-checkbox-container.error>.vega-checkbox-icon:active{border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-danger-active, 189, 41, 71, 1))}:host(.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon,:host(.indeterminate.disabled) .vega-checkbox-container>.vega-checkbox-icon{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.checked.disabled) .vega-checkbox-container>.vega-checkbox-icon>vega-icon,:host(.indeterminate.disabled) .vega-checkbox-container>.vega-checkbox-icon>vega-icon{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}.vega-checkbox-container>.vega-checkbox-label-container{display:inline-block;margin-left:12px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-checkbox-container>.vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.disabled) .vega-checkbox-container>.vega-checkbox-label-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.vega-error{display:block;margin-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-checkbox-label-container.vega-hidden{display:none}.vega-hidden{display:none}.size-default input[type=checkbox]{width:24px;height:24px}.size-default .vega-checkbox-icon{width:24px;height:24px;min-width:24px;border-radius:4px}.size-default .vega-checkbox-label-container{margin-left:12px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-default .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}.size-small input[type=checkbox]{width:16px;height:16px}.size-small .vega-checkbox-icon{width:16px;height:16px;min-width:16px;border-radius:2px}.size-small .vega-checkbox-label-container{margin-left:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.size-small .vega-checkbox-label-container{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}";
 
 var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -176,6 +176,21 @@ const VegaCheckbox = class {
      * @vegaVersion 1.0.7
      */
     this.checked = false;
+    /**
+     * Specifies whether the checkbox is in an indeterminate state.
+     *
+     * The indeterminate state is a visual-only state typically used to represent
+     *    a checkbox whose value is neither fully checked nor fully unchecked,
+     *    such as a "select all" control where only some children are selected.
+     *
+     * Setting this property does not affect the `checked` or `value` properties.
+     *    User interaction (clicking) will clear the indeterminate state and
+     *    toggle `checked` as usual.
+     *
+     * @vegaVersion 2.83.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.indeterminate = false;
     /**
      * Specifies whether the checkbox element is disabled.
      *
@@ -203,11 +218,14 @@ const VegaCheckbox = class {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * The below method is e2e-test covered in
+     * Indeterminate-clearing behavior is unit-tested.
+     * The checked-state side of this method is e2e-test covered in
      * @see{module:vega-checkbox-change}
      */
-    /* istanbul ignore next */
     this.onCheckBoxChange = (e) => {
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
       this.checked = e.currentTarget.checked;
     };
     this.onSelectedIconClick = (e) => {
@@ -234,6 +252,7 @@ const VegaCheckbox = class {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
     }
+    this.syncNativeIndeterminate();
   }
   /**
    * Invoke this method to set the value of the checkbox.
@@ -252,14 +271,18 @@ const VegaCheckbox = class {
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         'vega-flex-shrink-0 v-min-w-min': isInsideCheckboxGroup,
         'checked': this.checked,
+        'indeterminate': this.indeterminate,
         'disabled': this.isDisabled(),
       } }, index.h("label", { class: ui.arrayToClassString([
         'vega-checkbox-container',
         this.showError && 'error',
         this.size && `size-${this.size}`,
-      ]), ref: (e) => (this.inputContainerRef = e) }, index.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', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()), index.h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
+      ]), ref: (e) => (this.inputContainerRef = e) }, index.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: accessibility.createEnterKeyHandlerToTriggerClick() }), index.h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()), index.h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) }, this.renderLabelDom(), this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
+    if (this.indeterminate) {
+      return index.h("vega-icon", { icon: "minus-sign", size: this.size === 'small' ? 'size-12' : 'size-16' });
+    }
     return this.checked ? (index.h("vega-icon", { icon: "checkmark", size: this.size === 'small' ? 'size-12' : 'size-16' })) : null;
   }
   renderLabelDom() {
@@ -273,6 +296,16 @@ const VegaCheckbox = class {
   initValue() {
     this.value = this.identifier !== '' ? (this.checked ? this.identifier : '') : this.checked;
   }
+  /**
+   * Syncs the indeterminate property to the native input element.
+   * The HTML `indeterminate` attribute can only be set via JavaScript,
+   *    so it must be applied imperatively after each render.
+   */
+  syncNativeIndeterminate() {
+    if (this.inputRef) {
+      this.inputRef.indeterminate = this.indeterminate;
+    }
+  }
   /**
    * indicating whether the component is disabled or not, single checkbox will take the self disabled value and the checkbox in group will take the self disabled and group disabled value
    *

package/dist/cjs/vega-chip.cjs.entry.js

@@ -4,22 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
-const responsiveFormatFacade = require('./responsive-format-facade-9cae7f27.js');
+const responsiveFormatFacade = require('./responsive-format-facade-2cab7344.js');
 const ui = require('./ui-ae4ee13d.js');
-const designToken = require('./design-token-40276b11.js');
+const designToken = require('./design-token-93070bb8.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-bee6b676.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
-require('./type-guard-362d7da3.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-9b7095a4.js');
+require('./type-guard-3ec852d7.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-9f58a4e4.js');
+require('./internal-translation-controller-fb1532f4.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-5829a298.js');
 require('./number-4816603d.js');
@@ -27,11 +27,12 @@ require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./feature-flag-controller-9129ef52.js');
 require('./index-f054eb5d.js');
+require('./state-border-formatter-4e5e4ed0.js');
 require('./try-get-document-c0ebd39a.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./dom-node-subject-observer-factory-9110cb94.js');
 require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-cc0f511c.js');
+require('./internal-vega-event-manager-fef893bf.js');
 require('./vega-env-manager-23b8b23c.js');
 
 const VegaChipRuntimeMetricsPayloadDefinition = [

package/dist/cjs/vega-code-block.cjs.entry.js

@@ -10,17 +10,17 @@ const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const trashCan = require('./trash-can-46a5e19a.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
-const codeBlock = require('./code-block-24b3d0e7.js');
+const codeBlock = require('./code-block-b1f8aded.js');
 const ui = require('./ui-ae4ee13d.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const vegaInternalEventId = require('./vega-internal-event-id-a1837fa2.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-bee6b676.js');
+const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const object = require('./object-b53e9416.js');
-const translationSlimmer = require('./translation-slimmer-c069ca84.js');
-const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-bd662b32.js');
+const translationSlimmer = require('./translation-slimmer-d0c77ad2.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-99fbd1f2.js');
 const autoRunWhenReRenderTaskQueueSlimmer_abstract = require('./auto-run-when-re-render-task-queue-slimmer.abstract-5734634d.js');
 const timer = require('./timer-5f33058b.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-9b7095a4.js');
 const componentGlobalStyleSlimmer = require('./component-global-style-slimmer-93c5fb50.js');
 require('./icon-manager-c12c6ea9.js');
 require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
@@ -28,20 +28,21 @@ require('./dynamic-slimmer-f31fdfd7.js');
 require('./misc-3d30df91.js');
 require('./observer-f49483e8.js');
 require('./string-39438062.js');
-require('./type-guard-362d7da3.js');
+require('./type-guard-3ec852d7.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-9f58a4e4.js');
+require('./internal-translation-controller-fb1532f4.js');
 require('./static-subject-title-5829a298.js');
-require('./dark-mode-style-controller-3a04af3d.js');
+require('./dark-mode-style-controller-bd765afb.js');
+require('./tinycolor-polyfill-502efaa8.js');
 require('./vega-nonce-manager-df69d3ed.js');
 require('./try-get-document-c0ebd39a.js');
 require('./index-592b4052.js');
-require('./internal-vega-event-manager-cc0f511c.js');
-require('./range-cdd61881.js');
-require('./keyboard-manager-slimmer-93fcbf46.js');
-require('./keyboard-manager-c89a66d3.js');
+require('./internal-vega-event-manager-fef893bf.js');
+require('./range-5bd6d72b.js');
+require('./keyboard-manager-slimmer-879ff4f3.js');
+require('./keyboard-manager-5ed6c472.js');
 require('./synchronize-task-queue-1ee80e94.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-9129ef52.js');

package/dist/cjs/vega-color-picker.cjs.entry.js

@@ -7,11 +7,11 @@ const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const component = require('./component-1e352960.js');
 const ui = require('./ui-ae4ee13d.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-982dbfe4.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-0f3a028e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-bee6b676.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
@@ -20,8 +20,8 @@ require('./observer-f49483e8.js');
 require('./misc-3d30df91.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./dom-node-subject-observer-factory-9110cb94.js');
-require('./vega-internal-event-id-a1837fa2.js');
-require('./internal-translation-controller-9f58a4e4.js');
+require('./vega-internal-event-id-87014e4f.js');
+require('./internal-translation-controller-fb1532f4.js');
 require('./index-592b4052.js');
 require('./try-get-document-c0ebd39a.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
@@ -32,8 +32,8 @@ require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-e5b50cbf.js');
-require('./internal-vega-event-manager-cc0f511c.js');
+require('./sub-state-observer-slimmer-b8f6f27b.js');
+require('./internal-vega-event-manager-fef893bf.js');
 
 const VegaColorPickerRuntimeMetricsPayloadDefinition = [
   {
@@ -62,7 +62,7 @@ const VegaColorPickerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-const vegaColorPickerCss = ":host{display:inline-block;text-align:left;line-height:normal}:host vega-field-label{margin-bottom:8px}:host(.disabled) .color-picker-inline{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.disabled) .color-picker-inline-items:hover{box-shadow:none}:host(.disabled) .color-picker-inline-items:focus-within{box-shadow:none}:host .color-picker-inline{border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding:12px;max-width:max-content}:host .color-picker-inline-items{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));border-radius:4px;width:24px;height:24px;cursor:pointer;align-items:center;justify-content:center}:host .color-picker-inline-items.selected{border-color:rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))}:host .color-picker-inline-items:hover{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host .color-picker-inline-items:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));box-shadow:0px 0px 0px 1px rgba(var(--v-bg-primary, 252, 252, 252, 1)) inset;border:1px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host .checkmark-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host .checkmark-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host vega-text{padding-left:8px;padding-right:8px;padding-top:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .color-picker-inline.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-hidden{display:none}:host vega-flex{flex-wrap:wrap;max-width:264px}";
+const vegaColorPickerCss = ":host{display:inline-block;text-align:left;line-height:normal}:host vega-field-label{margin-bottom:8px}:host(.disabled) .color-picker-inline{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.disabled) .color-picker-inline-items:hover{box-shadow:none}:host(.disabled) .color-picker-inline-items:focus-within{box-shadow:none}:host .color-picker-inline{border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding:12px;max-width:max-content}:host .color-picker-inline-items{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));border-radius:4px;width:24px;height:24px;cursor:pointer;align-items:center;justify-content:center}:host .color-picker-inline-items.selected{border-color:rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))}:host .color-picker-inline-items:hover{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host .color-picker-inline-items:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));box-shadow:0px 0px 0px 1px rgba(var(--v-bg-primary, 252, 252, 252, 1)) inset;border:1px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host .checkmark-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host .checkmark-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host vega-text{padding-left:8px;padding-right:8px;padding-top:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .color-picker-inline.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-hidden{display:none}:host vega-flex{flex-wrap:wrap}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -175,8 +175,22 @@ const VegaColorPicker = class {
      * @vegaVersion 2.30.0
      */
     this.isInline = false;
+    /**
+     * Specifies the maximum number of color swatches displayed per row.
+     *
+     * When the number of `colors` exceeds `columns`, the remaining swatches
+     *    wrap to additional rows. For example, `columns={5}` with 10 colors
+     *    renders 2 rows of 5 swatches.
+     *
+     * Defaults to `8` to preserve the original single-row layout for the
+     *    default 8-color palette.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.columns = 8;
     this.renderColorPickerContainer = () => {
-      return (index.h("div", { class: ui.arrayToClassString([!this.isInline ? 'color-picker-inline' : null]), ref: (e) => (this.colorPickerContainerRef = e) }, index.h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center" }, this.colors.map((color) => {
+      const columns = this.getValidColumns();
+      return (index.h("div", { class: ui.arrayToClassString([!this.isInline ? 'color-picker-inline' : null]), ref: (e) => (this.colorPickerContainerRef = e) }, index.h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center", style: { maxWidth: `${columns * 34 - 8}px` } }, this.colors.map((color) => {
         const selected = this.value === color;
         return (index.h("div", { id: color, class: { 'color-picker-inline-items': true, 'selected': selected }, ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
             backgroundColor: color,
@@ -216,6 +230,10 @@ const VegaColorPicker = class {
   renderLabelDom() {
     return (index.h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label }));
   }
+  getValidColumns() {
+    const flooredColumns = Math.floor(this.columns);
+    return Number.isFinite(flooredColumns) && flooredColumns > 0 ? flooredColumns : 1;
+  }
   // W3C Recommendations for color contrast rules, please check the following link for more details:
   // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
   isDarkColorCheckmark(bgColor, lightColor = '#fcfcfc', darkColor = '#203645') {

package/dist/cjs/vega-color-swatch.cjs.entry.js

@@ -0,0 +1,245 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-58ea899e.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const component = require('./component-1e352960.js');
+const tinycolorPolyfill = require('./tinycolor-polyfill-502efaa8.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-fef893bf.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-bcb458b2.js');
+const vegaEventId = require('./vega-event-id-c08ce3d3.js');
+const translationSlimmer = require('./translation-slimmer-d0c77ad2.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./change-manager-a297e4d2.js');
+require('./dom-node-subject-observer-factory-9110cb94.js');
+require('./observer-f49483e8.js');
+require('./ui-ae4ee13d.js');
+require('./try-get-document-c0ebd39a.js');
+require('./internal-translation-controller-fb1532f4.js');
+require('./static-subject-title-5829a298.js');
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+/**
+ * Renderer slimmer for vega-color-swatch.
+ */
+class VegaColorSwatchRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handler for click event on the swatch. It will emit the click event to the parent component if the swatch is not disabled.
+     *
+     * @param {MouseEvent} e The click event.
+     */
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.stopPropagation();
+        return;
+      }
+      // Prevent the click event from bubbling up to avoid duplicate events if the event semantics namespace is not 'vega'.
+      if (internalVegaEventManager.internalVegaEventManager.getSemantics(this.host).namespace !== 'vega') {
+        e.stopPropagation();
+      }
+      this.clickEventEmitter.emit();
+    };
+  }
+  /**
+   * Render function for the slimmer. It will be called by the component to render the content.
+   *
+   * @returns {HTMLElement} The rendered content.
+   */
+  render() {
+    const isClearView = this.variant === 'clear';
+    const colorExists = !isClearView && !!this.color;
+    return (index.h("div", { class: {
+        'vega-color-swatch-container': true,
+        [`size-${this.size}`]: true,
+        [`shape-${this.shape}`]: true,
+        'swatch-clear': isClearView,
+      }, role: "button", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() },
+      index.h("div", { class: "swatch" },
+        colorExists && index.h("span", { class: "color-fill", style: this.getFillColorStyles() }),
+        isClearView && index.h("span", { class: "clear-line" }),
+        this.selected && !isClearView && (index.h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),
+      this.label && this.renderLabel()));
+  }
+  renderLabel() {
+    return (index.h("vega-font", { class: "swatch-label", variant: "font-field-value", color: this.disabled ? 'text-disabled' : 'text-primary' }, this.label));
+  }
+  /**
+   * Get the appropriate aria-label for the swatch based on the provided props.
+   *
+   * @returns {string} The aria-label for the swatch.
+   */
+  getAriaLabel() {
+    if (this.label)
+      return this.label;
+    if (this.variant === 'clear')
+      return this.translationSlimmer.t('Clear color');
+    if (this.color)
+      return this.translationSlimmer.t('Color {0}', this.color);
+    return this.translationSlimmer.t('Color swatch');
+  }
+  /**
+   * Get the fill color styles for the swatch.
+   *
+   * @returns {Record<string, string>} The styles for the swatch fill.
+   */
+  getFillColorStyles() {
+    const styles = {};
+    if (this.color) {
+      styles.backgroundColor = this.color;
+    }
+    return styles;
+  }
+  /**
+   * The check mark color will automatically adjust to maintain contrast against the swatch color. If no color is provided, it defaults to 'text-primary'.
+   *
+   * @returns {TextColorsTokenType} The appropriate check mark color.
+   */
+  getCheckMarkColor() {
+    if (!this.color)
+      return 'text-primary';
+    const textBlack = 'text-black';
+    const textWhite = 'text-white';
+    const isColorDark = new tinycolorPolyfill.TinyColorPolyfill(this.color).isDark();
+    return isColorDark ? textWhite : textBlack;
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "variant", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "label", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "color", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "selected", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "size", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "disabled", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "shape", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "clickEventEmitter", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "translationSlimmer", void 0);
+
+const vegaColorSwatchCss = ":host{display:inline-block;vertical-align:middle}.vega-color-swatch-container{display:flex;flex-direction:row;align-items:center;border-radius:4px}.swatch{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:relative;flex-shrink:0;overflow:hidden}.shape-basket .swatch{border-radius:8px}.shape-block .swatch{border-radius:0px}.check-icon{position:relative;z-index:1}.swatch-clear .swatch{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-danger, 230, 50, 87, 1))}.swatch-clear .swatch .clear-line{position:absolute;width:141%;height:0;border-top-width:1px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-danger, 230, 50, 87, 1));transform:rotate(-45deg);transform-origin:center}.color-fill{position:absolute;display:block;top:0;left:0;width:100%;height:100%}.size-extra-small .swatch{width:24px;height:24px;min-width:24px}.size-extra-small.shape-basket .swatch{border-radius:4px}.size-small .swatch{width:40px;height:40px;min-width:40px}.size-small.shape-basket{border-radius:8px}.size-medium .swatch{width:48px;height:48px;min-width:48px}.size-medium.shape-basket{border-radius:8px}@media (hover: hover){:host(:not(.disabled)) .swatch:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host(:not(.disabled)) .swatch-clear .swatch:hover{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}:host(:not(.disabled)) .swatch-clear .swatch:hover .clear-line{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}}.vega-color-swatch-container:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.vega-color-swatch-container:focus-visible .swatch{border-width:1px;border-style:solid;border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.vega-color-swatch-container:focus-visible.swatch-clear{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.vega-color-swatch-container:focus-visible.swatch-clear .swatch{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}.vega-color-swatch-container:focus-visible.swatch-clear .swatch .clear-line{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}:host(:not(.disabled)) .vega-color-swatch-container{cursor:pointer}:host(.disabled) .vega-color-swatch-container{cursor:not-allowed}:host(.disabled) .swatch{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));pointer-events:none}:host(.disabled) .swatch .color-fill,:host(.disabled) .swatch .check-icon{opacity:0.5}:host(.disabled) .swatch .label-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.disabled) .swatch .clear-line{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))}.swatch-label{margin-left:8px}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaColorSwatch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
+    this.vegaColorSwatchRenderer = new VegaColorSwatchRenderer();
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaColorSwatch, vegaEventId.VegaClick);
+    /**
+     * Specifies the CSS color value for the swatch (e.g. '#841AC1', 'rgb(15, 137, 82)', 'rgba(15, 137, 82, 0.5)').
+     * Applies only when `variant` is set to 'swatch'.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.color = '';
+    /**
+     * Indicates whether the swatch is currently selected. When selected, a check mark is shown, and its color automatically adjusts to maintain contrast against the swatch color.
+     *
+     * @vegaVersion 2.82.0
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.selected = false;
+    /**
+     * Specifies the label or title for the swatch.
+     *    It provides descriptive text that helps identify the purpose or content expected in the swatch.
+     
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the swatch.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.size = 'small';
+    /**
+     * Specifies whether the swatch is disabled.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies the visual style and prominence of the swatch.
+     *    It determines how the swatch will be presented to the user.
+     * - 'swatch': Displays the color fill.
+     * - 'clear': Displays a diagonal line to indicate no color (clear selection).
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.variant = 'swatch';
+    /**
+     * Controls the outer shape of the swatch.
+     * - 'basket': Rounded corners for spaced layouts.
+     * - 'block': Square corners for dense or flush layouts.
+     *
+     * @vegaVersion 2.82.0
+     */
+    this.shape = 'basket';
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: {
+        disabled: this.disabled,
+      } }, this.vegaColorSwatchRenderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaColorSwatch.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "translationSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "vegaColorSwatchRenderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaColorSwatch.prototype, "clickEventEmitter", void 0);
+VegaColorSwatch.style = vegaColorSwatchCss;
+
+exports.vega_color_swatch = VegaColorSwatch;