@marimo-team/frontend 0.25.2-dev35 → 0.25.2-dev37

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BaMnzPvQ.js"></script>
+    <script type="module" crossorigin src="./assets/index-BUQP_BOv.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CUdNIagt.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BQ9S8nyo.js">
@@ -128,40 +128,121 @@
     <link rel="modulepreload" crossorigin href="./assets/dist-qhAY4L2r.js">
     <link rel="modulepreload" crossorigin href="./assets/marked.esm-B_3iMIUq.js">
     <link rel="modulepreload" crossorigin href="./assets/strings-LjhpYwmx.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-DuPWeAke.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-BOfh4hMd.js">
     <link rel="modulepreload" crossorigin href="./assets/badge-DFf033uX.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-DwKxgyZ7.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-DEjL-yyx.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-CpALWntr.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-BsquYPpR.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-D-DQw4kU.js">
-    <link rel="modulepreload" crossorigin href="./assets/stex-CJTNBbet.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DtH-7lot.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-BmExfiwX.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-1tmpVXyz.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-LSsCJjA3.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DusFODSa.js">
+    <link rel="modulepreload" crossorigin href="./assets/stex-Dc5bKD4z.js">
     <link rel="modulepreload" crossorigin href="./assets/useTheme-CnWB5G1X.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-DucTwMkf.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es--06brOip.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-9Zalh8wx.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-DIjn-wIE.js">
+    <link rel="modulepreload" crossorigin href="./assets/coerce-CZiN7rQ_.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-RyCOE8jo.js">
+    <link rel="modulepreload" crossorigin href="./assets/_hasPath-BmRQipI0.js">
+    <link rel="modulepreload" crossorigin href="./assets/hasIn-yw4sIeJR.js">
+    <link rel="modulepreload" crossorigin href="./assets/_baseSet-Bpdo9AvU.js">
+    <link rel="modulepreload" crossorigin href="./assets/pick-DKIID_Mo.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-BQjr5g9m.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-BsVxWYGT.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-91eGNw7v.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-B--GzTEX.js">
+    <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
+    <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-84E-_nIR.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DT34-_9e.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-RyCOE8jo.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-DQuttmjH.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DMhZObiQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-k0IpRLOw.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-ClrDrx3F.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-BKNVs7hM.js">
+    <link rel="modulepreload" crossorigin href="./assets/kbd-BnUiViRu.js">
+    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DO1N1lCX.js">
+    <link rel="modulepreload" crossorigin href="./assets/errors-D9vyuMar.js">
+    <link rel="modulepreload" crossorigin href="./assets/api-C5RyTgDk.js">
+    <link rel="modulepreload" crossorigin href="./assets/share-BZW3tzEX.js">
+    <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-0X7um_9u.js">
+    <link rel="modulepreload" crossorigin href="./assets/pair-DrvWpc2_.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CHPy195L.js">
     <link rel="modulepreload" crossorigin href="./assets/config-2Nts63h2.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-DOPs2jx8.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-Crx6knLg.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-CeDa-Cb7.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-D30-tyL0.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-DBXnO5qS.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-1_rRTvtc.js">
+    <link rel="modulepreload" crossorigin href="./assets/tabs-Dx9NomUx.js">
+    <link rel="modulepreload" crossorigin href="./assets/list-filter-CTg19675.js">
+    <link rel="modulepreload" crossorigin href="./assets/eye-off-CfkK-QS3.js">
+    <link rel="modulepreload" crossorigin href="./assets/refresh-cw-CEGpOrzd.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-DpLu3KP0.js">
+    <link rel="modulepreload" crossorigin href="./assets/ellipsis-CLMWXUqY.js">
+    <link rel="modulepreload" crossorigin href="./assets/external-link-D2lKwXyB.js">
+    <link rel="modulepreload" crossorigin href="./assets/spinner-CGdRKCnw.js">
+    <link rel="modulepreload" crossorigin href="./assets/message-circle-OTHnVlxO.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-DVgK5i5l.js">
     <link rel="modulepreload" crossorigin href="./assets/package-BeYhVWvM.js">
