diff --git a/showcase/app/components/mock/app/index.gts b/showcase/app/components/mock/app/index.gts
index e8ffe853e0b..ed015abfa17 100644
--- a/showcase/app/components/mock/app/index.gts
+++ b/showcase/app/components/mock/app/index.gts
@@ -11,6 +11,8 @@ import MockAppSidebarOldSideNav from './sidebar/side-nav';
 import MockAppMainPageHeader from './main/page-header';
 import MockAppMainGenericTextContent from './main/generic-text-content';
 import MockAppMainGenericAdvancedTable from './main/generic-advanced-table';
+import MockAppMainGenericDropdownFilter from './main/generic-filter/generic-dropdown-filter';
+import MockAppMainGenericSuperSelectFilter from './main/generic-filter/generic-super-select-filter';
 import MockAppFooterAppFooter from './footer/app-footer';
 
 // HDS components
@@ -25,6 +27,8 @@ import type { MockAppSidebarOldSideNavSignature } from './sidebar/side-nav';
 import type { MockAppMainPageHeaderSignature } from './main/page-header';
 import type { MockAppMainGenericTextContentSignature } from './main/generic-text-content';
 import type { MockAppMainGenericAdvancedTableSignature } from './main/generic-advanced-table';
+import type { MockAppMainGenericDropdownFilterSignature } from './main/generic-filter/generic-dropdown-filter';
+import type { MockAppMainGenericSuperSelectFilterSignature } from './main/generic-super-select-filter';
 import type { MockAppFooterAppFooterSignature } from './footer/app-footer';
 
 export interface MockAppSignature {
@@ -52,6 +56,8 @@ export interface MockAppSignature {
         PageHeader?: ComponentLike<MockAppMainPageHeaderSignature>;
         GenericTextContent?: ComponentLike<MockAppMainGenericTextContentSignature>;
         GenericAdvancedTable?: ComponentLike<MockAppMainGenericAdvancedTableSignature>;
+        GenericDropdownFilter?: ComponentLike<MockAppMainGenericDropdownFilterSignature>;
+        GenericSuperSelectFilter?: ComponentLike<MockAppMainGenericSuperSelectFilterSignature>;
       },
     ];
     footer?: [
@@ -98,6 +104,8 @@ export default class MockApp extends Component<MockAppSignature> {
               PageHeader=MockAppMainPageHeader
               GenericTextContent=MockAppMainGenericTextContent
               GenericAdvancedTable=MockAppMainGenericAdvancedTable
+              GenericDropdownFilter=MockAppMainGenericDropdownFilter
+              GenericSuperSelectFilter=MockAppMainGenericSuperSelectFilter
             )
             to="main"
           }}
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/checkbox.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/checkbox.gts
new file mode 100644
index 00000000000..10190c8d658
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/checkbox.gts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import type { WithBoundArgs } from '@glint/template';
+
+import type { Filter } from './index';
+
+// HDS components
+import { HdsDropdownListItemCheckbox } from '@hashicorp/design-system-components/components';
+
+import type { HdsDropdownSignature } from '@hashicorp/design-system-components/components/hds/dropdown/index';
+
+export interface MockAppMainGenericFilterBarCheckboxSignature {
+  Args: HdsDropdownSignature['Args'] & {
+    checkbox?: WithBoundArgs<typeof HdsDropdownListItemCheckbox, never>;
+    value?: string;
+    keyFilter: Filter[] | Filter | undefined;
+    onChange?: (event: Event) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class MockAppMainGenericFilterBarCheckbox extends Component<MockAppMainGenericFilterBarCheckboxSignature> {
+  @action
+  onChange(event: Event): void {
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(event);
+    }
+  }
+
+  get isChecked(): boolean {
+    const { keyFilter, value } = this.args;
+    if (Array.isArray(keyFilter)) {
+      return keyFilter.some((filter) => filter.value === value);
+    } else if (keyFilter && value) {
+      return keyFilter.value === value;
+    }
+    return false;
+  }
+
+  <template>
+    {{#let @checkbox as |Checkbox|}}
+      <Checkbox
+        checked={{this.isChecked}}
+        @value={{@value}}
+        {{on "change" this.onChange}}
+      >
+        {{yield}}
+      </Checkbox>
+    {{/let}}
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/dropdown.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/dropdown.gts
new file mode 100644
index 00000000000..1afa9f04df0
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/dropdown.gts
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { hash } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import type { WithBoundArgs } from '@glint/template';
+
+import MockAppMainGenericFilterBarCheckbox from './checkbox';
+import MockAppMainGenericFilterBarRadio from './radio';
+
+// HDS components
+import {
+  HdsButton,
+  HdsButtonSet,
+  HdsDropdown,
+  HdsDropdownToggleButton,
+} from '@hashicorp/design-system-components/components';
+
+import type { Filters, Filter } from './index';
+import type { HdsDropdownSignature } from '@hashicorp/design-system-components/components/hds/dropdown/index';
+
+export interface MockAppMainGenericFilterBarDropdownSignature {
+  Args: HdsDropdownSignature['Args'] & {
+    dropdown?: WithBoundArgs<typeof HdsDropdown, never>;
+    key: string;
+    filters: Filters;
+    isMultiSelect?: boolean;
+    isLiveFilter?: boolean;
+    onChange: (key: string, keyFilter?: Filter[]) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        ToggleButton?: WithBoundArgs<
+          typeof HdsDropdownToggleButton,
+          'color' | 'text'
+        >;
+        Checkbox?: WithBoundArgs<
+          typeof MockAppMainGenericFilterBarCheckbox,
+          'checkbox' | 'keyFilter' | 'onChange'
+        >;
+        Radio?: WithBoundArgs<
+          typeof MockAppMainGenericFilterBarRadio,
+          'radio' | 'keyFilter' | 'onChange'
+        >;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class MockAppMainGenericFilterBarDropdown extends Component<
+  HdsDropdownSignature & MockAppMainGenericFilterBarDropdownSignature
+> {
+  @tracked internalFilters: Filter[] | Filter | undefined = [];
+
+  private _updateInternalFilters = modifier(() => {
+    this.internalFilters = this.keyFilter;
+  });
+
+  get keyFilter(): Filter[] | Filter | undefined {
+    const { filters, key } = this.args;
+
+    if (!filters) {
+      return undefined;
+    }
+    return filters[key];
+  }
+
+  @action
+  onChange(event: Event): void {
+    const addFilter = (value: unknown): Filter[] => {
+      const newFilter = {
+        text: value as string,
+        value: value,
+      };
+      if (
+        Array.isArray(this.internalFilters) &&
+        input.classList.contains('hds-form-checkbox')
+      ) {
+        this.internalFilters.push(newFilter);
+        return this.internalFilters;
+      } else {
+        return [newFilter];
+      }
+    };
+
+    const removeFilter = (value: string): Filter[] => {
+      const newFilter = [] as Filter[];
+      if (Array.isArray(this.internalFilters)) {
+        this.internalFilters.forEach((filter) => {
+          if (filter.value != value) {
+            newFilter.push(filter);
+          }
+        });
+      }
+      return newFilter;
+    };
+
+    const input = event.target as HTMLInputElement;
+
+    let newFilter = [] as Filter[];
+
+    if (input.checked) {
+      newFilter = addFilter(input.value);
+    } else {
+      newFilter = removeFilter(input.value);
+    }
+
+    this.internalFilters = newFilter;
+
+    if (this.args.isLiveFilter) {
+      const { onChange } = this.args;
+      if (onChange && typeof onChange === 'function') {
+        if (newFilter.length === 0) {
+          onChange(this.args.key, undefined);
+        } else {
+          onChange(this.args.key, newFilter);
+        }
+      }
+    }
+  }
+
+  @action
+  onApply(): void {
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.internalFilters);
+    }
+  }
+
+  @action
+  onClear(): void {
+    this.internalFilters = [];
+
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.internalFilters);
+    }
+  }
+
+  <template>
+    {{! @glint-nocheck }}
+    <HdsDropdown
+      @listPosition="bottom-left"
+      @height="200px"
+      {{this._updateInternalFilters}}
+      as |D|
+    >
+      {{yield
+        (hash
+          ToggleButton=(component D.ToggleButton text=@text color="secondary")
+          Checkbox=(component
+            MockAppMainGenericFilterBarCheckbox
+            checkbox=D.Checkbox
+            keyFilter=this.internalFilters
+            onChange=this.onChange
+          )
+          Radio=(component
+            MockAppMainGenericFilterBarRadio
+            radio=D.Radio
+            keyFilter=this.internalFilters
+            onChange=this.onChange
+          )
+        )
+      }}
+      {{#unless @isLiveFilter}}
+        <D.Footer @hasDivider={{true}}>
+          <HdsButtonSet>
+            <HdsButton
+              @text="Apply filters"
+              @isFullWidth={{true}}
+              @size="small"
+              {{on "click" this.onApply}}
+            />
+            <HdsButton
+              @text="Clear"
+              @color="secondary"
+              @size="small"
+              {{on "click" this.onClear}}
+            />
+          </HdsButtonSet>
+        </D.Footer>
+      {{/unless}}
+    </HdsDropdown>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/index.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/index.gts
new file mode 100644
index 00000000000..483401394eb
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/index.gts
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { deepTracked } from 'ember-deep-tracked';
+import { fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { eq, notEq } from 'ember-truth-helpers';
+
+// HDS components
+import {
+  HdsButton,
+  HdsTag,
+  HdsTextBody,
+  HdsFormTextInputBase,
+} from '@hashicorp/design-system-components/components';
+
+import type { WithBoundArgs } from '@glint/template';
+import MockAppMainGenericFilterBarDropdown from './dropdown';
+import MockAppMainGenericFilterBarSegmentedGroup from './segmented-group';
+import MockAppMainGenericFilterBarSuperSelect from './super-select';
+
+export interface Filter {
+  text: string;
+  value: unknown;
+}
+
+export interface Filters {
+  [name: string]: Filter | Filter[] | undefined;
+}
+
+export interface MockAppMainGenericFilterBarSignature {
+  Args: {
+    filters: Filters;
+    type?: 'super-select' | 'dropdown';
+    isLiveFilter?: boolean;
+    onFilter?: (filters: Filters) => void;
+  };
+  Blocks: {
+    default?: [
+      {
+        SuperSelect?: WithBoundArgs<
+          typeof MockAppMainGenericFilterBarSuperSelect,
+          'onChange' | 'filters' | 'isLiveFilter'
+        >;
+        Dropdown?: WithBoundArgs<
+          typeof MockAppMainGenericFilterBarDropdown,
+          'onChange' | 'filters'
+        >;
+        SegmentedGroup?: WithBoundArgs<
+          typeof MockAppMainGenericFilterBarSegmentedGroup,
+          'onChange' | 'filters'
+        >;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+export default class MockAppMainGenericFilterBar extends Component<MockAppMainGenericFilterBarSignature> {
+  @deepTracked filters: Filters = this.args.filters;
+  @tracked hasActiveFilters: boolean = Object.keys(this.filters).length > 0;
+
+  @action
+  onFilter(key: string, keyFilter?: Filter[]): void {
+    this._updateFilter(key, keyFilter);
+
+    this.hasActiveFilters = Object.keys(this.filters).length > 0;
+
+    const { onFilter } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(this.filters);
+    }
+  }
+
+  @action
+  clearFilters(): void {
+    this.filters = {};
+    this.hasActiveFilters = false;
+    const { onFilter } = this.args;
+    if (onFilter && typeof onFilter === 'function') {
+      onFilter(this.filters);
+    }
+  }
+
+  private _updateFilter(key: string, keyFilter?: Filter[]): void {
+    const newFilters = { ...this.filters };
+    if (
+      !keyFilter ||
+      (keyFilter && Array.isArray(keyFilter) && keyFilter.length === 0)
+    ) {
+      delete newFilters[key];
+    } else {
+      newFilters[key] = keyFilter;
+    }
+    this.filters = newFilters;
+  }
+
+  private onFilterDismiss = (key: string, filterValue: string): void => {
+    const oldFilter = this.filters[key];
+    let newFilter: Filter[] = [];
+    if (Array.isArray(oldFilter)) {
+      newFilter = oldFilter.filter((filter) => filter.value !== filterValue);
+    }
+    this.onFilter(key, newFilter);
+  };
+
+  <template>
+    <div class="mock-app-main-generic-filter-bar">
+      <div class="filters">
+        {{#if (eq @type "super-select")}}
+          <HdsFormTextInputBase
+            class="filter__search"
+            @type="search"
+            name="filter-search"
+            placeholder="Search"
+          />
+        {{/if}}
+        {{yield
+          (hash
+            SuperSelect=(component
+              MockAppMainGenericFilterBarSuperSelect
+              onChange=this.onFilter
+              filters=this.filters
+              isLiveFilter=@isLiveFilter
+            )
+            SegmentedGroup=(component
+              MockAppMainGenericFilterBarSegmentedGroup
+              onChange=this.onFilter
+              filters=this.filters
+              isLiveFilter=@isLiveFilter
+            )
+            Dropdown=(component
+              MockAppMainGenericFilterBarDropdown
+              onChange=this.onFilter
+              filters=this.filters
+            )
+          )
+        }}
+      </div>
+      {{#if this.hasActiveFilters}}
+        <div class="filter-actions">
+          {{#if (notEq @type "super-select")}}
+            <HdsTextBody @size="100" @color="faint">Active Filters:</HdsTextBody>
+            {{#each-in this.filters as |key filter|}}
+              {{#if filter}}
+                {{#each filter as |f|}}
+                  <HdsTag
+                    @text="{{key}}: {{f.text}}"
+                    @onDismiss={{fn this.onFilterDismiss key f.value}}
+                  />
+                {{/each}}
+              {{/if}}
+            {{/each-in}}
+          {{/if}}
+          <HdsButton
+            @text="Clear all filters"
+            @color="tertiary"
+            @icon="x"
+            @size="small"
+            {{on "click" this.clearFilters}}
+          />
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/radio.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/radio.gts
new file mode 100644
index 00000000000..a23f633d3b8
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/radio.gts
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import type { WithBoundArgs } from '@glint/template';
+
+import type { Filter } from './index';
+
+// HDS components
+import { HdsDropdownListItemRadio } from '@hashicorp/design-system-components/components';
+
+import type { HdsDropdownSignature } from '@hashicorp/design-system-components/components/hds/dropdown/index';
+
+export interface MockAppMainGenericFilterBarRadioSignature {
+  Args: HdsDropdownSignature['Args'] & {
+    radio?: WithBoundArgs<typeof HdsDropdownListItemRadio, never>;
+    value?: string;
+    keyFilter: Filter[] | Filter | undefined;
+    onChange?: (event: Event) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class MockAppMainGenericFilterBarRadio extends Component<MockAppMainGenericFilterBarRadioSignature> {
+  @action
+  onChange(event: Event): void {
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(event);
+    }
+  }
+
+  get isChecked(): boolean {
+    const { keyFilter, value } = this.args;
+    if (Array.isArray(keyFilter)) {
+      return keyFilter.some((filter) => filter.value === value);
+    } else if (keyFilter && value) {
+      return keyFilter.value === value;
+    }
+    return false;
+  }
+
+  <template>
+    {{#let @radio as |Radio|}}
+      <Radio
+        checked={{this.isChecked}}
+        @value={{@value}}
+        {{on "change" this.onChange}}
+      >
+        {{yield}}
+      </Radio>
+    {{/let}}
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/segmented-group.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/segmented-group.gts
new file mode 100644
index 00000000000..97c1dd60246
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/segmented-group.gts
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import type { WithBoundArgs } from '@glint/template';
+import { hash } from '@ember/helper';
+
+import MockAppMainGenericFilterBarDropdown from './dropdown';
+
+// HDS components
+import { HdsSegmentedGroup } from '@hashicorp/design-system-components/components';
+
+import type { Filters, Filter } from './index';
+
+export interface MockAppMainGenericFilterBarSegmentedGroupSignature {
+  Args: {
+    filters: Filters;
+    isLiveFilter?: boolean;
+    onChange: (key: string, keyFilter?: Filter[]) => void;
+  };
+  Blocks: {
+    default: [
+      {
+        Dropdown?: WithBoundArgs<
+          typeof MockAppMainGenericFilterBarDropdown,
+          'dropdown' | 'filters' | 'isLiveFilter' | 'onChange'
+        >;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class MockAppMainGenericFilterBarSegmentedGroup extends Component<MockAppMainGenericFilterBarSegmentedGroupSignature> {
+  @action
+  onChange(key: string, keyFilter?: Filter[]): void {
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(key, keyFilter);
+    }
+  }
+
+  <template>
+    <HdsSegmentedGroup as |SG|>
+      <SG.TextInput
+        @type="search"
+        name="demo-filter-search"
+        placeholder="Search"
+        aria-label="Search"
+      />
+      {{yield
+        (hash
+          Dropdown=(component
+            MockAppMainGenericFilterBarDropdown
+            dropdown=SG.Dropdown
+            filters=@filters
+            isLiveFilter=@isLiveFilter
+            onChange=this.onChange
+          )
+        )
+      }}
+    </HdsSegmentedGroup>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/super-select-footer.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/super-select-footer.gts
new file mode 100644
index 00000000000..f0f1ff315cf
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/super-select-footer.gts
@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { on } from '@ember/modifier';
+import type { WithBoundArgs } from '@glint/template';
+
+// HDS components
+import { HdsButton } from '@hashicorp/design-system-components/components';
+
+import type { HdsButtonSignature } from '@hashicorp/design-system-components/components/hds/button/index';
+
+export interface MockAppMainGenericFilterBarSuperSelectFooterSignature {
+  Args: HdsButtonSignature['Args'] & {
+    button?: WithBoundArgs<typeof HdsButton, never>;
+    onClick: (event: Event) => void;
+    onClear: (event: Event) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+const MockAppMainGenericFilterBarSuperSelectFooter: TemplateOnlyComponent<MockAppMainGenericFilterBarSuperSelectFooterSignature> =
+  <template>
+    <div class="filter__super-select__footer">
+      <HdsButton
+        {{on "click" @onClick}}
+        @color="primary"
+        @text="Apply"
+        @size="small"
+      />
+      <HdsButton
+        {{on "click" @onClear}}
+        @color="secondary"
+        @text="Clear all"
+        @size="small"
+      />
+    </div>
+  </template>;
+
+export default MockAppMainGenericFilterBarSuperSelectFooter;
diff --git a/showcase/app/components/mock/app/main/generic-filter/filter-bar/super-select.gts b/showcase/app/components/mock/app/main/generic-filter/filter-bar/super-select.gts
new file mode 100644
index 00000000000..0561103cf9e
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/filter-bar/super-select.gts
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
+
+import MockAppMainGenericFilterBarSuperSelectFooter from './super-select-footer';
+
+import type { HdsFormSuperSelectSingleFieldSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/single/field';
+import type { HdsFormSuperSelectMultipleFieldSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/field';
+
+// HDS components
+import {
+  HdsFormSuperSelectMultipleField,
+  HdsFormSuperSelectSingleField,
+} from '@hashicorp/design-system-components/components';
+
+import type { Filters, Filter } from './index';
+
+export interface MockAppMainGenericFilterBarSuperSelectSignature {
+  Args: HdsFormSuperSelectMultipleFieldSignature['Args'] &
+    HdsFormSuperSelectSingleFieldSignature['Args'] & {
+      key: string;
+      text: string;
+      filters: Filters;
+      options: Array<string>;
+      isMultiSelect?: boolean;
+      isLiveFilter?: boolean;
+      onChange: (key: string, keyFilter?: Filter[]) => void;
+    };
+  Element: HTMLDivElement;
+}
+
+export default class MockAppMainGenericFilterBarSuperSelectFilter extends Component<MockAppMainGenericFilterBarSuperSelectSignature> {
+  @tracked internalFilters: Filter[] | Filter | undefined = [];
+
+  private _updateInternalFilters = modifier(() => {
+    this.internalFilters = this.keyFilter;
+  });
+
+  get keyFilter(): Filter[] | Filter | undefined {
+    const { filters, key } = this.args;
+
+    if (!filters) {
+      return undefined;
+    }
+    return filters[key];
+  }
+
+  get selectedOptions(): string | string[] | null {
+    if (this.internalFilters) {
+      if (Array.isArray(this.internalFilters)) {
+        const values = this.internalFilters.map(
+          (filter) => filter.value as string,
+        );
+        return values;
+      } else {
+        return this.internalFilters.value as string;
+      }
+    }
+    return null;
+  }
+
+  @action
+  onChange(selectedValues: string | string[] | null): void {
+    let filters: Filter[] | undefined;
+
+    if (Array.isArray(selectedValues)) {
+      if (selectedValues.length === 0) {
+        filters = undefined;
+      } else {
+        filters = selectedValues.map((value) => ({
+          text: value,
+          value: value,
+        }));
+      }
+    } else if (selectedValues != null) {
+      filters = [
+        {
+          text: selectedValues,
+          value: selectedValues,
+        },
+      ];
+    }
+
+    this.internalFilters = filters;
+
+    if (this.args.isLiveFilter) {
+      const { onChange } = this.args;
+      if (onChange && typeof onChange === 'function') {
+        onChange(this.args.key, this.internalFilters);
+      }
+    }
+  }
+
+  @action
+  onApply(): void {
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.internalFilters);
+    }
+  }
+
+  @action
+  onClear(): void {
+    this.internalFilters = [];
+
+    const { onChange } = this.args;
+    if (onChange && typeof onChange === 'function') {
+      onChange(this.args.key, this.internalFilters);
+    }
+  }
+
+  <template>
+    <div class="filter__super-select" {{this._updateInternalFilters}}>
+      {{#if @isMultiSelect}}
+        <HdsFormSuperSelectMultipleField
+          @onChange={{this.onChange}}
+          @selected={{this.selectedOptions}}
+          @options={{@options}}
+          @searchEnabled={{@searchEnabled}}
+          @afterOptionsComponent={{unless
+            @isLiveFilter
+            (component
+              MockAppMainGenericFilterBarSuperSelectFooter
+              onClick=this.onApply
+              onClear=this.onClear
+            )
+          }}
+          as |F|
+        >
+          <F.Label>{{@text}}</F.Label>
+          <F.Options>
+            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+            {{F.options}}
+          </F.Options>
+        </HdsFormSuperSelectMultipleField>
+      {{else}}
+        <HdsFormSuperSelectSingleField
+          @onChange={{this.onChange}}
+          @selected={{this.selectedOptions}}
+          @options={{@options}}
+          @afterOptionsComponent={{unless
+            @isLiveFilter
+            (component
+              MockAppMainGenericFilterBarSuperSelectFooter
+              onClick=this.onApply
+              onClear=this.onClear
+            )
+          }}
+          as |F|
+        >
+          <F.Label>{{@text}}</F.Label>
+          <F.Options>
+            {{! @glint-expect-error - https://hashicorp.atlassian.net/browse/HDS-5090 }}
+            {{F.options}}
+          </F.Options>
+        </HdsFormSuperSelectSingleField>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/generic-dropdown-filter.gts b/showcase/app/components/mock/app/main/generic-filter/generic-dropdown-filter.gts
new file mode 100644
index 00000000000..14bd76d13b0
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/generic-dropdown-filter.gts
@@ -0,0 +1,719 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { deepTracked } from 'ember-deep-tracked';
+import { get } from '@ember/helper';
+import { on } from '@ember/modifier';
+
+// HDS components
+import {
+  HdsAdvancedTable,
+  HdsLinkInline,
+  HdsBadge,
+  HdsBadgeColorValues,
+  HdsFormToggleField,
+} from '@hashicorp/design-system-components/components';
+
+import type { HdsAdvancedTableSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/index';
+import type { HdsAdvancedTableOnSelectionChangeSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/types';
+
+import MockAppMainGenericFilterBar from './filter-bar/index';
+
+import type { Filters } from './filter-bar/index';
+
+export interface MockAppMainGenericDropdownFilterSignature {
+  Element: HTMLDivElement;
+}
+
+const SAMPLE_COLUMNS = [
+  {
+    isSortable: true,
+    label: 'Name',
+    key: 'name',
+    width: 'max-content',
+  },
+  {
+    label: 'Project name',
+    key: 'project-name',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Current run ID',
+    key: 'current-run-id',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Run status',
+    key: 'run-status',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Current run applied',
+    key: 'current-run-applied',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'VCS repo',
+    key: 'vcs-repo',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Module count',
+    key: 'module-count',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Modules',
+    key: 'modules',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Provider count',
+    key: 'provider-count',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Providers',
+    key: 'providers',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Terraform version',
+    key: 'terraform-version',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'State terraform version',
+    key: 'state-terraform-version',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Created',
+    key: 'created',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Updated',
+    key: 'updated',
+    isSortable: true,
+    width: 'max-content',
+  },
+];
+
+const SAMPLE_MODEL = [
+  {
+    name: 'zoguve-guw-mannaz',
+    'project-name': 'do uk guzvas',
+    'current-run-id': 'run-0Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:10:14 am',
+    'vcs-repo': 'example/a))!hzfpKcBl0',
+    'module-count': 46,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 118,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 6 2025',
+    updated: 'Mar 6 2025',
+  },
+  {
+    name: 'ce-pojzu-dape',
+    'project-name': 'ga vujlis de',
+    'current-run-id': 'run-1Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:09:14 am',
+    'vcs-repo': 'example/tp7Xe!mDHlI[70ZO1',
+    'module-count': 152,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 27,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 5 2025',
+    updated: 'Mar 5 2025',
+  },
+  {
+    name: 'tehmi-wudvakhe-ve',
+    'project-name': 'jize perori gu',
+    'current-run-id': 'run-2Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:08:14 am',
+    'vcs-repo': 'example/sClKKTBbyCIzf@d8NxH2',
+    'module-count': 31,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 42,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 4 2025',
+    updated: 'Mar 4 2025',
+  },
+  {
+    name: 'awudulnak-jebtafcel-ruadeim',
+    'project-name': 'jokbopu vipsu umbi',
+    'current-run-id': 'run-3Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 09:07:14 am',
+    'vcs-repo': 'example/y0^(Nm*63',
+    'module-count': 58,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 140,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 3 2025',
+    updated: 'Mar 3 2025',
+  },
+  {
+    name: 'ma-guz-vomfa',
+    'project-name': 'avjusfoj lihijor kailoluh',
+    'current-run-id': 'run-4Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:06:14 am',
+    'vcs-repo': 'example/ljPWe[4',
+    'module-count': 32,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 50,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 2 2025',
+    updated: 'Mar 2 2025',
+  },
+  {
+    name: 'empe-zewik-gazofe',
+    'project-name': 'su ja keosus',
+    'current-run-id': 'run-5Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:05:14 am',
+    'vcs-repo': 'example/E*fcS4mn@BoDgZu0O5',
+    'module-count': 94,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 113,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 1 2025',
+    updated: 'Mar 1 2025',
+  },
+  {
+    name: 'indow-suuhi-co',
+    'project-name': 'kic nuva wif',
+    'current-run-id': 'run-5Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:04:14 am',
+    'vcs-repo': 'example/&j[RmmtjpQX6',
+    'module-count': 117,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 80,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 28 2025',
+    updated: 'Feb 28 2025',
+  },
+  {
+    name: 'kitobi-okaopuaja-civna',
+    'project-name': 'tamigeki iwe isnetpi',
+    'current-run-id': 'run-7Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:03:14 am',
+    'vcs-repo': 'example/(DCFjSEKcBuU44J8AB87',
+    'module-count': 114,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 107,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 27 2025',
+    updated: 'Feb 27 2025',
+  },
+  {
+    name: 'cos-rekcepfih-dedwez',
+    'project-name': 'jigemtu kutnim pohwi',
+    'current-run-id': 'run-8Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 09:02:14 am',
+    'vcs-repo': 'example/9YURY8',
+    'module-count': 106,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 185,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 26 2025',
+    updated: 'Feb 26 2025',
+  },
+  {
+    name: 'pe-fo-oj',
+    'project-name': 'wirbidjic ow akasa',
+    'current-run-id': 'run-9Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:01:14 am',
+    'vcs-repo': 'example/9YURY8',
+    'module-count': 124,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 175,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 25 2025',
+    updated: 'Feb 25 2025',
+  },
+  {
+    name: 'ti-gecruw-bob',
+    'project-name': 'acamo almov ke',
+    'current-run-id': 'run-10Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:00:14 am',
+    'vcs-repo': 'example/d2s3B46I10',
+    'module-count': 70,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 168,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 24 2025',
+    updated: 'Feb 24 2025',
+  },
+  {
+    name: 'ti-gecruw-bob',
+    'project-name': 'acamo almov ke',
+    'current-run-id': 'run-10Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:00:14 am',
+    'vcs-repo': 'example/d2s3B46I10',
+    'module-count': 70,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 168,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 23 2025',
+    updated: 'Feb 23 2025',
+  },
+  {
+    name: 'besakve-mezlevwa-aw',
+    'project-name': 'do ukate galtem',
+    'current-run-id': 'run-11Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:59:14 am',
+    'vcs-repo': 'example/v@C6&hBTou11',
+    'module-count': 106,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 61,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 22 2025',
+    updated: 'Feb 22 2025',
+  },
+  {
+    name: 'no-jitwat-awsulnu',
+    'project-name': 'tipa ubidu oh',
+    'current-run-id': 'run-12Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:58:14 am',
+    'vcs-repo': 'example/@t23^12',
+    'module-count': 14,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 143,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 21 2025',
+    updated: 'Feb 21 2025',
+  },
+  {
+    name: 'sefnut-suju-vakunaj',
+    'project-name': 'wumenho ful decre',
+    'current-run-id': 'run-13Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:58:14 am',
+    'vcs-repo': 'example/@t23^12',
+    'module-count': 14,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 143,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 20 2025',
+    updated: 'Feb 20 2025',
+  },
+  {
+    name: 'oveso-sagcein-renjuli',
+    'project-name': 'sesac duheceul ufeesafem',
+    'current-run-id': 'run-14Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/JUha^7zr14',
+    'module-count': 114,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 98,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 19 2025',
+    updated: 'Feb 19 2025',
+  },
+  {
+    name: 'usitod-ve-citibmam',
+    'project-name': 'la ha kadosso',
+    'current-run-id': 'run-15Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:56:14 am',
+    'vcs-repo': 'example/JUha^7zr14',
+    'module-count': 99,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 170,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 18 2025',
+    updated: 'Feb 18 2025',
+  },
+  {
+    name: 'ko-dozuba-gukum',
+    'project-name': 'betrodjar gogwopel lonnege',
+    'current-run-id': 'run-16Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/t*vN3@*BxJnG116',
+    'module-count': 139,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 170,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 17 2025',
+    updated: 'Feb 17 2025',
+  },
+  {
+    name: 'fo-liszod-wokiso',
+    'project-name': 'robagbof lim fowog',
+    'current-run-id': 'run-17Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/8G3C81*u*q*O$17',
+    'module-count': 107,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 83,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 16 2025',
+    updated: 'Feb 16 2025',
+  },
+  {
+    name: 'taju-ewefir-novawnej',
+    'project-name': 'le juzasri ni',
+    'current-run-id': 'run-18Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:56:14 am',
+    'vcs-repo': 'example/gt]5*c!N1*N%I!m)18',
+    'module-count': 80,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 152,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 15 2025',
+    updated: 'Feb 15 2025',
+  },
+  {
+    name: 'fu-ip-ta',
+    'project-name': 'ca reba be',
+    'current-run-id': 'run-19Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/gt]5*c!N1*N%I!m)18',
+    'module-count': 158,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 11,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 14 2025',
+    updated: 'Feb 14 2025',
+  },
+];
+
+const SAMPLE_MODEL_VALUES = {
+  name: Array.from(new Set(SAMPLE_MODEL.map((item) => item['name']))),
+  'project-name': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['project-name'])),
+  ),
+  'run-status': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['run-status'])),
+  ),
+  'vcs-repo': Array.from(new Set(SAMPLE_MODEL.map((item) => item['vcs-repo']))),
+  'terraform-version': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['terraform-version'])),
+  ),
+  'state-terraform-version': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['state-terraform-version'])),
+  ),
+};
+
+const updateModelWithSelectAllState = (
+  modelData: HdsAdvancedTableSignature['Args']['model'],
+  selectAllState: boolean,
+) => {
+  modelData.forEach((modelRow) => {
+    modelRow['isSelected'] = selectAllState;
+  });
+};
+
+const updateModelWithSelectableRowsStates = (
+  modelData: HdsAdvancedTableSignature['Args']['model'],
+  selectableRowsStates: HdsAdvancedTableOnSelectionChangeSignature['selectableRowsStates'],
+) => {
+  const modelDataMap = new Map(
+    modelData.map((modelRow) => [modelRow['id'], modelRow]),
+  );
+  selectableRowsStates.forEach((row) => {
+    // safe to assume that there is always a record for the "selectionKey" since it's coming from the model (the selectable "rows" are a subset of the model dataset)
+    const rowFromModel = modelDataMap.get(row.selectionKey);
+    if (rowFromModel) {
+      rowFromModel['isSelected'] = row.isSelected;
+    }
+  });
+};
+
+export default class MockAppMainGenericDropdownFilter extends Component<MockAppMainGenericDropdownFilterSignature> {
+  demoColumns = SAMPLE_COLUMNS;
+
+  @tracked isLiveFilter = true;
+  @deepTracked demoModel: HdsAdvancedTableSignature['Args']['model'] = [
+    ...SAMPLE_MODEL,
+  ];
+  @deepTracked filters: Filters = {};
+
+  @action onSelectionChange({
+    selectionKey,
+    selectionCheckboxElement,
+    selectableRowsStates,
+  }: HdsAdvancedTableOnSelectionChangeSignature) {
+    // eslint-disable-next-line prefer-rest-params
+    console.log(...arguments);
+
+    if (selectionKey === 'all' && this.demoModel) {
+      const state = selectionCheckboxElement
+        ? selectionCheckboxElement.checked
+        : false;
+
+      updateModelWithSelectAllState(this.demoModel, state);
+    } else {
+      updateModelWithSelectableRowsStates(this.demoModel, selectableRowsStates);
+    }
+  }
+
+  valuesFromFilter = (filters: Filters, name: string) => {
+    const filter = filters[name];
+    if (!filter) return;
+
+    if (Array.isArray(filter)) {
+      if (filter.length === 1) return filter[0]?.value;
+      return filter.map((f: Filter) => f.value) as Filters[];
+    }
+    return filter.value;
+  };
+
+  @action
+  onFilter(filters: Filters) {
+    console.log('onFilter called with filters:', filters);
+    this.filters = filters;
+  }
+
+  get demoModelFilteredData() {
+    const filterItems = (item: any[]): boolean => {
+      if (Object.keys(this.filters).length === 0) return true;
+      let match = true;
+      Object.keys(this.filters).forEach((key) => {
+        const keyFilters = this.valuesFromFilter(this.filters, key);
+        if (Array.isArray(keyFilters)) {
+          if (!keyFilters.includes(item[key])) {
+            match = false;
+          }
+        } else if (item[key] !== keyFilters) {
+          match = false;
+        }
+      });
+      return match;
+    };
+
+    return this.demoModel.filter(filterItems);
+  }
+
+  @action
+  onLiveFilterToggle(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.isLiveFilter = target.checked;
+  }
+
+  <template>
+    <div class="filters__toggle">
+      <HdsFormToggleField
+        name="demo-live-filtering"
+        {{on "click" this.onLiveFilterToggle}}
+        checked={{this.isLiveFilter}}
+        as |F|
+      >
+        <F.Label>Live filtering</F.Label>
+      </HdsFormToggleField>
+    </div>
+    <MockAppMainGenericFilterBar
+      @filters={{this.filters}}
+      @onFilter={{this.onFilter}}
+      @isLiveFilter={{this.isLiveFilter}}
+      as |F|
+    >
+      <F.SegmentedGroup as |SG|>
+        <SG.Dropdown @key="project-name" as |D|>
+          <D.ToggleButton @text="Project name" />
+          {{#each (get SAMPLE_MODEL_VALUES "project-name") as |option|}}
+            <D.Checkbox @value={{option}}>{{option}}</D.Checkbox>
+          {{/each}}
+        </SG.Dropdown>
+        <SG.Dropdown @key="run-status" as |D|>
+          <D.ToggleButton @text="Run status" />
+          {{#each (get SAMPLE_MODEL_VALUES "run-status") as |option|}}
+            <D.Checkbox @value={{option}}>{{option}}</D.Checkbox>
+          {{/each}}
+        </SG.Dropdown>
+        <SG.Dropdown @key="terraform-version" as |D|>
+          <D.ToggleButton @text="Terraform version" />
+          {{#each (get SAMPLE_MODEL_VALUES "terraform-version") as |option|}}
+            <D.Radio @value={{option}}>{{option}}</D.Radio>
+          {{/each}}
+        </SG.Dropdown>
+      </F.SegmentedGroup>
+    </MockAppMainGenericFilterBar>
+    <HdsAdvancedTable
+      @columns={{this.demoColumns}}
+      @model={{this.demoModelFilteredData}}
+      @maxHeight="600px"
+      @isSelectable={{true}}
+      @isStriped={{true}}
+      @onSelectionChange={{this.onSelectionChange}}
+      @hasStickyFirstColumn={{true}}
+    >
+      <:body as |B|>
+        {{! @glint-expect-error }}
+        <B.Tr @selectionKey={{get B.data "name"}}>
+          <B.Th>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "name"}}
+            </HdsLinkInline>
+          </B.Th>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "project-name"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "current-run-id"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsBadge
+              @type="outlined"
+              {{! @glint-expect-error }}
+              @text={{get B.data "run-status"}}
+              {{! @glint-expect-error }}
+              @color={{get B.data "run-status-color"}}
+            />
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "current-run-applied"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "vcs-repo"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "module-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "modules"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "provider-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "providers"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "terraform-version"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "state-terraform-version"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "created"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "updated"}}
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </HdsAdvancedTable>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-filter/generic-super-select-filter.gts b/showcase/app/components/mock/app/main/generic-filter/generic-super-select-filter.gts
new file mode 100644
index 00000000000..ce3641197ba
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-filter/generic-super-select-filter.gts
@@ -0,0 +1,713 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { deepTracked } from 'ember-deep-tracked';
+import { get } from '@ember/helper';
+import { on } from '@ember/modifier';
+
+// HDS components
+import {
+  HdsAdvancedTable,
+  HdsLinkInline,
+  HdsBadge,
+  HdsBadgeColorValues,
+  HdsFormToggleField,
+} from '@hashicorp/design-system-components/components';
+
+import type { HdsAdvancedTableSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/index';
+import type { HdsAdvancedTableOnSelectionChangeSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/types';
+
+import MockAppMainGenericFilterBar from './filter-bar/index';
+
+import type { Filters } from './filter-bar/index';
+
+export interface MockAppMainGenericSuperSelectFilterSignature {
+  Element: HTMLDivElement;
+}
+
+const SAMPLE_COLUMNS = [
+  {
+    isSortable: true,
+    label: 'Name',
+    key: 'name',
+    width: 'max-content',
+  },
+  {
+    label: 'Project name',
+    key: 'project-name',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Current run ID',
+    key: 'current-run-id',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Run status',
+    key: 'run-status',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Current run applied',
+    key: 'current-run-applied',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'VCS repo',
+    key: 'vcs-repo',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Module count',
+    key: 'module-count',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Modules',
+    key: 'modules',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Provider count',
+    key: 'provider-count',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Providers',
+    key: 'providers',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Terraform version',
+    key: 'terraform-version',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'State terraform version',
+    key: 'state-terraform-version',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Created',
+    key: 'created',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Updated',
+    key: 'updated',
+    isSortable: true,
+    width: 'max-content',
+  },
+];
+
+const SAMPLE_MODEL = [
+  {
+    name: 'zoguve-guw-mannaz',
+    'project-name': 'do uk guzvas',
+    'current-run-id': 'run-0Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:10:14 am',
+    'vcs-repo': 'example/a))!hzfpKcBl0',
+    'module-count': 46,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 118,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 6 2025',
+    updated: 'Mar 6 2025',
+  },
+  {
+    name: 'ce-pojzu-dape',
+    'project-name': 'ga vujlis de',
+    'current-run-id': 'run-1Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:09:14 am',
+    'vcs-repo': 'example/tp7Xe!mDHlI[70ZO1',
+    'module-count': 152,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 27,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 5 2025',
+    updated: 'Mar 5 2025',
+  },
+  {
+    name: 'tehmi-wudvakhe-ve',
+    'project-name': 'jize perori gu',
+    'current-run-id': 'run-2Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:08:14 am',
+    'vcs-repo': 'example/sClKKTBbyCIzf@d8NxH2',
+    'module-count': 31,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 42,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 4 2025',
+    updated: 'Mar 4 2025',
+  },
+  {
+    name: 'awudulnak-jebtafcel-ruadeim',
+    'project-name': 'jokbopu vipsu umbi',
+    'current-run-id': 'run-3Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 09:07:14 am',
+    'vcs-repo': 'example/y0^(Nm*63',
+    'module-count': 58,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 140,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 3 2025',
+    updated: 'Mar 3 2025',
+  },
+  {
+    name: 'ma-guz-vomfa',
+    'project-name': 'avjusfoj lihijor kailoluh',
+    'current-run-id': 'run-4Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:06:14 am',
+    'vcs-repo': 'example/ljPWe[4',
+    'module-count': 32,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 50,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 2 2025',
+    updated: 'Mar 2 2025',
+  },
+  {
+    name: 'empe-zewik-gazofe',
+    'project-name': 'su ja keosus',
+    'current-run-id': 'run-5Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:05:14 am',
+    'vcs-repo': 'example/E*fcS4mn@BoDgZu0O5',
+    'module-count': 94,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 113,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 1 2025',
+    updated: 'Mar 1 2025',
+  },
+  {
+    name: 'indow-suuhi-co',
+    'project-name': 'kic nuva wif',
+    'current-run-id': 'run-5Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:04:14 am',
+    'vcs-repo': 'example/&j[RmmtjpQX6',
+    'module-count': 117,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 80,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 28 2025',
+    updated: 'Feb 28 2025',
+  },
+  {
+    name: 'kitobi-okaopuaja-civna',
+    'project-name': 'tamigeki iwe isnetpi',
+    'current-run-id': 'run-7Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:03:14 am',
+    'vcs-repo': 'example/(DCFjSEKcBuU44J8AB87',
+    'module-count': 114,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 107,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 27 2025',
+    updated: 'Feb 27 2025',
+  },
+  {
+    name: 'cos-rekcepfih-dedwez',
+    'project-name': 'jigemtu kutnim pohwi',
+    'current-run-id': 'run-8Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 09:02:14 am',
+    'vcs-repo': 'example/9YURY8',
+    'module-count': 106,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 185,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 26 2025',
+    updated: 'Feb 26 2025',
+  },
+  {
+    name: 'pe-fo-oj',
+    'project-name': 'wirbidjic ow akasa',
+    'current-run-id': 'run-9Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:01:14 am',
+    'vcs-repo': 'example/9YURY8',
+    'module-count': 124,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 175,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 25 2025',
+    updated: 'Feb 25 2025',
+  },
+  {
+    name: 'ti-gecruw-bob',
+    'project-name': 'acamo almov ke',
+    'current-run-id': 'run-10Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:00:14 am',
+    'vcs-repo': 'example/d2s3B46I10',
+    'module-count': 70,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 168,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 24 2025',
+    updated: 'Feb 24 2025',
+  },
+  {
+    name: 'ti-gecruw-bob',
+    'project-name': 'acamo almov ke',
+    'current-run-id': 'run-10Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:00:14 am',
+    'vcs-repo': 'example/d2s3B46I10',
+    'module-count': 70,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 168,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 23 2025',
+    updated: 'Feb 23 2025',
+  },
+  {
+    name: 'besakve-mezlevwa-aw',
+    'project-name': 'do ukate galtem',
+    'current-run-id': 'run-11Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:59:14 am',
+    'vcs-repo': 'example/v@C6&hBTou11',
+    'module-count': 106,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 61,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.16.0',
+    created: 'Feb 22 2025',
+    updated: 'Feb 22 2025',
+  },
+  {
+    name: 'no-jitwat-awsulnu',
+    'project-name': 'tipa ubidu oh',
+    'current-run-id': 'run-12Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:58:14 am',
+    'vcs-repo': 'example/@t23^12',
+    'module-count': 14,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 143,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 21 2025',
+    updated: 'Feb 21 2025',
+  },
+  {
+    name: 'sefnut-suju-vakunaj',
+    'project-name': 'wumenho ful decre',
+    'current-run-id': 'run-13Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:58:14 am',
+    'vcs-repo': 'example/@t23^12',
+    'module-count': 14,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 143,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 20 2025',
+    updated: 'Feb 20 2025',
+  },
+  {
+    name: 'oveso-sagcein-renjuli',
+    'project-name': 'sesac duheceul ufeesafem',
+    'current-run-id': 'run-14Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/JUha^7zr14',
+    'module-count': 114,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 98,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 19 2025',
+    updated: 'Feb 19 2025',
+  },
+  {
+    name: 'usitod-ve-citibmam',
+    'project-name': 'la ha kadosso',
+    'current-run-id': 'run-15Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:56:14 am',
+    'vcs-repo': 'example/JUha^7zr14',
+    'module-count': 99,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 170,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 18 2025',
+    updated: 'Feb 18 2025',
+  },
+  {
+    name: 'ko-dozuba-gukum',
+    'project-name': 'betrodjar gogwopel lonnege',
+    'current-run-id': 'run-16Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/t*vN3@*BxJnG116',
+    'module-count': 139,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 170,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 17 2025',
+    updated: 'Feb 17 2025',
+  },
+  {
+    name: 'fo-liszod-wokiso',
+    'project-name': 'robagbof lim fowog',
+    'current-run-id': 'run-17Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/8G3C81*u*q*O$17',
+    'module-count': 107,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 83,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 16 2025',
+    updated: 'Feb 16 2025',
+  },
+  {
+    name: 'taju-ewefir-novawnej',
+    'project-name': 'le juzasri ni',
+    'current-run-id': 'run-18Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:56:14 am',
+    'vcs-repo': 'example/gt]5*c!N1*N%I!m)18',
+    'module-count': 80,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 152,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 15 2025',
+    updated: 'Feb 15 2025',
+  },
+  {
+    name: 'fu-ip-ta',
+    'project-name': 'ca reba be',
+    'current-run-id': 'run-19Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/gt]5*c!N1*N%I!m)18',
+    'module-count': 158,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 11,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.5',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 14 2025',
+    updated: 'Feb 14 2025',
+  },
+];
+
+const SAMPLE_MODEL_VALUES = {
+  'project-name': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['project-name'])),
+  ),
+  'run-status': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['run-status'])),
+  ),
+  'terraform-version': Array.from(
+    new Set(SAMPLE_MODEL.map((item) => item['terraform-version'])),
+  ),
+};
+
+const updateModelWithSelectAllState = (
+  modelData: HdsAdvancedTableSignature['Args']['model'],
+  selectAllState: boolean,
+) => {
+  modelData.forEach((modelRow) => {
+    modelRow['isSelected'] = selectAllState;
+  });
+};
+
+const updateModelWithSelectableRowsStates = (
+  modelData: HdsAdvancedTableSignature['Args']['model'],
+  selectableRowsStates: HdsAdvancedTableOnSelectionChangeSignature['selectableRowsStates'],
+) => {
+  const modelDataMap = new Map(
+    modelData.map((modelRow) => [modelRow['id'], modelRow]),
+  );
+  selectableRowsStates.forEach((row) => {
+    // safe to assume that there is always a record for the "selectionKey" since it's coming from the model (the selectable "rows" are a subset of the model dataset)
+    const rowFromModel = modelDataMap.get(row.selectionKey);
+    if (rowFromModel) {
+      rowFromModel['isSelected'] = row.isSelected;
+    }
+  });
+};
+
+export default class MockAppMainGenericSuperSelectFilter extends Component<MockAppMainGenericSuperSelectFilterSignature> {
+  demoColumns = SAMPLE_COLUMNS;
+
+  @tracked isLiveFilter = true;
+  @deepTracked demoModel: HdsAdvancedTableSignature['Args']['model'] = [
+    ...SAMPLE_MODEL,
+  ];
+  @deepTracked filters: Filters = {};
+
+  @action onSelectionChange({
+    selectionKey,
+    selectionCheckboxElement,
+    selectableRowsStates,
+  }: HdsAdvancedTableOnSelectionChangeSignature) {
+    // eslint-disable-next-line prefer-rest-params
+    console.log(...arguments);
+
+    if (selectionKey === 'all' && this.demoModel) {
+      const state = selectionCheckboxElement
+        ? selectionCheckboxElement.checked
+        : false;
+
+      updateModelWithSelectAllState(this.demoModel, state);
+    } else {
+      updateModelWithSelectableRowsStates(this.demoModel, selectableRowsStates);
+    }
+  }
+
+  valuesFromFilter = (filters: Filters, name: string) => {
+    const filter = filters[name];
+    if (!filter) return;
+
+    if (Array.isArray(filter)) {
+      if (filter.length === 1) return filter[0]?.value;
+      return filter.map((f: Filter[]) => f.value);
+    }
+    return filter.value;
+  };
+
+  @action
+  onFilter(filters: Filters) {
+    console.log('onFilter called with filters:', filters);
+    this.filters = filters;
+  }
+
+  get demoModelFilteredData() {
+    const filterItem = (item: Filters): boolean => {
+      if (Object.keys(this.filters).length === 0) return true;
+      let match = true;
+      Object.keys(this.filters).forEach((key) => {
+        const keyFilters = this.valuesFromFilter(this.filters, key);
+        if (Array.isArray(keyFilters)) {
+          if (!keyFilters.includes(item[key])) {
+            match = false;
+          }
+        } else if (item[key] !== keyFilters) {
+          match = false;
+        }
+      });
+      return match;
+    };
+
+    return this.demoModel.filter(filterItem);
+  }
+
+  @action
+  onLiveFilterToggle(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.isLiveFilter = target.checked;
+  }
+
+  <template>
+    <div class="filters__toggle">
+      <HdsFormToggleField
+        name="demo-live-filtering"
+        {{on "click" this.onLiveFilterToggle}}
+        checked={{this.isLiveFilter}}
+        as |F|
+      >
+        <F.Label>Live filtering</F.Label>
+      </HdsFormToggleField>
+    </div>
+    <MockAppMainGenericFilterBar
+      @type="super-select"
+      @filters={{this.filters}}
+      @onFilter={{this.onFilter}}
+      @isLiveFilter={{this.isLiveFilter}}
+      as |F|
+    >
+      <F.SuperSelect
+        @isMultiSelect={{true}}
+        @searchEnabled={{true}}
+        @key="project-name"
+        @text="Project name"
+        @options={{get SAMPLE_MODEL_VALUES "project-name"}}
+      />
+      <F.SuperSelect
+        @isMultiSelect={{true}}
+        @key="run-status"
+        @text="Run status"
+        @options={{get SAMPLE_MODEL_VALUES "run-status"}}
+      />
+      <F.SuperSelect
+        @key="terraform-version"
+        @text="Terraform version"
+        @options={{get SAMPLE_MODEL_VALUES "terraform-version"}}
+      />
+    </MockAppMainGenericFilterBar>
+    <HdsAdvancedTable
+      @columns={{this.demoColumns}}
+      @model={{this.demoModelFilteredData}}
+      @maxHeight="600px"
+      @isSelectable={{true}}
+      @isStriped={{true}}
+      @onSelectionChange={{this.onSelectionChange}}
+      @hasStickyFirstColumn={{true}}
+    >
+      <:body as |B|>
+        {{! @glint-expect-error }}
+        <B.Tr @selectionKey={{get B.data "name"}}>
+          <B.Th>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "name"}}
+            </HdsLinkInline>
+          </B.Th>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "project-name"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "current-run-id"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsBadge
+              @type="outlined"
+              {{! @glint-expect-error }}
+              @text={{get B.data "run-status"}}
+              {{! @glint-expect-error }}
+              @color={{get B.data "run-status-color"}}
+            />
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "current-run-applied"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "vcs-repo"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "module-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "modules"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "provider-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "providers"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "terraform-version"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "state-terraform-version"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "created"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "updated"}}
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </HdsAdvancedTable>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-super-select-filter.gts b/showcase/app/components/mock/app/main/generic-super-select-filter.gts
new file mode 100644
index 00000000000..e6a07d9ebff
--- /dev/null
+++ b/showcase/app/components/mock/app/main/generic-super-select-filter.gts
@@ -0,0 +1,627 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { deepTracked } from 'ember-deep-tracked';
+import { get } from '@ember/helper';
+
+// HDS components
+import {
+  HdsAdvancedTable,
+  HdsLinkInline,
+  HdsBadge,
+  HdsBadgeColorValues,
+  HdsFormSuperSelectMultipleField,
+  type HdsAdvancedTableOnSelectionChangeSignature,
+} from '@hashicorp/design-system-components/components';
+
+import type { HdsAdvancedTableSignature } from '@hashicorp/design-system-components/components/hds/advanced-table/index';
+
+export interface MockAppMainGenericSuperSelectFilterSignature {
+  Element: HTMLDivElement;
+}
+
+const SAMPLE_COLUMNS = [
+  {
+    isSortable: true,
+    label: 'Name',
+    key: 'name',
+    width: 'max-content',
+  },
+  {
+    label: 'Project name',
+    key: 'project-name',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Current run ID',
+    key: 'current-run-id',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Run status',
+    key: 'run-status',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Current run applied',
+    key: 'current-run-applied',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'VCS repo',
+    key: 'vcs-repo',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Module count',
+    key: 'module-count',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Modules',
+    key: 'modules',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Provider count',
+    key: 'provider-count',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Providers',
+    key: 'providers',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Terraform version',
+    key: 'terraform-version',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'State terraform version',
+    key: 'state-terraform-version',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Created',
+    key: 'created',
+    isSortable: true,
+    width: 'max-content',
+  },
+  {
+    label: 'Updated',
+    key: 'updated',
+    isSortable: true,
+    width: 'max-content',
+  },
+];
+
+const SAMPLE_MODEL = [
+  {
+    name: 'zoguve-guw-mannaz',
+    'project-name': 'do uk guzvas',
+    'current-run-id': 'run-0Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:10:14 am',
+    'vcs-repo': 'example/a))!hzfpKcBl0',
+    'module-count': 46,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 118,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 6 2025',
+    updated: 'Mar 6 2025',
+  },
+  {
+    name: 'ce-pojzu-dape',
+    'project-name': 'ga vujlis de',
+    'current-run-id': 'run-1Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:09:14 am',
+    'vcs-repo': 'example/tp7Xe!mDHlI[70ZO1',
+    'module-count': 152,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 27,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 5 2025',
+    updated: 'Mar 5 2025',
+  },
+  {
+    name: 'tehmi-wudvakhe-ve',
+    'project-name': 'jize perori gu',
+    'current-run-id': 'run-2Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:08:14 am',
+    'vcs-repo': 'example/sClKKTBbyCIzf@d8NxH2',
+    'module-count': 31,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 42,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 4 2025',
+    updated: 'Mar 4 2025',
+  },
+  {
+    name: 'awudulnak-jebtafcel-ruadeim',
+    'project-name': 'jokbopu vipsu umbi',
+    'current-run-id': 'run-3Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 09:07:14 am',
+    'vcs-repo': 'example/y0^(Nm*63',
+    'module-count': 58,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 140,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 3 2025',
+    updated: 'Mar 3 2025',
+  },
+  {
+    name: 'ma-guz-vomfa',
+    'project-name': 'avjusfoj lihijor kailoluh',
+    'current-run-id': 'run-4Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:06:14 am',
+    'vcs-repo': 'example/ljPWe[4',
+    'module-count': 32,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 50,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 2 2025',
+    updated: 'Mar 2 2025',
+  },
+  {
+    name: 'empe-zewik-gazofe',
+    'project-name': 'su ja keosus',
+    'current-run-id': 'run-5Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:05:14 am',
+    'vcs-repo': 'example/E*fcS4mn@BoDgZu0O5',
+    'module-count': 94,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 113,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Mar 1 2025',
+    updated: 'Mar 1 2025',
+  },
+  {
+    name: 'indow-suuhi-co',
+    'project-name': 'kic nuva wif',
+    'current-run-id': 'run-5Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:04:14 am',
+    'vcs-repo': 'example/&j[RmmtjpQX6',
+    'module-count': 117,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 80,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 28 2025',
+    updated: 'Feb 28 2025',
+  },
+  {
+    name: 'kitobi-okaopuaja-civna',
+    'project-name': 'tamigeki iwe isnetpi',
+    'current-run-id': 'run-7Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:03:14 am',
+    'vcs-repo': 'example/(DCFjSEKcBuU44J8AB87',
+    'module-count': 114,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 107,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 27 2025',
+    updated: 'Feb 27 2025',
+  },
+  {
+    name: 'cos-rekcepfih-dedwez',
+    'project-name': 'jigemtu kutnim pohwi',
+    'current-run-id': 'run-8Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 09:02:14 am',
+    'vcs-repo': 'example/9YURY8',
+    'module-count': 106,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 185,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 26 2025',
+    updated: 'Feb 26 2025',
+  },
+  {
+    name: 'pe-fo-oj',
+    'project-name': 'wirbidjic ow akasa',
+    'current-run-id': 'run-9Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 09:01:14 am',
+    'vcs-repo': 'example/9YURY8',
+    'module-count': 124,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 175,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 25 2025',
+    updated: 'Feb 25 2025',
+  },
+  {
+    name: 'ti-gecruw-bob',
+    'project-name': 'acamo almov ke',
+    'current-run-id': 'run-10Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:00:14 am',
+    'vcs-repo': 'example/d2s3B46I10',
+    'module-count': 70,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 168,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 24 2025',
+    updated: 'Feb 24 2025',
+  },
+  {
+    name: 'ti-gecruw-bob',
+    'project-name': 'acamo almov ke',
+    'current-run-id': 'run-10Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 09:00:14 am',
+    'vcs-repo': 'example/d2s3B46I10',
+    'module-count': 70,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 168,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 23 2025',
+    updated: 'Feb 23 2025',
+  },
+  {
+    name: 'besakve-mezlevwa-aw',
+    'project-name': 'do ukate galtem',
+    'current-run-id': 'run-11Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:59:14 am',
+    'vcs-repo': 'example/v@C6&hBTou11',
+    'module-count': 106,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 61,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 22 2025',
+    updated: 'Feb 22 2025',
+  },
+  {
+    name: 'no-jitwat-awsulnu',
+    'project-name': 'tipa ubidu oh',
+    'current-run-id': 'run-12Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:58:14 am',
+    'vcs-repo': 'example/@t23^12',
+    'module-count': 14,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 143,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 21 2025',
+    updated: 'Feb 21 2025',
+  },
+  {
+    name: 'sefnut-suju-vakunaj',
+    'project-name': 'wumenho ful decre',
+    'current-run-id': 'run-13Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:58:14 am',
+    'vcs-repo': 'example/@t23^12',
+    'module-count': 14,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 143,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 20 2025',
+    updated: 'Feb 20 2025',
+  },
+  {
+    name: 'oveso-sagcein-renjuli',
+    'project-name': 'sesac duheceul ufeesafem',
+    'current-run-id': 'run-14Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/JUha^7zr14',
+    'module-count': 114,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 98,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 19 2025',
+    updated: 'Feb 19 2025',
+  },
+  {
+    name: 'usitod-ve-citibmam',
+    'project-name': 'la ha kadosso',
+    'current-run-id': 'run-15Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:56:14 am',
+    'vcs-repo': 'example/JUha^7zr14',
+    'module-count': 99,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 170,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 18 2025',
+    updated: 'Feb 18 2025',
+  },
+  {
+    name: 'ko-dozuba-gukum',
+    'project-name': 'betrodjar gogwopel lonnege',
+    'current-run-id': 'run-16Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/t*vN3@*BxJnG116',
+    'module-count': 139,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 170,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 17 2025',
+    updated: 'Feb 17 2025',
+  },
+  {
+    name: 'fo-liszod-wokiso',
+    'project-name': 'robagbof lim fowog',
+    'current-run-id': 'run-17Yks9WCFeD9xRTWo',
+    'run-status': 'planned',
+    'run-status-color': HdsBadgeColorValues.Warning,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/8G3C81*u*q*O$17',
+    'module-count': 107,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 83,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 16 2025',
+    updated: 'Feb 16 2025',
+  },
+  {
+    name: 'taju-ewefir-novawnej',
+    'project-name': 'le juzasri ni',
+    'current-run-id': 'run-18Yks9WCFeD9xRTWo',
+    'run-status': 'errored',
+    'run-status-color': HdsBadgeColorValues.Critical,
+    'current-run-applied': 'Mar 06, 2025 08:56:14 am',
+    'vcs-repo': 'example/gt]5*c!N1*N%I!m)18',
+    'module-count': 80,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 152,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 15 2025',
+    updated: 'Feb 15 2025',
+  },
+  {
+    name: 'fu-ip-ta',
+    'project-name': 'ca reba be',
+    'current-run-id': 'run-19Yks9WCFeD9xRTWo',
+    'run-status': 'applied',
+    'run-status-color': HdsBadgeColorValues.Success,
+    'current-run-applied': 'Mar 06, 2025 08:57:14 am',
+    'vcs-repo': 'example/gt]5*c!N1*N%I!m)18',
+    'module-count': 158,
+    modules: 'wad-bedzeaje-rogmejca',
+    'provider-count': 11,
+    providers: 'susnup-da-zuw',
+    'terraform-version': '0.14.0',
+    'state-terraform-version': '0.15.0',
+    created: 'Feb 14 2025',
+    updated: 'Feb 14 2025',
+  },
+];
+
+const updateModelWithSelectAllState = (
+  modelData: HdsAdvancedTableSignature['Args']['model'],
+  selectAllState: boolean,
+) => {
+  modelData.forEach((modelRow) => {
+    modelRow['isSelected'] = selectAllState;
+  });
+};
+
+const updateModelWithSelectableRowsStates = (
+  modelData: HdsAdvancedTableSignature['Args']['model'],
+  selectableRowsStates: HdsAdvancedTableOnSelectionChangeSignature['selectableRowsStates'],
+) => {
+  const modelDataMap = new Map(
+    modelData.map((modelRow) => [modelRow['id'], modelRow]),
+  );
+  selectableRowsStates.forEach((row) => {
+    // safe to assume that there is always a record for the "selectionKey" since it's coming from the model (the selectable "rows" are a subset of the model dataset)
+    const rowFromModel = modelDataMap.get(row.selectionKey);
+    if (rowFromModel) {
+      rowFromModel['isSelected'] = row.isSelected;
+    }
+  });
+};
+
+export default class MockAppMainGenericSuperSelectFilter extends Component<MockAppMainGenericSuperSelectFilterSignature> {
+  demoColumns = SAMPLE_COLUMNS;
+  @deepTracked demoModel: HdsAdvancedTableSignature['Args']['model'] = [
+    ...SAMPLE_MODEL,
+  ];
+
+  private _runStatusOptions = ['applied', 'errored', 'planned'];
+
+  @action onSelectionChange({
+    selectionKey,
+    selectionCheckboxElement,
+    selectableRowsStates,
+  }: HdsAdvancedTableOnSelectionChangeSignature) {
+    // eslint-disable-next-line prefer-rest-params
+    console.log(...arguments);
+
+    if (selectionKey === 'all' && this.demoModel) {
+      const state = selectionCheckboxElement
+        ? selectionCheckboxElement.checked
+        : false;
+
+      updateModelWithSelectAllState(this.demoModel, state);
+    } else {
+      updateModelWithSelectableRowsStates(this.demoModel, selectableRowsStates);
+    }
+  }
+
+  private onChange() {
+    // no-op
+  }
+
+  <template>
+    <HdsFormSuperSelectMultipleField
+      @onChange={{this.onChange}}
+      @options={{this._runStatusOptions}}
+      as |F|
+    >
+      <F.Label>Run status</F.Label>
+      <F.Options>{{F.options}}</F.Options>
+    </HdsFormSuperSelectMultipleField>
+    <HdsAdvancedTable
+      @columns={{this.demoColumns}}
+      @model={{this.demoModel}}
+      @maxHeight="600px"
+      @isSelectable={{true}}
+      @isStriped={{true}}
+      @onSelectionChange={{this.onSelectionChange}}
+      @hasStickyFirstColumn={{true}}
+    >
+      <:body as |B|>
+        {{! @glint-expect-error }}
+        <B.Tr @selectionKey={{get B.data "name"}}>
+          <B.Th>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "name"}}
+            </HdsLinkInline>
+          </B.Th>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "project-name"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "current-run-id"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            <HdsBadge
+              @type="outlined"
+              {{! @glint-expect-error }}
+              @text={{get B.data "run-status"}}
+              {{! @glint-expect-error }}
+              @color={{get B.data "run-status-color"}}
+            />
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "current-run-applied"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "vcs-repo"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "module-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "modules"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "provider-count"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "providers"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "terraform-version"}}
+          </B.Td>
+          <B.Td>
+            <HdsLinkInline @href="www.google.com">
+              {{! @glint-expect-error }}
+              {{get B.data "state-terraform-version"}}
+            </HdsLinkInline>
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "created"}}
+          </B.Td>
+          <B.Td>
+            {{! @glint-expect-error }}
+            {{get B.data "updated"}}
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </HdsAdvancedTable>
+  </template>
+}
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index 3defc276327..854199cf61f 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -127,6 +127,8 @@ Router.map(function () {
         this.route('demo-full-app-frame-with-app-header-and-app-side-nav');
         this.route('demo-full-app-frame-with-side-nav');
         this.route('demo-full-app-frame-with-advanced-table');
+        this.route('demo-full-app-frame-with-dropdown-filter');
+        this.route('demo-full-app-frame-with-super-select-filter');
       });
     });
     this.route('flex');
diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss
index fb06fee50bd..dae513681b6 100644
--- a/showcase/app/styles/app.scss
+++ b/showcase/app/styles/app.scss
@@ -24,6 +24,7 @@
 @use "./showcase-components/outliner";
 @use "./showcase-components/placeholder";
 @use "./mock-components/app";
+@use "./mock-components/filter-bar";
 @use "./mock-components/demo/breakpoints";
 
 
diff --git a/showcase/app/styles/mock-components/filter-bar.scss b/showcase/app/styles/mock-components/filter-bar.scss
new file mode 100644
index 00000000000..6820f078f36
--- /dev/null
+++ b/showcase/app/styles/mock-components/filter-bar.scss
@@ -0,0 +1,41 @@
+// Mock Filter Bar
+.mock-app-main-generic-filter-bar {
+  display: grid;
+  gap: 16px;
+  padding-bottom: 16px;
+
+  .filters {
+    display: flex;
+    gap: 12px 0;
+    align-items: end;
+
+    .filter__super-select {
+      width: 100%;
+
+      &__footer {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 8px 12px;
+        background-color: var(--token-color-surface-strong);
+        border-top: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
+      }
+    }
+
+    .hds-form-text-input {
+      width: auto;
+    }
+  }
+
+  .filter-actions {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.filters__toggle {
+  margin-bottom: 16px;
+}
\ No newline at end of file
diff --git a/showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-dropdown-filter.hbs b/showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-dropdown-filter.hbs
new file mode 100644
index 00000000000..b301b2c9d8f
--- /dev/null
+++ b/showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-dropdown-filter.hbs
@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "AppFrame Component - Frameless"}}
+
+<Mock::App>
+  <:main as |M|>
+    <M.PageHeader />
+    <M.GenericDropdownFilter />
+  </:main>
+</Mock::App>
\ No newline at end of file
diff --git a/showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-super-select-filter.hbs b/showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-super-select-filter.hbs
new file mode 100644
index 00000000000..81c01a7d323
--- /dev/null
+++ b/showcase/app/templates/page-layouts/app-frame/frameless/demo-full-app-frame-with-super-select-filter.hbs
@@ -0,0 +1,13 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "AppFrame Component - Frameless"}}
+
+<Mock::App>
+  <:main as |M|>
+    <M.PageHeader />
+    <M.GenericSuperSelectFilter />
+  </:main>
+</Mock::App>
\ No newline at end of file