Define explicit controller names for OP elements

.github/copilot-instructions.md

@@ -135,7 +135,7 @@ Use Catalyst for component behaviors:
 ```typescript
 import {controller, target} from '@github/catalyst';
 
-@controller
+@controller('my-component')
 class MyComponentElement extends HTMLElement {
   @target button: HTMLElement
 

app/components/primer/open_project/avatar_fallback.ts

@@ -13,7 +13,7 @@ import {controller} from '@github/catalyst'
  * due to a Catalyst bug where @attr accessors aren't properly initialized
  * when elements have pre-existing attribute values.
  */
-@controller
+@controller('avatar-fallback')
 export class AvatarFallbackElement extends HTMLElement {
   private img: HTMLImageElement | null = null
   private testImage: HTMLImageElement | null = null

app/components/primer/open_project/border_box/collapsible_header.ts

@@ -1,8 +1,8 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from '../collapsible'
 
-@controller
+@controller('collapsible-header')
 class CollapsibleHeaderElement extends CollapsibleElement {
   connectedCallback() {
     if (!this.closest('.Box')) {
       throw new Error('No surrounding BorderBox found')

app/components/primer/open_project/collapsible_section.ts

@@ -1,8 +1,8 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from './collapsible'
 
-@controller
+@controller('collapsible-section')
 class CollapsibleSectionElement extends CollapsibleElement {
   get baseClass(): string {
     return 'CollapsibleSection'
   }

app/components/primer/open_project/danger_dialog_form_helper.ts

@@ -3,7 +3,7 @@ import type {LiveRegionElement} from '@primer/live-region-element'
 
 const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
 
-@controller
+@controller('danger-dialog-form-helper')
 class DangerDialogFormHelperElement extends HTMLElement {
   @target checkbox: HTMLInputElement | undefined
   @target liveRegion: LiveRegionElement

app/components/primer/open_project/filterable_tree_view.ts

@@ -18,7 +18,7 @@ type NodeState = {
 
 const ASYNC_DEBOUNCE_MS = 300
 
-@controller
+@controller('filterable-tree-view')
 export class FilterableTreeViewElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @target filterModeControlList: HTMLElement

app/components/primer/open_project/page_header_element.ts

@@ -1,6 +1,6 @@
 import {controller} from '@github/catalyst'
 
-@controller
+@controller('page-header')
 class PageHeaderElement extends HTMLElement {
   menuItemClick(event: Event) {
     const currentTarget = event.currentTarget as HTMLButtonElement

app/components/primer/open_project/sub_header_element.ts

@@ -1,6 +1,6 @@
 import {controller, target, targets} from '@github/catalyst'
 
-@controller
+@controller('sub-header')
 class SubHeaderElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @targets shownItemsOnExpandedFilter: HTMLElement[]

app/components/primer/open_project/zen_mode_button.ts

@@ -1,11 +1,11 @@
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('zen-mode-button')
 class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false
 
   // eslint-disable-next-line custom-elements/no-constructor
   constructor() {
     super()
     document.addEventListener('fullscreenchange', this.fullscreenChangeEventHandler.bind(this))

docs/contributors/adding-components.md

@@ -49,7 +49,7 @@ Catalyst has `controller` and `target` decorators which you have to import from
 ```ts
 import {controller, target} from '@github/catalyst';
 
-@controller
+@controller('my-component')
 class MyComponentNameElement extends HTMLElement {
   @target button: HTMLElement
 }