Add CSS animation hooks (is-entering / is-leaving) to BLX Modal

[Copilot]

The modal had no lifecycle class hooks, making it impossible to animate open/close transitions for the backdrop or dialog without overriding internals.

Changes

packages/modal/index.js (v1.1.0)

• Two new state classes added to [blx-el="modal-popup"]:
  • is-entering — present during the open animation; removed on animationend/transitionend
  • is-leaving — present during the close animation; all teardown (ARIA, focus restore, DOM reposition) deferred until animation completes
• waitForAnimation(el, callback) helper:
  • Inspects getComputedStyle for animation-duration / transition-duration; parses comma-separated multi-value lists and uses the longest
  • No animation detected → fires immediately (zero behaviour change for existing installs)
  • Animation detected → listens for animationend + transitionend with a called guard, plus a setTimeout fallback for interrupted/display-toggled cases
• Closing during an in-progress enter animation cancels is-entering cleanly before adding is-leaving

packages/modal/README.md

• New Animations section: class lifecycle table, @keyframes example animating backdrop and dialog independently, CSS transition example, and a note on enter-direction behaviour.

Usage

/* Backdrop */
[blx-el="modal-popup"].is-entering { animation: backdrop-in  0.25s ease forwards; }
[blx-el="modal-popup"].is-leaving  { animation: backdrop-out 0.20s ease forwards; }

/* Dialog (child element) */
[blx-el="modal-popup"].is-entering .modal-content { animation: dialog-in  0.3s cubic-bezier(0.34,1.56,0.64,1) forwards; }
[blx-el="modal-popup"].is-leaving  .modal-content { animation: dialog-out 0.2s ease forwards; }

@keyframes backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialog-in    { from { opacity: 0; transform: translateY(-20px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes dialog-out   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.97); } }

No CSS defined → instant open/close as before.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.