@marimo-team/frontend 0.24.1-dev114 → 0.24.1-dev116

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-KEC-OVKY.js"></script>
+    <script type="module" crossorigin src="./assets/index-BphlL86Q.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CBDbhulC.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-CYIjoINj.js">
@@ -91,18 +91,18 @@
     <link rel="modulepreload" crossorigin href="./assets/config-BRRSKtP3.js">
     <link rel="modulepreload" crossorigin href="./assets/clsx-DB0hHKMi.js">
     <link rel="modulepreload" crossorigin href="./assets/cn-ldLVeaqm.js">
-    <link rel="modulepreload" crossorigin href="./assets/fullscreen-BFfuaW3H.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-ConG15vZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/menu-items-BGpxTb6Y.js">
-    <link rel="modulepreload" crossorigin href="./assets/button-MlJ5qApt.js">
-    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-D_btUJmY.js">
+    <link rel="modulepreload" crossorigin href="./assets/fullscreen-BH2jz-F4.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DzCQtGkt.js">
+    <link rel="modulepreload" crossorigin href="./assets/menu-items-BSRA2YI9.js">
+    <link rel="modulepreload" crossorigin href="./assets/button-Dh8EwhsF.js">
+    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-CA-2mBs3.js">
     <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-B7HeEoG2.js">
     <link rel="modulepreload" crossorigin href="./assets/check-BoA6XBpj.js">
     <link rel="modulepreload" crossorigin href="./assets/context-Do8M9TDF.js">
     <link rel="modulepreload" crossorigin href="./assets/useNumberFormatter-DHJ9s6Vk.js">
-    <link rel="modulepreload" crossorigin href="./assets/select-4UL7AAMx.js">
-    <link rel="modulepreload" crossorigin href="./assets/circle-BScTJE-Z.js">
-    <link rel="modulepreload" crossorigin href="./assets/tooltip-BO5vfMvm.js">
+    <link rel="modulepreload" crossorigin href="./assets/select-nLt2y0Sw.js">
+    <link rel="modulepreload" crossorigin href="./assets/circle-ByJdIf5p.js">
+    <link rel="modulepreload" crossorigin href="./assets/tooltip-BUtPzKB4.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-BtC9ym6k.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-CZNULd6Z.js">
     <link rel="modulepreload" crossorigin href="./assets/arrays-BqUx5USx.js">
@@ -120,13 +120,13 @@
     <link rel="modulepreload" crossorigin href="./assets/database-zap-CloO6gbw.js">
     <link rel="modulepreload" crossorigin href="./assets/numbers-Bc-r3jsC.js">
     <link rel="modulepreload" crossorigin href="./assets/useDebounce-Dulm61-t.js">
-    <link rel="modulepreload" crossorigin href="./assets/input-BBJ8nAOd.js">
+    <link rel="modulepreload" crossorigin href="./assets/input-C-RazPBA.js">
     <link rel="modulepreload" crossorigin href="./assets/uuid-k9DpjH68.js">
     <link rel="modulepreload" crossorigin href="./assets/use-toast-DpWHUGuF.js">
-    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-BJCzwShk.js">
+    <link rel="modulepreload" crossorigin href="./assets/write-secret-modal-C2V1d4p-.js">
     <link rel="modulepreload" crossorigin href="./assets/plus-C4J9gIE1.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-D_HX-0qx.js">
-    <link rel="modulepreload" crossorigin href="./assets/badge-D_-uqy2N.js">
+    <link rel="modulepreload" crossorigin href="./assets/badge-BSgtkC2e.js">
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-HclGiUj8.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-DkPPv0FB.js">
     <link rel="modulepreload" crossorigin href="./assets/dist-Dw9YRsCU.js">
