@elliemae/ds-form-combobox 3.70.0-next.27 → 3.70.0-next.28

package/dist/cjs/parts/DropdownIndicator.js

@@ -41,7 +41,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ComboBoxCTX = __toESM(require("../ComboBoxCTX.js"));
 var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
 var import_constants = require("../constants/index.js");
-const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, {
+const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
   name: import_constants.DSFormComboboxName,
   slot: import_constants.FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON
 })`
@@ -53,7 +53,7 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_button_v2.DS
   }
 
   & svg {
-    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
+    fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
   }
 
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}

package/dist/cjs/parts/DropdownIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/DropdownIndicator.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean | undefined }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n      disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DjB;AA7DN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,8BAA8B;AAC9B,yBAA4B;AAC5B,iCAAmC;AACnC,uBAAwD;AAExD,MAAM,2BAAuB,yBAAO,gCAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,oBACJ,0BAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV3, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean | undefined }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['600'])};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8DjB;AA5DN,mBAA+C;AAC/C,uBAAuB;AACvB,0BAA2B;AAC3B,sBAAiC;AACjC,8BAA8B;AAC9B,yBAA4B;AAC5B,iCAAmC;AACnC,uBAAwD;AAExD,MAAM,2BAAuB,yBAAO,gCAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,QAAM,oBACJ,0BAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,8CAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,sDAAC,oCAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
   "names": ["ComboBoxContext"]
 }

package/dist/cjs/parts/Section.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react2 = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_ds_menu_items = require("@elliemae/ds-menu-items");
 var import_constants = require("../constants.js");
 var import_ComboboxDataTestids = require("../ComboboxDataTestids.js");
@@ -48,13 +49,11 @@ const StyledSectionWrapper = (0, import_ds_system.styled)("section", { name: imp
   display: grid;
   align-items: center;
 `;
-const StyledSectionLabel = (0, import_ds_system.styled)("header", { name: import_constants2.DSFormComboboxName, slot: import_constants2.FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
+const StyledSectionLabel = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants2.DSFormComboboxName, slot: import_constants2.FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
   display: flex;
   align-items: center;
-  padding: 0px 16px;
-  min-height: 24px;
-  font-size: 1rem;
-  color: neutral-500;
+  min-height: 32px;
+  padding: 8px 16px;
 `;
 const Section = import_react2.default.memo((props) => {
   const {
@@ -84,6 +83,8 @@ const Section = import_react2.default.memo((props) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           StyledSectionLabel,
           {
+            component: "header",
+            variant: "b3-strong",
             id,
             role: "presentation",
             getOwnerProps,

package/dist/cjs/parts/Section.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Section.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport { StyledSingleMenuItem, StyledMultiMenuItem } from './menu-list/styled.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles?: React.CSSProperties;\n  innerRef?: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.OptionTypes[];\n  handleClick: (option: DSComboboxT.OptionTypes, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = Array.isArray(selectedValues)\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AAkCM;AA9FV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,2BAA0B;AAE1B,uBAAkC;AAElC,iCAAmC;AAEnC,wBAA2B;AAC3B,IAAAC,oBAAwD;AACxD,oBAA0D;AAe1D,MAAM,2BAAuB,yBAAO,WAAW,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,yBAAqB,yBAAO,UAAU,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1G,MAAM,UAAU,cAAAC,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAiF,MAAM,QAAQ,cAAc,IAC/G,oCACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,mCAAkB,WAAW;AACxC,mBAAO,4CAAC,oCAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,8CAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,OAAO,SAAS,mCAAkB,cAAU,8BAAW,gBAAgB,MAAM;AAAA,cACzF,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport { StyledSingleMenuItem, StyledMultiMenuItem } from './menu-list/styled.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles?: React.CSSProperties;\n  innerRef?: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.OptionTypes[];\n  handleClick: (option: DSComboboxT.OptionTypes, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled(DSTypography, { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  padding: 8px 16px;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = Array.isArray(selectedValues)\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        component=\"header\"\n        variant=\"b3-strong\"\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2DnB;AAoCM;AA/FV,IAAAA,gBAAkB;AAClB,uBAAuB;AACvB,2BAA6B;AAC7B,2BAA0B;AAE1B,uBAAkC;AAElC,iCAAmC;AAEnC,wBAA2B;AAC3B,IAAAC,oBAAwD;AACxD,oBAA0D;AAe1D,MAAM,2BAAuB,yBAAO,WAAW,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,yBAAqB,yBAAO,mCAAc,EAAE,MAAM,sCAAoB,MAAM,sCAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9G,MAAM,UAAU,cAAAC,QAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAiF,MAAM,QAAQ,cAAc,IAC/G,oCACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,mCAAkB,WAAW;AACxC,mBAAO,4CAAC,oCAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,8CAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,OAAO,SAAS,mCAAkB,cAAU,8BAAW,gBAAgB,MAAM;AAAA,cACzF,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["import_react", "import_constants", "React"]
 }

package/dist/cjs/parts/controls/styled.js

@@ -81,7 +81,7 @@ const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
   @media (max-width: ${import_ds_system.th.breakpoint("small")}) {
     padding: 1.25px 0px 1.25px 8px;
   }
-  margin: ${({ inline }) => inline ? "10px 16px" : ""};
+  margin: ${({ inline }) => inline ? "8px 16px" : ""};
   ${borderStyles}
   &:hover {
     ${({ disabled }) => !disabled ? hoverBorder : ""}

package/dist/cjs/parts/controls/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\nconst readOnlyBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst borderStyles = css<{ hasError: boolean; readOnly: boolean; applyAriaDisabled: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  ${({ readOnly, applyAriaDisabled }) => (readOnly || applyAriaDisabled ? readOnlyBorder : '')}\n`;\n\nconst backgroundStyles = css<{ disabled: boolean; applyAriaDisabled: boolean; readOnly: boolean }>`\n  background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {\n    if (readOnly || applyAriaDisabled) {\n      return theme.colors.neutral['050'];\n    }\n    if (disabled) {\n      return theme.colors.neutral['080'];\n    }\n    return '#ffffff';\n  }};\n`;\n\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  ${backgroundStyles}\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  min-height: 28px;\n  padding: 3px 0px 3px 8px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 1.25px 0px 1.25px 8px;\n  }\n  margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n  ${borderStyles}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSingleSelectWraper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTED_VALUES,\n})<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: ${({ disabled, readOnly, theme }) =>\n    disabled || readOnly ? theme.colors.neutral['600'] : theme.colors.neutral['700']};\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTION,\n})`\n  font-size: 1rem;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS,\n})`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS_SEPARATOR,\n})<Partial<StyledControlsWrapperT>>`\n  height: 100%;\n  width: 1px;\n  background-color: ${({ theme }) => theme.colors.neutral['400']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAChC,qBAAqB;AACrB,uBAAwD;AAWxD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,6BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGrE,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,IAC5G,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,iBAAiB,EAAG;AAAA;AAG9F,MAAM,mBAAmB;AAAA,gBACT,CAAC,EAAE,UAAU,mBAAmB,UAAU,MAAM,MAAM;AAClE,MAAI,YAAY,mBAAmB;AACjC,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,MAAI,UAAU;AACZ,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAGrD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,IACG,gBAAgB;AAAA;AAAA;AAAA,eAGL,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,oBAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,EAAG;AAAA,IACnD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,EAAE,UAAU,UAAU,MAAM,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACnE,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,iCAA6B,yBAAO,qBAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,yBAAyB,wBAAO;AAEtC,MAAM,kCAA8B,yBAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\nconst readOnlyBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst borderStyles = css<{ hasError: boolean; readOnly: boolean; applyAriaDisabled: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  ${({ readOnly, applyAriaDisabled }) => (readOnly || applyAriaDisabled ? readOnlyBorder : '')}\n`;\n\nconst backgroundStyles = css<{ disabled: boolean; applyAriaDisabled: boolean; readOnly: boolean }>`\n  background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {\n    if (readOnly || applyAriaDisabled) {\n      return theme.colors.neutral['050'];\n    }\n    if (disabled) {\n      return theme.colors.neutral['080'];\n    }\n    return '#ffffff';\n  }};\n`;\n\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  ${backgroundStyles}\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  min-height: 28px;\n  padding: 3px 0px 3px 8px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 1.25px 0px 1.25px 8px;\n  }\n  margin: ${({ inline }) => (inline ? '8px 16px' : '')};\n  ${borderStyles}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSingleSelectWraper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTED_VALUES,\n})<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: ${({ disabled, readOnly, theme }) =>\n    disabled || readOnly ? theme.colors.neutral['600'] : theme.colors.neutral['700']};\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTION,\n})`\n  font-size: 1rem;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS,\n})`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS_SEPARATOR,\n})<Partial<StyledControlsWrapperT>>`\n  height: 100%;\n  width: 1px;\n  background-color: ${({ theme }) => theme.colors.neutral['400']};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAChC,qBAAqB;AACrB,uBAAwD;AAWxD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,6BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGrE,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,IAC5G,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,iBAAiB,EAAG;AAAA;AAG9F,MAAM,mBAAmB;AAAA,gBACT,CAAC,EAAE,UAAU,mBAAmB,UAAU,MAAM,MAAM;AAClE,MAAI,YAAY,mBAAmB;AACjC,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,MAAI,UAAU;AACZ,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAGrD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,IACG,gBAAgB;AAAA;AAAA;AAAA,eAGL,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,oBAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,aAAa,EAAG;AAAA,IAClD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,+BAA2B,yBAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,EAAE,UAAU,UAAU,MAAM,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACnE,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,iCAA6B,yBAAO,qBAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,yBAAyB,wBAAO;AAEtC,MAAM,kCAA8B,yBAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/cjs/parts/controls-input/ControlsInput.js

@@ -81,7 +81,8 @@ const ControlsInput = () => {
   });
   const actualAriaDescribedBy = (0, import_react.useMemo)(() => {
     if (id) {
-      return `${ariaDescribedBy ?? ""} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;
+      const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;
+      return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;
     }
     return ariaDescribedBy;
   }, [ariaDescribedBy, id]);
