@zohodesk/components 1.6.24 → 1.6.26

package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Label - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
     role="group"
@@ -22,7 +22,7 @@ exports[`Label - Snapshot Render with a11y attributes 1`] = `
 exports[`Label - Snapshot Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default custom-container"
+    class="d-inline-flex d-flex-row d-items-center container default custom-container"
     data-id="flex"
     data-test-id="flex"
   >
@@ -39,7 +39,7 @@ exports[`Label - Snapshot Render with customClass 1`] = `
 exports[`Label - Snapshot Render with customId and testId 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="label-customId"
     data-selector-id="label-customId"
     data-test-id="label-testId"
@@ -57,7 +57,7 @@ exports[`Label - Snapshot Render with customId and testId 1`] = `
 exports[`Label - Snapshot Render with customProps 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center shrink container default"
+    class="d-inline-flex d-flex-row d-items-center d-min-w-0 d-flex-shrink container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -74,7 +74,7 @@ exports[`Label - Snapshot Render with customProps 1`] = `
 exports[`Label - Snapshot Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -91,7 +91,7 @@ exports[`Label - Snapshot Render with default props 1`] = `
 exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -108,7 +108,7 @@ exports[`Label - Snapshot Render with fontWeight=regular 1`] = `
 exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -125,7 +125,7 @@ exports[`Label - Snapshot Render with fontWeight=semibold 1`] = `
 exports[`Label - Snapshot Render with htmlFor 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -143,7 +143,7 @@ exports[`Label - Snapshot Render with htmlFor 1`] = `
 exports[`Label - Snapshot Render with i18nKeys 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -167,7 +167,7 @@ exports[`Label - Snapshot Render with i18nKeys 1`] = `
 exports[`Label - Snapshot Render with isClipped=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -184,7 +184,7 @@ exports[`Label - Snapshot Render with isClipped=true 1`] = `
 exports[`Label - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container disabled"
+    class="d-inline-flex d-flex-row d-items-center container disabled"
     data-id="flex"
     data-test-id="flex"
   >
@@ -201,7 +201,7 @@ exports[`Label - Snapshot Render with isDisabled=true 1`] = `
 exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container readonly default"
+    class="d-inline-flex d-flex-row d-items-center container readonly default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -218,7 +218,7 @@ exports[`Label - Snapshot Render with isReadOnly=true 1`] = `
 exports[`Label - Snapshot Render with isRequired=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -242,7 +242,7 @@ exports[`Label - Snapshot Render with isRequired=true 1`] = `
 exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -266,7 +266,7 @@ exports[`Label - Snapshot Render with isRequired=true isClipped=true 1`] = `
 exports[`Label - Snapshot Render with layout=block 1`] = `
 <DocumentFragment>
   <div
-    class="flex row alignItems_center container default"
+    class="d-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -283,7 +283,7 @@ exports[`Label - Snapshot Render with layout=block 1`] = `
 exports[`Label - Snapshot Render with layout=inline 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -300,7 +300,7 @@ exports[`Label - Snapshot Render with layout=inline 1`] = `
 exports[`Label - Snapshot Render with palette=default 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -317,7 +317,7 @@ exports[`Label - Snapshot Render with palette=default 1`] = `
 exports[`Label - Snapshot Render with palette=secondary 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container secondary"
+    class="d-inline-flex d-flex-row d-items-center container secondary"
     data-id="flex"
     data-test-id="flex"
   >
@@ -334,7 +334,7 @@ exports[`Label - Snapshot Render with palette=secondary 1`] = `
 exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -358,7 +358,7 @@ exports[`Label - Snapshot Render with requiredType=asterisk 1`] = `
 exports[`Label - Snapshot Render with requiredType=text 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -382,7 +382,7 @@ exports[`Label - Snapshot Render with requiredType=text 1`] = `
 exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container required"
+    class="d-inline-flex d-flex-row d-items-center container required"
     data-id="flex"
     data-test-id="flex"
   >
@@ -406,7 +406,7 @@ exports[`Label - Snapshot Render with shouldHighlightRequired=true 1`] = `
 exports[`Label - Snapshot Render with size=medium 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -423,7 +423,7 @@ exports[`Label - Snapshot Render with size=medium 1`] = `
 exports[`Label - Snapshot Render with size=small 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-id="flex"
     data-test-id="flex"
   >
@@ -440,7 +440,7 @@ exports[`Label - Snapshot Render with size=small 1`] = `
 exports[`Label - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container default"
+    class="d-inline-flex d-flex-row d-items-center container default"
     data-custom-attr="true"
     data-id="flex"
     data-test-id="flex"

package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -46,12 +46,12 @@ exports[`Switch - Snapshot Render with a11y attributes 1`] = `
 exports[`Switch - Snapshot Render with customClass 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -89,13 +89,13 @@ exports[`Switch - Snapshot Render with customClass 1`] = `
 exports[`Switch - Snapshot Render with customId and testId 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="switch-customId"
     data-selector-id="switch-customId"
     data-test-id="switch-testId"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -133,12 +133,12 @@ exports[`Switch - Snapshot Render with customId and testId 1`] = `
 exports[`Switch - Snapshot Render with default props 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -176,12 +176,12 @@ exports[`Switch - Snapshot Render with default props 1`] = `
 exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium checked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium checked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -220,12 +220,12 @@ exports[`Switch - Snapshot Render with isChecked=true 1`] = `
 exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium checked disabled"
+    class="d-inline-flex d-flex-row d-items-center container medium checked disabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -265,12 +265,12 @@ exports[`Switch - Snapshot Render with isDisabled=true 1`] = `
 exports[`Switch - Snapshot Render with tag attributes 1`] = `
 <DocumentFragment>
   <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
+    class="d-inline-flex d-flex-row d-items-center container medium unChecked enabled"
     data-id="flex"
     data-test-id="flex"
   >
     <div
-      class="noShrink trackWrapper"
+      class="d-flex-shrink-0 trackWrapper"
       data-id="flex"
       data-test-id="flex"
     >

package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js

@@ -0,0 +1,363 @@
+"use strict";
+
+var _colorHelper = _interopRequireDefault(require("../colorHelper"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var ALL_KEYS = ['bg', 'selectedBg', 'hoverBg', 'focusBg', 'activeBg', 'text', 'selectedText', 'hoverText', 'focusText', 'activeText', 'border', 'selectedBorder', 'hoverBorder', 'focusBorder', 'activeBorder'];
+describe('getPaletteClasses', function () {
+  // --- Return shape ---
+  it('returns an object with all 15 expected keys', function () {
+    var result = (0, _colorHelper["default"])({});
+    expect(Object.keys(result)).toEqual(expect.arrayContaining(ALL_KEYS));
+    expect(Object.keys(result)).toHaveLength(15);
+  }); // --- Default / empty inputs ---
+
+  it('returns empty strings for all keys when called with no palette or appearance', function () {
+    var result = (0, _colorHelper["default"])({});
+    ALL_KEYS.forEach(function (key) {
+      expect(result[key]).toBe('');
+    });
+  });
+  it('returns empty strings for all keys when called with undefined arguments', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: undefined,
+      appearance: undefined,
+      hoverAppearance: undefined,
+      selectedAppearance: undefined
+    });
+    ALL_KEYS.forEach(function (key) {
+      expect(result[key]).toBe('');
+    });
+  }); // --- Base appearance (bg) ---
+
+  it('returns a non-empty bg class when palette and appearance.bg=true are provided', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-brand-80');
+  });
+  it('returns lighter bg shade when palette is brandLighter and appearance.bg=true', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brandLighter',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-brand-10');
+  });
+  it('returns correct bg class for info palette', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'info',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-blue-80');
+  });
+  it('returns correct bg class for secondary palette', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'secondary',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-grey-65');
+  });
+  it('returns correct bg class for danger palette', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'danger',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-red-70');
+  });
+  it('returns correct bg class for success palette', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'success',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-green-80');
+  });
+  it('returns correct bg class for warning palette', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'warning',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.bg).toBe('bg-orange-80');
+  }); // --- BG_BORDER_INVALID filtering ---
+
+  it('returns empty bg when appearance.bg is "black" (BG_BORDER_INVALID)', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: 'black'
+      }
+    });
+    expect(result.bg).toBe('');
+  });
+  it('returns empty bg when appearance.bg is "white" (BG_BORDER_INVALID)', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: 'white'
+      }
+    });
+    expect(result.bg).toBe('');
+  });
+  it('returns empty border when appearance.border is "black" (BG_BORDER_INVALID)', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        border: 'black'
+      }
+    }); // border falls back to transparent when borderConfig is null and state is undefined
+
+    expect(result.border).toBe('border-transparent');
+  }); // --- TEXT_INVALID filtering ---
+
+  it('returns empty text when appearance.text is "transparent" (TEXT_INVALID)', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        text: 'transparent'
+      }
+    });
+    expect(result.text).toBe('');
+  }); // --- Border fallback ---
+
+  it('returns border-transparent when no border appearance is set and state is base', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.border).toBe('border-transparent');
+  });
+  it('returns empty hoverBorder when hoverAppearance has no border and bg only', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      },
+      hoverAppearance: {
+        bg: true
+      }
+    }); // state is 'hover', no borderConfig → empty string (state branch)
+
+    expect(result.hoverBorder).toBe('');
+  }); // --- Hover appearance ---
+
+  it('returns hover-state bg classes for hoverAppearance.bg=true with same palette tone', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      },
+      hoverAppearance: {
+        bg: true
+      }
+    }); // isContinuingTone is true (same tone, same isLighter), so darker=true → hover shade (100)
+
+    expect(result.hoverBg).toBe('hover:bg-brand-100');
+    expect(result.focusBg).toBe('focus:bg-brand-100');
+    expect(result.activeBg).toBe('active:bg-brand-100');
+  });
+  it('returns hover bg from a different palette tone (no isContinuingTone)', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      },
+      hoverAppearance: {
+        bg: 'info'
+      }
+    }); // hoverAppearance.bg='info' → resolveConfig('info', paletteConfig) → PALETTE_CONFIG['info']
+    // tone='blue', isLighter=false, isContinuingTone=false → base shade (80)
+
+    expect(result.hoverBg).toBe('hover:bg-blue-80');
+  });
+  it('returns empty hover classes when hoverAppearance is not provided', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.hoverBg).toBe('');
+    expect(result.focusBg).toBe('');
+    expect(result.activeBg).toBe('');
+  }); // --- Selected appearance ---
+
+  it('returns selected-state bg when selectedAppearance.bg=true', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      },
+      selectedAppearance: {
+        bg: true
+      }
+    });
+    expect(result.selectedBg).toBe('selected:bg-brand-80');
+  });
+  it('returns empty selected classes when selectedAppearance is not provided', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true
+      }
+    });
+    expect(result.selectedBg).toBe('');
+    expect(result.selectedText).toBe('');
+    expect(result.selectedBorder).toBe('');
+  }); // --- Text classes ---
+
+  it('returns text class when appearance.text=true and palette has a textTone', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        text: true
+      }
+    }); // resolveConfig(true, paletteConfig) → { ...paletteConfig, isInherit: true }
+    // resolveTextTone: isInherit=true, bgConfig=null (no bg in appearance), uses textTone='brand'
+
+    expect(result.text).toBe('text-brand-80');
+  });
+  it('returns filled text tone when bg is present and palette is not lighter', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'info',
+      appearance: {
+        bg: true,
+        text: true
+      }
+    }); // bgConfig is present (tone='blue', isLighter=false), textConfig.isInherit=true
+    // resolveTextTone: not isLighter → filledTextTone='white'
+    // getTextClass(undefined, 'white', ...) → TONE_INTENSITY['white'] is undefined
+    // → paletteTextStyle['text-white'] → 'text-white'
+
+    expect(result.text).toBe('text-white');
+  });
+  it('returns lighter text tone when palette is lighter and bg is present', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'infoLighter',
+      appearance: {
+        bg: true,
+        text: true
+      }
+    }); // bgConfig.isLighter=true → filledTextTone='blue' → getTextClass for 'blue'
+    // TONE_INTENSITY['blue'] = { base: 80, ... } → shade=80
+
+    expect(result.text).toBe('text-blue-80');
+  }); // --- Border classes ---
+
+  it('returns base border shade when appearance.border=true (isLighter=false)', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        border: true
+      }
+    }); // tone='brand', isLighter=false, darker=false → shade = intensity.base = 80
+
+    expect(result.border).toBe('border-brand-80');
+  });
+  it('returns borderLight shade when appearance.border=true on lighter palette', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brandLighter',
+      appearance: {
+        border: true
+      }
+    }); // tone='brand', isLighter=true, darker=false → shade = intensity.borderLight = 10
+
+    expect(result.border).toBe('border-brand-10');
+  }); // --- Custom tone (not in TONE_INTENSITY) ---
+
+  it('returns empty bg when appearance.bg uses a tone not in TONE_INTENSITY and not in CSS', function () {
+    var result = (0, _colorHelper["default"])({
+      appearance: {
+        bg: 'custom-tone'
+      }
+    }); // PALETTE_CONFIG['custom-tone'] is undefined, resolveConfig returns { tone: 'custom-tone', ... }
+    // TONE_INTENSITY['custom-tone'] is undefined → looks up paletteBgStyle['bg-custom-tone']
+    // That class is not in the CSS file → undefined → falls back to ''
+
+    expect(result.bg).toBe('');
+  }); // --- Each PALETTE_CONFIG key produces a valid (non-error) result ---
+
+  it.each(Object.keys(_constants.PALETTE_CONFIG))('does not throw for palette "%s" with all appearances set', function (palette) {
+    expect(function () {
+      (0, _colorHelper["default"])({
+        palette: palette,
+        appearance: {
+          bg: true,
+          border: true,
+          text: true
+        },
+        hoverAppearance: {
+          bg: true,
+          border: true,
+          text: true
+        },
+        selectedAppearance: {
+          bg: true,
+          border: true,
+          text: true
+        }
+      });
+    }).not.toThrow();
+  });
+  it.each(Object.keys(_constants.PALETTE_CONFIG))('returns an object with all 15 keys for palette "%s"', function (palette) {
+    var result = (0, _colorHelper["default"])({
+      palette: palette,
+      appearance: {
+        bg: true,
+        border: true,
+        text: true
+      },
+      hoverAppearance: {
+        bg: true
+      },
+      selectedAppearance: {
+        bg: true
+      }
+    });
+    expect(Object.keys(result)).toHaveLength(15);
+  }); // --- Full appearance object (bg + border + text together) ---
+
+  it('populates bg, text, and border simultaneously when all appearance fields are set', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: true,
+        border: true,
+        text: true
+      }
+    });
+    expect(result.bg).not.toBe('');
+    expect(result.border).not.toBe('');
+    expect(result.text).not.toBe('');
+  }); // --- Appearance with bg=false (falsy) ---
+
+  it('returns empty bg when appearance.bg is false', function () {
+    var result = (0, _colorHelper["default"])({
+      palette: 'brand',
+      appearance: {
+        bg: false,
+        border: true
+      }
+    });
+    expect(result.bg).toBe('');
+    expect(result.border).not.toBe('');
+  });
+});