feat(thumbnail): add showRemoveOn prop; drop hover shadow and elevation

[kentonquatman]

Summary

Reworks the Thumbnail hover interaction and remove-button affordance to align with the rest of the system.

showRemoveOn prop (new)

Adds showRemoveOn?: 'always' | 'hover' (default 'always').

• 'always' — the remove button is always shown. This is today's behavior, so existing usage is unchanged.
• 'hover' — the button is hidden at rest and revealed on hover or keyboard focus, and stays visible on touch devices (which have no hover).

Only applies when onRemove is set. The naming follows the existing Overlay showOn vocabulary for consistency.

Accessibility: the reveal is CSS-only (opacity) — the button stays mounted, so it remains keyboard- and screen-reader-reachable. Tabbing into the thumbnail triggers a :focus-within reveal. This mirrors the established OverlayScrim pattern: a scoped defineMarker + stylex.when.ancestor(':hover' / ':focus-within'), so the reveal responds only to this thumbnail rather than any outer hoverable container. A @media (hover: none) and (pointer: coarse) branch keeps the button visible on touch. Motion respects prefers-reduced-motion.

Hover overlay (matches ClickableCard)

Interactive thumbnails (onClick) now render a currentColor tint overlay on hover (5%) and active (10%), matching ClickableCard — replacing the previous hover drop shadow and opacity dim.

• Painted via ::after with pointer-events: none, clipped to the rounded corners by the image container's overflow: hidden.
• Z-index: the overlay sits below the remove button. imageContainer doesn't create its own stacking context (position: relative, no z-index), so the ::after (z-index auto) and the remove-button slot (z-index 1) flatten into the root's isolated context — the remove button always paints above the overlay and stays fully interactive.
• Hover tint is guarded by @media (hover: hover) so touch devices don't get a stuck hover state; the active tint works everywhere.

elevation prop removed from Thumbnail

The elevation prop (and its showcase example) is removed from Thumbnail as part of the same hover-interaction cleanup. It is unreleased (only pending in a changeset), so this is not a breaking change for consumers; the shared elevation changeset has been updated to drop Thumbnail from its list while leaving the other surfaces intact.

Examples

• Thumbnail — Removable now shows two rows: one with the button always visible, one revealed on hover.
• Removed the Thumbnail — Elevated example.
• Added a Remove on hover Storybook story; showRemoveOn is now a Storybook control (the elevation control was removed).

Testing

• pnpm -F @astryxdesign/core build ✅ (verified the tint color-mix rules — 5% hover-guarded, 10% active — compiled into dist/astryx.css)
• pnpm -F @astryxdesign/core typecheck ✅ (incl. tests)
• typecheck:docs, typecheck:template-docs ✅
• Thumbnail unit tests: 18 passing (incl. showRemoveOn coverage: button stays mounted on hover mode, distinct/default slot class, still fires onRemove)
• lint, sync:exports, changeset, demo-media (CORS) checks ✅

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview, Comment	Jul 25, 2026 5:33am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

Thumbnail · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	286	-
Complexity	N/A	High (29)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.7KB	0B

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 serious.

Thumbnail - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 2/12 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}