[Project Solar / Phase 1 / Cherry-pick] Cherry-pick updates to the standard Showcase pages

[didoo]

Note

Code cherry picked (and in some cases tweaked) from #3237

📌 Summary

There are a good number of changes made to the showcase in #3237 that can be cherry picked and imported directly and safely to the main branch.

🛠️ Detailed description

See commits descriptions for details about the changes.

🔗 External links

Jira ticket: https://hashicorp.atlassian.net/browse/HDS-6478

---

👀 Component checklist

• Percy was checked for any visual regression
  • changes are not approved yet, so reviewers can see the diff

💬 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	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Jun 29, 2026 11:57am
hds-website	Ready	Preview	Jun 29, 2026 11:57am

[Copilot]

Pull request overview

Cherry-picks a set of “standard showcase page” improvements from the Project Solar workstream into main, primarily focused on better state mocking (incl. delayed state application), richer component/foundation demos, and improved reliability/coverage of a few integration tests.

Changes:

• Improved mock-state handling in the showcase app (adds delayed application support and refactors the mock-state applicator).
• Expanded/updated showcase demos (notably the Focus Ring foundation page and multiple component “base elements/states” subsections).
• Updated/added integration tests for TooltipButton and Tag behaviors.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
showcase/tests/integration/components/hds/tooltip/tooltip-button-test.gts	Makes tooltip dismissal test less flaky via tippy options + waitUntil.
showcase/tests/integration/components/hds/tag/index-test.gts	Adds integration coverage for static vs interactive tag rendering.
showcase/app/templates/application.gts	Refactors mock-state application logic and adds mock-state-delay support.
showcase/app/styles/showcase-pages/focus-ring.scss	Tweaks Focus Ring foundation page layout/styling for specific demo wrappers.
showcase/app/styles/showcase-pages/dialog-primitive.scss	Adjusts dialog primitive demo container styling.
showcase/app/styles/showcase-pages/accordion.scss	Removes a no-longer-needed CSS variable override in accordion demo styling.
showcase/app/components/shw/text/types.ts	Adds label as an allowed tag value for the shared showcase text types.
showcase/app/components/page-foundations/typography/sub-sections/styles.gts	Exports STYLES_COMBINATIONS for reuse and keeps typography style matrix data explicit.
showcase/app/components/page-foundations/focus-ring/sub-sections/components.gts	Broadly expands the “components with focus ring” showcase matrix across many HDS components.
showcase/app/components/page-components/tag/sub-sections/states.gts	Reworks Tag “States” section content to cover more permutations (link/dismiss/overflow).
showcase/app/components/page-components/tag/sub-sections/link-colors.gts	Adjusts Tag link-color state demos and mock-state selectors.
showcase/app/components/page-components/tag/sub-sections/inheritance.gts	Removes an “Applied to the tag” inheritance demo block.
showcase/app/components/page-components/rich-tooltip/sub-sections/base-elements.gts	Adds an isolated RichTooltip bubble example with generic text content.
showcase/app/components/page-components/copy/snippet/sub-sections/states.gts	Updates CopySnippet status icon swapping approach and preloads required SVGs.
showcase/app/components/page-components/copy/button/sub-sections/base-elements.gts	Updates CopyButton status icon swapping approach and preloads required SVGs.
showcase/app/components/page-components/code-editor/sub-sections/base-elements.gts	Adds new CodeEditor “base elements” subsection showcasing header primitives/buttons.
showcase/app/components/page-components/code-editor/index.gts	Includes the new CodeEditor “base elements” subsection in the page index.
showcase/app/components/page-components/code-block/sub-sections/base-elements.gts	Updates CodeBlockCopyButton status icon swapping approach and preloads required SVGs.
showcase/app/components/page-components/breadcrumb/sub-sections/base-elements.gts	Normalizes breadcrumb state ordering.
showcase/app/components/page-components/app-header/sub-sections/base-elements.gts	Adds AppHeaderMenuButton base-elements/state matrix examples.
showcase/app/components/page-components/accordion/sub-sections/base-elements.gts	Exports accordion state helpers and refines the accordion item button state matrix.

[KristinLBradley]

@didoo In the CopySnippet Showcase, I'm seeing Success & Error icons appear briefly and then disappear when I reload the page: https://hds-showcase-git-project-solar-phase-1hds-6478-450a2b-hashicorp.vercel.app/components/copy/snippet

[Copilot]

Pull request overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 2 comments.