feat(ui): add skeleton loading handoffs

- Add reusable shadcn skeleton scanner and reveal primitives
- Wrap page-level loading states with skeleton content handoffs
- Document skeleton usage through a project skill

AGENTS.md

@@ -35,6 +35,7 @@ Use these skills for detailed patterns on-demand:
 | `prowler` | Project overview, component navigation | [SKILL.md](skills/prowler/SKILL.md) |
 | `prowler-api` | Django + RLS + JSON:API patterns | [SKILL.md](skills/prowler-api/SKILL.md) |
 | `prowler-ui` | Next.js + shadcn conventions | [SKILL.md](skills/prowler-ui/SKILL.md) |
+| `prowler-ui-skeletons` | shadcn skeleton loading and content reveal conventions | [SKILL.md](skills/prowler-ui-skeletons/SKILL.md) |
 | `prowler-sdk-check` | Create new security checks | [SKILL.md](skills/prowler-sdk-check/SKILL.md) |
 | `prowler-mcp` | MCP server tools and models | [SKILL.md](skills/prowler-mcp/SKILL.md) |
 | `prowler-test-sdk` | SDK testing (pytest + moto) | [SKILL.md](skills/prowler-test-sdk/SKILL.md) |
@@ -85,6 +86,7 @@ When performing these actions, ALWAYS invoke the corresponding skill FIRST:
 | Creating new skills | `skill-creator` |
 | Creating or reviewing Django migrations | `django-migration-psql` |
 | Creating/modifying Prowler UI components | `prowler-ui` |
+| Creating/modifying skeletons, loading states, or Suspense fallbacks | `prowler-ui-skeletons` |
 | Creating/modifying models, views, serializers | `prowler-api` |
 | Creating/updating compliance frameworks | `prowler-compliance` |
 | Debug why a GitHub Actions job is failing | `prowler-ci` |

skills/prowler-ui-skeletons/SKILL.md

@@ -0,0 +1,60 @@
+---
+name: prowler-ui-skeletons
+description: "Trigger: skeleton, loading state, Suspense fallback, content reveal, shimmer. Use Prowler shadcn skeletons correctly."
+license: Apache-2.0
+metadata:
+  author: prowler-cloud
+  version: "1.0"
+  scope: [root, ui]
+  auto_invoke:
+    - "Creating/modifying skeletons"
+    - "Creating/modifying loading states"
+    - "Adding Suspense fallbacks"
+---
+
+## Activation Contract
+
+Use this skill before creating or modifying any Prowler UI skeleton, loading placeholder, Suspense fallback, or loading-to-content transition.
+
+## Hard Rules
+
+- Prefer shadcn `Skeleton` from `@/components/shadcn`; do not add new HeroUI skeletons.
+- Do not mix HeroUI and shadcn inside the same new loading surface.
+- Keep scanner/shimmer behavior centralized in shadcn `Skeleton`; never duplicate scanner CSS in feature files.
+- For Suspense data loading, wrap the boundary with `SkeletonBoundary` so fallback removal and real content reveal are paired.
+- For client-state loading (`isLoading`, drawers, modals, expanded rows), add a reveal wrapper around the resolved content, not around the skeleton.
+- Respect `motion-reduce`; every animation must degrade to no transform/transition.
+- Preserve layout stability: skeleton dimensions must match the final content as closely as practical.
+- Do not migrate legacy/HeroUI skeletons unless the task explicitly includes that migration.
+
+## Decision Gates
+
+| Situation | Action |
+| --- | --- |
+| Page/server data with `Suspense` fallback | Use `SkeletonBoundary` with the skeleton fallback. |
+| Nested Suspense inside tab/chart content | Use `SkeletonBoundary` unless the fallback is legacy/HeroUI. |
+| Client state swaps skeleton to content | Keep shadcn `Skeleton`; wrap resolved content with `SkeletonContentReveal` or an equivalent shared reveal. |
+| Existing HeroUI skeleton | Leave unchanged unless migration is explicitly requested. |
+| Text-only `Loading...` fallback | Replace only if the requested scope includes that surface. |
+
+## Execution Steps
+
+1. Identify whether the skeleton is shadcn, HeroUI legacy, or text-only fallback.
+2. If shadcn + Suspense, use `SkeletonBoundary` instead of raw `Suspense`.
+3. If shadcn + client state, keep the skeleton fallback and reveal only the loaded content.
+4. Verify reduced-motion classes remain present.
+5. Add or update focused tests when changing shared skeleton primitives or reusable boundaries.
+
+## Output Contract
+
+Report:
+- Which loading surfaces changed.
+- Whether each surface is Suspense-boundary or client-state loading.
+- Which legacy/HeroUI skeletons were intentionally left untouched.
+- Test/typecheck evidence when implementation changes are made.
+
+## References
+
+- `ui/components/shadcn/skeleton/skeleton.tsx`
+- `ui/components/shadcn/skeleton/skeleton-boundary.tsx`
+- `ui/components/shadcn/skeleton/skeleton-content-reveal.tsx`

ui/AGENTS.md

@@ -3,6 +3,7 @@
 > **Skills Reference**: For detailed patterns, use these skills:
 >
 > - [`prowler-ui`](../skills/prowler-ui/SKILL.md) - Prowler-specific UI patterns
+> - [`prowler-ui-skeletons`](../skills/prowler-ui-skeletons/SKILL.md) - shadcn skeleton loading and content reveal conventions
 > - [`prowler-test-ui`](../skills/prowler-test-ui/SKILL.md) - Playwright E2E testing (comprehensive)
 > - [`typescript`](../skills/typescript/SKILL.md) - Const types, flat interfaces
 > - [`react-19`](../skills/react-19/SKILL.md) - No useMemo/useCallback, compiler
@@ -19,35 +20,36 @@
 
 When performing these actions, ALWAYS invoke the corresponding skill FIRST:
 
-| Action                                                         | Skill               |
-| -------------------------------------------------------------- | ------------------- |
-| Add changelog entry for a PR or feature                        | `prowler-changelog` |
-| App Router / Server Actions                                    | `nextjs-16`         |
-| Building AI chat features                                      | `ai-sdk-5`          |
-| Committing changes                                             | `prowler-commit`    |
-| Create PR that requires changelog entry                        | `prowler-changelog` |
-| Creating Zod schemas                                           | `zod-4`             |
-| Creating a git commit                                          | `prowler-commit`    |
-| Creating/modifying Prowler UI components                       | `prowler-ui`        |
-| Fixing bug                                                     | `tdd`               |
-| Implementing feature                                           | `tdd`               |
-| Modifying component                                            | `tdd`               |
-| Refactoring code                                               | `tdd`               |
-| Review changelog format and conventions                        | `prowler-changelog` |
-| Testing hooks or utilities                                     | `vitest`            |
-| Update CHANGELOG.md in any component                           | `prowler-changelog` |
-| Using Zustand stores                                           | `zustand-5`         |
-| Working on Prowler UI structure (actions/adapters/types/hooks) | `prowler-ui`        |
-| Working on task                                                | `tdd`               |
-| Working with Prowler UI test helpers/pages                     | `prowler-test-ui`   |
-| Working with Tailwind classes                                  | `tailwind-4`        |
-| Writing Playwright E2E tests                                   | `playwright`        |
-| Writing Prowler UI E2E tests                                   | `prowler-test-ui`   |
-| Writing React component tests                                  | `vitest`            |
-| Writing React components                                       | `react-19`          |
-| Writing TypeScript types/interfaces                            | `typescript`        |
-| Writing Vitest tests                                           | `vitest`            |
-| Writing unit tests for UI                                      | `vitest`            |
+| Action                                                              | Skill                  |
+| ------------------------------------------------------------------- | ---------------------- |
+| Add changelog entry for a PR or feature                             | `prowler-changelog`    |
+| App Router / Server Actions                                         | `nextjs-16`            |
+| Building AI chat features                                           | `ai-sdk-5`             |
+| Committing changes                                                  | `prowler-commit`       |
+| Create PR that requires changelog entry                             | `prowler-changelog`    |
+| Creating Zod schemas                                                | `zod-4`                |
+| Creating a git commit                                               | `prowler-commit`       |
+| Creating/modifying Prowler UI components                            | `prowler-ui`           |
+| Creating/modifying skeletons, loading states, or Suspense fallbacks | `prowler-ui-skeletons` |
+| Fixing bug                                                          | `tdd`                  |
+| Implementing feature                                                | `tdd`                  |
+| Modifying component                                                 | `tdd`                  |
+| Refactoring code                                                    | `tdd`                  |
+| Review changelog format and conventions                             | `prowler-changelog`    |
+| Testing hooks or utilities                                          | `vitest`               |
+| Update CHANGELOG.md in any component                                | `prowler-changelog`    |
+| Using Zustand stores                                                | `zustand-5`            |
+| Working on Prowler UI structure (actions/adapters/types/hooks)      | `prowler-ui`           |
+| Working on task                                                     | `tdd`                  |
+| Working with Prowler UI test helpers/pages                          | `prowler-test-ui`      |
+| Working with Tailwind classes                                       | `tailwind-4`           |
+| Writing Playwright E2E tests                                        | `playwright`           |
+| Writing Prowler UI E2E tests                                        | `prowler-test-ui`      |
+| Writing React component tests                                       | `vitest`               |
+| Writing React components                                            | `react-19`             |
+| Writing TypeScript types/interfaces                                 | `typescript`           |
+| Writing Vitest tests                                                | `vitest`               |
+| Writing unit tests for UI                                           | `vitest`               |
 
 ---
 

ui/app/(prowler)/compliance/page.tsx

@@ -1,5 +1,4 @@
 import { Info } from "lucide-react";
