Add standard interaction and lifecycle states to Alert component

[bradpotts]

This improvement bridges a gap in the Alert component by adding support for interactive states (hover, focus, active) and lifecycle states (disabled, loading) in both the recipe and CSS. It includes accessibility-oriented attribute selectors and standard focus ring implementation.

---

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

Summary by CodeRabbit

• New Features
  • Alert components now support interactive states including hover, focus, active, disabled, and loading with smooth visual transitions and enhanced feedback indicators.
  • Interactive alerts feature improved cursor behavior, focus-ring styling, opacity adjustments for disabled and loading states, and smooth transitions for color and border changes.

[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]

Walkthrough

The PR extends the Alert component with interactive state support by adding optional state flags (interactive, hovered, focused, active, disabled, loading) to the recipe options and class generator, and introduces corresponding CSS styling with transitions, cursor changes, focus-ring styling, and disabled/loading behavior for the interactive variant.

Changes

Alert interactive state support

Layer / File(s)	Summary
Recipe state flags and class generation src/recipes/alert.ts	AlertRecipeOptions interface adds six optional state flags; getAlertClasses() destructures them with false defaults and conditionally appends --interactive, --disabled, --loading modifier classes and is-hover/is-focus/is-active state tokens to the computed class list.
Interactive alert styling and transitions src/styles/components.css	.sp-alert gains CSS transitions for background-color, color, box-shadow, border-color, and opacity. New .sp-alert--interactive variant rules handle pointer cursor, hover/active/focus-visible opacity adjustments, disabled/dismissed appearance, and aria-busy styling.

Possibly Related PRs

• phcdevworks/spectre-ui#88: Extends Rating recipe class generation to support the design-system forced-state pattern with conditional is-hover, is-focus, and is-active interaction tokens.
• phcdevworks/spectre-ui#85: Extends Card component recipe and CSS with the same interactive state flags, modifier classes, and state-specific styling pattern.
• phcdevworks/spectre-ui#90: Adds forced interaction/state flags (disabled, loading, hovered, focused, active, interactive) to Avatar recipe and corresponding CSS variant styling.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is largely incomplete; it lacks most required sections from the template including linked issue, summary of changes, UI contract change type, type of change checkboxes, and the full checklist.	Complete the PR description using the repository template, including linked issue reference, detailed change summary, UI contract change type, type of change selection, and all checklist items.
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.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding standard interaction and lifecycle states to the Alert component.
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-alert-states-10090975090971191105

---

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.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/recipes/alert.ts (1)

21-31: ⚠️ Potential issue | 🟠 Major

Fix release contract/validation for expanded AlertRecipeOptions surface

• package.json has no ci:verify; release validation is handled by npm run validate:exports, npm run validate:css-contract, and npm test.
• ui-contract.manifest.json’s getAlertClasses contract lists states ["default","error","success","disabled","loading"] but no entries for interactive/hovered/focused/active.
• Search results show no sp-alert--interactive/--hover/--focus/--active references in docs/tests/snapshots, so update the alert contract manifest and add/extend alert recipe test/snapshot coverage for these new options.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/recipes/alert.ts` around lines 21 - 31, Update the alert contract and
tests to cover the expanded AlertRecipeOptions: add the new states
"interactive","hovered","focused","active" to the getAlertClasses entry in
ui-contract.manifest.json so the manifest expects corresponding CSS classes
(e.g. sp-alert--interactive, sp-alert--hover, sp-alert--focus,
sp-alert--active), then extend or add unit/snapshot tests around the Alert
recipe (referencing AlertRecipeOptions and the recipe function that produces
classes) to assert those class outputs and update snapshots; run the repository
validation commands (npm run validate:css-contract and npm test) to ensure the
manifest and tests are consistent with the new surface.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/recipes/alert.ts`:
- Around line 21-31: Update the alert contract and tests to cover the expanded
AlertRecipeOptions: add the new states
"interactive","hovered","focused","active" to the getAlertClasses entry in
ui-contract.manifest.json so the manifest expects corresponding CSS classes
(e.g. sp-alert--interactive, sp-alert--hover, sp-alert--focus,
sp-alert--active), then extend or add unit/snapshot tests around the Alert
recipe (referencing AlertRecipeOptions and the recipe function that produces
classes) to assert those class outputs and update snapshots; run the repository
validation commands (npm run validate:css-contract and npm test) to ensure the
manifest and tests are consistent with the new surface.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7907f6c7-2d46-4e26-b2df-cd71f9db2951

📥 Commits

Reviewing files that changed from the base of the PR and between 6861648 and 1690c05.

📒 Files selected for processing (2)

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