@@ -138,56 +138,56 @@
     <link rel="modulepreload" crossorigin href="./assets/useTheme-OSyXt1jZ.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-Buhk-UgR.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es-DrVcFY1Q.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-C3Vs2g0_.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-CS_eEQ19.js">
     <link rel="modulepreload" crossorigin href="./assets/get-DjNf4SIX.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-gX6o3Pih.js">
     <link rel="modulepreload" crossorigin href="./assets/pick-Bs4cJfJU.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-DzO-nXy-.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-qLxqA0gx.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-BzJYj8tz.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BMXKNElG.js">
     <link rel="modulepreload" crossorigin href="./assets/eye-off-CFuPxa9F.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-DlEomWzI.js">
     <link rel="modulepreload" crossorigin href="./assets/extends-CvVTau-c.js">
     <link rel="modulepreload" crossorigin href="./assets/esm-BHMOvJzM.js">
-    <link rel="modulepreload" crossorigin href="./assets/useAddCell-qRhXgYb3.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-BsJxWR9t.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-BnkWE9wV.js">
+    <link rel="modulepreload" crossorigin href="./assets/useAddCell-B9V9LPof.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-DlajH1tG.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-LboTfNDv.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-D9Dr-k4J.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-CRg4xQWg.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CZ3YygMD.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-icon-zfaCsLjV.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-Bno18PcV.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DUXIAUaj.js">
-    <link rel="modulepreload" crossorigin href="./assets/blob-CoYb7D0i.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CbdXI4uO.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-icon-z8fuTE3w.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DpLEou4d.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-BIg2a2gf.js">
+    <link rel="modulepreload" crossorigin href="./assets/blob-DDxD75AS.js">
     <link rel="modulepreload" crossorigin href="./assets/share-CPtBiNgr.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CbeVJ6OD.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-DqwSj41I.js">
-    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-ClXmeuxA.js">
-    <link rel="modulepreload" crossorigin href="./assets/config-BzPQfGBM.js">
-    <link rel="modulepreload" crossorigin href="./assets/tabs-CIEoDqa7.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-CbrP-RfI.js">
+    <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-CDVGFYfr.js">
+    <link rel="modulepreload" crossorigin href="./assets/config-CJhe6_P2.js">
+    <link rel="modulepreload" crossorigin href="./assets/tabs-Cy1qXLzH.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CKA5zVsM.js">
-    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-DnX3jo0y.js">
+    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-C40jM9o4.js">
     <link rel="modulepreload" crossorigin href="./assets/html-to-image-D6GUC5q6.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-VyhuV4Af.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-D2Ha98tp.js">
     <link rel="modulepreload" crossorigin href="./assets/table-CUK1W5bI.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-Bf-rx_aV.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-C-1KQPVN.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-CIKsGmOE.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-Dfik_tuW.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-Bp3BxyRA.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Ck-Hgfvj.js">
     <link rel="modulepreload" crossorigin href="./assets/message-circle-BQB1AIAg.js">
     <link rel="modulepreload" crossorigin href="./assets/hat-glasses-C8LSY3HT.js">
     <link rel="modulepreload" crossorigin href="./assets/package-DPlscLzt.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-DB4KqePX.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-Br61QFhd.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-Cwh96ZBE.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-dmKwNsrp.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DsD08SLK.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-C5o_oPeD.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-CJvbR4gk.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BTqTZeiu.js">
-    <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-dPzEOlg8.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-D2Q_Pzdk.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-B7DFi5Hf.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-CIYHG601.js">
+    <link rel="modulepreload" crossorigin href="./assets/VisuallyHidden-K_kroCIL.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-BiqAQ-zI.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-yTIMUO13.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-nQ3Iam8J.js">
@@ -200,12 +200,12 @@
     <link rel="modulepreload" crossorigin href="./assets/react-icons.esm-hr79-MCS.js">
     <link rel="modulepreload" crossorigin href="./assets/emotion-is-prop-valid.esm-nLO-SoUf.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-C7Di8f2y.js">
-    <link rel="modulepreload" crossorigin href="./assets/error-banner-BsjSLKyr.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-banner-Dw5YY9wq.js">
     <link rel="modulepreload" crossorigin href="./assets/utils-49LGK4zG.js">
     <link rel="modulepreload" crossorigin href="./assets/formats-C6s96nu2.js">
     <link rel="modulepreload" crossorigin href="./assets/table-DmqOOjfe.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BSRAHC4P.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-6STJL9Rn.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-i6wa-ZZg.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-ChZdjJhj.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-DkZweMAs.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-DKsAmLTi.js">
