Upgrade catalyst to v1.8.0 with explicit controller names

[Copilot]

What are you trying to accomplish?

Part of https://github.com/github/core-ux/issues/1321

Upgrades @github/catalyst to v1.8.0 and adopts explicit controller naming. This enables class name minification in production builds by decoupling component registration names from class names.

Changes:

• Dependency: @github/catalyst ^1.6.0 → ^1.8.0
• All 19 @controller decorators updated with explicit names following convention: dasherize class name, drop -element suffix

Example:

// Before
@controller
export class PrimerTextFieldElement extends HTMLElement {
  @target inputElement: HTMLInputElement
}

// After
@controller('primer-text-field')
export class PrimerTextFieldElement extends HTMLElement {
  @target inputElement: HTMLInputElement
}

Affected components:

• Forms: primer-multi-input, primer-text-field, primer-text-area, toggle-switch-input
• Beta: nav-list, details-toggle, nav-list-group
• Alpha: action-bar, action-list, action-menu, scrollable-region, segmented-control, select-panel, toggle-switch, tree-view, tree-view-icon-pair, tree-view-include-fragment, tree-view-sub-tree-node, x-banner

Screenshots

N/A - No visual changes

Integration

No deployment updates required. Component tag names remain unchanged.

Risk Assessment

• Low risk - Syntactic change only. Generated JavaScript preserves identical runtime behavior. Tag names (<primer-text-field>, etc.) unchanged. TypeScript compilation and linting verified.

What approach did you choose and why?

Explicit naming in decorators is a catalyst v1.8.0 feature designed for production minification. Applied naming convention mechanically across all components to maintain consistency.

Anything you want to highlight for special attention from reviewers?

Verify tag name stability matters for your use case - all component registration names follow existing conventions (dasherized class name sans -element).

Accessibility

• No new axe scan violation - No UI changes

Merge checklist

• Added/updated tests - N/A, no behavioral changes
• Added/updated documentation - N/A, internal implementation detail
• Added/updated previews (Lookbook) - N/A, no visual changes
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5f95b8a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Pull request overview

This PR upgrades @github/catalyst to v1.8.0 and updates all Catalyst @controller usages to use explicit controller/custom-element names, decoupling runtime registration names from class names to support production minification.

Changes:

• Bump @github/catalyst dependency from ^1.6.0 to ^1.8.0 (and update lockfile accordingly).
• Update all affected @controller decorators to @controller('kebab-case-name') across Primer components and forms.
• Add a changeset for the patch release noting the Catalyst upgrade / explicit naming change.

Reviewed changes

Copilot reviewed 23 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
package.json	Updates @github/catalyst dependency to ^1.8.0.
package-lock.json	Locks Catalyst to 1.8.0 and updates lock metadata.
app/lib/primer/forms/toggle_switch_input.ts	Uses explicit @controller('toggle-switch-input').
app/lib/primer/forms/toggle_switch_input.js	Keeps generated JS in sync with explicit controller name.
app/lib/primer/forms/primer_text_field.ts	Uses explicit @controller('primer-text-field').
app/lib/primer/forms/primer_text_area.ts	Uses explicit @controller('primer-text-area').
app/lib/primer/forms/primer_multi_input.ts	Uses explicit @controller('primer-multi-input').
app/lib/primer/forms/primer_multi_input.js	Keeps generated JS in sync with explicit controller name.
app/components/primer/scrollable_region.ts	Uses explicit @controller('scrollable-region').
app/components/primer/beta/nav_list_group_element.ts	Uses explicit @controller('nav-list-group').
app/components/primer/beta/nav_list.ts	Uses explicit @controller('nav-list').
app/components/primer/beta/details_toggle_element.ts	Uses explicit @controller('details-toggle').
app/components/primer/alpha/x_banner.ts	Uses explicit @controller('x-banner').
app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.ts	Uses explicit @controller('tree-view-sub-tree-node').
app/components/primer/alpha/tree_view/tree_view_include_fragment_element.ts	Uses explicit @controller('tree-view-include-fragment').
app/components/primer/alpha/tree_view/tree_view_icon_pair_element.ts	Uses explicit @controller('tree-view-icon-pair').
app/components/primer/alpha/tree_view/tree_view.ts	Uses explicit @controller('tree-view').
app/components/primer/alpha/toggle_switch.ts	Uses explicit @controller('toggle-switch').
app/components/primer/alpha/select_panel_element.ts	Uses explicit @controller('select-panel').
app/components/primer/alpha/segmented_control.ts	Uses explicit @controller('segmented-control').
app/components/primer/alpha/action_menu/action_menu_element.ts	Uses explicit @controller('action-menu').
app/components/primer/alpha/action_list.ts	Uses explicit @controller('action-list').
app/components/primer/alpha/action_bar_element.ts	Uses explicit @controller('action-bar').
.changeset/tiny-pianos-deny.md	Adds a patch changeset describing the Catalyst upgrade and explicit naming.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.