@@ -103,6 +104,7 @@ const ControlsInput = () => {
     }
     return void 0;
   }, [focusOptionIdx, hasFocus, isLoading, menuState]);
+  const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);
   const handleOnPaste = (e) => {
     e.preventDefault();
     setInputValue(e.clipboardData.getData("text/plain"));
@@ -110,7 +112,7 @@ const ControlsInput = () => {
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledInputWrapper, { getOwnerProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputWidthReference, { innerRef: spanReference, children: spanReferenceText }),
-    showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputPlaceHolder, { getOwnerProps, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: showPlaceholder }) }),
+    showPlaceholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledInputPlaceHolder, { getOwnerProps, "aria-hidden": "true", $nonInteractive: isNonInteractive, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TruncatedTooltipText.TruncatedTooltipText, { value: showPlaceholder }) }),
     menuState === false && !inline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHiddenDiv, { id: `combo-listbox-${instanceUid}` }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledHiddenDiv, { id: `${id}_current_placeholder`, children: currentPlaceholder }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/cjs/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/ControlsInput.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n  StyledHiddenDiv,\n  StyledInput,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledInputWrapper,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props,\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper getOwnerProps={getOwnerProps}>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder getOwnerProps={getOwnerProps} aria-hidden=\"true\">\n          <TruncatedTooltipText value={showPlaceholder} />\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled ?? false}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable ?? false}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        disabled={disabled || applyAriaDisabled}\n        readOnly={readOnly}\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={!!(disabled || applyAriaDisabled)}\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n  StyledHiddenDiv,\n  StyledInput,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledInputWrapper,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props,\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n      return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  // `.some(Boolean)` over `||` keeps this component within its cyclomatic-complexity limit.\n  const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper getOwnerProps={getOwnerProps}>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder getOwnerProps={getOwnerProps} aria-hidden=\"true\" $nonInteractive={isNonInteractive}>\n          <TruncatedTooltipText value={showPlaceholder} />\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled ?? false}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable ?? false}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        disabled={disabled || applyAriaDisabled}\n        readOnly={readOnly}\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={!!(disabled || applyAriaDisabled)}\n      />\n    </StyledInputWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/controls-input/styled.js

