@marimo-team/frontend 0.24.1-dev99 → 0.24.2-dev129

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -12,6 +12,7 @@ import { MockRequestClient } from "@/__mocks__/requests";
 import { aiCompletionCellAtom } from "@/core/ai/state";
 import type { CellActions } from "@/core/cells/cells";
 import { notebookAtom } from "@/core/cells/cells";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import { signatureHintField } from "@/core/codemirror/completion/signature-hint";
 import {
   configOverridesAtom,
@@ -20,6 +21,8 @@ import {
 } from "@/core/config/config";
 import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
+import { variablesAtom } from "@/core/variables/state";
+import type { Variables } from "@/core/variables/types";
 import type { CellActionsDropdownHandle } from "../../cell/cell-actions";
 import {
   useCellEditorNavigationProps,
@@ -421,6 +424,33 @@ describe("useCellNavigationProps", () => {
       });
     });
 
+    it("should add an import before and a SQL cell after when 'q' is pressed", () => {
+      store.set(variablesAtom, {} as Variables);
+
+      const { result } = renderWithProvider(() =>
+        useCellNavigationProps(mockCellId, options),
+      );
+
+      act(() => {
+        result.current.onKeyDown?.(Mocks.keyboardEvent({ key: "q" }));
+      });
+
+      expect(mockCellActions.createNewCell).toHaveBeenNthCalledWith(
+        1,
+        expect.objectContaining({
+          cellId: mockCellId,
+          before: true,
+          code: "import marimo as mo",
+        }),
+      );
+      expect(mockCellActions.createNewCell).toHaveBeenNthCalledWith(2, {
+        cellId: mockCellId,
+        before: false,
+        autoFocus: true,
+        code: LanguageAdapters.sql.defaultCode,
+      });
+    });
+
     it("should move to top cell when Cmd+ArrowUp is pressed (or Ctrl)", () => {
       const { result } = renderWithProvider(() =>
         useCellNavigationProps(mockCellId, options),

package/src/components/editor/navigation/navigation.ts

@@ -12,6 +12,7 @@ import { useMemo } from "react";
 import { mergeProps, useFocusWithin, useKeyboard } from "react-aria";
 import { DATA_FOR_CELL_ID } from "@/components/data-table/cell-utils";
 import { aiCompletionCellAtom } from "@/core/ai/state";
+import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { cellIdsAtom, notebookAtom, useCellActions } from "@/core/cells/cells";
 import { useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
@@ -26,6 +27,7 @@ import {
   closeSignatureHint,
   signatureHintField,
 } from "@/core/codemirror/completion/signature-hint";
+import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
 import {
   hotkeysAtom,
   isAiFeatureEnabled,
@@ -551,6 +553,24 @@ export function useCellNavigationProps(
           actions.createNewCell({ cellId, before: false, autoFocus: true });
           return true;
         },
+        "command.createSqlCellAfter": (cellId) => {
+          if (Events.hasModifier(evt)) {
+            return false;
+          }
+          maybeAddMarimoImport({
+            autoInstantiate: true,
+            createNewCell: actions.createNewCell,
+            fromCellId: cellId,
+            before: true,
+          });
+          actions.createNewCell({
+            cellId,
+            before: false,
+            autoFocus: true,
+            code: LanguageAdapters.sql.defaultCode,
+          });
+          return true;
+        },
         "cell.delete": () => {
           // Only handle if destructive_delete is enabled
           if (!userConfig.keymap.destructive_delete) {

package/src/components/forms/form.tsx

@@ -60,15 +60,17 @@ interface Props<T extends FieldValues> {
   form: UseFormReturn<T>;
   schema: z.ZodType;
   path?: Path<T>;
-  renderers: FormRenderer<T>[] | undefined;
+  renderers: readonly FormRenderer<T>[] | undefined;
   children?: React.ReactNode;
 }
 
+const EMPTY_RENDERERS: readonly never[] = [];
+
 export const ZodForm = <T extends FieldValues>({
   schema,
   form,
   path = "" as Path<T>,
-  renderers = [],
+  renderers = EMPTY_RENDERERS,
   children,
 }: Props<T>) => {
   return (
@@ -83,7 +85,7 @@ export interface RenderZodSchemaOptions<T extends FieldValues, S> {
   schema: z.ZodType<S>;
   form: UseFormReturn<T>;
   path: Path<T>;
-  renderers: FormRenderer<T>[];
+  renderers: readonly FormRenderer<T>[];
 }
 
 export function renderZodSchema<T extends FieldValues, S>({
@@ -516,7 +518,7 @@ const FormArray = ({
   schema: z.ZodType;
   form: UseFormReturn<any>;
   path: Path<any>;
-  renderers: FormRenderer[];
+  renderers: readonly FormRenderer[];
   minLength?: number;
 }) => {
   const { label, description } = FieldOptions.parse(schema.description || "");

package/src/components/home/components.tsx

@@ -169,6 +169,7 @@ export const ResourceLinks: React.FC = () => {
             key={resource.title}
             href={resource.url}
             target="_blank"
+            aria-label={`${resource.title}: ${resource.description}`}
             className="flex items-start gap-3 py-3 px-3 rounded-lg border hover:bg-accent/20 transition-colors shadow-xs"
           >
             <resource.icon className="w-5 h-5 mt-1.5 text-primary" />

package/src/components/static-html/share-modal.tsx

@@ -21,13 +21,14 @@ import { Input } from "../ui/input";
 import { Tooltip } from "../ui/tooltip";
 
 const BASE_URL = "https://static.marimo.app";
-
 export const ShareStaticNotebookModal: React.FC<{
   onClose: () => void;
 }> = ({ onClose }) => {
   const [slug, setSlug] = useState("");
   const { exportAsHTML } = useRequestClient();
-  // 4 character random string
+
+  // Keep one random suffix for the lifetime of the modal.
+  // oxlint-disable-next-line react/purity
   const randomHash = useMemo(() => Math.random().toString(36).slice(2, 6), []);
 
   // Globally unique path

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,

package/src/components/ui/dialog.tsx

@@ -42,6 +42,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "forced-color-adjust-none forced-colors:bg-[CanvasText] forced-colors:opacity-50",
       className,
     )}
     {...props}
@@ -63,13 +64,14 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-sm animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-2xl sm:mx-4 sm:rounded-lg sm:zoom-in-90 sm:data-[state=open]:slide-in-from-bottom-0",
+        "forced-color-adjust-none forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
         className,
       )}
       {...restoreFocus}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

package/src/components/ui/fullscreen.tsx

@@ -4,7 +4,7 @@ import type { Popover } from "radix-ui";
 
 type PopoverContentProps = Popover.PopoverContentProps;
 
-import React, { useState } from "react";
+import React, { type RefObject, useState, useSyncExternalStore } from "react";
 import { isInVscodeExtension } from "@/core/vscode/is-in-vscode";
 import { useEventListener } from "@/hooks/useEventListener";
 
@@ -27,6 +27,48 @@ export function useFullScreenElement() {
   return fullScreenElement;
 }
 
+const fullScreenSubscribers = new Set<() => void>();
+
+function notifyFullScreenSubscribers() {
+  for (const subscriber of fullScreenSubscribers) {
+    subscriber();
+  }
+}
+
+/**
+ * One document listener serves every subscriber, so the cost of a full screen
+ * transition does not grow with the number of mounted components.
+ */
+function subscribeToFullScreen(onStoreChange: () => void) {
+  if (fullScreenSubscribers.size === 0) {
+    document.addEventListener("fullscreenchange", notifyFullScreenSubscribers);
+  }
+  fullScreenSubscribers.add(onStoreChange);
+
+  return () => {
+    fullScreenSubscribers.delete(onStoreChange);
+    if (fullScreenSubscribers.size === 0) {
+      document.removeEventListener(
+        "fullscreenchange",
+        notifyFullScreenSubscribers,
+      );
+    }
+  };
+}
+
+/**
+ * Whether the given element is the full screen element.
+ *
+ * The hook returns a boolean, so a component re-renders only when its own
+ * element enters or leaves full screen.
+ */
+export function useIsFullScreen(ref: RefObject<Element | null>): boolean {
+  return useSyncExternalStore(subscribeToFullScreen, () => {
+    const fullScreenElement = document.fullscreenElement;
+    return fullScreenElement !== null && fullScreenElement === ref.current;
+  });
+}
+
 /**
  * HOC wrapping a Portal component to use the
  * full screen element as the container if we are in full screen mode

package/src/components/ui/input.tsx

@@ -17,6 +17,10 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   endAdornment?: React.ReactNode;
 };
 
+const DEFAULT_SEARCH_ICON = (
+  <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+);
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, endAdornment, ...props }, ref) => {
     const icon = props.icon;
@@ -120,7 +124,7 @@ export const SearchInput = React.forwardRef<
     {
       className,
       rootClassName,
-      icon = <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />,
+      icon = DEFAULT_SEARCH_ICON,
       clearable = true,
       ...props
     },

package/src/components/ui/links.tsx

@@ -16,7 +16,8 @@ export const ExternalLink = ({
     | `https://links.marimo.app/${string}`
     | `https://wandb.ai/${string}`
     | `https://portal.azure.com/${string}`
-    | `https://opencode.ai/${string}`;
+    | `https://opencode.ai/${string}`
+    | `https://pydantic.dev/${string}`;
   children: React.ReactNode;
 }) => {
   return (

package/src/components/ui/menu-items.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { cn } from "@/utils/cn";
 
 export const menuContentCommon = cva(
-  "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+  "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md forced-color-adjust-none forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
   {
     variants: {
       subcontent: {
@@ -16,7 +16,7 @@ export const menuContentCommon = cva(
 );
 
 export const menuSubTriggerVariants = cva(
-  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground forced-color-adjust-none forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText] forced-colors:data-[state=open]:bg-[Highlight] forced-colors:data-[state=open]:text-[HighlightText]",
   {
     variants: {
       inset: {
@@ -27,11 +27,11 @@ export const menuSubTriggerVariants = cva(
 );
 
 export const MENU_ITEM_DISABLED =
-  "data-disabled:pointer-events-none data-disabled:opacity-50";
+  "data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:data-disabled:text-[GrayText]";
 
 export const menuControlVariants = cva(
   cn(
-    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground",
+    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground forced-color-adjust-none forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText]",
     MENU_ITEM_DISABLED,
   ),
   { variants: {} },
@@ -54,7 +54,7 @@ export const menuLabelVariants = cva("px-2 py-1.5 text-sm font-semibold", {
 
 export const menuItemVariants = cva(
   cn(
-    "menu-item relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden",
+    "menu-item relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden forced-color-adjust-none forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText] forced-colors:aria-selected:bg-[Highlight] forced-colors:aria-selected:text-[HighlightText]",
     MENU_ITEM_DISABLED,
   ),
   {
@@ -64,13 +64,13 @@ export const menuItemVariants = cva(
       },
       variant: {
         default:
-          "focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground",
+          "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground",
         danger:
-          "focus:bg-(--red-5) focus:text-(--red-12) aria-selected:bg-(--red-5) aria-selected:text-(--red-12)",
+          "data-[highlighted]:bg-(--red-5) data-[highlighted]:text-(--red-12) aria-selected:bg-(--red-5) aria-selected:text-(--red-12)",
         muted:
-          "focus:bg-muted/70 focus:text-muted-foreground aria-selected:bg-muted/70 aria-selected:text-muted-foreground",
+          "data-[highlighted]:bg-muted/70 data-[highlighted]:text-muted-foreground aria-selected:bg-muted/70 aria-selected:text-muted-foreground",
         success:
-          "focus:bg-(--grass-3) focus:text-(--grass-11) aria-selected:bg-(--grass-3) aria-selected:text-(--grass-11)",
+          "data-[highlighted]:bg-(--grass-3) data-[highlighted]:text-(--grass-11) aria-selected:bg-(--grass-3) aria-selected:text-(--grass-11)",
         disabled: "text-muted-foreground",
       },
     },

package/src/components/ui/native-select.tsx

@@ -6,12 +6,12 @@ import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 
 export const selectStyles = cva(
-  "flex h-6 w-fit mb-1 items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
+  "flex h-6 w-fit mb-1 items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText]",
   {
     variants: {
       variant: {
         default:
-          "shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid",
+          "shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]",
         ghost: "opacity-70 hover:opacity-100 focus:opacity-100",
       },
     },

package/src/components/ui/navigation.tsx

@@ -56,7 +56,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex rounded-md bg-background px-4 py-2 text-lg font-medium text-(--slate-12) transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
+  "group inline-flex rounded-md bg-background px-4 py-2 text-lg font-medium text-(--slate-12) transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
   {
     variants: {
       orientation: {