Website: add support for gts/hbs code snippets

[shleewhite]

📌 Summary

If merged, this PR would create a new code group component that displays both hbs and gts code snippets.

To see the new code groups in action:

• Accordion
• Badge
• Button

Changes include:

• New CodeGroup component
• Switch the website from using ember-cli-clipboard to a custom clipboard modifier based on the hdsClipboard. This is because ember-cli-clipboard is not a v2 addon and can't work in gts.
• Add new step to the build process to convert all instances of [[demo: code-snippets/filename.hbs]] into the correct component
• Add a coupe new dependencies: ember-shiki and ember-style-modifier
• Convert all demos on the badge and button pages to the new format

Potential follow ups:

• try to resolve the fastboot errors that various things (HTMLElement, ResizeObserver) are not defined. These come from the ember-shiki code block, but unclear how to resolve them. They do not show up for the client, so I think they are ok for now.
• update DynamicTemplate component to be able to handle rendering gts components (currently it always renders the hbs version)
• once all the pages have been converted to the new code snippet, remove ember-prism bc it is deprecated

🛠️ Detailed description

To make this new component, I added a new step to the website build process. These are the steps to add a new demo to a page:

1. Create a new code snippet, one in hbs and one in gts.

Note: the gts version needs to have the same name as the hbs file, except add -component to the end. This is because if they have the same exact name, ember thinks both files are part of the same component and the types get messed up.

So for example, the new files would be button-basic.hbs and button-basic-component.gts

If the example needs additional javascript, just add a js file as well. In the previous example, it would be basic-button.js.

2. Add the new demo to the page in markdown

In the markdown, add a demo and pass the relative path to the handlebars file.

In the example, it woudl be: [[demo: code-snippets/button-basic.hbs]]

If you don't want the code to execute, simply do [[demo: code-snippets/button-basic.hbs execute=false]].

📸 Screenshots

Before

After

🔗 External links

Jira ticket: HDS-5316
Figma file: https://www.figma.com/design/Ky0qWjvHZR3je1lCBlzNB1/HDS-Website--Initial-Build-?node-id=5827-16315&t=BAV6D7DOHG0WIYFY-0

---

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Dec 2, 2025 10:06pm
hds-website	Ready	Preview	Dec 2, 2025 10:06pm

[shleewhite]

Needed for the ember-shiki to work in fastboot. see: https://ember-shiki.pages.dev/#fastboot

[shleewhite]

I made the prettier ignore more specific so the code snippets would be fixed by prettier.

[shleewhite]

Added the style modifier because examples use it but it was not previously a dependency of the website.