@zohodesk/components 1.6.13 → 1.6.15

package/es/v1/helpers/colorHelpers/paletteUtilities.README.md

@@ -71,7 +71,7 @@ Per color (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`):
 | `.active\:text-{color}:active` | Active state |
 | `.selected\:text-{color}` | Selected state |
 
-**Special:** `.text-default-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
+**Special:** `.text-brand-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
 
 **Utility classes:** `.text-transparent`, `.text-white`, `.text-black`
 
@@ -204,7 +204,7 @@ Returns a text CSS class from `textColor.module.css`.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `textTone` | `string` | Yes | Text tone (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `default-filled`) |
+| `textTone` | `string` | Yes | Text tone (`brand`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `brand-filled`) |
 | `state` | `string` | No | State prefix (`hover`, `focus`, `active`, `selected`). Omit for base class. |
 
 > **Note:** `textTone` has no `isLighter` equivalent. Use `filledTextTone` (e.g. `white`) directly when needed.
@@ -214,7 +214,7 @@ Returns a text CSS class from `textColor.module.css`.
 ```javascript
 getTextClass({ textTone: 'green' })                    // → paletteTextStyle['text-green']
 getTextClass({ state: 'hover', textTone: 'white' })    // → paletteTextStyle['hover:text-white']
-getTextClass({ textTone: 'default-filled' })            // → paletteTextStyle['text-default-filled']
+getTextClass({ textTone: 'brand-filled' })               // → paletteTextStyle['text-brand-filled']
 ```
 
 #### `getBorderClass({ state?, tone, isLighter? })`
@@ -254,7 +254,7 @@ import getPaletteClasses from './colorHelper';
 
 | Palette | Tone (bg/border) | Text Tone | Filled Text Tone |
 |---------|-------------------|-----------|-------------------|
-| `default` | `default` | `default` | `default-filled` |
+| `default` | `brand` | `brand` | `brand-filled` |
 | `primary` | `blue` | `blue` | `white` |
 | `secondary` | `grey` | `grey` | `white` |
 | `danger` | `red` | `red` | `white` |
@@ -267,7 +267,8 @@ Unknown palettes return `DUMMY_OBJECT` (empty frozen object).
 | Parameter | Values | Effect |
 |-----------|--------|--------|
 | `palette` | `default` \| `primary` \| `secondary` \| `danger` \| `success` | Selects the color tone config from `PALETTE_CONFIG` |
-| `bgAppearance` | `'none'` \| `'filled'` \| other | `'filled'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `bgAppearance` | `'none'` \| `'default'` \| other | `'default'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `isSelected` | `boolean` | `true` → folds selected-state classes into `bg`, `text`, and `border` (replaces their resting values with the `selected` state class) |
 | `borderAppearance` | `'none'` \| `'onHover'` \| other | `'none'` → transparent base, no state borders; `'onHover'` → transparent base, with state borders; other → visible base + state borders |
 | `paletteShade` | `'lighter'` \| other | `'lighter'` → `-light` variant for bg and base border; also keeps text as `textTone` instead of `filledTextTone` |
 
@@ -277,33 +278,30 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 
 | Condition | Base text (`text`) | State text (`hoverText`, etc.) |
 |---|---|---|
-| `bgAppearance: 'filled'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
-| `bgAppearance: 'filled'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
+| `bgAppearance: 'default'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
+| `bgAppearance: 'default'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
 | `bgAppearance:` other (not `'none'`) + default shade | `textTone` | `filledTextTone` |
 | `bgAppearance:` other (not `'none'`) + `'lighter'` shade | `textTone` | `textTone` |
 | `bgAppearance: 'none'` | `textTone` | `textTone` |
 
-> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'filled'` but also not `'none'`.
+> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'default'` but also not `'none'`.
 
 #### Return Value
 
 ```javascript
 {
-  bg,             // getBgClass({ tone, isLighter }) — only if bgAppearance === 'filled'
-  hoverBg,        // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
-  focusBg,        // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
-  activeBg,       // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
-  selectedBg,     // getBgClass({ state: 'selected', tone, isLighter }) — if bgAppearance !== 'none'
-  text,           // getTextClass({ textTone: baseTextTone })
-  hoverText,      // getTextClass({ state: 'hover', textTone: stateTextTone })
-  focusText,      // getTextClass({ state: 'focus', textTone: stateTextTone })
-  activeText,     // getTextClass({ state: 'active', textTone: stateTextTone })
-  selectedText,   // getTextClass({ state: 'selected', textTone: stateTextTone })
-  border,         // 'border-transparent' if onHover/none — else getBorderClass({ tone, isLighter })
-  hoverBorder,    // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
-  focusBorder,    // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
-  activeBorder,   // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
-  selectedBorder  // getBorderClass({ state: 'selected', tone }) — if borderAppearance !== 'none'
+  bg,          // isSelected → selected bg (if bgAppearance !== 'none'); else base bg (only if bgAppearance === 'default')
+  hoverBg,     // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
+  focusBg,     // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
+  activeBg,    // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
+  text,        // isSelected → selected text class; else getTextClass({ textTone: baseTextTone })
+  hoverText,   // getTextClass({ state: 'hover', textTone: stateTextTone })
+  focusText,   // getTextClass({ state: 'focus', textTone: stateTextTone })
+  activeText,  // getTextClass({ state: 'active', textTone: stateTextTone })
+  border,      // isSelected → selected border (if borderAppearance !== 'none'); else resting border
+  hoverBorder, // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
+  focusBorder, // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
+  activeBorder // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
 }
 ```
 
@@ -314,13 +312,13 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → 'bg-blue'           (filled + default shade)
+// classes.bg           → 'bg-blue'           (bgAppearance: 'default' + default shade)
 // classes.hoverBg      → 'hover:bg-blue'
-// classes.text         → 'text-white'        (filledTextTone — filled + not lighter)
+// classes.text         → 'text-white'        (filledTextTone — bgAppearance: 'default' + not lighter)
 // classes.hoverText    → 'hover:text-white'  (filledTextTone — hasBgState + not lighter)
 // classes.border       → 'border-blue'       (visible appearance)
 // classes.hoverBorder  → 'hover:border-blue'
@@ -331,11 +329,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'danger',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'none',
   paletteShade: 'lighter',
 });
-// classes.bg           → 'bg-red-light'      (filled + lighter shade)
+// classes.bg           → 'bg-red-light'      (bgAppearance: 'default' + lighter shade)
 // classes.hoverBg      → 'hover:bg-red-light'
 // classes.text         → 'text-red'          (textTone — lighter shade overrides filledTextTone)
 // classes.hoverText    → 'hover:text-red'    (textTone — lighter shade)
@@ -365,11 +363,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'filled'
+  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'default'
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → undefined            (not 'filled' → no base bg)
+// classes.bg           → undefined            (not 'default' → no base bg)
 // classes.hoverBg      → 'hover:bg-blue'     (not 'none' → state bg present)
 // classes.text         → 'text-blue'          (baseTextTone — not filled, so textTone)
 // classes.hoverText    → 'hover:text-white'   (stateTextTone — hasBgState + not lighter → filledTextTone!)
@@ -379,6 +377,8 @@ const classes = getPaletteClasses({
 
 > This shows a key behavior: the base text is the normal tone, but **state text switches to `filledTextTone`** because the hover/state background will be filled (dark).
 
+> **Note on `isSelected`:** Pass `isSelected: true` to fold the selected state into `bg`, `text`, and `border`. Instead of the resting class, each returns its `selected:` variant class. There are no separate `selectedBg`/`selectedText`/`selectedBorder` return keys.
+
 ---
 
 ## Behavior Summary

package/es/v1/{Button/_shared → shared}/Loader/Loader.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import style from "./Loader_v1.module.css";
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import style from "./Loader_v1.module.css";
 
 const Loader = props => {
   const {
     customClass
   } = props;
   const {
-    customWrapperClass = ''
+    wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.spinner} ${customWrapperClass}`,
+    className: `${style.spinner} ${wrapper}`,
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js

@@ -13,7 +13,7 @@ describe('Loader', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Loader, {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/shared/Loader/props/defaultProps.js

@@ -0,0 +1,5 @@
+import { DUMMY_OBJECT } from '@zohodesk/utils/es/constantProps/constant';
+const defaultProps = {
+  customClass: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/{Button/_shared → shared}/Loader/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   customClass: PropTypes.shape({
-    customWrapperClass: PropTypes.string
+    wrapper: PropTypes.string
   })
 };
 export default propTypes;

package/es/v1/{Button/_shared → shared}/SuccessTick/SuccessTick.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import style from "./SuccessTick_v1.module.css";
 import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
+import style from "./SuccessTick_v1.module.css";
 
 const SuccessTick = props => {
   const {
     customClass
   } = props;
   const {
-    customWrapperClass = ''
+    wrapper = ''
   } = customClass;
   return /*#__PURE__*/React.createElement("svg", {
-    className: `${style.tick} ${customWrapperClass}`,
+    className: `${style.tick} ${wrapper}`,
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/es/v1/{Button/_shared → shared}/SuccessTick/__tests__/SuccessTick.spec.js

@@ -13,7 +13,7 @@ describe('SuccessTick', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(SuccessTick, {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     }));
     expect(asFragment()).toMatchSnapshot();

package/es/v1/shared/SuccessTick/props/defaultProps.js

@@ -0,0 +1,5 @@
+import { DUMMY_OBJECT } from "@zohodesk/utils/es/constantProps/constant";
+const defaultProps = {
+  customClass: DUMMY_OBJECT
+};
+export default defaultProps;

package/es/v1/{Button/_shared → shared}/SuccessTick/props/propTypes.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   customClass: PropTypes.shape({
-    customWrapperClass: PropTypes.string
+    wrapper: PropTypes.string
   })
 };
 export default propTypes;

package/lib/Select/Select.js

@@ -1136,7 +1136,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,
           align: "both"
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter()) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), getFooter ? /*#__PURE__*/_react["default"].createElement(_Card.CardFooter, null, getFooter({
+          closePopup: _this7.handlePopupClose
+        })) : null)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, getChildren())));
       }) : null);

