[EuiCheckableCard] Fix checked border

[mgadewoll]

Summary

This PR fixes a visual issue on EuiCheckableCard to ensure the card receives a visible checked state by applying a blue border.

API Changes

⚪ No API changes

Screenshots

Before	After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

💻 EuiCheckableCard storybook

• verify that a checked EuiCheckableCard has a blue border

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and [Kibana](https://github.com/elastic/eui/blob/main/wiki/contributing-to-eui/testing/testing-in-kibana.md)
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[weronikaolejniczak]

LGTM ✅ good we added a VRT-only story. Thanks, Lene!

[Copilot]

Pull request overview

Fixes EuiCheckableCard’s checked visual state so it shows a visible “checked” border by applying the primary (blue) border color to the same border implementation used by EuiPanel/EuiSplitPanel (pseudo-element border), and adds a dedicated VRT story + reference screenshots.

Changes:

• Update EuiCheckableCard styles to apply/animate checked border color via the panel border pseudo-element (::after)
• Add a Checked Storybook story tagged for VRT coverage
• Add an upcoming changelog entry and Loki reference images for the new VRT

Reviewed changes

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

Show a summary per file

File	Description
packages/eui/src/components/card/checkable_card/checkable_card.styles.ts	Moves checked border color + transition to ::after to match EuiPanel’s border rendering
packages/eui/src/components/card/checkable_card/checkable_card.stories.tsx	Adds Checked story for VRT-only coverage
packages/eui/changelogs/upcoming/9589.md	Documents the bug fix in the upcoming changelog
packages/eui/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Checked.png	Updates/adds mobile VRT reference image
packages/eui/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Checked.png	Updates/adds desktop VRT reference image

---

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8350d75
• Documentation website
• Storybook

History

• 💚 Build #3202 succeeded 8ab82be
• 💚 Build #3201 succeeded 6b47f67

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 8350d75

History

• 💚 Build #6232 succeeded 8ab82be

cc @mgadewoll