Extract selection bar styles into a tailwind variant

The bottom selection action bar carried its layout as inline class
strings on the container divs. Move them into a slotted tv in the
documents variants module, matching the documentsLayout pattern, so the
component consumes named slots instead of ad hoc className literals.

Signed-off-by: Émile Ré <emile@probo.com>

apps/compliance-portal/src/pages/documents/_components/DocumentsSelectionBar.tsx

@@ -26,6 +26,7 @@ import { useTranslation } from "react-i18next";
 import type { DocumentSelectionEntry } from "../_lib/DocumentSelectionContext";
 import { useDocumentSelection } from "../_lib/DocumentSelectionContext";
 import { useBulkRequestAccess } from "../_lib/useBulkRequestAccess";
+import { selectionBar } from "../variants";
 
 interface DocumentsSelectionBarProps {
   // Every selectable row on the page, used to resolve the current selection into
@@ -55,13 +56,15 @@ export function DocumentsSelectionBar({ entries }: DocumentsSelectionBarProps) {
     requestAccess(lockedSelected.map(entry => ({ id: entry.id, kind: entry.kind })));
   };
 
+  const { bar, inner, actions } = selectionBar();
+
   return (
-    <div className="fixed inset-x-0 bottom-0 z-10 border-t border-sand-a3 bg-sand-1/80 px-8 py-4 backdrop-blur max-md:px-4">
-      <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4">
+    <div className={bar()}>
+      <div className={inner()}>
         <Text size={2} weight="medium" color="neutral" highContrast>
           {t("selection.count", { count: selectedIds.size })}
         </Text>
-        <div className="flex items-center gap-2">
+        <div className={actions()}>
           <Button variant="ghost" color="neutral" onClick={clear}>
             {t("selection.clear")}
           </Button>

apps/compliance-portal/src/pages/documents/variants.ts

@@ -37,3 +37,13 @@ export const documentsLayout = tv({
     busy: false,
   },
 });
+
+// Bottom selection action bar, shown while rows are selected. A fixed, blurred
+// band whose inner column aligns with the results column above it.
+export const selectionBar = tv({
+  slots: {
+    bar: "fixed inset-x-0 bottom-0 z-10 border-t border-sand-a3 bg-sand-1/80 px-8 py-4 backdrop-blur max-md:px-4",
+    inner: "mx-auto flex w-full max-w-5xl items-center justify-between gap-4",
+    actions: "flex items-center gap-2",
+  },
+});