@@ -66,7 +66,7 @@ const StyledInput = (0, import_ds_system.styled)("input", {
   padding: 0;
   z-index: 2;
   outline: none;
-  color: ${(props) => props.theme.colors.neutral[700]};
+  color: ${(props) => props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700]};
   &:focus {
     outline: none;
   }
@@ -82,7 +82,7 @@ const StyledInputPlaceHolder = (0, import_ds_system.styled)("div", {
   slot: import_constants.FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER
 })`
   font-style: italic;
-  color: ${(props) => props.theme.colors.neutral[500]};
+  color: ${(props) => props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500]};
   position: absolute;
   display: flex;
   align-items: center;

package/dist/cjs/parts/controls-input/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/controls-input/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAwD;AAEjD,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n  font-style: italic;\n  color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAwD;AAEjD,MAAM,uBAAmB,yBAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,kBAAc,yBAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1G,MAAM,4BAA4B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,yBAAqB,yBAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,sBAAkB,yBAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/parts/menu-list/LoadingContainer.js

@@ -69,7 +69,7 @@ const LoadingContainer = ({
       "aria-label": "Loading options please wait",
       "aria-multiselectable": isMulti,
       getOwnerProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledDSCircularIndeterminateIndicator, { size: "m", "aria-hidden": "true", getOwnerProps })
     }
   )
 );

package/dist/cjs/parts/menu-list/LoadingContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/LoadingContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}) => (\n  /**\n   * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`combo-listbox-${instanceUid}`}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    aria-multiselectable={isMulti}\n    getOwnerProps={getOwnerProps}\n  >\n    <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAxCJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AAExD,MAAM,cAAU,yBAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,WAAW;AAAA,MAChC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MAEA,sDAAC,0CAAuC,MAAK,KAAI,eAA8B;AAAA;AAAA,EACjF;AAAA;AAIF,IAAO,2BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}) => (\n  /**\n   * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`combo-listbox-${instanceUid}`}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    aria-multiselectable={isMulti}\n    getOwnerProps={getOwnerProps}\n  >\n    {/**\n     * PUI-18541 \u2014 the spinner exposes role=\"status\", which is a forbidden child of\n     * role=\"listbox\" (aria-allowed-children, axe Critical) \u2014 a regression from the PUI-18034\n     * rework. aria-hidden removes it from the accessibility tree so it no longer counts as a\n     * listbox child; the listbox's own aria-busy + aria-label remains the single loading\n     * announcement. Spinner stays purely visual.\n     */}\n    <StyledDSCircularIndeterminateIndicator size=\"m\" aria-hidden=\"true\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA/CJ,uBAAuB;AACvB,4CAAiD;AACjD,uBAAwD;AAExD,MAAM,cAAU,yBAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,6CAAyC,yBAAO,wEAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,WAAW;AAAA,MAChC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MASA,sDAAC,0CAAuC,MAAK,KAAI,eAAY,QAAO,eAA8B;AAAA;AAAA,EACpG;AAAA;AAIF,IAAO,2BAAQ;",
   "names": []
 }

package/dist/cjs/parts/menu-list/styled.js

@@ -73,7 +73,9 @@ const StyledSingleMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.S
   name: import_constants.DSFormComboboxName,
   slot: import_constants.FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
   preserveLegacyDataTestId: true
-})``;
+})`
+  ${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}
+`;
 const StyledMultiMenuItem = (0, import_ds_system.styled)(import_ds_menu_items.MultiMenuItem, {
   name: import_constants.DSFormComboboxName,
   slot: import_constants.FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,

package/dist/cjs/parts/menu-list/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/menu-list/styled.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,qBAAqB;AACrB,2BAA8C;AAC9C,uBAAwD;AAQjD,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,2BAAuB,yBAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,2BAAuB,yBAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,0BAAsB,yBAAO,oCAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\ntype IdleLabelColorProps = {\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n};\n\n/**\n * Combobox-specific idle color override for single menu item labels.\n *\n * The decision to render the idle label as neutral-700 is a combobox-level call\n * (team consistency with multi, which lands at neutral-700 via the checkbox spec),\n * not a generic menu-item rule. It lives here so other consumers of ds-menu-items\n * are not forced into a color opinion they did not ask for.\n *\n * Muted states (disabled / aria-disabled / readOnly) intentionally fall through\n * so disabledOption() in ds-menu-items-commons keeps owning neutral-500 and the\n * neutral-600 hover variant.\n */\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})<IdleLabelColorProps>`\n  ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}\n`;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEvB,qBAAqB;AACrB,2BAA8C;AAC9C,uBAAwD;AAQjD,MAAM,wBAAoB,yBAAO,qBAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,2BAAuB,yBAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,2BAAuB,yBAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,6BAAyB,yBAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAsBM,MAAM,2BAAuB,yBAAO,qCAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAChD,CAAC,YAAY,CAAC,qBAAqB,CAAC,YAAY,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,GAAG;AAAA;AAGnF,MAAM,0BAAsB,yBAAO,oCAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
   "names": []
 }

package/dist/cjs/parts/styled.js

@@ -60,7 +60,11 @@ const StyledDSPillV2 = (0, import_ds_system.styled)(import_ds_pills_v2.DSPillV2,
   return theme.colors.brand[250];
 }};
 
-  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["600"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["700"];
+  return theme.colors.brand["800"];
+}};
 `;
 const StyledDSPillGroupV2 = (0, import_ds_system.styled)(import_ds_pills_v2.DSPillGroupV2, {
   name: import_constants.DSFormComboboxName,

package/dist/cjs/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styled.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAwC;AACxC,uBAAuB;AACvB,uBAAwD;AACjD,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,qBAAiB,yBAAO,6BAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAU9E,MAAM,0BAAsB,yBAAO,kCAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;",
+  "sourcesContent": ["import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['600'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['700'];\n    return theme.colors.brand['800'];\n  }};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,yBAAwC;AACxC,uBAAuB;AACvB,uBAAwD;AACjD,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,qBAAiB,yBAAO,6BAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AAC7D,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAUI,MAAM,0BAAsB,yBAAO,kCAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/DropdownIndicator.js

@@ -2,13 +2,13 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useContext } from "react";
 import { styled } from "@elliemae/ds-system";
-import { DSButtonV2 } from "@elliemae/ds-button-v2";
+import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
 import { useOwnerProps } from "@elliemae/ds-props-helpers";
 import ComboBoxContext from "../ComboBoxCTX.js";
 import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
 import { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from "../constants/index.js";
-const StyledDropDownButton = styled(DSButtonV2, {
+const StyledDropDownButton = styled(DSButtonV3, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON
 })`
@@ -20,7 +20,7 @@ const StyledDropDownButton = styled(DSButtonV2, {
   }
 
   & svg {
-    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) => disabled || readOnly || applyAriaDisabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
+    fill: ${({ theme, disabled }) => disabled ? theme.colors.neutral["400"] : theme.colors.brand["600"]};
   }
 
   ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}

package/dist/esm/parts/DropdownIndicator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownIndicator.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean | undefined }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled, readOnly, applyAriaDisabled }) =>\n      disabled || readOnly || applyAriaDisabled ? theme.colors.neutral['400'] : theme.colors.brand['600']};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+DjB;AA7DN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,uBAAuB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,UAAU,UAAU,kBAAkB,MACtD,YAAY,YAAY,oBAAoB,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport { useOwnerProps } from '@elliemae/ds-props-helpers';\nimport ComboBoxContext from '../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\n\nconst StyledDropDownButton = styled(DSButtonV3, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.DROPDOWN_BUTTON,\n})<{ applyAriaDisabled: boolean | undefined }>`\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ${({ theme, disabled }) => (disabled ? theme.colors.neutral['400'] : theme.colors.brand['600'])};\n  }\n\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed`}\n`;\n\nexport const DropdownIndicator = (): JSX.Element => {\n  const {\n    props,\n    props: { disabled, applyAriaDisabled, readOnly, isMenuOpenableWithReadOnly },\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void =\n    useCallback((e) => {\n      e.preventDefault();\n    }, []);\n\n  return (\n    <StyledDropDownButton\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onClick={handleOnClick}\n      data-testid={ComboboxDataTestid.DROPDOWN}\n      aria-controls={`combo-listbox-${instanceUid}`}\n      aria-labelledby=\"combo-label\"\n      disabled={disabled}\n      aria-disabled={readOnly && !isMenuOpenableWithReadOnly} // button never use readOnly attribute\n      aria-expanded={menuState}\n      aria-haspopup=\"listbox\"\n      aria-hidden\n      buttonType=\"icon\"\n      tabIndex={-1}\n      size=\"s\"\n      applyAriaDisabled={applyAriaDisabled}\n    >\n      <ChevronSmallDown size=\"s\" />\n    </StyledDropDownButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8DjB;AA5DN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,OAAO,qBAAqB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,uBAAuB,OAAO,YAAY;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,MAAM,KAAK,CAAE;AAAA;AAAA;AAAA,IAGrG,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,qBAAqB;AAAA;AAGlE,MAAM,oBAAoB,MAAmB;AAClD,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAU,mBAAmB,UAAU,2BAA2B;AAAA,IAC3E;AAAA,IACA;AAAA,EACF,IAAI,WAAW,eAAe;AAE9B,QAAM,EAAE,eAAe,uBAAuB,IAAI,cAAc,KAAK;AAErE,QAAM,gBACJ,YAAY,CAAC,MAAM;AACjB,MAAE,eAAe;AAAA,EACnB,GAAG,CAAC,CAAC;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,eAAa,mBAAmB;AAAA,MAChC,iBAAe,iBAAiB,WAAW;AAAA,MAC3C,mBAAgB;AAAA,MAChB;AAAA,MACA,iBAAe,YAAY,CAAC;AAAA,MAC5B,iBAAe;AAAA,MACf,iBAAc;AAAA,MACd,eAAW;AAAA,MACX,YAAW;AAAA,MACX,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MAEA,8BAAC,oBAAiB,MAAK,KAAI;AAAA;AAAA,EAC7B;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Section.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import React2 from "react";
 import { styled } from "@elliemae/ds-system";
+import { DSTypography } from "@elliemae/ds-typography";
 import { Separator } from "@elliemae/ds-menu-items";
 import { MENU_OPTION_TYPES } from "../constants.js";
 import { ComboboxDataTestid } from "../ComboboxDataTestids.js";
@@ -15,13 +16,11 @@ const StyledSectionWrapper = styled("section", { name: DSFormComboboxName, slot:
   display: grid;
   align-items: center;
 `;
-const StyledSectionLabel = styled("header", { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
+const StyledSectionLabel = styled(DSTypography, { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`
   display: flex;
   align-items: center;
-  padding: 0px 16px;
-  min-height: 24px;
-  font-size: 1rem;
-  color: neutral-500;
+  min-height: 32px;
+  padding: 8px 16px;
 `;
 const Section = React2.memo((props) => {
   const {
@@ -51,6 +50,8 @@ const Section = React2.memo((props) => {
         /* @__PURE__ */ jsx(
           StyledSectionLabel,
           {
+            component: "header",
+            variant: "b3-strong",
             id,
             role: "presentation",
             getOwnerProps,

package/dist/esm/parts/Section.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Section.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport { StyledSingleMenuItem, StyledMultiMenuItem } from './menu-list/styled.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles?: React.CSSProperties;\n  innerRef?: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.OptionTypes[];\n  handleClick: (option: DSComboboxT.OptionTypes, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled('header', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  padding: 0px 16px;\n  min-height: 24px;\n  font-size: 1rem;\n  color: neutral-500;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = Array.isArray(selectedValues)\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4DnB,SAQE,KARF;AAkCM;AA9FV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,sBAAsB,2BAA2B;AAe1D,MAAM,uBAAuB,OAAO,WAAW,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,qBAAqB,OAAO,UAAU,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS1G,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAiF,MAAM,QAAQ,cAAc,IAC/G,sBACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,kBAAkB,WAAW;AACxC,mBAAO,oBAAC,eAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,mBAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,OAAO,SAAS,kBAAkB,UAAU,WAAW,gBAAgB,MAAM;AAAA,cACzF,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport { Separator } from '@elliemae/ds-menu-items';\n\nimport { MENU_OPTION_TYPES } from '../constants.js';\n\nimport { ComboboxDataTestid } from '../ComboboxDataTestids.js';\nimport type { DSComboboxT } from '../react-desc-prop-types.js';\nimport { isSelected } from '../utils/listHelper.js';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nimport { StyledSingleMenuItem, StyledMultiMenuItem } from './menu-list/styled.js';\n\ninterface SectionProps {\n  label: string;\n  wrapperStyles?: React.CSSProperties;\n  innerRef?: (instance: HTMLDivElement | null) => void;\n  options: DSComboboxT.OptionTypes[];\n  handleClick: (option: DSComboboxT.OptionTypes, e: React.MouseEvent<HTMLInputElement>) => void;\n  handleOnMouseDown: (e: React.MouseEvent<HTMLLIElement>) => void;\n  focusOptionIdx: string;\n  selectedValues: DSComboboxT.SelectedOptionsT;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments?: () => { index: number };\n}\n\nconst StyledSectionWrapper = styled('section', { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_WRAPPER })`\n  list-style: none;\n  min-height: 24px;\n  display: grid;\n  align-items: center;\n`;\n\nconst StyledSectionLabel = styled(DSTypography, { name: DSFormComboboxName, slot: FORM_COMBOBOX_SLOTS.SECTION_LABEL })`\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  padding: 8px 16px;\n`;\n\nexport const Section = React.memo((props: SectionProps) => {\n  const {\n    label,\n    wrapperStyles,\n    focusOptionIdx,\n    selectedValues,\n    innerRef,\n    handleOnMouseDown,\n    options,\n    handleClick,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n  const id = `${label.replace(/ /g, '')}-section`;\n  const CBItem: React.ComponentType<React.ComponentProps<typeof StyledSingleMenuItem>> = Array.isArray(selectedValues)\n    ? StyledMultiMenuItem\n    : StyledSingleMenuItem;\n\n  return (\n    <StyledSectionWrapper\n      role=\"group\"\n      aria-labelledby={id}\n      style={wrapperStyles}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSectionLabel\n        component=\"header\"\n        variant=\"b3-strong\"\n        id={id}\n        role=\"presentation\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledSectionLabel>\n      {options?.map((option) => {\n        const {\n          dsId,\n          type,\n          value,\n          label: optionLabel,\n          readOnly,\n          disabled,\n          applyAriaDisabled,\n          render,\n          ...rest\n        } = option;\n\n        if (type === MENU_OPTION_TYPES.SEPARATOR) {\n          return <Separator key={dsId} />;\n        }\n\n        return (\n          <CBItem\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            value={value}\n            label={optionLabel}\n            dataTestid={ComboboxDataTestid.OPTION}\n            disabled={disabled}\n            applyAriaDisabled={applyAriaDisabled || readOnly}\n            onClick={(e: React.MouseEvent<HTMLInputElement>) => {\n              if (applyAriaDisabled) return;\n              handleClick(option, e);\n            }}\n            onMouseDown={handleOnMouseDown}\n            isActive={dsId === focusOptionIdx}\n            isSelected={option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option)}\n            tabIndex={-1}\n            {...rest}\n            key={option.dsId}\n            dsId={option.dsId}\n          />\n        );\n      })}\n    </StyledSectionWrapper>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2DnB,SAQE,KARF;AAoCM;AA/FV,OAAOA,YAAW;AAClB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,2BAA2B;AACxD,SAAS,sBAAsB,2BAA2B;AAe1D,MAAM,uBAAuB,OAAO,WAAW,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtH,MAAM,qBAAqB,OAAO,cAAc,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9G,MAAM,UAAUA,OAAM,KAAK,CAAC,UAAwB;AACzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,KAAK,GAAG,MAAM,QAAQ,MAAM,EAAE,CAAC;AACrC,QAAM,SAAiF,MAAM,QAAQ,cAAc,IAC/G,sBACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR;AAAA,YACA,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,SAAS,IAAI,CAAC,WAAW;AACxB,gBAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,GAAG;AAAA,UACL,IAAI;AAEJ,cAAI,SAAS,kBAAkB,WAAW;AACxC,mBAAO,oBAAC,eAAe,IAAM;AAAA,UAC/B;AAEA,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,YAAY,mBAAmB;AAAA,cAC/B;AAAA,cACA,mBAAmB,qBAAqB;AAAA,cACxC,SAAS,CAAC,MAA0C;AAClD,oBAAI,kBAAmB;AACvB,4BAAY,QAAQ,CAAC;AAAA,cACvB;AAAA,cACA,aAAa;AAAA,cACb,UAAU,SAAS;AAAA,cACnB,YAAY,OAAO,SAAS,kBAAkB,UAAU,WAAW,gBAAgB,MAAM;AAAA,cACzF,UAAU;AAAA,cACT,GAAG;AAAA,cACJ,KAAK,OAAO;AAAA,cACZ,MAAM,OAAO;AAAA;AAAA,UACf;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": ["React"]
 }

package/dist/esm/parts/controls/styled.js

@@ -43,7 +43,7 @@ const StyledControlsWrapper = styled(Grid, {
   @media (max-width: ${th.breakpoint("small")}) {
     padding: 1.25px 0px 1.25px 8px;
   }
-  margin: ${({ inline }) => inline ? "10px 16px" : ""};
+  margin: ${({ inline }) => inline ? "8px 16px" : ""};
   ${borderStyles}
   &:hover {
     ${({ disabled }) => !disabled ? hoverBorder : ""}

package/dist/esm/parts/controls/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\nconst readOnlyBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst borderStyles = css<{ hasError: boolean; readOnly: boolean; applyAriaDisabled: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  ${({ readOnly, applyAriaDisabled }) => (readOnly || applyAriaDisabled ? readOnlyBorder : '')}\n`;\n\nconst backgroundStyles = css<{ disabled: boolean; applyAriaDisabled: boolean; readOnly: boolean }>`\n  background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {\n    if (readOnly || applyAriaDisabled) {\n      return theme.colors.neutral['050'];\n    }\n    if (disabled) {\n      return theme.colors.neutral['080'];\n    }\n    return '#ffffff';\n  }};\n`;\n\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  ${backgroundStyles}\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  min-height: 28px;\n  padding: 3px 0px 3px 8px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 1.25px 0px 1.25px 8px;\n  }\n  margin: ${({ inline }) => (inline ? '10px 16px' : '')};\n  ${borderStyles}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSingleSelectWraper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTED_VALUES,\n})<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: ${({ disabled, readOnly, theme }) =>\n    disabled || readOnly ? theme.colors.neutral['600'] : theme.colors.neutral['700']};\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTION,\n})`\n  font-size: 1rem;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS,\n})`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS_SEPARATOR,\n})<Partial<StyledControlsWrapperT>>`\n  height: 100%;\n  width: 1px;\n  background-color: ${({ theme }) => theme.colors.neutral['400']};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAWxD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,6BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGrE,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,IAC5G,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,iBAAiB,EAAG;AAAA;AAG9F,MAAM,mBAAmB;AAAA,gBACT,CAAC,EAAE,UAAU,mBAAmB,UAAU,MAAM,MAAM;AAClE,MAAI,YAAY,mBAAmB;AACjC,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,MAAI,UAAU;AACZ,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAGrD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,gBAAgB;AAAA;AAAA;AAAA,eAGL,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,GAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,EAAG;AAAA,IACnD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,EAAE,UAAU,UAAU,MAAM,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACnE,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,6BAA6B,OAAO,MAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, th } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  inline: boolean;\n  minWidth?: number;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\nconst readOnlyBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst borderStyles = css<{ hasError: boolean; readOnly: boolean; applyAriaDisabled: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\n  ${({ readOnly, applyAriaDisabled }) => (readOnly || applyAriaDisabled ? readOnlyBorder : '')}\n`;\n\nconst backgroundStyles = css<{ disabled: boolean; applyAriaDisabled: boolean; readOnly: boolean }>`\n  background: ${({ disabled, applyAriaDisabled, readOnly, theme }) => {\n    if (readOnly || applyAriaDisabled) {\n      return theme.colors.neutral['050'];\n    }\n    if (disabled) {\n      return theme.colors.neutral['080'];\n    }\n    return '#ffffff';\n  }};\n`;\n\nconst focusBorder = css`\n  outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  outline-offset: -2px;\n`;\n\nconst hoverBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_WRAPPER,\n})<StyledControlsWrapperT>`\n  ${backgroundStyles}\n  position: relative;\n  border-radius: 2px;\n  min-width: ${({ minWidth, inline }) => (inline || !minWidth ? '' : `${minWidth}px`)};\n  align-items: center;\n  align-content: center;\n  min-height: 28px;\n  padding: 3px 0px 3px 8px;\n  @media (max-width: ${th.breakpoint('small')}) {\n    padding: 1.25px 0px 1.25px 8px;\n  }\n  margin: ${({ inline }) => (inline ? '8px 16px' : '')};\n  ${borderStyles}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledSingleSelectWraper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTED_VALUES,\n})<{\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: ${({ disabled, readOnly, theme }) =>\n    disabled || readOnly ? theme.colors.neutral['600'] : theme.colors.neutral['700']};\n  user-select: ${({ disabled, applyAriaDisabled }) => (disabled || applyAriaDisabled ? 'none' : '')};\n`;\n\nexport const StyledSelection = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SELECTION,\n})`\n  font-size: 1rem;\n  margin-right: 3px;\n  display: flex;\n`;\n\nexport const StyledHeaderActionsWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS,\n})`\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n`;\n\nexport const StyleDropdownIndicator = styled.div``;\n\nexport const StyleHeaderActionsSeparator = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.HEADER_ACTIONS_SEPARATOR,\n})<Partial<StyledControlsWrapperT>>`\n  height: 100%;\n  width: 1px;\n  background-color: ${({ theme }) => theme.colors.neutral['400']};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,UAAU;AAChC,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAWxD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,6BACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAGrE,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA,IAC5G,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,iBAAiB,EAAG;AAAA;AAG9F,MAAM,mBAAmB;AAAA,gBACT,CAAC,EAAE,UAAU,mBAAmB,UAAU,MAAM,MAAM;AAClE,MAAI,YAAY,mBAAmB;AACjC,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,MAAI,UAAU;AACZ,WAAO,MAAM,OAAO,QAAQ,KAAK;AAAA,EACnC;AACA,SAAO;AACT,CAAC;AAAA;AAGH,MAAM,cAAc;AAAA,uBACG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAI7D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAGrD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,gBAAgB;AAAA;AAAA;AAAA,eAGL,CAAC,EAAE,UAAU,OAAO,MAAO,UAAU,CAAC,WAAW,KAAK,GAAG,QAAQ,IAAK;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK9D,GAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA,YAGjC,CAAC,EAAE,OAAO,MAAO,SAAS,aAAa,EAAG;AAAA,IAClD,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,2BAA2B,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA,WAQU,CAAC,EAAE,UAAU,UAAU,MAAM,MACpC,YAAY,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,iBACnE,CAAC,EAAE,UAAU,kBAAkB,MAAO,YAAY,oBAAoB,SAAS,EAAG;AAAA;AAG5F,MAAM,kBAAkB,OAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,6BAA6B,OAAO,MAAM;AAAA,EACrD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOM,MAAM,yBAAyB,OAAO;AAEtC,MAAM,8BAA8B,OAAO,QAAQ;AAAA,EACxD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA,sBAGqB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;",
   "names": []
 }

package/dist/esm/parts/controls-input/ControlsInput.js

@@ -55,7 +55,8 @@ const ControlsInput = () => {
   });
   const actualAriaDescribedBy = useMemo(() => {
     if (id) {
-      return `${ariaDescribedBy ?? ""} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;
+      const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;
+      return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;
     }
     return ariaDescribedBy;
   }, [ariaDescribedBy, id]);
