@elliemae/ds-form-native-select 3.70.0-next.14 → 3.70.0-next.16

package/dist/cjs/NativeSelect.js

@@ -38,38 +38,65 @@ var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_styled = require("./styled.js");
-const propTypes = {
-  ...import_ds_props_helpers.globalAttributesPropTypes,
-  ...import_ds_props_helpers.xstyledPropTypes,
-  hasError: import_ds_props_helpers.PropTypes.bool.description("whether the input has an error").defaultValue(false),
-  disabled: import_ds_props_helpers.PropTypes.bool.description("whether the input is disabled").defaultValue(false),
-  children: import_ds_props_helpers.PropTypes.node.description("options to be rendered in the select")
-};
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 const DSNativeSelect = (props) => {
-  const { hasError, disabled, children } = props;
+  const { hasError, disabled, applyAriaDisabled, readOnly, children } = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  const isLocked = applyAriaDisabled || readOnly;
+  const userOnChangeRef = (0, import_react.useRef)(props.onChange);
+  userOnChangeRef.current = props.onChange;
+  const handleOnChange = (0, import_react.useCallback)(
+    (e) => {
+      if (isLocked) return;
+      userOnChangeRef.current?.(e);
+    },
+    [isLocked]
+  );
   const getOwnerProps = (0, import_react.useCallback)(() => props, [props]);
   const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
   const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
-  const { id, required, size, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(
-    props
+  const { id, required, size, ...globalAttributes } = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledControlsWrapper,
+    {
+      disabled,
+      hasError,
+      applyAriaDisabled,
+      readOnly,
+      ...xStyledProps,
+      ...globalAttributes,
+      onChange: handleOnChange,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledSelect,
+          {
+            id,
+            disabled,
+            required,
+            size,
+            "aria-invalid": hasError,
+            "aria-disabled": isLocked,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledDropDownButton,
+          {
+            justifyContent: "center",
+            alignItems: "center",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {})
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledControlsWrapper, { disabled, hasError, ...xStyledProps, ...globalAttributes, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styled.StyledSelect,
-      {
-        id,
-        disabled,
-        required,
-        size,
-        getOwnerProps,
-        getOwnerPropsArguments,
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledDropDownButton, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronSmallDown, {}) })
-  ] });
 };
 DSNativeSelect.displayName = "DSNativeSelect";
 const DSNativeSelectWithSchema = (0, import_ds_props_helpers.describe)(DSNativeSelect);
-DSNativeSelectWithSchema.propTypes = propTypes;
+DSNativeSelectWithSchema.propTypes = import_react_desc_prop_types.DSNativeSelectPropTypesSchema;
 //# sourceMappingURL=NativeSelect.js.map