-    <link rel="modulepreload" crossorigin href="./assets/errors-D9vyuMar.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-Ccdyd-O2.js">
+    <link rel="modulepreload" crossorigin href="./assets/alert-MrQXRIin.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-OJSVjDAX.js">
+    <link rel="modulepreload" crossorigin href="./assets/filename-BlDwe-3Z.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-CEmc-Cr5.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-K6C_dFmm.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-CjgScv5a.js">
+    <link rel="modulepreload" crossorigin href="./assets/en-US-B4U3zuiu.js">
+    <link rel="modulepreload" crossorigin href="./assets/isValid-BEbe1fFs.js">
+    <link rel="modulepreload" crossorigin href="./assets/dates-Cv2NS8h4.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-CNPGWpMu.js">
     <link rel="modulepreload" crossorigin href="./assets/precisionRound-Bq_nmf5u.js">
     <link rel="modulepreload" crossorigin href="./assets/defaultLocale-D5bOh7g6.js">
     <link rel="modulepreload" crossorigin href="./assets/vega-loader.browser-CLRkNgm7.js">
     <link rel="modulepreload" crossorigin href="./assets/tooltip-BQ9qHrrN.js">
-    <link rel="modulepreload" crossorigin href="./assets/filename-DQ3sa2jY.js">
-    <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
-    <link rel="modulepreload" crossorigin href="./assets/chunk-YOKDWASO-84E-_nIR.js">
+    <link rel="modulepreload" crossorigin href="./assets/react-icons.esm-C6SMwKZH.js">
+    <link rel="modulepreload" crossorigin href="./assets/extends-CvVTau-c.js">
+    <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-Do6ywDBO.js">
+    <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-CnQhRi25.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-banner-EjYF86IQ.js">
+    <link rel="modulepreload" crossorigin href="./assets/utils-CaQYvazl.js">
+    <link rel="modulepreload" crossorigin href="./assets/formats-Bbyf-azh.js">
+    <link rel="modulepreload" crossorigin href="./assets/table-Dg1KxH-q.js">
+    <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BL2E7f5c.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BdpXVhxV.js">
+    <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-B6FT5Xvu.js">
+    <link rel="modulepreload" crossorigin href="./assets/square-function-DyFIOFp5.js">
+    <link rel="modulepreload" crossorigin href="./assets/spec-C09S5bT-.js">
+    <link rel="modulepreload" crossorigin href="./assets/semaphore-BjoL5P0h.js">
+    <link rel="modulepreload" crossorigin href="./assets/fileToBase64-aqhlf6Jj.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-C44TyhOc.js">
+    <link rel="modulepreload" crossorigin href="./assets/code-xml-CW65k2pN.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-headphone-DKocX1z0.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-mCR_SMtq.js">
+    <link rel="modulepreload" crossorigin href="./assets/image-CTch9x2I.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-e7tmeyP-.js">
+    <link rel="modulepreload" crossorigin href="./assets/globe-CmFhHoL1.js">
+    <link rel="modulepreload" crossorigin href="./assets/esm-3WkPrffD.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-DCbFUjci.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-CPhK2DqE.js">
+    <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
+    <link rel="modulepreload" crossorigin href="./assets/glide-utils-BatnVnxk.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-CZ2TL09N.js">
+    <link rel="modulepreload" crossorigin href="./assets/square-DvOKKLHZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/triangle-alert-BeRqoThc.js">
+    <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
+    <link rel="modulepreload" crossorigin href="./assets/es-C4LtxVar.js">
+    <link rel="modulepreload" crossorigin href="./assets/package-data-BwaspaKJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-export-DzhB1FrN.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-BoDtLl9Q.js">
+    <link rel="modulepreload" crossorigin href="./assets/bundle.esm-CklCb9AD.js">
+    <link rel="modulepreload" crossorigin href="./assets/icons-CVdkfEA3.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-DSlTt6u_.js">
+    <link rel="modulepreload" crossorigin href="./assets/pathUtils-BKesuhdv.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-yJVtlHMv.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-C4-iduJO.css">
+    <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
+    <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-BGdpHNhZ.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.2-dev35",
+  "version": "0.25.2-dev37",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/__tests__/pagination.test.tsx