@@ -77,6 +78,7 @@ const ControlsInput = () => {
     }
     return void 0;
   }, [focusOptionIdx, hasFocus, isLoading, menuState]);
+  const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);
   const handleOnPaste = (e) => {
     e.preventDefault();
     setInputValue(e.clipboardData.getData("text/plain"));
@@ -84,7 +86,7 @@ const ControlsInput = () => {
   };
   return /* @__PURE__ */ jsxs(StyledInputWrapper, { getOwnerProps, children: [
     /* @__PURE__ */ jsx(StyledInputWidthReference, { innerRef: spanReference, children: spanReferenceText }),
-    showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, { getOwnerProps, "aria-hidden": "true", children: /* @__PURE__ */ jsx(TruncatedTooltipText, { value: showPlaceholder }) }),
+    showPlaceholder && /* @__PURE__ */ jsx(StyledInputPlaceHolder, { getOwnerProps, "aria-hidden": "true", $nonInteractive: isNonInteractive, children: /* @__PURE__ */ jsx(TruncatedTooltipText, { value: showPlaceholder }) }),
     menuState === false && !inline ? /* @__PURE__ */ jsx(StyledHiddenDiv, { id: `combo-listbox-${instanceUid}` }) : null,
     /* @__PURE__ */ jsx(StyledHiddenDiv, { id: `${id}_current_placeholder`, children: currentPlaceholder }),
     /* @__PURE__ */ jsx(

package/dist/esm/parts/controls-input/ControlsInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/ControlsInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n  StyledHiddenDiv,\n  StyledInput,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledInputWrapper,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props,\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      return `${ariaDescribedBy ?? ''} ${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper getOwnerProps={getOwnerProps}>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder getOwnerProps={getOwnerProps} aria-hidden=\"true\">\n          <TruncatedTooltipText value={showPlaceholder} />\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled ?? false}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable ?? false}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        disabled={disabled || applyAriaDisabled}\n        readOnly={readOnly}\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={!!(disabled || applyAriaDisabled)}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useGetGlobalAttributes, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { TruncatedTooltipText } from '../../TruncatedTooltipText.js';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { isArrayOfItems } from '../../utils/listHelper.js';\nimport {\n  StyledHiddenDiv,\n  StyledInput,\n  StyledInputPlaceHolder,\n  StyledInputWidthReference,\n  StyledInputWrapper,\n  StyleHiddenInput,\n} from './styled.js';\nimport { useControlsInput } from './useControlsInput.js';\nimport { useKeyboardNavigation } from './useKeyboardNavigation.js';\n\nexport const ControlsInput = (): JSX.Element => {\n  const {\n    props,\n    props: {\n      autoFocus,\n      inline,\n      selectedValues,\n      placeholder,\n      disabled,\n      innerRef,\n      isLoading,\n      onlySelectable,\n      applyAriaDisabled,\n      readOnly,\n      ...restProps\n    },\n    focusOptionIdx,\n    hasFocus,\n    internalRef,\n    inputValue,\n    setInputValue,\n    menuState,\n    instanceUid,\n  } = useContext(ComboBoxContext);\n  const { onInputKeyDown } = useKeyboardNavigation();\n\n  const { spanReference, width, spanReferenceText, showPlaceholder, handleOnBlur, handleOnChange, handleOnFocus } =\n    useControlsInput();\n\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  const {\n    tabIndex,\n    id,\n    'aria-describedby': ariaDescribedBy,\n    ...globalAttrs\n  } = useGetGlobalAttributes(restProps, {\n    onFocus: handleOnFocus,\n    onBlur: handleOnBlur,\n  });\n\n  const actualAriaDescribedBy = useMemo(() => {\n    if (id) {\n      const internalIds = `${id}_current_placeholder ${id}_feedback_message ${id}_error_message`;\n      return ariaDescribedBy ? `${ariaDescribedBy} ${internalIds}` : internalIds;\n    }\n    return ariaDescribedBy;\n  }, [ariaDescribedBy, id]);\n\n  const currentPlaceholder = useMemo(() => {\n    if (isArrayOfItems(selectedValues)) {\n      return `options ${selectedValues.map((item) => item.label).join(', ')} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (typeof selectedValues?.label === 'string') {\n      return `option ${selectedValues.label} selected. ${readOnly ? 'Read only' : ''}`;\n    }\n    if (readOnly) {\n      return `${placeholder}. Read only`;\n    }\n    return placeholder;\n  }, [placeholder, selectedValues, readOnly]);\n\n  const activeDescendant = useMemo(() => {\n    if (!isLoading && hasFocus && menuState) {\n      return focusOptionIdx;\n    }\n    return undefined;\n  }, [focusOptionIdx, hasFocus, isLoading, menuState]);\n\n  // `.some(Boolean)` over `||` keeps this component within its cyclomatic-complexity limit.\n  const isNonInteractive = [disabled, applyAriaDisabled, readOnly].some(Boolean);\n\n  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {\n    e.preventDefault();\n    setInputValue(e.clipboardData.getData('text/plain'));\n    internalRef.current?.focus();\n  };\n  return (\n    <StyledInputWrapper getOwnerProps={getOwnerProps}>\n      <StyledInputWidthReference innerRef={spanReference}>{spanReferenceText}</StyledInputWidthReference>\n      {showPlaceholder && (\n        <StyledInputPlaceHolder getOwnerProps={getOwnerProps} aria-hidden=\"true\" $nonInteractive={isNonInteractive}>\n          <TruncatedTooltipText value={showPlaceholder} />\n        </StyledInputPlaceHolder>\n      )}\n\n      {/* The purpose of this div is to always have the 'combo-listbox-{uid}' present in the DOM */}\n      {/* Fix for PUI-11597 */}\n      {menuState === false && !inline ? <StyledHiddenDiv id={`combo-listbox-${instanceUid}`}></StyledHiddenDiv> : null}\n\n      {/* The announcement of currentPlaceholder is being overridden by the value of actualAriaDescribedBy */}\n      {/* and since this variable is necessary for the annoucement of FormLayoutBlockItem error and feedback */}\n      {/* messages, we concatenate the value of actualPlaceholder with that aria description */}\n      {/* Fix for PUI-9609 */}\n      <StyledHiddenDiv id={`${id}_current_placeholder`}>{currentPlaceholder}</StyledHiddenDiv>\n\n      <StyledInput\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        onBlur={handleOnBlur}\n        onFocus={handleOnFocus}\n        readOnly={readOnly || onlySelectable}\n        {...globalAttrs}\n        id={id}\n        data-testid={ComboboxDataTestid.INPUT}\n        autoFocus={autoFocus}\n        placeholder={currentPlaceholder}\n        aria-activedescendant={activeDescendant}\n        aria-expanded={menuState}\n        aria-controls={`combo-listbox-${instanceUid}`}\n        aria-describedby={actualAriaDescribedBy}\n        aria-autocomplete=\"list\"\n        role=\"combobox\"\n        disabled={disabled}\n        applyAriaDisabled={applyAriaDisabled ?? false}\n        style={{ width }}\n        innerRef={mergeRefs(innerRef, internalRef)}\n        value={inputValue}\n        type=\"text\"\n        onKeyDown={onInputKeyDown}\n        onChange={handleOnChange}\n        tabIndex={tabIndex}\n        withoutCaret={onlySelectable ?? false}\n        autoComplete=\"off\"\n        aria-readonly={readOnly}\n      />\n      {/* This input is used to handle the paste event */}\n      <StyleHiddenInput\n        type=\"text\"\n        disabled={disabled || applyAriaDisabled}\n        readOnly={readOnly}\n        name=\"hidden\"\n        tabIndex={-1}\n        onPaste={handleOnPaste}\n        aria-hidden=\"true\"\n        isDisabled={!!(disabled || applyAriaDisabled)}\n      />\n    </StyledInputWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/controls-input/styled.js

@@ -28,7 +28,7 @@ const StyledInput = styled("input", {
   padding: 0;
   z-index: 2;
   outline: none;
-  color: ${(props) => props.theme.colors.neutral[700]};
+  color: ${(props) => props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700]};
   &:focus {
     outline: none;
   }
@@ -44,7 +44,7 @@ const StyledInputPlaceHolder = styled("div", {
   slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER
 })`
   font-style: italic;
-  color: ${(props) => props.theme.colors.neutral[500]};
+  color: ${(props) => props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500]};
   position: absolute;
   display: flex;
   align-items: center;

package/dist/esm/parts/controls-input/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/controls-input/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})`\n  font-style: italic;\n  color: ${(props) => props.theme.colors.neutral[500]};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIjD,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB9C,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nexport const StyleHiddenInput = styled('input')<{ isDisabled: boolean }>`\n  color: transparent;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n  border: none;\n  outline: none;\n  background: transparent;\n  width: 100%;\n  &:focus {\n    outline: none;\n  }\n  ${({ isDisabled }) => isDisabled && `cursor: not-allowed;`}\n`;\n\nexport const StyledInput = styled('input', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT,\n})<{ withoutCaret: boolean; applyAriaDisabled: boolean }>`\n  line-height: 1rem;\n  background: transparent;\n  font-size: 1rem;\n  border: none;\n  overflow: hidden;\n  padding: 0;\n  z-index: 2;\n  outline: none;\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral[600] : props.theme.colors.neutral[700])};\n  &:focus {\n    outline: none;\n  }\n  ${({ withoutCaret }) => withoutCaret && 'caret-color: transparent;'}\n  &::placeholder {\n    color: transparent;\n  }\n  transition: none;\n  ${({ applyAriaDisabled }) => applyAriaDisabled && `cursor: not-allowed; caret-color: transparent;`}\n`;\n\nexport const StyledInputPlaceHolder = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_PLACEHOLDER,\n})<{ $nonInteractive?: boolean }>`\n  font-style: italic;\n  color: ${(props) => (props.$nonInteractive ? props.theme.colors.neutral[600] : props.theme.colors.neutral[500])};\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n\n  line-height: 1rem;\n  font-size: 1rem;\n\n  & span::after {\n    content: '';\n    padding: 1px;\n    // solve italic font style clipping issue with overflow hidden.\n  }\n`;\n\nexport const StyledInputWidthReference = styled.span`\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n  z-index: 1;\n`;\n\nexport const StyledInputWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.INPUT_FIELD_WRAPPER,\n})`\n  position: relative;\n  align-items: center;\n  display: flex;\n  padding-right: 1px;\n  overflow: hidden;\n`;\n\nexport const StyledHiddenDiv = styled('div')`\n  display: none;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,mBAAmB,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa1C,CAAC,EAAE,WAAW,MAAM,cAAc,sBAAsB;AAAA;AAGrD,MAAM,cAAc,OAAO,SAAS;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASU,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA,IAItG,CAAC,EAAE,aAAa,MAAM,gBAAgB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjE,CAAC,EAAE,kBAAkB,MAAM,qBAAqB,gDAAgD;AAAA;AAG7F,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA,WAEU,CAAC,UAAW,MAAM,kBAAkB,MAAM,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1G,MAAM,4BAA4B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzC,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,kBAAkB,OAAO,KAAK;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/menu-list/LoadingContainer.js

@@ -35,7 +35,7 @@ const LoadingContainer = ({
       "aria-label": "Loading options please wait",
       "aria-multiselectable": isMulti,
       getOwnerProps,
-      children: /* @__PURE__ */ jsx(StyledDSCircularIndeterminateIndicator, { size: "m", getOwnerProps })
+      children: /* @__PURE__ */ jsx(StyledDSCircularIndeterminateIndicator, { size: "m", "aria-hidden": "true", getOwnerProps })
     }
   )
 );

package/dist/esm/parts/menu-list/LoadingContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/LoadingContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}) => (\n  /**\n   * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`combo-listbox-${instanceUid}`}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    aria-multiselectable={isMulti}\n    getOwnerProps={getOwnerProps}\n  >\n    <StyledDSCircularIndeterminateIndicator size=\"m\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACyCnB;AAxCJ,SAAS,cAAc;AACvB,SAAS,wCAAwC;AACjD,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,UAAU,OAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,yCAAyC,OAAO,kCAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,WAAW;AAAA,MAChC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MAEA,8BAAC,0CAAuC,MAAK,KAAI,eAA8B;AAAA;AAAA,EACjF;AAAA;AAIF,IAAO,2BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSCircularIndeterminateIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\nconst Wrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_WRAPPER,\n})`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\nconst StyledDSCircularIndeterminateIndicator = styled(DSCircularIndeterminateIndicator, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LOADING_INDICATOR,\n})``;\n\nconst LoadingContainer = ({\n  instanceUid,\n  isMulti,\n  getOwnerProps,\n}: {\n  instanceUid: string;\n  isMulti: boolean;\n  getOwnerProps: () => object;\n}) => (\n  /**\n   * PUI-18034 \u2014 Carries listbox id+role+aria-busy so the input's aria-controls always\n   * resolves to a busy listbox here. Parallel listbox semantics tailored per state live\n   * on SkeletonContainer, StyledFastList and StyledNoResultsWrapper, but only one of those\n   * four ever renders at a time, so the canonical listbox id is never duplicated in the DOM.\n   */\n  <Wrapper\n    id={`combo-listbox-${instanceUid}`}\n    role=\"listbox\"\n    aria-busy\n    aria-label=\"Loading options please wait\"\n    aria-multiselectable={isMulti}\n    getOwnerProps={getOwnerProps}\n  >\n    {/**\n     * PUI-18541 \u2014 the spinner exposes role=\"status\", which is a forbidden child of\n     * role=\"listbox\" (aria-allowed-children, axe Critical) \u2014 a regression from the PUI-18034\n     * rework. aria-hidden removes it from the accessibility tree so it no longer counts as a\n     * listbox child; the listbox's own aria-busy + aria-label remains the single loading\n     * announcement. Spinner stays purely visual.\n     */}\n    <StyledDSCircularIndeterminateIndicator size=\"m\" aria-hidden=\"true\" getOwnerProps={getOwnerProps} />\n  </Wrapper>\n);\n\nexport { LoadingContainer };\nexport default LoadingContainer;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDnB;AA/CJ,SAAS,cAAc;AACvB,SAAS,wCAAwC;AACjD,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,UAAU,OAAO,OAAO;AAAA,EAC5B,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAKD,MAAM,yCAAyC,OAAO,kCAAkC;AAAA,EACtF,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAED,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,iBAAiB,WAAW;AAAA,MAChC,MAAK;AAAA,MACL,aAAS;AAAA,MACT,cAAW;AAAA,MACX,wBAAsB;AAAA,MACtB;AAAA,MASA,8BAAC,0CAAuC,MAAK,KAAI,eAAY,QAAO,eAA8B;AAAA;AAAA,EACpG;AAAA;AAIF,IAAO,2BAAQ;",
   "names": []
 }

