diff --git a/showcase/app/components/mock/components/form/super-select/generic-content.gts b/showcase/app/components/mock/components/form/super-select/generic-content.gts
deleted file mode 100644
index ea6c61384f5..00000000000
--- a/showcase/app/components/mock/components/form/super-select/generic-content.gts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-import StyleModifier from 'ember-style-modifier';
-
-import ShwPlaceholder from 'showcase/components/shw/placeholder';
-import type { ShwPlaceholderSignature } from 'showcase/components/shw/placeholder';
-
-export interface MockFormSuperSelectGenericContentSignature {
-  Element: ShwPlaceholderSignature['Element'];
-}
-
-// This is not an HDS component, but a supporting file for `form/super-select.hbs` which requires a component to be passed in for the showcase
-const MockFormSuperSelectGenericContent: TemplateOnlyComponent<MockFormSuperSelectGenericContentSignature> =
-  <template>
-    <ShwPlaceholder
-      @text="placeholder"
-      {{StyleModifier textShadow="0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff"}}
-      @background="hsla(0, 100%, 92%, 1)"
-      @height="40px"
-    />
-  </template>;
-
-export default MockFormSuperSelectGenericContent;
diff --git a/showcase/app/components/mock/components/form/super-select/selected-component-multiple.gts b/showcase/app/components/mock/components/form/super-select/selected-component-multiple.gts
deleted file mode 100644
index 1572fd4d0e1..00000000000
--- a/showcase/app/components/mock/components/form/super-select/selected-component-multiple.gts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-
-export interface MockFormSuperSelectSelectedComponentMultipleSignature {
-  Args: {
-    option: {
-      size: string;
-    };
-  };
-  Element: HTMLSpanElement;
-}
-
-// This is not an HDS component, but a supporting file for `form/super-select.hbs` which requires a component to be passed in for the showcase
-
-const MockFormSuperSelectSelectedComponentMultiple: TemplateOnlyComponent<MockFormSuperSelectSelectedComponentMultipleSignature> =
-  <template>
-    <span>
-      {{@option.size}}
-    </span>
-  </template>;
-
-export default MockFormSuperSelectSelectedComponentMultiple;
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-base-element.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-base-element.gts
new file mode 100644
index 00000000000..09be8679270
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-base-element.gts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
+
+import CodeFragmentWithOptionsGenericContent from 'showcase/components/page-components/form/super-select/code-fragments/with-options-generic-content';
+
+import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectMultipleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+const PLACES_OPTIONS = [
+  'Oregon (us-west-2)',
+  'N. Virginia (us-east-1)',
+  'ALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenString',
+  'Ireland (eu-west-1)',
+  'London(eu-west-2)',
+  'Frankfurt (eu-central-1)',
+];
+
+export interface CodeFragmentWithMultipleBaseElementSignature {
+  Args: {
+    options?: 'basic' | 'places';
+    isSelected?: boolean;
+    hasBeforeOptionsComponent?: boolean;
+    hasAfterOptionsComponent?: boolean;
+    hasResultCountMessage?: boolean;
+    placeholder?: HdsFormSuperSelectMultipleBaseSignature['Args']['placeholder'];
+    disabled?: HdsFormSuperSelectMultipleBaseSignature['Args']['disabled'];
+    isInvalid?: HdsFormSuperSelectMultipleBaseSignature['Args']['isInvalid'];
+    matchTriggerWidth?: HdsFormSuperSelectMultipleBaseSignature['Args']['matchTriggerWidth'];
+    initiallyOpened?: HdsFormSuperSelectMultipleBaseSignature['Args']['initiallyOpened'];
+    verticalPosition?: HdsFormSuperSelectMultipleBaseSignature['Args']['verticalPosition'];
+    horizontalPosition?: HdsFormSuperSelectMultipleBaseSignature['Args']['horizontalPosition'];
+    searchEnabled?: HdsFormSuperSelectMultipleBaseSignature['Args']['searchEnabled'];
+    dropdownMaxWidth?: HdsFormSuperSelectMultipleBaseSignature['Args']['dropdownMaxWidth'];
+    showAfterOptions?: HdsFormSuperSelectMultipleBaseSignature['Args']['showAfterOptions'];
+    afterOptionsContent?: HdsFormSuperSelectMultipleBaseSignature['Args']['afterOptionsContent'];
+  };
+  Element: HdsFormSuperSelectMultipleBaseSignature['Element'];
+}
+
+export default class CodeFragmentWithMultipleBaseElement extends Component<CodeFragmentWithMultipleBaseElementSignature> {
+  @tracked selectedOptions;
+
+  options = OPTIONS;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithMultipleBaseElementSignature['Args'],
+  ) {
+    super(owner, args);
+    if (args.isSelected) {
+      this.selectedOptions =
+        args.options === 'places'
+          ? [PLACES_OPTIONS[0], PLACES_OPTIONS[1]]
+          : [OPTIONS[0], OPTIONS[1]];
+    }
+    if (args.options === 'places') {
+      this.options = PLACES_OPTIONS;
+    }
+  }
+
+  get resultCountMessage() {
+    return `Custom result count: ${this.options.length} options`;
+  }
+
+  <template>
+    <HdsFormSuperSelectMultipleBase
+      @onChange={{fn (mut this.selectedOptions)}}
+      @options={{this.options}}
+      @selected={{this.selectedOptions}}
+      @beforeOptionsComponent={{if
+        @hasBeforeOptionsComponent
+        CodeFragmentWithOptionsGenericContent
+      }}
+      @afterOptionsComponent={{if
+        @hasAfterOptionsComponent
+        CodeFragmentWithOptionsGenericContent
+      }}
+      @placeholder={{@placeholder}}
+      @disabled={{@disabled}}
+      @isInvalid={{@isInvalid}}
+      @matchTriggerWidth={{@matchTriggerWidth}}
+      @initiallyOpened={{@initiallyOpened}}
+      @verticalPosition={{@verticalPosition}}
+      @horizontalPosition={{@horizontalPosition}}
+      @searchEnabled={{@searchEnabled}}
+      @dropdownMaxWidth={{@dropdownMaxWidth}}
+      @showAfterOptions={{@showAfterOptions}}
+      @afterOptionsContent={{@afterOptionsContent}}
+      @resultCountMessage={{if @hasResultCountMessage this.resultCountMessage}}
+      @ariaLabel="Label"
+      ...attributes
+      as |option|
+    >
+      {{option}}
+    </HdsFormSuperSelectMultipleBase>
+  </template>
+}
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-field-element.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-field-element.gts
new file mode 100644
index 00000000000..4337b7d8d5f
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-multiple-field-element.gts
@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn, hash } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { eq } from 'ember-truth-helpers';
+import type Owner from '@ember/owner';
+
+import CodeFragmentWithSelectedComponent from 'showcase/components/page-components/form/super-select/code-fragments/with-selected-component';
+
+import { HdsFormSuperSelectMultipleField } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectMultipleFieldSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/field';
+
+interface GroupedOption {
+  groupName: string;
+  options: (string | GroupedOption)[];
+}
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+const CLUSTER_SIZE_OPTIONS = [
+  {
+    size: 'Extra Small',
+    description: '2 vCPU | 1 GiB RAM',
+    price: '$0.02',
+  },
+  {
+    size: 'Small',
+    description: '2 vCPU | 2 GiB RAM',
+    price: '$0.04',
+    disabled: true,
+  },
+  {
+    size: 'Medium',
+    description: '4 vCPU | 4 GiB RAM',
+    price: '$0.08',
+    disabled: true,
+  },
+  { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
+  {
+    size: 'Extra Large',
+    description: '16 vCPU | 16 GiB RAM',
+    price: '$0.32',
+  },
+];
+
+const GROUPED_OPTIONS = [
+  { groupName: 'Group', options: ['Option 1', 'Option 2'] },
+  { groupName: 'Group', options: ['Option 3', 'Option 4'] },
+  {
+    groupName: 'Group',
+    options: [
+      { groupName: 'Subgroup', options: ['Option 5', 'Option 6'] },
+      { groupName: 'Subgroup', options: ['Option 7', 'Option 8'] },
+    ],
+  },
+  {
+    groupName: 'Group',
+    options: [
+      { groupName: 'Subgroup', options: ['Option 10', 'Option 11'] },
+      { groupName: 'Subgroup', options: ['Option 12', 'Option 13'] },
+    ],
+  },
+];
+
+export interface CodeFragmentWithMultipleFieldElementSignature {
+  Args: {
+    options?: 'basic' | 'cluster-size' | 'grouped';
+    isSelected?: boolean;
+    hasSelectedItemComponent?: boolean;
+    hasRichContent?: boolean;
+    isInvalid?: HdsFormSuperSelectMultipleFieldSignature['Args']['isInvalid'];
+    isRequired?: HdsFormSuperSelectMultipleFieldSignature['Args']['isRequired'];
+    isOptional?: HdsFormSuperSelectMultipleFieldSignature['Args']['isOptional'];
+    disabled?: HdsFormSuperSelectMultipleFieldSignature['Args']['disabled'];
+    initiallyOpened?: HdsFormSuperSelectMultipleFieldSignature['Args']['initiallyOpened'];
+    verticalPosition?: HdsFormSuperSelectMultipleFieldSignature['Args']['verticalPosition'];
+    horizontalPosition?: HdsFormSuperSelectMultipleFieldSignature['Args']['horizontalPosition'];
+  };
+  Blocks: {
+    default: [
+      {
+        Label?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Label'];
+        HelperText?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['HelperText'];
+        Error?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Error'];
+        Options?: HdsFormSuperSelectMultipleFieldSignature['Blocks']['default'][0]['Options'];
+        options?: unknown;
+      },
+    ];
+  };
+}
+
+export default class CodeFragmentWithMultipleFieldElement extends Component<CodeFragmentWithMultipleFieldElementSignature> {
+  @tracked selectedOptions;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithMultipleFieldElementSignature['Args'],
+  ) {
+    super(owner, args);
+    if (args.isSelected) {
+      if (args.options === 'grouped') {
+        this.selectedOptions = [
+          (this.options as GroupedOption[])[0]?.options[0] as
+            | GroupedOption
+            | string,
+          (this.options as GroupedOption[])[1]?.options[0] as
+            | GroupedOption
+            | string,
+        ];
+      } else {
+        this.selectedOptions = [this.options[0], this.options[1]];
+      }
+    }
+  }
+
+  get options() {
+    const { options } = this.args;
+
+    if (options === 'cluster-size') {
+      return CLUSTER_SIZE_OPTIONS;
+    } else if (options === 'grouped') {
+      return GROUPED_OPTIONS;
+    } else {
+      return OPTIONS;
+    }
+  }
+
+  <template>
+    <HdsFormSuperSelectMultipleField
+      @onChange={{fn (mut this.selectedOptions)}}
+      @options={{this.options}}
+      @selected={{this.selectedOptions}}
+      @selectedItemComponent={{if
+        @hasSelectedItemComponent
+        CodeFragmentWithSelectedComponent
+      }}
+      @isInvalid={{@isInvalid}}
+      @isRequired={{@isRequired}}
+      @isOptional={{@isOptional}}
+      @disabled={{@disabled}}
+      @initiallyOpened={{@initiallyOpened}}
+      @verticalPosition={{@verticalPosition}}
+      @horizontalPosition={{@horizontalPosition}}
+      as |F|
+    >
+      {{#if (eq @options "grouped")}}
+        {{yield
+          (hash
+            Label=F.Label
+            HelperText=F.HelperText
+            Error=F.Error
+            Options=F.Options
+          )
+        }}
+      {{else}}
+        {{yield
+          (hash
+            Label=F.Label
+            HelperText=F.HelperText
+            Error=F.Error
+            Options=F.Options
+            options=F.options
+          )
+        }}
+      {{/if}}
+      {{#unless @hasRichContent}}
+        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+        {{F.options}}
+      {{/unless}}
+    </HdsFormSuperSelectMultipleField>
+  </template>
+}
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-options-generic-content.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-options-generic-content.gts
new file mode 100644
index 00000000000..4302550afc8
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-options-generic-content.gts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+
+const CodeFragmentWithOptionsGenericContent: TemplateOnlyComponent = <template>
+  <ShwPlaceholder
+    @text="placeholder"
+    {{style textShadow="0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff"}}
+    @background="hsla(0, 100%, 92%, 1)"
+    @height="40px"
+  />
+</template>;
+
+export default CodeFragmentWithOptionsGenericContent;
diff --git a/showcase/app/components/mock/components/form/super-select/selected-component-single.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-selected-component.gts
similarity index 51%
rename from showcase/app/components/mock/components/form/super-select/selected-component-single.gts
rename to showcase/app/components/page-components/form/super-select/code-fragments/with-selected-component.gts
index 8c55875d63b..04559d9f3d5 100644
--- a/showcase/app/components/mock/components/form/super-select/selected-component-single.gts
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-selected-component.gts
@@ -2,12 +2,11 @@
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: MPL-2.0
  */
-
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
 import { HdsTextBody } from '@hashicorp/design-system-components/components';
 
-export interface MockFormSuperSelectSelectedComponentSingleSignature {
+export interface CodeFragmentWithSelectedComponentSignature {
   Args: {
     option: {
       size: string;
@@ -16,10 +15,9 @@ export interface MockFormSuperSelectSelectedComponentSingleSignature {
   Element: HTMLSpanElement;
 }
 
-// This is not an HDS component, but a supporting file for `form/super-select.hbs` which requires a component to be passed in for the showcase
-const MockFormSuperSelectSelectedComponentSingle: TemplateOnlyComponent<MockFormSuperSelectSelectedComponentSingleSignature> =
+const CodeFragmentWithSelectedComponent: TemplateOnlyComponent<CodeFragmentWithSelectedComponentSignature> =
   <template>
     <HdsTextBody @tag="span" @size="200">{{@option.size}}</HdsTextBody>
   </template>;
 
-export default MockFormSuperSelectSelectedComponentSingle;
+export default CodeFragmentWithSelectedComponent;
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-single-base-element.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-single-base-element.gts
new file mode 100644
index 00000000000..9f9159e1ac7
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-single-base-element.gts
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
+
+import CodeFragmentWithOptionsGenericContent from 'showcase/components/page-components/form/super-select/code-fragments/with-options-generic-content';
+
+import { HdsFormSuperSelectSingleBase } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectSingleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/single/base';
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+const PLACES_OPTIONS = [
+  'Oregon (us-west-2)',
+  'N. Virginia (us-east-1)',
+  'ALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenString',
+  'Ireland (eu-west-1)',
+  'London(eu-west-2)',
+  'Frankfurt (eu-central-1)',
+];
+
+export interface CodeFragmentWithSingleBaseElementSignature {
+  Args: {
+    options?: 'basic' | 'places';
+    isSelected?: boolean;
+    hasBeforeOptionsComponent?: boolean;
+    hasAfterOptionsComponent?: boolean;
+    hasResultCountMessage?: boolean;
+    placeholder?: HdsFormSuperSelectSingleBaseSignature['Args']['placeholder'];
+    disabled?: HdsFormSuperSelectSingleBaseSignature['Args']['disabled'];
+    isInvalid?: HdsFormSuperSelectSingleBaseSignature['Args']['isInvalid'];
+    matchTriggerWidth?: HdsFormSuperSelectSingleBaseSignature['Args']['matchTriggerWidth'];
+    initiallyOpened?: HdsFormSuperSelectSingleBaseSignature['Args']['initiallyOpened'];
+    verticalPosition?: HdsFormSuperSelectSingleBaseSignature['Args']['verticalPosition'];
+    horizontalPosition?: HdsFormSuperSelectSingleBaseSignature['Args']['horizontalPosition'];
+    searchEnabled?: HdsFormSuperSelectSingleBaseSignature['Args']['searchEnabled'];
+    dropdownMaxWidth?: HdsFormSuperSelectSingleBaseSignature['Args']['dropdownMaxWidth'];
+    showAfterOptions?: HdsFormSuperSelectSingleBaseSignature['Args']['showAfterOptions'];
+    afterOptionsContent?: HdsFormSuperSelectSingleBaseSignature['Args']['afterOptionsContent'];
+  };
+  Element: HdsFormSuperSelectSingleBaseSignature['Element'];
+}
+
+export default class CodeFragmentWithSingleBaseElement extends Component<CodeFragmentWithSingleBaseElementSignature> {
+  @tracked selectedOption;
+
+  options = OPTIONS;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithSingleBaseElementSignature['Args'],
+  ) {
+    super(owner, args);
+    if (args.isSelected) {
+      this.selectedOption =
+        args.options === 'places' ? PLACES_OPTIONS[0] : OPTIONS[0];
+    }
+    if (args.options === 'places') {
+      this.options = PLACES_OPTIONS;
+    }
+  }
+
+  get resultCountMessage() {
+    return `Custom result count: ${this.options.length} options`;
+  }
+
+  <template>
+    <HdsFormSuperSelectSingleBase
+      @onChange={{fn (mut this.selectedOption)}}
+      @options={{this.options}}
+      @selected={{this.selectedOption}}
+      @beforeOptionsComponent={{if
+        @hasBeforeOptionsComponent
+        CodeFragmentWithOptionsGenericContent
+      }}
+      @afterOptionsComponent={{if
+        @hasAfterOptionsComponent
+        CodeFragmentWithOptionsGenericContent
+      }}
+      @placeholder={{@placeholder}}
+      @disabled={{@disabled}}
+      @isInvalid={{@isInvalid}}
+      @matchTriggerWidth={{@matchTriggerWidth}}
+      @initiallyOpened={{@initiallyOpened}}
+      @verticalPosition={{@verticalPosition}}
+      @horizontalPosition={{@horizontalPosition}}
+      @searchEnabled={{@searchEnabled}}
+      @dropdownMaxWidth={{@dropdownMaxWidth}}
+      @showAfterOptions={{@showAfterOptions}}
+      @afterOptionsContent={{@afterOptionsContent}}
+      @resultCountMessage={{if @hasResultCountMessage this.resultCountMessage}}
+      @ariaLabel="Label"
+      ...attributes
+      as |option|
+    >
+      {{option}}
+    </HdsFormSuperSelectSingleBase>
+  </template>
+}
diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-single-field-element.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-single-field-element.gts
new file mode 100644
index 00000000000..3d933c2bbcc
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-single-field-element.gts
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn, hash } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { eq } from 'ember-truth-helpers';
+import type Owner from '@ember/owner';
+
+import CodeFragmentWithSelectedComponent from 'showcase/components/page-components/form/super-select/code-fragments/with-selected-component';
+
+import { HdsFormSuperSelectSingleField } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectSingleFieldSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/single/field';
+
+interface GroupedOption {
+  groupName: string;
+  options: (string | GroupedOption)[];
+}
+
+const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+
+const CLUSTER_SIZE_OPTIONS = [
+  {
+    size: 'Extra Small',
+    description: '2 vCPU | 1 GiB RAM',
+    price: '$0.02',
+  },
+  {
+    size: 'Small',
+    description: '2 vCPU | 2 GiB RAM',
+    price: '$0.04',
+    disabled: true,
+  },
+  {
+    size: 'Medium',
+    description: '4 vCPU | 4 GiB RAM',
+    price: '$0.08',
+    disabled: true,
+  },
+  { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
+  {
+    size: 'Extra Large',
+    description: '16 vCPU | 16 GiB RAM',
+    price: '$0.32',
+  },
+];
+
+const GROUPED_OPTIONS = [
+  { groupName: 'Group', options: ['Option 1', 'Option 2'] },
+  { groupName: 'Group', options: ['Option 3', 'Option 4'] },
+  {
+    groupName: 'Group',
+    options: [
+      { groupName: 'Subgroup', options: ['Option 5', 'Option 6'] },
+      { groupName: 'Subgroup', options: ['Option 7', 'Option 8'] },
+    ],
+  },
+  {
+    groupName: 'Group',
+    options: [
+      { groupName: 'Subgroup', options: ['Option 10', 'Option 11'] },
+      { groupName: 'Subgroup', options: ['Option 12', 'Option 13'] },
+    ],
+  },
+];
+
+export interface CodeFragmentWithSingleFieldElementSignature {
+  Args: {
+    options?: 'basic' | 'cluster-size' | 'grouped';
+    isSelected?: boolean;
+    hasSelectedItemComponent?: boolean;
+    hasRichContent?: boolean;
+    isInvalid?: HdsFormSuperSelectSingleFieldSignature['Args']['isInvalid'];
+    isRequired?: HdsFormSuperSelectSingleFieldSignature['Args']['isRequired'];
+    isOptional?: HdsFormSuperSelectSingleFieldSignature['Args']['isOptional'];
+    disabled?: HdsFormSuperSelectSingleFieldSignature['Args']['disabled'];
+    initiallyOpened?: HdsFormSuperSelectSingleFieldSignature['Args']['initiallyOpened'];
+    verticalPosition?: HdsFormSuperSelectSingleFieldSignature['Args']['verticalPosition'];
+    horizontalPosition?: HdsFormSuperSelectSingleFieldSignature['Args']['horizontalPosition'];
+  };
+  Blocks: {
+    default: [
+      {
+        Label?: HdsFormSuperSelectSingleFieldSignature['Blocks']['default'][0]['Label'];
+        HelperText?: HdsFormSuperSelectSingleFieldSignature['Blocks']['default'][0]['HelperText'];
+        Error?: HdsFormSuperSelectSingleFieldSignature['Blocks']['default'][0]['Error'];
+        Options?: HdsFormSuperSelectSingleFieldSignature['Blocks']['default'][0]['Options'];
+        options?: unknown;
+      },
+    ];
+  };
+}
+
+export default class CodeFragmentWithSingleFieldElement extends Component<CodeFragmentWithSingleFieldElementSignature> {
+  @tracked selectedOption;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithSingleFieldElementSignature['Args'],
+  ) {
+    super(owner, args);
+    if (args.isSelected) {
+      if (args.options === 'grouped') {
+        this.selectedOption = (this.options as GroupedOption[])[0]
+          ?.options[0] as string | GroupedOption;
+      } else {
+        this.selectedOption = this.options[0];
+      }
+    }
+  }
+
+  get options() {
+    const { options } = this.args;
+
+    if (options === 'cluster-size') {
+      return CLUSTER_SIZE_OPTIONS;
+    } else if (options === 'grouped') {
+      return GROUPED_OPTIONS;
+    } else {
+      return OPTIONS;
+    }
+  }
+
+  <template>
+    <HdsFormSuperSelectSingleField
+      @onChange={{fn (mut this.selectedOption)}}
+      @options={{this.options}}
+      @selected={{this.selectedOption}}
+      @selectedItemComponent={{if
+        @hasSelectedItemComponent
+        CodeFragmentWithSelectedComponent
+      }}
+      @isInvalid={{@isInvalid}}
+      @isRequired={{@isRequired}}
+      @isOptional={{@isOptional}}
+      @disabled={{@disabled}}
+      @initiallyOpened={{@initiallyOpened}}
+      @verticalPosition={{@verticalPosition}}
+      @horizontalPosition={{@horizontalPosition}}
+      as |F|
+    >
+      {{#if (eq @options "grouped")}}
+        {{yield
+          (hash
+            Label=F.Label
+            HelperText=F.HelperText
+            Error=F.Error
+            Options=F.Options
+          )
+        }}
+      {{else}}
+        {{yield
+          (hash
+            Label=F.Label
+            HelperText=F.HelperText
+            Error=F.Error
+            Options=F.Options
+            options=F.options
+          )
+        }}
+      {{/if}}
+      {{#unless @hasRichContent}}
+        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+        {{F.options}}
+      {{/unless}}
+    </HdsFormSuperSelectSingleField>
+  </template>
+}
diff --git a/showcase/app/components/page-components/form/super-select/index.gts b/showcase/app/components/page-components/form/super-select/index.gts
new file mode 100644
index 00000000000..b7c59eef204
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/index.gts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+
+import BasicDropdownWormhole from 'ember-basic-dropdown/components/basic-dropdown-wormhole';
+
+import SubSectionAfterOptions from 'showcase/components/page-components/form/super-select/sub-sections/after-options';
+import SubSectionBaseElements from 'showcase/components/page-components/form/super-select/sub-sections/base-elements';
+import SubSectionMultipleBaseElement from 'showcase/components/page-components/form/super-select/sub-sections/multiple-base-element';
+import SubSectionMultipleFieldElement from 'showcase/components/page-components/form/super-select/sub-sections/multiple-field-element';
+import SubSectionOptionGroup from 'showcase/components/page-components/form/super-select/sub-sections/option-group';
+import SubSectionSingleBaseElement from 'showcase/components/page-components/form/super-select/sub-sections/single-base-element';
+import SubSectionSingleFieldElement from 'showcase/components/page-components/form/super-select/sub-sections/single-field-element';
+
+const FormSuperSelectIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "SuperSelect Component"}}
+
+  <BasicDropdownWormhole />
+
+  <ShwTextH1>SuperSelect</ShwTextH1>
+
+  <section data-test-percy>
+    <SubSectionSingleBaseElement />
+    <SubSectionSingleFieldElement />
+    <SubSectionMultipleBaseElement />
+    <SubSectionMultipleFieldElement />
+    <SubSectionBaseElements />
+    <SubSectionOptionGroup />
+    <SubSectionAfterOptions />
+  </section>
+</template>;
+
+export default FormSuperSelectIndex;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/after-options.gts b/showcase/app/components/page-components/form/super-select/sub-sections/after-options.gts
new file mode 100644
index 00000000000..768802b854c
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/after-options.gts
@@ -0,0 +1,192 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+import { hash } from '@ember/helper';
+
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwOutliner from 'showcase/components/shw/outliner';
+import NOOP from 'showcase/utils/noop';
+
+import {
+  HdsFormSuperSelectAfterOptions,
+  HdsFormSuperSelectOptionGroup,
+} from '@hashicorp/design-system-components/components';
+
+const SubSectionAfterOptions: TemplateOnlyComponent = <template>
+  <ShwTextH3>FormSuperSelectAfterOptions</ShwTextH3>
+
+  <ShwTextH3>Content</ShwTextH3>
+
+  <ShwFlex as |SF|>
+    <SF.Item @label="No text arguments">
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @clearSelected={{NOOP}}
+          @showSelected={{NOOP}}
+          @showAll={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwFlex as |SF|>
+    <SF.Item @label="with @showNoSelectedMessage=true">
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @showNoSelectedMessage={{true}}
+          @clearSelected={{NOOP}}
+          @showSelected={{NOOP}}
+          @showAll={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwFlex @direction="column" as |SF|>
+    <SF.Item @label="with @content (text)" {{style max-width="500px"}}>
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @content="Lorem ipsum dolor"
+          @clearSelected={{NOOP}}
+          @showAll={{NOOP}}
+          @showSelected={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item @label="with @content with long test" {{style max-width="500px"}}>
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @content="This is the a very very very very very very long text that should wrap on multiple lines"
+          @clearSelected={{NOOP}}
+          @showAll={{NOOP}}
+          @showSelected={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item
+      @label="with @showAll & @selectedCount=0"
+      {{style max-width="500px"}}
+    >
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @showAll={{NOOP}}
+          @showOnlySelected={{true}}
+          @selectedCount="0"
+          @resultCountMessage="This is the resultCountMessage"
+          @clearSelected={{NOOP}}
+          @showSelected={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item
+      @label="with @showAll & @selectedCount>0"
+      {{style max-width="500px"}}
+    >
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @showAll={{NOOP}}
+          @showOnlySelected={{true}}
+          @selectedCount="123"
+          @clearSelected={{NOOP}}
+          @resultCountMessage="This is the resultCountMessage"
+          @showSelected={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item
+      @label="with @showSelected & @selectedCount=0"
+      {{style max-width="500px"}}
+    >
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @showSelected={{NOOP}}
+          @selectedCount="0"
+          @resultCountMessage="This is the resultCountMessage"
+          @clearSelected={{NOOP}}
+          @showAll={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item
+      @label="with @showSelected & @selectedCount>0"
+      {{style max-width="500px"}}
+    >
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @showSelected={{NOOP}}
+          @selectedCount="123"
+          @clearSelected={{NOOP}}
+          @resultCountMessage="This is the resultCountMessage"
+          @showAll={{NOOP}}
+        />
+      </ShwOutliner>
+    </SF.Item>
+    <SF.Item
+      @label="with @resultCountMessage with long text"
+      {{style max-width="500px"}}
+    >
+      <ShwOutliner>
+        <HdsFormSuperSelectAfterOptions
+          @showNoSelectedMessage={{true}}
+          @showAll={{NOOP}}
+          @showSelected={{NOOP}}
+          @clearSelected={{NOOP}}
+          @selectedCount="123"
+          @resultCountMessage="This is the a very very very long text that should wrap on multiple lines"
+        />
+      </ShwOutliner>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>Within a dropdown with options</ShwTextH4>
+
+  <ShwFlex as |SF|>
+    <SF.Item @label="Single level">
+      <div class="hds-form-super-select hds-form-super-select-multiple">
+        <div class="ember-basic-dropdown">
+          <div
+            class="ember-basic-dropdown-content ember-power-select-dropdown"
+            {{style position="static"}}
+          >
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+              {{style max-height="none"}}
+            >
+              <HdsFormSuperSelectOptionGroup
+                @group={{hash groupName="Lorem ipsum dolor"}}
+              >
+                {{! template-lint-disable require-context-role }}
+                <li
+                  class="ember-power-select-option"
+                  role="option"
+                  aria-selected="true"
+                >
+                  Option 1
+                </li>
+                <li class="ember-power-select-option" role="option">
+                  Option 2
+                </li>
+              </HdsFormSuperSelectOptionGroup>
+            </ul>
+            <HdsFormSuperSelectAfterOptions
+              @showAll={{NOOP}}
+              @showSelected={{NOOP}}
+              @clearSelected={{NOOP}}
+              @selectedCount="123"
+              @resultCountMessage="1 selected of 2 total"
+            />
+          </div>
+        </div>
+      </div>
+    </SF.Item>
+  </ShwFlex>
+</template>;
+
+export default SubSectionAfterOptions;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/base-elements.gts b/showcase/app/components/page-components/form/super-select/sub-sections/base-elements.gts
new file mode 100644
index 00000000000..3e42fe19bc3
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/base-elements.gts
@@ -0,0 +1,266 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { capitalize } from '@ember/string';
+import style from 'ember-style-modifier';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwOutliner from 'showcase/components/shw/outliner';
+
+const STATES = ['default', 'hover', 'focus'];
+const OPTIONS_STATES = ['default', 'hover', 'active'];
+
+const SubSectionBaseElements: TemplateOnlyComponent = <template>
+  <ShwTextH2>Base elements</ShwTextH2>
+
+  <ShwTextH3>Trigger</ShwTextH3>
+
+  <ShwFlex as |SF|>
+    {{#each STATES as |state|}}
+      <SF.Item @label={{capitalize state}}>
+        <div class="hds-form-super-select">
+          <div class="ember-basic-dropdown">
+            <div class="ember-power-select-trigger" mock-state-value={{state}}>
+              <span class="ember-power-select-selected-item">
+                <span
+                  class="hds-text hds-typography-body-200 hds-font-weight-regular"
+                >Option</span>
+              </span>
+              <span class="ember-power-select-status-icon"></span>
+            </div>
+          </div>
+        </div>
+      </SF.Item>
+    {{/each}}
+  </ShwFlex>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Dropdown</ShwTextH3>
+
+  <ShwTextH4>Search input</ShwTextH4>
+
+  <ShwFlex as |SF|>
+    {{#each STATES as |state|}}
+      <SF.Item @label={{capitalize state}}>
+        <div class="hds-form-super-select">
+          <div class="ember-basic-dropdown">
+            <ShwOutliner>
+              <div class="ember-power-select-search">
+                <input
+                  class="ember-power-select-search-input"
+                  type="search"
+                  placeholder="Search"
+                  aria-label="Search input"
+                  mock-state-value={{state}}
+                />
+              </div>
+            </ShwOutliner>
+          </div>
+        </div>
+      </SF.Item>
+    {{/each}}
+  </ShwFlex>
+
+  <ShwTextH4>Options (single selection)</ShwTextH4>
+
+  <ShwFlex as |SG|>
+    <SG.Item @label="Default">
+      <div class="hds-form-super-select hds-form-super-select-single">
+        <div class="ember-basic-dropdown">
+          <div class="ember-basic-dropdown-content" {{style position="static"}}>
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+            >
+              {{! there is no focused state for the select-option }}
+              {{#each OPTIONS_STATES as |state|}}
+                <li
+                  class="ember-power-select-option"
+                  role="option"
+                  mock-state-value={{state}}
+                >
+                  {{state}}
+                </li>
+              {{/each}}
+              <li
+                class="ember-power-select-option"
+                role="option"
+                aria-disabled="true"
+              >
+                disabled
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SG.Item>
+    <SG.Item @label="Selected">
+      <div class="hds-form-super-select hds-form-super-select-single">
+        <div class="ember-basic-dropdown">
+          <div class="ember-basic-dropdown-content" {{style position="static"}}>
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+            >
+              {{! there is no focused state for the select-option }}
+              {{#each OPTIONS_STATES as |state|}}
+                <li
+                  class="ember-power-select-option"
+                  aria-selected="true"
+                  role="option"
+                  mock-state-value={{state}}
+                >
+                  {{state}}
+                </li>
+              {{/each}}
+              <li
+                class="ember-power-select-option"
+                role="option"
+                aria-selected="true"
+                aria-disabled="true"
+              >
+                disabled
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SG.Item>
+    <SG.Item @label="With very long text" {{style width="200px"}}>
+      <div class="hds-form-super-select hds-form-super-select-single">
+        <div class="ember-basic-dropdown">
+          <div class="ember-basic-dropdown-content" {{style position="static"}}>
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+              {{style max-height="none"}}
+            >
+              {{! there is no focused state for the select-option }}
+              {{#each OPTIONS_STATES as |state|}}
+                <li
+                  class="ember-power-select-option"
+                  aria-selected="true"
+                  role="option"
+                  mock-state-value={{state}}
+                >
+                  {{state}}
+                  - this is a long text that should wrap on multiple lines
+                </li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SG.Item>
+  </ShwFlex>
+
+  <ShwTextH4>Options (multiple selection)</ShwTextH4>
+
+  <ShwFlex as |SG|>
+    <SG.Item @label="Default">
+      <div class="hds-form-super-select hds-form-super-select-multiple">
+        <div class="ember-basic-dropdown">
+          <div class="ember-basic-dropdown-content" {{style position="static"}}>
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+            >
+              {{! there is no focused state for the select-option }}
+              {{#each OPTIONS_STATES as |state|}}
+                <li
+                  class="ember-power-select-option"
+                  role="option"
+                  mock-state-value={{state}}
+                >
+                  {{state}}
+                </li>
+              {{/each}}
+              <li
+                class="ember-power-select-option"
+                role="option"
+                aria-disabled="true"
+              >
+                disabled
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SG.Item>
+    <SG.Item @label="Selected">
+      <div class="hds-form-super-select hds-form-super-select-multiple">
+        <div class="ember-basic-dropdown">
+          <div class="ember-basic-dropdown-content" {{style position="static"}}>
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+            >
+              {{! there is no focused state for the select-option }}
+              {{#each OPTIONS_STATES as |state|}}
+                <li
+                  class="ember-power-select-option"
+                  role="option"
+                  aria-selected="true"
+                  mock-state-value={{state}}
+                >
+                  {{state}}
+                </li>
+              {{/each}}
+              <li
+                class="ember-power-select-option"
+                role="option"
+                aria-selected="true"
+                aria-disabled="true"
+              >
+                disabled
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SG.Item>
+    <SG.Item @label="With very long text" {{style width="200px"}}>
+      <div class="hds-form-super-select hds-form-super-select-multiple">
+        <div class="ember-basic-dropdown">
+          <div class="ember-basic-dropdown-content" {{style position="static"}}>
+            <ul
+              class="ember-power-select-options"
+              role="listbox"
+              aria-label="Label"
+              {{style max-height="none"}}
+            >
+              {{! there is no focused state for the select-option }}
+              {{#each OPTIONS_STATES as |state|}}
+                <li
+                  class="ember-power-select-option"
+                  aria-selected="true"
+                  role="option"
+                  mock-state-value={{state}}
+                >
+                  {{state}}
+                  - this is a long text that should wrap on multiple lines
+                </li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </SG.Item>
+  </ShwFlex>
+
+  <ShwDivider @level={{2}} />
+</template>;
+
+export default SubSectionBaseElements;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/multiple-base-element.gts b/showcase/app/components/page-components/form/super-select/sub-sections/multiple-base-element.gts
new file mode 100644
index 00000000000..b558e8aa03f
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/multiple-base-element.gts
@@ -0,0 +1,263 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+import { capitalize } from '@ember/string';
+import { eq, and } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import CodeFragmentWithMultipleBaseElement from 'showcase/components/page-components/form/super-select/code-fragments/with-multiple-base-element';
+
+const STATES = ['default', 'hover', 'focus'];
+const VARIANTS = ['base', 'invalid', 'disabled'];
+
+const SubSectionMultipleBaseElement: TemplateOnlyComponent = <template>
+  <ShwTextH2>FormSuperSelectMultipleBase</ShwTextH2>
+
+  <ShwTextH3>Interaction status</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="Default">
+      <CodeFragmentWithMultipleBaseElement />
+    </SG.Item>
+    <SG.Item @label="With placeholder">
+      <CodeFragmentWithMultipleBaseElement
+        @placeholder="Placeholder text for multiple selection"
+      />
+    </SG.Item>
+    <SG.Item @label="Selected">
+      <CodeFragmentWithMultipleBaseElement @isSelected={{true}} />
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>States</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    {{#each STATES as |state|}}
+      <SG.Item>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each VARIANTS as |variant|}}
+            {{#let
+              (and (eq variant "disabled") (eq state "focus"))
+              as |dontDisplay|
+            }}
+              {{#unless dontDisplay}}
+                <SF.Item @label="{{capitalize variant}} / {{capitalize state}}">
+                  <CodeFragmentWithMultipleBaseElement
+                    @options="places"
+                    @isSelected={{true}}
+                    @disabled={{if (eq variant "disabled") true}}
+                    @isInvalid={{if (eq variant "invalid") true}}
+                    class="mock-{{state}}"
+                  />
+                </SF.Item>
+              {{/unless}}
+            {{/let}}
+          {{/each}}
+        </ShwFlex>
+      </SG.Item>
+    {{/each}}
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>List</ShwTextH3>
+
+  <ShwFlex {{style flex="1" padding-bottom="12em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="Default">
+      <CodeFragmentWithMultipleBaseElement
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+
+    <SF.Item {{style flex="1"}} @label="Search enabled">
+      <CodeFragmentWithMultipleBaseElement
+        @isSelected={{true}}
+        @searchEnabled={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>List position</ShwTextH4>
+
+  <ShwFlex @direction="column" as |SF|>
+    <SF.Item>
+      <ShwFlex as |SF|>
+        <SF.Item {{style flex="1"}} @label="Auto (default)">
+          <CodeFragmentWithMultipleBaseElement @isSelected={{true}} />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Below">
+          <CodeFragmentWithMultipleBaseElement
+            @isSelected={{true}}
+            @verticalPosition="below"
+          />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Above">
+          <CodeFragmentWithMultipleBaseElement
+            @isSelected={{true}}
+            @verticalPosition="above"
+          />
+        </SF.Item>
+      </ShwFlex>
+    </SF.Item>
+
+    <SF.Item>
+      <ShwFlex as |SF|>
+        <SF.Item {{style flex="1"}} @label="Left (+ matchTriggerWidth=False)">
+          <CodeFragmentWithMultipleBaseElement
+            @options="places"
+            @isSelected={{true}}
+            @matchTriggerWidth={{false}}
+            @horizontalPosition="left"
+          />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Center (+ matchTriggerWidth=False)">
+          <CodeFragmentWithMultipleBaseElement
+            @options="places"
+            @isSelected={{true}}
+            @matchTriggerWidth={{false}}
+            @horizontalPosition="center"
+          />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Right (+ matchTriggerWidth=False)">
+          <CodeFragmentWithMultipleBaseElement
+            @options="places"
+            @isSelected={{true}}
+            @matchTriggerWidth={{false}}
+            @horizontalPosition="right"
+          />
+        </SF.Item>
+      </ShwFlex>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>List width</ShwTextH4>
+
+  <ShwFlex {{style padding-bottom="16em"}} as |SF|>
+    <SF.Item
+      {{style min-width="10em"}}
+      @label="matchTriggerWidth = true (default)"
+    >
+      <CodeFragmentWithMultipleBaseElement
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    <SF.Item {{style min-width="22em"}} @label="matchTriggerWidth = false">
+      <CodeFragmentWithMultipleBaseElement
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @matchTriggerWidth={{false}}
+      />
+    </SF.Item>
+    <SF.Item {{style max-width="20em"}} @label="dropdownMaxWidth = 25em">
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @dropdownMaxWidth="25em"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Before &amp; after options</ShwTextH3>
+
+  <ShwFlex {{style padding-bottom="18em"}} @direction="row" as |SF|>
+    <SF.Item @label="Before options generic content">
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @hasBeforeOptionsComponent={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    {{! left empty on purpose }}
+    <SF.Item />
+  </ShwFlex>
+
+  <ShwFlex {{style padding-bottom="15.5em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="After options default content">
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    <SF.Item {{style flex="1"}} @label="After options no content">
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @showAfterOptions={{false}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwFlex {{style padding-bottom="15em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="After options text content in footer">
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @afterOptionsContent="After options content"
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    <SF.Item
+      {{style flex="1"}}
+      @label="After options generic content in footer"
+    >
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @hasAfterOptionsComponent={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>Custom result count message</ShwTextH4>
+
+  <ShwFlex
+    {{style padding-bottom="15em" max-width="50%"}}
+    @direction="row"
+    as |SF|
+  >
+    <SF.Item {{style flex="1"}}>
+      <CodeFragmentWithMultipleBaseElement
+        @options="places"
+        @hasResultCountMessage={{true}}
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
+</template>;
+
+export default SubSectionMultipleBaseElement;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/multiple-field-element.gts b/showcase/app/components/page-components/form/super-select/sub-sections/multiple-field-element.gts
new file mode 100644
index 00000000000..15126dfb2b8
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/multiple-field-element.gts
@@ -0,0 +1,198 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import CodeFragmentWithMultipleFieldElement from 'showcase/components/page-components/form/super-select/code-fragments/with-multiple-field-element';
+
+import {
+  HdsLayoutFlex,
+  HdsLinkInline,
+} from '@hashicorp/design-system-components/components';
+
+const SubSectionMultipleFieldElement: TemplateOnlyComponent = <template>
+  <ShwTextH2>FormSuperSelectMultipleField</ShwTextH2>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="Only label">
+      <CodeFragmentWithMultipleFieldElement @isSelected={{true}} as |CF|>
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text">
+      <CodeFragmentWithMultipleFieldElement @isSelected={{true}} as |CF|>
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text with link">
+      <CodeFragmentWithMultipleFieldElement @isSelected={{true}} as |CF|>
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>
+          This is the helper text
+          <HdsLinkInline @route="index">with a link</HdsLinkInline>
+        </CF.HelperText>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Error">
+      <CodeFragmentWithMultipleFieldElement
+        @isSelected={{true}}
+        @isInvalid={{true}}
+        as |CF|
+      >
+        <CF.Label>This is the label</CF.Label>
+        <CF.Error>This is the error</CF.Error>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text + Error">
+      <CodeFragmentWithMultipleFieldElement
+        @isSelected={{true}}
+        @isInvalid={{true}}
+        as |CF|
+      >
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+        <CF.Error>This is the error</CF.Error>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text + Errors">
+      <CodeFragmentWithMultipleFieldElement
+        @isSelected={{true}}
+        @isInvalid={{true}}
+        as |CF|
+      >
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+        <CF.Error as |E|>
+          <E.Message>First error message</E.Message>
+          <E.Message>Second error message</E.Message>
+        </CF.Error>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Required and optional</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="With legend + Required">
+      <CodeFragmentWithMultipleFieldElement
+        @isSelected={{true}}
+        @isRequired={{true}}
+        as |CF|
+      >
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+    <SG.Item @label="With legend + Optional">
+      <CodeFragmentWithMultipleFieldElement
+        @isSelected={{true}}
+        @isOptional={{true}}
+        as |CF|
+      >
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>States</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="Disabled">
+      <CodeFragmentWithMultipleFieldElement
+        @isSelected={{true}}
+        @disabled={{true}}
+        as |CF|
+      >
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+      </CodeFragmentWithMultipleFieldElement>
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Complex content</ShwTextH3>
+
+  <ShwFlex {{style padding-bottom="15em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="Rich content w/o custom selectedItems">
+      <CodeFragmentWithMultipleFieldElement
+        @options="cluster-size"
+        @isSelected={{true}}
+        @hasRichContent={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        as |CF|
+      >
+        <CF.Label>Label</CF.Label>
+        <CF.Options>
+          {{#let CF.options as |option|}}
+            <HdsLayoutFlex @justify="space-between" @align="center">
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.size}}</strong>
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.price}}/hr</strong>
+            </HdsLayoutFlex>
+            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+            <div>{{option.description}}</div>
+          {{/let}}
+        </CF.Options>
+      </CodeFragmentWithMultipleFieldElement>
+    </SF.Item>
+    <SF.Item {{style flex="1"}} @label="Rich content with custom selectedItems">
+      <CodeFragmentWithMultipleFieldElement
+        @options="cluster-size"
+        @isSelected={{true}}
+        @hasRichContent={{true}}
+        @hasSelectedItemComponent={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        as |CF|
+      >
+        <CF.Label>Label</CF.Label>
+        <CF.Options>
+          {{#let CF.options as |option|}}
+            <HdsLayoutFlex @justify="space-between" @align="center">
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.size}}</strong>
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.price}}/hr</strong>
+            </HdsLayoutFlex>
+            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+            <div>{{option.description}}</div>
+          {{/let}}
+        </CF.Options>
+      </CodeFragmentWithMultipleFieldElement>
+    </SF.Item>
+    <SF.Item {{style flex="1"}} @label="Grouped options">
+      <CodeFragmentWithMultipleFieldElement
+        @options="grouped"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        as |CF|
+      >
+        <CF.Label>Label</CF.Label>
+        <CF.Options>
+          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+          {{CF.options}}
+        </CF.Options>
+      </CodeFragmentWithMultipleFieldElement>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
+</template>;
+
+export default SubSectionMultipleFieldElement;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/option-group.gts b/showcase/app/components/page-components/form/super-select/sub-sections/option-group.gts
new file mode 100644
index 00000000000..01d84507310
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/option-group.gts
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { capitalize } from '@ember/string';
+import style from 'ember-style-modifier';
+import { hash } from '@ember/helper';
+
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+import ShwPlaceholder from 'showcase/components/shw/placeholder';
+
+import { HdsFormSuperSelectOptionGroup } from '@hashicorp/design-system-components/components';
+
+const VARIANTS = ['single', 'multiple'];
+
+const SubSectionOptionGroup: TemplateOnlyComponent = <template>
+  <ShwTextH3>FormSuperSelectOptionGroup</ShwTextH3>
+
+  {{#each VARIANTS as |variant|}}
+    <ShwFlex as |SG|>
+      <SG.Item @label="{{capitalize variant}} / Flat">
+        <div class="hds-form-super-select hds-form-super-select-{{variant}}">
+          <div class="ember-basic-dropdown">
+            <div
+              class="ember-basic-dropdown-content"
+              {{style position="static"}}
+            >
+              <ul
+                class="ember-power-select-options"
+                role="listbox"
+                aria-label="Label"
+                {{style max-height="none"}}
+              >
+                <HdsFormSuperSelectOptionGroup
+                  @group={{hash
+                    groupName="Title for first group (with no content)"
+                  }}
+                />
+                <HdsFormSuperSelectOptionGroup
+                  @group={{hash
+                    groupName="Title for second group (with generic content)"
+                  }}
+                >
+                  <ShwPlaceholder
+                    @text="Second group - Generic content"
+                    @height="40px"
+                  />
+                </HdsFormSuperSelectOptionGroup>
+                <HdsFormSuperSelectOptionGroup
+                  @group={{hash
+                    groupName="Title for third group (with options)"
+                  }}
+                >
+                  {{! template-lint-disable require-context-role }}
+                  <li
+                    class="ember-power-select-option"
+                    role="option"
+                    mock-state-value="hover"
+                  >
+                    Option 1
+                  </li>
+                  <li class="ember-power-select-option" role="option">
+                    Option 2
+                  </li>
+                </HdsFormSuperSelectOptionGroup>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </SG.Item>
+      <SG.Item @label="{{capitalize variant}} / Nested">
+        <div class="hds-form-super-select hds-form-super-select-{{variant}}">
+          <div class="ember-basic-dropdown">
+            <div
+              class="ember-basic-dropdown-content"
+              {{style position="static"}}
+            >
+              <ul
+                class="ember-power-select-options"
+                role="listbox"
+                aria-label="Label"
+                {{style max-height="none"}}
+              >
+                <HdsFormSuperSelectOptionGroup
+                  @group={{hash groupName="Title for first level"}}
+                >
+                  {{! template-lint-disable require-context-role }}
+                  <li
+                    class="ember-power-select-option"
+                    role="option"
+                    mock-state-value="hover"
+                  >
+                    Level 1 - Option 1A
+                  </li>
+                  <HdsFormSuperSelectOptionGroup
+                    @group={{hash groupName="Title for second level"}}
+                  >
+                    {{! template-lint-disable require-context-role }}
+                    <li
+                      class="ember-power-select-option"
+                      role="option"
+                      mock-state-value="hover"
+                    >
+                      Level 2 - Option 2A
+                    </li>
+                    <li class="ember-power-select-option" role="option">
+                      Level 2 - Option 2B
+                    </li>
+                    <HdsFormSuperSelectOptionGroup
+                      @group={{hash groupName="Title for third level"}}
+                    >
+                      {{! template-lint-disable require-context-role }}
+                      <li
+                        class="ember-power-select-option"
+                        role="option"
+                        mock-state-value="hover"
+                      >
+                        Level 3 - Option 3A
+                      </li>
+                      <li class="ember-power-select-option" role="option">
+                        Level 3 - Option 3B
+                      </li>
+                    </HdsFormSuperSelectOptionGroup>
+                  </HdsFormSuperSelectOptionGroup>
+                  <HdsFormSuperSelectOptionGroup
+                    @group={{hash
+                      groupName="Title for second level (with generic content)"
+                    }}
+                  >
+                    <ShwPlaceholder
+                      @text="Second group - Generic content"
+                      @height="40px"
+                    />
+                  </HdsFormSuperSelectOptionGroup>
+                  <li class="ember-power-select-option" role="option">
+                    Level 1 - Option 1B
+                  </li>
+                </HdsFormSuperSelectOptionGroup>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </SG.Item>
+    </ShwFlex>
+  {{/each}}
+
+  <ShwDivider @level={{2}} />
+</template>;
+
+export default SubSectionOptionGroup;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/single-base-element.gts b/showcase/app/components/page-components/form/super-select/sub-sections/single-base-element.gts
new file mode 100644
index 00000000000..d28495dc6b3
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/single-base-element.gts
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { capitalize } from '@ember/string';
+import style from 'ember-style-modifier';
+import { eq, and } from 'ember-truth-helpers';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwTextH4 from 'showcase/components/shw/text/h4';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import CodeFragmentWithSingleBaseElement from 'showcase/components/page-components/form/super-select/code-fragments/with-single-base-element';
+
+const STATES = ['default', 'hover', 'focus'];
+const VARIANTS = ['base', 'invalid', 'disabled'];
+
+const SubSectionSingleBaseElement: TemplateOnlyComponent = <template>
+  <ShwTextH2>FormSuperSelectSingleBase</ShwTextH2>
+
+  <ShwTextH3>Interaction status</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="Default">
+      <CodeFragmentWithSingleBaseElement />
+    </SG.Item>
+    <SG.Item @label="With placeholder">
+      <CodeFragmentWithSingleBaseElement @placeholder="Placeholder text" />
+    </SG.Item>
+    <SG.Item @label="Selected">
+      <CodeFragmentWithSingleBaseElement @isSelected={{true}} />
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>States</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    {{#each STATES as |state|}}
+      <SG.Item>
+        <ShwFlex @direction="column" as |SF|>
+          {{#each VARIANTS as |variant|}}
+            {{#let
+              (and (eq variant "disabled") (eq state "focus"))
+              as |dontDisplay|
+            }}
+              {{#unless dontDisplay}}
+                <SF.Item @label="{{capitalize variant}} / {{capitalize state}}">
+                  <CodeFragmentWithSingleBaseElement
+                    @isSelected={{true}}
+                    @disabled={{if (eq variant "disabled") true}}
+                    @isInvalid={{if (eq variant "invalid") true}}
+                    class="mock-{{state}}"
+                  />
+                </SF.Item>
+              {{/unless}}
+            {{/let}}
+          {{/each}}
+        </ShwFlex>
+      </SG.Item>
+    {{/each}}
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>List</ShwTextH3>
+
+  <ShwFlex {{style padding-bottom="11em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="Default">
+      <CodeFragmentWithSingleBaseElement
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    <SF.Item {{style flex="1"}} @label="Search enabled">
+      <CodeFragmentWithSingleBaseElement
+        @isSelected={{true}}
+        @searchEnabled={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>List position</ShwTextH4>
+
+  <ShwFlex @direction="column" as |SF|>
+    <SF.Item>
+      <ShwFlex as |SF|>
+        <SF.Item {{style flex="1"}} @label="Auto (default)">
+          <CodeFragmentWithSingleBaseElement @isSelected={{true}} />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Below">
+          <CodeFragmentWithSingleBaseElement
+            @isSelected={{true}}
+            @verticalPosition="below"
+          />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Above">
+          <CodeFragmentWithSingleBaseElement
+            @isSelected={{true}}
+            @verticalPosition="above"
+          />
+        </SF.Item>
+      </ShwFlex>
+    </SF.Item>
+    <SF.Item>
+      <ShwFlex as |SF|>
+        <SF.Item {{style flex="1"}} @label="Left (+ matchTriggerWidth=False)">
+          <CodeFragmentWithSingleBaseElement
+            @options="places"
+            @isSelected={{true}}
+            @matchTriggerWidth={{false}}
+            @horizontalPosition="left"
+          />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Center (+ matchTriggerWidth=False)">
+          <CodeFragmentWithSingleBaseElement
+            @options="places"
+            @isSelected={{true}}
+            @matchTriggerWidth={{false}}
+            @horizontalPosition="center"
+          />
+        </SF.Item>
+        <SF.Item {{style flex="1"}} @label="Right (+ matchTriggerWidth=False)">
+          <CodeFragmentWithSingleBaseElement
+            @options="places"
+            @isSelected={{true}}
+            @matchTriggerWidth={{false}}
+            @horizontalPosition="right"
+          />
+        </SF.Item>
+      </ShwFlex>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>List width</ShwTextH4>
+
+  <ShwFlex {{style padding-bottom="11em"}} as |SF|>
+    <SF.Item
+      {{style min-width="10em"}}
+      @label="matchTriggerWidth = true (default)"
+    >
+      <CodeFragmentWithSingleBaseElement
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    <SF.Item {{style min-width="10em"}} @label="matchTriggerWidth = false">
+      <CodeFragmentWithSingleBaseElement
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @matchTriggerWidth={{false}}
+      />
+    </SF.Item>
+    <SF.Item @label="dropdownMaxWidth = 30em">
+      <CodeFragmentWithSingleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @dropdownMaxWidth="30em"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Before &amp; after options</ShwTextH3>
+
+  <ShwFlex
+    {{style padding-bottom="15.5em" max-width="50%"}}
+    @direction="row"
+    as |SF|
+  >
+    <SF.Item {{style flex="1"}} @label="Before options generic content">
+      <CodeFragmentWithSingleBaseElement
+        @hasBeforeOptionsComponent={{true}}
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+    {{! left empty on purpose }}
+    <SF.Item />
+  </ShwFlex>
+
+  <ShwFlex {{style padding-bottom="15em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="After options default content">
+      <CodeFragmentWithSingleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @showAfterOptions={{true}}
+      />
+    </SF.Item>
+    <SF.Item {{style flex="1"}} @label="After options no content">
+      <CodeFragmentWithSingleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwFlex {{style padding-bottom="15em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="After options text content in footer">
+      <CodeFragmentWithSingleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @afterOptionsContent="After options content"
+      />
+    </SF.Item>
+    <SF.Item
+      {{style flex="1"}}
+      @label="After options generic content in footer"
+    >
+      <CodeFragmentWithSingleBaseElement
+        @hasAfterOptionsComponent={{true}}
+        @options="places"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @showAfterOptions={{true}}
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwTextH4>Custom result count message</ShwTextH4>
+
+  <ShwFlex
+    {{style padding-bottom="15em" max-width="50%"}}
+    @direction="row"
+    as |SF|
+  >
+    <SF.Item {{style flex="1"}}>
+      <CodeFragmentWithSingleBaseElement
+        @options="places"
+        @isSelected={{true}}
+        @hasResultCountMessage={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        @showAfterOptions={{true}}
+      />
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
+</template>;
+
+export default SubSectionSingleBaseElement;
diff --git a/showcase/app/components/page-components/form/super-select/sub-sections/single-field-element.gts b/showcase/app/components/page-components/form/super-select/sub-sections/single-field-element.gts
new file mode 100644
index 00000000000..a5d1f6e9442
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/sub-sections/single-field-element.gts
@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwGrid from 'showcase/components/shw/grid';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import CodeFragmentWithSingleFieldElement from 'showcase/components/page-components/form/super-select/code-fragments/with-single-field-element';
+
+import {
+  HdsLayoutFlex,
+  HdsLinkInline,
+} from '@hashicorp/design-system-components/components';
+
+const SubSectionSingleFieldElement: TemplateOnlyComponent = <template>
+  <ShwTextH2>FormSuperSelectSingleField</ShwTextH2>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="Only label">
+      <CodeFragmentWithSingleFieldElement @isSelected={{true}} as |CF|>
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text">
+      <CodeFragmentWithSingleFieldElement @isSelected={{true}} as |CF|>
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text with link">
+      <CodeFragmentWithSingleFieldElement @isSelected={{true}} as |CF|>
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text
+          <HdsLinkInline @route="index">with a link</HdsLinkInline></CF.HelperText>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Error">
+      <CodeFragmentWithSingleFieldElement
+        @isSelected={{true}}
+        @isInvalid={{true}}
+        as |CF|
+      >
+        <CF.Label>This is the label</CF.Label>
+        <CF.Error>This is the error</CF.Error>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text + Error">
+      <CodeFragmentWithSingleFieldElement
+        @isSelected={{true}}
+        @isInvalid={{true}}
+        as |CF|
+      >
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+        <CF.Error>This is the error</CF.Error>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+    <SG.Item @label="Label + Helper text + Errors">
+      <CodeFragmentWithSingleFieldElement
+        @isSelected={{true}}
+        @isInvalid={{true}}
+        as |CF|
+      >
+        <CF.Label>This is the label</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+        <CF.Error as |E|>
+          <E.Message>First error message</E.Message>
+          <E.Message>Second error message</E.Message>
+        </CF.Error>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Required and optional</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="With legend + Required">
+      <CodeFragmentWithSingleFieldElement
+        @isSelected={{true}}
+        @isRequired={{true}}
+        as |CF|
+      >
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+    <SG.Item @label="With legend + Optional">
+      <CodeFragmentWithSingleFieldElement
+        @isSelected={{true}}
+        @isOptional={{true}}
+        as |CF|
+      >
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>States</ShwTextH3>
+
+  <ShwGrid @columns={{3}} as |SG|>
+    <SG.Item @label="Disabled">
+      <CodeFragmentWithSingleFieldElement
+        @isSelected={{true}}
+        @disabled={{true}}
+        as |CF|
+      >
+        <CF.Label>Lorem ipsum dolor</CF.Label>
+        <CF.HelperText>This is the helper text</CF.HelperText>
+      </CodeFragmentWithSingleFieldElement>
+    </SG.Item>
+  </ShwGrid>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>Complex content</ShwTextH3>
+
+  <ShwFlex {{style padding-bottom="12em"}} @direction="row" as |SF|>
+    <SF.Item {{style flex="1"}} @label="Rich content w/o custom selectedItem">
+      <CodeFragmentWithSingleFieldElement
+        @options="cluster-size"
+        @isSelected={{true}}
+        @hasRichContent={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        as |CF|
+      >
+        <CF.Label>Label</CF.Label>
+        <CF.Options>
+          {{#let CF.options as |option|}}
+            <HdsLayoutFlex @justify="space-between" @align="center">
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.size}}</strong>
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.price}}/hr</strong>
+            </HdsLayoutFlex>
+            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+            <div>{{option.description}}</div>
+          {{/let}}
+        </CF.Options>
+      </CodeFragmentWithSingleFieldElement>
+    </SF.Item>
+    <SF.Item
+      {{style flex="1"}}
+      @label="Rich content with custom selectedItemComponent"
+    >
+      <CodeFragmentWithSingleFieldElement
+        @options="cluster-size"
+        @isSelected={{true}}
+        @hasRichContent={{true}}
+        @hasSelectedItemComponent={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        as |CF|
+      >
+        <CF.Label>Label</CF.Label>
+        <CF.Options>
+          {{#let CF.options as |option|}}
+            <HdsLayoutFlex @justify="space-between" @align="center">
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.size}}</strong>
+              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+              <strong>{{option.price}}/hr</strong>
+            </HdsLayoutFlex>
+            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+            <div>{{option.description}}</div>
+          {{/let}}
+        </CF.Options>
+      </CodeFragmentWithSingleFieldElement>
+    </SF.Item>
+    <SF.Item {{style flex="1"}} @label="Label and grouped options">
+      <CodeFragmentWithSingleFieldElement
+        @options="grouped"
+        @isSelected={{true}}
+        @initiallyOpened={{true}}
+        @verticalPosition="below"
+        as |CF|
+      >
+        <CF.Label>Label</CF.Label>
+        <CF.Options>
+          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+          {{CF.options}}
+        </CF.Options>
+      </CodeFragmentWithSingleFieldElement>
+    </SF.Item>
+  </ShwFlex>
+
+  <ShwDivider />
+</template>;
+
+export default SubSectionSingleFieldElement;
diff --git a/showcase/app/controllers/page-components/form/super-select.ts b/showcase/app/controllers/page-components/form/super-select.ts
deleted file mode 100644
index 5dbcc9094d9..00000000000
--- a/showcase/app/controllers/page-components/form/super-select.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Controller from '@ember/controller';
-import { action } from '@ember/object';
-
-import type { PageComponentsFormSuperSelectModel } from 'showcase/routes/page-components/form/super-select';
-
-export default class PageComponentsFormSuperSelectController extends Controller {
-  declare model: PageComponentsFormSuperSelectModel;
-
-  @action
-  resultCountMessage(resultCount: number) {
-    return `${resultCount} total`;
-  }
-
-  @action
-  noop() {}
-}
diff --git a/showcase/app/routes/page-components/form/super-select.ts b/showcase/app/routes/page-components/form/super-select.ts
index 7afbeac8ffc..ec4a6844db7 100644
--- a/showcase/app/routes/page-components/form/super-select.ts
+++ b/showcase/app/routes/page-components/form/super-select.ts
@@ -10,104 +10,4 @@ import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
 export type PageComponentsFormSuperSelectModel =
   ModelFrom<PageComponentsFormSuperSelectRoute>;
 
-export default class PageComponentsFormSuperSelectRoute extends Route {
-  model() {
-    // these are used only for presentation purpose in the showcase
-    const STATES = ['default', 'hover', 'focus'];
-
-    // Options data
-    const OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
-    const SELECTED_OPTION = OPTIONS[0];
-    const SELECTED_OPTIONS = [OPTIONS[0], OPTIONS[1]];
-    const SELECTED_OPTIONS_SINGLE = [OPTIONS[0]];
-
-    const GROUPED_OPTIONS = [
-      { groupName: 'Group', options: ['Option 1', 'Option 2'] },
-      { groupName: 'Group', options: ['Option 3', 'Option 4'] },
-      {
-        groupName: 'Group',
-        options: [
-          { groupName: 'Subgroup', options: ['Option 5', 'Option 6'] },
-          { groupName: 'Subgroup', options: ['Option 7', 'Option 8'] },
-        ],
-      },
-      {
-        groupName: 'Group',
-        options: [
-          { groupName: 'Subgroup', options: ['Option 10', 'Option 11'] },
-          { groupName: 'Subgroup', options: ['Option 12', 'Option 13'] },
-        ],
-      },
-    ];
-    const SELECTED_GROUPED_OPTION = GROUPED_OPTIONS[0]?.options[0];
-    const SELECTED_GROUPED_OPTIONS = [
-      GROUPED_OPTIONS[0]?.options[0],
-      GROUPED_OPTIONS[1]?.options[0],
-    ];
-
-    const PLACES_OPTIONS = [
-      'Oregon (us-west-2)',
-      'N. Virginia (us-east-1)',
-      'ALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenStringALongUnbrokenString',
-      'Ireland (eu-west-1)',
-      'London(eu-west-2)',
-      'Frankfurt (eu-central-1)',
-    ];
-    const SELECTED_PLACES_OPTION = PLACES_OPTIONS[0];
-    const SELECTED_PLACES_OPTIONS = [
-      PLACES_OPTIONS[0],
-      PLACES_OPTIONS[1],
-      PLACES_OPTIONS[3],
-    ];
-    const SELECTED_PLACES_OPTIONS_SINGLE = [PLACES_OPTIONS[0]];
-
-    const CLUSTER_SIZE_OPTIONS = [
-      {
-        size: 'Extra Small',
-        description: '2 vCPU | 1 GiB RAM',
-        price: '$0.02',
-      },
-      {
-        size: 'Small',
-        description: '2 vCPU | 2 GiB RAM',
-        price: '$0.04',
-        disabled: true,
-      },
-      {
-        size: 'Medium',
-        description: '4 vCPU | 4 GiB RAM',
-        price: '$0.08',
-        disabled: true,
-      },
-      { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
-      {
-        size: 'Extra Large',
-        description: '16 vCPU | 16 GiB RAM',
-        price: '$0.32',
-      },
-    ];
-    const SELECTED_CLUSTER_SIZE_OPTION = CLUSTER_SIZE_OPTIONS[1];
-    const SELECTED_CLUSTER_SIZE_OPTIONS = [
-      CLUSTER_SIZE_OPTIONS[1],
-      CLUSTER_SIZE_OPTIONS[3],
-    ];
-
-    return {
-      STATES,
-      OPTIONS,
-      SELECTED_OPTION,
-      SELECTED_OPTIONS,
-      SELECTED_OPTIONS_SINGLE,
-      GROUPED_OPTIONS,
-      SELECTED_GROUPED_OPTION,
-      SELECTED_GROUPED_OPTIONS,
-      SELECTED_PLACES_OPTIONS_SINGLE,
-      PLACES_OPTIONS,
-      SELECTED_PLACES_OPTION,
-      SELECTED_PLACES_OPTIONS,
-      CLUSTER_SIZE_OPTIONS,
-      SELECTED_CLUSTER_SIZE_OPTION,
-      SELECTED_CLUSTER_SIZE_OPTIONS,
-    };
-  }
-}
+export default class PageComponentsFormSuperSelectRoute extends Route {}
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index fb06fee50bd..4df2b448959 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -58,7 +58,6 @@
 @use "./showcase-pages/form/masked-input.scss" as showcase-masked-input;
 @use "./showcase-pages/form/radio" as showcase-radio;
 @use "./showcase-pages/form/select" as showcase-select;
-@use "./showcase-pages/form/super-select" as showcase-super-select;
 @use "./showcase-pages/form/text-input" as showcase-text-input;
 @use "./showcase-pages/form/textarea" as showcase-textarea;
 @use "./showcase-pages/form/toggle" as showcase-toggle;
diff --git a/showcase/app/styles/showcase-pages/form/super-select.scss b/showcase/app/styles/showcase-pages/form/super-select.scss
deleted file mode 100644
index 7910ae4e66e..00000000000
--- a/showcase/app/styles/showcase-pages/form/super-select.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-// FORM > SUPER_SELECT
-
-body.page-components-form-super-select {
-  .shw-component-form-super-select-option-rich-header {
-    display: flex;
-    justify-content: space-between;
-  }
-}
diff --git a/showcase/app/templates/page-components/form/super-select.gts b/showcase/app/templates/page-components/form/super-select.gts
new file mode 100644
index 00000000000..0fa848bb348
--- /dev/null
+++ b/showcase/app/templates/page-components/form/super-select.gts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import FormSuperSelectIndex from 'showcase/components/page-components/form/super-select';
+
+const PageComponentsFormSuperSelect: TemplateOnlyComponent = <template>
+  <FormSuperSelectIndex />
+</template>;
+
+export default PageComponentsFormSuperSelect;
diff --git a/showcase/app/templates/page-components/form/super-select.hbs b/showcase/app/templates/page-components/form/super-select.hbs
deleted file mode 100644
index 29cc71c1db7..00000000000
--- a/showcase/app/templates/page-components/form/super-select.hbs
+++ /dev/null
@@ -1,1578 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-{{page-title "Form::SuperSelect Components"}}
-
-<BasicDropdownWormhole />
-
-<Shw::Text::H1>Form::SuperSelect</Shw::Text::H1>
-
-<section data-test-percy>
-  <Shw::Text::H2>Form::SuperSelect::Single::Base</Shw::Text::H2>
-
-  <Shw::Text::H3>Interaction status</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="Default">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{this.noop}}
-        @options={{@model.OPTIONS}}
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SG.Item>
-    <SG.Item @label="With placeholder">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{this.noop}}
-        @options={{@model.OPTIONS}}
-        @placeholder="Placeholder text"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SG.Item>
-    <SG.Item @label="Selected">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>States</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    {{#let (array "base" "invalid" "disabled") as |variants|}}
-      {{#each @model.STATES as |state|}}
-        <SG.Item>
-          <Shw::Flex @direction="column" as |SF|>
-            {{#each variants as |variant|}}
-              {{#let (and (eq variant "disabled") (eq state "focus")) as |dontDisplay|}}
-                {{#unless dontDisplay}}
-                  <SF.Item @label="{{capitalize variant}} / {{capitalize state}}">
-                    <Hds::Form::SuperSelect::Single::Base
-                      @onChange={{fn (mut @model.SELECTED_OPTION)}}
-                      @options={{@model.OPTIONS}}
-                      @selected={{@model.SELECTED_OPTION}}
-                      @disabled={{if (eq variant "disabled") true}}
-                      @isInvalid={{if (eq variant "invalid") true}}
-                      @ariaLabel="Label"
-                      class="mock-{{state}}"
-                      as |option|
-                    >
-                      {{option}}
-                    </Hds::Form::SuperSelect::Single::Base>
-                  </SF.Item>
-                {{/unless}}
-              {{/let}}
-            {{/each}}
-          </Shw::Flex>
-        </SG.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>List</Shw::Text::H3>
-
-  <Shw::Flex {{style padding-bottom="11em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="Default">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="Search enabled">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @searchEnabled={{true}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>List position</Shw::Text::H4>
-
-  <Shw::Flex @direction="column" as |SF|>
-    <SF.Item>
-      <Shw::Flex as |SF|>
-        <SF.Item {{style flex="1"}} @label="Auto (default)">
-          <Hds::Form::SuperSelect::Single::Base
-            @onChange={{fn (mut @model.SELECTED_OPTION)}}
-            @options={{@model.OPTIONS}}
-            @selected={{@model.SELECTED_OPTION}}
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Single::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Below">
-          <Hds::Form::SuperSelect::Single::Base
-            @onChange={{fn (mut @model.SELECTED_OPTION)}}
-            @options={{@model.OPTIONS}}
-            @selected={{@model.SELECTED_OPTION}}
-            @verticalPosition="below"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Single::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Above">
-          <Hds::Form::SuperSelect::Single::Base
-            @onChange={{fn (mut @model.SELECTED_OPTION)}}
-            @options={{@model.OPTIONS}}
-            @selected={{@model.SELECTED_OPTION}}
-            @verticalPosition="above"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Single::Base>
-        </SF.Item>
-      </Shw::Flex>
-    </SF.Item>
-    <SF.Item>
-      <Shw::Flex as |SF|>
-        <SF.Item {{style flex="1"}} @label="Left (+ matchTriggerWidth=False)">
-          <Hds::Form::SuperSelect::Single::Base
-            @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-            @options={{@model.PLACES_OPTIONS}}
-            @selected={{@model.SELECTED_PLACES_OPTION}}
-            @matchTriggerWidth={{false}}
-            @horizontalPosition="left"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Single::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Center (+ matchTriggerWidth=False)">
-          <Hds::Form::SuperSelect::Single::Base
-            @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-            @options={{@model.PLACES_OPTIONS}}
-            @selected={{@model.SELECTED_PLACES_OPTION}}
-            @matchTriggerWidth={{false}}
-            @horizontalPosition="center"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Single::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Right (+ matchTriggerWidth=False)">
-          <Hds::Form::SuperSelect::Single::Base
-            @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-            @options={{@model.PLACES_OPTIONS}}
-            @selected={{@model.SELECTED_PLACES_OPTION}}
-            @matchTriggerWidth={{false}}
-            @horizontalPosition="right"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Single::Base>
-        </SF.Item>
-      </Shw::Flex>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>List width</Shw::Text::H4>
-
-  <Shw::Flex {{style padding-bottom="11em"}} as |SF|>
-    <SF.Item {{style min-width="10em"}} @label="matchTriggerWidth = true (default)">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    <SF.Item {{style min-width="10em"}} @label="matchTriggerWidth = false">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        @matchTriggerWidth={{false}}
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    <SF.Item @label="dropdownMaxWidth = 30em">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @dropdownMaxWidth="30em"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Before &amp; after options</Shw::Text::H3>
-
-  <Shw::Flex {{style padding-bottom="15.5em" max-width="50%"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="Before options generic content">
-      <Hds::Form::SuperSelect::Single::Base
-        @beforeOptionsComponent={{component "mock/components/form/super-select/generic-content"}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    {{! left empty on purpose }}
-    <SF.Item />
-  </Shw::Flex>
-
-  <Shw::Flex {{style padding-bottom="15em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="After options default content">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        @showAfterOptions={{true}}
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="After options no content">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex {{style padding-bottom="15em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="After options text content in footer">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @afterOptionsContent="After options content"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="After options generic content in footer">
-      <Hds::Form::SuperSelect::Single::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @afterOptionsComponent={{component "mock/components/form/super-select/generic-content"}}
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="After options generic content">
-      <Hds::Form::SuperSelect::Single::Base
-        @afterOptionsComponent={{component "mock/components/form/super-select/generic-content"}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        @showAfterOptions={{true}}
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>Custom result count message</Shw::Text::H4>
-
-  <Shw::Flex {{style padding-bottom="15em" max-width="50%"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}}>
-      <Hds::Form::SuperSelect::Single::Base
-        @resultCountMessage={{(fn this.resultCountMessage @model.SELECTED_PLACES_OPTIONS.length)}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTION)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        @showAfterOptions={{true}}
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Single::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Divider />
-
-  <Shw::Text::H2>Form::SuperSelect::Single::Field</Shw::Text::H2>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="Only label">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text with link">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text
-          <Hds::Link::Inline @route="index">with a link</Hds::Link::Inline></F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Error">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @isInvalid={{true}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-        <F.Error>This is the error</F.Error>
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text + Error">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @isInvalid={{true}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-        <F.Error>This is the error</F.Error>
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text + Errors">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @isInvalid={{true}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-        <F.Error as |E|>
-          <E.Message>First error message</E.Message>
-          <E.Message>Second error message</E.Message>
-        </F.Error>
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Required and optional</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="With legend + Required">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @isRequired={{true}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-    <SG.Item @label="With legend + Optional">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @isOptional={{true}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>States</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="Disabled">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_OPTION)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTION}}
-        @disabled={{true}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Single::Field>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Complex content</Shw::Text::H3>
-
-  <Shw::Flex {{style padding-bottom="12em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="Rich content w/o custom selectedItem">
-      <Hds::Form::SuperSelect::Single::Field
-        @selected={{@model.SELECTED_CLUSTER_SIZE_OPTION}}
-        @onChange={{fn (mut @model.SELECTED_CLUSTER_SIZE_OPTIONS)}}
-        @options={{@model.CLUSTER_SIZE_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        as |F|
-      >
-        <F.Label>Label</F.Label>
-        <F.Options>
-          {{#let F.options as |option|}}
-            <div class="shw-component-form-super-select-option-rich-header">
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.size}}</strong>
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.price}}/hr</strong>
-            </div>
-            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-            <div>{{option.description}}</div>
-          {{/let}}
-        </F.Options>
-      </Hds::Form::SuperSelect::Single::Field>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="Rich content with custom selectedItemComponent">
-      <Hds::Form::SuperSelect::Single::Field
-        @selected={{@model.SELECTED_CLUSTER_SIZE_OPTION}}
-        @selectedItemComponent={{component "mock/components/form/super-select/selected-component-single"}}
-        @onChange={{fn (mut @model.SELECTED_CLUSTER_SIZE_OPTIONS)}}
-        @options={{@model.CLUSTER_SIZE_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        as |F|
-      >
-        <F.Label>Label</F.Label>
-        <F.Options>
-          {{#let F.options as |option|}}
-            <div class="shw-component-form-super-select-option-rich-header">
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.size}}</strong>
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.price}}/hr</strong>
-            </div>
-            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-            <div>{{option.description}}</div>
-          {{/let}}
-        </F.Options>
-      </Hds::Form::SuperSelect::Single::Field>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="Label and grouped options">
-      <Hds::Form::SuperSelect::Single::Field
-        @onChange={{fn (mut @model.SELECTED_GROUPED_OPTION)}}
-        @options={{@model.GROUPED_OPTIONS}}
-        @selected={{@model.SELECTED_GROUPED_OPTION}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        as |F|
-      >
-        <F.Label>Label</F.Label>
-        <F.Options>
-          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-          {{F.options}}
-        </F.Options>
-      </Hds::Form::SuperSelect::Single::Field>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Divider />
-
-  <Shw::Text::H2>Form::SuperSelect::Multiple::Base</Shw::Text::H2>
-
-  <Shw::Text::H3>Interaction status</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="Default">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{this.noop}}
-        @options={{@model.OPTIONS}}
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SG.Item>
-    <SG.Item @label="With placeholder">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @placeholder="Placeholder text for multiple selection"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SG.Item>
-    <SG.Item @label="Selected">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>States</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    {{#let (array "base" "invalid" "disabled") as |variants|}}
-      {{#each @model.STATES as |state|}}
-        <SG.Item>
-          <Shw::Flex @direction="column" as |SF|>
-            {{#each variants as |variant|}}
-              {{#let (and (eq variant "disabled") (eq state "focus")) as |dontDisplay|}}
-                {{#unless dontDisplay}}
-                  <SF.Item @label="{{capitalize variant}} / {{capitalize state}}">
-                    <Hds::Form::SuperSelect::Multiple::Base
-                      @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-                      @options={{@model.PLACES_OPTIONS}}
-                      @selected={{@model.SELECTED_PLACES_OPTIONS}}
-                      @disabled={{if (eq variant "disabled") true}}
-                      @isInvalid={{if (eq variant "invalid") true}}
-                      @ariaLabel="Label"
-                      class="mock-{{state}}"
-                      as |option|
-                    >
-                      {{option}}
-                    </Hds::Form::SuperSelect::Multiple::Base>
-                  </SF.Item>
-                {{/unless}}
-              {{/let}}
-            {{/each}}
-          </Shw::Flex>
-        </SG.Item>
-      {{/each}}
-    {{/let}}
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>List</Shw::Text::H3>
-
-  <Shw::Flex {{style flex="1" padding-bottom="12em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="Default">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-
-    <SF.Item {{style flex="1"}} @label="Search enabled">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @searchEnabled={{true}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>List position</Shw::Text::H4>
-
-  <Shw::Flex @direction="column" as |SF|>
-    <SF.Item>
-      <Shw::Flex as |SF|>
-        <SF.Item {{style flex="1"}} @label="Auto (default)">
-          <Hds::Form::SuperSelect::Multiple::Base
-            @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-            @options={{@model.OPTIONS}}
-            @selected={{@model.SELECTED_OPTIONS}}
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Below">
-          <Hds::Form::SuperSelect::Multiple::Base
-            @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-            @options={{@model.OPTIONS}}
-            @selected={{@model.SELECTED_OPTIONS}}
-            @verticalPosition="below"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Above">
-          <Hds::Form::SuperSelect::Multiple::Base
-            @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-            @options={{@model.OPTIONS}}
-            @selected={{@model.SELECTED_OPTIONS}}
-            @verticalPosition="above"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>
-        </SF.Item>
-      </Shw::Flex>
-    </SF.Item>
-
-    <SF.Item>
-      <Shw::Flex as |SF|>
-        <SF.Item {{style flex="1"}} @label="Left (+ matchTriggerWidth=False)">
-          <Hds::Form::SuperSelect::Multiple::Base
-            @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-            @options={{@model.PLACES_OPTIONS}}
-            @selected={{@model.SELECTED_PLACES_OPTIONS}}
-            @matchTriggerWidth={{false}}
-            @horizontalPosition="left"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Center (+ matchTriggerWidth=False)">
-          <Hds::Form::SuperSelect::Multiple::Base
-            @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-            @options={{@model.PLACES_OPTIONS}}
-            @selected={{@model.SELECTED_PLACES_OPTIONS}}
-            @matchTriggerWidth={{false}}
-            @horizontalPosition="center"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>
-        </SF.Item>
-        <SF.Item {{style flex="1"}} @label="Right (+ matchTriggerWidth=False)">
-          <Hds::Form::SuperSelect::Multiple::Base
-            @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-            @options={{@model.PLACES_OPTIONS}}
-            @selected={{@model.SELECTED_PLACES_OPTIONS}}
-            @matchTriggerWidth={{false}}
-            @horizontalPosition="right"
-            @ariaLabel="Label"
-            as |option|
-          >
-            {{option}}
-          </Hds::Form::SuperSelect::Multiple::Base>
-        </SF.Item>
-      </Shw::Flex>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>List width</Shw::Text::H4>
-
-  <Shw::Flex {{style padding-bottom="16em"}} as |SF|>
-    <SF.Item {{style min-width="10em"}} @label="matchTriggerWidth = true (default)">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_OPTIONS_SINGLE)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS_SINGLE}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-    <SF.Item {{style min-width="26em"}} @label="matchTriggerWidth = false">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_OPTIONS_SINGLE)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS_SINGLE}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @matchTriggerWidth={{false}}
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-    <SF.Item @label="dropdownMaxWidth = 25em">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS_SINGLE)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS_SINGLE}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @dropdownMaxWidth="25em"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Before &amp; after options</Shw::Text::H3>
-
-  <Shw::Flex {{style padding-bottom="18em"}} @direction="row" as |SF|>
-    <SF.Item @label="Before options generic content">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @beforeOptionsComponent={{component "mock/components/form/super-select/generic-content"}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-    {{! left empty on purpose }}
-    <SF.Item />
-  </Shw::Flex>
-
-  <Shw::Flex {{style padding-bottom="15.5em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="After options default content">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="After options no content">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @showAfterOptions={{false}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex {{style padding-bottom="15em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="After options text content in footer">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @afterOptionsContent="After options content"
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="After options generic content in footer">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @afterOptionsComponent={{component "mock/components/form/super-select/generic-content"}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="After options generic content">
-      <Hds::Form::SuperSelect::Multiple::Base
-        @afterOptionsComponent={{component "mock/components/form/super-select/generic-content"}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>Custom result count message</Shw::Text::H4>
-
-  <Shw::Flex {{style padding-bottom="15em" max-width="50%"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}}>
-      <Hds::Form::SuperSelect::Multiple::Base
-        @resultCountMessage={{(fn this.resultCountMessage @model.SELECTED_PLACES_OPTIONS.length)}}
-        @onChange={{fn (mut @model.SELECTED_PLACES_OPTIONS)}}
-        @options={{@model.PLACES_OPTIONS}}
-        @selected={{@model.SELECTED_PLACES_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        @ariaLabel="Label"
-        as |option|
-      >
-        {{option}}
-      </Hds::Form::SuperSelect::Multiple::Base>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Divider />
-
-  <Shw::Text::H2>Form::SuperSelect::Multiple::Field</Shw::Text::H2>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="Only label">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text with link">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text
-          <Hds::Link::Inline @route="index">with a link</Hds::Link::Inline></F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Error">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @isInvalid={{true}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-        <F.Error>This is the error</F.Error>
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text + Error">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @isInvalid={{true}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-        <F.Error>This is the error</F.Error>
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-    <SG.Item @label="Label + Helper text + Errors">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @isInvalid={{true}}
-        as |F|
-      >
-        <F.Label>This is the label</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-        <F.Error as |E|>
-          <E.Message>First error message</E.Message>
-          <E.Message>Second error message</E.Message>
-        </F.Error>
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Required and optional</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="With legend + Required">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @isRequired={{true}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-    <SG.Item @label="With legend + Optional">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @isOptional={{true}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>States</Shw::Text::H3>
-
-  <Shw::Grid @columns={{3}} as |SG|>
-    <SG.Item @label="Disabled">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_OPTIONS)}}
-        @options={{@model.OPTIONS}}
-        @selected={{@model.SELECTED_OPTIONS}}
-        @disabled={{true}}
-        as |F|
-      >
-        <F.Label>Lorem ipsum dolor</F.Label>
-        <F.HelperText>This is the helper text</F.HelperText>
-        {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-        {{F.options}}
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SG.Item>
-  </Shw::Grid>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Complex content</Shw::Text::H3>
-
-  <Shw::Flex {{style padding-bottom="15em"}} @direction="row" as |SF|>
-    <SF.Item {{style flex="1"}} @label="Rich content w/o custom selectedItems">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @selected={{@model.SELECTED_CLUSTER_SIZE_OPTIONS}}
-        @onChange={{fn (mut @model.SELECTED_CLUSTER_SIZE_OPTIONS)}}
-        @options={{@model.CLUSTER_SIZE_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        as |F|
-      >
-        <F.Label>Label</F.Label>
-        <F.Options>
-          {{#let F.options as |option|}}
-            <div class="shw-component-form-super-select-option-rich-header">
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.size}}</strong>
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.price}}/hr</strong>
-            </div>
-            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-            <div>{{option.description}}</div>
-          {{/let}}
-        </F.Options>
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="Rich content with custom selectedItems">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @selected={{@model.SELECTED_CLUSTER_SIZE_OPTIONS}}
-        @selectedItemComponent={{component "mock/components/form/super-select/selected-component-multiple"}}
-        @onChange={{fn (mut @model.SELECTED_CLUSTER_SIZE_OPTIONS)}}
-        @options={{@model.CLUSTER_SIZE_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        as |F|
-      >
-        <F.Label>Label</F.Label>
-        <F.Options>
-          {{#let F.options as |option|}}
-            <div class="shw-component-form-super-select-option-rich-header">
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.size}}</strong>
-              {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-              <strong>{{option.price}}/hr</strong>
-            </div>
-            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-            <div>{{option.description}}</div>
-          {{/let}}
-        </F.Options>
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SF.Item>
-    <SF.Item {{style flex="1"}} @label="Grouped options">
-      <Hds::Form::SuperSelect::Multiple::Field
-        @onChange={{fn (mut @model.SELECTED_GROUPED_OPTIONS)}}
-        @options={{@model.GROUPED_OPTIONS}}
-        @selected={{@model.SELECTED_GROUPED_OPTIONS}}
-        @initiallyOpened={{true}}
-        @verticalPosition="below"
-        as |F|
-      >
-        <F.Label>Label</F.Label>
-        <F.Options>
-          {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
-          {{F.options}}
-        </F.Options>
-      </Hds::Form::SuperSelect::Multiple::Field>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Divider />
-
-  <Shw::Text::H2>Base elements</Shw::Text::H2>
-
-  <Shw::Text::H3>Trigger</Shw::Text::H3>
-
-  <Shw::Flex as |SF|>
-    {{#each @model.STATES as |state|}}
-      <SF.Item @label={{capitalize state}}>
-        <div class="hds-form-super-select">
-          <div class="ember-basic-dropdown">
-            <div class="ember-power-select-trigger" mock-state-value={{state}}>
-              <span class="ember-power-select-selected-item">
-                <span class="hds-text hds-typography-body-200 hds-font-weight-regular">Option</span>
-              </span>
-              <span class="ember-power-select-status-icon"></span>
-            </div>
-          </div>
-        </div>
-      </SF.Item>
-    {{/each}}
-  </Shw::Flex>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Dropdown</Shw::Text::H3>
-
-  <Shw::Text::H4>Search input</Shw::Text::H4>
-
-  <Shw::Flex as |SF|>
-    {{#each @model.STATES as |state|}}
-      <SF.Item @label={{capitalize state}}>
-        <div class="hds-form-super-select">
-          <div class="ember-basic-dropdown">
-            <Shw::Outliner>
-              <div class="ember-power-select-search">
-                <input
-                  class="ember-power-select-search-input"
-                  type="search"
-                  placeholder="Search"
-                  aria-label="Search input"
-                  mock-state-value={{state}}
-                />
-              </div>
-            </Shw::Outliner>
-          </div>
-        </div>
-      </SF.Item>
-    {{/each}}
-  </Shw::Flex>
-
-  <Shw::Text::H4>Options (single selection)</Shw::Text::H4>
-
-  <Shw::Flex as |SG|>
-    <SG.Item @label="Default">
-      <div class="hds-form-super-select hds-form-super-select-single">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label">
-              {{! there is no focused state for the `select-option` }}
-              {{#let (array "default" "hover" "active") as |states|}}
-                {{#each states as |state|}}
-                  <li class="ember-power-select-option" role="option" mock-state-value={{state}}>
-                    {{state}}
-                  </li>
-                {{/each}}
-              {{/let}}
-              <li class="ember-power-select-option" role="option" aria-disabled="true">
-                disabled
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </SG.Item>
-    <SG.Item @label="Selected">
-      <div class="hds-form-super-select hds-form-super-select-single">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label">
-              {{! there is no focused state for the `select-option` }}
-              {{#let (array "default" "hover" "active") as |states|}}
-                {{#each states as |state|}}
-                  <li class="ember-power-select-option" aria-selected="true" role="option" mock-state-value={{state}}>
-                    {{state}}
-                  </li>
-                {{/each}}
-              {{/let}}
-              <li class="ember-power-select-option" role="option" aria-selected="true" aria-disabled="true">
-                disabled
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </SG.Item>
-    <SG.Item @label="With very long text" {{style width="200px"}}>
-      <div class="hds-form-super-select hds-form-super-select-single">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-              {{! there is no focused state for the `select-option` }}
-              {{#let (array "default" "hover" "active") as |states|}}
-                {{#each states as |state|}}
-                  <li class="ember-power-select-option" aria-selected="true" role="option" mock-state-value={{state}}>
-                    {{state}}
-                    - this is a long text that should wrap on multiple lines
-                  </li>
-                {{/each}}
-              {{/let}}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </SG.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>Options (multiple selection)</Shw::Text::H4>
-
-  <Shw::Flex as |SG|>
-    <SG.Item @label="Default">
-      <div class="hds-form-super-select hds-form-super-select-multiple">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label">
-              {{! there is no focused state for the `select-option` }}
-              {{#let (array "default" "hover" "active") as |states|}}
-                {{#each states as |state|}}
-                  <li class="ember-power-select-option" role="option" mock-state-value={{state}}>
-                    {{state}}
-                  </li>
-                {{/each}}
-              {{/let}}
-              <li class="ember-power-select-option" role="option" aria-disabled="true">
-                disabled
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </SG.Item>
-    <SG.Item @label="Selected">
-      <div class="hds-form-super-select hds-form-super-select-multiple">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label">
-              {{! there is no focused state for the `select-option` }}
-              {{#let (array "default" "hover" "active") as |states|}}
-                {{#each states as |state|}}
-                  <li class="ember-power-select-option" role="option" aria-selected="true" mock-state-value={{state}}>
-                    {{state}}
-                  </li>
-                {{/each}}
-              {{/let}}
-              <li class="ember-power-select-option" role="option" aria-selected="true" aria-disabled="true">
-                disabled
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </SG.Item>
-    <SG.Item @label="With very long text" {{style width="200px"}}>
-      <div class="hds-form-super-select hds-form-super-select-multiple">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-              {{! there is no focused state for the `select-option` }}
-              {{#let (array "default" "hover" "active") as |states|}}
-                {{#each states as |state|}}
-                  <li class="ember-power-select-option" aria-selected="true" role="option" mock-state-value={{state}}>
-                    {{state}}
-                    - this is a long text that should wrap on multiple lines
-                  </li>
-                {{/each}}
-              {{/let}}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </SG.Item>
-  </Shw::Flex>
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Form::SuperSelect::OptionGroup</Shw::Text::H3>
-
-  {{#let (array "single" "multiple") as |variants|}}
-    {{#each variants as |variant|}}
-      <Shw::Flex as |SG|>
-        <SG.Item @label="{{capitalize variant}} / Flat">
-          <div class="hds-form-super-select hds-form-super-select-{{variant}}">
-            <div class="ember-basic-dropdown">
-              <div class="ember-basic-dropdown-content" {{style position="static"}}>
-                <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-                  <Hds::Form::SuperSelect::OptionGroup
-                    @group={{hash groupName="Title for first group (with no content)"}}
-                  />
-                  <Hds::Form::SuperSelect::OptionGroup
-                    @group={{hash groupName="Title for second group (with generic content)"}}
-                  >
-                    <Shw::Placeholder @text="Second group - Generic content" @height="40px" />
-                  </Hds::Form::SuperSelect::OptionGroup>
-                  <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for third group (with options)"}}>
-                    {{! template-lint-disable require-context-role }}
-                    <li class="ember-power-select-option" role="option" mock-state-value="hover">
-                      Option 1
-                    </li>
-                    <li class="ember-power-select-option" role="option">
-                      Option 2
-                    </li>
-                  </Hds::Form::SuperSelect::OptionGroup>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </SG.Item>
-        <SG.Item @label="{{capitalize variant}} / Nested">
-          <div class="hds-form-super-select hds-form-super-select-{{variant}}">
-            <div class="ember-basic-dropdown">
-              <div class="ember-basic-dropdown-content" {{style position="static"}}>
-                <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-                  <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for first level"}}>
-                    {{! template-lint-disable require-context-role }}
-                    <li class="ember-power-select-option" role="option" mock-state-value="hover">
-                      Level 1 - Option 1A
-                    </li>
-                    <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for second level"}}>
-                      {{! template-lint-disable require-context-role }}
-                      <li class="ember-power-select-option" role="option" mock-state-value="hover">
-                        Level 2 - Option 2A
-                      </li>
-                      <li class="ember-power-select-option" role="option">
-                        Level 2 - Option 2B
-                      </li>
-                      <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Title for third level"}}>
-                        {{! template-lint-disable require-context-role }}
-                        <li class="ember-power-select-option" role="option" mock-state-value="hover">
-                          Level 3 - Option 3A
-                        </li>
-                        <li class="ember-power-select-option" role="option">
-                          Level 3 - Option 3B
-                        </li>
-                      </Hds::Form::SuperSelect::OptionGroup>
-                    </Hds::Form::SuperSelect::OptionGroup>
-                    <Hds::Form::SuperSelect::OptionGroup
-                      @group={{hash groupName="Title for second level (with generic content)"}}
-                    >
-                      <Shw::Placeholder @text="Second group - Generic content" @height="40px" />
-                    </Hds::Form::SuperSelect::OptionGroup>
-                    <li class="ember-power-select-option" role="option">
-                      Level 1 - Option 1B
-                    </li>
-                  </Hds::Form::SuperSelect::OptionGroup>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </SG.Item>
-      </Shw::Flex>
-    {{/each}}
-  {{/let}}
-
-  <Shw::Divider @level={{2}} />
-
-  <Shw::Text::H3>Form::SuperSelect::AfterOptions</Shw::Text::H3>
-
-  <Shw::Text::H3>Content</Shw::Text::H3>
-
-  <Shw::Flex as |SF|>
-    <SF.Item @label="No text arguments">
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @clearSelected={{this.noop}}
-          @showSelected={{this.noop}}
-          @showAll={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex as |SF|>
-    <SF.Item @label="with @showNoSelectedMessage=true">
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @showNoSelectedMessage={{true}}
-          @clearSelected={{this.noop}}
-          @showSelected={{this.noop}}
-          @showAll={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Flex @direction="column" as |SF|>
-    <SF.Item @label="with @content (text)" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @content="Lorem ipsum dolor"
-          @clearSelected={{this.noop}}
-          @showAll={{this.noop}}
-          @showSelected={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-    <SF.Item @label="with @content with long test" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @content="This is the a very very very very very very long text that should wrap on multiple lines"
-          @clearSelected={{this.noop}}
-          @showAll={{this.noop}}
-          @showSelected={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-    <SF.Item @label="with @showAll & @selectedCount=0" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @showAll={{this.noop}}
-          @showOnlySelected={{true}}
-          @selectedCount="0"
-          @resultCountMessage="This is the resultCountMessage"
-          @clearSelected={{this.noop}}
-          @showSelected={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-    <SF.Item @label="with @showAll & @selectedCount>0" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @showAll={{this.noop}}
-          @showOnlySelected={{true}}
-          @selectedCount="123"
-          @clearSelected={{this.noop}}
-          @resultCountMessage="This is the resultCountMessage"
-          @showSelected={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-    <SF.Item @label="with @showSelected & @selectedCount=0" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @showSelected={{this.noop}}
-          @selectedCount="0"
-          @resultCountMessage="This is the resultCountMessage"
-          @clearSelected={{this.noop}}
-          @showAll={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-    <SF.Item @label="with @showSelected & @selectedCount>0" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @showSelected={{this.noop}}
-          @selectedCount="123"
-          @clearSelected={{this.noop}}
-          @resultCountMessage="This is the resultCountMessage"
-          @showAll={{this.noop}}
-        />
-      </Shw::Outliner>
-    </SF.Item>
-    <SF.Item @label="with @resultCountMessage with long text" {{style max-width="500px"}}>
-      <Shw::Outliner>
-        <Hds::Form::SuperSelect::AfterOptions
-          @showNoSelectedMessage={{true}}
-          @showAll={{this.noop}}
-          @showSelected={{this.noop}}
-          @clearSelected={{this.noop}}
-          @selectedCount="123"
-          @resultCountMessage="This is the a very very very long text that should wrap on multiple lines"
-        />
-      </Shw::Outliner>
-    </SF.Item>
-  </Shw::Flex>
-
-  <Shw::Text::H4>Within a dropdown with options</Shw::Text::H4>
-
-  <Shw::Flex as |SF|>
-    <SF.Item @label="Single level">
-      <div class="hds-form-super-select hds-form-super-select-multiple">
-        <div class="ember-basic-dropdown">
-          <div class="ember-basic-dropdown-content ember-power-select-dropdown" {{style position="static"}}>
-            <ul class="ember-power-select-options" role="listbox" aria-label="Label" {{style max-height="none"}}>
-              <Hds::Form::SuperSelect::OptionGroup @group={{hash groupName="Lorem ipsum dolor"}}>
-                {{! template-lint-disable require-context-role }}
-                <li class="ember-power-select-option" role="option" aria-selected="true">
-                  Option 1
-                </li>
-                <li class="ember-power-select-option" role="option">
-                  Option 2
-                </li>
-              </Hds::Form::SuperSelect::OptionGroup>
-            </ul>
-            <Hds::Form::SuperSelect::AfterOptions
-              @showAll={{this.noop}}
-              @showSelected={{this.noop}}
-              @clearSelected={{this.noop}}
-              @selectedCount="123"
-              @resultCountMessage="1 selected of 2 total"
-            />
-          </div>
-        </div>
-      </div>
-    </SF.Item>
-  </Shw::Flex>
-</section>
\ No newline at end of file
diff --git a/showcase/types/template-registry.ts b/showcase/types/template-registry.ts
index 0f3840300ab..33350d69ba7 100644
--- a/showcase/types/template-registry.ts
+++ b/showcase/types/template-registry.ts
@@ -35,10 +35,6 @@ import MockAppFooterAppFooter from '../app/components/mock/app/footer/app-footer
 import MockDemoBreakpointsRuler from '../app/components/mock/demo/breakpoints-ruler';
 import MockDemoBreakpointsVisualization from '../app/components/mock/demo/breakpoints-visualization';
 
-import MockFormSuperSelectGenericContent from '../app/components/mock/components/form/super-select/generic-content';
-import MockFormSuperSelectSelectedComponentSingle from '../app/components/mock/components/form/super-select/selected-component-single';
-import MockFormSuperSelectSelectedComponentMultiple from '../app/components/mock/components/form/super-select/selected-component-multiple';
-
 export default interface ShowcaseTemplateRegistry {
   // SHW COMPONENTS
   'Shw::Autoscrollable': typeof ShwAutoscrollable;
@@ -102,12 +98,4 @@ export default interface ShowcaseTemplateRegistry {
   'mock/demo/breakpoints-visualizaton': typeof MockDemoBreakpointsVisualization;
   'Mock::Demo::BreakpointsRuler': typeof MockDemoBreakpointsRuler;
   'mock/demo/breakpoints-ruler': typeof MockDemoBreakpointsRuler;
-
-  // MOCK COMPONENTS
-  'Mock::Form::SuperSelect::GenericContent': typeof MockFormSuperSelectGenericContent;
-  'mock/components/form/super-select/generic-content': typeof MockFormSuperSelectGenericContent;
-  'Mock::Form::SuperSelect::SelectedComponentSingle': typeof MockFormSuperSelectSelectedComponentSingle;
-  'mock/components/form/super-select/selected-component-single': typeof MockFormSuperSelectSelectedComponentSingle;
-  'Mock::Form::SuperSelect::SelectedComponentMultiple': typeof MockFormSuperSelectSelectedComponentMultiple;
-  'mock/components/form/super-select/selected-component-multiple': typeof MockFormSuperSelectSelectedComponentMultiple;
 }