@zohodesk/components 1.0.0-temp-252.3 → 1.0.0-temp-252.4

package/README.md

@@ -4,9 +4,10 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 # 1.6.14
 
-- **Select**
-  - Added `renderCustomDropBoxHeader` prop to render a custom node at the top of the dropdown, above the suggestions list.
-  - Added `customDropBoxHeader` key under the `customClass` prop to style the custom header wrapper.
+- **v1/Button**
+  - `Loader` and `SuccessTick` components moved from `v1/Button/_shared/` to new `v1/shared/` to make them reusable across v1.
+- **colorHelper**
+  - Updated `colorHelper` logic to fix text color issues in bg on `onHover` and `isSelected` state combinations.
 
 # 1.6.13
 

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -258,9 +258,6 @@
 	/* select */
 	--zdt_select_emptystate_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_select_disable_text:var(--dot_inputDisable);
-	--zdt_select_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_select_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
-	--zdt_select_wrapper_dropdown_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* multiselect */
 	--zdt_multiselect_default_border:var(--dot_inputLine);

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -258,9 +258,6 @@
 	/* select */
 	--zdt_select_emptystate_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_select_disable_text:var(--dot_inputDisable);
-	--zdt_select_wrapper_container_border:hsla(218, calc(var(--zd-saturation, 1) * 42.22%), calc(91.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_select_wrapper_container_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
-	--zdt_select_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* multiselect */
 	--zdt_multiselect_default_border:var(--dot_inputLine);

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -258,9 +258,6 @@
 	/* select */
 	--zdt_select_emptystate_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_select_disable_text:var(--dot_inputDisable);
-	--zdt_select_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_select_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
-	--zdt_select_wrapper_dropdown_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* multiselect */
 	--zdt_multiselect_default_border:var(--dot_inputLine);

package/es/Select/Select.js

@@ -813,8 +813,7 @@ export class SelectComponent extends Component {
       renderCustomSearchClearComponent,
       renderCustomSelectedValue,
       inputFieldLineA11y,
-      customClass,
-      renderCustomDropBoxHeader
+      customClass
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -845,8 +844,7 @@ export class SelectComponent extends Component {
     } = customProps;
     const {
       dropBox: dropBoxClass = '',
-      cardContent: cardContentClass = '',
-      customDropBoxHeader: customDropBoxHeaderClass = ''
+      cardContent: cardContentClass = ''
     } = customClass;
     const inputFieldLineA11yAttributes = this.getInputFieldLineA11y({
       setAriaId,
@@ -1023,92 +1021,83 @@ export class SelectComponent extends Component {
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId,
         customClass: {
-          customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
+          customDropBox: dropBoxClass
         }
-      }, (() => {
-        const dropdownContent = isLoading ? /*#__PURE__*/React.createElement(Container, {
-          align: "both",
-          className: style.loader
-        }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
-          flexible: true
-        }, /*#__PURE__*/React.createElement(Card, {
-          onScroll: this.handleScroll
-        }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
-          className: `${style.search} ${style[size]}`
-        }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-          a11y: {
-            ariaControls: setAriaId,
-            ariaAutocomplete: 'list',
-            ariaDescribedby: ariaErrorId
-          },
-          inputRef: this.searchInputRef,
-          maxLength: maxLength,
-          onChange: this.handleSearch,
-          onKeyDown: this.handleKeyDown,
-          placeHolder: searchBoxPlaceHolder,
-          size: searchBoxSize,
-          value: searchStr,
-          onClear: this.handleClearSearch,
-          dataId: `${dataId}_search`,
-          i18nKeys: TextBoxIcon_i18n,
-          autoComplete: autoComplete,
-          customProps: {
-            TextBoxProps: DropdownSearchTextBoxProps
-          },
-          renderCustomClearComponent: renderCustomSearchClearComponent
-        }))) : null, /*#__PURE__*/React.createElement(CardContent, {
-          shrink: true,
-          customClass: `
+      }, isLoading ? /*#__PURE__*/React.createElement(Container, {
+        align: "both",
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, !getChildren ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Card, {
+        onScroll: this.handleScroll
+      }, needSearch ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement("div", {
+        className: `${style.search} ${style[size]}`
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        a11y: {
+          ariaControls: setAriaId,
+          ariaAutocomplete: 'list',
+          ariaDescribedby: ariaErrorId
+        },
+        inputRef: this.searchInputRef,
+        maxLength: maxLength,
+        onChange: this.handleSearch,
+        onKeyDown: this.handleKeyDown,
+        placeHolder: searchBoxPlaceHolder,
+        size: searchBoxSize,
+        value: searchStr,
+        onClear: this.handleClearSearch,
+        dataId: `${dataId}_search`,
+        i18nKeys: TextBoxIcon_i18n,
+        autoComplete: autoComplete,
+        customProps: {
+          TextBoxProps: DropdownSearchTextBoxProps
+        },
+        renderCustomClearComponent: renderCustomSearchClearComponent
+      }))) : null, /*#__PURE__*/React.createElement(CardContent, {
+        shrink: true,
+        customClass: `
                               ${!tabletMode && dropBoxSize ? style[dropBoxSize] : ''} ${cardContentClass}`,
-          eleRef: this.suggestionContainerRef
-        }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
-          key: searchStr.trim(),
-          activeId: selectedId,
-          isVirtualizerEnabled: isVirtualizerEnabled,
-          getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
-          suggestions: suggestions,
-          getRef: this.suggestionItemRef,
-          hoverOption: hoverIndex,
-          onClick: this.handleChange,
-          onMouseEnter: this.handleMouseEnter,
-          dataId: `${dataId}_Options`,
-          needTick: needTick,
-          needBorder: needListBorder,
-          selectedOptions: [selectedId],
-          className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
-          listItemSize: listItemSize,
-          htmlId: setAriaId,
-          a11y: {
-            ariaParentRole: 'listbox',
-            role: 'option'
-          }
-        }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
-          isLoading: isFetchingOptions,
-          options: options,
-          searchString: searchStr,
-          suggestions: suggestions,
-          dataId: dataId,
-          renderCustomEmptyState: renderCustomEmptyState,
-          getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
-          i18nKeys: i18nKeys,
-          htmlId: ariaErrorId
-        }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter()) : null)) : /*#__PURE__*/React.createElement(Box, {
-          flexible: true
-        }, getChildren()));
-        return renderCustomDropBoxHeader ? /*#__PURE__*/React.createElement("div", {
-          className: style.dropBoxListContainer
-        }, /*#__PURE__*/React.createElement("div", {
-          className: `${customDropBoxHeaderClass} ${style.customDropBoxHeaderContainer}`
-        }, renderNode(renderCustomDropBoxHeader, {
-          closePopup: this.handlePopupClose
-        })), /*#__PURE__*/React.createElement("div", {
-          className: style.dropdownOptions
-        }, dropdownContent)) : dropdownContent;
-      })());
+        eleRef: this.suggestionContainerRef
+      }, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, _extends({
+        key: searchStr.trim(),
+        activeId: selectedId,
+        isVirtualizerEnabled: isVirtualizerEnabled,
+        getVirtualizerPublicMethods: this.getVirtualizerPublicMethods,
+        setVirtualizerContainerRefFunction: this.setSuggestionsVirtualizerContainerRefFunction,
+        suggestions: suggestions,
+        getRef: this.suggestionItemRef,
+        hoverOption: hoverIndex,
+        onClick: this.handleChange,
+        onMouseEnter: this.handleMouseEnter,
+        dataId: `${dataId}_Options`,
+        needTick: needTick,
+        needBorder: needListBorder,
+        selectedOptions: [selectedId],
+        className: `${tabletMode ? style.responsivelistItemContainer : style.listItemContainer}`,
+        listItemSize: listItemSize,
+        htmlId: setAriaId,
+        a11y: {
+          ariaParentRole: 'listbox',
+          role: 'option'
+        }
+      }, SuggestionsProps)) : /*#__PURE__*/React.createElement(EmptyState, {
+        isLoading: isFetchingOptions,
+        options: options,
+        searchString: searchStr,
+        suggestions: suggestions,
+        dataId: dataId,
+        renderCustomEmptyState: renderCustomEmptyState,
+        getCustomEmptyState: getCustomEmptyState ? this.handleGetAddNewOptionText : null,
+        i18nKeys: i18nKeys,
+        htmlId: ariaErrorId
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))), getFooter ? /*#__PURE__*/React.createElement(CardFooter, null, getFooter({
+        closePopup: this.handlePopupClose
+      })) : null)) : /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, getChildren())));
     }) : null);
   }
 

package/es/Select/Select.module.css

@@ -22,12 +22,12 @@
 
 .box_small .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size6) ;
+  padding-inline:var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
   padding-block: var(--zd_size12) ;
-  padding-inline: var(--zd_size15) ;
+  padding-inline:var(--zd_size15) ;
 }
 
 .hide {
@@ -45,12 +45,12 @@
 
 .small.search {
   padding-block: 0 ;
-  padding-inline: var(--zd_size5) ;
+  padding-inline:var(--zd_size5) ;
 }
 
 .medium.search {
   padding-block: var(--zd_size3) 0 ;
-  padding-inline: var(--zd_size20) ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .title {
@@ -59,17 +59,17 @@
 
 .groupTitle {
   margin-block: var(--zd_size6) ;
-  margin-inline: 0 ;
+  margin-inline:0 ;
 }
 
 .listItemContainer {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivelistItemContainer {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .readonly {
@@ -111,19 +111,18 @@
 
 .dropBoxList {
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .responsivedropBoxList {
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
 
 .rotate {
   transform: rotateX(180deg);
 }
-
-.rightPlaceholder {
+.rightPlaceholder{
   height: 100% ;
 }
 
@@ -142,29 +141,3 @@
 .loader {
   padding: var(--zd_size10) ;
 }
-
-.dropBoxWithCustomHeader {
-  border-radius: 7px;
-}
-
-.dropBoxListContainer {
-  width: 100% ;
-  border-radius: 7px;
-  padding: var(--zd_size10) ;
-  border: 1px solid var(--zdt_select_wrapper_container_border);
-    background: var(--zdt_select_wrapper_container_bg);
-  box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
-}
-
-.dropdownOptions {
-  padding-inline: var(--zd_size1) ;
-  padding-block: var(--zd_size1) ;
-  background-color: var(--zdt_select_wrapper_dropdown_bg);
-    border: 1px solid var(--zdt_select_wrapper_container_border);
-  border-radius: 7px;
-}
-
-.customDropBoxHeaderContainer {
-  margin-block-end: var(--zd_size6) ;
-  margin-inline: var(--zd_size1) ;
-}

package/es/Select/props/defaultProps.js

@@ -38,8 +38,7 @@ export const Select_defaultProps = {
   isAbsolutePositioningNeeded: true,
   allowValueFallback: true,
   inputFieldLineA11y: {},
-  customClass: {},
-  renderCustomDropBoxHeader: null
+  customClass: {}
 };
 export const GroupSelect_defaultProps = {
   animationStyle: 'bounce',

package/es/Select/props/propTypes.js

@@ -107,10 +107,8 @@ export const Select_propTypes = {
   inputFieldLineA11y: PropTypes.object,
   customClass: PropTypes.shape({
     dropBox: PropTypes.string,
-    cardContent: PropTypes.string,
-    customDropBoxHeader: PropTypes.string
-  }),
-  renderCustomDropBoxHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+    cardContent: PropTypes.string
+  })
 };
 export const GroupSelect_propTypes = {
   groupedOptions: PropTypes.arrayOf(PropTypes.shape({

package/es/v1/Button/Button.js

@@ -11,8 +11,8 @@ import propTypes from "./props/propTypes";
 import defaultProps from "./props/defaultProps";
 import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
-import Loader from "./_shared/Loader/Loader";
-import SuccessTick from "./_shared/SuccessTick/SuccessTick";
+import Loader from "../shared/Loader/Loader";
+import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
 
 const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
@@ -70,7 +70,8 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     successOverlayClass,
     contentWrapperClass,
     textClassName,
-    buttonClassName
+    buttonClassName,
+    iconClassName
   } = classes;
   const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
 
@@ -134,6 +135,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     }
 
     return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+      iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,

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

@@ -218,13 +218,16 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should apply customClass to wrapper and text', () => {
+  test('Should apply customClass to wrapper, text and icon', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
+      variant: "iconWithText",
+      iconName: "ZD-plus",
       customClass: {
         wrapper: 'customButtonClass',
-        text: 'customTextClass'
+        text: 'customTextClass',
+        icon: 'customIconClass'
       }
     }, "Button"));
     expect(asFragment()).toMatchSnapshot();

package/es/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/es/v1/Button/css/cssJSLogic.js

@@ -31,7 +31,8 @@ export default function cssJSLogic(_ref) {
   } = props;
   const {
     wrapper: wrapperClass = '',
-    text: textClassCustom = ''
+    text: textClassCustom = '',
+    icon: iconClassCustom = ''
   } = customClass;
   const isLoading = status === STATUS.LOADING;
   const isSuccess = status === STATUS.SUCCESS;
@@ -86,11 +87,15 @@ export default function cssJSLogic(_ref) {
   const textClassName = compileClassNames({
     [textClassCustom]: !!textClassCustom
   });
+  const iconClassName = compileClassNames({
+    [iconClassCustom]: !!iconClassCustom
+  });
   return {
     buttonClassName,
     textClassName,
     contentWrapperClass: overlayActive ? style.overlayHidden : style.contentWrapper,
     loaderOverlayClass: style.loaderOverlay,
-    successOverlayClass: style.successOverlay
+    successOverlayClass: style.successOverlay,
+    iconClassName
   };
 }

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

@@ -117,7 +117,7 @@ const buildPaletteClasses = (config, _ref4) => {
     }) : '',
     text: isSelected ? getTextClass({
       state: 'selected',
-      textTone: baseTextTone
+      textTone: hasBgState ? stateTextTone : baseTextTone
     }) : getTextClass({
       textTone: baseTextTone
     }),
@@ -133,11 +133,14 @@ const buildPaletteClasses = (config, _ref4) => {
       state: 'active',
       textTone: stateTextTone
     }),
-    border: isSelected ? getBorderClass({
+    border: isSelected ? !hasBorderState ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       state: 'selected',
-      tone,
-      isLighter
-    }) : hasTransparentBorder ? paletteBorderStyle['border-transparent'] : getBorderClass({
+      tone
+    }) : hasTransparentBorder ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
       tone,
       isLighter
     }),

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