-import { Suspense } from "react";
 
 import {
   getComplianceOverviewMetadataInfo,
@@ -16,6 +15,7 @@ import { ComplianceFilters } from "@/components/compliance/compliance-header/com
 import { ComplianceOverviewGrid } from "@/components/compliance/compliance-overview-grid";
 import { Alert, AlertDescription } from "@/components/shadcn/alert";
 import { Card, CardContent } from "@/components/shadcn/card/card";
+import { SkeletonBoundary } from "@/components/shadcn/skeleton/skeleton-boundary";
 import { ContentLayout } from "@/components/ui";
 import { pickLatestCisPerProvider } from "@/lib/compliance/compliance-report-types";
 import {
@@ -156,7 +156,7 @@ export default async function Compliance({
             )}
 
           {/* Row 3: Compliance grid with client-side search */}
-          <Suspense
+          <SkeletonBoundary
             key={searchParamsKey}
             fallback={
               <ComplianceOverviewPanel>
@@ -169,7 +169,7 @@ export default async function Compliance({
               scanId={selectedScanId}
               selectedScan={selectedScanData}
             />
-          </Suspense>
+          </SkeletonBoundary>
         </>
       ) : (
         <NoScansAvailable />

ui/app/(prowler)/findings/page.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from "react";
-
 import {
   adaptFindingGroupsResponse,
   getFindingGroups,
@@ -14,6 +12,7 @@ import {
   FindingsGroupTable,
   SkeletonTableFindings,
 } from "@/components/findings/table";
+import { SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { FilterTransitionWrapper } from "@/contexts";
 import {
@@ -111,12 +110,12 @@ export default async function Findings({
             }
           />
         </div>
-        <Suspense fallback={<SkeletonTableFindings />}>
+        <SkeletonBoundary fallback={<SkeletonTableFindings />}>
           <SSRDataTable
             searchParams={resolvedSearchParams}
             filters={resolvedFilters}
           />
-        </Suspense>
+        </SkeletonBoundary>
       </FilterTransitionWrapper>
     </ContentLayout>
   );

ui/app/(prowler)/invitations/page.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { Suspense } from "react";
 
 import { getInvitations } from "@/actions/invitations/invitation";
 import { getRoles } from "@/actions/roles";
@@ -10,7 +9,7 @@ import {
   ColumnsInvitation,
   SkeletonTableInvitation,
 } from "@/components/invitations/table";
-import { Button } from "@/components/shadcn";
+import { Button, SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { InvitationProps, Role, SearchParamsProps } from "@/types";
@@ -39,9 +38,12 @@ export default async function Invitations({
           </Button>
         </div>
 
-        <Suspense key={searchParamsKey} fallback={<SkeletonTableInvitation />}>
+        <SkeletonBoundary
+          key={searchParamsKey}
+          fallback={<SkeletonTableInvitation />}
+        >
           <SSRDataTable searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
       </div>
     </ContentLayout>
   );

ui/app/(prowler)/mutelist/page.tsx

@@ -1,5 +1,4 @@
-import { Suspense } from "react";
-
+import { SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { SearchParamsProps } from "@/types/components";
 
@@ -18,9 +17,12 @@ export default async function MutelistPage({
     <ContentLayout title="Mutelist" icon="lucide:volume-x">
       <MutelistTabs
         simpleContent={
-          <Suspense key={searchParamsKey} fallback={<MuteRulesTableSkeleton />}>
+          <SkeletonBoundary
+            key={searchParamsKey}
+            fallback={<MuteRulesTableSkeleton />}
+          >
             <MuteRulesTable searchParams={resolvedSearchParams} />
-          </Suspense>
+          </SkeletonBoundary>
         }
       />
     </ContentLayout>

ui/app/(prowler)/page.tsx

@@ -1,7 +1,6 @@
-import { Suspense } from "react";
-
 import { getAllProviders } from "@/actions/providers";
 import { ProviderAccountSelectors } from "@/components/filters/provider-account-selectors";
+import { SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { SearchParamsProps } from "@/types";
 
@@ -47,55 +46,64 @@ export default async function Home({
       </div>
 
       <div className="flex flex-col gap-6 xl:flex-row xl:flex-wrap xl:items-stretch">
-        <Suspense fallback={<ThreatScoreSkeleton />}>
+        <SkeletonBoundary
+          fallback={<ThreatScoreSkeleton />}
+          className="w-full lg:max-w-[312px]"
+        >
           <ThreatScoreSSR searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
 
-        <Suspense fallback={<StatusChartSkeleton />}>
+        <SkeletonBoundary
+          fallback={<StatusChartSkeleton />}
+          className="min-w-[312px] flex-1 md:min-w-[380px]"
+        >
           <CheckFindingsSSR searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
 
-        <Suspense fallback={<RiskSeverityChartSkeleton />}>
+        <SkeletonBoundary
+          fallback={<RiskSeverityChartSkeleton />}
+          className="min-w-[312px] flex-1 md:min-w-[380px]"
+        >
           <RiskSeverityChartSSR searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
       </div>
 
       <div className="mt-6">
-        <Suspense fallback={<ResourcesInventorySkeleton />}>
+        <SkeletonBoundary fallback={<ResourcesInventorySkeleton />}>
           <ResourcesInventorySSR searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
       </div>
 
       <div className="mt-6 flex flex-col gap-6 xl:flex-row">
         {/* Watchlists: stacked on mobile, row on tablet, stacked on desktop */}
         <div className="flex min-w-0 flex-col gap-6 overflow-hidden sm:flex-row sm:flex-wrap sm:items-stretch xl:w-[312px] xl:shrink-0 xl:flex-col">
           <div className="min-w-0 sm:flex-1 xl:flex-auto [&>*]:h-full">
-            <Suspense fallback={<WatchlistCardSkeleton />}>
+            <SkeletonBoundary fallback={<WatchlistCardSkeleton />}>
               <ComplianceWatchlistSSR searchParams={resolvedSearchParams} />
-            </Suspense>
+            </SkeletonBoundary>
           </div>
           <div className="min-w-0 sm:flex-1 xl:flex-auto [&>*]:h-full">
-            <Suspense fallback={<WatchlistCardSkeleton />}>
+            <SkeletonBoundary fallback={<WatchlistCardSkeleton />}>
               <ServiceWatchlistSSR searchParams={resolvedSearchParams} />
-            </Suspense>
+            </SkeletonBoundary>
           </div>
         </div>
 
         {/* Charts column: Attack Surface on top, Findings Over Time below */}
         <div className="flex flex-1 flex-col gap-6">
-          <Suspense fallback={<AttackSurfaceSkeleton />}>
+          <SkeletonBoundary fallback={<AttackSurfaceSkeleton />}>
             <AttackSurfaceSSR searchParams={resolvedSearchParams} />
-          </Suspense>
-          <Suspense fallback={<FindingSeverityOverTimeSkeleton />}>
+          </SkeletonBoundary>
+          <SkeletonBoundary fallback={<FindingSeverityOverTimeSkeleton />}>
             <FindingSeverityOverTimeSSR searchParams={resolvedSearchParams} />
-          </Suspense>
+          </SkeletonBoundary>
         </div>
       </div>
 
       <div className="mt-6">
-        <Suspense fallback={<RiskPipelineViewSkeleton />}>
+        <SkeletonBoundary fallback={<RiskPipelineViewSkeleton />}>
           <GraphsTabsWrapper searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
       </div>
     </ContentLayout>
   );

ui/app/(prowler)/providers/page.tsx

@@ -1,8 +1,6 @@
-import { Suspense } from "react";
-
 import { ProvidersAccountsView } from "@/components/providers";
 import { SkeletonTableProviders } from "@/components/providers/table";
-import { Skeleton } from "@/components/shadcn/skeleton/skeleton";
+import { Skeleton, SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { FilterTransitionWrapper } from "@/contexts";
 import { SearchParamsProps } from "@/types";
@@ -30,20 +28,20 @@ export default async function Providers({
         <ProviderPageTabs
           activeTab={activeTab}
           providersContent={
-            <Suspense
+            <SkeletonBoundary
               key={`providers-${searchParamsKey}`}
               fallback={<ProvidersTableFallback />}
             >
               <ProvidersTabContent searchParams={resolvedSearchParams} />
-            </Suspense>
+            </SkeletonBoundary>
           }
           providerGroupsContent={
-            <Suspense
+            <SkeletonBoundary
               key={`groups-${searchParamsKey}`}
               fallback={<ProviderGroupsFallback />}
             >
               <ProviderGroupsContent searchParams={resolvedSearchParams} />
-            </Suspense>
+            </SkeletonBoundary>
           }
         />
       </FilterTransitionWrapper>

ui/app/(prowler)/resources/page.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from "react";
-
 import { getAllProviders } from "@/actions/providers";
 import {
   getLatestMetadataInfo,
@@ -11,6 +9,7 @@ import {
 import { ResourcesFilters } from "@/components/resources/resources-filters";
 import { SkeletonTableResources } from "@/components/resources/skeleton/skeleton-table-resources";
 import { ResourcesTableWithSelection } from "@/components/resources/table";
+import { SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { FilterTransitionWrapper } from "@/contexts";
 import {
@@ -86,12 +85,12 @@ export default async function Resources({
             uniqueGroups={uniqueGroups}
           />
         </div>
-        <Suspense fallback={<SkeletonTableResources />}>
+        <SkeletonBoundary fallback={<SkeletonTableResources />}>
           <SSRDataTable
             searchParams={resolvedSearchParams}
             initialResource={processedResource}
           />
-        </Suspense>
+        </SkeletonBoundary>
       </FilterTransitionWrapper>
     </ContentLayout>
   );

ui/app/(prowler)/roles/page.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { Suspense } from "react";
 
 import { getRoles } from "@/actions/roles";
 import { FilterControls } from "@/components/filters";
 import { filterRoles } from "@/components/filters/data-filters";
 import { AddIcon } from "@/components/icons";
 import { ColumnsRoles, SkeletonTableRoles } from "@/components/roles/table";
-import { Button } from "@/components/shadcn";
+import { Button, SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { DataTable, DataTableFilterCustom } from "@/components/ui/table";
 import { SearchParamsProps } from "@/types";
@@ -34,9 +33,12 @@ export default async function Roles({
           </Button>
         </div>
 
-        <Suspense key={searchParamsKey} fallback={<SkeletonTableRoles />}>
+        <SkeletonBoundary
+          key={searchParamsKey}
+          fallback={<SkeletonTableRoles />}
+        >
           <SSRDataTable searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
       </div>
     </ContentLayout>
   );

ui/app/(prowler)/scans/page.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from "react";
-
 import { getAllProviders } from "@/actions/providers";
 import { getScans } from "@/actions/scans";
 import { auth } from "@/auth.config";
@@ -12,6 +10,7 @@ import { ScansPageShell } from "@/components/scans/scans-page-shell";
 import { ScansProvidersEmptyState } from "@/components/scans/scans-providers-empty-state";
 import { SkeletonTableScans } from "@/components/scans/table";
 import { ScanJobsTable } from "@/components/scans/table/scan-jobs-table";
+import { SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import {
   ProviderProps,
@@ -88,7 +87,7 @@ export default async function Scans({
           hasManageScansPermission={hasManageScansPermission}
           activeScanCount={activeScanCount}
         >
-          <Suspense
+          <SkeletonBoundary
             fallback={
               <SkeletonTableScans
                 tab={getScanJobsTab(resolvedSearchParams.tab)}
@@ -96,7 +95,7 @@ export default async function Scans({
             }
           >
             <SSRDataTableScans searchParams={resolvedSearchParams} />
-          </Suspense>
+          </SkeletonBoundary>
         </ScansPageShell>
       )}
     </ContentLayout>

ui/app/(prowler)/users/page.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { Suspense } from "react";
 
 import { getRoles } from "@/actions/roles/roles";
 import { getCurrentUserTenantRole, getUsers } from "@/actions/users/users";
 import { auth } from "@/auth.config";
 import { FilterControls } from "@/components/filters";
 import { AddIcon } from "@/components/icons";
-import { Button } from "@/components/shadcn";
+import { Button, SkeletonBoundary } from "@/components/shadcn";
 import { ContentLayout } from "@/components/ui";
 import { DataTable } from "@/components/ui/table";
 import { ColumnsUser, SkeletonTableUser } from "@/components/users/table";
@@ -35,9 +34,12 @@ export default async function Users({
           </Button>
         </div>
 
-        <Suspense key={searchParamsKey} fallback={<SkeletonTableUser />}>
+        <SkeletonBoundary
+          key={searchParamsKey}
+          fallback={<SkeletonTableUser />}
+        >
           <SSRDataTable searchParams={resolvedSearchParams} />
-        </Suspense>
+        </SkeletonBoundary>
       </div>
     </ContentLayout>
   );

ui/components/findings/table/inline-resource-container.tsx

@@ -5,7 +5,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { AnimatePresence, motion } from "framer-motion";
+import { motion } from "framer-motion";
 import { ChevronsDown } from "lucide-react";
 import { useImperativeHandle, useRef } from "react";
 
@@ -213,109 +213,112 @@ export function InlineResourceContainer({
         onMuteComplete: handleMuteComplete,
       }}
     >
-      <tr>
+      <motion.tr
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
+      >
         <td colSpan={columnCount} className="p-0">
-          <AnimatePresence initial>
-            <motion.div
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: "auto", opacity: 1 }}
-              exit={{ height: 0, opacity: 0 }}
-              transition={{ duration: 0.2, ease: "easeOut" }}
-              className="overflow-hidden"
-            >
-              <div className="relative">
-                <div
-                  ref={combinedScrollRef}
-                  className="max-h-[440px] overflow-y-auto pl-6"
-                >
-                  {/* Resource rows or skeleton placeholder */}
-                  <table className="-mt-2.5 w-full border-separate border-spacing-y-4">
-                    <tbody>
-                      {isLoading && rows.length === 0 ? (
-                        Array.from({ length: skeletonRowCount }).map((_, i) => (
-                          <ResourceSkeletonRow
-                            key={i}
-                            isEmptyStateSized={filteredResourceCount === 0}
-                          />
-                        ))
-                      ) : rows.length > 0 ? (
-                        rows.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            data-state={row.getIsSelected() && "selected"}
-                            className="cursor-pointer"
-                            onClick={(e) => {
-                              // Don't open drawer if clicking interactive elements
-                              // (links, buttons, checkboxes, dropdown items)
-                              const target = e.target as HTMLElement;
-                              if (
-                                target.closest(
-                                  "a, button, input, [role=menuitem]",
-                                )
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            className="overflow-hidden"
+          >
+            <div className="relative">
+              <div
+                ref={combinedScrollRef}
+                className="max-h-[440px] overflow-y-auto pl-6"
+              >
+                {/* Resource rows or skeleton placeholder */}
+                <table className="-mt-2.5 w-full border-separate border-spacing-y-4">
+                  <tbody>
+                    {isLoading && rows.length === 0 ? (
+                      Array.from({ length: skeletonRowCount }).map((_, i) => (
+                        <ResourceSkeletonRow
+                          key={i}
+                          isEmptyStateSized={filteredResourceCount === 0}
+                        />
+                      ))
+                    ) : rows.length > 0 ? (
+                      rows.map((row) => (
+                        <TableRow
+                          key={row.id}
+                          data-state={row.getIsSelected() && "selected"}
+                          className="cursor-pointer"
+                          onClick={(e) => {
+                            // Don't open drawer if clicking interactive elements
+                            // (links, buttons, checkboxes, dropdown items)
+                            const target = e.target as HTMLElement;
+                            if (
+                              target.closest(
+                                "a, button, input, [role=menuitem]",
                               )
-                                return;
-                              drawer.openDrawer(row.index);
-                            }}
-                          >
-                            {row.getVisibleCells().map((cell) => (
-                              <TableCell key={cell.id}>
-                                {flexRender(
-                                  cell.column.columnDef.cell,
-                                  cell.getContext(),
-                                )}
-                              </TableCell>
-                            ))}
-                          </TableRow>
-                        ))
-                      ) : (
-                        <TableRow className="hover:bg-transparent">
-                          <TableCell
-                            colSpan={columns.length}
-                            className="h-24 text-center"
-                          >
-                            {getFindingGroupEmptyStateMessage(group, filters)}
-                          </TableCell>
+                            )
+                              return;
+                            drawer.openDrawer(row.index);
+                          }}
+                        >
+                          {row.getVisibleCells().map((cell) => (
+                            <TableCell key={cell.id}>
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext(),
+                              )}
+                            </TableCell>
+                          ))}
                         </TableRow>
-                      )}
-                    </tbody>
-                  </table>
+                      ))
+                    ) : (
+                      <TableRow className="hover:bg-transparent">
+                        <TableCell
+                          colSpan={columns.length}
+                          className="h-24 text-center"
+                        >
+                          {getFindingGroupEmptyStateMessage(group, filters)}
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </tbody>
+                </table>
 
-                  {/* Loading state for infinite scroll (subsequent pages only) */}
-                  {isLoading && rows.length > 0 && (
-                    <LoadingState label="Loading resources..." />
-                  )}
+                {/* Loading state for infinite scroll (subsequent pages only) */}
+                {isLoading && rows.length > 0 && (
+                  <LoadingState label="Loading resources..." />
+                )}
 
-                  {/* Sentinel for scroll hint detection */}
-                  <div
-                    ref={scrollHintSentinelRef}
-                    aria-hidden
-                    className="h-px shrink-0"
-                  />
+                {/* Sentinel for scroll hint detection */}
+                <div
+                  ref={scrollHintSentinelRef}
+                  aria-hidden
+                  className="h-px shrink-0"
+                />
 
-                  {/* Sentinel for infinite scroll */}
-                  <div ref={sentinelRef} className="h-1" />
-                </div>
+                {/* Sentinel for infinite scroll */}
+                <div ref={sentinelRef} className="h-1" />
+              </div>
 
-                {/* Gradients rendered after scroll container so they paint on top */}
-                <div className="from-bg-neutral-secondary pointer-events-none absolute top-0 right-0 left-6 z-20 h-6 bg-gradient-to-b to-transparent" />
-                <div className="from-bg-neutral-secondary pointer-events-none absolute right-0 bottom-0 left-6 z-20 h-6 bg-gradient-to-t to-transparent" />
+              {/* Gradients rendered after scroll container so they paint on top */}
+              <div className="from-bg-neutral-secondary pointer-events-none absolute top-0 right-0 left-6 z-20 h-6 bg-gradient-to-b to-transparent" />
+              <div className="from-bg-neutral-secondary pointer-events-none absolute right-0 bottom-0 left-6 z-20 h-6 bg-gradient-to-t to-transparent" />
 
-                {/* Scroll hint */}
-                {showScrollHint && (
-                  <div className="pointer-events-none absolute right-0 bottom-0 left-6 z-30">
-                    <div className="absolute inset-x-0 bottom-2 flex justify-center">
-                      <div className="bg-bg-neutral-tertiary text-text-neutral-secondary animate-bounce rounded-full px-3 py-1 text-xs shadow-md">
-                        <ChevronsDown className="inline size-3.5" /> Scroll for
-                        more
-                      </div>
+              {/* Scroll hint */}
+              {showScrollHint && (
+                <div className="pointer-events-none absolute right-0 bottom-0 left-6 z-30">
+                  <div className="absolute inset-x-0 bottom-2 flex justify-center">
+                    <div className="bg-bg-neutral-tertiary text-text-neutral-secondary animate-bounce rounded-full px-3 py-1 text-xs shadow-md">
+                      <ChevronsDown className="inline size-3.5" /> Scroll for
+                      more
                     </div>
                   </div>
-                )}
-              </div>
-            </motion.div>
-          </AnimatePresence>
+                </div>
+              )}
+            </div>
+          </motion.div>
         </td>
-      </tr>
+      </motion.tr>
 
       <ResourceDetailDrawer
         open={drawer.isOpen}

ui/components/shadcn/badge/badge.tsx

@@ -5,7 +5,7 @@ import { ComponentProps } from "react";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[background-color,border-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none overflow-hidden",
   {
     variants: {
       variant: {

ui/components/shadcn/button/button.test.tsx

@@ -32,4 +32,53 @@ describe("Button", () => {
       "text-xs",
     );
   });
+
+  it("applies the shared press and reduced-motion contract to button-like variants", () => {
+    // Given
+    render(<Button>Start scan</Button>);
+
+    // When
+    const button = screen.getByRole("button", { name: "Start scan" });
+
+    // Then
+    expect(button).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow,transform,scale]",
+      "duration-150",
+      "ease-out",
+      "active:scale-[0.98]",
+      "motion-reduce:active:scale-100",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+    expect(button).not.toHaveClass("transition-all");
+  });
+
+  it("keeps link buttons from scaling on press", () => {
+    // Given
+    render(<Button variant="link">Open details</Button>);
+
+    // When
+    const button = screen.getByRole("button", { name: "Open details" });
+
+    // Then
+    expect(button).toHaveClass("active:scale-100");
+    expect(button).not.toHaveClass("active:scale-[0.98]");
+  });
+
+  it("keeps menu buttons on the shared targeted transition recipe", () => {
+    // Given
+    render(<Button variant="menu">Open menu</Button>);
+
+    // When
+    const button = screen.getByRole("button", { name: "Open menu" });
+
+    // Then
+    expect(button).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow,transform,scale]",
+      "duration-200",
+      "active:scale-[0.98]",
+      "motion-reduce:active:scale-100",
+    );
+    expect(button).not.toHaveClass("transition-all");
+  });
 });

ui/components/shadcn/button/button.tsx

@@ -5,7 +5,7 @@ import type { ComponentProps } from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[8px] text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-button-disabled disabled:text-text-neutral-tertiary outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[8px] text-sm font-medium transition-[background-color,border-color,color,box-shadow,transform,scale] duration-150 ease-out active:scale-[0.98] disabled:pointer-events-none disabled:bg-button-disabled disabled:text-text-neutral-tertiary motion-reduce:active:scale-100 motion-reduce:transform-none motion-reduce:transition-none outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -21,13 +21,13 @@ const buttonVariants = cva(
           "border border-border-neutral-secondary bg-bg-neutral-secondary hover:bg-bg-neutral-tertiary active:bg-border-neutral-tertiary text-text-neutral-primary focus-visible:ring-border-neutral-tertiary/50",
         ghost:
           "border border-transparent text-text-neutral-primary hover:bg-bg-neutral-tertiary active:bg-border-neutral-secondary focus-visible:ring-border-neutral-secondary/50",
-        link: "text-button-tertiary underline-offset-4 hover:text-button-tertiary-hover disabled:bg-transparent",
+        link: "text-button-tertiary underline-offset-4 hover:text-button-tertiary-hover active:scale-100 disabled:bg-transparent",
         // Menu variant like secondary but more padding and the back is almost transparent
-        menu: "backdrop-blur-xl bg-white/60 dark:bg-white/5 border border-white/80 dark:border-white/10 text-text-neutral-primary dark:text-white shadow-lg hover:bg-white/70 dark:hover:bg-white/10 hover:border-white/90 dark:hover:border-white/30 active:bg-white/80 dark:active:bg-white/15 active:scale-[0.98] focus-visible:ring-button-primary/50 transition-all duration-200",
+        menu: "backdrop-blur-xl bg-white/60 dark:bg-white/5 border border-white/80 dark:border-white/10 text-text-neutral-primary dark:text-white shadow-lg hover:bg-white/70 dark:hover:bg-white/10 hover:border-white/90 dark:hover:border-white/30 active:bg-white/80 dark:active:bg-white/15 focus-visible:ring-button-primary/50 duration-200",
         "menu-active":
-          "backdrop-blur-xl bg-white/50 dark:bg-white/5 border border-black/[0.08] dark:border-white/10 text-text-neutral-primary dark:text-white shadow-sm hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/[0.12] dark:hover:border-white/30 active:bg-white/70 dark:active:bg-white/15 active:scale-[0.98] focus-visible:ring-button-primary/50 transition-all duration-200",
+          "backdrop-blur-xl bg-white/50 dark:bg-white/5 border border-black/[0.08] dark:border-white/10 text-text-neutral-primary dark:text-white shadow-sm hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/[0.12] dark:hover:border-white/30 active:bg-white/70 dark:active:bg-white/15 focus-visible:ring-button-primary/50 duration-200",
         "menu-inactive":
-          "text-text-neutral-primary border border-transparent hover:backdrop-blur-xl hover:bg-white/40 dark:hover:bg-white/5 hover:border-black/[0.08] dark:hover:border-white/10 hover:shadow-sm active:bg-white/50 dark:active:bg-white/15 active:scale-[0.98] focus-visible:ring-border-neutral-secondary/50 transition-all duration-200",
+          "text-text-neutral-primary border border-transparent hover:backdrop-blur-xl hover:bg-white/40 dark:hover:bg-white/5 hover:border-black/[0.08] dark:hover:border-white/10 hover:shadow-sm active:bg-white/50 dark:active:bg-white/15 focus-visible:ring-border-neutral-secondary/50 duration-200",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",

ui/components/shadcn/checkbox/checkbox.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+
+import { Checkbox } from "./checkbox";
+
+function ControlledCheckbox() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      aria-label="Select provider"
+      checked={checked}
+      onCheckedChange={(value) => setChecked(value === true)}
+    />
+  );
+}
+
+describe("Checkbox", () => {
+  it("animates the background and check mark as one state change", async () => {
+    // Given - A controlled checkbox in the unchecked state
+    const user = userEvent.setup();
+    render(<ControlledCheckbox />);
+
+    const checkbox = screen.getByRole("checkbox", { name: /select provider/i });
+    const indicator = checkbox.querySelector(
+      "[data-slot='checkbox-indicator']",
+    );
+
+    // When - The user checks the checkbox
+    await user.click(checkbox);
+
+    // Then - The background and check mark transitions use the same timing
+    expect(checkbox).toHaveClass(
+      "transition-colors",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(indicator).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-200",
+      "ease-out",
+      "data-[state=checked]:scale-100",
+      "data-[state=checked]:opacity-100",
+      "data-[state=unchecked]:scale-75",
+      "data-[state=unchecked]:opacity-0",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/checkbox/checkbox.tsx

@@ -41,7 +41,7 @@ function Checkbox({
       checked={indeterminate ? "indeterminate" : checked}
       className={cn(
         // Base styles
-        "peer shrink-0 rounded-sm border transition-all outline-none",
+        "peer shrink-0 rounded-sm border transition-colors duration-200 ease-out outline-none motion-reduce:transition-none",
         sizeStyles.root,
         // Default state
         "bg-bg-input-primary border-border-input-primary shadow-[0_1px_2px_0_rgba(0,0,0,0.1)]",
@@ -58,8 +58,9 @@ function Checkbox({
       {...props}
     >
       <CheckboxPrimitive.Indicator
+        forceMount
         data-slot="checkbox-indicator"
-        className="grid place-content-center text-current transition-none"
+        className="grid place-content-center text-current transition-[opacity,transform] duration-200 ease-out data-[state=checked]:scale-100 data-[state=checked]:opacity-100 data-[state=indeterminate]:scale-100 data-[state=indeterminate]:opacity-100 data-[state=unchecked]:scale-75 data-[state=unchecked]:opacity-0 motion-reduce:scale-100 motion-reduce:transition-none"
       >
         {indeterminate || checked === "indeterminate" ? (
           <MinusIcon className={sizeStyles.icon} />

ui/components/shadcn/collapsible.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+
+describe("Collapsible", () => {
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    render(
+      <Collapsible open>
+        <CollapsibleTrigger>Toggle details</CollapsibleTrigger>
+        <CollapsibleContent>Expandable content</CollapsibleContent>
+      </Collapsible>,
+    );
+
+    // When
+    const content = screen.getByText("Expandable content");
+
+    // Then
+    expect(content).toHaveAttribute("data-slot", "collapsible-content");
+    expect(content).toHaveClass(
+      "overflow-hidden",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:slide-in-from-top-1",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:slide-out-to-top-1",
+      "data-[state=closed]:duration-150",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy motion for reduced-motion users", () => {
+    // Given
+    render(
+      <Collapsible open>
+        <CollapsibleTrigger>Toggle details</CollapsibleTrigger>
+        <CollapsibleContent>Expandable content</CollapsibleContent>
+      </Collapsible>,
+    );
+
+    // When
+    const content = screen.getByText("Expandable content");
+
+    // Then
+    expect(content).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/collapsible.tsx

@@ -2,6 +2,8 @@
 
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
+import { cn } from "@/lib/utils";
+
 function Collapsible({
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
@@ -20,11 +22,20 @@ function CollapsibleTrigger({
 }
 
 function CollapsibleContent({
+  className,
   ...props
 }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
   return (
     <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"
+      className={cn(
+        "overflow-hidden duration-200 ease-out",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-1",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-1",
+        "data-[state=closed]:duration-150 data-[state=closed]:ease-in",
+        "motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
+        className,
+      )}
       {...props}
     />
   );

ui/components/shadcn/combobox/combobox.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { Combobox } from "./combobox";
+
+const options = [
+  { value: "aws", label: "AWS" },
+  { value: "azure", label: "Azure" },
+  { value: "gcp", label: "GCP" },
+];
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  } as unknown as typeof ResizeObserver;
+
+  Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+
+  Object.defineProperty(HTMLElement.prototype, "hasPointerCapture", {
+    configurable: true,
+    value: vi.fn(() => false),
+  });
+  Object.defineProperty(HTMLElement.prototype, "releasePointerCapture", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+describe("Combobox", () => {
+  it("renders a selectable combobox trigger", () => {
+    // Given
+    render(<Combobox options={options} placeholder="Select provider" />);
+
+    // When
+    const trigger = screen.getByRole("combobox", { name: /select provider/i });
+
+    // Then
+    expect(trigger).toBeVisible();
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("uses visible trigger and chevron open-state motion", () => {
+    // Given
+    render(<Combobox options={options} placeholder="Select provider" />);
+
+    // When
+    const trigger = screen.getByRole("combobox", { name: /select provider/i });
+    const icon = trigger.querySelector("svg");
+
+    // Then
+    expect(trigger).toHaveClass(
+      "group",
+      "transition-[background-color,border-color,color,box-shadow]",
+    );
+    expect(icon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "group-aria-expanded:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("opens with the shared Popover content motion contract", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(<Combobox options={options} placeholder="Select provider" />);
+
+    // When
+    await user.click(
+      screen.getByRole("combobox", { name: /select provider/i }),
+    );
+    const content = document.querySelector("[data-slot='popover-content']");
+
+    // Then
+    expect(content).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/combobox/combobox.tsx

@@ -113,8 +113,10 @@ export function Combobox({
           variant="outline"
           role="combobox"
           aria-expanded={open}
+          aria-label={selectedOption ? selectedOption.label : placeholder}
           disabled={disabled}
           className={cn(
+            "group transition-[background-color,border-color,color,box-shadow]",
             comboboxTriggerVariants({ variant }),
             triggerClassName,
             className,
@@ -123,7 +125,7 @@ export function Combobox({
           <span className="truncate">
             {selectedOption ? selectedOption.label : placeholder}
           </span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50 transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none" />
         </Button>
       </PopoverTrigger>
       <PopoverContent

ui/components/shadcn/dialog.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+function renderOpenDialog() {
+  return render(
+    <Dialog open>
+      <DialogTrigger>Open modal</DialogTrigger>
+      <DialogContent>
+        <DialogTitle>Launch scan</DialogTitle>
+        <DialogDescription>Configure scan settings</DialogDescription>
+      </DialogContent>
+    </Dialog>,
+  );
+}
+
+describe("Dialog", () => {
+  it("renders controlled content through the Radix Dialog API", () => {
+    // Given
+    renderOpenDialog();
+
+    // When
+    const dialog = screen.getByRole("dialog", { name: "Launch scan" });
+
+    // Then
+    expect(dialog).toBeVisible();
+    expect(dialog).toHaveAttribute("data-slot", "dialog-content");
+    expect(screen.getByText("Configure scan settings")).toBeVisible();
+  });
+
+  it("uses an intentional overlay motion contract", () => {
+    // Given
+    renderOpenDialog();
+
+    // When
+    const overlay = document.querySelector("[data-slot='dialog-overlay']");
+
+    // Then
+    expect(overlay).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("uses an intentional content motion contract", () => {
+    // Given
+    renderOpenDialog();
+
+    // When
+    const dialog = screen.getByRole("dialog", { name: "Launch scan" });
+
+    // Then
+    expect(dialog).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/dialog.tsx

@@ -37,7 +37,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:animate-none motion-reduce:transition-none",
         className,
       )}
       {...props}
@@ -59,7 +59,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none sm:max-w-lg",
           className,
         )}
         onClick={(e) => e.stopPropagation()}

ui/components/shadcn/drawer.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+
+function renderOpenDrawer() {
+  return render(
+    <Drawer open>
+      <DrawerTrigger>Open drawer</DrawerTrigger>
+      <DrawerContent>
+        <DrawerTitle>Resource details</DrawerTitle>
+        <DrawerDescription>Review resource metadata</DrawerDescription>
+      </DrawerContent>
+    </Drawer>,
+  );
+}
+
+describe("Drawer", () => {
+  it("renders controlled content through the Vaul Drawer API", () => {
+    // Given
+    renderOpenDrawer();
+
+    // When
+    const drawer = screen.getByRole("dialog", { name: "Resource details" });
+
+    // Then
+    expect(drawer).toBeVisible();
+    expect(drawer).toHaveAttribute("data-slot", "drawer-content");
+    expect(screen.getByText("Review resource metadata")).toBeVisible();
+  });
+
+  it("uses an intentional overlay motion contract", () => {
+    // Given
+    renderOpenDrawer();
+
+    // When
+    const overlay = document.querySelector("[data-slot='drawer-overlay']");
+
+    // Then
+    expect(overlay).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("uses direction-aware drawer content motion", () => {
+    // Given
+    renderOpenDrawer();
+
+    // When
+    const drawer = screen.getByRole("dialog", { name: "Resource details" });
+
+    // Then
+    expect(drawer).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "data-[vaul-drawer-direction=bottom]:slide-in-from-bottom-full",
+      "data-[vaul-drawer-direction=bottom]:data-[state=closed]:slide-out-to-bottom-full",
+      "data-[vaul-drawer-direction=top]:slide-in-from-top-full",
+      "data-[vaul-drawer-direction=top]:data-[state=closed]:slide-out-to-top-full",
+      "data-[vaul-drawer-direction=right]:slide-in-from-right-full",
+      "data-[vaul-drawer-direction=right]:data-[state=closed]:slide-out-to-right-full",
+      "data-[vaul-drawer-direction=left]:slide-in-from-left-full",
+      "data-[vaul-drawer-direction=left]:data-[state=closed]:slide-out-to-left-full",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/drawer.tsx

@@ -35,7 +35,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:animate-none motion-reduce:transition-none",
         className,
       )}
       {...props}
@@ -54,11 +54,11 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:border-l-border-neutral-secondary data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r",
+          "group/drawer-content bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex h-auto flex-col duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
+          "data-[vaul-drawer-direction=top]:slide-in-from-top-full data-[vaul-drawer-direction=top]:data-[state=closed]:slide-out-to-top-full data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:slide-in-from-bottom-full data-[vaul-drawer-direction=bottom]:data-[state=closed]:slide-out-to-bottom-full data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:border-l-border-neutral-secondary data-[vaul-drawer-direction=right]:slide-in-from-right-full data-[vaul-drawer-direction=right]:data-[state=closed]:slide-out-to-right-full data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:border-l",
+          "data-[vaul-drawer-direction=left]:slide-in-from-left-full data-[vaul-drawer-direction=left]:data-[state=closed]:slide-out-to-left-full data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:border-r",
           className,
         )}
         {...props}

ui/components/shadcn/dropdown/dropdown.test.tsx

@@ -0,0 +1,114 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown";
+
+function renderActionsDropdown() {
+  return render(
+    <DropdownMenu open>
+      <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>,
+  );
+}
+
+describe("DropdownMenu", () => {
+  it("renders open menu content through the Radix DropdownMenu API", () => {
+    // Given
+    renderActionsDropdown();
+
+    // When
+    const menu = screen.getByRole("menu");
+
+    // Then
+    expect(menu).toBeVisible();
+    expect(menu).toHaveAttribute("data-slot", "dropdown-menu-content");
+    expect(screen.getByRole("menuitem", { name: "Edit" })).toBeVisible();
+    expect(screen.getByRole("menuitem", { name: "Delete" })).toBeVisible();
+  });
+
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    renderActionsDropdown();
+
+    // When
+    const menu = screen.getByRole("menu");
+
+    // Then
+    expect(menu).toHaveClass(
+      "origin-(--radix-dropdown-menu-content-transform-origin)",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy menu motion for reduced-motion users", () => {
+    // Given
+    renderActionsDropdown();
+
+    // When
+    const menu = screen.getByRole("menu");
+
+    // Then
+    expect(menu).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("applies the same motion contract to submenu content", () => {
+    // Given
+    render(
+      <DropdownMenu open>
+        <DropdownMenuTrigger>Open actions</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuSub open>
+            <DropdownMenuSubTrigger>More actions</DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>Archive</DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+
+    // When
+    const submenuContent = screen
+      .getByRole("menuitem", { name: "Archive" })
+      .closest("[data-slot='dropdown-menu-sub-content']");
+
+    // Then
+    expect(submenuContent).toHaveClass(
+      "origin-(--radix-dropdown-menu-content-transform-origin)",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/dropdown/dropdown.tsx

@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
           className,
         )}
         {...props}
@@ -227,7 +227,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
         className,
       )}
       {...props}

ui/components/shadcn/file-upload/file-upload-dropzone.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { FileUploadDropzone } from "./file-upload-dropzone";
+
+describe("FileUploadDropzone", () => {
+  it("animates drag feedback and selected file content", async () => {
+    // Given - A dropzone without a selected file
+    const user = userEvent.setup();
+    const onFileSelect = vi.fn();
+    render(<FileUploadDropzone onFileSelect={onFileSelect} />);
+
+    // When - The dropzone renders
+    const dropzone = screen.getByText(/drag and drop/i).closest("label");
+    const input = screen.getByLabelText(/drag and drop/i, {
+      selector: "input",
+    });
+
+    // Then - Drag feedback and internal content have visible motion contracts
+    expect(dropzone).toHaveClass(
+      "transition-[background-color,border-color,box-shadow,transform]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(dropzone?.querySelector("svg")).toHaveClass(
+      "transition-transform",
+      "duration-150",
+      "ease-out",
+      "group-hover:-translate-y-0.5",
+      "motion-reduce:transform-none",
+    );
+
+    await user.upload(
+      input,
+      new File(["prowler"], "evidence.json", { type: "application/json" }),
+    );
+
+    expect(onFileSelect).toHaveBeenCalledWith(expect.any(File));
+  });
+});

ui/components/shadcn/file-upload/file-upload-dropzone.tsx

@@ -24,7 +24,9 @@ export function FileUploadDropzone({
   title = "Drag and drop your file here",
   emptyDescription = "or",
   selectText = "Select File",
-  icon = <FileUp className="text-text-neutral-secondary size-6" />,
+  icon = (
+    <FileUp className="text-text-neutral-secondary size-6 transition-transform duration-150 ease-out group-hover:-translate-y-0.5 motion-reduce:transform-none motion-reduce:transition-none" />
+  ),
 }: FileUploadDropzoneProps) {
   const inputId = useId();
   const [isDragging, setIsDragging] = useState(false);
@@ -45,23 +47,23 @@ export function FileUploadDropzone({
       onDragLeave={() => setIsDragging(false)}
       onDrop={handleDrop}
       className={cn(
-        "border-border-neutral-tertiary bg-bg-neutral-primary hover:bg-bg-neutral-tertiary flex min-h-[132px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-8 text-center transition-colors",
+        "border-border-neutral-tertiary bg-bg-neutral-primary hover:bg-bg-neutral-tertiary group flex min-h-[132px] cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed px-4 py-8 text-center transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none",
         isDragging &&
-          "border-border-input-primary-press bg-bg-neutral-tertiary",
+          "border-border-input-primary-press bg-bg-neutral-tertiary scale-[1.01] shadow-sm motion-reduce:scale-100",
         className,
       )}
     >
       {icon}
-      <span className="text-text-neutral-primary text-sm font-medium">
+      <span className="text-text-neutral-primary text-sm font-medium transition-colors duration-150 ease-out motion-reduce:transition-none">
         {file ? file.name : title}
       </span>
-      <span className="text-text-neutral-secondary text-xs">
+      <span className="text-text-neutral-secondary text-xs transition-colors duration-150 ease-out motion-reduce:transition-none">
         {file
           ? `${Math.ceil(file.size / 1024).toLocaleString()} KB`
           : emptyDescription}
       </span>
       {!file && (
-        <span className="text-button-tertiary text-sm font-medium">
+        <span className="text-button-tertiary text-sm font-medium transition-colors duration-150 ease-out motion-reduce:transition-none">
           {selectText}
         </span>
       )}

ui/components/shadcn/index.ts

@@ -20,6 +20,8 @@ export * from "./select/multiselect";
 export * from "./select/select";
 export * from "./separator/separator";
 export * from "./skeleton/skeleton";
+export * from "./skeleton/skeleton-boundary";
+export * from "./skeleton/skeleton-content-reveal";
 export * from "./tabs/generic-tabs";
 export * from "./tabs/tabs";
 export * from "./textarea/textarea";

ui/components/shadcn/input/input.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Input } from "./input";
+
+describe("Input", () => {
+  it("uses visible hover and focus microinteraction timing", () => {
+    // Given - A standard text input
+    render(<Input aria-label="Alias" />);
+
+    // When - The input renders
+    const input = screen.getByRole("textbox", { name: /alias/i });
+
+    // Then - The focus/hover state changes are intentionally timed
+    expect(input).toHaveClass(
+      "transition-[background-color,border-color,box-shadow,color]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/input/input.tsx

@@ -6,7 +6,7 @@ import { ComponentProps, forwardRef } from "react";
 import { cn } from "@/lib/utils";
 
 const inputVariants = cva(
-  "flex w-full rounded-lg border text-sm transition-all outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full rounded-lg border text-sm transition-[background-color,border-color,box-shadow,color] duration-150 ease-out outline-none motion-reduce:transition-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

ui/components/shadcn/popover.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+describe("Popover", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders controlled content through the Radix Popover API", () => {
+    // Given
+    const portalContainer = document.createElement("div");
+    document.body.appendChild(portalContainer);
+
+    // When
+    render(
+      <Popover open>
+        <PopoverTrigger>Open filters</PopoverTrigger>
+        <PopoverContent container={portalContainer}>
+          Filter content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // Then
+    expect(screen.getByText("Filter content")).toBeVisible();
+    expect(screen.getByText("Filter content")).toHaveAttribute(
+      "data-slot",
+      "popover-content",
+    );
+  });
+
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    const portalContainer = document.createElement("div");
+    document.body.appendChild(portalContainer);
+
+    // When
+    render(
+      <Popover open>
+        <PopoverTrigger>Open filters</PopoverTrigger>
+        <PopoverContent container={portalContainer}>
+          Filter content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // Then
+    expect(screen.getByText("Filter content")).toHaveClass(
+      "origin-(--radix-popover-content-transform-origin)",
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy motion for reduced-motion users", () => {
+    // Given
+    const portalContainer = document.createElement("div");
+    document.body.appendChild(portalContainer);
+
+    // When
+    render(
+      <Popover open>
+        <PopoverTrigger>Open filters</PopoverTrigger>
+        <PopoverContent container={portalContainer}>
+          Filter content
+        </PopoverContent>
+      </Popover>,
+    );
+
+    // Then
+    expect(screen.getByText("Filter content")).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/popover.tsx

@@ -32,7 +32,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 pointer-events-auto z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 pointer-events-auto z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
           className,
         )}
         {...props}

ui/components/shadcn/progress.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Progress } from "./progress";
+
+describe("Progress", () => {
+  it("animates progress value changes with a transform-only transition", () => {
+    // Given
+    render(<Progress aria-label="Scan progress" value={40} />);
+
+    // When
+    const root = screen.getByRole("progressbar", { name: /scan progress/i });
+    const indicator = root.querySelector("[data-slot='progress-indicator']");
+
+    // Then
+    expect(root).toHaveClass(
+      "transition-colors",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(indicator).toHaveClass(
+      "transition-transform",
+      "duration-300",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(indicator).toHaveStyle({ transform: "translateX(-60%)" });
+  });
+});

ui/components/shadcn/progress.tsx

@@ -22,7 +22,7 @@ function Progress({
       data-slot="progress"
       value={normalizedValue}
       className={cn(
-        "border-border-neutral-secondary bg-bg-neutral-secondary relative h-2 w-full overflow-hidden rounded-full border",
+        "border-border-neutral-secondary bg-bg-neutral-secondary relative h-2 w-full overflow-hidden rounded-full border transition-colors duration-200 ease-out motion-reduce:transition-none",
         className,
       )}
       {...props}
@@ -30,7 +30,7 @@ function Progress({
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
         className={cn(
-          "bg-button-primary h-full w-full flex-1 transition-all",
+          "bg-button-primary h-full w-full flex-1 transition-transform duration-300 ease-out motion-reduce:transition-none",
           indicatorClassName,
         )}
         style={{ transform: `translateX(-${100 - normalizedValue}%)` }}

ui/components/shadcn/radio-group/radio-group.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { RadioGroup, RadioGroupItem } from "./radio-group";
+
+describe("RadioGroup", () => {
+  it("animates item state and indicator entry", async () => {
+    // Given - A controlled radio group
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <RadioGroup value="aws" onValueChange={onValueChange}>
+        <RadioGroupItem value="aws" aria-label="AWS" />
+        <RadioGroupItem value="azure" aria-label="Azure" />
+      </RadioGroup>,
+    );
+
+    // When - The user selects another radio option
+    const azure = screen.getByRole("radio", { name: /azure/i });
+    await user.click(azure);
+    const indicator = azure.querySelector(
+      "[data-slot='radio-group-indicator']",
+    );
+
+    // Then - The item and dot use synchronized visual feedback
+    expect(azure).toHaveClass(
+      "transition-[background-color,border-color,box-shadow]",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(indicator).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-200",
+      "ease-out",
+      "data-[state=checked]:scale-100",
+      "data-[state=checked]:opacity-100",
+      "data-[state=unchecked]:scale-75",
+      "data-[state=unchecked]:opacity-0",
+      "motion-reduce:transition-none",
+    );
+    expect(onValueChange).toHaveBeenCalledWith("azure");
+  });
+});

ui/components/shadcn/radio-group/radio-group.tsx

@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-border-input-primary aspect-square size-4 shrink-0 rounded-full border shadow-[0_1px_2px_0_rgba(0,0,0,0.1)] transition-all outline-none",
+        "border-border-input-primary aspect-square size-4 shrink-0 rounded-full border shadow-[0_1px_2px_0_rgba(0,0,0,0.1)] transition-[background-color,border-color,box-shadow] duration-200 ease-out outline-none motion-reduce:transition-none",
         "focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press/50 focus-visible:ring-2",
         "data-[state=checked]:border-button-primary",
         "disabled:cursor-not-allowed disabled:opacity-40",
@@ -34,8 +34,9 @@ function RadioGroupItem({
       {...props}
     >
       <RadioGroupPrimitive.Indicator
+        forceMount
         data-slot="radio-group-indicator"
-        className="grid place-content-center"
+        className="grid place-content-center transition-[opacity,transform] duration-200 ease-out data-[state=checked]:scale-100 data-[state=checked]:opacity-100 data-[state=unchecked]:scale-75 data-[state=unchecked]:opacity-0 motion-reduce:scale-100 motion-reduce:transition-none"
       >
         <span className="bg-button-primary size-2 rounded-full" />
       </RadioGroupPrimitive.Indicator>

ui/components/shadcn/search-input/search-input.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { SearchInput } from "./search-input";
+
+describe("SearchInput", () => {
+  it("animates input focus, icon color, and clear button entry", () => {
+    // Given - A search input with a clear action
+    render(
+      <SearchInput
+        aria-label="Search findings"
+        value="cloudflare"
+        readOnly
+        onClear={vi.fn()}
+      />,
+    );
+
+    // When - The search field has a value
+    const input = screen.getByRole("textbox", { name: /search findings/i });
+    const clearButton = screen.getByRole("button", { name: /clear search/i });
+    const searchIcon = input.parentElement?.querySelector("svg");
+
+    // Then - Search-specific affordances have visible motion
+    expect(input).toHaveClass(
+      "transition-[background-color,border-color,box-shadow,color]",
+      "duration-250",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(searchIcon).toHaveClass(
+      "transition-colors",
+      "duration-250",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(clearButton).toHaveAttribute("data-slot", "search-input-clear");
+    expect(clearButton).toHaveClass(
+      "transition-colors",
+      "duration-250",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/search-input/search-input.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cva, type VariantProps } from "class-variance-authority";
+import { AnimatePresence, motion } from "framer-motion";
 import { SearchIcon, XCircle } from "lucide-react";
 import { ComponentProps, forwardRef } from "react";
 
@@ -20,7 +21,7 @@ const searchInputWrapperVariants = cva("relative flex items-center w-full", {
 });
 
 const searchInputVariants = cva(
-  "flex w-full rounded-lg border text-sm transition-all outline-none placeholder:text-text-neutral-tertiary disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full rounded-lg border text-sm transition-[background-color,border-color,box-shadow,color] duration-250 ease-out outline-none motion-reduce:transition-none placeholder:text-text-neutral-tertiary disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -89,7 +90,7 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
         <SearchIcon
           size={iconSize}
           className={cn(
-            "text-text-neutral-tertiary pointer-events-none absolute",
+            "text-text-neutral-tertiary pointer-events-none absolute transition-colors duration-250 ease-out motion-reduce:transition-none",
             iconPosition,
           )}
         />
@@ -102,19 +103,27 @@ const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
           className={cn(searchInputVariants({ variant, size, className }))}
           {...props}
         />
-        {hasValue && onClear && (
-          <button
-            type="button"
-            aria-label="Clear search"
-            onClick={onClear}
-            className={cn(
-              "text-text-neutral-tertiary hover:text-text-neutral-primary absolute transition-colors focus:outline-none",
-              clearButtonPosition,
-            )}
-          >
-            <XCircle size={iconSize} />
-          </button>
-        )}
+        <AnimatePresence initial={false}>
+          {hasValue && onClear && (
+            <motion.button
+              key="clear-search"
+              type="button"
+              data-slot="search-input-clear"
+              aria-label="Clear search"
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              transition={{ duration: 0.25, ease: "easeOut" }}
+              onClick={onClear}
+              className={cn(
+                "text-text-neutral-tertiary hover:text-text-neutral-primary absolute transition-colors duration-250 ease-out focus:outline-none motion-reduce:transition-none",
+                clearButtonPosition,
+              )}
+            >
+              <XCircle size={iconSize} />
+            </motion.button>
+          )}
+        </AnimatePresence>
       </div>
     );
   },

ui/components/shadcn/select/enhanced-multi-select.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { EnhancedMultiSelect } from "./enhanced-multi-select";
+
+const options = [
+  { value: "aws-prod", label: "Production AWS" },
+  { value: "azure-dev", label: "Development Azure" },
+];
+
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+  } as unknown as typeof ResizeObserver;
+
+  Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+describe("EnhancedMultiSelect", () => {
+  it("uses visible trigger and chevron open-state motion", () => {
+    render(
+      <EnhancedMultiSelect
+        options={options}
+        onValueChange={() => {}}
+        placeholder="Select providers"
+        aria-label="Select providers"
+      />,
+    );
+
+    const trigger = screen.getByRole("combobox", { name: /select providers/i });
+    const icon = trigger.querySelector("svg");
+
+    expect(trigger).toHaveClass(
+      "group",
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(icon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "group-aria-expanded:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates item selection feedback and checkbox visibility", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <EnhancedMultiSelect
+        options={options}
+        onValueChange={() => {}}
+        placeholder="Select providers"
+        aria-label="Select providers"
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("combobox", { name: /select providers/i }),
+    );
+
+    const option = screen.getByRole("option", { name: /production aws/i });
+    const checkbox = option.querySelector("[data-slot='checkbox']");
+    const checkboxIndicator = checkbox?.querySelector(
+      "[data-slot='checkbox-indicator']",
+    );
+
+    expect(option).toHaveClass(
+      "transition-colors",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(checkbox).toHaveClass(
+      "transition-colors",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(checkboxIndicator).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-200",
+      "ease-out",
+      "data-[state=checked]:scale-100",
+      "data-[state=checked]:opacity-100",
+      "data-[state=unchecked]:scale-75",
+      "data-[state=unchecked]:opacity-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates selected pills when values are added to the trigger", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+
+    render(
+      <EnhancedMultiSelect
+        options={options}
+        onValueChange={onValueChange}
+        placeholder="Select providers"
+        aria-label="Select providers"
+      />,
+    );
+
+    await user.click(
+      screen.getByRole("combobox", { name: /select providers/i }),
+    );
+    await user.click(screen.getByRole("option", { name: /production aws/i }));
+
+    const pill = within(
+      screen.getByRole("combobox", { name: /select providers/i }),
+    )
+      .getByText("Production AWS")
+      .closest("[data-slot='enhanced-multiselect-pill']");
+
+    expect(onValueChange).toHaveBeenCalledWith(["aws-prod"]);
+    expect(pill).toHaveClass(
+      "animate-in",
+      "fade-in-0",
+      "zoom-in-95",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/select/enhanced-multi-select.tsx

@@ -183,7 +183,7 @@ export function EnhancedMultiSelect({
           aria-controls={open ? listboxId : undefined}
           aria-label={ariaLabel}
           className={cn(
-            "border-border-input-primary bg-bg-input-primary text-text-neutral-primary data-[placeholder]:text-text-neutral-tertiary [&_svg:not([class*='text-'])]:text-text-neutral-tertiary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-input-primary active:bg-bg-input-primary focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex h-auto min-h-12 w-full items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-offset-1 [&_svg]:pointer-events-auto",
+            "group border-border-input-primary bg-bg-input-primary text-text-neutral-primary data-[placeholder]:text-text-neutral-tertiary [&_svg:not([class*='text-'])]:text-text-neutral-tertiary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-input-primary active:bg-bg-input-primary focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex h-auto min-h-12 w-full items-center justify-between gap-2 rounded-lg border px-3 py-2 text-sm shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-1 focus-visible:ring-offset-1 motion-reduce:transition-none [&_svg]:pointer-events-auto",
             disabled && "cursor-not-allowed opacity-50",
             className,
           )}
@@ -200,7 +200,8 @@ export function EnhancedMultiSelect({
                       <Badge
                         key={value}
                         variant="tag"
-                        className="m-1 cursor-default [&>svg]:pointer-events-auto"
+                        data-slot="enhanced-multiselect-pill"
+                        className="animate-in fade-in-0 zoom-in-95 m-1 cursor-default duration-150 ease-out motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none [&>svg]:pointer-events-auto"
                       >
                         <span className="cursor-default">{option.label}</span>
                         <span
@@ -224,7 +225,8 @@ export function EnhancedMultiSelect({
                 {selectedValues.length > maxCount && (
                   <Badge
                     variant="tag"
-                    className="m-1 cursor-default [&>svg]:pointer-events-auto"
+                    data-slot="enhanced-multiselect-pill"
+                    className="animate-in fade-in-0 zoom-in-95 m-1 cursor-default duration-150 ease-out motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none [&>svg]:pointer-events-auto"
                   >
                     {`+ ${selectedValues.length - maxCount} more`}
                     <span
@@ -271,7 +273,7 @@ export function EnhancedMultiSelect({
                   className="flex h-full min-h-6"
                 />
                 <ChevronDown
-                  className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer"
+                  className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none"
                   aria-hidden="true"
                 />
               </div>
@@ -281,7 +283,7 @@ export function EnhancedMultiSelect({
               <span className="text-text-neutral-tertiary mx-3 text-sm">
                 {placeholder}
               </span>
-              <ChevronDown className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer" />
+              <ChevronDown className="text-text-neutral-tertiary mx-2 h-4 cursor-pointer transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none" />
             </div>
           )}
         </Button>
@@ -339,7 +341,7 @@ export function EnhancedMultiSelect({
                     aria-selected={isSelected}
                     aria-disabled={option.disabled}
                     className={cn(
-                      "cursor-pointer",
+                      "cursor-pointer transition-colors duration-150 ease-out motion-reduce:transition-none",
                       option.disabled && "cursor-not-allowed opacity-50",
                     )}
                     disabled={option.disabled}

ui/components/shadcn/select/multiselect.test.tsx

@@ -83,6 +83,138 @@ describe("MultiSelect", () => {
     ).not.toBeInTheDocument();
   });
 
+  it("uses visible trigger and chevron open-state motion", () => {
+    render(
+      <MultiSelect values={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    const trigger = screen.getByRole("combobox");
+    const icon = trigger.querySelector("svg");
+
+    expect(trigger).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(icon).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "group-aria-expanded:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("uses visible content open and close motion", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MultiSelect values={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+
+    const content = document.querySelector("[data-slot='multiselect-content']");
+
+    expect(content).toHaveClass(
+      "duration-200",
+      "ease-out",
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates item selection feedback and check visibility", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MultiSelect defaultValues={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+
+    const option = screen.getByRole("option", { name: /production aws/i });
+    const checkIcon = option.querySelector("svg");
+
+    expect(option).toHaveClass(
+      "transition-colors",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(checkIcon).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("animates selected pills when values are added to the trigger", async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MultiSelect defaultValues={[]} onValuesChange={() => {}}>
+        <MultiSelectTrigger>
+          <MultiSelectValue placeholder="Select accounts" />
+        </MultiSelectTrigger>
+        <MultiSelectContent search={false}>
+          <MultiSelectItem value="aws-prod">Production AWS</MultiSelectItem>
+        </MultiSelectContent>
+      </MultiSelect>,
+    );
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(screen.getByRole("option", { name: /production aws/i }));
+
+    const pill = within(screen.getByRole("combobox"))
+      .getByText("Production AWS")
+      .closest("[data-selected-item]");
+
+    expect(pill).toHaveClass(
+      "animate-in",
+      "fade-in-0",
+      "zoom-in-95",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
   it("filters items without crashing when search is enabled", async () => {
     const user = userEvent.setup();
 

ui/components/shadcn/select/multiselect.tsx

@@ -153,15 +153,14 @@ export function MultiSelectTrigger({
         data-slot="multiselect-trigger"
         data-size={size}
         className={cn(
-          "border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=multiselect-value]:line-clamp-1 *:data-[slot=multiselect-value]:flex *:data-[slot=multiselect-value]:items-center *:data-[slot=multiselect-value]:gap-2 dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
+          "group border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=multiselect-value]:line-clamp-1 *:data-[slot=multiselect-value]:flex *:data-[slot=multiselect-value]:items-center *:data-[slot=multiselect-value]:gap-2 motion-reduce:transition-none dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
           className,
         )}
       >
         {children}
         <ChevronDown
           className={cn(
-            "text-bg-button-secondary size-6 shrink-0 opacity-70 transition-transform duration-200",
-            open && "rotate-180",
+            "text-bg-button-secondary size-6 shrink-0 opacity-70 transition-transform duration-200 ease-out group-aria-expanded:rotate-180 motion-reduce:rotate-0 motion-reduce:transition-none",
           )}
         />
       </Button>
@@ -267,7 +266,7 @@ export function MultiSelectValue({
           <Badge
             variant="tag"
             data-selected-item
-            className="group flex items-center gap-1.5 px-2 py-1 text-xs font-medium"
+            className="group animate-in fade-in-0 zoom-in-95 flex items-center gap-1.5 px-2 py-1 text-xs font-medium duration-150 ease-out motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none"
             key={value}
             onClick={
               clickToRemove
@@ -415,7 +414,7 @@ export function MultiSelectItem({
       keywords={keywords}
       data-slot="multiselect-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-bg-button-secondary text-bg-button-secondary my-1 flex w-full cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-lg px-4 py-3 text-sm outline-hidden select-none first:mt-0 last:mb-0 hover:bg-slate-200 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:hover:bg-slate-700/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-bg-button-secondary text-bg-button-secondary my-1 flex w-full cursor-pointer items-center justify-between gap-3 overflow-hidden rounded-lg px-4 py-3 text-sm outline-hidden transition-colors duration-150 ease-out select-none first:mt-0 last:mb-0 hover:bg-slate-200 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 motion-reduce:transition-none dark:hover:bg-slate-700/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5",
         isSelected && "bg-slate-100 dark:bg-slate-800/50",
         disabled && "cursor-not-allowed opacity-50 hover:bg-transparent",
         className,
@@ -431,8 +430,8 @@ export function MultiSelectItem({
       </span>
       <CheckIcon
         className={cn(
-          "text-bg-button-secondary size-5 shrink-0",
-          isSelected ? "opacity-100" : "opacity-0",
+          "text-bg-button-secondary size-5 shrink-0 transition-[opacity,transform] duration-150 ease-out motion-reduce:transition-none",
+          isSelected ? "scale-100 opacity-100" : "scale-95 opacity-0",
         )}
       />
     </CommandItem>

ui/components/shadcn/select/select.test.tsx

@@ -0,0 +1,222 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, "hasPointerCapture", {
+    configurable: true,
+    value: vi.fn(() => false),
+  });
+  Object.defineProperty(HTMLElement.prototype, "releasePointerCapture", {
+    configurable: true,
+    value: vi.fn(),
+  });
+  Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+function renderTypeSelect({ open = false }: { open?: boolean } = {}) {
+  return render(
+    <Select defaultValue="all" open={open} onValueChange={() => {}}>
+      <SelectTrigger aria-label="All Types">
+        <SelectValue placeholder="All Types" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Types</SelectItem>
+        <SelectItem value="manual">Manual</SelectItem>
+        <SelectItem value="scheduled">Scheduled</SelectItem>
+      </SelectContent>
+    </Select>,
+  );
+}
+
+describe("Select", () => {
+  it("renders an open dropdown with selectable options", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const listbox = screen.getByRole("listbox");
+
+    // Then
+    expect(
+      within(listbox).getByRole("option", { name: "All Types" }),
+    ).toBeVisible();
+    expect(
+      within(listbox).getByRole("option", { name: "Manual" }),
+    ).toBeVisible();
+    expect(
+      within(listbox).getByRole("option", { name: "Scheduled" }),
+    ).toBeVisible();
+  });
+
+  it("uses robust trigger transitions for hover, focus, and chevron state", () => {
+    // Given
+    renderTypeSelect();
+
+    // When
+    const trigger = screen.getByRole("combobox", { name: "All Types" });
+    const icon = trigger.querySelector("svg");
+
+    // Then
+    expect(trigger).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(icon).toHaveClass(
+      "transition-[rotate]",
+      "duration-200",
+      "ease-out",
+      "group-data-[state=open]:rotate-180",
+      "motion-reduce:rotate-0",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("preserves the Radix open data-state model", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const listbox = screen.getByRole("listbox");
+    const content = listbox.closest("[data-slot='select-content']");
+
+    // Then
+    expect(content).toHaveAttribute("data-state", "open");
+  });
+
+  it("keeps content mounted briefly with a closing state", async () => {
+    // Given
+    const { rerender } = renderTypeSelect({ open: true });
+
+    expect(screen.getByRole("listbox")).toBeVisible();
+
+    // When
+    rerender(
+      <Select defaultValue="all" open={false} onValueChange={() => {}}>
+        <SelectTrigger aria-label="All Types">
+          <SelectValue placeholder="All Types" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Types</SelectItem>
+          <SelectItem value="manual">Manual</SelectItem>
+          <SelectItem value="scheduled">Scheduled</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    // Then
+    const content = await waitFor(() =>
+      screen.getByRole("listbox").closest("[data-slot='select-content']"),
+    );
+    const trigger = document.querySelector("[data-slot='select-trigger']");
+
+    expect(content).toHaveAttribute("data-closing", "true");
+    expect(trigger).toHaveAttribute("data-closing", "true");
+
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  it("keeps uncontrolled content mounted briefly after selecting an option", async () => {
+    // Given
+    const user = userEvent.setup();
+    render(
+      <Select defaultOpen defaultValue="all" onValueChange={() => {}}>
+        <SelectTrigger aria-label="All Types">
+          <SelectValue placeholder="All Types" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Types</SelectItem>
+          <SelectItem value="manual">Manual</SelectItem>
+          <SelectItem value="scheduled">Scheduled</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    expect(screen.getByRole("listbox")).toBeVisible();
+
+    // When
+    await user.click(screen.getByRole("option", { name: "Manual" }));
+
+    // Then
+    const content = await waitFor(() =>
+      screen.getByRole("listbox").closest("[data-slot='select-content']"),
+    );
+    const trigger = document.querySelector("[data-slot='select-trigger']");
+
+    expect(content).toHaveAttribute("data-closing", "true");
+    expect(content).toHaveClass(
+      "animate-out",
+      "fade-out-0",
+      "zoom-out-95",
+      "pointer-events-none",
+      "duration-100",
+      "ease-in",
+    );
+    expect(content).not.toHaveClass(
+      "data-[state=open]:animate-in",
+      "data-[state=open]:fade-in-0",
+      "data-[state=open]:zoom-in-95",
+    );
+    expect(trigger).toHaveAttribute("data-closing", "true");
+  });
+
+  it("uses explicit open and close motion classes", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const content = screen
+      .getByRole("listbox")
+      .closest("[data-slot='select-content']");
+
+    // Then
+    expect(content).toHaveClass(
+      "data-[state=open]:animate-in",
+      "data-[state=closed]:animate-out",
+      "data-[state=open]:fade-in-0",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=open]:zoom-in-95",
+      "data-[state=closed]:zoom-out-95",
+      "duration-200",
+      "ease-out",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy dropdown motion for reduced motion", () => {
+    // Given
+    renderTypeSelect({ open: true });
+
+    // When
+    const content = screen
+      .getByRole("listbox")
+      .closest("[data-slot='select-content']");
+
+    // Then
+    expect(content).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/select/select.tsx

@@ -2,20 +2,90 @@
 
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { ComponentProps, type WheelEvent } from "react";
+import {
+  ComponentProps,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type WheelEvent,
+} from "react";
 
 import { cn } from "@/lib/utils";
 
+const SELECT_CLOSE_ANIMATION_MS = 100;
+
+interface SelectMotionContextValue {
+  isClosing: boolean;
+}
+
+const SelectMotionContext = createContext<SelectMotionContextValue>({
+  isClosing: false,
+});
+
 const stopWheelPropagation = (event: WheelEvent<HTMLElement>) => {
   event.stopPropagation();
 };
 
 function Select({
   allowDeselect = false,
+  open,
+  defaultOpen,
+  onOpenChange,
   ...props
 }: ComponentProps<typeof SelectPrimitive.Root> & {
   allowDeselect?: boolean;
 }) {
+  const isControlled = open !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    defaultOpen ?? false,
+  );
+  const requestedOpen = isControlled ? open : uncontrolledOpen;
+  const [renderedOpen, setRenderedOpen] = useState(requestedOpen);
+  const [isClosing, setIsClosing] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+
+    if (requestedOpen) {
+      setIsClosing(false);
+      setRenderedOpen(true);
+      return;
+    }
+
+    if (!renderedOpen) {
+      setIsClosing(false);
+      return;
+    }
+
+    setIsClosing(true);
+    closeTimerRef.current = setTimeout(() => {
+      setRenderedOpen(false);
+      setIsClosing(false);
+      closeTimerRef.current = null;
+    }, SELECT_CLOSE_ANIMATION_MS);
+
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [requestedOpen, renderedOpen]);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+
+    onOpenChange?.(nextOpen);
+  };
+
   const handleValueChange = (nextValue: string) => {
     if (allowDeselect && props.value === nextValue) {
       // Single-select with deselect
@@ -27,11 +97,15 @@ function Select({
   };
 
   return (
-    <SelectPrimitive.Root
-      data-slot="select"
-      {...props}
-      onValueChange={handleValueChange}
-    />
+    <SelectMotionContext.Provider value={{ isClosing }}>
+      <SelectPrimitive.Root
+        data-slot="select"
+        {...props}
+        open={renderedOpen}
+        onOpenChange={handleOpenChange}
+        onValueChange={handleValueChange}
+      />
+    </SelectMotionContext.Provider>
   );
 }
 
@@ -57,12 +131,15 @@ function SelectTrigger({
   size?: "sm" | "default";
   iconSize?: "sm" | "default";
 }) {
+  const { isClosing } = useContext(SelectMotionContext);
+
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
+      data-closing={isClosing ? "true" : undefined}
       className={cn(
-        "group border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-neutral-tertiary active:bg-border-neutral-tertiary dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 has-[>svg]:px-3 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
+        "group border-border-input-primary bg-bg-input-primary text-bg-button-secondary data-[placeholder]:text-bg-button-secondary [&_svg:not([class*='text-'])]:text-bg-button-secondary aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-bg-neutral-tertiary active:bg-border-neutral-tertiary dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-border-input-primary-press focus-visible:ring-border-input-primary-press flex w-full items-center justify-between gap-2 overflow-hidden rounded-lg border px-4 py-3 text-sm whitespace-nowrap shadow-xs transition-[background-color,border-color,color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-1 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 has-[>svg]:px-3 data-[size=default]:h-[52px] data-[size=sm]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 motion-reduce:transition-none dark:focus-visible:ring-slate-400 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6",
         className,
       )}
       {...props}
@@ -71,7 +148,8 @@ function SelectTrigger({
       <SelectPrimitive.Icon asChild>
         <ChevronDownIcon
           className={cn(
-            "text-bg-button-secondary shrink-0 opacity-70 transition-transform duration-200 group-data-[state=open]:rotate-180",
+            "text-bg-button-secondary shrink-0 opacity-70 transition-[rotate] duration-200 ease-out motion-reduce:rotate-0 motion-reduce:transition-none",
+            isClosing ? "rotate-0" : "group-data-[state=open]:rotate-180",
             iconSize === "sm" ? "size-4" : "size-6",
           )}
           aria-hidden="true"
@@ -92,6 +170,7 @@ function SelectContent({
 }: ComponentProps<typeof SelectPrimitive.Content> & {
   width?: "default" | "wide";
 }) {
+  const { isClosing } = useContext(SelectMotionContext);
   const widthClasses =
     width === "wide"
       ? "w-[min(max(var(--radix-select-trigger-width),24rem),calc(100vw-2rem))] max-w-[32rem]"
@@ -101,8 +180,12 @@ function SelectContent({
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         data-slot="select-content"
+        data-closing={isClosing ? "true" : undefined}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border-input-primary bg-bg-input-primary relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-lg border",
+          "bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-border-input-primary bg-bg-input-primary relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-hidden rounded-lg border duration-200 ease-out data-[state=closed]:duration-100 data-[state=closed]:ease-in motion-reduce:transform-none motion-reduce:animate-none motion-reduce:transition-none",
+          isClosing
+            ? "animate-out fade-out-0 zoom-out-95 pointer-events-none duration-100 ease-in"
+            : "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           widthClasses,

ui/components/shadcn/skeleton/skeleton-boundary.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Skeleton } from "./skeleton";
+import { SkeletonBoundary } from "./skeleton-boundary";
+
+describe("SkeletonBoundary", () => {
+  it("wraps resolved content with the shared skeleton reveal", () => {
+    // Given
+    render(
+      <SkeletonBoundary fallback={<Skeleton aria-label="Loading content" />}>
+        <section aria-label="Resolved content">Ready</section>
+      </SkeletonBoundary>,
+    );
+
+    // When
+    const reveal = screen.getByTestId("skeleton-content-reveal");
+
+    // Then
+    expect(screen.getByLabelText("Resolved content")).toBeInTheDocument();
+    expect(reveal).toHaveAttribute("data-motion", "skeleton-content-handoff");
+  });
+
+  it("forwards className to the reveal wrapper", () => {
+    // Given
+    render(
+      <SkeletonBoundary
+        fallback={<Skeleton aria-label="Loading content" />}
+        className="custom-boundary"
+      >
+        Ready
+      </SkeletonBoundary>,
+    );
+
+    // When
+    const reveal = screen.getByTestId("skeleton-content-reveal");
+
+    // Then
+    expect(reveal).toHaveClass("custom-boundary");
+  });
+});

ui/components/shadcn/skeleton/skeleton-boundary.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, Suspense } from "react";
+
+import { SkeletonContentReveal } from "./skeleton-content-reveal";
+
+interface SkeletonBoundaryProps {
+  children: ReactNode;
+  fallback: ReactNode;
+  className?: string;
+}
+
+function SkeletonBoundary({
+  children,
+  fallback,
+  className,
+}: SkeletonBoundaryProps) {
+  return (
+    <Suspense fallback={fallback}>
+      <SkeletonContentReveal className={className}>
+        {children}
+      </SkeletonContentReveal>
+    </Suspense>
+  );
+}
+
+export { SkeletonBoundary };

ui/components/shadcn/skeleton/skeleton-content-reveal.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { SkeletonContentReveal } from "./skeleton-content-reveal";
+
+describe("SkeletonContentReveal", () => {
+  it("reveals streamed content with insertion-time CSS motion", () => {
+    // Given
+    render(
+      <SkeletonContentReveal>
+        <section aria-label="Loaded content">Ready</section>
+      </SkeletonContentReveal>,
+    );
+
+    // When
+    const wrapper = screen.getByTestId("skeleton-content-reveal");
+
+    // Then
+    expect(screen.getByLabelText("Loaded content")).toBeInTheDocument();
+    expect(wrapper).toHaveAttribute("data-motion", "skeleton-content-handoff");
+    expect(wrapper).toHaveClass(
+      "transition-[opacity,transform]",
+      "duration-700",
+      "starting:opacity-0",
+      "starting:translate-y-3",
+      "opacity-100",
+      "translate-y-0",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+
+  it("merges caller classes without dropping the motion contract", () => {
+    // Given
+    render(
+      <SkeletonContentReveal className="custom-reveal">
+        Ready
+      </SkeletonContentReveal>,
+    );
+
+    // When
+    const wrapper = screen.getByTestId("skeleton-content-reveal");
+
+    // Then
+    expect(wrapper).toHaveClass(
+      "custom-reveal",
+      "transition-[opacity,transform]",
+      "starting:opacity-0",
+    );
+  });
+});

ui/components/shadcn/skeleton/skeleton-content-reveal.tsx

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface SkeletonContentRevealProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function SkeletonContentReveal({
+  children,
+  className,
+}: SkeletonContentRevealProps) {
+  return (
+    <div
+      data-testid="skeleton-content-reveal"
+      data-motion="skeleton-content-handoff"
+      className={cn(
+        "translate-y-0 opacity-100 transition-[opacity,transform] duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transform-none motion-reduce:transition-none starting:translate-y-3 starting:opacity-0",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { SkeletonContentReveal };

ui/components/shadcn/skeleton/skeleton.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Skeleton } from "./skeleton";
+
+describe("Skeleton", () => {
+  it("uses a subtle scanner animation that respects reduced motion", () => {
+    // Given
+    render(<Skeleton aria-label="Loading providers" />);
+
+    // When
+    const skeleton = screen.getByLabelText("Loading providers");
+
+    // Then
+    expect(skeleton).toHaveClass(
+      "relative",
+      "overflow-hidden",
+      "bg-border-neutral-tertiary",
+      "transition-colors",
+      "duration-500",
+      "ease-out",
+    );
+
+    const scanner = skeleton.querySelector("[data-slot='skeleton-scanner']");
+    expect(scanner).toHaveClass(
+      "animate-skeleton-scan",
+      "bg-gradient-to-r",
+      "from-transparent",
+      "via-white/10",
+      "to-transparent",
+      "motion-reduce:hidden",
+    );
+  });
+});

ui/components/shadcn/skeleton/skeleton.tsx

@@ -1,15 +1,25 @@
 import { cn } from "@/lib/utils";
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+function Skeleton({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
       className={cn(
-        "bg-border-neutral-tertiary animate-pulse rounded-md",
+        "bg-border-neutral-tertiary relative overflow-hidden rounded-md transition-colors duration-500 ease-out motion-reduce:transition-none",
         className,
       )}
       {...props}
-    />
+    >
+      <span
+        data-slot="skeleton-scanner"
+        className="animate-skeleton-scan pointer-events-none absolute inset-y-0 -left-1/2 w-1/2 bg-gradient-to-r from-transparent via-white/10 to-transparent motion-reduce:hidden"
+      />
+      {children}
+    </div>
   );
 }
 

ui/components/shadcn/spinner/loading-state.test.tsx

@@ -33,4 +33,22 @@ describe("LoadingState", () => {
     const { container } = render(<LoadingState className="custom-wrapper" />);
     expect(container.firstChild).toHaveClass("custom-wrapper");
   });
+
+  it("animates the loading state entry and label color subtly", () => {
+    const { container } = render(<LoadingState label="Loading findings..." />);
+    expect(container.firstChild).toHaveClass(
+      "animate-in",
+      "fade-in-0",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:animate-none",
+      "motion-reduce:transition-none",
+    );
+    expect(screen.getByText("Loading findings...")).toHaveClass(
+      "transition-colors",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
 });

ui/components/shadcn/spinner/loading-state.tsx

@@ -17,11 +17,16 @@ export function LoadingState({
 }: LoadingStateProps) {
   return (
     <div
-      className={cn("flex items-center justify-center gap-2 py-8", className)}
+      className={cn(
+        "animate-in fade-in-0 flex items-center justify-center gap-2 py-8 duration-200 ease-out motion-reduce:animate-none motion-reduce:transition-none",
+        className,
+      )}
     >
       <Spinner className={cn("size-6", spinnerClassName)} />
       {label && (
-        <span className="text-text-neutral-tertiary text-sm">{label}</span>
+        <span className="text-text-neutral-tertiary text-sm transition-colors duration-200 ease-out motion-reduce:transition-none">
+          {label}
+        </span>
       )}
     </div>
   );

ui/components/shadcn/spinner/spinner.tsx

@@ -19,7 +19,10 @@ interface SpinnerProps {
 export function Spinner({ className }: SpinnerProps) {
   return (
     <svg
-      className={cn("size-5 shrink-0 animate-spin", className)}
+      className={cn(
+        "size-5 shrink-0 animate-spin motion-reduce:animate-none",
+        className,
+      )}
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

ui/components/shadcn/tabs/tabs.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  it("animates tab content when switching between tabs", async () => {
+    // Given - A tabs group with two content panels
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="events">Events</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">Overview content</TabsContent>
+        <TabsContent value="events">Events content</TabsContent>
+      </Tabs>,
+    );
+
+    // When - The user switches to another tab
+    await user.click(screen.getByRole("tab", { name: /events/i }));
+
+    const eventsPanel = screen.getByText("Events content");
+
+    // Then - The newly active content keeps the motion-ready content element
+    expect(eventsPanel).toHaveAttribute("data-slot", "tabs-content");
+    expect(eventsPanel).toHaveClass(
+      "will-change-transform",
+      "motion-reduce:transform-none",
+    );
+    expect(eventsPanel).toHaveAttribute("data-state", "active");
+  });
+});

ui/components/shadcn/tabs/tabs.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion, useReducedMotion } from "framer-motion";
 import type { ComponentProps, ReactNode } from "react";
 
 import {
@@ -30,7 +31,7 @@ const TRIGGER_STYLES = {
  * Content component styles
  */
 const CONTENT_STYLES =
-  "mt-2 focus-visible:rounded-md focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50" as const;
+  "mt-2 will-change-transform motion-reduce:transform-none focus-visible:rounded-md focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50" as const;
 
 /**
  * Build trigger className by combining style parts
@@ -122,14 +123,27 @@ function TabsTrigger({
 
 function TabsContent({
   className,
+  children,
   ...props
 }: ComponentProps<typeof TabsPrimitive.Content>) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn(CONTENT_STYLES, className)}
-      {...props}
-    />
+    <TabsPrimitive.Content asChild {...props}>
+      <motion.div
+        data-slot="tabs-content"
+        initial={shouldReduceMotion ? false : { opacity: 0, y: 4 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={
+          shouldReduceMotion
+            ? { duration: 0 }
+            : { duration: 0.2, ease: "easeOut" }
+        }
+        className={cn(CONTENT_STYLES, className)}
+      >
+        {children}
+      </motion.div>
+    </TabsPrimitive.Content>
   );
 }
 

ui/components/shadcn/textarea/textarea.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Textarea } from "./textarea";
+
+describe("Textarea", () => {
+  it("uses visible hover and focus microinteraction timing", () => {
+    // Given - A standard textarea
+    render(<Textarea aria-label="Reason" />);
+
+    // When - The textarea renders
+    const textarea = screen.getByRole("textbox", { name: /reason/i });
+
+    // Then - The focus/hover state changes are intentionally timed
+    expect(textarea).toHaveClass(
+      "transition-[background-color,border-color,box-shadow,color]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/textarea/textarea.tsx

@@ -6,7 +6,7 @@ import { ComponentProps, forwardRef } from "react";
 import { cn } from "@/lib/utils";
 
 const textareaVariants = cva(
-  "flex w-full rounded-lg border text-sm transition-all outline-none resize-none disabled:cursor-not-allowed disabled:opacity-50",
+  "flex w-full rounded-lg border text-sm transition-[background-color,border-color,box-shadow,color] duration-150 ease-out outline-none motion-reduce:transition-none resize-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

ui/components/shadcn/tooltip.test.tsx

@@ -0,0 +1,66 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+
+function renderOpenTooltip() {
+  return render(
+    <Tooltip open>
+      <TooltipTrigger>Copy ARN</TooltipTrigger>
+      <TooltipContent>Copy resource identifier</TooltipContent>
+    </Tooltip>,
+  );
+}
+
+describe("Tooltip", () => {
+  it("renders controlled content through the Radix Tooltip API", () => {
+    // Given
+    renderOpenTooltip();
+
+    // When
+    const tooltip = document.querySelector("[data-slot='tooltip-content']");
+
+    // Then
+    expect(screen.getByRole("tooltip")).toBeVisible();
+    expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveTextContent("Copy resource identifier");
+  });
+
+  it("uses an intentional open and close motion contract", () => {
+    // Given
+    renderOpenTooltip();
+
+    // When
+    const tooltip = document.querySelector("[data-slot='tooltip-content']");
+
+    // Then
+    expect(tooltip).toHaveClass(
+      "origin-(--radix-tooltip-content-transform-origin)",
+      "animate-in",
+      "fade-in-0",
+      "zoom-in-95",
+      "duration-150",
+      "ease-out",
+      "data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0",
+      "data-[state=closed]:zoom-out-95",
+      "data-[state=closed]:duration-100",
+      "data-[state=closed]:ease-in",
+    );
+  });
+
+  it("removes transform-heavy tooltip motion for reduced-motion users", () => {
+    // Given
+    renderOpenTooltip();
+
+    // When
+    const tooltip = document.querySelector("[data-slot='tooltip-content']");
+
+    // Then
+    expect(tooltip).toHaveClass(
+      "motion-reduce:animate-none",
+      "motion-reduce:transform-none",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/shadcn/tree-view/tree-leaf.tsx

@@ -58,7 +58,9 @@ export function TreeLeaf({
       className={cn(
         "flex items-center gap-2 rounded-md px-2 py-1.5",
         "hover:bg-prowler-white/5 cursor-pointer",
+        "transition-[background-color,box-shadow,color] duration-150 ease-out motion-reduce:transition-none",
         "focus-visible:ring-border-input-primary-press focus-visible:ring-2 focus-visible:outline-none",
+        isSelected && "bg-prowler-white/5",
         item.disabled && "cursor-not-allowed opacity-50",
         item.className,
       )}

ui/components/shadcn/tree-view/tree-node.tsx

@@ -96,7 +96,9 @@ export function TreeNode({
         className={cn(
           "flex items-center gap-2 rounded-md px-2 py-1.5",
           "hover:bg-prowler-white/5 cursor-pointer",
+          "transition-[background-color,box-shadow,color] duration-150 ease-out motion-reduce:transition-none",
           "focus-visible:ring-border-input-primary-press focus-visible:ring-2 focus-visible:outline-none",
+          isSelected && "bg-prowler-white/5",
           item.disabled && "cursor-not-allowed opacity-50",
           item.className,
         )}
@@ -110,7 +112,7 @@ export function TreeNode({
         onKeyDown={handleKeyDown}
       >
         <button
-          className="hover:bg-prowler-white/10 shrink-0 rounded p-0.5"
+          className="hover:bg-prowler-white/10 shrink-0 rounded p-0.5 transition-colors duration-150 ease-out motion-reduce:transition-none"
           aria-label={isExpanded ? "Collapse" : "Expand"}
           onClick={(e) => {
             e.stopPropagation();
@@ -123,7 +125,7 @@ export function TreeNode({
           ) : (
             <ChevronRightIcon
               className={cn(
-                "h-4 w-4 transition-transform duration-200",
+                "h-4 w-4 transition-transform duration-200 ease-out motion-reduce:transition-none",
                 isExpanded && "rotate-90",
               )}
             />

ui/components/shadcn/tree-view/tree-view.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { TreeView } from "./tree-view";
+
+const treeData = [
+  {
+    id: "org-1",
+    name: "Organization",
+    children: [
+      { id: "account-1", name: "Production" },
+      { id: "account-2", name: "Development" },
+    ],
+  },
+];
+
+describe("TreeView", () => {
+  it("animates node affordances and expanded content", () => {
+    // Given
+    render(<TreeView data={treeData} expandedIds={["org-1"]} showCheckboxes />);
+
+    // When
+    const node = screen.getByRole("treeitem", { name: /organization/i });
+    const expandButton = screen.getByRole("button", { name: /collapse/i });
+    const chevron = expandButton.querySelector("svg");
+    const group = screen.getByRole("group");
+
+    // Then
+    expect(node).toHaveClass(
+      "transition-[background-color,box-shadow,color]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(expandButton).toHaveClass(
+      "transition-colors",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+    expect(chevron).toHaveClass(
+      "transition-transform",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+      "rotate-90",
+    );
+    expect(group).toHaveClass("overflow-hidden");
+  });
+
+  it("animates selected leaf row feedback", () => {
+    // Given
+    render(
+      <TreeView
+        data={treeData}
+        expandedIds={["org-1"]}
+        selectedIds={["account-1"]}
+        onSelectionChange={vi.fn()}
+        showCheckboxes
+      />,
+    );
+
+    // When
+    const selectedLeaf = screen.getByRole("treeitem", { name: /production/i });
+
+    // Then
+    expect(selectedLeaf).toHaveAttribute("aria-selected", "true");
+    expect(selectedLeaf).toHaveClass(
+      "bg-prowler-white/5",
+      "transition-[background-color,box-shadow,color]",
+      "duration-150",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/ui/table/data-table-search.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { DataTableSearch } from "./data-table-search";
+
+vi.mock("next/navigation", () => ({
+  usePathname: () => "/findings",
+  useRouter: () => ({ push: vi.fn() }),
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+vi.mock("@/hooks/use-url-filters", () => ({
+  useUrlFilters: () => ({ updateFilter: vi.fn() }),
+}));
+
+describe("DataTableSearch", () => {
+  it("uses visible focus and icon microinteraction timing", async () => {
+    // Given - A table search field
+    const user = userEvent.setup();
+    render(<DataTableSearch placeholder="Search findings" />);
+
+    // When - The user focuses the table search
+    const input = screen.getByRole("searchbox", { name: /search findings/i });
+    await user.click(input);
+
+    const control = screen.getByTestId("data-table-search-control");
+    const icon = screen.getByTestId("data-table-search-icon");
+
+    // Then - The table search control has visible focus/highlight timing
+    expect(control).toHaveClass(
+      "transition-[background-color,border-color,box-shadow,color]",
+      "duration-250",
+      "ease-out",
+      "motion-reduce:transition-none",
+      "focus-within:ring-1",
+    );
+    expect(icon).toHaveClass(
+      "transition-colors",
+      "duration-250",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
+  });
+});

ui/components/ui/table/data-table-search.tsx

@@ -142,13 +142,17 @@ export const DataTableSearch = ({
     >
       <div className="relative w-full">
         <div
+          data-testid="data-table-search-control"
           className={cn(
-            "border-border-neutral-tertiary bg-bg-neutral-tertiary hover:bg-bg-neutral-secondary flex items-center gap-1.5 rounded-md border transition-colors",
-            isFocused && "border-border-input-primary-pressed",
+            "border-border-neutral-tertiary bg-bg-neutral-tertiary hover:bg-bg-neutral-secondary focus-within:ring-border-input-primary-press flex items-center gap-1.5 rounded-md border transition-[background-color,border-color,box-shadow,color] duration-250 ease-out focus-within:ring-1 focus-within:ring-inset motion-reduce:transition-none",
+            isFocused && "border-border-input-primary-press",
           )}
         >
           <div className="flex shrink-0 items-center pl-3">
-            <SearchIcon className="text-text-neutral-tertiary size-4" />
+            <SearchIcon
+              data-testid="data-table-search-icon"
+              className="text-text-neutral-tertiary size-4 transition-colors duration-250 ease-out motion-reduce:transition-none"
+            />
           </div>
 
           {hasBadge && (
@@ -180,6 +184,7 @@ export const DataTableSearch = ({
             ref={inputRef}
             id={id}
             type="search"
+            aria-label={placeholder}
             placeholder={placeholder}
             value={value}
             onChange={(e) => handleChange(e.target.value)}

ui/components/ui/table/data-table.tsx

@@ -329,7 +329,9 @@ export function DataTable<TData, TValue>({
                         </TableCell>
                       ))}
                     </TableRow>
-                    {renderAfterRow?.(row)}
+                    <AnimatePresence initial={false}>
+                      {renderAfterRow?.(row)}
+                    </AnimatePresence>
                   </Fragment>
                 ),
               )

ui/components/ui/table/status-badge.test.tsx

@@ -22,9 +22,26 @@ describe("StatusBadge", () => {
   );
 
   it("renders the executing state with spinner and progress percentage", () => {
-    render(<StatusBadge status="executing" loadingProgress={42} />);
+    const { container } = render(
+      <StatusBadge status="executing" loadingProgress={42} />,
+    );
     expect(screen.getByText("executing")).toBeInTheDocument();
     expect(screen.getByText("42%")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toHaveClass(
+      "animate-spin",
+      "motion-reduce:animate-none",
+    );
+  });
+
+  it("animates status color changes without layout motion", () => {
+    const { container } = render(<StatusBadge status="completed" />);
+    const badge = container.querySelector("[data-slot='badge']");
+    expect(badge).toHaveClass(
+      "transition-[background-color,border-color,color,box-shadow]",
+      "duration-200",
+      "ease-out",
+      "motion-reduce:transition-none",
+    );
   });
 
   it("omits progress when loadingProgress is not provided", () => {

ui/components/ui/table/status-badge.tsx

@@ -68,7 +68,10 @@ export const StatusBadge = ({
     >
       {status === "executing" ? (
         <span className="inline-flex items-center gap-1">
-          <SpinnerIcon size={12} className="animate-spin" />
+          <SpinnerIcon
+            size={12}
+            className="animate-spin motion-reduce:animate-none"
+          />
           {loadingProgress !== undefined && (
             <span className="text-[0.6rem]">{loadingProgress}%</span>
           )}

ui/styles/globals.css

@@ -409,6 +409,21 @@
     transform-box: fill-box;
     transform-origin: center;
   }
+
+  @keyframes skeletonScan {
+    0% {
+      transform: translateX(0);
+    }
+
+    55%,
+    100% {
+      transform: translateX(300%);
+    }
+  }
+
+  .animate-skeleton-scan {
+    animation: skeletonScan 2.6s ease-in-out infinite;
+  }
 }
 
 /* ===== BASE LAYER ===== */