package/dist/cjs/NativeSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/NativeSelect.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-unused-vars */\nimport React, { type WeakValidationMap, useCallback } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport {\n  useGetGlobalAttributes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  useGetXstyledProps,\n  describe,\n  PropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from './styled.js';\n\ninterface Props {\n  hasError: boolean;\n  disabled: boolean;\n  children: React.ReactNode;\n}\n\nconst propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  hasError: PropTypes.bool.description('whether the input has an error').defaultValue(false),\n  disabled: PropTypes.bool.description('whether the input is disabled').defaultValue(false),\n  children: PropTypes.node.description('options to be rendered in the select'),\n};\n\nconst DSNativeSelect: React.ComponentType<Props> = (props) => {\n  const { hasError, disabled, children } = props;\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const xStyledProps = useGetXstyledProps(props);\n  const { id, required, size, ...globalAttributes } = useGetGlobalAttributes<Props, HTMLDivElement, DSGridT.Props>(\n    props,\n  );\n  return (\n    <StyledControlsWrapper disabled={disabled} hasError={hasError} {...xStyledProps} {...globalAttributes}>\n      <StyledSelect\n        id={id}\n        disabled={disabled}\n        required={required}\n        size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledSelect>\n      <StyledDropDownButton justifyContent=\"center\" alignItems=\"center\">\n        <ChevronSmallDown />\n      </StyledDropDownButton>\n    </StyledControlsWrapper>\n  );\n};\n\nDSNativeSelect.displayName = 'DSNativeSelect';\nconst DSNativeSelectWithSchema = describe(DSNativeSelect);\nDSNativeSelectWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSNativeSelect, DSNativeSelectWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCnB;AAtCJ,mBAA2D;AAC3D,sBAAiC;AACjC,8BAOO;AAEP,oBAA0E;AAQ1E,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACzF,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAC7E;AAEA,MAAM,iBAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AAEzC,QAAM,oBAAgB,0BAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,IAAI,UAAU,MAAM,GAAG,iBAAiB,QAAI;AAAA,IAClD;AAAA,EACF;AACA,SACE,6CAAC,uCAAsB,UAAoB,UAAqB,GAAG,cAAe,GAAG,kBACnF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,4CAAC,sCAAqB,gBAAe,UAAS,YAAW,UACvD,sDAAC,oCAAiB,GACpB;AAAA,KACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import React, { useCallback, useRef } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from './styled.js';\nimport { type DSNativeSelectT, DSNativeSelectPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\n\nconst DSNativeSelect: React.ComponentType<DSNativeSelectT.Props> = (props) => {\n  const { hasError, disabled, applyAriaDisabled, readOnly, children } =\n    useMemoMergePropsWithDefault<DSNativeSelectT.InternalProps>(props, defaultProps);\n\n  const isLocked = applyAriaDisabled || readOnly;\n\n  // Ref pattern mirrors ds-form-input-text/src/config/useInputText.ts:\n  // gate the consumer onChange while locked, but always invoke the latest\n  // user handler without recreating the wrapper when the consumer's handler is unmemoised.\n  const userOnChangeRef = useRef(props.onChange);\n  userOnChangeRef.current = props.onChange;\n  const handleOnChange = useCallback(\n    (e: React.FormEvent<HTMLDivElement>) => {\n      if (isLocked) return;\n      userOnChangeRef.current?.(e);\n    },\n    [isLocked],\n  );\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const xStyledProps = useGetXstyledProps(props);\n  const { id, required, size, ...globalAttributes } = useGetGlobalAttributes<\n    DSNativeSelectT.Props,\n    HTMLDivElement,\n    DSGridT.Props\n  >(props);\n  return (\n    <StyledControlsWrapper\n      disabled={disabled}\n      hasError={hasError}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...xStyledProps}\n      {...globalAttributes}\n      onChange={handleOnChange}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSelect\n        id={id}\n        disabled={disabled}\n        required={required}\n        size={size}\n        aria-invalid={hasError}\n        aria-disabled={isLocked}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledSelect>\n      <StyledDropDownButton\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <ChevronSmallDown />\n      </StyledDropDownButton>\n    </StyledControlsWrapper>\n  );\n};\n\nDSNativeSelect.displayName = 'DSNativeSelect';\nconst DSNativeSelectWithSchema = describe(DSNativeSelect);\nDSNativeSelectWithSchema.propTypes = DSNativeSelectPropTypesSchema;\n\nexport { DSNativeSelect, DSNativeSelectWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCnB;AAzCJ,mBAA2C;AAC3C,sBAAiC;AACjC,8BAKO;AAEP,oBAA0E;AAC1E,mCAAkF;AAElF,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,EAAE,UAAU,UAAU,mBAAmB,UAAU,SAAS,QAChE,sDAA4D,OAAO,yCAAY;AAEjF,QAAM,WAAW,qBAAqB;AAKtC,QAAM,sBAAkB,qBAAO,MAAM,QAAQ;AAC7C,kBAAgB,UAAU,MAAM;AAChC,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAuC;AACtC,UAAI,SAAU;AACd,sBAAgB,UAAU,CAAC;AAAA,IAC7B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,oBAAgB,0BAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,IAAI,UAAU,MAAM,GAAG,iBAAiB,QAAI,gDAIlD,KAAK;AACP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,YAAW;AAAA,YACX;AAAA,YACA;AAAA,YAEA,sDAAC,oCAAiB;AAAA;AAAA,QACpB;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/cjs/{NativeSelectDefinitions.js → constants/index.js}

@@ -26,17 +26,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var NativeSelectDefinitions_exports = {};
-__export(NativeSelectDefinitions_exports, {
+var constants_exports = {};
+__export(constants_exports, {
   DSNativeSelectName: () => DSNativeSelectName,
-  DSNativeSelectSlots: () => DSNativeSelectSlots
+  NATIVE_SELECT_DATA_TESTID: () => NATIVE_SELECT_DATA_TESTID,
+  NATIVE_SELECT_SLOTS: () => NATIVE_SELECT_SLOTS
 });
-module.exports = __toCommonJS(NativeSelectDefinitions_exports);
+module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
 const DSNativeSelectName = "DSNativeselect";
-const DSNativeSelectSlots = {
+const NATIVE_SELECT_SLOTS = {
   CONTAINER: "root",
   INPUT: "input",
   DROP_INDICATOR: "drop-indicator"
 };
-//# sourceMappingURL=NativeSelectDefinitions.js.map
+const NATIVE_SELECT_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSNativeSelectName, NATIVE_SELECT_SLOTS);
+//# sourceMappingURL=index.js.map

package/dist/cjs/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSNativeSelectName = 'DSNativeselect';\n\n// using ${component_name}_SLOTS convention to namespace & avoid errors on duplicate exports in aggregators\nexport const NATIVE_SELECT_SLOTS = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  DROP_INDICATOR: 'drop-indicator',\n} as const;\n\n// using ${component_name}_DATA_TESTID convention to namespace & avoid errors on duplicate exports in aggregators\nexport const NATIVE_SELECT_DATA_TESTID = slotObjectToDataTestIds(DSNativeSelectName, NATIVE_SELECT_SLOTS);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,gBAAgB;AAClB;AAGO,MAAM,gCAA4B,0CAAwB,oBAAoB,mBAAmB;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -24,7 +27,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
+__export(index_exports, {
+  DSNativeSelect: () => import_NativeSelect.DSNativeSelect,
+  DSNativeSelectName: () => import_constants.DSNativeSelectName,
+  DSNativeSelectWithSchema: () => import_NativeSelect.DSNativeSelectWithSchema,
+  NATIVE_SELECT_DATA_TESTID: () => import_constants.NATIVE_SELECT_DATA_TESTID,
+  NATIVE_SELECT_SLOTS: () => import_constants.NATIVE_SELECT_SLOTS
+});
 module.exports = __toCommonJS(index_exports);
 var React = __toESM(require("react"));
-__reExport(index_exports, require("./NativeSelect.js"), module.exports);
+var import_NativeSelect = require("./NativeSelect.js");
+var import_constants = require("./constants/index.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './NativeSelect.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAc,8BAAd;",
+  "sourcesContent": ["export { DSNativeSelect, DSNativeSelectWithSchema } from './NativeSelect.js';\nexport { type DSNativeSelectT } from './react-desc-prop-types.js';\nexport { NATIVE_SELECT_SLOTS, NATIVE_SELECT_DATA_TESTID, DSNativeSelectName } from './constants/index.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAyD;AAEzD,uBAAmF;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSNativeSelectPropTypes: () => DSNativeSelectPropTypes,
+  DSNativeSelectPropTypesSchema: () => DSNativeSelectPropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_constants = require("./constants/index.js");
+const defaultProps = {
+  hasError: false,
+  disabled: false,
+  applyAriaDisabled: false,
+  readOnly: false
+};
+const DSNativeSelectPropTypes = {
+  ...(0, import_ds_props_helpers.getPropsPerSlotPropTypes)(import_constants.DSNativeSelectName, import_constants.NATIVE_SELECT_SLOTS),
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  hasError: import_ds_props_helpers.PropTypes.bool.description("whether the input has an error").defaultValue(false),
+  disabled: import_ds_props_helpers.PropTypes.bool.description("whether the input is disabled").defaultValue(false),
+  applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
+  ).defaultValue(false),
+  readOnly: import_ds_props_helpers.PropTypes.bool.description(
+    "Renders the select as aria-disabled (readonly is not a valid HTML attribute on <select>): focusable, blocks onChange, shows the two-tone locked border. Does not set the HTML readonly attribute."
+  ).defaultValue(false),
+  children: import_ds_props_helpers.PropTypes.node.description("options to be rendered in the select")
+};
+const DSNativeSelectPropTypesSchema = DSNativeSelectPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type React from 'react';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSNativeSelectName, NATIVE_SELECT_SLOTS } from './constants/index.js';\n\nexport declare namespace DSNativeSelectT {\n  /**\n   * Explicit function-form slot prop types \u2014 one entry per slot.\n   * NOTE: SlotFunctionArguments is a known cross-cutting gap across the forms group\n   * (see TODO_ENTROPY_REVIEW.md). This package acts as the reference implementation.\n   */\n  export type SlotFunctionArguments = {\n    dsNativeselectRoot: () => object;\n    dsNativeselectInput: () => object;\n    dsNativeselectDropIndicator: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    hasError: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSNativeSelectName, typeof NATIVE_SELECT_SLOTS> {\n    children?: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSNativeSelectT.DefaultProps = {\n  hasError: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSNativeSelectPropTypes: DSPropTypesSchema<DSNativeSelectT.Props> = {\n  ...getPropsPerSlotPropTypes(DSNativeSelectName, NATIVE_SELECT_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  hasError: PropTypes.bool.description('whether the input has an error').defaultValue(false),\n  disabled: PropTypes.bool.description('whether the input is disabled').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Renders the select as aria-disabled (readonly is not a valid HTML attribute on <select>): focusable, blocks onChange, shows the two-tone locked border. Does not set the HTML readonly attribute.',\n    )\n    .defaultValue(false),\n  children: PropTypes.node.description('options to be rendered in the select'),\n};\n\nexport const DSNativeSelectPropTypesSchema = DSNativeSelectPropTypes as unknown as ValidationMap<DSNativeSelectT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAEP,uBAAwD;AA2CjD,MAAM,eAA6C;AAAA,EACxD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,0BAAoE;AAAA,EAC/E,OAAG,kDAAyB,qCAAoB,oCAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,kCAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACzF,UAAU,kCAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAC7E;AAEO,MAAM,gCAAgC;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -36,9 +36,20 @@ module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
-var import_NativeSelectDefinitions = require("./NativeSelectDefinitions.js");
+var import_constants = require("./constants/index.js");
+const disabledBorder = import_ds_system.css`
+  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};
+`;
+const errorBorder = import_ds_system.css`
+  border: 1px solid ${({ theme }) => theme.colors.danger[900]};
+`;
+const lockedBorder = import_ds_system.css`
+  background-color: ${({ theme }) => theme.colors.neutral["050"]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};
+`;
 const normalBorder = import_ds_system.css`
-  border: 1px solid ${({ hasError, theme }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};
 `;
 const focusBorder = import_ds_system.css`
   outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
@@ -48,8 +59,8 @@ const hoverBorder = import_ds_system.css`
   border: 1px solid ${({ theme }) => theme.colors.brand[700]};
 `;
 const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_NativeSelectDefinitions.DSNativeSelectName,
-  slot: import_NativeSelectDefinitions.DSNativeSelectSlots.CONTAINER
+  name: import_constants.DSNativeSelectName,
+  slot: import_constants.NATIVE_SELECT_SLOTS.CONTAINER
 })`
   background: ${({ disabled, theme }) => disabled ? theme.colors.neutral["080"] : "#ffffff"};
   position: relative;
@@ -57,17 +68,22 @@ const StyledControlsWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid,
   align-items: center;
   align-content: center;
   height: 28px;
-  ${normalBorder}
+  ${({ disabled, hasError, applyAriaDisabled, readOnly }) => {
+  if (disabled) return disabledBorder;
+  if (hasError) return errorBorder;
+  if (applyAriaDisabled || readOnly) return lockedBorder;
+  return normalBorder;
+}}
   &:hover {
-    ${({ disabled }) => !disabled ? hoverBorder : ""}
+    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? hoverBorder : ""}
   }
   &:focus-within {
     ${focusBorder}
   }
 `;
 const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_grid.Grid, {
-  name: import_NativeSelectDefinitions.DSNativeSelectName,
-  slot: import_NativeSelectDefinitions.DSNativeSelectSlots.DROP_INDICATOR
+  name: import_constants.DSNativeSelectName,
+  slot: import_constants.NATIVE_SELECT_SLOTS.DROP_INDICATOR
 })`
   position: absolute;
   right: 0;
@@ -77,8 +93,8 @@ const StyledDropDownButton = (0, import_ds_system.styled)(import_ds_grid.Grid, {
   z-index: 1;
 `;
 const StyledSelect = (0, import_ds_system.styled)("select", {
-  name: import_NativeSelectDefinitions.DSNativeSelectName,
-  slot: import_NativeSelectDefinitions.DSNativeSelectSlots.INPUT
+  name: import_constants.DSNativeSelectName,
+  slot: import_constants.NATIVE_SELECT_SLOTS.INPUT
 })`
   height: 28px;
   appearance: none;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSNativeSelectSlots, DSNativeSelectName } from './NativeSelectDefinitions.js';\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\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[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.CONTAINER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  ${normalBorder}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledDropDownButton = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.DROP_INDICATOR,\n})`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  cursor: pointer;\n  width: 28px;\n  z-index: 1;\n`;\n\nexport const StyledSelect = styled('select', {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.INPUT,\n})`\n  height: 28px;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral['400']};\n    cursor: not-allowed;\n  }\n  z-index: 2;\n  padding-left: 8px;\n  padding-right: 28px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AACrB,qCAAwD;AAKxD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAEhH,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;AAErD,MAAM,4BAAwB,yBAAO,qBAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,mDAAoB;AAC5B,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzF,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mDAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,mBAAe,yBAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,mDAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOxC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSNativeSelectName, NATIVE_SELECT_SLOTS } from './constants/index.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\n// Border precedence matches packages/forms/ds-form-input-text/src/styled/borders.ts:\n// disabled \u2192 focus (pseudo) \u2192 hasError \u2192 locked (applyAriaDisabled | readOnly) \u2192 normal\nconst disabledBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst errorBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.danger[900]};\n`;\n\nconst lockedBorder = css`\n  background-color: ${({ theme }) => theme.colors.neutral['050']};\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst normalBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};\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[700]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: NATIVE_SELECT_SLOTS.CONTAINER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  ${({ disabled, hasError, applyAriaDisabled, readOnly }) => {\n    if (disabled) return disabledBorder;\n    if (hasError) return errorBorder;\n    if (applyAriaDisabled || readOnly) return lockedBorder;\n    return normalBorder;\n  }}\n  &:hover {\n    ${({ disabled, applyAriaDisabled, readOnly }) => (!disabled && !applyAriaDisabled && !readOnly ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledDropDownButton = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: NATIVE_SELECT_SLOTS.DROP_INDICATOR,\n})`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  cursor: pointer;\n  width: 28px;\n  z-index: 1;\n`;\n\nexport const StyledSelect = styled('select', {\n  name: DSNativeSelectName,\n  slot: NATIVE_SELECT_SLOTS.INPUT,\n})`\n  height: 28px;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral['400']};\n    cursor: not-allowed;\n  }\n  z-index: 2;\n  padding-left: 8px;\n  padding-right: 28px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,qBAAqB;AACrB,uBAAwD;AAWxD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG9D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAG7D,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,sBAC1C,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,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG9D,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,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzF,CAAC,EAAE,UAAU,UAAU,mBAAmB,SAAS,MAAM;AACzD,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,MAAI,qBAAqB,SAAU,QAAO;AAC1C,SAAO;AACT,CAAC;AAAA;AAAA,MAEG,CAAC,EAAE,UAAU,mBAAmB,SAAS,MAAO,CAAC,YAAY,CAAC,qBAAqB,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhH,WAAW;AAAA;AAAA;AAIV,MAAM,2BAAuB,yBAAO,qBAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,mBAAe,yBAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOxC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/NativeSelect.js

@@ -1,50 +1,75 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { ChevronSmallDown } from "@elliemae/ds-icons";
 import {
   useGetGlobalAttributes,
-  globalAttributesPropTypes,
-  xstyledPropTypes,
   useGetXstyledProps,
-  describe,
-  PropTypes
+  useMemoMergePropsWithDefault,
+  describe
 } from "@elliemae/ds-props-helpers";
 import { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from "./styled.js";
-const propTypes = {
-  ...globalAttributesPropTypes,
-  ...xstyledPropTypes,
-  hasError: PropTypes.bool.description("whether the input has an error").defaultValue(false),
-  disabled: PropTypes.bool.description("whether the input is disabled").defaultValue(false),
-  children: PropTypes.node.description("options to be rendered in the select")
-};
+import { DSNativeSelectPropTypesSchema, defaultProps } from "./react-desc-prop-types.js";
 const DSNativeSelect = (props) => {
-  const { hasError, disabled, children } = props;
+  const { hasError, disabled, applyAriaDisabled, readOnly, children } = useMemoMergePropsWithDefault(props, defaultProps);
+  const isLocked = applyAriaDisabled || readOnly;
+  const userOnChangeRef = useRef(props.onChange);
+  userOnChangeRef.current = props.onChange;
+  const handleOnChange = useCallback(
+    (e) => {
+      if (isLocked) return;
+      userOnChangeRef.current?.(e);
+    },
+    [isLocked]
+  );
   const getOwnerProps = useCallback(() => props, [props]);
   const getOwnerPropsArguments = useCallback(() => ({}), []);
   const xStyledProps = useGetXstyledProps(props);
-  const { id, required, size, ...globalAttributes } = useGetGlobalAttributes(
-    props
+  const { id, required, size, ...globalAttributes } = useGetGlobalAttributes(props);
+  return /* @__PURE__ */ jsxs(
+    StyledControlsWrapper,
+    {
+      disabled,
+      hasError,
+      applyAriaDisabled,
+      readOnly,
+      ...xStyledProps,
+      ...globalAttributes,
+      onChange: handleOnChange,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledSelect,
+          {
+            id,
+            disabled,
+            required,
+            size,
+            "aria-invalid": hasError,
+            "aria-disabled": isLocked,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledDropDownButton,
+          {
+            justifyContent: "center",
+            alignItems: "center",
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: /* @__PURE__ */ jsx(ChevronSmallDown, {})
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ jsxs(StyledControlsWrapper, { disabled, hasError, ...xStyledProps, ...globalAttributes, children: [
-    /* @__PURE__ */ jsx(
-      StyledSelect,
-      {
-        id,
-        disabled,
-        required,
-        size,
-        getOwnerProps,
-        getOwnerPropsArguments,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx(StyledDropDownButton, { justifyContent: "center", alignItems: "center", children: /* @__PURE__ */ jsx(ChevronSmallDown, {}) })
-  ] });
 };
 DSNativeSelect.displayName = "DSNativeSelect";
 const DSNativeSelectWithSchema = describe(DSNativeSelect);
-DSNativeSelectWithSchema.propTypes = propTypes;
+DSNativeSelectWithSchema.propTypes = DSNativeSelectPropTypesSchema;
 export {
   DSNativeSelect,
   DSNativeSelectWithSchema

package/dist/esm/NativeSelect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NativeSelect.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\nimport React, { type WeakValidationMap, useCallback } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport {\n  useGetGlobalAttributes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n  useGetXstyledProps,\n  describe,\n  PropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from './styled.js';\n\ninterface Props {\n  hasError: boolean;\n  disabled: boolean;\n  children: React.ReactNode;\n}\n\nconst propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  hasError: PropTypes.bool.description('whether the input has an error').defaultValue(false),\n  disabled: PropTypes.bool.description('whether the input is disabled').defaultValue(false),\n  children: PropTypes.node.description('options to be rendered in the select'),\n};\n\nconst DSNativeSelect: React.ComponentType<Props> = (props) => {\n  const { hasError, disabled, children } = props;\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const xStyledProps = useGetXstyledProps(props);\n  const { id, required, size, ...globalAttributes } = useGetGlobalAttributes<Props, HTMLDivElement, DSGridT.Props>(\n    props,\n  );\n  return (\n    <StyledControlsWrapper disabled={disabled} hasError={hasError} {...xStyledProps} {...globalAttributes}>\n      <StyledSelect\n        id={id}\n        disabled={disabled}\n        required={required}\n        size={size}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledSelect>\n      <StyledDropDownButton justifyContent=\"center\" alignItems=\"center\">\n        <ChevronSmallDown />\n      </StyledDropDownButton>\n    </StyledControlsWrapper>\n  );\n};\n\nDSNativeSelect.displayName = 'DSNativeSelect';\nconst DSNativeSelectWithSchema = describe(DSNativeSelect);\nDSNativeSelectWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSNativeSelect, DSNativeSelectWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuCnB,SACE,KADF;AAtCJ,SAAwC,mBAAmB;AAC3D,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB,sBAAsB,oBAAoB;AAQ1E,MAAM,YAAY;AAAA,EAChB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACzF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAC7E;AAEA,MAAM,iBAA6C,CAAC,UAAU;AAC5D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;AAEzC,QAAM,gBAAgB,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,IAAI,UAAU,MAAM,GAAG,iBAAiB,IAAI;AAAA,IAClD;AAAA,EACF;AACA,SACE,qBAAC,yBAAsB,UAAoB,UAAqB,GAAG,cAAe,GAAG,kBACnF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,wBAAqB,gBAAe,UAAS,YAAW,UACvD,8BAAC,oBAAiB,GACpB;AAAA,KACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef } from 'react';\nimport { ChevronSmallDown } from '@elliemae/ds-icons';\nimport {\n  useGetGlobalAttributes,\n  useGetXstyledProps,\n  useMemoMergePropsWithDefault,\n  describe,\n} from '@elliemae/ds-props-helpers';\nimport type { DSGridT } from '@elliemae/ds-grid';\nimport { StyledControlsWrapper, StyledDropDownButton, StyledSelect } from './styled.js';\nimport { type DSNativeSelectT, DSNativeSelectPropTypesSchema, defaultProps } from './react-desc-prop-types.js';\n\nconst DSNativeSelect: React.ComponentType<DSNativeSelectT.Props> = (props) => {\n  const { hasError, disabled, applyAriaDisabled, readOnly, children } =\n    useMemoMergePropsWithDefault<DSNativeSelectT.InternalProps>(props, defaultProps);\n\n  const isLocked = applyAriaDisabled || readOnly;\n\n  // Ref pattern mirrors ds-form-input-text/src/config/useInputText.ts:\n  // gate the consumer onChange while locked, but always invoke the latest\n  // user handler without recreating the wrapper when the consumer's handler is unmemoised.\n  const userOnChangeRef = useRef(props.onChange);\n  userOnChangeRef.current = props.onChange;\n  const handleOnChange = useCallback(\n    (e: React.FormEvent<HTMLDivElement>) => {\n      if (isLocked) return;\n      userOnChangeRef.current?.(e);\n    },\n    [isLocked],\n  );\n\n  const getOwnerProps = useCallback(() => props, [props]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  const xStyledProps = useGetXstyledProps(props);\n  const { id, required, size, ...globalAttributes } = useGetGlobalAttributes<\n    DSNativeSelectT.Props,\n    HTMLDivElement,\n    DSGridT.Props\n  >(props);\n  return (\n    <StyledControlsWrapper\n      disabled={disabled}\n      hasError={hasError}\n      applyAriaDisabled={applyAriaDisabled}\n      readOnly={readOnly}\n      {...xStyledProps}\n      {...globalAttributes}\n      onChange={handleOnChange}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledSelect\n        id={id}\n        disabled={disabled}\n        required={required}\n        size={size}\n        aria-invalid={hasError}\n        aria-disabled={isLocked}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {children}\n      </StyledSelect>\n      <StyledDropDownButton\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <ChevronSmallDown />\n      </StyledDropDownButton>\n    </StyledControlsWrapper>\n  );\n};\n\nDSNativeSelect.displayName = 'DSNativeSelect';\nconst DSNativeSelectWithSchema = describe(DSNativeSelect);\nDSNativeSelectWithSchema.propTypes = DSNativeSelectPropTypesSchema;\n\nexport { DSNativeSelect, DSNativeSelectWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACyCnB,SAWE,KAXF;AAzCJ,SAAgB,aAAa,cAAc;AAC3C,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,uBAAuB,sBAAsB,oBAAoB;AAC1E,SAA+B,+BAA+B,oBAAoB;AAElF,MAAM,iBAA6D,CAAC,UAAU;AAC5E,QAAM,EAAE,UAAU,UAAU,mBAAmB,UAAU,SAAS,IAChE,6BAA4D,OAAO,YAAY;AAEjF,QAAM,WAAW,qBAAqB;AAKtC,QAAM,kBAAkB,OAAO,MAAM,QAAQ;AAC7C,kBAAgB,UAAU,MAAM;AAChC,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAAuC;AACtC,UAAI,SAAU;AACd,sBAAgB,UAAU,CAAC;AAAA,IAC7B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,gBAAgB,YAAY,MAAM,OAAO,CAAC,KAAK,CAAC;AACtD,QAAM,yBAAyB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,QAAM,eAAe,mBAAmB,KAAK;AAC7C,QAAM,EAAE,IAAI,UAAU,MAAM,GAAG,iBAAiB,IAAI,uBAIlD,KAAK;AACP,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,YAAW;AAAA,YACX;AAAA,YACA;AAAA,YAEA,8BAAC,oBAAiB;AAAA;AAAA,QACpB;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSNativeSelectName = "DSNativeselect";
+const NATIVE_SELECT_SLOTS = {
+  CONTAINER: "root",
+  INPUT: "input",
+  DROP_INDICATOR: "drop-indicator"
+};
+const NATIVE_SELECT_DATA_TESTID = slotObjectToDataTestIds(DSNativeSelectName, NATIVE_SELECT_SLOTS);
+export {
+  DSNativeSelectName,
+  NATIVE_SELECT_DATA_TESTID,
+  NATIVE_SELECT_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSNativeSelectName = 'DSNativeselect';\n\n// using ${component_name}_SLOTS convention to namespace & avoid errors on duplicate exports in aggregators\nexport const NATIVE_SELECT_SLOTS = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  DROP_INDICATOR: 'drop-indicator',\n} as const;\n\n// using ${component_name}_DATA_TESTID convention to namespace & avoid errors on duplicate exports in aggregators\nexport const NATIVE_SELECT_DATA_TESTID = slotObjectToDataTestIds(DSNativeSelectName, NATIVE_SELECT_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,qBAAqB;AAG3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,gBAAgB;AAClB;AAGO,MAAM,4BAA4B,wBAAwB,oBAAoB,mBAAmB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -1,3 +1,11 @@
 import * as React from "react";
-export * from "./NativeSelect.js";
+import { DSNativeSelect, DSNativeSelectWithSchema } from "./NativeSelect.js";
+import { NATIVE_SELECT_SLOTS, NATIVE_SELECT_DATA_TESTID, DSNativeSelectName } from "./constants/index.js";
+export {
+  DSNativeSelect,
+  DSNativeSelectName,
+  DSNativeSelectWithSchema,
+  NATIVE_SELECT_DATA_TESTID,
+  NATIVE_SELECT_SLOTS
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './NativeSelect.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSNativeSelect, DSNativeSelectWithSchema } from './NativeSelect.js';\nexport { type DSNativeSelectT } from './react-desc-prop-types.js';\nexport { NATIVE_SELECT_SLOTS, NATIVE_SELECT_DATA_TESTID, DSNativeSelectName } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB,gCAAgC;AAEzD,SAAS,qBAAqB,2BAA2B,0BAA0B;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,35 @@
+import * as React from "react";
+import {
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  PropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSNativeSelectName, NATIVE_SELECT_SLOTS } from "./constants/index.js";
+const defaultProps = {
+  hasError: false,
+  disabled: false,
+  applyAriaDisabled: false,
+  readOnly: false
+};
+const DSNativeSelectPropTypes = {
+  ...getPropsPerSlotPropTypes(DSNativeSelectName, NATIVE_SELECT_SLOTS),
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  hasError: PropTypes.bool.description("whether the input has an error").defaultValue(false),
+  disabled: PropTypes.bool.description("whether the input is disabled").defaultValue(false),
+  applyAriaDisabled: PropTypes.bool.description(
+    "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION"
+  ).defaultValue(false),
+  readOnly: PropTypes.bool.description(
+    "Renders the select as aria-disabled (readonly is not a valid HTML attribute on <select>): focusable, blocks onChange, shows the two-tone locked border. Does not set the HTML readonly attribute."
+  ).defaultValue(false),
+  children: PropTypes.node.description("options to be rendered in the select")
+};
+const DSNativeSelectPropTypesSchema = DSNativeSelectPropTypes;
+export {
+  DSNativeSelectPropTypes,
+  DSNativeSelectPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSNativeSelectName, NATIVE_SELECT_SLOTS } from './constants/index.js';\n\nexport declare namespace DSNativeSelectT {\n  /**\n   * Explicit function-form slot prop types \u2014 one entry per slot.\n   * NOTE: SlotFunctionArguments is a known cross-cutting gap across the forms group\n   * (see TODO_ENTROPY_REVIEW.md). This package acts as the reference implementation.\n   */\n  export type SlotFunctionArguments = {\n    dsNativeselectRoot: () => object;\n    dsNativeselectInput: () => object;\n    dsNativeselectDropIndicator: () => object;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    hasError: boolean;\n    disabled: boolean;\n    applyAriaDisabled: boolean;\n    readOnly: boolean;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSNativeSelectName, typeof NATIVE_SELECT_SLOTS> {\n    children?: React.ReactNode;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const defaultProps: DSNativeSelectT.DefaultProps = {\n  hasError: false,\n  disabled: false,\n  applyAriaDisabled: false,\n  readOnly: false,\n};\n\nexport const DSNativeSelectPropTypes: DSPropTypesSchema<DSNativeSelectT.Props> = {\n  ...getPropsPerSlotPropTypes(DSNativeSelectName, NATIVE_SELECT_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  hasError: PropTypes.bool.description('whether the input has an error').defaultValue(false),\n  disabled: PropTypes.bool.description('whether the input is disabled').defaultValue(false),\n  applyAriaDisabled: PropTypes.bool\n    .description(\n      'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION',\n    )\n    .defaultValue(false),\n  readOnly: PropTypes.bool\n    .description(\n      'Renders the select as aria-disabled (readonly is not a valid HTML attribute on <select>): focusable, blocks onChange, shows the two-tone locked border. Does not set the HTML readonly attribute.',\n    )\n    .defaultValue(false),\n  children: PropTypes.node.description('options to be rendered in the select'),\n};\n\nexport const DSNativeSelectPropTypesSchema = DSNativeSelectPropTypes as unknown as ValidationMap<DSNativeSelectT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB,2BAA2B;AA2CjD,MAAM,eAA6C;AAAA,EACxD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,0BAAoE;AAAA,EAC/E,GAAG,yBAAyB,oBAAoB,mBAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,UAAU,UAAU,KAAK,YAAY,gCAAgC,EAAE,aAAa,KAAK;AAAA,EACzF,UAAU,UAAU,KAAK,YAAY,+BAA+B,EAAE,aAAa,KAAK;AAAA,EACxF,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KACjB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAC7E;AAEO,MAAM,gCAAgC;",
+  "names": []
+}

package/dist/esm/styled.js

@@ -1,9 +1,20 @@
 import * as React from "react";
 import { styled, css } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSNativeSelectSlots, DSNativeSelectName } from "./NativeSelectDefinitions.js";
+import { DSNativeSelectName, NATIVE_SELECT_SLOTS } from "./constants/index.js";
+const disabledBorder = css`
+  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};
+`;
+const errorBorder = css`
+  border: 1px solid ${({ theme }) => theme.colors.danger[900]};
+`;
+const lockedBorder = css`
+  background-color: ${({ theme }) => theme.colors.neutral["050"]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};
+`;
 const normalBorder = css`
-  border: 1px solid ${({ hasError, theme }) => hasError ? theme.colors.danger[900] : theme.colors.neutral[400]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};
 `;
 const focusBorder = css`
   outline: 2px solid ${({ theme }) => theme.colors.brand[700]};
@@ -14,7 +25,7 @@ const hoverBorder = css`
 `;
 const StyledControlsWrapper = styled(Grid, {
   name: DSNativeSelectName,
-  slot: DSNativeSelectSlots.CONTAINER
+  slot: NATIVE_SELECT_SLOTS.CONTAINER
 })`
   background: ${({ disabled, theme }) => disabled ? theme.colors.neutral["080"] : "#ffffff"};
   position: relative;
@@ -22,9 +33,14 @@ const StyledControlsWrapper = styled(Grid, {
   align-items: center;
   align-content: center;
   height: 28px;
-  ${normalBorder}
+  ${({ disabled, hasError, applyAriaDisabled, readOnly }) => {
+  if (disabled) return disabledBorder;
+  if (hasError) return errorBorder;
+  if (applyAriaDisabled || readOnly) return lockedBorder;
+  return normalBorder;
+}}
   &:hover {
-    ${({ disabled }) => !disabled ? hoverBorder : ""}
+    ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly ? hoverBorder : ""}
   }
   &:focus-within {
     ${focusBorder}
@@ -32,7 +48,7 @@ const StyledControlsWrapper = styled(Grid, {
 `;
 const StyledDropDownButton = styled(Grid, {
   name: DSNativeSelectName,
-  slot: DSNativeSelectSlots.DROP_INDICATOR
+  slot: NATIVE_SELECT_SLOTS.DROP_INDICATOR
 })`
   position: absolute;
   right: 0;
@@ -43,7 +59,7 @@ const StyledDropDownButton = styled(Grid, {
 `;
 const StyledSelect = styled("select", {
   name: DSNativeSelectName,
-  slot: DSNativeSelectSlots.INPUT
+  slot: NATIVE_SELECT_SLOTS.INPUT
 })`
   height: 28px;
   appearance: none;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSNativeSelectSlots, DSNativeSelectName } from './NativeSelectDefinitions.js';\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  disabled: boolean;\n}\nconst normalBorder = css<{ hasError: boolean }>`\n  border: 1px solid ${({ hasError, theme }) => (hasError ? theme.colors.danger[900] : theme.colors.neutral[400])};\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[700]};\n`;\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.CONTAINER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  ${normalBorder}\n  &:hover {\n    ${({ disabled }) => (!disabled ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledDropDownButton = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.DROP_INDICATOR,\n})`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  cursor: pointer;\n  width: 28px;\n  z-index: 1;\n`;\n\nexport const StyledSelect = styled('select', {\n  name: DSNativeSelectName,\n  slot: DSNativeSelectSlots.INPUT,\n})`\n  height: 28px;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral['400']};\n    cursor: not-allowed;\n  }\n  z-index: 2;\n  padding-left: 8px;\n  padding-right: 28px;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,qBAAqB,0BAA0B;AAKxD,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,OAAO,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG,CAAE;AAAA;AAEhH,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;AAErD,MAAM,wBAAwB,OAAO,MAAM;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzF,YAAY;AAAA;AAAA,MAEV,CAAC,EAAE,SAAS,MAAO,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhD,WAAW;AAAA;AAAA;AAIV,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOxC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSNativeSelectName, NATIVE_SELECT_SLOTS } from './constants/index.js';\n\ninterface StyledControlsWrapperT {\n  hasError: boolean;\n  disabled: boolean;\n  applyAriaDisabled: boolean;\n  readOnly: boolean;\n}\n\n// Border precedence matches packages/forms/ds-form-input-text/src/styled/borders.ts:\n// disabled \u2192 focus (pseudo) \u2192 hasError \u2192 locked (applyAriaDisabled | readOnly) \u2192 normal\nconst disabledBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst errorBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.danger[900]};\n`;\n\nconst lockedBorder = css`\n  background-color: ${({ theme }) => theme.colors.neutral['050']};\n  border: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[400]};\n`;\n\nconst normalBorder = css`\n  border: 1px solid ${({ theme }) => theme.colors.neutral[400]};\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[700]};\n`;\n\nexport const StyledControlsWrapper = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: NATIVE_SELECT_SLOTS.CONTAINER,\n})<StyledControlsWrapperT>`\n  background: ${({ disabled, theme }) => (disabled ? theme.colors.neutral['080'] : '#ffffff')};\n  position: relative;\n  border-radius: 2px;\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  ${({ disabled, hasError, applyAriaDisabled, readOnly }) => {\n    if (disabled) return disabledBorder;\n    if (hasError) return errorBorder;\n    if (applyAriaDisabled || readOnly) return lockedBorder;\n    return normalBorder;\n  }}\n  &:hover {\n    ${({ disabled, applyAriaDisabled, readOnly }) => (!disabled && !applyAriaDisabled && !readOnly ? hoverBorder : '')}\n  }\n  &:focus-within {\n    ${focusBorder}\n  }\n`;\n\nexport const StyledDropDownButton = styled(Grid, {\n  name: DSNativeSelectName,\n  slot: NATIVE_SELECT_SLOTS.DROP_INDICATOR,\n})`\n  position: absolute;\n  right: 0;\n  height: 100%;\n  cursor: pointer;\n  width: 28px;\n  z-index: 1;\n`;\n\nexport const StyledSelect = styled('select', {\n  name: DSNativeSelectName,\n  slot: NATIVE_SELECT_SLOTS.INPUT,\n})`\n  height: 28px;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: ${({ theme }) => theme.colors.neutral['700']};\n  cursor: pointer;\n  outline: none;\n  padding: 0;\n  width: 100%;\n  text-align: left;\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral['400']};\n    cursor: not-allowed;\n  }\n  z-index: 2;\n  padding-left: 8px;\n  padding-right: 28px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAWxD,MAAM,iBAAiB;AAAA,sBACD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG9D,MAAM,cAAc;AAAA,sBACE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG,CAAC;AAAA;AAG7D,MAAM,eAAe;AAAA,sBACC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,sBAC1C,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,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAG9D,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,gBACe,CAAC,EAAE,UAAU,MAAM,MAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzF,CAAC,EAAE,UAAU,UAAU,mBAAmB,SAAS,MAAM;AACzD,MAAI,SAAU,QAAO;AACrB,MAAI,SAAU,QAAO;AACrB,MAAI,qBAAqB,SAAU,QAAO;AAC1C,SAAO;AACT,CAAC;AAAA;AAAA,MAEG,CAAC,EAAE,UAAU,mBAAmB,SAAS,MAAO,CAAC,YAAY,CAAC,qBAAqB,CAAC,WAAW,cAAc,EAAG;AAAA;AAAA;AAAA,MAGhH,WAAW;AAAA;AAAA;AAIV,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASM,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKU,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOxC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/types/NativeSelect.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
-interface Props {
-    hasError: boolean;
-    disabled: boolean;
-    children: React.ReactNode;
-}
-declare const DSNativeSelect: React.ComponentType<Props>;
-declare const DSNativeSelectWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<Props>;
+import { type DSNativeSelectT } from './react-desc-prop-types.js';
+declare const DSNativeSelect: React.ComponentType<DSNativeSelectT.Props>;
+declare const DSNativeSelectWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSNativeSelectT.Props>;
 export { DSNativeSelect, DSNativeSelectWithSchema };

package/dist/types/constants/index.d.ts

@@ -0,0 +1,11 @@
+export declare const DSNativeSelectName = "DSNativeselect";
+export declare const NATIVE_SELECT_SLOTS: {
+    readonly CONTAINER: "root";
+    readonly INPUT: "input";
+    readonly DROP_INDICATOR: "drop-indicator";
+};
+export declare const NATIVE_SELECT_DATA_TESTID: {
+    readonly CONTAINER: "ds-nativeselect-root";
+    readonly INPUT: "ds-nativeselect-input";
+    readonly DROP_INDICATOR: "ds-nativeselect-drop-indicator";
+};

package/dist/types/index.d.ts

@@ -1 +1,3 @@
-export * from './NativeSelect.js';
+export { DSNativeSelect, DSNativeSelectWithSchema } from './NativeSelect.js';
+export { type DSNativeSelectT } from './react-desc-prop-types.js';
+export { NATIVE_SELECT_SLOTS, NATIVE_SELECT_DATA_TESTID, DSNativeSelectName } from './constants/index.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,34 @@
+import type React from 'react';
+import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
+import { DSNativeSelectName, NATIVE_SELECT_SLOTS } from './constants/index.js';
+export declare namespace DSNativeSelectT {
+    /**
+     * Explicit function-form slot prop types — one entry per slot.
+     * NOTE: SlotFunctionArguments is a known cross-cutting gap across the forms group
+     * (see TODO_ENTROPY_REVIEW.md). This package acts as the reference implementation.
+     */
+    type SlotFunctionArguments = {
+        dsNativeselectRoot: () => object;
+        dsNativeselectInput: () => object;
+        dsNativeselectDropIndicator: () => object;
+    };
+    interface RequiredProps {
+    }
+    interface DefaultProps {
+        hasError: boolean;
+        disabled: boolean;
+        applyAriaDisabled: boolean;
+        readOnly: boolean;
+    }
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSNativeSelectName, typeof NATIVE_SELECT_SLOTS> {
+        children?: React.ReactNode;
+    }
+    interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>, XstyledProps, RequiredProps {
+    }
+    interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>, XstyledProps, RequiredProps {
+    }
+}
+export declare const defaultProps: DSNativeSelectT.DefaultProps;
+export declare const DSNativeSelectPropTypes: DSPropTypesSchema<DSNativeSelectT.Props>;
+export declare const DSNativeSelectPropTypesSchema: ValidationMap<DSNativeSelectT.Props>;

package/dist/types/styled.d.ts

@@ -1,6 +1,8 @@
 interface StyledControlsWrapperT {
     hasError: boolean;
     disabled: boolean;
+    applyAriaDisabled: boolean;
+    readOnly: boolean;
 }
 export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, StyledControlsWrapperT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
 export declare const StyledDropDownButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;

package/dist/types/tests/DSNativeSelect.api.test.d.ts

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

package/dist/types/tests/DSNativeSelect.data-testid.test.d.ts

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

package/dist/types/tests/DSNativeSelect.events.test.d.ts

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

package/dist/types/tests/DSNativeSelect.exports.test.d.ts

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

package/dist/types/tests/DSNativeSelect.get-owner-props-arguments-slots.test.d.ts

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

package/dist/types/tests/DSNativeSelect.keyboard.test.d.ts

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

package/dist/types/tests/DSNativeSelect.proptype-schema.test.d.ts

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

package/dist/types/tests/DSNativeSelect.pui-14614.test.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-form-native-select",
-  "version": "3.70.0-next.14",
+  "version": "3.70.0-next.16",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Form Native Select",
   "files": [
@@ -36,17 +36,18 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.70.0-next.14",
-    "@elliemae/ds-props-helpers": "3.70.0-next.14",
-    "@elliemae/ds-icons": "3.70.0-next.14",
-    "@elliemae/ds-system": "3.70.0-next.14"
+    "@elliemae/ds-grid": "3.70.0-next.16",
+    "@elliemae/ds-icons": "3.70.0-next.16",
+    "@elliemae/ds-system": "3.70.0-next.16",
+    "@elliemae/ds-props-helpers": "3.70.0-next.16",
+    "@elliemae/ds-typescript-helpers": "3.70.0-next.16"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.13.0",
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.14"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.16"
   },
   "peerDependencies": {
     "@elliemae/pui-theme": "~2.13.0",

package/dist/cjs/NativeSelectDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/NativeSelectDefinitions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export const DSNativeSelectName = 'DSNativeselect';\n\nexport const DSNativeSelectSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  DROP_INDICATOR: 'drop-indicator',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,gBAAgB;AAClB;",
-  "names": []
-}

package/dist/esm/NativeSelectDefinitions.js

@@ -1,12 +0,0 @@
-import * as React from "react";
-const DSNativeSelectName = "DSNativeselect";
-const DSNativeSelectSlots = {
-  CONTAINER: "root",
-  INPUT: "input",
-  DROP_INDICATOR: "drop-indicator"
-};
-export {
-  DSNativeSelectName,
-  DSNativeSelectSlots
-};
-//# sourceMappingURL=NativeSelectDefinitions.js.map

package/dist/esm/NativeSelectDefinitions.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NativeSelectDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSNativeSelectName = 'DSNativeselect';\n\nexport const DSNativeSelectSlots = {\n  CONTAINER: 'root',\n  INPUT: 'input',\n  DROP_INDICATOR: 'drop-indicator',\n} as const;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAE3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,gBAAgB;AAClB;",
-  "names": []
-}

package/dist/types/NativeSelectDefinitions.d.ts

@@ -1,6 +0,0 @@
-export declare const DSNativeSelectName = "DSNativeselect";
-export declare const DSNativeSelectSlots: {
-    readonly CONTAINER: "root";
-    readonly INPUT: "input";
-    readonly DROP_INDICATOR: "drop-indicator";
-};