Upgrade catalyst to v1.8.0 with explicit controller names (#3930)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: dgreif <3026298+dgreif@users.noreply.github.com>
Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.changeset/tiny-pianos-deny.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Update Catalyst to version 1.8.0 and hard-code controller/custom-element names via their @controller('...') decorators to allow for better minification

app/components/primer/alpha/action_bar_element.ts

@@ -27,7 +27,7 @@ enum ItemType {
   Divider,
 }
 
-@controller
+@controller('action-bar')
 class ActionBarElement extends HTMLElement {
   @targets items: HTMLElement[]
   @target itemContainer: HTMLElement

app/components/primer/alpha/action_list.ts

@@ -39,7 +39,7 @@ export class ActionListTruncationObserver {
   }
 }
 
-@controller
+@controller('action-list')
 export class ActionListElement extends HTMLElement {
   #truncationObserver: ActionListTruncationObserver
 

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -14,7 +14,7 @@ type SelectedItem = {
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
-@controller
+@controller('action-menu')
 export class ActionMenuElement extends HTMLElement {
   @target
   includeFragment: IncludeFragmentElement

app/components/primer/alpha/segmented_control.ts

@@ -1,6 +1,6 @@
 import {controller, targets} from '@github/catalyst'
 
-@controller
+@controller('segmented-control')
 class SegmentedControlElement extends HTMLElement {
   @targets items: HTMLElement[]
 

app/components/primer/alpha/select_panel_element.ts

@@ -64,7 +64,7 @@ const updateWhenVisible = (() => {
   }
 })()
 
-@controller
+@controller('select-panel')
 export class SelectPanelElement extends HTMLElement {
   @target includeFragment: IncludeFragmentElement
   @target dialog: HTMLDialogElement

app/components/primer/alpha/toggle_switch.ts

@@ -1,6 +1,6 @@
 import {controller, target, attr} from '@github/catalyst'
 
-@controller
+@controller('toggle-switch')
 class ToggleSwitchElement extends HTMLElement {
   @target switch: HTMLElement
   @target loadingSpinner: HTMLElement

app/components/primer/alpha/tree_view/tree_view.ts

@@ -3,7 +3,7 @@ import {TreeViewSubTreeNodeElement} from './tree_view_sub_tree_node_element'
 import {useRovingTabIndex} from './tree_view_roving_tab_index'
 import type {TreeViewNodeType, TreeViewCheckedValue, TreeViewNodeInfo} from '../../shared_events'
 
-@controller
+@controller('tree-view')
 export class TreeViewElement extends HTMLElement {
   @target formInputContainer: HTMLElement
   @target formInputPrototype: HTMLInputElement

app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {observeMutationsUntilConditionMet} from '../../utils'
 
-@controller
+@controller('tree-view-icon-pair')
 export class TreeViewIconPairElement extends HTMLElement {
   @target expandedIcon: HTMLElement
   @target collapsedIcon: HTMLElement

app/components/primer/alpha/tree_view/tree_view_include_fragment_element.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {IncludeFragmentElement} from '@github/include-fragment-element'
 
-@controller
+@controller('tree-view-include-fragment')
 export class TreeViewIncludeFragmentElement extends IncludeFragmentElement {
   request(): Request {
     const originalRequest = super.request()