package/dist/esm/parts/menu-list/styled.js

@@ -35,7 +35,9 @@ const StyledSingleMenuItem = styled(SingleMenuItem, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,
   preserveLegacyDataTestId: true
-})``;
+})`
+  ${({ theme, disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}
+`;
 const StyledMultiMenuItem = styled(MultiMenuItem, {
   name: DSFormComboboxName,
   slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,

package/dist/esm/parts/menu-list/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/menu-list/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,oBAAoB,2BAA2B;AAQjD,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAEM,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { SizingProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { SingleMenuItem, MultiMenuItem } from '@elliemae/ds-menu-items';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../../constants/index.js';\n\ninterface StyledListWrapperT {\n  minWidth: SizingProps['minWidth'];\n  maxHeight?: SizingProps['maxHeight'];\n  width: number | string;\n  inline?: boolean;\n}\nexport const StyledListWrapper = styled(Grid, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.LIST_WRAPPER,\n})<StyledListWrapperT>`\n  min-width: ${({ inline, minWidth }) => (inline ? '100%' : `${String(minWidth)}px`)};\n  width: ${({ width }) => `${width}px`};\n  background-color: #ffffff;\n  z-index: 100;\n`;\n\nexport const StyledCreatableLabel = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_LABEL,\n})`\n  font-weight: bold;\n  font-style: italic;\n`;\n\nexport const StyledCreatableValue = styled('span', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.CREATABLE_VALUE,\n})`\n  word-break: break-all;\n`;\n\nexport const StyledNoResultsWrapper = styled('div', {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.NO_MATCHES_FOUND,\n})`\n  padding: 14px;\n`;\n\ntype IdleLabelColorProps = {\n  disabled?: boolean;\n  applyAriaDisabled?: boolean;\n  readOnly?: boolean;\n};\n\n/**\n * Combobox-specific idle color override for single menu item labels.\n *\n * The decision to render the idle label as neutral-700 is a combobox-level call\n * (team consistency with multi, which lands at neutral-700 via the checkbox spec),\n * not a generic menu-item rule. It lives here so other consumers of ds-menu-items\n * are not forced into a color opinion they did not ask for.\n *\n * Muted states (disabled / aria-disabled / readOnly) intentionally fall through\n * so disabledOption() in ds-menu-items-commons keeps owning neutral-500 and the\n * neutral-600 hover variant.\n */\nexport const StyledSingleMenuItem = styled(SingleMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.SINGLE_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})<IdleLabelColorProps>`\n  ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    !disabled && !applyAriaDisabled && !readOnly && `color: ${theme.colors.neutral[700]};`}\n`;\n\nexport const StyledMultiMenuItem = styled(MultiMenuItem, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.MULTI_MENU_ITEM,\n  preserveLegacyDataTestId: true,\n})``;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,oBAAoB,2BAA2B;AAQjD,MAAM,oBAAoB,OAAO,MAAM;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,eACc,CAAC,EAAE,QAAQ,SAAS,MAAO,SAAS,SAAS,GAAG,OAAO,QAAQ,CAAC,IAAK;AAAA,WACzE,CAAC,EAAE,MAAM,MAAM,GAAG,KAAK,IAAI;AAAA;AAAA;AAAA;AAK/B,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKM,MAAM,uBAAuB,OAAO,QAAQ;AAAA,EACjD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAsBM,MAAM,uBAAuB,OAAO,gBAAgB;AAAA,EACzD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,IACG,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAChD,CAAC,YAAY,CAAC,qBAAqB,CAAC,YAAY,UAAU,MAAM,OAAO,QAAQ,GAAG,CAAC,GAAG;AAAA;AAGnF,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;",
   "names": []
 }

package/dist/esm/parts/styled.js

@@ -25,7 +25,11 @@ const StyledDSPillV2 = styled(DSPillV2, {
   return theme.colors.brand[250];
 }};
 
-  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => disabled || applyAriaDisabled || readOnly ? "#616b7f" : theme.colors.brand["800"]};
+  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {
+  if (disabled) return theme.colors.neutral["600"];
+  if (applyAriaDisabled || readOnly) return theme.colors.neutral["700"];
+  return theme.colors.brand["800"];
+}};
 `;
 const StyledDSPillGroupV2 = styled(DSPillGroupV2, {
   name: DSFormComboboxName,

package/dist/esm/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) =>\n    disabled || applyAriaDisabled || readOnly ? '#616b7f' : theme.colors.brand['800']};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MACvD,YAAY,qBAAqB,WAAW,YAAY,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAU9E,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPillV2, DSPillGroupV2 } from '@elliemae/ds-pills-v2';\nimport { styled } from '@elliemae/ds-system';\nimport { DSFormComboboxName, FORM_COMBOBOX_SLOTS } from '../constants/index.js';\nexport const StyledA11yNotVisible = styled.span`\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  border: 0;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  clip-path: inset(100%);\n  white-space: nowrap;\n`;\n\n/**\n * Combobox-specific pill styling with stateful behavior\n *\n * DSPillV2 is stateless by design, but Combobox requires pills to visually\n * reflect container state (disabled/aria-disabled/readOnly). This wrapper\n * applies context-aware colors based on Combobox's interaction state.\n *\n * These styles were previously part of the Pills component but have been\n * moved here as Pills were refactored to be stateless. Combobox maintains\n * this stateful behavior as a specific use case requirement.\n */\nexport const StyledDSPillV2 = styled(DSPillV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL,\n  preserveLegacyDataTestId: true,\n})`\n  background-color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['080'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['050'];\n    return theme.colors.brand[250];\n  }};\n\n  color: ${({ theme, disabled, applyAriaDisabled, readOnly }) => {\n    if (disabled) return theme.colors.neutral['600'];\n    if (applyAriaDisabled || readOnly) return theme.colors.neutral['700'];\n    return theme.colors.brand['800'];\n  }};\n`;\n\n/*\n * PUI-17945: https://jira.elliemae.io/browse/PUI-17945\n * By new Pills designs, pills should wrap to new lines when there is not enough horizontal space,\n * but for Combobox we want to keep them in one line and show a \"+X\" pill when there are more selected values than the max pills to show,\n * so we are changing its display property to grid instead of flex.\n */\n\nexport const StyledDSPillGroupV2 = styled(DSPillGroupV2, {\n  name: DSFormComboboxName,\n  slot: FORM_COMBOBOX_SLOTS.PILL_GROUP,\n})`\n  display: grid;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,qBAAqB;AACxC,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAAA,EAC1B,0BAA0B;AAC5B,CAAC;AAAA,sBACqB,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AACxE,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B,CAAC;AAAA;AAAA,WAEQ,CAAC,EAAE,OAAO,UAAU,mBAAmB,SAAS,MAAM;AAC7D,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AAC/C,MAAI,qBAAqB,SAAU,QAAO,MAAM,OAAO,QAAQ,KAAK;AACpE,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC,CAAC;AAAA;AAUI,MAAM,sBAAsB,OAAO,eAAe;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;",
   "names": []
 }

