@heartlandone/vega 2.81.0 → 2.83.0

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

@@ -39,6 +39,8 @@ export class VegaBanner {
     this.bannerTitle = '';
     /**
      * Specifies the content displayed within the banner.
+     * Also supports slot-based content: place a child element with `slot="content"` inside
+     * the banner to render rich HTML content. The slot takes precedence over this property.
      *
      * @vegaVersion 2.8.0
      */
@@ -147,7 +149,7 @@ export class VegaBanner {
             "name": "vegaVersion",
             "text": "2.8.0"
           }],
-        "text": "Specifies the content displayed within the banner."
+        "text": "Specifies the content displayed within the banner.\nAlso supports slot-based content: place a child element with `slot=\"content\"` inside\nthe banner to render rich HTML content. The slot takes precedence over this property."
       },
       "attribute": "content",
       "reflect": false,

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

@@ -46,11 +46,16 @@
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
 
-:host(.checked) .vega-checkbox-container > .vega-checkbox-icon {
+: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(.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));
 }
 
@@ -65,16 +70,11 @@
   border-color: rgba(var(--v-border-color-action-active, 29, 65, 195, 1));
 }
 
-:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:active {
+: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(.checked) .vega-checkbox-container > .vega-checkbox-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 :host(.disabled) .vega-checkbox-container {
   cursor: not-allowed;
 }
@@ -94,7 +94,8 @@
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
 }
 
-:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon {
+: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));
 }
 
@@ -102,7 +103,8 @@
   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(.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));
 }
 
@@ -111,7 +113,8 @@
   outline-offset: 3px;
 }
 
-:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:active {
+: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));
 }
 
@@ -126,12 +129,14 @@
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
 }
 
-:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon {
+: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(.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));
 }
 

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

@@ -87,6 +87,21 @@ export class VegaCheckbox {
      * @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.
      *
@@ -114,11 +129,14 @@ export class VegaCheckbox {
     /* 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) => {
@@ -145,6 +163,7 @@ export class VegaCheckbox {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
     }
+    this.syncNativeIndeterminate();
   }
   /**
    * Invoke this method to set the value of the checkbox.
@@ -163,6 +182,7 @@ export class VegaCheckbox {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-flex-shrink-0 v-min-w-min': isInsideCheckboxGroup,
         'checked': this.checked,
+        'indeterminate': this.indeterminate,
         'disabled': this.isDisabled(),
       } },
       h("label", { class: arrayToClassString([
@@ -170,13 +190,16 @@ export class VegaCheckbox {
           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-label": this.identifier || 'No label defined', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+        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: createEnterKeyHandlerToTriggerClick() }),
         h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()),
         h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
           this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
+    if (this.indeterminate) {
+      return h("vega-icon", { icon: "minus-sign", size: this.size === 'small' ? 'size-12' : 'size-16' });
+    }
     return this.checked ? (h("vega-icon", { icon: "checkmark", size: this.size === 'small' ? 'size-12' : 'size-16' })) : null;
   }
   renderLabelDom() {
@@ -191,6 +214,16 @@ export class VegaCheckbox {
   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
    *
@@ -305,6 +338,27 @@ export class VegaCheckbox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.83.0"
+          }],
+        "text": "Specifies whether the checkbox is in an indeterminate state.\n\nThe indeterminate state is a visual-only state typically used to represent\n   a checkbox whose value is neither fully checked nor fully unchecked,\n   such as a \"select all\" control where only some children are selected.\n\nSetting this property does not affect the `checked` or `value` properties.\n   User interaction (clicking) will clear the indeterminate state and\n   toggle `checked` as usual."
+      },
+      "attribute": "indeterminate",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

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

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

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

@@ -118,9 +118,23 @@ export class VegaColorPicker {
      * @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 = () => {
+      const columns = this.getValidColumns();
       return (h("div", { class: arrayToClassString([!this.isInline ? 'color-picker-inline' : null]), ref: (e) => (this.colorPickerContainerRef = e) },
-        h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center" }, this.colors.map((color) => {
+        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 (h("div", { id: color, class: { 'color-picker-inline-items': true, 'selected': selected }, ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
               backgroundColor: color,
@@ -164,6 +178,10 @@ export class VegaColorPicker {
   renderLabelDom() {
     return (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') {
@@ -407,6 +425,27 @@ export class VegaColorPicker {
       "attribute": "is-inline",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "columns": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.82.0"
+          }],
+        "text": "Specifies the maximum number of color swatches displayed per row.\n\nWhen the number of `colors` exceeds `columns`, the remaining swatches\n   wrap to additional rows. For example, `columns={5}` with 10 colors\n   renders 2 rows of 5 swatches.\n\nDefaults to `8` to preserve the original single-row layout for the\n   default 8-color palette."
+      },
+      "attribute": "columns",
+      "reflect": false,
+      "defaultValue": "8"
     }
   }; }
   static get events() { return [{

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

@@ -0,0 +1,127 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { TinyColorPolyfill } from '../../../../polyfill/tinycolor/tinycolor-polyfill';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import internalVegaEventManager from '../../../../helpers/event-manager/internal-vega-event-manager';
+/**
+ * Renderer slimmer for vega-color-swatch.
+ */
+export class VegaColorSwatchRenderer extends 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.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 (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: createEnterKeyHandlerToTriggerClick() },
+      h("div", { class: "swatch" },
+        colorExists && h("span", { class: "color-fill", style: this.getFillColorStyles() }),
+        isClearView && h("span", { class: "clear-line" }),
+        this.selected && !isClearView && (h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),
+      this.label && this.renderLabel()));
+  }
+  renderLabel() {
+    return (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(this.color).isDark();
+    return isColorDark ? textWhite : textBlack;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "color", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "selected", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "shape", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "clickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaColorSwatchRenderer.prototype, "translationSlimmer", void 0);