From 4c6be352dd5384290382dc1a5be0b36b0d01dfed Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Thu, 1 Oct 2026 15:53:47 +0200
Subject: [PATCH 01/21] feat: Add inlineLabelText to internal control group

---
 pages/control-group/permutations.page.tsx     | 21 ++++++++++++++
 .../__tests__/control-group.test.tsx          | 27 ++++++++++++++++++
 .../components/control-group/index.tsx        | 28 ++++++++++++++++++-
 .../components/control-group/styles.scss      | 13 +++++++++
 4 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/pages/control-group/permutations.page.tsx b/pages/control-group/permutations.page.tsx
index 435e78be2f..e276d19d28 100644
--- a/pages/control-group/permutations.page.tsx
+++ b/pages/control-group/permutations.page.tsx
@@ -119,6 +119,23 @@ const permutations = createPermutations<InternalControlGroupProps>([
   },
 ]);
 
+const inlineLabelPermutations = createPermutations<InternalControlGroupProps>([
+  {
+    inlineLabelText: ['Threshold'],
+    children: [
+      <>
+        {input}
+        {select}
+      </>,
+      <>
+        {select}
+        {input}
+        {multiselect}
+      </>,
+    ],
+  },
+]);
+
 export default function ControlGroupPermutations() {
   // The name `direction` is already taken for the LTR/RTL URL parameter
   const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>();
@@ -145,6 +162,10 @@ export default function ControlGroupPermutations() {
         permutations={permutations}
         render={permutation => <ControlGroup {...permutation} direction={direction} />}
       />
+      <PermutationsView
+        permutations={inlineLabelPermutations}
+        render={permutation => <ControlGroup {...permutation} />}
+      />
     </PermutationsPage>
   );
 }
diff --git a/src/internal/components/control-group/__tests__/control-group.test.tsx b/src/internal/components/control-group/__tests__/control-group.test.tsx
index cc36ac14a4..cb89b703c8 100644
--- a/src/internal/components/control-group/__tests__/control-group.test.tsx
+++ b/src/internal/components/control-group/__tests__/control-group.test.tsx
@@ -105,4 +105,31 @@ describe('Control group', () => {
       expect(getByTestId('direction')).toHaveTextContent('vertical');
     });
   });
+
+  test('renders the inline label and wires it to the group via aria-labelledby', () => {
+    const { getByRole, getByText } = render(
+      <InternalControlGroup inlineLabelText="Threshold">
+        <input data-testid="alpha" />
+        <input data-testid="beta" />
+      </InternalControlGroup>
+    );
+
+    const group = getByRole('group');
+    const label = getByText('Threshold');
+
+    expect(label.id).toBeTruthy();
+    expect(group.getAttribute('aria-labelledby')).toBe(label.id);
+  });
+
+  test('omits the inline label and aria-labelledby when inlineLabelText is not set', () => {
+    const { getByRole, queryByText } = render(
+      <InternalControlGroup>
+        <input data-testid="alpha" />
+        <input data-testid="beta" />
+      </InternalControlGroup>
+    );
+
+    expect(getByRole('group').getAttribute('aria-labelledby')).toBeNull();
+    expect(queryByText('Threshold')).toBeNull();
+  });
 });