@@ -216,26 +216,26 @@
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-rFCxFRI8.js">
     <link rel="modulepreload" crossorigin href="./assets/file-DF8n85RA.js">
     <link rel="modulepreload" crossorigin href="./assets/image-ab13yGv4.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-DqdK7VJg.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-D0QvDCq_.js">
     <link rel="modulepreload" crossorigin href="./assets/globe-BQf75qV_.js">
     <link rel="modulepreload" crossorigin href="./assets/markdown-export-0rLbaq8b.js">
     <link rel="modulepreload" crossorigin href="./assets/data-grid-types-DgHVN_Zz.js">
     <link rel="modulepreload" crossorigin href="./assets/glide-utils-UGsrRHYj.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-CBydN0D3.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-BVtft2uw.js">
     <link rel="modulepreload" crossorigin href="./assets/square-B58Ib8Ir.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-MihykDYG.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-Djf4O40e.js">
-    <link rel="modulepreload" crossorigin href="./assets/es-DP79Qs0u.js">
-    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-BmNAHfqT.js">
+    <link rel="modulepreload" crossorigin href="./assets/es-CrFhA96G.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-DCEcfEd4.js">
     <link rel="modulepreload" crossorigin href="./assets/bundle.esm-DzY74mzC.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-CjLa9BiH.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CLytDdMl.js">
     <link rel="modulepreload" crossorigin href="./assets/pathUtils-Cryrlpma.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-DPSwhBkV.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-FQva8xB9.js">
     <link rel="stylesheet" crossorigin href="./assets/cells-D-c15Ks-.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-B7zTpxjS.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-BQtz7-np.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-BkIXRAbi.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-D1E_LKIW.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

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

package/src/components/editor/Output.tsx

@@ -18,10 +18,12 @@ import {
   ChevronsDownUpIcon,
   ChevronsUpDownIcon,
   ExpandIcon,
+  ShrinkIcon,
 } from "lucide-react";
 import { tooltipHandler } from "@/components/charts/tooltip";
 import { useExpandedOutput } from "@/core/cells/outputs";
 import { viewStateAtom } from "@/core/mode";
+import { useEventListener } from "@/hooks/useEventListener";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { useOverflowDetection } from "@/hooks/useOverflowDetection";
 import { renderHTML } from "@/plugins/core/RenderHTML";
@@ -31,11 +33,13 @@ import { getContainerWidth } from "@/plugins/impl/vega/utils";
 import { useTheme } from "@/theme/useTheme";
 import { Events } from "@/utils/events";
 import { invariant } from "@/utils/invariant";
+import { Logger } from "@/utils/Logger";
 import { processMimeBundle } from "@/utils/mime-types";
 import { Objects } from "@/utils/objects";
 import { LazyVegaEmbed } from "../charts/lazy";
 import { ChartLoadingState } from "../data-table/charts/components/chart-states";
 import { Button } from "../ui/button";
+import { useIsFullScreen } from "../ui/fullscreen";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { Tooltip } from "../ui/tooltip";
 import { CsvViewer } from "./file-tree/renderers";
@@ -408,6 +412,12 @@ const Div = React.forwardRef<
 >((props, ref) => <div ref={ref} {...props} />);
 Div.displayName = "Div";
 
+function exitFullscreen() {
+  document.exitFullscreen().catch((error) => {
+    Logger.warn("Failed to exit fullscreen", error);
+  });
+}
+
 /**
  * Detects if there is overflow in the output area and adds a button to optionally expand
  */
