Upgrade catalyst to v1.8.0 with explicit controller names

.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()

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

@@ -9,7 +9,7 @@ type LoadingState = 'loading' | 'error' | 'success'
 
 export type SelectStrategy = 'self' | 'descendants' | 'mixed_descendants'
 
-@controller
+@controller('tree-view-sub-tree-node')
 export class TreeViewSubTreeNodeElement extends HTMLElement {
   @target node: HTMLElement
   @target subTree: HTMLElement

app/components/primer/alpha/x_banner.ts

@@ -6,7 +6,7 @@ declare global {
   }
 }
 
-@controller
+@controller('x-banner')
 class XBannerElement extends HTMLElement {
   @target titleText: HTMLElement
 

app/components/primer/beta/details_toggle_element.ts

@@ -30,7 +30,7 @@ import {controller, target} from '@github/catalyst'
  * ```
  */
 
-@controller
+@controller('details-toggle')
 class DetailsToggleElement extends HTMLElement {
   @target detailsTarget!: HTMLDetailsElement
   @target summaryTarget!: HTMLElement

app/components/primer/beta/nav_list.ts

@@ -1,7 +1,7 @@
 import {controller, target, targets} from '@github/catalyst'
 import {ActionListTruncationObserver} from '../alpha/action_list'
 
-@controller
+@controller('nav-list')
 export class NavListElement extends HTMLElement {
   @targets items: HTMLElement[]
   @target topLevelList: HTMLElement

app/components/primer/beta/nav_list_group_element.ts

@@ -1,7 +1,7 @@
 import {controller, target, targets} from '@github/catalyst'
 import {ActionListTruncationObserver} from '../alpha/action_list'
 
-@controller
+@controller('nav-list-group')
 export class NavListGroupElement extends HTMLElement {
   @target showMoreItem: HTMLElement
   @targets focusMarkers: HTMLElement[]

app/components/primer/scrollable_region.ts

@@ -1,6 +1,6 @@
 import {controller, attr} from '@github/catalyst'
 
-@controller
+@controller('scrollable-region')
 export class ScrollableRegionElement extends HTMLElement {
   @attr hasOverflow = false
   @attr labelledBy = ''

app/lib/primer/forms/primer_multi_input.js

@@ -35,7 +35,7 @@ __decorate([
     targets
 ], PrimerMultiInputElement.prototype, "fields", void 0);
 PrimerMultiInputElement = __decorate([
-    controller
+    controller('primer-multi-input')
 ], PrimerMultiInputElement);
 export { PrimerMultiInputElement };
 if (!window.customElements.get('primer-multi-input')) {

app/lib/primer/forms/primer_multi_input.ts

@@ -1,7 +1,7 @@
 /* eslint-disable custom-elements/expose-class-on-global */
 import {controller, targets} from '@github/catalyst'
 
-@controller
+@controller('primer-multi-input')
 export class PrimerMultiInputElement extends HTMLElement {
   @targets fields: HTMLInputElement[]
 

app/lib/primer/forms/primer_text_area.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 import {CharacterCounter} from './character_counter'
 
-@controller
+@controller('primer-text-area')
 export class PrimerTextAreaElement extends HTMLElement {
   @target inputElement: HTMLTextAreaElement
   @target characterLimitElement: HTMLElement

app/lib/primer/forms/primer_text_field.ts

@@ -10,7 +10,7 @@ declare global {
   }
 }
 
-@controller
+@controller('primer-text-field')
 export class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement

app/lib/primer/forms/toggle_switch_input.js

@@ -29,6 +29,6 @@ __decorate([
     target
 ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
 ToggleSwitchInputElement = __decorate([
-    controller
+    controller('toggle-switch-input')
 ], ToggleSwitchInputElement);
 export { ToggleSwitchInputElement };

app/lib/primer/forms/toggle_switch_input.ts

@@ -2,7 +2,7 @@
 
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('toggle-switch-input')
 export class ToggleSwitchInputElement extends HTMLElement {
   @target validationElement: HTMLElement
   @target validationMessageElement: HTMLElement