package/dist/types/parts/controls-input/styled.d.ts

@@ -5,7 +5,9 @@ export declare const StyledInput: import("styled-components").StyledComponent<"i
     withoutCaret: boolean;
     applyAriaDisabled: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"input">, never>;
-export declare const StyledInputPlaceHolder: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+export declare const StyledInputPlaceHolder: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
+    $nonInteractive?: boolean;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledInputWidthReference: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledHiddenDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/parts/menu-list/styled.d.ts

@@ -9,6 +9,23 @@ export declare const StyledListWrapper: import("styled-components").StyledCompon
 export declare const StyledCreatableLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledCreatableValue: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledNoResultsWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
-export declare const StyledSingleMenuItem: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>>, never>;
+type IdleLabelColorProps = {
+    disabled?: boolean;
+    applyAriaDisabled?: boolean;
+    readOnly?: boolean;
+};
+/**
+ * Combobox-specific idle color override for single menu item labels.
+ *
+ * The decision to render the idle label as neutral-700 is a combobox-level call
+ * (team consistency with multi, which lands at neutral-700 via the checkbox spec),
+ * not a generic menu-item rule. It lives here so other consumers of ds-menu-items
+ * are not forced into a color opinion they did not ask for.
+ *
+ * Muted states (disabled / aria-disabled / readOnly) intentionally fall through
+ * so disabledOption() in ds-menu-items-commons keeps owning neutral-500 and the
+ * neutral-600 hover variant.
+ */
+export declare const StyledSingleMenuItem: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>, import("@elliemae/ds-system").Theme, IdleLabelColorProps & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsSingleT.Props>>, never>;
 export declare const StyledMultiMenuItem: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsMultiT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-menu-items").DSMenuItemsMultiT.Props>>, never>;
 export {};