@@ -425,6 +435,16 @@ const ExpandableOutput = React.memo(
     const [isExpanded, setIsExpanded] = useExpandedOutput(cellId);
     const isOverflowing = useOverflowDetection(containerRef);
     const { hasFullscreen } = useIframeCapabilities();
+    const isFullscreen = useIsFullScreen(containerRef);
+
+    // Not every host exits fullscreen on Escape by itself. A null target keeps
+    // the listener off every output that is not fullscreen.
+    useEventListener(isFullscreen ? document : null, "keydown", (event) => {
+      if (event.key !== "Escape" || !document.fullscreenElement) {
+        return;
+      }
+      exitFullscreen();
+    });
 
     return (
       <>
@@ -488,6 +508,26 @@ const ExpandableOutput = React.memo(
               isExpanded || forceExpand ? { maxHeight: "none" } : undefined
             }
           >
+            {/* Fullscreen paints this element only, and the action buttons sit
+                outside it. A host does not always draw an exit overlay, so the
+                output carries its own exit control. */}
+            {isFullscreen && (
+              <Tooltip content="Exit fullscreen" side="left">
+                <Button
+                  data-testid="exit-fullscreen-output-button"
+                  aria-label="Exit fullscreen"
+                  className="absolute right-2 top-2 z-2 p-1 bg-background/90 border border-border hover:bg-muted print:hidden"
+                  onClick={exitFullscreen}
+                  size="xs"
+                  variant="text"
+                >
+                  <ShrinkIcon
+                    className="size-4 opacity-60 hover:opacity-80"
+                    strokeWidth={1.25}
+                  />
+                </Button>
+              </Tooltip>
+            )}
             {children}
           </div>
         </div>

package/src/components/editor/__tests__/Output.test.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { OutputArea, OutputRenderer } from "../Output";
@@ -158,3 +158,86 @@ describe("OutputRenderer image and SVG rendering", () => {
     expect(imgElement).toHaveAttribute("src", base64PngDataUrl);
   });
 });