@@ -1,7 +1,91 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { expect, test } from "vitest";
-import { matchingPageRanges } from "../pagination";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { DataTablePagination, matchingPageRanges } from "../pagination";
+
+function PaginationHarness({
+  totalPages = 3,
+  loading = false,
+}: {
+  totalPages?: number;
+  loading?: boolean;
+}) {
+  const table = useReactTable({
+    locale: "en-US",
+    data: [],
+    columns: [],
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    pageCount: totalPages,
+  });
+  return (
+    <TooltipProvider>
+      <DataTablePagination table={table} tableLoading={loading} />
+    </TooltipProvider>
+  );
+}
+
+test("named navigation controls preserve page updates and boundaries", () => {
+  render(<PaginationHarness />);
+  expect(screen.getByRole("button", { name: "First page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 2 of 3" }),
+  ).toBeEnabled();
+  fireEvent.click(screen.getByRole("button", { name: "Last page" }));
+  expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Last page" })).toBeDisabled();
+  fireEvent.click(screen.getByRole("button", { name: "Previous page" }));
+  fireEvent.click(screen.getByRole("button", { name: "First page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  ).toBeEnabled();
+  expect(screen.getByRole("button", { name: "First page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled();
+  expect(screen.getByRole("button", { name: "Next page" })).toBeEnabled();
+  expect(screen.getByRole("button", { name: "Last page" })).toBeEnabled();
+});
+
+test("loading prevents navigation and a single page disables controls", () => {
+  const { rerender } = render(<PaginationHarness loading={true} />);
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  fireEvent.click(screen.getByRole("button", { name: "Last page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  ).toBeEnabled();
+  rerender(<PaginationHarness />);
+  fireEvent.click(screen.getByRole("button", { name: "Next page" }));
+  expect(
+    screen.getByRole("button", { name: "Choose page, current page 2 of 3" }),
+  ).toBeEnabled();
+  rerender(<PaginationHarness key="single-page" totalPages={1} />);
+  for (const name of [
+    "First page",
+    "Previous page",
+    "Next page",
+    "Last page",
+    "Choose page, current page 1 of 1",
+  ]) {
+    expect(screen.getByRole("button", { name })).toBeDisabled();
+  }
+});
+
+test("page picker exposes named dialog and search", () => {
+  render(<PaginationHarness />);
+  fireEvent.click(
+    screen.getByRole("button", { name: "Choose page, current page 1 of 3" }),
+  );
+  expect(
+    screen.getByRole("dialog", { name: "Choose page" }),
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole("combobox", { name: "Search pages" }),
+  ).toBeInTheDocument();
+});
 
 test("empty prefix returns no ranges", () => {
   expect(matchingPageRanges("", 500)).toEqual([]);

package/src/components/data-table/pagination.tsx

@@ -117,6 +117,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             variant="text"
             data-testid="first-page-button"
+            aria-label="First page"
             className="hidden h-6 w-5 p-0 lg:flex"
             onClick={() => handlePageChange(() => table.setPageIndex(0))}
             onMouseDown={Events.preventFocus}
@@ -130,6 +131,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             variant="text"
             data-testid="previous-page-button"
+            aria-label="Previous page"
             className="h-6 w-5 p-0"
             onClick={() => handlePageChange(() => table.previousPage())}
             onMouseDown={Events.preventFocus}
@@ -156,6 +158,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             variant="text"
             data-testid="next-page-button"
+            aria-label="Next page"
             className="h-6 w-5 p-0"
             onClick={() => handlePageChange(() => table.nextPage())}
             onMouseDown={Events.preventFocus}
@@ -169,6 +172,7 @@ export const DataTablePagination = <TData,>({
             size="xs"
             variant="text"
             data-testid="last-page-button"
+            aria-label="Last page"
             className="hidden h-6 w-5 p-0 lg:flex"
             onClick={() =>
               handlePageChange(() =>
@@ -306,14 +310,24 @@ export const PageSelector = ({
               : "opacity-50 cursor-default",
           )}
           data-testid="page-select"
+          aria-label={`Choose page, current page ${currentPage} of ${totalPages}`}
           disabled={totalPages <= 1}
         >
           {currentPage}
           <ChevronDown className="h-3 w-3 opacity-50 mb-px" />
         </button>
       </PopoverTrigger>
-      <PopoverContent className="w-36 p-0" align="center" sideOffset={6}>
-        <Command shouldFilter={false} value={String(currentPage)}>
+      <PopoverContent
+        className="w-36 p-0"
+        align="center"
+        sideOffset={6}
+        aria-label="Choose page"
+      >
+        <Command
+          label="Search pages"
+          shouldFilter={false}
+          value={String(currentPage)}
+        >
           <CommandInput
             placeholder={`Page (1–${totalPages})`}
             rootClassName="px-2 h-8"