git push origin main

src/pages/components/select/style.mdx

@@ -47,27 +47,34 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive states
 
-| State    | Element         | Property         | Color token         |
-| -------- | --------------- | ---------------- | ------------------- |
-| Hover    | Field           | background-color | `$field-hover` \*   |
-| Focus    | Field           | border           | `$focus`            |
-| Invalid  | Field           | border           | `$support-error`    |
-|          | Error message   | text-color       | `$text-error`       |
-|          | Error icon      | fill             | `$support-error`    |
-| Warning  | Warning message | text-color       | `$text-primary`     |
-|          | Warning icon    | fill             | `$support-warning`  |
-| Disabled | Field           | background-color | `$field` \*         |
-|          | Input text      | text-color       | `$text-disabled     |
-|          | Field           | border-bottom    | transparent         |
-|          | Field (fluid)   | border-bottom    | `$border-subtle` \* |
-|          | Label           | text-color       | `$text-disabled`    |
-|          | Chevron icon    | fill             | `$icon-disabled`    |
+| State     | Element         | Property                   | Color token         |
+| --------- | --------------- | -------------------------- | ------------------- |
+| Hover     | Field           | background-color           | `$field-hover` \*   |
+| Focus     | Field           | border                     | `$focus`            |
+| Invalid   | Field           | border                     | `$support-error`    |
+|           | Error message   | text-color                 | `$text-error`       |
+|           | Error icon      | fill                       | `$support-error`    |
+| Warning   | Warning message | text-color                 | `$text-primary`     |
+|           | Warning icon    | fill                       | `$support-warning`  |
+| Disabled  | Field           | background-color           | `$field` \*         |
+|           |                 | border-bottom (default)    | transparent         |
+|           |                 | border-bottom (fluid)      | `$border-subtle` \* |
+|           | Label           | text-color                 | `$text-disabled`    |
+|           | Input text      | text-color                 | `$text-disabled     |
+|           | Chevron icon    | fill                       | `$icon-disabled`    |
+| Read-only | Field           | background-color (default) | transparent         |
+|           |                 | background-color (fluid)   | `$layer` \*         |
+|           |                 | border-bottom              | `$border-subtle` \* |
+|           | Label           | text-color                 | `$text-secondary`   |
+|           | Input text      | text-color (default)       | `$text-primary`     |
+|           |                 | text-color (fluid)         | `$text-secondary`   |
+|           | Chevron icon    | fill                       | `$icon-disabled`    |
 
 - Denotes a contextual color token that will change values based on the layer it
   is placed on.
 
 <Row>
-<Column colLg={12}>
+<Column colLg={8}>
 
 <Tabs>
 

src/pages/components/select/usage.mdx

@@ -92,8 +92,7 @@ while the dropdown component can be styled as needed.
       id: 'select',
       label: 'Select',
     },
-  ]}
->
+  ]}>
   <ComponentVariant
     id="select"
     knobs={{
@@ -106,11 +105,11 @@ while the dropdown component can be styled as needed.
         'https://react.carbondesignsystem.com/?path=/story/components-select--default',
       Angular:
         'https://angular.carbondesignsystem.com/?path=/story/components-select--basic',
-      Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/story/components-cvselect--default',
       'Web Components':
         'https://web-components.carbondesignsystem.com/?path=/story/components-select--default',
-    }}
-  >
+    }}>
     {`
 <Select
   defaultValue="placeholder-item"
@@ -328,16 +327,16 @@ The select has multiple interactive states for both default and inline variants:
 **enabled**, **hover**, **focus**, **open**, **error**, **warning**, and
 **disabled**.
 
-| State       | When to use                                                                                                                                                                                                                                                  |
-| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| _Enabled_   | When the select is live and a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled select field should contain a default value.                                                |
-| _Hover_     | When a user's mouse cursor is hovering over the field.                                                                                                                                                                                                       |
-| _Focus_     | When a user tabs to or clicks on the select field, the field becomes focused, indicating the user has successfully navigated to the component.                                                                                                               |
-| _Error_     | When the required select value has not been selected. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved.                                                                             |
-| _Warning_   | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved.                                                                                                            |
-| _Disabled_  | When the user is not allowed to interact with the select due to either permissions, dependencies, or prerequisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance. |
-| _Skeleton_  | Used on an initial page load to indicate that the select has not yet fully loaded.                                                                                                                                                                           |
-| _Read-only_ | _Coming soon!_                                                                                                                                                                                                                                               |
+| State       | When to use                                                                                                                                                                                                                                                                                   |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| _Enabled_   | When the select is live and a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component. An enabled select field should contain a default value.                                                                                 |
+| _Hover_     | When a user's mouse cursor is hovering over the field.                                                                                                                                                                                                                                        |
+| _Focus_     | When a user tabs to or clicks on the select field, the field becomes focused, indicating the user has successfully navigated to the component.                                                                                                                                                |
+| _Error_     | When the required select value has not been selected. It can also be triggered due to a system error. This state requires a user response before data can be submitted or saved.                                                                                                              |
+| _Warning_   | When you need to call the user's attention to an exception condition. The condition might not be an error but can cause problems if not resolved.                                                                                                                                             |
+| _Disabled_  | When the user cannot interact with a component and all interactive functions have been removed. Unlike read-only states, disabled states are not focusable, are not read by screen readers, and do not need to pass visual contrast, making them inaccessible if they need to be interpreted. |
+| _Skeleton_  | Used on an initial page load to indicate that the select has not yet fully loaded.                                                                                                                                                                                                            |
+| _Read-only_ | When the user can review but not modify the component. This state removes all interactive functions like the disabled state but can still be focusable, accessible by screen readers, and passes visual contrast for readability.                                                             |
 
 <Row>
 <Column colLg={12}>