AiButton adds Loading and Disabled (reserved) states (WEB-1176)

Version: 0.6.6 · Type: ✨ Feature

WEB-1176

Problem

The Figma AI Button set (23496:9462) now ships Loading and Disabled variants (Size × Show Stroke, 4 nodes each), but AiButton only implemented Default / Hover / Clicked. The component needed both new states, aligned to the spec.

Design spec

Dimension	Loading	Disabled (reserved)
Background / stroke	Same as Default (white bg + gradient stroke, follows showStroke)	Gray fill --Grays-Gray-2 (#D6D6D6), gradient stroke removed
Icon	Spinner 16×16 (--Grays-Gray-6 #5C5C5C)	sparkle grayed out (CSS grayscale)
Label color	--Labels-Disabled (#A3A3A3)	--Labels-Disabled (#A3A3A3)
Interaction	native disabled + aria-busy, not-allowed cursor	native disabled, not-allowed cursor

Loading blocks interaction via native disabled so the not-allowed cursor is honored (a pointer-events-none element cannot show a cursor). Disabled's grayed sparkle uses CSS grayscale to approximate Figma's flat gray — the injected askAi icon is a multicolor gradient SVG that the design layer cannot recolor to a single flat gray.

Changed Files

• packages/design/src/components/AiButton/AiButton.tsx
• packages/design/src/components/AiButton/styles.ts
• packages/design/src/components/AiButton/index.ts
• packages/design/src/components/AiButton/__tests__/AiButton.test.tsx
• packages/design/src/components/AiButton/__tests__/AiButton.ct.spec.tsx
• packages/design/scripts/visual/visual-diff-config.ts

Changes

1. Added a loading?: boolean prop; disabled uses the native attribute (reserved state).
2. Refactored styles.ts from a "size × stroke" matrix into "size × stroke × state": new AiButtonState (default | loading | disabled), state visuals (label color / cursor / shadow / fill) split into AI_BUTTON_STATE_CLASS, background/stroke into getAiButtonSurfaceClass.
3. Loading renders the shared Spinner (matching Figma's 8-segment indicator) via AI_BUTTON_SPINNER_CLASS, consistent with Button's LOADING_SPINNER_CLASS.
4. Added unit tests (loading / disabled) and @visual CT snapshots for all 8 new variants, plus their Figma node mappings.