diff --git a/packages/boxel-ui/addon/src/components.ts b/packages/boxel-ui/addon/src/components.ts
index aee2d35cff2..84ea2e85f2f 100644
--- a/packages/boxel-ui/addon/src/components.ts
+++ b/packages/boxel-ui/addon/src/components.ts
@@ -72,6 +72,8 @@ import ResizablePanelGroup, {
   ResizeHandle,
 } from './components/resizable-panel-group/index.gts';
 import BoxelSelect from './components/select/index.gts';
+import SelectionCheckmark from './components/selection-checkmark/index.gts';
+import SelectionMenu from './components/selection-menu/index.gts';
 import SkeletonPlaceholder from './components/skeleton-placeholder/index.gts';
 import SortDropdown, {
   type SortOption,
@@ -160,6 +162,8 @@ export {
   ResizablePanelGroup,
   ResizeHandle,
   resolveInsertion,
+  SelectionCheckmark,
+  SelectionMenu,
   SkeletonPlaceholder,
   SortDropdown,
   Swatch,
diff --git a/packages/boxel-ui/addon/src/components/card-header/index.gts b/packages/boxel-ui/addon/src/components/card-header/index.gts
index 9a19280164f..9e9a25a05cb 100644
--- a/packages/boxel-ui/addon/src/components/card-header/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-header/index.gts
@@ -16,6 +16,7 @@ import ContextButton from '../context-button/index.gts';
 import BoxelDropdown from '../dropdown/index.gts';
 import Menu from '../menu/index.gts';
 import RealmIcon, { type RealmDisplayInfo } from '../realm-icon/index.gts';
+import SelectionCheckmark from '../selection-checkmark/index.gts';
 import Tooltip from '../tooltip/index.gts';
 
 export interface CardHeaderUtilityMenu {
@@ -133,26 +134,7 @@ export default class CardHeader extends Component<Signature> {
                       class='utility-menu-trigger'
                       {{ddModifier}}
                     >
-                      <svg
-                        class='utility-menu-trigger-icon'
-                        viewBox='0 0 14 14'
-                        fill='none'
-                        aria-hidden='true'
-                      >
-                        <circle
-                          cx='7'
-                          cy='7'
-                          r='7'
-                          fill='var(--boxel-highlight-foreground)'
-                        />
-                        <path
-                          d='M3.5 7.5L5.5 9.5L10.5 4.5'
-                          stroke='var(--boxel-highlight)'
-                          stroke-width='1.5'
-                          stroke-linecap='round'
-                          stroke-linejoin='round'
-                        />
-                      </svg>
+                      <SelectionCheckmark class='utility-menu-trigger-icon' />
                       <span class='utility-menu-trigger-text'>
                         {{@utilityMenu.triggerText}}
                       </span>
diff --git a/packages/boxel-ui/addon/src/components/selection-checkmark/index.gts b/packages/boxel-ui/addon/src/components/selection-checkmark/index.gts
new file mode 100644
index 00000000000..4909c8ba2b4
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/selection-checkmark/index.gts
@@ -0,0 +1,31 @@
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+// SelectionCheckmark: the dark-circle-with-highlight-check artwork used by
+// selection affordances — the SelectionMenu trigger and its inert count
+// header, and the card-header utility-menu trigger. The circle reads as the
+// highlight foreground and the check as the highlight accent, so it stands
+// out against a highlight-colored surface. It is a two-color composite (not
+// a monochrome, currentColor icon), so it lives here as a component rather
+// than in the generated icon set.
+const SelectionCheckmark: TemplateOnlyComponent<{
+  Element: SVGSVGElement;
+}> = <template>
+  <svg
+    viewBox='0 0 14 14'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+    aria-hidden='true'
+    ...attributes
+  >
+    <circle cx='7' cy='7' r='7' fill='var(--boxel-highlight-foreground)' />
+    <path
+      d='M3.5 7.5L5.5 9.5L10.5 4.5'
+      stroke='var(--boxel-highlight)'
+      stroke-width='1.5'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+  </svg>
+</template>;
+
+export default SelectionCheckmark;
diff --git a/packages/boxel-ui/addon/src/components/selection-menu/index.gts b/packages/boxel-ui/addon/src/components/selection-menu/index.gts
new file mode 100644
index 00000000000..71e5e7d426b
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/selection-menu/index.gts
@@ -0,0 +1,139 @@
+import Component from '@glimmer/component';
+
+import type { MenuDivider } from '../../helpers/menu-divider.ts';
+import type { MenuItem } from '../../helpers/menu-item.ts';
+import { DropdownArrowDown } from '../../icons.gts';
+import BoxelButton from '../button/index.gts';
+import BoxelDropdown from '../dropdown/index.gts';
+import Menu from '../menu/index.gts';
+import SelectionCheckmark from '../selection-checkmark/index.gts';
+
+// SelectionMenu: a primary dropdown control for bulk selection. The trigger
+// shows a selection checkmark, the current count, and a caret that flips
+// while the menu is open; the menu body is whatever the caller supplies via
+// `@items`.
+//
+// It is deliberately content-agnostic — actions such as "Select All" /
+// "Deselect All" (and the inert count header) are app concerns the consumer
+// builds and passes in, so the design system owns only the trigger styling
+// and the dropdown shell, not the selection semantics.
+//
+// The caller decides when to render it (typically only once something is
+// selected) and what the items do.
+interface Signature {
+  Args: {
+    items: Array<MenuItem | MenuDivider>;
+    // Accessible name for the trigger; defaults to the count.
+    label?: string;
+    selectedCount: number;
+  };
+  Blocks: {};
+  Element: HTMLButtonElement;
+}
+
+export default class SelectionMenu extends Component<Signature> {
+  private get triggerLabel(): string {
+    return (
+      this.args.label ?? `Selection menu, ${this.args.selectedCount} selected`
+    );
+  }
+
+  <template>
+    {{! Wrap so the trigger and ember-basic-dropdown's content-origin count
+        as ONE flex item in the parent toolbar. BasicDropdown renders no
+        wrapper of its own, so without this the origin becomes a sibling
+        flex item when the menu opens — adding a parent gap and shifting the
+        trigger sideways. }}
+    <div class='selection-menu-root'>
+      <BoxelDropdown
+        @contentClass='selection-menu-content'
+        @matchTriggerWidth={{false}}
+      >
+        <:trigger as |bindings|>
+          {{! The trigger is a standard primary Button so it inherits the
+            design system's highlight colors, hover, and focus-ring; the
+            class only adds what Button doesn't: layout gap, the readable
+            highlight foreground, the open-state deepening, and the caret
+            flip. }}
+          <BoxelButton
+            @kind='primary'
+            @rectangular={{true}}
+            @class='selection-menu-trigger'
+            aria-label={{this.triggerLabel}}
+            {{bindings}}
+            data-test-selection-dropdown-trigger
+            ...attributes
+          >
+            <SelectionCheckmark class='selection-menu-icon' />
+            <span class='selection-menu-count'>{{@selectedCount}}</span>
+            <DropdownArrowDown
+              class='selection-menu-caret'
+              width='13px'
+              height='13px'
+            />
+          </BoxelButton>
+        </:trigger>
+        <:content as |dd|>
+          <Menu
+            class='selection-menu-list'
+            @items={{@items}}
+            @closeMenu={{dd.close}}
+          />
+        </:content>
+      </BoxelDropdown>
+    </div>
+    <style scoped>
+      /* Hold the trigger + basic-dropdown origin as a single flex item so
+         opening the menu doesn't shift the trigger (see template note). */
+      .selection-menu-root {
+        display: inline-flex;
+      }
+      /* The trigger is a primary BoxelButton; it supplies the highlight
+         fill, hover, and disabled handling. These rules only add what
+         Button's defaults don't fit here: a gap between the icon/count/
+         caret, the readable highlight foreground (Button's primary text
+         defaults to --boxel-dark), a tighter radius, and compact sizing —
+         the base size's wide --boxel-sp-xl padding + 5rem min-width make
+         this count trigger far too wide, so collapse both to fit content. */
+      .selection-menu-trigger {
+        gap: var(--boxel-sp-xxs);
+        --boxel-button-text-color: var(--boxel-highlight-foreground);
+        --boxel-button-border-radius: var(--boxel-border-radius-sm);
+        --boxel-button-padding: var(--boxel-sp-5xs) var(--boxel-sp-xs);
+        --boxel-button-min-width: 0;
+      }
+      /* Keyboard focus ring just outside the button. (Set explicitly so it
+         renders regardless of the global button outline setup.) */
+      .selection-menu-trigger:focus-visible {
+        outline: var(--boxel-outline-width) var(--boxel-outline-style)
+          var(--boxel-highlight);
+        outline-offset: 2px;
+      }
+      /* Deepen the fill while the menu is open, matching Button's hover. */
+      .selection-menu-trigger[aria-expanded='true'] {
+        --boxel-button-color: var(--boxel-highlight-hover);
+      }
+      .selection-menu-icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        flex-shrink: 0;
+      }
+      .selection-menu-count {
+        line-height: 1;
+        white-space: nowrap;
+      }
+      .selection-menu-caret {
+        flex-shrink: 0;
+        transition: transform var(--boxel-transition);
+      }
+      /* Caret flips to point up while the menu is open, matching the standard
+         dropdown affordance. */
+      .selection-menu-trigger[aria-expanded='true'] .selection-menu-caret {
+        transform: rotate(180deg);
+      }
+      .selection-menu-list {
+        --boxel-menu-item-content-padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/selection-menu/usage.gts b/packages/boxel-ui/addon/src/components/selection-menu/usage.gts
new file mode 100644
index 00000000000..b1f13fee738
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/selection-menu/usage.gts
@@ -0,0 +1,69 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import type { MenuDivider } from '../../helpers/menu-divider.ts';
+import { MenuItem } from '../../helpers/menu-item.ts';
+import SelectionCheckmark from '../selection-checkmark/index.gts';
+import SelectionMenu from './index.gts';
+
+export default class SelectionMenuUsage extends Component {
+  @tracked private selectedCount = 3;
+
+  @action private selectAll() {
+    this.selectedCount = 10;
+  }
+
+  @action private deselectAll() {
+    this.selectedCount = 0;
+  }
+
+  // The items are supplied by the consumer — the component itself is
+  // content-agnostic. Here we mirror a typical bulk-selection menu: an
+  // inert count header plus a couple of actions.
+  private get items(): Array<MenuItem | MenuDivider> {
+    return [
+      new MenuItem({
+        label: `${this.selectedCount} Selected`,
+        action: () => {},
+        icon: SelectionCheckmark,
+        header: true,
+      }),
+      new MenuItem({ label: 'Select All', action: this.selectAll }),
+      new MenuItem({ label: 'Deselect All', action: this.deselectAll }),
+    ];
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='SelectionMenu'
+      @description='Primary dropdown control for bulk selection: a trigger showing a selection checkmark + count + flipping caret, opening a caller-supplied action menu. Content-agnostic — Select All / Deselect All and the count header are passed in via @items.'
+    >
+      <:example>
+        <SelectionMenu
+          @selectedCount={{this.selectedCount}}
+          @items={{this.items}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.Number
+          @name='selectedCount'
+          @description='Count shown in the trigger'
+          @value={{this.selectedCount}}
+          @required={{true}}
+        />
+        <Args.Object
+          @name='items'
+          @description='Menu items (MenuItem | MenuDivider) supplied by the consumer'
+          @value={{this.items}}
+          @required={{true}}
+        />
+        <Args.String
+          @name='label'
+          @description='Accessible name for the trigger; defaults to the count'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/usage.ts b/packages/boxel-ui/addon/src/usage.ts
index e9cae56c73e..deb4b8a4f16 100644
--- a/packages/boxel-ui/addon/src/usage.ts
+++ b/packages/boxel-ui/addon/src/usage.ts
@@ -45,6 +45,7 @@ import RadioInputUsage from './components/radio-input/usage.gts';
 import RealmIconUsage from './components/realm-icon/usage.gts';
 import ResizablePanelGroupUsage from './components/resizable-panel-group/usage.gts';
 import SelectUsage from './components/select/usage.gts';
+import SelectionMenuUsage from './components/selection-menu/usage.gts';
 import SkeletonPlaceholderUsage from './components/skeleton-placeholder/usage.gts';
 import SortDropdownUsage from './components/sort-dropdown/usage.gts';
 import SwatchUsage from './components/swatch/usage.gts';
@@ -100,6 +101,7 @@ export const ALL_USAGE_COMPONENTS = [
   ['RealmIcon', RealmIconUsage],
   ['ResizablePanelGroup', ResizablePanelGroupUsage],
   ['Select', SelectUsage],
+  ['SelectionMenu', SelectionMenuUsage],
   ['SkeletonPlaceholder', SkeletonPlaceholderUsage],
   ['SortDropdown', SortDropdownUsage],
   ['Swatch', SwatchUsage],
diff --git a/packages/host/app/components/adorn/selection-checkmark-icon.gts b/packages/host/app/components/adorn/selection-checkmark-icon.gts
deleted file mode 100644
index c3445ceabce..00000000000
--- a/packages/host/app/components/adorn/selection-checkmark-icon.gts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { TemplateOnlyComponent } from '@ember/component/template-only';
-
-// SelectionCheckmarkIcon: the dark-circle-with-highlight-checkmark artwork
-// shared by the Adorn bulk-selection affordances — the teal "N Selected"
-// menu trigger and its inert menu header. The companion AdornSelectChip
-// renders the same circle/check but strokes with `currentColor` so the
-// chip can be themed; here the check is always the highlight accent to
-// read against the dark circle on a teal pill.
-const SelectionCheckmarkIcon: TemplateOnlyComponent<{
-  Element: SVGSVGElement;
-}> = <template>
-  <svg
-    viewBox='0 0 14 14'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-    aria-hidden='true'
-    ...attributes
-  >
-    <circle cx='7' cy='7' r='7' fill='var(--boxel-highlight-foreground)' />
-    <path
-      d='M3.5 7.5L5.5 9.5L10.5 4.5'
-      stroke='var(--boxel-highlight)'
-      stroke-width='1.5'
-      stroke-linecap='round'
-      stroke-linejoin='round'
-    />
-  </svg>
-</template>;
-
-export default SelectionCheckmarkIcon;
diff --git a/packages/host/app/components/card-search/search-result-header.gts b/packages/host/app/components/card-search/search-result-header.gts
index 229e9a6067c..ef469f62d7c 100644
--- a/packages/host/app/components/card-search/search-result-header.gts
+++ b/packages/host/app/components/card-search/search-result-header.gts
@@ -4,15 +4,13 @@ import DeselectIcon from '@cardstack/boxel-icons/deselect';
 import SelectAllIcon from '@cardstack/boxel-icons/select-all';
 
 import {
-  BoxelDropdown,
-  Menu,
+  SelectionCheckmark,
+  SelectionMenu,
   SortDropdown,
   ViewSelector,
 } from '@cardstack/boxel-ui/components';
 import { MenuItem } from '@cardstack/boxel-ui/helpers';
-import { DropdownArrowDown } from '@cardstack/boxel-ui/icons';
 
-import SelectionCheckmarkIcon from '@cardstack/host/components/adorn/selection-checkmark-icon';
 import type { NewCardArgs } from '@cardstack/host/utils/card-search/types';
 
 import type { SortOption } from './constants';
@@ -49,50 +47,51 @@ export default class SearchResultHeader extends Component<Signature> {
   }
 
   // The trigger's visible text is just the count, so spell the control out
-  // for assistive tech (and include the count it stands in for).
+  // for assistive tech. "cards" is an app concern, so it's supplied here
+  // rather than baked into the generic SelectionMenu.
   get selectionMenuLabel(): string {
     let count = this.selectedCount;
     return `Selection menu, ${count} card${count === 1 ? '' : 's'} selected`;
   }
 
+  // Select All / Deselect All are app actions, so the items (including the
+  // inert count header) are built here and handed to the generic
+  // SelectionMenu via @items.
+  private get selectionMenuItems() {
+    return [
+      new MenuItem({
+        label: `${this.selectedCount} Selected`,
+        action: () => {},
+        icon: SelectionCheckmark,
+        header: true,
+      }),
+      new MenuItem({
+        label: 'Select All',
+        action: () => {
+          if (this.args.allCards && this.args.onSelectAll) {
+            this.args.onSelectAll(this.args.allCards);
+          }
+        },
+        icon: SelectAllIcon,
+      }),
+      new MenuItem({
+        label: 'Deselect All',
+        action: () => this.args.onDeselectAll?.(),
+        icon: DeselectIcon,
+      }),
+    ];
+  }
+
   <template>
     <header class='search-result-header' data-test-search-result-header>
       <div class='summary' data-test-search-label>{{@summaryText}}</div>
       <div class='controls'>
         {{#if this.showSelectionMenu}}
-          <div class='selection-menu'>
-            <BoxelDropdown
-              @contentClass='selection-dropdown-content'
-              @matchTriggerWidth={{false}}
-            >
-              <:trigger as |bindings|>
-                <button
-                  type='button'
-                  class='selection-dropdown-trigger'
-                  aria-label={{this.selectionMenuLabel}}
-                  {{bindings}}
-                  data-test-selection-dropdown-trigger
-                >
-                  <SelectionCheckmarkIcon class='selection-trigger-icon' />
-                  <span class='selection-trigger-text'>
-                    {{this.selectedCount}}
-                  </span>
-                  <DropdownArrowDown
-                    class='dropdown-arrow'
-                    width='13px'
-                    height='13px'
-                  />
-                </button>
-              </:trigger>
-              <:content as |dd|>
-                <Menu
-                  class='selection-menu'
-                  @items={{this.selectionMenuItems}}
-                  @closeMenu={{dd.close}}
-                />
-              </:content>
-            </BoxelDropdown>
-          </div>
+          <SelectionMenu
+            @selectedCount={{this.selectedCount}}
+            @items={{this.selectionMenuItems}}
+            @label={{this.selectionMenuLabel}}
+          />
         {{/if}}
         <ViewSelector
           @items={{@viewOptions}}
@@ -140,66 +139,6 @@ export default class SearchResultHeader extends Component<Signature> {
         min-width: 140px;
         gap: var(--boxel-sp-xs);
       }
-
-      .selection-dropdown-trigger {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--boxel-sp-5xs);
-        min-height: 1.625rem;
-        padding: 0 var(--boxel-sp-xs);
-        border: none;
-        border-radius: 0.375rem;
-        background-color: var(--boxel-highlight);
-        color: var(--boxel-dark);
-        font: 700 var(--boxel-font-sm);
-        cursor: pointer;
-      }
-      .selection-dropdown-trigger:hover,
-      .selection-dropdown-trigger:focus-visible {
-        background-color: var(--boxel-highlight-hover);
-      }
-      .selection-trigger-icon {
-        width: 0.875rem;
-        height: 0.875rem;
-        flex-shrink: 0;
-      }
-      .selection-trigger-text {
-        line-height: 1;
-        white-space: nowrap;
-      }
-      .dropdown-arrow {
-        flex-shrink: 0;
-      }
-      .selection-menu {
-        --boxel-menu-item-content-padding: var(--boxel-sp-xs) var(--boxel-sp-sm);
-      }
     </style>
   </template>
-
-  private get selectionMenuItems() {
-    return [
-      // Inert teal header echoing the trigger's count — uses the same
-      // dark-circle-with-teal-check artwork as the Adorn selection chip.
-      new MenuItem({
-        label: `${this.selectedCount} Selected`,
-        action: () => {},
-        icon: SelectionCheckmarkIcon,
-        header: true,
-      }),
-      new MenuItem({
-        label: 'Select All',
-        action: () => {
-          if (this.args.allCards && this.args.onSelectAll) {
-            this.args.onSelectAll(this.args.allCards);
-          }
-        },
-        icon: SelectAllIcon,
-      }),
-      new MenuItem({
-        label: 'Deselect All',
-        action: () => this.args.onDeselectAll?.(),
-        icon: DeselectIcon,
-      }),
-    ];
-  }
 }
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index 1e764f12bca..4d61ced8b6d 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -28,6 +28,7 @@ import {
   CardContainer,
   CardHeader,
   LoadingIndicator,
+  SelectionCheckmark,
 } from '@cardstack/boxel-ui/components';
 import {
   MenuDivider,
@@ -79,7 +80,6 @@ import consumeContext from '../../helpers/consume-context';
 import ElementTracker, {
   type RenderedCardForOverlayActions,
 } from '../../resources/element-tracker';
-import SelectionCheckmarkIcon from '../adorn/selection-checkmark-icon';
 import CardRenderer from '../card-renderer';
 
 import CardError from './card-error';
@@ -560,7 +560,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
       new MenuItem({
         label: `${selectedCount} Selected`,
         action: () => {},
-        icon: SelectionCheckmarkIcon,
+        icon: SelectionCheckmark,
         header: true,
       }),
     );