feat(PBI-49): add BEM sub-element data-debug-id to components/sprint/*

- new-sprint-dialog: __submit on submit button
- sprint-backlog: __list on SprintBacklogLeft + SprintBacklogRight scroll areas
- sprint-board-client: root wrapper div (display:contents) + __drag-overlay
- sprint-header: __title on goal button, __dates on dates button, __actions on action cluster
- sprint-run-controls: root on controls div, __start/__cancel on action buttons; __blockers-dialog on dialog content
- start-sprint-button: root on trigger button, __dialog on dialog content, __submit on submit button
- sync-active-sprint-cookie: no debug-id (returns null, side-effect only), comment added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/sprint/new-sprint-dialog.tsx

@@ -175,6 +175,7 @@ export function NewSprintDialog({
                 type="submit"
                 form="new-sprint-form"
                 disabled={isPending || !sprintGoal.trim() || pbiIds.length === 0}
+                data-debug-id="new-sprint-dialog__submit"
               >
                 {isPending ? 'Aanmaken…' : 'Sprint aanmaken'}
               </Button>

components/sprint/sprint-backlog.tsx

@@ -294,6 +294,7 @@ export function SprintBacklogLeft({
       />
       <div
         ref={setNodeRef}
+        data-debug-id="sprint-backlog-left__list"
         className={cn(
           'flex-1 overflow-y-auto transition-colors',
           isOver && 'bg-primary/5 ring-2 ring-inset ring-primary/20 rounded'
@@ -636,6 +637,7 @@ export function SprintBacklogRight({ pbisWithStories, sprintStoryIds, isDemo, pr
       <PanelNavBar title="Product Backlog" actions={headerActions} />
       <div
         ref={setNodeRef}
+        data-debug-id="sprint-backlog-right__list"
         className={cn(
           'flex-1 overflow-y-auto py-2 transition-colors',
           isOver && 'bg-error/5 ring-2 ring-inset ring-error/20 rounded'

components/sprint/sprint-board-client.tsx

@@ -18,6 +18,7 @@ import {
   removeStoryFromSprintAction,
   reorderSprintStoriesAction,
 } from '@/actions/sprints'
+import { debugProps } from '@/lib/debug'
 
 interface SprintBoardClientProps {
   productId: string
@@ -193,6 +194,7 @@ export function SprintBoardClient({
   const selectedTasks = selectedStoryId ? (tasksByStory[selectedStoryId] ?? []) : []
 
   return (
+    <div {...debugProps('sprint-board-client')} className="contents">
     <DndContext
       id="sprint-board"
       sensors={sensors}
@@ -244,12 +246,13 @@ export function SprintBoardClient({
       />
       <DragOverlay>
         {activeDragStory && (
-          <div className="flex items-center gap-3 px-6 py-2 bg-popover border border-primary rounded shadow-lg text-sm opacity-95 w-72">
+          <div className="flex items-center gap-3 px-6 py-2 bg-popover border border-primary rounded shadow-lg text-sm opacity-95 w-72" data-debug-id="sprint-board-client__drag-overlay">
             <span className="text-muted-foreground select-none">⠿</span>
             <span className="truncate flex-1">{activeDragStory.title}</span>
           </div>
         )}
       </DragOverlay>
     </DndContext>
+    </div>
   )
 }

components/sprint/sprint-header.tsx

@@ -154,7 +154,7 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
               </div>
             </form>
           ) : (
-            <button onClick={() => !isDemo && setEditingGoal(true)} className="text-left mt-0.5 group">
+            <button onClick={() => !isDemo && setEditingGoal(true)} className="text-left mt-0.5 group" data-debug-id="sprint-header__title">
               <p className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
                 {sprint.sprint_goal}
               </p>
@@ -162,9 +162,9 @@ export function SprintHeader({ productId: _productId, productName, sprint, isDem
           )}
         </div>
 
-        <div className="flex items-center gap-2 shrink-0">
+        <div className="flex items-center gap-2 shrink-0" data-debug-id="sprint-header__actions">
           <DemoTooltip show={isDemo}>
-            <Button size="sm" variant="ghost" disabled={isDemo} className="text-muted-foreground" onClick={() => !isDemo && setEditingDates(true)}>
+            <Button size="sm" variant="ghost" disabled={isDemo} className="text-muted-foreground" data-debug-id="sprint-header__dates" onClick={() => !isDemo && setEditingDates(true)}>
               {sprint.start_date && sprint.end_date
                 ? `${toDateInputValue(sprint.start_date)} → ${toDateInputValue(sprint.end_date)}`
                 : 'Datums instellen'}

components/sprint/sprint-run-controls.tsx

@@ -19,7 +19,6 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { type PauseContext, pauseReasonLabel } from '@/lib/pause-context'
-import { debugProps } from '@/lib/debug'
 
 type SprintStatusValue = 'OPEN' | 'CLOSED' | 'ARCHIVED' | 'FAILED'
 type SprintRunStatusValue =
@@ -175,13 +174,14 @@ export function SprintRunControls({
           </Button>
         </div>
       )}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2" data-debug-id="sprint-run-controls">
         {canStart && (
           <Button
             size="sm"
             onClick={handleStart}
             disabled={pending || isDemo}
             className="text-xs"
+            data-debug-id="sprint-run-controls__start"
           >
             Start Sprint
           </Button>
@@ -193,6 +193,7 @@ export function SprintRunControls({
             disabled={pending || isDemo}
             variant="default"
             className="text-xs"
+            data-debug-id="sprint-run-controls__start"
           >
             Hervat sprint
           </Button>
@@ -204,6 +205,7 @@ export function SprintRunControls({
             disabled={pending || isDemo}
             variant="outline"
             className="text-xs"
+            data-debug-id="sprint-run-controls__cancel"
           >
             Annuleer sprint-run
           </Button>
@@ -211,7 +213,7 @@ export function SprintRunControls({
       </div>
 
       <Dialog open={blockers !== null} onOpenChange={(open) => { if (!open) setBlockers(null) }}>
-        <DialogContent className="max-w-lg" {...debugProps('sprint-run-controls', 'SprintRunControls', 'components/sprint/sprint-run-controls.tsx')}>
+        <DialogContent className="max-w-lg" data-debug-id="sprint-run-controls__blockers-dialog">
           <DialogHeader>
             <DialogTitle>Sprint kan nog niet starten</DialogTitle>
             <DialogDescription>

components/sprint/start-sprint-button.tsx

@@ -22,7 +22,6 @@ import {
 } from '@/components/shared/entity-dialog-layout'
 import { createSprintAction } from '@/actions/sprints'
 import { useSelectionStore } from '@/stores/selection-store'
-import { debugProps } from '@/lib/debug'
 import { useBacklogStore } from '@/stores/backlog-store'
 
 interface StartSprintButtonProps {
@@ -80,7 +79,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
   return (
     <>
       <DemoTooltip show={isDemo}>
-        <Button size="sm" onClick={() => setOpen(true)} disabled={isDemo}>
+        <Button size="sm" onClick={() => setOpen(true)} disabled={isDemo} data-debug-id="start-sprint-button">
           Sprint starten
         </Button>
       </DemoTooltip>
@@ -90,7 +89,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
           showCloseButton={false}
           onKeyDown={handleKeyDown}
           className={entityDialogContentClasses}
-          {...debugProps('start-sprint-button', 'StartSprintButton', 'components/sprint/start-sprint-button.tsx')}
+          data-debug-id="start-sprint-button__dialog"
         >
           <div className={entityDialogHeaderClasses}>
             <DialogTitle className="text-xl font-semibold">Nieuwe Sprint starten</DialogTitle>
@@ -173,7 +172,7 @@ export function StartSprintButton({ productId, isDemo = false }: StartSprintButt
               <Button type="button" variant="ghost" onClick={closeGuard.attemptClose} disabled={pending}>
                 Annuleren
               </Button>
-              <Button type="submit" form="start-sprint-form" disabled={pending}>
+              <Button type="submit" form="start-sprint-form" disabled={pending} data-debug-id="start-sprint-button__submit">
                 {pending ? 'Aanmaken…' : 'Sprint starten'}
               </Button>
             </div>

components/sprint/sync-active-sprint-cookie.tsx

@@ -12,5 +12,6 @@ export function SyncActiveSprintCookie({ productId, sprintId }: Props) {
   useEffect(() => {
     syncActiveSprintCookieAction(productId, sprintId)
   }, [productId, sprintId])
+  // No data-debug-id: this component renders null (side-effect only).
   return null
 }

components/sprint/task-list.tsx

@@ -221,9 +221,9 @@ export function TaskList({ storyId, sprintId: _sprintId, productId: _productId,
         }
       />
 
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto" data-debug-id="task-list__items">
         {orderedTasks.length === 0 ? (
-          <div className="text-center mt-8 space-y-3">
+          <div className="text-center mt-8 space-y-3" data-debug-id="task-list__empty">
             <p className="text-sm text-muted-foreground">Geen taken voor deze story.</p>
             <DemoTooltip show={isDemo}>
               <Button