Improve Card component state contract and parity

[bradpotts]

Improved the Card component's UI contract by adding missing states (disabled, loading) and enhancing interactive state support. Specifically:

• CSS now recognizes :disabled, [aria-disabled="true"], and [aria-busy="true"] for better accessibility and framework integration.
• Interactive cards now show a standard focus ring using design tokens when focused.
• The Card recipe now outputs forced-state classes like 'is-focus', allowing adapters to programmatically trigger visual states.
• All changes are token-driven and verified through automated tests and manual visual inspection.

---

PR created automatically by Jules for task 664618733502037875 started by @bradpotts

Summary by CodeRabbit

• Style
  • Expanded card disabled-state styling to support additional HTML patterns and attributes for better accessibility.
  • Refactored card interactive styling with distinct visual feedback for hover and focus states.

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 845cba3c-c2e3-47df-b77c-0db8c5d738cd

📥 Commits

Reviewing files that changed from the base of the PR and between fa12aff and f4d3e1e.

📒 Files selected for processing (2)

• src/recipes/card.ts
• src/styles/components.css

---

Walkthrough

Card component styling and class generation are updated to support boolean-state utility classes alongside existing BEM classes, with expanded disabled-state selector coverage and reorganized interactive-state CSS rules that differentiate between elevated shadow (hover/focus-within) and focus-ring shadow (focus-visible) treatments.

Changes

Card component class and styling updates

Layer / File(s)	Summary
Boolean-state class generation in recipe src/recipes/card.ts	hovered, focused, and active states now emit both sp-card--* BEM classes and paired is-* utility classes.
CSS disabled and interactive state selectors src/styles/components.css	Disabled-state selectors expand to include native :disabled and aria-disabled="true" attributes with cursor: not-allowed styling. Interactive-state rules split into separate groups: one for :focus-within and hover states with elevated shadow, another for :focus-visible and focus states with focus-ring shadow.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• phcdevworks/spectre-ui#80: Both PRs update component "hovered/focused/active" class generation to add matching is-hover/is-focus/is-active indicators alongside corresponding CSS selector parity.
• phcdevworks/spectre-ui#81: Both PRs introduce the same "forced" boolean state contract (is-hover/is-focus/is-active) and expanded disabled-state selectors in src/styles/components.css, mirroring the recipe-level class changes for card-like components.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description covers key areas but lacks checklist completion, missing several required validation items from the template.	Complete the description template checklist, including linked issue reference, type of change selection, and verification of npm ci:verify, tests, docs, and CHANGELOG updates.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: improving the Card component's state contract and parity by adding missing states and enhancing interactive state support.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-card-contract-states-664618733502037875

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}