package/lib/v1/Button/Button.js

@@ -27,9 +27,9 @@ var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Loader = _interopRequireDefault(require("./_shared/Loader/Loader"));
+var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
 
-var _SuccessTick = _interopRequireDefault(require("./_shared/SuccessTick/SuccessTick"));
+var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
 var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
 
@@ -105,7 +105,8 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       successOverlayClass = classes.successOverlayClass,
       contentWrapperClass = classes.contentWrapperClass,
       textClassName = classes.textClassName,
-      buttonClassName = classes.buttonClassName;
+      buttonClassName = classes.buttonClassName,
+      iconClassName = classes.iconClassName;
   var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
 
   var _handleClick = function _handleClick(event) {
@@ -168,6 +169,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
     }
 
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+      iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,

package/lib/v1/Button/__tests__/Button.spec.js

@@ -239,11 +239,14 @@ describe('Button - Component', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should apply customClass to wrapper and text', function () {
+  test('Should apply customClass to wrapper, text and icon', function () {
     var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
       customClass: {
         wrapper: 'customButtonClass',
-        text: 'customTextClass'
+        text: 'customTextClass',
+        icon: 'customIconClass'
       }
     }, "Button")),
         asFragment = _render25.asFragment;

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

@@ -27,7 +27,7 @@ exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
+exports[`Button - Component Should apply customClass to wrapper, text and icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
@@ -42,6 +42,13 @@ exports[`Button - Component Should apply customClass to wrapper and text 1`] = `
       data-id="flex"
       data-test-id="flex"
     >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-plus  customIconClass  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
       <div
         class="dotted size13 customTextClass"
       >

package/lib/v1/Button/css/cssJSLogic.js

@@ -7,7 +7,7 @@ exports["default"] = cssJSLogic;
 
 var _Button_v1Module = _interopRequireDefault(require("./Button_v1.module.css"));
 
-var _compileClassNames3 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
+var _compileClassNames4 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
 
 var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));
 
