diff --git a/.changeset/floppy-peaches-obey.md b/.changeset/floppy-peaches-obey.md
new file mode 100644
index 00000000000..6cb06e4f665
--- /dev/null
+++ b/.changeset/floppy-peaches-obey.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Improves how we detect context for inactive item messaging by checking the `role` on `ActionList` instead of relying on parent components, making the logic more robust and consistent. It also fixes incorrect behavior in `NavList` and `SelectPanel`, and improves accessibility by correcting `aria` relationships on tooltip buttons.
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png
index e86dd5e7ca6..5e1a05501ce 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png
index 7a15a9f4aff..ca7371a42ba 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png
index 4229bb95ba1..b3b543be977 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png
index e86dd5e7ca6..5e1a05501ce 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png
index e86dd5e7ca6..5e1a05501ce 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png
index 75f81b51a20..b643fe4c5cf 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png
index 53d85d2b4b4..58535b72b2e 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png
index 75f81b51a20..b643fe4c5cf 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-linux.png differ
diff --git a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png
index 75f81b51a20..b643fe4c5cf 100644
Binary files a/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionList.test.ts-snapshots/ActionList-Inactive-Multiselect-light-tritanopia-linux.png differ
diff --git a/packages/react/src/ActionList/ActionList.test.tsx b/packages/react/src/ActionList/ActionList.test.tsx
index 7723425a724..dbcf6bf421d 100644
--- a/packages/react/src/ActionList/ActionList.test.tsx
+++ b/packages/react/src/ActionList/ActionList.test.tsx
@@ -100,7 +100,8 @@ describe('ActionList', () => {
     expect(document.activeElement).toHaveTextContent('Option 4')
 
     await userEvent.keyboard('{ArrowDown}')
-    expect(document.activeElement).toHaveAccessibleName('Unavailable due to an outage')
+    expect(document.activeElement).toHaveAccessibleName('Option 5')
+    expect(document.activeElement).toHaveAccessibleDescription('Unavailable due to an outage')
 
     await userEvent.keyboard('{ArrowUp}')
     expect(document.activeElement).toHaveTextContent('Option 4')
diff --git a/packages/react/src/ActionList/Item.test.tsx b/packages/react/src/ActionList/Item.test.tsx
index 0570f62cd61..631b84691cf 100644
--- a/packages/react/src/ActionList/Item.test.tsx
+++ b/packages/react/src/ActionList/Item.test.tsx
@@ -17,6 +17,10 @@ function SimpleActionList(): JSX.Element {
       <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="d">
         Link Item
       </ActionList.LinkItem>
+      <ActionList.Item inactiveText="Unavailable due to an outage">Inactive item</ActionList.Item>
+      <ActionList.Item inactiveText="Unavailable due to an outage" loading>
+        Loading and inactive item
+      </ActionList.Item>
     </ActionList>
   )
 }
@@ -171,23 +175,53 @@ describe('ActionList.Item', () => {
     fireEvent.keyPress(option, {key: 'Enter', charCode: 13})
     expect(option).toBeInTheDocument()
   })
-  it('should focus the button around the leading visual when tabbing to an inactive item', async () => {
+  it('should focus the button around the alert icon when tabbing to an inactive item', async () => {
+    const component = HTMLRender(<SimpleActionList />)
+    const inactiveIndicatorButton = await waitFor(() => component.getByRole('button', {name: 'Inactive item'}))
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab() // focuses 6th element, which is inactive
+    expect(inactiveIndicatorButton).toHaveFocus()
+    expect(document.activeElement).toHaveAccessibleDescription('Unavailable due to an outage')
+  })
+  it('should focus the option or menu item when moving focus to an inactive item **in a listbox**', async () => {
     const component = HTMLRender(<SingleSelectListStory />)
-    const inactiveOptionButton = await waitFor(() => component.getByRole('button', {name: projects[3].inactiveText}))
+    const inactiveOption = await waitFor(() => component.getByRole('option', {name: projects[3].name}))
     await userEvent.tab() // get focus on first element
     await userEvent.keyboard('{ArrowDown}')
     await userEvent.keyboard('{ArrowDown}')
-    expect(inactiveOptionButton).toHaveFocus()
+    expect(inactiveOption).toHaveFocus()
+    expect(document.activeElement).toHaveAccessibleDescription(projects[3].inactiveText as string)
   })
   it('should behave as inactive if both inactiveText and loading props are passed', async () => {
+    const component = HTMLRender(<SimpleActionList />)
+    const inactiveIndicatorButton = await waitFor(() =>
+      component.getByRole('button', {name: 'Loading and inactive item'}),
+    )
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab()
+    await userEvent.tab() // focuses 7th element, which is inactive AND has a loading prop
+    expect(inactiveIndicatorButton).toHaveFocus()
+    expect(document.activeElement).toHaveAccessibleDescription('Unavailable due to an outage')
+  })
+
+  it('should behave as inactive if both inactiveText and loading props are passed **in a listbox**', async () => {
     const component = HTMLRender(<SingleSelectListStory />)
-    const inactiveOptionButton = await waitFor(() => component.getByRole('button', {name: projects[5].inactiveText}))
+    const inactiveOption = await waitFor(() => component.getByRole('option', {name: projects[5].name}))
     await userEvent.tab() // get focus on first element
     await userEvent.keyboard('{ArrowDown}')
     await userEvent.keyboard('{ArrowDown}')
     await userEvent.keyboard('{ArrowDown}')
     await userEvent.keyboard('{ArrowDown}')
-    expect(inactiveOptionButton).toHaveFocus()
+    expect(inactiveOption).toHaveFocus()
+    expect(document.activeElement).toHaveAccessibleDescription(projects[5].inactiveText as string)
   })
   it('should call onClick for a link item', async () => {
     const onClick = jest.fn()
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index 18f0e9cd1c4..8411f9ab3c8 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -112,7 +112,11 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     } = React.useContext(ListContext)
     const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
     const inactive = Boolean(inactiveText)
-    const showInactiveIndicator = inactive && container === undefined
+    // TODO change `menuContext` check to ```listRole !== undefined && ['menu', 'listbox'].includes(listRole)```
+    // once we have a better way to handle existing usage in dotcom that incorrectly use ActionList.TrailingAction
+    const menuContext = container === 'ActionMenu' || container === 'SelectPanel'
+    // TODO: when we change `menuContext` to check `listRole` instead of `container`
+    const showInactiveIndicator = inactive && !(listRole !== undefined && ['menu', 'listbox'].includes(listRole))
 
     const onSelect = React.useCallback(
       (
@@ -142,10 +146,12 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     }
 
     const itemRole = role || inferredItemRole
-    const menuContext = container === 'ActionMenu' || container === 'SelectPanel'
 
     if (slots.trailingAction) {
-      invariant(!menuContext, `ActionList.TrailingAction can not be used within a ${container}.`)
+      invariant(
+        !menuContext,
+        `ActionList.TrailingAction can not be used within a list with an ARIA role of "menu" or "listbox".`,
+      )
     }
 
     /** Infer the proper selection attribute based on the item's role */
@@ -405,7 +411,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                     <span id={labelId} className={classes.ItemLabel}>
                       {childrenWithoutSlots}
                       {/* Loading message needs to be in here so it is read with the label */}
-                      {loading === true && <VisuallyHidden>Loading</VisuallyHidden>}
+                      {/* If the item is inactive, we do not simultaneously announce that it is loading */}
+                      {loading === true && !inactive && <VisuallyHidden>Loading</VisuallyHidden>}
                     </span>
                     {slots.description}
                   </ConditionalWrapper>
@@ -422,7 +429,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                   {
                     // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
                     // render the inactive warning message directly in the item.
-                    inactive && container ? (
+                    !showInactiveIndicator ? (
                       <span className={classes.InactiveWarning} id={inactiveWarningId}>
                         {inactiveText}
                       </span>
@@ -477,7 +484,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                   <span id={labelId} className={classes.ItemLabel}>
                     {childrenWithoutSlots}
                     {/* Loading message needs to be in here so it is read with the label */}
-                    {loading === true && <VisuallyHidden>Loading</VisuallyHidden>}
+                    {/* If the item is inactive, we do not simultaneously announce that it is loading */}
+                    {loading === true && !inactive && <VisuallyHidden>Loading</VisuallyHidden>}
                   </span>
                   {slots.description}
                 </ConditionalWrapper>
@@ -494,7 +502,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                 {
                   // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
                   // render the inactive warning message directly in the item.
-                  inactive && container ? (
+                  !showInactiveIndicator ? (
                     <span className={classes.InactiveWarning} id={inactiveWarningId}>
                       {inactiveText}
                     </span>
@@ -567,7 +575,8 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                   >
                     {childrenWithoutSlots}
                     {/* Loading message needs to be in here so it is read with the label */}
-                    {loading === true && <VisuallyHidden>Loading</VisuallyHidden>}
+                    {/* If the item is inactive, we do not simultaneously announce that it is loading */}
+                    {loading === true && !inactive && <VisuallyHidden>Loading</VisuallyHidden>}
                   </Box>
                   {slots.inlineDescription}
                 </ConditionalWrapper>
@@ -584,7 +593,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
               {
                 // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
                 // render the inactive warning message directly in the item.
-                inactive && container ? (
+                !showInactiveIndicator ? (
                   <Box
                     as="span"
                     sx={{
diff --git a/packages/react/src/ActionList/Visuals.tsx b/packages/react/src/ActionList/Visuals.tsx
index c018a9192bb..ad8d9f49e1f 100644
--- a/packages/react/src/ActionList/Visuals.tsx
+++ b/packages/react/src/ActionList/Visuals.tsx
@@ -168,8 +168,8 @@ export const VisualOrIndicator: React.FC<
 
   return inactiveText ? (
     <span className={classes.InactiveButtonWrap}>
-      <Tooltip text={inactiveText} type="label">
-        <button type="button" className={classes.InactiveButtonReset} aria-describedby={labelId}>
+      <Tooltip text={inactiveText} type="description">
+        <button type="button" className={classes.InactiveButtonReset} aria-labelledby={labelId}>
           <VisualComponent>
             <AlertIcon />
           </VisualComponent>
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index 773d889325c..cc6eda99a42 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -50,7 +50,13 @@ exports[`NavList renders a simple list 1`] = `
   line-height: 20px;
 }
 
-.c7 {
+.c6 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -182,7 +188,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
 }
 
-.c6 {
+.c7 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -214,32 +220,32 @@ exports[`NavList renders a simple list 1`] = `
   margin-bottom: unset;
 }
 
-.c6[data-loading] {
+.c7[data-loading] {
   cursor: default;
 }
 
-.c6[aria-disabled],
-.c6[data-inactive] {
+.c7[aria-disabled],
+.c7[data-inactive] {
   cursor: not-allowed;
 }
 
-.c6[aria-disabled] [data-component="ActionList.Checkbox"],
-.c6[data-inactive] [data-component="ActionList.Checkbox"] {
+.c7[aria-disabled] [data-component="ActionList.Checkbox"],
+.c7[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c6[aria-disabled] [data-component="ActionList.Selection"],
-.c6[data-inactive] [data-component="ActionList.Selection"] {
+.c7[aria-disabled] [data-component="ActionList.Selection"],
+.c7[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c6 [data-component="ActionList.Item--DividerContainer"] {
+.c7 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c6 [data-component="ActionList.Item--DividerContainer"]::before {
+.c7 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -250,7 +256,7 @@ exports[`NavList renders a simple list 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c6:not(:first-of-type) {
+.c7:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
@@ -258,22 +264,22 @@ exports[`NavList renders a simple list 1`] = `
   --divider-color: transparent !important;
 }
 
-.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c6[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c7[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c6:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
-.c6[data-focus-visible-added] + li {
+.c7:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c1,
+.c7[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c6[data-is-active-descendant] {
+.c7[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c6[data-is-active-descendant]::after {
+.c7[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -315,30 +321,30 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c6:focus,
-  .c6:focus-visible,
-  .c6 > a.focus-visible,
-  .c6[data-is-active-descendant] {
+  .c7:focus,
+  .c7:focus-visible,
+  .c7 > a.focus-visible,
+  .c7[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6:hover:not([aria-disabled]):not([data-inactive]) {
+  .c7:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c6:focus-visible,
-  .c6 > a.focus-visible,
-  .c6:focus.focus-visible {
+  .c7:focus-visible,
+  .c7 > a.focus-visible,
+  .c7:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c6:active:not([aria-disabled]):not([data-inactive]) {
+  .c7:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -373,11 +379,14 @@ exports[`NavList renders a simple list 1`] = `
             >
               Home
             </span>
+            <span
+              class="c6"
+            />
           </div>
         </a>
       </li>
       <li
-        class="c1 c6"
+        class="c1 c7"
       >
         <a
           aria-labelledby=":r3:--label  "
@@ -392,16 +401,19 @@ exports[`NavList renders a simple list 1`] = `
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c7"
+              class="c8"
               id=":r3:--label"
             >
               About
             </span>
+            <span
+              class="c6"
+            />
           </div>
         </a>
       </li>
       <li
-        class="c1 c6"
+        class="c1 c7"
       >
         <a
           aria-labelledby=":r4:--label  "
@@ -416,11 +428,14 @@ exports[`NavList renders a simple list 1`] = `
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c7"
+              class="c8"
               id=":r4:--label"
             >
               Contact
             </span>
+            <span
+              class="c6"
+            />
           </div>
         </a>
       </li>
@@ -507,7 +522,13 @@ exports[`NavList renders with groups 1`] = `
   line-height: 20px;
 }
 
-.c10 {
+.c9 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
+.c11 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -639,7 +660,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
 }
 
-.c9 {
+.c10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -671,32 +692,32 @@ exports[`NavList renders with groups 1`] = `
   margin-bottom: unset;
 }
 
-.c9[data-loading] {
+.c10[data-loading] {
   cursor: default;
 }
 
-.c9[aria-disabled],
-.c9[data-inactive] {
+.c10[aria-disabled],
+.c10[data-inactive] {
   cursor: not-allowed;
 }
 
-.c9[aria-disabled] [data-component="ActionList.Checkbox"],
-.c9[data-inactive] [data-component="ActionList.Checkbox"] {
+.c10[aria-disabled] [data-component="ActionList.Checkbox"],
+.c10[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c9[aria-disabled] [data-component="ActionList.Selection"],
-.c9[data-inactive] [data-component="ActionList.Selection"] {
+.c10[aria-disabled] [data-component="ActionList.Selection"],
+.c10[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c9 [data-component="ActionList.Item--DividerContainer"] {
+.c10 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c9 [data-component="ActionList.Item--DividerContainer"]::before {
+.c10 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -707,7 +728,7 @@ exports[`NavList renders with groups 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c9:not(:first-of-type) {
+.c10:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
@@ -715,22 +736,22 @@ exports[`NavList renders with groups 1`] = `
   --divider-color: transparent !important;
 }
 
-.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c9[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c10[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c4,
-.c9[data-focus-visible-added] + li {
+.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c4,
+.c10[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c9[data-is-active-descendant] {
+.c10[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c9[data-is-active-descendant]::after {
+.c10[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -772,30 +793,30 @@ exports[`NavList renders with groups 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c9:focus,
-  .c9:focus-visible,
-  .c9 > a.focus-visible,
-  .c9[data-is-active-descendant] {
+  .c10:focus,
+  .c10:focus-visible,
+  .c10 > a.focus-visible,
+  .c10[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9:hover:not([aria-disabled]):not([data-inactive]) {
+  .c10:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c9:focus-visible,
-  .c9 > a.focus-visible,
-  .c9:focus.focus-visible {
+  .c10:focus-visible,
+  .c10 > a.focus-visible,
+  .c10:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c9:active:not([aria-disabled]):not([data-inactive]) {
+  .c10:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -855,6 +876,9 @@ exports[`NavList renders with groups 1`] = `
                 >
                   Getting started
                 </span>
+                <span
+                  class="c9"
+                />
               </div>
             </a>
           </li>
@@ -886,7 +910,7 @@ exports[`NavList renders with groups 1`] = `
           class="c3"
         >
           <li
-            class="c4 c9"
+            class="c4 c10"
           >
             <a
               aria-labelledby=":ra:--label  "
@@ -901,11 +925,14 @@ exports[`NavList renders with groups 1`] = `
                 data-component="ActionList.Item--DividerContainer"
               >
                 <span
-                  class="c10"
+                  class="c11"
                   id=":ra:--label"
                 >
                   Avatar
                 </span>
+                <span
+                  class="c9"
+                />
               </div>
             </a>
           </li>
@@ -976,7 +1003,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c12 {
+.c10 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
+.c13 {
   padding-left: 16px;
   padding-right: 8px;
   padding-top: 6px;
@@ -995,13 +1028,13 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c12:hover {
+.c13:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c13 {
+.c14 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -1011,7 +1044,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   line-height: 20px;
 }
 
-.c10 {
+.c11 {
   padding: 0;
   margin: 0;
   display: block;
@@ -1028,12 +1061,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: transparent !important;
 }
 
-.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c14[data-focus-visible-added] + li {
+.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11 {
+.c12 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1067,32 +1100,32 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c11[data-loading] {
+.c12[data-loading] {
   cursor: default;
 }
 
-.c11[aria-disabled],
-.c11[data-inactive] {
+.c12[aria-disabled],
+.c12[data-inactive] {
   cursor: not-allowed;
 }
 
-.c11[aria-disabled] [data-component="ActionList.Checkbox"],
-.c11[data-inactive] [data-component="ActionList.Checkbox"] {
+.c12[aria-disabled] [data-component="ActionList.Checkbox"],
+.c12[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c11[aria-disabled] [data-component="ActionList.Selection"],
-.c11[data-inactive] [data-component="ActionList.Selection"] {
+.c12[aria-disabled] [data-component="ActionList.Selection"],
+.c12[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"] {
+.c12 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"]::before {
+.c12 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1103,7 +1136,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-color: var(--divider-color,transparent);
 }
 
-.c11:not(:first-of-type) {
+.c12:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
@@ -1111,17 +1144,17 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: transparent !important;
 }
 
-.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c12[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c11[data-focus-visible-added] + li {
+.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11::after {
+.c12::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1132,12 +1165,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
 }
 
-.c11[data-is-active-descendant] {
+.c12[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c11[data-is-active-descendant]::after {
+.c12[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1266,30 +1299,30 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 @media (forced-colors:active) {
-  .c11:focus,
-  .c11:focus-visible,
-  .c11 > a.focus-visible,
-  .c11[data-is-active-descendant] {
+  .c12:focus,
+  .c12:focus-visible,
+  .c12 > a.focus-visible,
+  .c12[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11:hover:not([aria-disabled]):not([data-inactive]) {
+  .c12:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c11:focus-visible,
-  .c11 > a.focus-visible,
-  .c11:focus.focus-visible {
+  .c12:focus-visible,
+  .c12 > a.focus-visible,
+  .c12:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c11:active:not([aria-disabled]):not([data-inactive]) {
+  .c12:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -1379,21 +1412,24 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
                 </svg>
               </span>
             </div>
+            <span
+              class="c1 c10"
+            />
           </div>
         </button>
         <div>
           <ul
             aria-labelledby=":r26:"
-            class="c1 c10"
+            class="c1 c11"
             id=":r27:"
           >
             <li
-              class="c3 c11"
+              class="c3 c12"
             >
               <a
                 aria-current="page"
                 aria-labelledby=":r29:--label  "
-                class="c1 c12 Link"
+                class="c1 c13 Link"
                 href="#"
                 id=":r29:"
                 style="--subitem-depth: 1;"
@@ -1404,11 +1440,14 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c1 c13"
+                    class="c1 c14"
                     id=":r29:--label"
                   >
                     Sub Item
                   </span>
+                  <span
+                    class="c1 c10"
+                  />
                 </div>
               </a>
             </li>
@@ -1471,12 +1510,18 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c10 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
+.c11 {
   padding: 0;
   margin: 0;
   display: none;
 }
 
-.c12 {
+.c13 {
   padding-left: 16px;
   padding-right: 8px;
   padding-top: 6px;
@@ -1495,7 +1540,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c12:hover {
+.c13:hover {
   color: inherit;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -1522,12 +1567,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: transparent !important;
 }
 
-.c13:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c13[data-focus-visible-added] + li {
+.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c14[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11 {
+.c12 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1561,32 +1606,32 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c11[data-loading] {
+.c12[data-loading] {
   cursor: default;
 }
 
-.c11[aria-disabled],
-.c11[data-inactive] {
+.c12[aria-disabled],
+.c12[data-inactive] {
   cursor: not-allowed;
 }
 
-.c11[aria-disabled] [data-component="ActionList.Checkbox"],
-.c11[data-inactive] [data-component="ActionList.Checkbox"] {
+.c12[aria-disabled] [data-component="ActionList.Checkbox"],
+.c12[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c11[aria-disabled] [data-component="ActionList.Selection"],
-.c11[data-inactive] [data-component="ActionList.Selection"] {
+.c12[aria-disabled] [data-component="ActionList.Selection"],
+.c12[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"] {
+.c12 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c11 [data-component="ActionList.Item--DividerContainer"]::before {
+.c12 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -1597,7 +1642,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-color: var(--divider-color,transparent);
 }
 
-.c11:not(:first-of-type) {
+.c12:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
@@ -1605,17 +1650,17 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: transparent !important;
 }
 
-.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c11[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c12[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c11[data-focus-visible-added] + li {
+.c12:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c12[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c11::after {
+.c12::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1626,12 +1671,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
 }
 
-.c11[data-is-active-descendant] {
+.c12[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c11[data-is-active-descendant]::after {
+.c12[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -1646,8 +1691,8 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   --divider-color: transparent !important;
 }
 
-.c14:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
-.c14[data-focus-visible-added] + li {
+.c15:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c3,
+.c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
@@ -1781,30 +1826,30 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 @media (forced-colors:active) {
-  .c11:focus,
-  .c11:focus-visible,
-  .c11 > a.focus-visible,
-  .c11[data-is-active-descendant] {
+  .c12:focus,
+  .c12:focus-visible,
+  .c12 > a.focus-visible,
+  .c12[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11:hover:not([aria-disabled]):not([data-inactive]) {
+  .c12:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c11:focus-visible,
-  .c11 > a.focus-visible,
-  .c11:focus.focus-visible {
+  .c12:focus-visible,
+  .c12 > a.focus-visible,
+  .c12:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c11:active:not([aria-disabled]):not([data-inactive]) {
+  .c12:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -1902,21 +1947,24 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
                 </svg>
               </span>
             </div>
+            <span
+              class="c1 c10"
+            />
           </div>
         </button>
         <div>
           <ul
             aria-labelledby=":r20:"
-            class="c1 c10"
+            class="c1 c11"
             id=":r21:"
           >
             <li
-              class="c3 c11"
+              class="c3 c12"
             >
               <a
                 aria-current="page"
                 aria-labelledby=":r23:--label  "
-                class="c1 c12 Link"
+                class="c1 c13 Link"
                 href="#"
                 id=":r23:"
                 style="--subitem-depth: 1;"
@@ -1932,6 +1980,9 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
                   >
                     Sub Item
                   </span>
+                  <span
+                    class="c1 c10"
+                  />
                 </div>
               </a>
             </li>
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index a1b03328328..810f70e7c36 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -944,6 +944,12 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c9 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
+.c10 {
   height: 20px;
   max-width: 20px;
   display: -webkit-box;
@@ -965,12 +971,12 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
-.c9 svg {
+.c10 svg {
   font-size: 12px;
 }
 
 [data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover .c4,
-[data-variant="danger"]:active .c9 {
+[data-variant="danger"]:active .c10 {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
@@ -1100,8 +1106,8 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   --divider-color: transparent !important;
 }
 
-.c10:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c10[data-focus-visible-added] + li {
+.c11:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c11[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
@@ -1197,6 +1203,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               zero
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1229,6 +1238,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               one
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1261,6 +1273,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               two
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1293,6 +1308,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               three
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1325,6 +1343,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               four
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1357,6 +1378,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               five
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1389,6 +1413,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               six
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1421,6 +1448,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               seven
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1453,6 +1483,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               twenty
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1485,6 +1518,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               twentyone
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
         <li
@@ -1508,7 +1544,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             />
           </span>
           <span
-            className="c4 c9"
+            className="c4 c10"
           >
             <svg
               aria-hidden="true"
@@ -1541,6 +1577,9 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
             >
               Add new item
             </span>
+            <span
+              className="c4 c9"
+            />
           </div>
         </li>
       </ul>
@@ -1893,6 +1932,12 @@ exports[`snapshots renders a multiselect input 1`] = `
   line-height: 20px;
 }
 
+.c8 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
 .c0 {
   position: absolute;
   width: 1px;
@@ -2095,6 +2140,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               zero
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2127,6 +2175,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               one
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2159,6 +2210,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               two
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2191,6 +2245,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               three
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2223,6 +2280,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               four
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2255,6 +2315,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               five
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2287,6 +2350,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               six
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2319,6 +2385,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               seven
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2351,6 +2420,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               twenty
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -2383,6 +2455,9 @@ exports[`snapshots renders a multiselect input 1`] = `
             >
               twentyone
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
       </ul>
@@ -2747,7 +2822,13 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   line-height: 20px;
 }
 
-.c9 {
+.c8 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
+.c10 {
   border-color: var(--control-borderColor-emphasis);
   border-style: solid;
   border-width: 1px;
@@ -2763,7 +2844,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   transition: background-color,border-color 80ms cubic-bezier(0.32,0,0.67,0) 0ms;
 }
 
-.c9::before {
+.c10::before {
   width: var(--base-size-16,16px);
   height: var(--base-size-16,16px);
   visibility: hidden;
@@ -2907,7 +2988,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-radius: 6px;
 }
 
-.c8 {
+.c9 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -2939,32 +3020,32 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   margin-bottom: unset;
 }
 
-.c8[data-loading] {
+.c9[data-loading] {
   cursor: default;
 }
 
-.c8[aria-disabled],
-.c8[data-inactive] {
+.c9[aria-disabled],
+.c9[data-inactive] {
   cursor: not-allowed;
 }
 
-.c8[aria-disabled] [data-component="ActionList.Checkbox"],
-.c8[data-inactive] [data-component="ActionList.Checkbox"] {
+.c9[aria-disabled] [data-component="ActionList.Checkbox"],
+.c9[data-inactive] [data-component="ActionList.Checkbox"] {
   cursor: not-allowed;
   background-color: var(--control-bgColor-disabled,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
 
-.c8[aria-disabled] [data-component="ActionList.Selection"],
-.c8[data-inactive] [data-component="ActionList.Selection"] {
+.c9[aria-disabled] [data-component="ActionList.Selection"],
+.c9[data-inactive] [data-component="ActionList.Selection"] {
   color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
 }
 
-.c8 [data-component="ActionList.Item--DividerContainer"] {
+.c9 [data-component="ActionList.Item--DividerContainer"] {
   position: relative;
 }
 
-.c8 [data-component="ActionList.Item--DividerContainer"]::before {
+.c9 [data-component="ActionList.Item--DividerContainer"]::before {
   content: " ";
   display: block;
   position: absolute;
@@ -2975,7 +3056,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   border-color: var(--divider-color,transparent);
 }
 
-.c8:not(:first-of-type) {
+.c9:not(:first-of-type) {
   --divider-color: var(--borderColor-muted,var(--color-action-list-item-inline-divider,rgba(208,215,222,0.48)));
 }
 
@@ -2983,22 +3064,22 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   --divider-color: transparent !important;
 }
 
-.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
-.c8[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
+.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]),
+.c9[data-focus-visible-added]:not([aria-disabled]):not([data-inactive]) {
   --divider-color: transparent;
 }
 
-.c8:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
-.c8[data-focus-visible-added] + li {
+.c9:hover:not([aria-disabled]):not([data-inactive]):not([data-loading]) + .c2,
+.c9[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
-.c8[data-is-active-descendant] {
+.c9[data-is-active-descendant] {
   font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
-.c8[data-is-active-descendant]::after {
+.c9[data-is-active-descendant]::after {
   position: absolute;
   top: calc(50% - 12px);
   left: -8px;
@@ -3016,7 +3097,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c9 {
+  .c10 {
     border-width: 1px;
   }
 }
@@ -3052,30 +3133,30 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 @media (forced-colors:active) {
-  .c8:focus,
-  .c8:focus-visible,
-  .c8 > a.focus-visible,
-  .c8[data-is-active-descendant] {
+  .c9:focus,
+  .c9:focus-visible,
+  .c9 > a.focus-visible,
+  .c9[data-is-active-descendant] {
     outline: solid 1px transparent !important;
   }
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8:hover:not([aria-disabled]):not([data-inactive]) {
+  .c9:hover:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg,rgba(208,215,222,0.32)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
     box-shadow: inset 0 0 0 max(1px,0.0625rem) var(--control-transparent-borderColor-active,var(--color-action-list-item-default-active-border,transparent));
   }
 
-  .c8:focus-visible,
-  .c8 > a.focus-visible,
-  .c8:focus.focus-visible {
+  .c9:focus-visible,
+  .c9 > a.focus-visible,
+  .c9:focus.focus-visible {
     outline: none;
     border: 2 solid;
     box-shadow: 0 0 0 2px var(--focus-outlineColor);
   }
 
-  .c8:active:not([aria-disabled]):not([data-inactive]) {
+  .c9:active:not([aria-disabled]):not([data-inactive]) {
     background-color: var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg,rgba(208,215,222,0.48)));
     color: var(--fgColor-default,var(--color-fg-default,#1F2328));
   }
@@ -3125,6 +3206,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               zero
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -3157,6 +3241,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               one
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
@@ -3189,12 +3276,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               two
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="3--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="3"
           id="3"
           onClick={[Function]}
@@ -3207,7 +3297,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3221,12 +3311,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               three
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="4--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="4"
           id="4"
           onClick={[Function]}
@@ -3239,7 +3332,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3253,12 +3346,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               four
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="5--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="5"
           id="5"
           onClick={[Function]}
@@ -3271,7 +3367,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3285,12 +3381,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               five
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="6--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="6"
           id="6"
           onClick={[Function]}
@@ -3303,7 +3402,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3317,12 +3416,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               six
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="7--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="7"
           id="7"
           onClick={[Function]}
@@ -3335,7 +3437,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3349,12 +3451,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               seven
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="20--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="20"
           id="20"
           onClick={[Function]}
@@ -3367,7 +3472,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3381,12 +3486,15 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               twenty
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
         <li
           aria-labelledby="21--label  "
           aria-selected={false}
-          className="c2 c8"
+          className="c2 c9"
           data-id="21"
           id="21"
           onClick={[Function]}
@@ -3399,7 +3507,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             data-component="ActionList.Selection"
           >
             <div
-              className="c9"
+              className="c10"
               data-component="ActionList.Checkbox"
             />
           </span>
@@ -3413,6 +3521,9 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
             >
               twentyone
             </span>
+            <span
+              className="c8"
+            />
           </div>
         </li>
       </ul>
@@ -3723,6 +3834,12 @@ exports[`snapshots renders a single select input 1`] = `
   line-height: 20px;
 }
 
+.c7 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
 .c0 {
   position: absolute;
   width: 1px;
@@ -3913,6 +4030,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               zero
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -3939,6 +4059,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               one
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -3965,6 +4088,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               two
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -3991,6 +4117,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               three
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4017,6 +4146,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               four
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4043,6 +4175,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               five
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4069,6 +4204,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               six
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4095,6 +4233,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               seven
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4121,6 +4262,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               twenty
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4147,6 +4291,9 @@ exports[`snapshots renders a single select input 1`] = `
             >
               twentyone
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
       </ul>
@@ -4217,6 +4364,12 @@ exports[`snapshots renders with a custom text input component 1`] = `
   line-height: 20px;
 }
 
+.c7 {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--fgColor-attention,var(--color-attention-fg,#9a6700));
+}
+
 .c0 {
   position: absolute;
   width: 1px;
@@ -4403,6 +4556,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               zero
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4429,6 +4585,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               one
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4455,6 +4614,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               two
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4481,6 +4643,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               three
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4507,6 +4672,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               four
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4533,6 +4701,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               five
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4559,6 +4730,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               six
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4585,6 +4759,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               seven
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4611,6 +4788,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               twenty
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
         <li
@@ -4637,6 +4817,9 @@ exports[`snapshots renders with a custom text input component 1`] = `
             >
               twentyone
             </span>
+            <span
+              className="c7"
+            />
           </div>
         </li>
       </ul>