Restyle the batch badge on Primer's Counter

Reuses the Counter contract at the CSS level instead of inline
styles, so the badge is stylesheet-targetable like everything else
on the page rather than carrying its own one-off skin. Renders it
with lit-html, matching this codebase's existing precedent for
building preview markup outside Angular's own render tree.

Firefox folds a card's ink and overflow into its native drag-image
snapshot, shifting the snapshot origin off the border box and
misaligning the grab offset. The badge gets an inset, shadowless
variant there, following the same fork already established for the
card preview's own lift shadow.

https://community.openproject.org/wp/AGILE-278

Author: myabc

frontend/src/global_styles/content/drag_and_drop.sass

@@ -45,3 +45,35 @@
 
   &:active
     cursor: grabbing
+
+// Multi-card batch count badge on a sortable-lists drag preview. Renders on
+// Primer's Counter contract (see PrimerCounterComponent) so its skin is
+// stylesheet-targetable rather than inline; this class only carries the
+// positioning Counter itself doesn't own.
+.op-sortable-lists-drag-preview-batch-badge
+  position: absolute
+  top: -8px
+  right: -8px
+  min-width: 20px
+  height: 20px
+  padding: 0 6px
+  border-radius: 999px
+  background-color: var(--bgColor-emphasis)
+  color: var(--fgColor-onEmphasis)
+  font-size: 12px
+  font-weight: 600
+  line-height: 20px
+  text-align: center
+  box-shadow: var(--shadow-floating-medium)
+
+  // Firefox folds a badge's box-shadow (and its overhang past the card's
+  // border box) into the native drag-image snapshot, shifting the snapshot
+  // origin off the border box so the grab offset no longer lines up under
+  // the pointer — the same failure mode as the .Box-card[data-preview] lift
+  // shadow in border_box_list_component.sass. Inset the badge fully inside
+  // the border box and drop the shadow on Firefox only; other browsers
+  // snapshot the border box and are unaffected.
+  .-browser-firefox &
+    top: 4px
+    right: 4px
+    box-shadow: none

frontend/src/stimulus/controllers/dynamic/sortable-lists/preview.spec.ts

@@ -208,6 +208,44 @@ describe('sortable lists drag preview', () => {
         expect(badge?.textContent).toEqual('3');
         expect(container.contains(badge)).toBe(true);
       });
+
+      // Styling now lives entirely in sass, targeted through the Primer
+      // Counter contract plus this file's own class — no inline styles left
+      // to assert on.
+      it('carries the Primer Counter classes and the batch-badge class', () => {
+        const target = withWidth(previewTarget(), 320);
+        const container = document.createElement('div');
+
+        renderDragPreview({
+          previewTarget: target, sourceElement: target, container, batchSize: 3,
+        });
+
+        const badge = container.querySelector(badgeSelector);
+
+        expect(badge?.classList.contains('Counter')).toBe(true);
+        expect(badge?.classList.contains('Counter--primary')).toBe(true);
+        expect(badge?.classList.contains('op-sortable-lists-drag-preview-batch-badge')).toBe(true);
+      });
+
+      it('anchors the badge to the container without disturbing the already-appended preview clone', () => {
+        const target = withWidth(previewTarget(), 320);
+        const container = document.createElement('div');
+
+        renderDragPreview({
+          previewTarget: target, sourceElement: target, container, batchSize: 3,
+        });
+
+        const preview = container.querySelector('[data-preview]');
+        const badge = container.querySelector(badgeSelector);
+
+        // The preview clone survives lit-html's render() alongside the badge:
+        // both are present in the container at once.
+        expect(preview).not.toBeNull();
+        expect(badge).not.toBeNull();
+        expect(container.contains(preview)).toBe(true);
+        expect(container.contains(badge)).toBe(true);
+        expect(container.style.position).toEqual('relative');
+      });
     });
   });
 });

frontend/src/stimulus/controllers/dynamic/sortable-lists/preview.ts