@@ -47,7 +47,9 @@ function cssJSLogic(_ref) {
   var _customClass$wrapper = customClass.wrapper,
       wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper,
       _customClass$text = customClass.text,
-      textClassCustom = _customClass$text === void 0 ? '' : _customClass$text;
+      textClassCustom = _customClass$text === void 0 ? '' : _customClass$text,
+      _customClass$icon = customClass.icon,
+      iconClassCustom = _customClass$icon === void 0 ? '' : _customClass$icon;
   var isLoading = status === _constants2.STATUS.LOADING;
   var isSuccess = status === _constants2.STATUS.SUCCESS;
   var isInteractive = !isDisabled && !isReadOnly;
@@ -76,13 +78,15 @@ function cssJSLogic(_ref) {
   var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
   var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
   var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
-  var buttonClassName = (0, _compileClassNames3["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
-  var textClassName = (0, _compileClassNames3["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
+  var buttonClassName = (0, _compileClassNames4["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive), _defineProperty(_compileClassNames, text, !!text), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive), _defineProperty(_compileClassNames, border, !!border), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isReadOnly || isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isReadOnly || isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
+  var textClassName = (0, _compileClassNames4["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
+  var iconClassName = (0, _compileClassNames4["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
   return {
     buttonClassName: buttonClassName,
     textClassName: textClassName,
     contentWrapperClass: overlayActive ? _Button_v1Module["default"].overlayHidden : _Button_v1Module["default"].contentWrapper,
     loaderOverlayClass: _Button_v1Module["default"].loaderOverlay,
-    successOverlayClass: _Button_v1Module["default"].successOverlay
+    successOverlayClass: _Button_v1Module["default"].successOverlay,
+    iconClassName: iconClassName
   };
 }

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

@@ -132,7 +132,7 @@ var buildPaletteClasses = function buildPaletteClasses(config, _ref4) {
     }) : '',
     text: isSelected ? getTextClass({
       state: 'selected',
-      textTone: baseTextTone
+      textTone: hasBgState ? stateTextTone : baseTextTone
     }) : getTextClass({
       textTone: baseTextTone
     }),
@@ -148,11 +148,14 @@ var buildPaletteClasses = function buildPaletteClasses(config, _ref4) {
       state: 'active',
       textTone: stateTextTone
     }),
-    border: isSelected ? getBorderClass({
+    border: isSelected ? !hasBorderState ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       state: 'selected',
-      tone: tone,
-      isLighter: isLighter
-    }) : hasTransparentBorder ? _borderColorModule["default"]['border-transparent'] : getBorderClass({
+      tone: tone
+    }) : hasTransparentBorder ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       tone: tone,
       isLighter: isLighter
     }),

package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md

@@ -71,7 +71,7 @@ Per color (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`):
 | `.active\:text-{color}:active` | Active state |
 | `.selected\:text-{color}` | Selected state |
 
-**Special:** `.text-default-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
+**Special:** `.text-brand-filled` (+ hover/focus/active/selected) — uses `--zdt_v1_palette_default_filled_text` for filled default backgrounds.
 
 **Utility classes:** `.text-transparent`, `.text-white`, `.text-black`
 
@@ -204,7 +204,7 @@ Returns a text CSS class from `textColor.module.css`.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `textTone` | `string` | Yes | Text tone (`default`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `default-filled`) |
+| `textTone` | `string` | Yes | Text tone (`brand`, `grey`, `blue`, `green`, `orange`, `red`, `yellow`, `white`, `black`, `brand-filled`) |
 | `state` | `string` | No | State prefix (`hover`, `focus`, `active`, `selected`). Omit for base class. |
 
 > **Note:** `textTone` has no `isLighter` equivalent. Use `filledTextTone` (e.g. `white`) directly when needed.
@@ -214,7 +214,7 @@ Returns a text CSS class from `textColor.module.css`.
 ```javascript
 getTextClass({ textTone: 'green' })                    // → paletteTextStyle['text-green']
 getTextClass({ state: 'hover', textTone: 'white' })    // → paletteTextStyle['hover:text-white']
-getTextClass({ textTone: 'default-filled' })            // → paletteTextStyle['text-default-filled']
+getTextClass({ textTone: 'brand-filled' })               // → paletteTextStyle['text-brand-filled']
 ```
 
 #### `getBorderClass({ state?, tone, isLighter? })`
@@ -254,7 +254,7 @@ import getPaletteClasses from './colorHelper';
 
 | Palette | Tone (bg/border) | Text Tone | Filled Text Tone |
 |---------|-------------------|-----------|-------------------|
-| `default` | `default` | `default` | `default-filled` |
+| `default` | `brand` | `brand` | `brand-filled` |
 | `primary` | `blue` | `blue` | `white` |
 | `secondary` | `grey` | `grey` | `white` |
 | `danger` | `red` | `red` | `white` |
@@ -267,7 +267,8 @@ Unknown palettes return `DUMMY_OBJECT` (empty frozen object).
 | Parameter | Values | Effect |
 |-----------|--------|--------|
 | `palette` | `default` \| `primary` \| `secondary` \| `danger` \| `success` | Selects the color tone config from `PALETTE_CONFIG` |
-| `bgAppearance` | `'none'` \| `'filled'` \| other | `'filled'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `bgAppearance` | `'none'` \| `'default'` \| other | `'default'` → base bg + state bg; `'none'` → no bg, no state bg, no filled text logic; other → no base bg but state bg + filled text logic |
+| `isSelected` | `boolean` | `true` → folds selected-state classes into `bg`, `text`, and `border` (replaces their resting values with the `selected` state class) |
 | `borderAppearance` | `'none'` \| `'onHover'` \| other | `'none'` → transparent base, no state borders; `'onHover'` → transparent base, with state borders; other → visible base + state borders |
 | `paletteShade` | `'lighter'` \| other | `'lighter'` → `-light` variant for bg and base border; also keeps text as `textTone` instead of `filledTextTone` |
 
@@ -277,33 +278,30 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 
 | Condition | Base text (`text`) | State text (`hoverText`, etc.) |
 |---|---|---|
-| `bgAppearance: 'filled'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
-| `bgAppearance: 'filled'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
+| `bgAppearance: 'default'` + default shade | `filledTextTone` (e.g. `white`) | `filledTextTone` |
+| `bgAppearance: 'default'` + `'lighter'` shade | `textTone` (e.g. `blue`) | `textTone` |
 | `bgAppearance:` other (not `'none'`) + default shade | `textTone` | `filledTextTone` |
 | `bgAppearance:` other (not `'none'`) + `'lighter'` shade | `textTone` | `textTone` |
 | `bgAppearance: 'none'` | `textTone` | `textTone` |
 
-> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'filled'` but also not `'none'`.
+> **Key insight:** `baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone`. `stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone`. This means state text can differ from base text when `bgAppearance` is not `'default'` but also not `'none'`.
 
 #### Return Value
 
 ```javascript
 {
-  bg,             // getBgClass({ tone, isLighter }) — only if bgAppearance === 'filled'
-  hoverBg,        // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
-  focusBg,        // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
-  activeBg,       // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
-  selectedBg,     // getBgClass({ state: 'selected', tone, isLighter }) — if bgAppearance !== 'none'
-  text,           // getTextClass({ textTone: baseTextTone })
-  hoverText,      // getTextClass({ state: 'hover', textTone: stateTextTone })
-  focusText,      // getTextClass({ state: 'focus', textTone: stateTextTone })
-  activeText,     // getTextClass({ state: 'active', textTone: stateTextTone })
-  selectedText,   // getTextClass({ state: 'selected', textTone: stateTextTone })
-  border,         // 'border-transparent' if onHover/none — else getBorderClass({ tone, isLighter })
-  hoverBorder,    // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
-  focusBorder,    // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
-  activeBorder,   // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
-  selectedBorder  // getBorderClass({ state: 'selected', tone }) — if borderAppearance !== 'none'
+  bg,          // isSelected → selected bg (if bgAppearance !== 'none'); else base bg (only if bgAppearance === 'default')
+  hoverBg,     // getBgClass({ state: 'hover', tone, isLighter }) — if bgAppearance !== 'none'
+  focusBg,     // getBgClass({ state: 'focus', tone, isLighter }) — if bgAppearance !== 'none'
+  activeBg,    // getBgClass({ state: 'active', tone, isLighter }) — if bgAppearance !== 'none'
+  text,        // isSelected → selected text class; else getTextClass({ textTone: baseTextTone })
+  hoverText,   // getTextClass({ state: 'hover', textTone: stateTextTone })
+  focusText,   // getTextClass({ state: 'focus', textTone: stateTextTone })
+  activeText,  // getTextClass({ state: 'active', textTone: stateTextTone })
+  border,      // isSelected → selected border (if borderAppearance !== 'none'); else resting border
+  hoverBorder, // getBorderClass({ state: 'hover', tone }) — if borderAppearance !== 'none'
+  focusBorder, // getBorderClass({ state: 'focus', tone }) — if borderAppearance !== 'none'
+  activeBorder // getBorderClass({ state: 'active', tone }) — if borderAppearance !== 'none'
 }
 ```
 
@@ -314,13 +312,13 @@ The text color depends on both `bgAppearance` and `paletteShade`:
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → 'bg-blue'           (filled + default shade)
+// classes.bg           → 'bg-blue'           (bgAppearance: 'default' + default shade)
 // classes.hoverBg      → 'hover:bg-blue'
-// classes.text         → 'text-white'        (filledTextTone — filled + not lighter)
+// classes.text         → 'text-white'        (filledTextTone — bgAppearance: 'default' + not lighter)
 // classes.hoverText    → 'hover:text-white'  (filledTextTone — hasBgState + not lighter)
 // classes.border       → 'border-blue'       (visible appearance)
 // classes.hoverBorder  → 'hover:border-blue'
@@ -331,11 +329,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'danger',
-  bgAppearance: 'filled',
+  bgAppearance: 'default',
   borderAppearance: 'none',
   paletteShade: 'lighter',
 });
-// classes.bg           → 'bg-red-light'      (filled + lighter shade)
+// classes.bg           → 'bg-red-light'      (bgAppearance: 'default' + lighter shade)
 // classes.hoverBg      → 'hover:bg-red-light'
 // classes.text         → 'text-red'          (textTone — lighter shade overrides filledTextTone)
 // classes.hoverText    → 'hover:text-red'    (textTone — lighter shade)
@@ -365,11 +363,11 @@ const classes = getPaletteClasses({
 ```javascript
 const classes = getPaletteClasses({
   palette: 'primary',
-  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'filled'
+  bgAppearance: 'hover-fill',  // any value that isn't 'none' or 'default'
   borderAppearance: 'visible',
   paletteShade: 'default',
 });
-// classes.bg           → undefined            (not 'filled' → no base bg)
+// classes.bg           → undefined            (not 'default' → no base bg)
 // classes.hoverBg      → 'hover:bg-blue'     (not 'none' → state bg present)
 // classes.text         → 'text-blue'          (baseTextTone — not filled, so textTone)
 // classes.hoverText    → 'hover:text-white'   (stateTextTone — hasBgState + not lighter → filledTextTone!)
@@ -379,6 +377,8 @@ const classes = getPaletteClasses({
 
 > This shows a key behavior: the base text is the normal tone, but **state text switches to `filledTextTone`** because the hover/state background will be filled (dark).
 
+> **Note on `isSelected`:** Pass `isSelected: true` to fold the selected state into `bg`, `text`, and `border`. Instead of the resting class, each returns its `selected:` variant class. There are no separate `selectedBg`/`selectedText`/`selectedBorder` return keys.
+
 ---
 
 ## Behavior Summary

package/lib/v1/{Button/_shared → shared}/Loader/Loader.js

@@ -7,20 +7,20 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
-
 var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
 var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
+var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var Loader = function Loader(props) {
   var customClass = props.customClass;
-  var _customClass$customWr = customClass.customWrapperClass,
-      customWrapperClass = _customClass$customWr === void 0 ? '' : _customClass$customWr;
+  var _customClass$wrapper = customClass.wrapper,
+      wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(customWrapperClass),
+    className: "".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"

package/lib/v1/{Button/_shared → shared}/Loader/__tests__/Loader.spec.js

@@ -18,7 +18,7 @@ describe('Loader', function () {
   test('renders with customClass', function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
       customClass: {
-        customWrapperClass: 'my-custom-class'
+        wrapper: 'my-custom-class'
       }
     })),
         asFragment = _render2.asFragment;

package/lib/v1/{Button/_shared/SuccessTick → shared/Loader}/props/defaultProps.js

@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
+var _constant = require("@zohodesk/utils/es/constantProps/constant");
+
 var defaultProps = {
-  customClass: {}
+  customClass: _constant.DUMMY_OBJECT
 };
 var _default = defaultProps;
 exports["default"] = _default;

package/lib/v1/{Button/_shared → shared}/Loader/props/propTypes.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var propTypes = {
   customClass: _propTypes["default"].shape({
-    customWrapperClass: _propTypes["default"].string
+    wrapper: _propTypes["default"].string
   })
 };
 var _default = propTypes;