diff --git a/src/internal/components/control-group/index.tsx b/src/internal/components/control-group/index.tsx
index 1ee3ed8122..440fb71931 100644
--- a/src/internal/components/control-group/index.tsx
+++ b/src/internal/components/control-group/index.tsx
@@ -3,6 +3,8 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+
 import { BaseComponentProps } from '../../../types/base-component';
 import { getBaseProps } from '../../base-component';
 import {
@@ -17,19 +19,22 @@ import styles from './styles.css.js';
 export interface InternalControlGroupProps extends BaseComponentProps {
   children?: React.ReactNode;
   direction?: GroupedControlDirection;
+  inlineLabelText?: string;
 }
 
 export default function InternalControlGroup({
   children,
   direction = 'horizontal',
+  inlineLabelText,
   ...props
 }: InternalControlGroupProps) {
   const baseProps = getBaseProps(props);
+  const labelId = useUniqueId('control-group-label');
 
   const flattenedChildren = flattenChildren(children, 'ControlGroup');
   const controlCount = flattenedChildren.length;
 
-  return (
+  const controls = (
     <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>
       {flattenedChildren.map((child, index) => {
         const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;
@@ -46,4 +51,25 @@ export default function InternalControlGroup({
       })}
     </div>
   );
+
+  if (inlineLabelText) {
+    return (
+      <div {...baseProps} className={clsx(baseProps.className, styles['inline-label-wrapper'])}>
+        <label id={labelId} className={styles['inline-label']}>
+          {inlineLabelText}
+        </label>
+        <div className={styles['inline-label-trigger-wrapper']}>
+          <div role="group" aria-labelledby={labelId} className={styles.root}>
+            {controls}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root)}>
+      {controls}
+    </div>
+  );
 }
diff --git a/src/internal/components/control-group/styles.scss b/src/internal/components/control-group/styles.scss
index 54c7f93695..fa8be70985 100644
--- a/src/internal/components/control-group/styles.scss
+++ b/src/internal/components/control-group/styles.scss
@@ -5,6 +5,7 @@
 
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
+@use '../../styles/forms/mixins' as forms;
 
 .root {
   @include styles.styles-reset;
@@ -51,3 +52,15 @@
     }
   }
 }
+
+.inline-label {
+  @include forms.inline-label;
+}
+
+.inline-label-wrapper {
+  @include forms.inline-label-wrapper;
+}
+
+.inline-label-trigger-wrapper {
+  @include forms.inline-label-trigger-wrapper;
+}

From d8837b51d97ff1cd365aa20197cb18af317fbae4 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Thu, 1 Oct 2026 18:06:53 +0200
Subject: [PATCH 02/21] fix: Keep control group label above focus rings and
 below dropdowns

---
 pages/control-group/permutations.page.tsx         | 12 +++++++++++-
 src/internal/components/control-group/styles.scss |  6 ++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/pages/control-group/permutations.page.tsx b/pages/control-group/permutations.page.tsx
index e276d19d28..0a66ecc898 100644
--- a/pages/control-group/permutations.page.tsx
+++ b/pages/control-group/permutations.page.tsx
@@ -42,7 +42,15 @@ const suggestions: AutosuggestProps.Option[] = [{ value: 'CPUUtilization' }, { v
 const enteredTextLabel = (value: string) => `Use: ${value}`;
 
 const input = <Input ariaLabel="Value" value="service" onChange={noop} />;
-const select = <Select ariaLabel="Operator" selectedOption={operators[0]} options={operators} onChange={noop} />;
+const select = (
+  <Select
+    ariaLabel="Operator"
+    selectedOption={operators[0]}
+    options={operators}
+    onChange={noop}
+    expandToViewport={true}
+  />
+);
 const multiselect = (
   <Multiselect
     ariaLabel="Labels"
@@ -50,6 +58,7 @@ const multiselect = (
     selectedOptions={[multiOptions[0]]}
     options={multiOptions}
     onChange={noop}
+    expandToViewport={true}
   />
 );
 const segmentedControl = <SegmentedControl selectedId="and" options={segments} label="Join" onChange={noop} />;
@@ -60,6 +69,7 @@ const autosuggest = (
     onChange={noop}
     options={suggestions}
     enteredTextLabel={enteredTextLabel}
+    expandToViewport={true}
   />
 );
 
diff --git a/src/internal/components/control-group/styles.scss b/src/internal/components/control-group/styles.scss
index fa8be70985..addb2a7e8d 100644
--- a/src/internal/components/control-group/styles.scss
+++ b/src/internal/components/control-group/styles.scss
@@ -55,10 +55,16 @@
 
 .inline-label {
   @include forms.inline-label;
+  // Raise the label above the focused slot (which sits at z-index 1) so a
+  // control's focus ring paints under the label notch instead of over it.
+  z-index: 2;
 }
 
 .inline-label-wrapper {
   @include forms.inline-label-wrapper;
+  // Contain the label and the control slots in one stacking context so their
+  // z-indexes resolve against each other (label 2 over focused slot 1).
+  isolation: isolate;
 }
 
 .inline-label-trigger-wrapper {

From c02d7e00d705a5bc48f2f50086972c56d8a450ac Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Thu, 1 Oct 2026 18:09:49 +0200
Subject: [PATCH 03/21] test: Add control group inline label dev page

---
 pages/control-group/labels.page.tsx | 91 +++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 pages/control-group/labels.page.tsx

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
new file mode 100644
index 0000000000..617a90c584
--- /dev/null
+++ b/pages/control-group/labels.page.tsx
@@ -0,0 +1,91 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, SpaceBetween } from '~components';
+import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
+import Input from '~components/input';
+import ControlGroup from '~components/internal/components/control-group';
+import Multiselect, { MultiselectProps } from '~components/multiselect';
+import Select, { SelectProps } from '~components/select';
+
+import { SimplePage } from '../app/templates';
+
+const noop = () => {
+  /* empty handler to suppress controlled-component warnings */
+};
+
+const operators: SelectProps.Option[] = [
+  { value: '=', label: '=' },
+  { value: '!=', label: '!=' },
+];
+
+const multiOptions: MultiselectProps.Option[] = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+];
+
+const suggestions: AutosuggestProps.Option[] = [{ value: 'CPUUtilization' }, { value: 'MemoryUtilization' }];
+
+const enteredTextLabel = (value: string) => `Use: ${value}`;
+
+export default function ControlGroupLabels() {
+  return (
+    <SimplePage title="Control group labels" screenshotArea={{}}>
+      <SpaceBetween size="l">
+        <Box variant="h2">Control groups with label</Box>
+
+        <ControlGroup inlineLabelText="Filter by metric">
+          <Select
+            ariaLabel="Operator"
+            selectedOption={operators[0]}
+            options={operators}
+            onChange={noop}
+            expandToViewport={true}
+          />
+          <Input ariaLabel="Value" value="service" onChange={noop} />
+        </ControlGroup>
+
+        <ControlGroup inlineLabelText="Threshold">
+          <Multiselect
+            ariaLabel="Labels"
+            inlineTokens={true}
+            selectedOptions={[multiOptions[0]]}
+            options={multiOptions}
+            onChange={noop}
+            expandToViewport={true}
+          />
+          <Autosuggest
+            ariaLabel="Metric"
+            value="CPU"
+            onChange={noop}
+            options={suggestions}
+            enteredTextLabel={enteredTextLabel}
+            expandToViewport={true}
+          />
+        </ControlGroup>
+
+        <Box variant="h2">Standalone components with inline label</Box>
+
+        <Input inlineLabelText="Service name" ariaLabel="Service name" value="service" onChange={noop} />
+        <Select
+          inlineLabelText="Operator"
+          ariaLabel="Operator"
+          selectedOption={operators[0]}
+          options={operators}
+          onChange={noop}
+          expandToViewport={true}
+        />
+        <Multiselect
+          inlineLabelText="Labels"
+          ariaLabel="Labels"
+          inlineTokens={true}
+          selectedOptions={[multiOptions[0]]}
+          options={multiOptions}
+          onChange={noop}
+          expandToViewport={true}
+        />
+      </SpaceBetween>
+    </SimplePage>
+  );
+}

From 7fadbbe95bc0d2d61900b0fc73e9f5c9a3399a4a Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Thu, 1 Oct 2026 18:24:39 +0200
Subject: [PATCH 04/21] test: Lengthen control group dropdowns on labels dev
 page

---
 pages/control-group/labels.page.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index 617a90c584..ff177a1d98 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -25,7 +25,22 @@ const multiOptions: MultiselectProps.Option[] = [
   { value: '2', label: 'Option 2' },
 ];
 
-const suggestions: AutosuggestProps.Option[] = [{ value: 'CPUUtilization' }, { value: 'MemoryUtilization' }];
+const suggestions: AutosuggestProps.Option[] = Array.from({ length: 20 }, (_, i) => ({
+  value: `Metric ${i + 1}`,
+}));
+
+// Long option lists so the control groups' open dropdowns extend far enough down
+// to overlap the standalone controls below, making the "dropdown paints over the
+// label" behavior easy to eyeball.
+const longOperators: SelectProps.Option[] = Array.from({ length: 20 }, (_, i) => ({
+  value: `op-${i + 1}`,
+  label: `Operator ${i + 1}`,
+}));
+
+const longMultiOptions: MultiselectProps.Option[] = Array.from({ length: 20 }, (_, i) => ({
+  value: `${i + 1}`,
+  label: `Option ${i + 1}`,
+}));
 
 const enteredTextLabel = (value: string) => `Use: ${value}`;
 
@@ -38,8 +53,8 @@ export default function ControlGroupLabels() {
         <ControlGroup inlineLabelText="Filter by metric">
           <Select
             ariaLabel="Operator"
-            selectedOption={operators[0]}
-            options={operators}
+            selectedOption={longOperators[0]}
+            options={longOperators}
             onChange={noop}
             expandToViewport={true}
           />
@@ -50,14 +65,14 @@ export default function ControlGroupLabels() {
           <Multiselect
             ariaLabel="Labels"
             inlineTokens={true}
-            selectedOptions={[multiOptions[0]]}
-            options={multiOptions}
+            selectedOptions={[longMultiOptions[0]]}
+            options={longMultiOptions}
             onChange={noop}
             expandToViewport={true}
           />
           <Autosuggest
             ariaLabel="Metric"
-            value="CPU"
+            value=""
             onChange={noop}
             options={suggestions}
             enteredTextLabel={enteredTextLabel}

From 9b946990199c048c516d26790c8e75d5ac66c15c Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 17:29:46 +0200
Subject: [PATCH 05/21] Minor refactor

---
 .../control-group/__tests__/control-group.test.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/internal/components/control-group/__tests__/control-group.test.tsx b/src/internal/components/control-group/__tests__/control-group.test.tsx
index cb89b703c8..e94869efd4 100644
--- a/src/internal/components/control-group/__tests__/control-group.test.tsx
+++ b/src/internal/components/control-group/__tests__/control-group.test.tsx
@@ -108,10 +108,10 @@ describe('Control group', () => {
 
   test('renders the inline label and wires it to the group via aria-labelledby', () => {
     const { getByRole, getByText } = render(
-      <InternalControlGroup inlineLabelText="Threshold">
+      <ControlGroup inlineLabelText="Threshold">
         <input data-testid="alpha" />
         <input data-testid="beta" />
-      </InternalControlGroup>
+      </ControlGroup>
     );
 
     const group = getByRole('group');
@@ -123,10 +123,10 @@ describe('Control group', () => {
 
   test('omits the inline label and aria-labelledby when inlineLabelText is not set', () => {
     const { getByRole, queryByText } = render(
-      <InternalControlGroup>
+      <ControlGroup>
         <input data-testid="alpha" />
         <input data-testid="beta" />
-      </InternalControlGroup>
+      </ControlGroup>
     );
 
     expect(getByRole('group').getAttribute('aria-labelledby')).toBeNull();

From 3a67d277b9ae9c967224e10c257805dee2595323 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 17:36:22 +0200
Subject: [PATCH 06/21] chore: Dedupe control group dev page fixtures

Extract the shared noop handler, operator/multiselect option lists, and
enteredTextLabel into pages/control-group/common.tsx and import them from
both the permutations and labels dev pages.

Restore the permutations page to match main aside from the dedup: drop the
inline label permutations (covered by the dedicated labels page) and the
expandToViewport additions.
---
 pages/control-group/common.tsx            | 20 +++++++++
 pages/control-group/labels.page.tsx       | 17 +------
 pages/control-group/permutations.page.tsx | 54 ++---------------------
 3 files changed, 25 insertions(+), 66 deletions(-)
 create mode 100644 pages/control-group/common.tsx

diff --git a/pages/control-group/common.tsx b/pages/control-group/common.tsx
new file mode 100644
index 0000000000..f1731730e4
--- /dev/null
+++ b/pages/control-group/common.tsx
@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { MultiselectProps } from '~components/multiselect';
+import { SelectProps } from '~components/select';
+
+export const noop = () => {
+  /* empty handler to suppress controlled-component warnings */
+};
+
+export const operators: SelectProps.Option[] = [
+  { value: '=', label: '=' },
+  { value: '!=', label: '!=' },
+];
+
+export const multiOptions: MultiselectProps.Option[] = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+];
+
+export const enteredTextLabel = (value: string) => `Use: ${value}`;
diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index ff177a1d98..d15ebcd94a 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -10,20 +10,7 @@ import Multiselect, { MultiselectProps } from '~components/multiselect';
 import Select, { SelectProps } from '~components/select';
 
 import { SimplePage } from '../app/templates';
-
-const noop = () => {
-  /* empty handler to suppress controlled-component warnings */
-};
-
-const operators: SelectProps.Option[] = [
-  { value: '=', label: '=' },
-  { value: '!=', label: '!=' },
-];
-
-const multiOptions: MultiselectProps.Option[] = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-];
+import { enteredTextLabel, multiOptions, noop, operators } from './common';
 
 const suggestions: AutosuggestProps.Option[] = Array.from({ length: 20 }, (_, i) => ({
   value: `Metric ${i + 1}`,
@@ -42,8 +29,6 @@ const longMultiOptions: MultiselectProps.Option[] = Array.from({ length: 20 }, (
   label: `Option ${i + 1}`,
 }));
 
-const enteredTextLabel = (value: string) => `Use: ${value}`;
-
 export default function ControlGroupLabels() {
   return (
     <SimplePage title="Control group labels" screenshotArea={{}}>
diff --git a/pages/control-group/permutations.page.tsx b/pages/control-group/permutations.page.tsx
index 0a66ecc898..3f453d9289 100644
--- a/pages/control-group/permutations.page.tsx
+++ b/pages/control-group/permutations.page.tsx
@@ -6,32 +6,19 @@ import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 import FormField from '~components/form-field';
 import Input from '~components/input';
 import ControlGroup, { InternalControlGroupProps } from '~components/internal/components/control-group';
-import Multiselect, { MultiselectProps } from '~components/multiselect';
+import Multiselect from '~components/multiselect';
 import RadioGroup from '~components/radio-group';
 import SegmentedControl, { SegmentedControlProps } from '~components/segmented-control';
-import Select, { SelectProps } from '~components/select';
+import Select from '~components/select';
 
 import { useAppContext } from '../app/app-context';
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
+import { enteredTextLabel, multiOptions, noop, operators } from './common';
 
 type Direction = NonNullable<InternalControlGroupProps['direction']>;
 
-const noop = () => {
-  /* empty handler to suppress controlled-component warnings */
-};
-
-const operators: SelectProps.Option[] = [
-  { value: '=', label: '=' },
-  { value: '!=', label: '!=' },
-];
-
-const multiOptions: MultiselectProps.Option[] = [
-  { value: '1', label: 'Option 1' },
-  { value: '2', label: 'Option 2' },
-];
-
 const segments: SegmentedControlProps.Option[] = [
   { id: 'and', text: 'AND' },
   { id: 'or', text: 'OR' },
@@ -39,18 +26,8 @@ const segments: SegmentedControlProps.Option[] = [
 
 const suggestions: AutosuggestProps.Option[] = [{ value: 'CPUUtilization' }, { value: 'MemoryUtilization' }];
 
-const enteredTextLabel = (value: string) => `Use: ${value}`;
-
 const input = <Input ariaLabel="Value" value="service" onChange={noop} />;
-const select = (
-  <Select
-    ariaLabel="Operator"
-    selectedOption={operators[0]}
-    options={operators}
-    onChange={noop}
-    expandToViewport={true}
-  />
-);
+const select = <Select ariaLabel="Operator" selectedOption={operators[0]} options={operators} onChange={noop} />;
 const multiselect = (
   <Multiselect
     ariaLabel="Labels"
@@ -58,7 +35,6 @@ const multiselect = (
     selectedOptions={[multiOptions[0]]}
     options={multiOptions}
     onChange={noop}
-    expandToViewport={true}
   />
 );
 const segmentedControl = <SegmentedControl selectedId="and" options={segments} label="Join" onChange={noop} />;
@@ -69,7 +45,6 @@ const autosuggest = (
     onChange={noop}
     options={suggestions}
     enteredTextLabel={enteredTextLabel}
-    expandToViewport={true}
   />
 );
 
@@ -129,23 +104,6 @@ const permutations = createPermutations<InternalControlGroupProps>([
   },
 ]);
 
-const inlineLabelPermutations = createPermutations<InternalControlGroupProps>([
-  {
-    inlineLabelText: ['Threshold'],
-    children: [
-      <>
-        {input}
-        {select}
-      </>,
-      <>
-        {select}
-        {input}
-        {multiselect}
-      </>,
-    ],
-  },
-]);
-
 export default function ControlGroupPermutations() {
   // The name `direction` is already taken for the LTR/RTL URL parameter
   const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>();
@@ -172,10 +130,6 @@ export default function ControlGroupPermutations() {
         permutations={permutations}
         render={permutation => <ControlGroup {...permutation} direction={direction} />}
       />
-      <PermutationsView
-        permutations={inlineLabelPermutations}
-        render={permutation => <ControlGroup {...permutation} />}
-      />
     </PermutationsPage>
   );
 }

From bb6b761be39676798761ff8fa5e40627175418c0 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 17:42:41 +0200
Subject: [PATCH 07/21] chore: Add test ids to grouped select and multiselect
 on labels page

Give the grouped Select and Multiselect stable data-testid hooks so visual
regression tests can target them unambiguously; both grouped and standalone
controls share aria-labels, so aria-label alone cannot disambiguate them.
---
 pages/control-group/labels.page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index d15ebcd94a..a6a4a1388c 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -37,6 +37,7 @@ export default function ControlGroupLabels() {
 
         <ControlGroup inlineLabelText="Filter by metric">
           <Select
+            data-testid="grouped-select"
             ariaLabel="Operator"
             selectedOption={longOperators[0]}
             options={longOperators}
@@ -48,6 +49,7 @@ export default function ControlGroupLabels() {
 
         <ControlGroup inlineLabelText="Threshold">
           <Multiselect
+            data-testid="grouped-multiselect"
             ariaLabel="Labels"
             inlineTokens={true}
             selectedOptions={[longMultiOptions[0]]}

From 97cf027c597936d1214c6aee362b9b455abbd4fa Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 17:43:01 +0200
Subject: [PATCH 08/21] chore: Add autosuggest- and input-led grouped controls
 to labels page

Add two grouped controls below the grouped select and multiselect: one led
by an Autosuggest and one led by an Input. These cover the inline label +
focus ring interaction for Autosuggest and Input as the leading control. Both
leading controls get data-testid hooks for later visual tests.
---
 pages/control-group/labels.page.tsx | 31 +++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index a6a4a1388c..62a77677ac 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -67,6 +67,37 @@ export default function ControlGroupLabels() {
           />
         </ControlGroup>
 
+        <ControlGroup inlineLabelText="Metric name">
+          <Autosuggest
+            data-testid="grouped-autosuggest"
+            ariaLabel="Metric"
+            value="CPU"
+            onChange={noop}
+            options={suggestions}
+            enteredTextLabel={enteredTextLabel}
+            expandToViewport={true}
+          />
+          <Select
+            ariaLabel="Operator"
+            selectedOption={longOperators[0]}
+            options={longOperators}
+            onChange={noop}
+            expandToViewport={true}
+          />
+        </ControlGroup>
+
+        <ControlGroup inlineLabelText="Service">
+          <Input data-testid="grouped-input" ariaLabel="Value" value="service" onChange={noop} />
+          <Autosuggest
+            ariaLabel="Metric"
+            value=""
+            onChange={noop}
+            options={suggestions}
+            enteredTextLabel={enteredTextLabel}
+            expandToViewport={true}
+          />
+        </ControlGroup>
+
         <Box variant="h2">Standalone components with inline label</Box>
 
         <Input inlineLabelText="Service name" ariaLabel="Service name" value="service" onChange={noop} />

From 4b628cf70b8fd4bb01f6ca3e31eba618dc8c72fc Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 17:49:49 +0200
Subject: [PATCH 09/21] chore: Add description, focus target, and direction
 toggle to labels page

Replace the h2 section headings with a page-level description, add the shared
FocusTarget so keyboard tests can tab into the controls, and extract the
permutations page's direction settings into common.tsx (useControlGroupDirection
hook + DirectionSettings) so the labels page can also render vertically.
---
 pages/control-group/common.tsx            | 40 +++++++++++++++++++++++
 pages/control-group/labels.page.tsx       | 30 ++++++++++-------
 pages/control-group/permutations.page.tsx | 24 ++------------
 3 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/pages/control-group/common.tsx b/pages/control-group/common.tsx
index f1731730e4..fd8caa0af7 100644
--- a/pages/control-group/common.tsx
+++ b/pages/control-group/common.tsx
@@ -1,8 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import FormField from '~components/form-field';
+import { InternalControlGroupProps } from '~components/internal/components/control-group';
 import { MultiselectProps } from '~components/multiselect';
+import RadioGroup from '~components/radio-group';
 import { SelectProps } from '~components/select';
 
+import { useAppContext } from '../app/app-context';
+
 export const noop = () => {
   /* empty handler to suppress controlled-component warnings */
 };
@@ -18,3 +25,36 @@ export const multiOptions: MultiselectProps.Option[] = [
 ];
 
 export const enteredTextLabel = (value: string) => `Use: ${value}`;
+
+export type Direction = NonNullable<InternalControlGroupProps['direction']>;
+
+// Reads/writes the control group layout direction from the `controlGroupDirection`
+// URL param. The name `direction` is already taken for the LTR/RTL URL parameter.
+export function useControlGroupDirection() {
+  const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>();
+  const direction: Direction = urlParams.controlGroupDirection === 'vertical' ? 'vertical' : 'horizontal';
+  const setDirection = (value: Direction) => setUrlParams({ controlGroupDirection: value });
+  return { direction, setDirection };
+}
+
+// Shared "Direction" settings control reused across the control group dev pages.
+export function DirectionSettings({
+  direction,
+  setDirection,
+}: {
+  direction: Direction;
+  setDirection: (value: Direction) => void;
+}) {
+  return (
+    <FormField label="Direction">
+      <RadioGroup
+        value={direction}
+        onChange={({ detail }) => setDirection(detail.value as Direction)}
+        items={[
+          { value: 'horizontal', label: 'Horizontal' },
+          { value: 'vertical', label: 'Vertical' },
+        ]}
+      />
+    </FormField>
+  );
+}
diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index 62a77677ac..4d17fe7122 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { Box, SpaceBetween } from '~components';
+import { SpaceBetween } from '~components';
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
 import Input from '~components/input';
 import ControlGroup from '~components/internal/components/control-group';
@@ -10,7 +10,8 @@ import Multiselect, { MultiselectProps } from '~components/multiselect';
 import Select, { SelectProps } from '~components/select';
 
 import { SimplePage } from '../app/templates';
-import { enteredTextLabel, multiOptions, noop, operators } from './common';
+import FocusTarget from '../common/focus-target';
+import { DirectionSettings, enteredTextLabel, multiOptions, noop, operators, useControlGroupDirection } from './common';
 
 const suggestions: AutosuggestProps.Option[] = Array.from({ length: 20 }, (_, i) => ({
   value: `Metric ${i + 1}`,
@@ -30,12 +31,21 @@ const longMultiOptions: MultiselectProps.Option[] = Array.from({ length: 20 }, (
 }));
 
 export default function ControlGroupLabels() {
+  const { direction, setDirection } = useControlGroupDirection();
+
   return (
-    <SimplePage title="Control group labels" screenshotArea={{}}>
+    <SimplePage
+      title="Control group labels"
+      subtitle="Exercises the control group inline label: how it stacks above the controls, how it
+        interacts with each leading control's focus ring, and how an open dropdown paints over the
+        label and the controls below. Standalone controls with an inline label are shown for
+        comparison."
+      settings={<DirectionSettings direction={direction} setDirection={setDirection} />}
+      screenshotArea={{}}
+    >
+      <FocusTarget />
       <SpaceBetween size="l">
-        <Box variant="h2">Control groups with label</Box>
-
-        <ControlGroup inlineLabelText="Filter by metric">
+        <ControlGroup inlineLabelText="Filter by metric" direction={direction}>
           <Select
             data-testid="grouped-select"
             ariaLabel="Operator"
@@ -47,7 +57,7 @@ export default function ControlGroupLabels() {
           <Input ariaLabel="Value" value="service" onChange={noop} />
         </ControlGroup>
 
-        <ControlGroup inlineLabelText="Threshold">
+        <ControlGroup inlineLabelText="Threshold" direction={direction}>
           <Multiselect
             data-testid="grouped-multiselect"
             ariaLabel="Labels"
@@ -67,7 +77,7 @@ export default function ControlGroupLabels() {
           />
         </ControlGroup>
 
-        <ControlGroup inlineLabelText="Metric name">
+        <ControlGroup inlineLabelText="Metric name" direction={direction}>
           <Autosuggest
             data-testid="grouped-autosuggest"
             ariaLabel="Metric"
@@ -86,7 +96,7 @@ export default function ControlGroupLabels() {
           />
         </ControlGroup>
 
-        <ControlGroup inlineLabelText="Service">
+        <ControlGroup inlineLabelText="Service" direction={direction}>
           <Input data-testid="grouped-input" ariaLabel="Value" value="service" onChange={noop} />
           <Autosuggest
             ariaLabel="Metric"
@@ -98,8 +108,6 @@ export default function ControlGroupLabels() {
           />
         </ControlGroup>
 
-        <Box variant="h2">Standalone components with inline label</Box>
-
         <Input inlineLabelText="Service name" ariaLabel="Service name" value="service" onChange={noop} />
         <Select
           inlineLabelText="Operator"
diff --git a/pages/control-group/permutations.page.tsx b/pages/control-group/permutations.page.tsx
index 3f453d9289..74a2994a33 100644
--- a/pages/control-group/permutations.page.tsx
+++ b/pages/control-group/permutations.page.tsx
@@ -3,21 +3,16 @@
 import React from 'react';
 
 import Autosuggest, { AutosuggestProps } from '~components/autosuggest';
-import FormField from '~components/form-field';
 import Input from '~components/input';
 import ControlGroup, { InternalControlGroupProps } from '~components/internal/components/control-group';
 import Multiselect from '~components/multiselect';
-import RadioGroup from '~components/radio-group';
 import SegmentedControl, { SegmentedControlProps } from '~components/segmented-control';
 import Select from '~components/select';
 
-import { useAppContext } from '../app/app-context';
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';
 import PermutationsView from '../utils/permutations-view';
-import { enteredTextLabel, multiOptions, noop, operators } from './common';
-
-type Direction = NonNullable<InternalControlGroupProps['direction']>;
+import { DirectionSettings, enteredTextLabel, multiOptions, noop, operators, useControlGroupDirection } from './common';
 
 const segments: SegmentedControlProps.Option[] = [
   { id: 'and', text: 'AND' },
@@ -105,26 +100,13 @@ const permutations = createPermutations<InternalControlGroupProps>([
 ]);
 
 export default function ControlGroupPermutations() {
-  // The name `direction` is already taken for the LTR/RTL URL parameter
-  const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>();
-  const direction: Direction = urlParams.controlGroupDirection === 'vertical' ? 'vertical' : 'horizontal';
+  const { direction, setDirection } = useControlGroupDirection();
 
   return (
     <PermutationsPage
       title="Control group permutations"
       i18n={{}}
-      settings={
-        <FormField label="Direction">
-          <RadioGroup
-            value={direction}
-            onChange={({ detail }) => setUrlParams({ controlGroupDirection: detail.value as Direction })}
-            items={[
-              { value: 'horizontal', label: 'Horizontal' },
-              { value: 'vertical', label: 'Vertical' },
-            ]}
-          />
-        </FormField>
-      }
+      settings={<DirectionSettings direction={direction} setDirection={setDirection} />}
     >
       <PermutationsView
         permutations={permutations}

From 32304a20838918988eb325036f53597e3311be3c Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 18:00:54 +0200
Subject: [PATCH 10/21] fix: Clear inline-token overlap on control group label

A ControlGroup with an inline label that leads with a Multiselect
overlapped the Multiselect's inline token row. The group's single label
pulls in the shared `inline-label` mixin's `padding-block-end: 2px`,
tuned for a normal text trigger, but a grouped Multiselect always renders
inline tokens whose row sits higher, so the label hung too low.

Mirror the proven Multiselect customization at the control-group layer:
add an `inline-label-inline-tokens` modifier (padding-block-end: 0 and
translateY(-1.5px), copied verbatim from src/select/parts/styles.scss) and
apply it from index.tsx only when a child resolves to a Multiselect
(detected by displayName). Plain-trigger groups keep the base offset and
are visually unchanged. The shared forms mixin is untouched.

Verification (from worktree root):
- npm run lint:stylelint -> exit 0
- npm run quick-build -> exit 0 (TypeScript + SCSS clean; recompiles lib)
- eslint on index.tsx + test -> exit 0 (import sort autofixed)
- jest control-group.test.tsx -> both new assertions pass (clearance class
  applied with a Multiselect child, absent with plain children). Two
  pre-existing getByRole('group') ambiguity failures are unrelated to this
  change (confirmed identical on HEAD) and left as-is.

Visual check: on the control-group labels dev page the Threshold group's
label no longer overlaps the Multiselect inline token, in both horizontal
and vertical direction; other grouped labels and the standalone Labels
Multiselect are unchanged.
---
 .../__tests__/control-group.test.tsx          | 25 +++++++++++++++++++
 .../components/control-group/index.tsx        | 18 ++++++++++++-
 .../components/control-group/styles.scss      |  9 +++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/internal/components/control-group/__tests__/control-group.test.tsx b/src/internal/components/control-group/__tests__/control-group.test.tsx
index e94869efd4..96463af09d 100644
--- a/src/internal/components/control-group/__tests__/control-group.test.tsx
+++ b/src/internal/components/control-group/__tests__/control-group.test.tsx
@@ -5,8 +5,11 @@ import { render } from '@testing-library/react';
 
 import ControlGroup from '../../../../../lib/components/internal/components/control-group';
 import { ResetGroupedControlContext } from '../../../../../lib/components/internal/context/control-group-context';
+import Multiselect from '../../../../../lib/components/multiselect';
 import { DirectionProbe, PositionProbe } from './common';
 
+import styles from '../../../../../lib/components/internal/components/control-group/styles.css.js';
+
 describe('Control group', () => {
   test('keeps focus on a control when the children are reordered', () => {
     const alpha = <input key="alpha" data-testid="alpha" />;
@@ -121,6 +124,28 @@ describe('Control group', () => {
     expect(group.getAttribute('aria-labelledby')).toBe(label.id);
   });
 
+  test('applies the inline-token clearance class on the label when a child is a Multiselect', () => {
+    const { getByText } = render(
+      <ControlGroup inlineLabelText="Threshold">
+        <Multiselect selectedOptions={[]} options={[]} inlineTokens={true} />
+        <input data-testid="beta" />
+      </ControlGroup>
+    );
+
+    expect(getByText('Threshold')).toHaveClass(styles['inline-label-inline-tokens']);
+  });
+
+  test('does not apply the inline-token clearance class when no child is a Multiselect', () => {
+    const { getByText } = render(
+      <ControlGroup inlineLabelText="Threshold">
+        <input data-testid="alpha" />
+        <input data-testid="beta" />
+      </ControlGroup>
+    );
+
+    expect(getByText('Threshold')).not.toHaveClass(styles['inline-label-inline-tokens']);
+  });
+
   test('omits the inline label and aria-labelledby when inlineLabelText is not set', () => {
     const { getByRole, queryByText } = render(
       <ControlGroup>
diff --git a/src/internal/components/control-group/index.tsx b/src/internal/components/control-group/index.tsx
index 440fb71931..6a0a86232f 100644
--- a/src/internal/components/control-group/index.tsx
+++ b/src/internal/components/control-group/index.tsx
@@ -34,6 +34,19 @@ export default function InternalControlGroup({
   const flattenedChildren = flattenChildren(children, 'ControlGroup');
   const controlCount = flattenedChildren.length;
 
+  // A grouped Multiselect always renders its tokens inline in the trigger, which
+  // sits higher than normal trigger text. The group's single inline label must
+  // drop the shared mixin's bottom padding and nudge up to clear that token row;
+  // otherwise it overlaps the tokens. Only Multiselect does this inside a group,
+  // so detecting its presence (by displayName, to stay decoupled from its module)
+  // is enough. Plain-trigger groups keep the base offset.
+  const hasInlineTokenControl = flattenedChildren.some(
+    child =>
+      React.isValidElement(child) &&
+      typeof child.type !== 'string' &&
+      (child.type as { displayName?: string }).displayName === 'Multiselect'
+  );
+
   const controls = (
     <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>
       {flattenedChildren.map((child, index) => {
@@ -55,7 +68,10 @@ export default function InternalControlGroup({
   if (inlineLabelText) {
     return (
       <div {...baseProps} className={clsx(baseProps.className, styles['inline-label-wrapper'])}>
-        <label id={labelId} className={styles['inline-label']}>
+        <label
+          id={labelId}
+          className={clsx(styles['inline-label'], hasInlineTokenControl && styles['inline-label-inline-tokens'])}
+        >
           {inlineLabelText}
         </label>
         <div className={styles['inline-label-trigger-wrapper']}>
diff --git a/src/internal/components/control-group/styles.scss b/src/internal/components/control-group/styles.scss
index addb2a7e8d..a48e519111 100644
--- a/src/internal/components/control-group/styles.scss
+++ b/src/internal/components/control-group/styles.scss
@@ -60,6 +60,15 @@
   z-index: 2;
 }
 
+// Clear the Multiselect inline-token row the same way the Multiselect's own
+// inline label does (mirrors src/select/parts/styles.scss .inline-label-inline-tokens).
+// Applied by index.tsx only when the group contains an inline-token control, so
+// plain-trigger groups keep the base offset.
+.inline-label-inline-tokens {
+  padding-block-end: 0;
+  transform: translateY(-1.5px);
+}
+
 .inline-label-wrapper {
   @include forms.inline-label-wrapper;
   // Contain the label and the control slots in one stacking context so their

From c0b248589aabed146072684ae5481a04195ee4ab Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 18:16:48 +0200
Subject: [PATCH 11/21] Raise inline label uncoditionally to prevent it
 overlapping with inline tokens

---
 .../__tests__/control-group.test.tsx          | 25 -------------------
 .../components/control-group/index.tsx        | 18 +------------
 .../components/control-group/styles.scss      | 13 +++-------
 src/internal/styles/forms/mixins.scss         |  6 +++++
 src/select/parts/styles.scss                  |  3 +--
 5 files changed, 12 insertions(+), 53 deletions(-)

diff --git a/src/internal/components/control-group/__tests__/control-group.test.tsx b/src/internal/components/control-group/__tests__/control-group.test.tsx
index 96463af09d..e94869efd4 100644
--- a/src/internal/components/control-group/__tests__/control-group.test.tsx
+++ b/src/internal/components/control-group/__tests__/control-group.test.tsx
@@ -5,11 +5,8 @@ import { render } from '@testing-library/react';
 
 import ControlGroup from '../../../../../lib/components/internal/components/control-group';
 import { ResetGroupedControlContext } from '../../../../../lib/components/internal/context/control-group-context';
-import Multiselect from '../../../../../lib/components/multiselect';
 import { DirectionProbe, PositionProbe } from './common';
 
-import styles from '../../../../../lib/components/internal/components/control-group/styles.css.js';
-
 describe('Control group', () => {
   test('keeps focus on a control when the children are reordered', () => {
     const alpha = <input key="alpha" data-testid="alpha" />;
@@ -124,28 +121,6 @@ describe('Control group', () => {
     expect(group.getAttribute('aria-labelledby')).toBe(label.id);
   });
 
-  test('applies the inline-token clearance class on the label when a child is a Multiselect', () => {
-    const { getByText } = render(
-      <ControlGroup inlineLabelText="Threshold">
-        <Multiselect selectedOptions={[]} options={[]} inlineTokens={true} />
-        <input data-testid="beta" />
-      </ControlGroup>
-    );
-
-    expect(getByText('Threshold')).toHaveClass(styles['inline-label-inline-tokens']);
-  });
-
-  test('does not apply the inline-token clearance class when no child is a Multiselect', () => {
-    const { getByText } = render(
-      <ControlGroup inlineLabelText="Threshold">
-        <input data-testid="alpha" />
-        <input data-testid="beta" />
-      </ControlGroup>
-    );
-
-    expect(getByText('Threshold')).not.toHaveClass(styles['inline-label-inline-tokens']);
-  });
-
   test('omits the inline label and aria-labelledby when inlineLabelText is not set', () => {
     const { getByRole, queryByText } = render(
       <ControlGroup>
diff --git a/src/internal/components/control-group/index.tsx b/src/internal/components/control-group/index.tsx
index 6a0a86232f..b16afe54e9 100644
--- a/src/internal/components/control-group/index.tsx
+++ b/src/internal/components/control-group/index.tsx
@@ -34,19 +34,6 @@ export default function InternalControlGroup({
   const flattenedChildren = flattenChildren(children, 'ControlGroup');
   const controlCount = flattenedChildren.length;
 
-  // A grouped Multiselect always renders its tokens inline in the trigger, which
-  // sits higher than normal trigger text. The group's single inline label must
-  // drop the shared mixin's bottom padding and nudge up to clear that token row;
-  // otherwise it overlaps the tokens. Only Multiselect does this inside a group,
-  // so detecting its presence (by displayName, to stay decoupled from its module)
-  // is enough. Plain-trigger groups keep the base offset.
-  const hasInlineTokenControl = flattenedChildren.some(
-    child =>
-      React.isValidElement(child) &&
-      typeof child.type !== 'string' &&
-      (child.type as { displayName?: string }).displayName === 'Multiselect'
-  );
-
   const controls = (
     <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>
       {flattenedChildren.map((child, index) => {
@@ -68,10 +55,7 @@ export default function InternalControlGroup({
   if (inlineLabelText) {
     return (
       <div {...baseProps} className={clsx(baseProps.className, styles['inline-label-wrapper'])}>
-        <label
-          id={labelId}
-          className={clsx(styles['inline-label'], hasInlineTokenControl && styles['inline-label-inline-tokens'])}
-        >
+        <label id={labelId} className={clsx(styles['inline-label'])}>
           {inlineLabelText}
         </label>
         <div className={styles['inline-label-trigger-wrapper']}>
diff --git a/src/internal/components/control-group/styles.scss b/src/internal/components/control-group/styles.scss
index a48e519111..106fe9f2e4 100644
--- a/src/internal/components/control-group/styles.scss
+++ b/src/internal/components/control-group/styles.scss
@@ -55,20 +55,15 @@
 
 .inline-label {
   @include forms.inline-label;
+  // A grouped Multiselect always renders inline tokens, whose row sits higher
+  // than normal trigger text, so the group label always clears that row the same
+  // way the Multiselect's own inline label does.
+  @include forms.inline-label-inline-tokens;
   // Raise the label above the focused slot (which sits at z-index 1) so a
   // control's focus ring paints under the label notch instead of over it.
   z-index: 2;
 }
 
-// Clear the Multiselect inline-token row the same way the Multiselect's own
-// inline label does (mirrors src/select/parts/styles.scss .inline-label-inline-tokens).
-// Applied by index.tsx only when the group contains an inline-token control, so
-// plain-trigger groups keep the base offset.
-.inline-label-inline-tokens {
-  padding-block-end: 0;
-  transform: translateY(-1.5px);
-}
-
 .inline-label-wrapper {
   @include forms.inline-label-wrapper;
   // Contain the label and the control slots in one stacking context so their
diff --git a/src/internal/styles/forms/mixins.scss b/src/internal/styles/forms/mixins.scss
index 5bb4af20f0..6eccb24f7d 100644
--- a/src/internal/styles/forms/mixins.scss
+++ b/src/internal/styles/forms/mixins.scss
@@ -353,6 +353,12 @@ $inline-label-border-radius: 2px;
   z-index: 1;
 }
 
+// Adjusts an inline label's vertical position so it does not overlap inline tokens.
+@mixin inline-label-inline-tokens {
+  padding-block-end: 0;
+  transform: translateY(-1.5px);
+}
+
 @mixin inline-label-disabled {
   background: linear-gradient(
     to bottom,
diff --git a/src/select/parts/styles.scss b/src/select/parts/styles.scss
index c41be32a6c..abdd702f62 100644
--- a/src/select/parts/styles.scss
+++ b/src/select/parts/styles.scss
@@ -124,8 +124,7 @@ $checkbox-size: awsui.$size-control;
 
 // Specific Styling for Inline Label Text to not overlap with Inline Tokens
 .inline-label-inline-tokens {
-  padding-block-end: 0;
-  transform: translateY(-1.5px);
+  @include forms.inline-label-inline-tokens;
 }
 
 .disabled-reason-tooltip {

From cd237674ea3f57a93c69348b81c4538a788bb149 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 18:20:14 +0200
Subject: [PATCH 12/21] Refine comment

---
 pages/control-group/labels.page.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index 4d17fe7122..32ca948445 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -17,9 +17,8 @@ const suggestions: AutosuggestProps.Option[] = Array.from({ length: 20 }, (_, i)
   value: `Metric ${i + 1}`,
 }));
 
-// Long option lists so the control groups' open dropdowns extend far enough down
-// to overlap the standalone controls below, making the "dropdown paints over the
-// label" behavior easy to eyeball.
+// Long option lists so the control groups' open dropdowns extend far enough down to overlap the standalone controls below,
+// to test that dropdowns are rendered over labels and not the other way around.
 const longOperators: SelectProps.Option[] = Array.from({ length: 20 }, (_, i) => ({
   value: `op-${i + 1}`,
   label: `Operator ${i + 1}`,

From f9cfeccb20b2bc819d64b38b5c7990c99f627e75 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 18:22:53 +0200
Subject: [PATCH 13/21] Refine comment

---
 pages/control-group/common.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/pages/control-group/common.tsx b/pages/control-group/common.tsx
index fd8caa0af7..0bcba1b070 100644
--- a/pages/control-group/common.tsx
+++ b/pages/control-group/common.tsx
@@ -28,16 +28,13 @@ export const enteredTextLabel = (value: string) => `Use: ${value}`;
 
 export type Direction = NonNullable<InternalControlGroupProps['direction']>;
 
-// Reads/writes the control group layout direction from the `controlGroupDirection`
-// URL param. The name `direction` is already taken for the LTR/RTL URL parameter.
 export function useControlGroupDirection() {
-  const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>();
+  const { urlParams, setUrlParams } = useAppContext<'controlGroupDirection'>(); // The name `direction` is already taken for the LTR/RTL URL parameter
   const direction: Direction = urlParams.controlGroupDirection === 'vertical' ? 'vertical' : 'horizontal';
   const setDirection = (value: Direction) => setUrlParams({ controlGroupDirection: value });
   return { direction, setDirection };
 }
 
-// Shared "Direction" settings control reused across the control group dev pages.
 export function DirectionSettings({
   direction,
   setDirection,

From 6e7b034b12c2cac2686fa809657cb34985de1564 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 18:41:32 +0200
Subject: [PATCH 14/21] Add standalone select at the top of the page

---
 pages/control-group/labels.page.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index 32ca948445..d097ce6ef2 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -44,6 +44,14 @@ export default function ControlGroupLabels() {
     >
       <FocusTarget />
       <SpaceBetween size="l">
+        <Select
+          data-testid="standalone-select"
+          inlineLabelText="Namespace"
+          ariaLabel="Namespace"
+          selectedOption={longOperators[0]}
+          options={longOperators}
+          onChange={noop}
+        />
         <ControlGroup inlineLabelText="Filter by metric" direction={direction}>
           <Select
             data-testid="grouped-select"

From e1238f55bade1cde5e31f79ebeb23928351c08e2 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Tue, 6 Oct 2026 18:47:14 +0200
Subject: [PATCH 15/21] Simplify subtitle

---
 pages/control-group/labels.page.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index d097ce6ef2..89f2ae87c0 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -35,10 +35,7 @@ export default function ControlGroupLabels() {
   return (
     <SimplePage
       title="Control group labels"
-      subtitle="Exercises the control group inline label: how it stacks above the controls, how it
-        interacts with each leading control's focus ring, and how an open dropdown paints over the
-        label and the controls below. Standalone controls with an inline label are shown for
-        comparison."
+      subtitle="Labels should be displayed above focus rings but below dropdowns."
       settings={<DirectionSettings direction={direction} setDirection={setDirection} />}
       screenshotArea={{}}
     >

From 41adb31aa9a6c3cd12f5d4e871928630b7f2effa Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Wed, 7 Oct 2026 07:46:58 +0200
Subject: [PATCH 16/21] fix: Portal grouped control dropdowns

A control group's inline label must paint above a focused control's focus
ring but below that control's open dropdown. The ring and an inline dropdown
share the control slot's stacking context, so no slot z-index satisfies both.

Instead, Select, Multiselect, and Autosuggest now portal the dropdown when
grouped (effective expandToViewport = prop || isGrouped), so it escapes the
slot's isolation and paints over the group label while the focus ring stays
under it. This mirrors Multiselect forcing inline tokens when grouped. The
effective value also feeds getDropdownMinWidth so the portaled grouped
dropdown keeps the right min-width. The public expandToViewport prop, its
defaults, and the Dropdown component are unchanged; standalone controls are
unaffected. The labels dev page no longer needs expandToViewport.
---
 pages/control-group/labels.page.tsx | 15 +--------------
 src/autosuggest/internal.tsx        |  8 +++++++-
 src/multiselect/internal.tsx        | 13 ++++++++++---
 src/select/internal.tsx             |  9 +++++++--
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index 89f2ae87c0..5217ec417d 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -56,7 +56,6 @@ export default function ControlGroupLabels() {
             selectedOption={longOperators[0]}
             options={longOperators}
             onChange={noop}
-            expandToViewport={true}
           />
           <Input ariaLabel="Value" value="service" onChange={noop} />
         </ControlGroup>
@@ -69,7 +68,6 @@ export default function ControlGroupLabels() {
             selectedOptions={[longMultiOptions[0]]}
             options={longMultiOptions}
             onChange={noop}
-            expandToViewport={true}
           />
           <Autosuggest
             ariaLabel="Metric"
@@ -77,7 +75,6 @@ export default function ControlGroupLabels() {
             onChange={noop}
             options={suggestions}
             enteredTextLabel={enteredTextLabel}
-            expandToViewport={true}
           />
         </ControlGroup>
 
@@ -89,15 +86,8 @@ export default function ControlGroupLabels() {
             onChange={noop}
             options={suggestions}
             enteredTextLabel={enteredTextLabel}
-            expandToViewport={true}
-          />
-          <Select
-            ariaLabel="Operator"
-            selectedOption={longOperators[0]}
-            options={longOperators}
-            onChange={noop}
-            expandToViewport={true}
           />
+          <Select ariaLabel="Operator" selectedOption={longOperators[0]} options={longOperators} onChange={noop} />
         </ControlGroup>
 
         <ControlGroup inlineLabelText="Service" direction={direction}>
@@ -108,7 +98,6 @@ export default function ControlGroupLabels() {
             onChange={noop}
             options={suggestions}
             enteredTextLabel={enteredTextLabel}
-            expandToViewport={true}
           />
         </ControlGroup>
 
@@ -119,7 +108,6 @@ export default function ControlGroupLabels() {
           selectedOption={operators[0]}
           options={operators}
           onChange={noop}
-          expandToViewport={true}
         />
         <Multiselect
           inlineLabelText="Labels"
@@ -128,7 +116,6 @@ export default function ControlGroupLabels() {
           selectedOptions={[multiOptions[0]]}
           options={multiOptions}
           onChange={noop}
-          expandToViewport={true}
         />
       </SpaceBetween>
     </SimplePage>
diff --git a/src/autosuggest/internal.tsx b/src/autosuggest/internal.tsx
index 38fee15321..b10e46f747 100644
--- a/src/autosuggest/internal.tsx
+++ b/src/autosuggest/internal.tsx
@@ -13,6 +13,7 @@ import { BaseChangeDetail } from '../input/interfaces';
 import AutosuggestInput, { AutosuggestInputRef } from '../internal/components/autosuggest-input';
 import DropdownFooter from '../internal/components/dropdown-footer';
 import { useDropdownStatus } from '../internal/components/dropdown-status';
+import { useGroupedControlContext } from '../internal/context/control-group-context';
 import { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
@@ -170,6 +171,11 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
   };
 
   const formFieldContext = useFormFieldContext(restProps);
+  const groupedControlProps = useGroupedControlContext();
+  // When grouped, the dropdown is portaled regardless of the public
+  // `expandToViewport` prop so it escapes the control slot's stacking context
+  // and paints over the group's inline label (which the focus ring stays under).
+  const effectiveExpandToViewport = expandToViewport || !!groupedControlProps.position;
   const selfControlId = useUniqueId('input');
   const footerControlId = useUniqueId('footer');
   const controlId = formFieldContext.controlId ?? selfControlId;
@@ -220,7 +226,7 @@ const InternalAutosuggest = React.forwardRef((props: InternalAutosuggestProps, r
       ariaRequired={ariaRequired}
       clearAriaLabel={clearAriaLabel}
       disableBrowserAutocorrect={disableBrowserAutocorrect}
-      expandToViewport={expandToViewport}
+      expandToViewport={effectiveExpandToViewport}
       ariaControls={listId}
       ariaActivedescendant={highlightedOptionId}
       dropdownExpanded={shouldRenderDropdownContent}
diff --git a/src/multiselect/internal.tsx b/src/multiselect/internal.tsx
index c46589bae7..d72ad0a38b 100644
--- a/src/multiselect/internal.tsx
+++ b/src/multiselect/internal.tsx
@@ -78,10 +78,17 @@ const InternalMultiselect = React.forwardRef(
     const groupedControlProps = useGroupedControlContext();
     const i18n = useInternalI18n('multiselect');
 
+    const isGrouped = !!groupedControlProps.position;
+
     // When rendered inside a control group, tokens are always shown inline in the
     // trigger regardless of the `inlineTokens` prop, since there is no room to
     // display tokens below the control within a group.
-    const showTokensInline = inlineTokens || !!groupedControlProps.position;
+    const showTokensInline = inlineTokens || isGrouped;
+
+    // When grouped, the dropdown is portaled regardless of the public
+    // `expandToViewport` prop so it escapes the control slot's stacking context
+    // and paints over the group's inline label (which the focus ring stays under).
+    const effectiveExpandToViewport = expandToViewport || isGrouped;
 
     const selfControlId = useUniqueId('trigger');
     const controlId = formFieldContext.controlId ?? selfControlId;
@@ -214,12 +221,12 @@ const InternalMultiselect = React.forwardRef(
                 : undefined
             }
             open={multiselectProps.isOpen}
-            minWidth={getDropdownMinWidth({ expandToViewport, triggerWidth })}
+            minWidth={getDropdownMinWidth({ expandToViewport: effectiveExpandToViewport, triggerWidth })}
             maxWidth={getBreakpointValue('xxs')} // AWSUI-19898
             trigger={trigger}
             header={dropdownHeader}
             footer={dropdownFooter}
-            expandToViewport={expandToViewport}
+            expandToViewport={effectiveExpandToViewport}
             // Forces dropdown position recalculation when new options are loaded
             contentKey={hasOptions.current.toString()}
             content={
diff --git a/src/select/internal.tsx b/src/select/internal.tsx
index 1f26ded16c..945795de6b 100644
--- a/src/select/internal.tsx
+++ b/src/select/internal.tsx
@@ -85,6 +85,11 @@ const InternalSelect = React.forwardRef(
     const formFieldContext = useFormFieldContext(restProps);
     const groupedControlProps = useGroupedControlContext();
 
+    // When grouped, the dropdown is portaled regardless of the public
+    // `expandToViewport` prop so it escapes the control slot's stacking context
+    // and paints over the group's inline label (which the focus ring stays under).
+    const effectiveExpandToViewport = expandToViewport || !!groupedControlProps.position;
+
     const i18n = useInternalI18n('select');
     const errorIconAriaLabel = i18n('errorIconAriaLabel', restProps.errorIconAriaLabel);
     const selectedAriaLabel = i18n('selectedAriaLabel', restProps.selectedAriaLabel);
@@ -292,13 +297,13 @@ const InternalSelect = React.forwardRef(
             }
             open={isOpen}
             stretchTriggerHeight={!!__inFilteringToken}
-            minWidth={getDropdownMinWidth({ expandToViewport, triggerWidth })}
+            minWidth={getDropdownMinWidth({ expandToViewport: effectiveExpandToViewport, triggerWidth })}
             maxWidth={getBreakpointValue('xxs')} // AWSUI-19898
             trigger={trigger}
             header={dropdownHeader}
             onMouseDown={handleMouseDown}
             footer={dropdownFooter}
-            expandToViewport={expandToViewport}
+            expandToViewport={effectiveExpandToViewport}
             // Forces dropdown position recalculation when new options are loaded
             contentKey={hasOptions.current.toString()}
             content={

From 87437b15bdd0ed8ff690e565332771c5b40122ec Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Wed, 7 Oct 2026 07:47:04 +0200
Subject: [PATCH 17/21] test: Assert grouped controls portal their dropdowns

Add a test to the Select, Multiselect, and Autosuggest control-group suites
asserting that a grouped control portals its dropdown even when
expandToViewport is not set (found with expandToViewport, absent inline).
---
 .../__tests__/control-group.test.tsx           | 18 ++++++++++++++++++
 .../__tests__/control-group.test.tsx           | 14 ++++++++++++++
 src/select/__tests__/control-group.test.tsx    | 12 ++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/src/autosuggest/__tests__/control-group.test.tsx b/src/autosuggest/__tests__/control-group.test.tsx
index 709215384d..3a53fbe14b 100644
--- a/src/autosuggest/__tests__/control-group.test.tsx
+++ b/src/autosuggest/__tests__/control-group.test.tsx
@@ -27,4 +27,22 @@ describe('Autosuggest in control group', () => {
 
     expect(getByTestId('probe')).toHaveTextContent('none');
   });
+
+  test('renders the dropdown in a portal even if `expandToViewport` is not set', () => {
+    const { container } = render(
+      <ControlGroup>
+        <Autosuggest
+          value=""
+          onChange={noop}
+          options={[{ value: '1', label: 'One' }]}
+          enteredTextLabel={value => `Use: ${value}`}
+        />
+      </ControlGroup>
+    );
+    const autosuggest = createWrapper(container).findAutosuggest()!;
+    autosuggest.focus();
+
+    expect(autosuggest.findDropdown({ expandToViewport: true }).findOpenDropdown()).not.toBeNull();
+    expect(autosuggest.findDropdown().findOpenDropdown()).toBeNull();
+  });
 });
diff --git a/src/multiselect/__tests__/control-group.test.tsx b/src/multiselect/__tests__/control-group.test.tsx
index 06cff025f7..2bc7c9fb35 100644
--- a/src/multiselect/__tests__/control-group.test.tsx
+++ b/src/multiselect/__tests__/control-group.test.tsx
@@ -42,4 +42,18 @@ describe('Multiselect in control group', () => {
     expect(inlineTokens[0].findLabel().getElement()).toHaveTextContent('One');
     expect(multiselect.findTokens()).toHaveLength(0);
   });
+
+  it('renders the dropdown in a portal even if `expandToViewport` is not set', () => {
+    const { container } = render(
+      <ControlGroup>
+        <Multiselect selectedOptions={[]} options={options} onChange={noop} />
+      </ControlGroup>
+    );
+
+    const multiselect = createWrapper(container).findMultiselect()!;
+    multiselect.openDropdown();
+
+    expect(multiselect.findDropdown({ expandToViewport: true }).findOpenDropdown()).not.toBeNull();
+    expect(multiselect.findDropdown().findOpenDropdown()).toBeNull();
+  });
 });
diff --git a/src/select/__tests__/control-group.test.tsx b/src/select/__tests__/control-group.test.tsx
index c0c03fb4f8..b2467173ec 100644
--- a/src/select/__tests__/control-group.test.tsx
+++ b/src/select/__tests__/control-group.test.tsx
@@ -19,4 +19,16 @@ describe('Select control in control group', () => {
 
     expect(getByTestId('probe')).toHaveTextContent('none');
   });
+
+  test('renders the dropdown in a portal even if `expandToViewport` is not set', () => {
+    const { container } = render(
+      <InternalControlGroup>
+        <Select selectedOption={null} options={[{ value: '1', label: 'One' }]} onChange={() => {}} />
+      </InternalControlGroup>
+    );
+    const select = createWrapper(container).findSelect()!;
+    select.openDropdown();
+    expect(select.findDropdown({ expandToViewport: true }).findOpenDropdown()).not.toBeNull();
+    expect(select.findDropdown().findOpenDropdown()).toBeNull();
+  });
 });

From 1ab5cb27278cf69008a8ef2c3d9ace0b3313964b Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Wed, 7 Oct 2026 08:12:47 +0200
Subject: [PATCH 18/21] Fix duplicated attributes

---
 .../components/control-group/index.tsx        | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/internal/components/control-group/index.tsx b/src/internal/components/control-group/index.tsx
index b16afe54e9..ea7bc2a1ed 100644
--- a/src/internal/components/control-group/index.tsx
+++ b/src/internal/components/control-group/index.tsx
@@ -34,23 +34,16 @@ export default function InternalControlGroup({
   const flattenedChildren = flattenChildren(children, 'ControlGroup');
   const controlCount = flattenedChildren.length;
 
-  const controls = (
-    <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>
-      {flattenedChildren.map((child, index) => {
-        const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;
-        const position: GroupedControlPosition =
-          controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';
-        return (
-          <div
-            key={key ? String(key) : index}
-            className={clsx(styles.control, styles[`control-${position}-${direction}`])}
-          >
-            <GroupedControlContext.Provider value={{ position, direction }}>{child}</GroupedControlContext.Provider>
-          </div>
-        );
-      })}
-    </div>
-  );
+  const controls = flattenedChildren.map((child, index) => {
+    const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;
+    const position: GroupedControlPosition =
+      controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';
+    return (
+      <div key={key ? String(key) : index} className={clsx(styles.control, styles[`control-${position}-${direction}`])}>
+        <GroupedControlContext.Provider value={{ position, direction }}>{child}</GroupedControlContext.Provider>
+      </div>
+    );
+  });
 
   if (inlineLabelText) {
     return (
@@ -59,7 +52,7 @@ export default function InternalControlGroup({
           {inlineLabelText}
         </label>
         <div className={styles['inline-label-trigger-wrapper']}>
-          <div role="group" aria-labelledby={labelId} className={styles.root}>
+          <div role="group" aria-labelledby={labelId} className={clsx(styles.root, styles[`root-${direction}`])}>
             {controls}
           </div>
         </div>
@@ -68,7 +61,7 @@ export default function InternalControlGroup({
   }
 
   return (
-    <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root)}>
+    <div {...baseProps} role="group" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>
       {controls}
     </div>
   );

From 71b46afd5bceccc24c5222575e7ebe2d190c543d Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Wed, 7 Oct 2026 09:24:55 +0200
Subject: [PATCH 19/21] chore: Provide default i18n on control group labels
 page

Wrap the labels dev page in the default I18nProvider via SimplePage i18n={{}}
so the Autosuggest clear button gets its default aria-label instead of
rendering unlabeled.
---
 pages/control-group/labels.page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pages/control-group/labels.page.tsx b/pages/control-group/labels.page.tsx
index 5217ec417d..84117d86f9 100644
--- a/pages/control-group/labels.page.tsx
+++ b/pages/control-group/labels.page.tsx
@@ -37,6 +37,7 @@ export default function ControlGroupLabels() {
       title="Control group labels"
       subtitle="Labels should be displayed above focus rings but below dropdowns."
       settings={<DirectionSettings direction={direction} setDirection={setDirection} />}
+      i18n={{}}
       screenshotArea={{}}
     >
       <FocusTarget />

From 0146db3de41a2512c1198637e20a7fb914ae0242 Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Wed, 7 Oct 2026 11:56:37 +0200
Subject: [PATCH 20/21] test: Add internal control group findInlineLabel test
 util

Add a minimal internal ControlGroupWrapper under test-utils/dom/internal with
a findInlineLabel method, and use it in the control group unit tests to locate
the inline label instead of querying by text.
---
 .../__tests__/control-group.test.tsx             | 15 +++++++++++----
 src/test-utils/dom/internal/control-group.ts     | 16 ++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 src/test-utils/dom/internal/control-group.ts

diff --git a/src/internal/components/control-group/__tests__/control-group.test.tsx b/src/internal/components/control-group/__tests__/control-group.test.tsx
index e94869efd4..4416eb9e3f 100644
--- a/src/internal/components/control-group/__tests__/control-group.test.tsx
+++ b/src/internal/components/control-group/__tests__/control-group.test.tsx
@@ -5,8 +5,14 @@ import { render } from '@testing-library/react';
 
 import ControlGroup from '../../../../../lib/components/internal/components/control-group';
 import { ResetGroupedControlContext } from '../../../../../lib/components/internal/context/control-group-context';
+import ControlGroupWrapper from '../../../../../lib/components/test-utils/dom/internal/control-group';
 import { DirectionProbe, PositionProbe } from './common';
 
+function findControlGroup(container: HTMLElement) {
+  const element = container.querySelector<HTMLElement>(`.${ControlGroupWrapper.rootSelector}`);
+  return element && new ControlGroupWrapper(element);
+}
+
 describe('Control group', () => {
   test('keeps focus on a control when the children are reordered', () => {
     const alpha = <input key="alpha" data-testid="alpha" />;
@@ -107,7 +113,7 @@ describe('Control group', () => {
   });
 
   test('renders the inline label and wires it to the group via aria-labelledby', () => {
-    const { getByRole, getByText } = render(
+    const { container, getByRole } = render(
       <ControlGroup inlineLabelText="Threshold">
         <input data-testid="alpha" />
         <input data-testid="beta" />
@@ -115,14 +121,15 @@ describe('Control group', () => {
     );
 
     const group = getByRole('group');
-    const label = getByText('Threshold');
+    const label = findControlGroup(container)!.findInlineLabel()!.getElement();
 
+    expect(label).toHaveTextContent('Threshold');
     expect(label.id).toBeTruthy();
     expect(group.getAttribute('aria-labelledby')).toBe(label.id);
   });
 
   test('omits the inline label and aria-labelledby when inlineLabelText is not set', () => {
-    const { getByRole, queryByText } = render(
+    const { container, getByRole } = render(
       <ControlGroup>
         <input data-testid="alpha" />
         <input data-testid="beta" />
@@ -130,6 +137,6 @@ describe('Control group', () => {
     );
 
     expect(getByRole('group').getAttribute('aria-labelledby')).toBeNull();
-    expect(queryByText('Threshold')).toBeNull();
+    expect(findControlGroup(container)).toBeNull();
   });
 });
diff --git a/src/test-utils/dom/internal/control-group.ts b/src/test-utils/dom/internal/control-group.ts
new file mode 100644
index 0000000000..29d4e7b935
--- /dev/null
+++ b/src/test-utils/dom/internal/control-group.ts
@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import styles from '../../../internal/components/control-group/styles.selectors.js';
+
+export default class ControlGroupWrapper extends ComponentWrapper {
+  static rootSelector: string = styles['inline-label-wrapper'];
+
+  /**
+   * Returns the visible inline label element, or null if no label is set.
+   */
+  findInlineLabel(): ElementWrapper | null {
+    return this.findByClassName(styles['inline-label']);
+  }
+}

From e495ca6c640301d0a6da20c0eec5fdae1b80659a Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Wed, 7 Oct 2026 14:01:20 +0200
Subject: [PATCH 21/21] Update selector snapshots

---
 .../__snapshots__/test-utils-selectors.test.tsx.snap            | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index e301c3b8b9..7f63f4f3fe 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -420,6 +420,8 @@ exports[`test-utils selectors 1`] = `
     "awsui_header_dgs8z",
     "awsui_highlighted_15o6u",
     "awsui_icon_x6dl3",
+    "awsui_inline-label-wrapper_o08jm",
+    "awsui_inline-label_o08jm",
     "awsui_inner-list-item_10ipo",
     "awsui_key_10ipo",
     "awsui_label-tag_1p2cx",