+
+describe("OutputArea fullscreen exit control", () => {
+  let fullscreenElement: Element | null = null;
+  const exitFullscreen = vi.fn(() => Promise.resolve());
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    exitFullscreen.mockClear();
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+    Object.defineProperty(document, "exitFullscreen", {
+      configurable: true,
+      value: exitFullscreen,
+    });
+  });
+
+  // Drop the stubs so that the real document properties come back.
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+    Reflect.deleteProperty(document, "exitFullscreen");
+  });
+
+  const renderOutput = () =>
+    render(
+      <TooltipProvider>
+        <OutputArea
+          output={{
+            channel: "output",
+            data: "Hello World",
+            mimetype: "text/plain",
+          }}
+          cellId={cellId("test")}
+          stale={false}
+          loading={false}
+          allowExpand={true}
+        />
+      </TooltipProvider>,
+    );
+
+  const enterFullscreen = (container: HTMLElement) => {
+    fullscreenElement = container.querySelector('[data-cell-role="output"]');
+    act(() => {
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+  };
+
+  it("hides the exit button outside fullscreen", () => {
+    renderOutput();
+    expect(
+      screen.queryByTestId("exit-fullscreen-output-button"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows the exit button when the output is the fullscreen element", () => {
+    const { container } = renderOutput();
+    enterFullscreen(container);
+    expect(
+      screen.getByTestId("exit-fullscreen-output-button"),
+    ).toBeInTheDocument();
+  });
+
+  it("exits fullscreen on click", () => {
+    const { container } = renderOutput();
+    enterFullscreen(container);
+    fireEvent.click(screen.getByTestId("exit-fullscreen-output-button"));
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  it("exits fullscreen on Escape", () => {
+    const { container } = renderOutput();
+    enterFullscreen(container);
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(exitFullscreen).toHaveBeenCalledTimes(1);
+  });
+
+  it("ignores Escape outside fullscreen", () => {
+    renderOutput();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(exitFullscreen).not.toHaveBeenCalled();
+  });
+});

package/src/components/ui/__tests__/badge.test.ts

@@ -0,0 +1,63 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { badgeVariants } from "../badge";
+
+describe("badgeVariants", () => {
+  it.each([
+    {
+      variant: "default" as const,
+      expected: [
+        "forced-colors:bg-[Highlight]",
+        "forced-colors:border-[Highlight]",
+        "forced-colors:text-[HighlightText]",
+        "forced-colors:hover:bg-[Highlight]",
+        "forced-colors:hover:text-[HighlightText]",
+      ],
+    },
+    {
+      variant: "defaultOutline" as const,
+      expected: [
+        "forced-colors:bg-[Canvas]",
+        "forced-colors:border-[Highlight]",
+        "forced-colors:text-[CanvasText]",
+      ],
+    },
+    {
+      variant: "secondary" as const,
+      expected: [
+        "forced-colors:bg-[ButtonFace]",
+        "forced-colors:border-[ButtonText]",
+        "forced-colors:text-[ButtonText]",
+        "forced-colors:hover:bg-[Highlight]",
+        "forced-colors:hover:text-[HighlightText]",
+      ],
+    },
+  ])("uses system colors for $variant", ({ variant, expected }) => {
+    const classes = badgeVariants({ variant });
+
+    expect(classes).toEqual(expect.stringContaining(expected.join(" ")));
+    expect(classes).toContain("forced-color-adjust-none");
+  });
+
+  it.each(["destructive", "success", "outline"] as const)(
+    "keeps the %s variant visible without semantic colors",
+    (variant) => {
+      const classes = badgeVariants({ variant });
+
+      expect(classes).toEqual(
+        expect.stringContaining(
+          [
+            "forced-colors:bg-[Canvas]",
+            "forced-colors:border-[ButtonText]",
+            "forced-colors:text-[CanvasText]",
+          ].join(" "),
+        ),
+      );
+      if (variant !== "outline") {
+        expect(classes).toContain("forced-colors:hover:bg-[Highlight]");
+        expect(classes).toContain("forced-colors:hover:text-[HighlightText]");
+      }
+    },
+  );
+});

package/src/components/ui/__tests__/button.test.ts

@@ -39,4 +39,23 @@ describe("buttonVariants", () => {
     expect(classes).not.toMatch(/--(?:red|grass|yellow)-/);
     expect(classes).not.toContain("dark:");
   });
+
+  it("uses system colors in forced-color mode", () => {
+    const classes = buttonVariants({ variant: "default" });
+
+    expect(classes).toEqual(
+      expect.stringContaining(
+        [
+          "forced-color-adjust-none",
+          "forced-colors:border-[ButtonText]",
+          "forced-colors:bg-[ButtonFace]",
+          "forced-colors:text-[ButtonText]",
+          "forced-colors:hover:bg-[Highlight]",
+          "forced-colors:hover:text-[HighlightText]",
+          "forced-colors:disabled:border-[GrayText]",
+          "forced-colors:disabled:text-[GrayText]",
+        ].join(" "),
+      ),
+    );
+  });
 });

package/src/components/ui/__tests__/fullscreen.test.tsx

@@ -0,0 +1,88 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, render } from "@testing-library/react";
+import { useRef } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useIsFullScreen } from "../fullscreen";
+
+const FullScreenFlag = ({ label }: { label: string }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const isFullScreen = useIsFullScreen(ref);
+
+  return (
+    <div ref={ref} data-testid={label}>
+      {String(isFullScreen)}
+    </div>
+  );
+};
+
+describe("useIsFullScreen", () => {
+  let fullscreenElement: Element | null = null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+  });
+
+  const countFullScreenListeners = (calls: unknown[][]) =>
+    calls.filter((call) => call[0] === "fullscreenchange").length;
+
+  it("adds one document listener for many subscribers", () => {
+    const addEventListener = vi.spyOn(document, "addEventListener");
+
+    render(
+      <>
+        <FullScreenFlag label="first" />
+        <FullScreenFlag label="second" />
+        <FullScreenFlag label="third" />
+      </>,
+    );
+
+    expect(countFullScreenListeners(addEventListener.mock.calls)).toBe(1);
+    addEventListener.mockRestore();
+  });
+
+  it("removes the listener when the last subscriber unmounts", () => {
+    const removeEventListener = vi.spyOn(document, "removeEventListener");
+
+    const { unmount } = render(
+      <>
+        <FullScreenFlag label="first" />
+        <FullScreenFlag label="second" />
+      </>,
+    );
+
+    expect(countFullScreenListeners(removeEventListener.mock.calls)).toBe(0);
+
+    unmount();
+
+    expect(countFullScreenListeners(removeEventListener.mock.calls)).toBe(1);
+    removeEventListener.mockRestore();
+  });
+
+  it("reports true for the full screen element only", () => {
+    const { getByTestId } = render(
+      <>
+        <FullScreenFlag label="first" />
+        <FullScreenFlag label="second" />
+      </>,
+    );
+
+    expect(getByTestId("first")).toHaveTextContent("false");
+    expect(getByTestId("second")).toHaveTextContent("false");
+
+    fullscreenElement = getByTestId("second");
+    act(() => {
+      document.dispatchEvent(new Event("fullscreenchange"));
+    });
+
+    expect(getByTestId("first")).toHaveTextContent("false");
+    expect(getByTestId("second")).toHaveTextContent("true");
+  });
+});