@@ -26,6 +26,8 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
+import { html, render } from 'lit-html';
+
 // Builds the custom native drag preview for a sortable item: a sanitised clone
 // of the item's preview target, sized to match and carrying the originating
 // Box's density so its card styling survives being mounted outside the Box.
@@ -54,11 +56,14 @@ const PREVIEW_STRIPPED_ATTRIBUTES = [
 // `.Box--condensed .Box-card`) would not apply to it otherwise.
 const BOX_DENSITY_VARIANT_CLASSES = ['Box--condensed', 'Box--spacious'] as const;
 
-// The count badge added to a multi-card drag's preview. Styled inline rather
-// than through a stylesheet class, matching this file's own approach for the
-// clone's width and margin above: the preview is a native drag image built
-// outside the page's normal render tree, so it must be legible even where no
-// stylesheet has had a chance to apply to it.
+// The count badge added to a multi-card drag's preview. Styled on Primer's
+// Counter contract (the same `Counter`/`Counter--primary` classes the
+// Angular PrimerCounterComponent renders) plus this class for the
+// positioning that Counter itself doesn't own; see
+// frontend/src/global_styles/content/drag_and_drop.sass. Building it as an
+// Angular custom element is not an option here: the native drag snapshot is
+// taken synchronously at dragstart, before an Angular element would have
+// painted, so this layer stays framework-agnostic by contract.
 const BATCH_BADGE_CLASS = 'op-sortable-lists-drag-preview-batch-badge';
 
 export function renderDragPreview({
@@ -103,36 +108,26 @@ export function renderDragPreview({
     // Anchors the badge's absolute positioning to the container itself
     // rather than whatever ancestor Pragmatic happens to mount it under.
     container.style.position = 'relative';
-    container.append(renderBatchBadge(preview.ownerDocument, batchSize));
+    renderBatchBadge(container, batchSize);
   }
 }
 
-// Absolutely positioned over the card clone's top-right corner. The
-// container is the preview mount Pragmatic hands render(); giving it
-// position:relative here (rather than assuming the caller already set it)
-// keeps the badge anchored to the card regardless of what else mounts there.
-function renderBatchBadge(document:Document, batchSize:number):HTMLElement {
-  const badge = document.createElement('span');
-  badge.className = BATCH_BADGE_CLASS;
-  badge.textContent = String(batchSize);
-  Object.assign(badge.style, {
-    position: 'absolute',
-    top: '-8px',
-    right: '-8px',
-    minWidth: '20px',
-    height: '20px',
-    padding: '0 6px',
-    borderRadius: '999px',
-    backgroundColor: 'var(--bgColor-emphasis, #1f2328)',
-    color: 'var(--fgColor-onEmphasis, #ffffff)',
-    fontSize: '12px',
-    fontWeight: '600',
-    lineHeight: '20px',
-    textAlign: 'center',
-    boxShadow: 'var(--shadow-floating-medium, 0 1px 3px rgba(0, 0, 0, 0.3))',
-  });
-
-  return badge;
+// Absolutely positioned over the card clone's top-right corner (see the sass
+// block in drag_and_drop.sass for the geometry, including the Firefox
+// inset). The container is the preview mount Pragmatic hands render();
+// giving it position:relative here (rather than assuming the caller already
+// set it) keeps the badge anchored to the card regardless of what else
+// mounts there.
+//
+// lit-html's render() is safe to call directly on `container` here even
+// though the sanitised preview clone was already appended to it above:
+// render() only inserts a marker comment before its own end node (the
+// container's end, when unset) and manages content from that marker
+// onward — it does not clear pre-existing children. The clone and the
+// badge coexist; see the "anchors the badge to the container without
+// disturbing the already-appended preview clone" spec.
+function renderBatchBadge(container:HTMLElement, batchSize:number):void {
+  render(html`<span class="Counter Counter--primary ${BATCH_BADGE_CLASS}">${batchSize}</span>`, container);
 }
 
 export function sanitizePreview(element:HTMLElement):void {