@heartlandone/vega 2.81.0 → 2.82.0

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-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);

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

@@ -0,0 +1,155 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+: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;
+}