package/src/components/ui/__tests__/menu-items.test.ts

@@ -0,0 +1,31 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import {
+  menuControlVariants,
+  menuItemVariants,
+  menuSubTriggerVariants,
+} from "../menu-items";
+
+describe("menu item variants", () => {
+  it.each([
+    menuSubTriggerVariants(),
+    menuControlVariants(),
+    menuItemVariants(),
+  ])("styles Radix highlighted state", (classes) => {
+    expect(classes).toContain("data-[highlighted]:bg-accent");
+    expect(classes).toContain(
+      "forced-colors:data-[highlighted]:bg-[Highlight]",
+    );
+    expect(classes).toContain(
+      "forced-colors:data-[highlighted]:text-[HighlightText]",
+    );
+  });
+
+  it("keeps the command item selected state", () => {
+    const classes = menuItemVariants();
+
+    expect(classes).toContain("aria-selected:bg-accent");
+    expect(classes).toContain("forced-colors:aria-selected:bg-[Highlight]");
+  });
+});

package/src/components/ui/badge.tsx

@@ -6,20 +6,22 @@ import * as React from "react";
 import { cn } from "@/utils/cn";
 
 const badgeVariants = cva(
-  "inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 forced-color-adjust-none",
   {
     variants: {
       variant: {
         default:
-          "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground",
-        defaultOutline: "bg-(--blue-2) border-(--blue-8) text-(--blue-11)",
+          "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground forced-colors:bg-[Highlight] forced-colors:border-[Highlight] forced-colors:text-[HighlightText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+        defaultOutline:
+          "bg-(--blue-2) border-(--blue-8) text-(--blue-11) forced-colors:bg-[Canvas] forced-colors:border-[Highlight] forced-colors:text-[CanvasText]",
         secondary:
-          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground forced-colors:bg-[ButtonFace] forced-colors:border-[ButtonText] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
         destructive:
-          "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3)",
+          "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3) forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
         success:
-          "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3)",
-        outline: "text-foreground",
+          "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3) forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+        outline:
+          "text-foreground forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText]",
       },
     },
     defaultVariants: {

package/src/components/ui/button.tsx

@@ -14,6 +14,7 @@ const buttonVariants = cva(
   cn(
     "disabled:opacity-50 disabled:pointer-events-none",
     "inline-flex items-center justify-center rounded-md text-sm font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+    "forced-color-adjust-none forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText] forced-colors:disabled:border-[GrayText] forced-colors:disabled:text-[GrayText]",
   ),
   {
     variants: {

package/src/components/ui/combobox.tsx

@@ -201,7 +201,7 @@ export const Combobox = <TValue,>({
             id={id}
             type="button"
             className={cn(
-              "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid",
+              "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-primary focus-visible:shadow-md-solid",
               disabled && "cursor-not-allowed opacity-50",
               className,
             )}

package/src/components/ui/date-input.tsx

@@ -29,7 +29,7 @@ const DateSegment = ({ className, ...props }: AriaDateSegmentProps) => {
           /* Disabled */
           "data-disabled:cursor-not-allowed data-disabled:opacity-50",
           /* Focused */
-          "data-focused:bg-accent data-focused:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          "data-focused:bg-accent data-focused:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
           /* Invalid */
           "data-invalid:data-focused:bg-destructive data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive",
           className,