package/dist/types/tests/DSCombobox.pui-18238.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSCombobox.pui-18541.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-combobox",
-  "version": "3.70.0-next.27",
+  "version": "3.70.0-next.28",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Combobox",
   "files": [
@@ -37,25 +37,26 @@
   },
   "dependencies": {
     "uid": "^2.0.2",
-    "@elliemae/ds-button-v2": "3.70.0-next.27",
-    "@elliemae/ds-fast-list": "3.70.0-next.27",
-    "@elliemae/ds-grid": "3.70.0-next.27",
-    "@elliemae/ds-floating-context": "3.70.0-next.27",
-    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.27",
-    "@elliemae/ds-pills-v2": "3.70.0-next.27",
-    "@elliemae/ds-props-helpers": "3.70.0-next.27",
-    "@elliemae/ds-icons": "3.70.0-next.27",
-    "@elliemae/ds-menu-items": "3.70.0-next.27",
-    "@elliemae/ds-system": "3.70.0-next.27"
+    "@elliemae/ds-button-v2": "3.70.0-next.28",
+    "@elliemae/ds-fast-list": "3.70.0-next.28",
+    "@elliemae/ds-circular-progress-indicator": "3.70.0-next.28",
+    "@elliemae/ds-floating-context": "3.70.0-next.28",
+    "@elliemae/ds-grid": "3.70.0-next.28",
+    "@elliemae/ds-menu-items": "3.70.0-next.28",
+    "@elliemae/ds-props-helpers": "3.70.0-next.28",
+    "@elliemae/ds-icons": "3.70.0-next.28",
+    "@elliemae/ds-typography": "3.70.0-next.28",
+    "@elliemae/ds-system": "3.70.0-next.28",
+    "@elliemae/ds-pills-v2": "3.70.0-next.28"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.27",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.27",
-    "@elliemae/ds-test-utils": "3.70.0-next.27"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.28",
+    "@elliemae/ds-test-utils": "3.70.0-next.28",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.28"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",