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

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/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: {

package/src/components/ui/range-slider.tsx

@@ -132,7 +132,7 @@ const RangeSlider = React.forwardRef<
         "relative flex touch-none select-none hover:cursor-pointer",
         "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-center",
         "data-[orientation=vertical]:h-full data-[orientation=vertical]:justify-center",
-        "data-disabled:cursor-not-allowed",
+        "data-disabled:cursor-not-allowed forced-color-adjust-none",
         className,
       )}
       {...props}
@@ -142,6 +142,7 @@ const RangeSlider = React.forwardRef<
         data-testid="track"
         className={cn(
           "relative grow overflow-hidden rounded-full bg-slate-200 dark:bg-accent/60",
+          "forced-colors:border forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace]",
           "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full",
           "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
         )}
@@ -150,6 +151,7 @@ const RangeSlider = React.forwardRef<
           data-testid="range"
           className={cn(
             "absolute bg-blue-500 dark:bg-primary",
+            "forced-colors:bg-[Highlight] forced-colors:data-disabled:bg-[GrayText]",
             "data-[orientation=horizontal]:h-full",
             "data-[orientation=vertical]:w-full",
             "data-disabled:opacity-50",
@@ -165,7 +167,7 @@ const RangeSlider = React.forwardRef<
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
               data-testid="thumb"
-              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:data-disabled:border-[GrayText]"
               onFocus={openActions.setTrue}
               onBlur={openActions.setFalse}
               onMouseEnter={openActions.setTrue}
@@ -186,7 +188,7 @@ const RangeSlider = React.forwardRef<
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
               data-testid="thumb"
-              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:data-disabled:border-[GrayText]"
               onFocus={openActions.setTrue}
               onBlur={openActions.setFalse}
               onMouseEnter={openActions.setTrue}

package/src/components/ui/select.tsx

@@ -125,7 +125,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText]",
       MENU_ITEM_DISABLED,
       className,
     )}

package/src/components/ui/sheet.tsx

@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
         {...props}
       >
         {children}
-        <SheetPrimitive.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-secondary">
+        <SheetPrimitive.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-secondary">
           <Cross2Icon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

package/src/components/ui/toast.tsx

@@ -26,15 +26,16 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const VARIANT_CLASSES = {
-  default: "bg-background border",
+  default:
+    "bg-background border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
   danger:
-    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error",
+    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
 } as const satisfies Record<string, string>;
 
 type ToastVariant = keyof typeof VARIANT_CLASSES;
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full forced-color-adjust-none",
   {
     variants: {
       variant: VARIANT_CLASSES,
@@ -76,7 +77,8 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus-visible:group-[.destructive]:ring-destructive",
+      "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]",
       className,
     )}
     {...props}
@@ -91,7 +93,8 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
+      "forced-colors:text-[CanvasText] forced-colors:hover:text-[CanvasText] forced-colors:group-[.destructive]:text-[CanvasText] forced-colors:hover:group-[.destructive]:text-[CanvasText]",
       className,
     )}
     toast-close=""

package/src/components/ui/toaster.tsx

@@ -84,8 +84,8 @@ const ToastItem = ({
           className="h-4 w-4"
           buttonClassName={cn(
             "absolute right-8 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
-            "hover:text-foreground focus:opacity-100 focus:outline-hidden group-hover:opacity-100",
-            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+            "hover:text-foreground focus:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group-hover:opacity-100",
+            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
           )}
           value={() =>
             descriptionRef.current?.innerText ??

package/src/css/globals.css

@@ -151,6 +151,34 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .marimo,
+  .marimo::before,
+  .marimo::after,
+  .marimo *,
+  .marimo *::before,
+  .marimo *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+  }
+
+  .marimo .running-app-icon {
+    visibility: visible !important;
+    animation-name: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .marimo :focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;

package/src/hooks/useEventListener.ts

@@ -17,7 +17,7 @@ export function isRefObject<T>(target: unknown): target is RefObject<T | null> {
 }
 
 export function useEventListener<K extends keyof DocumentEventMap>(
-  targetValue: Document,
+  targetValue: Document | null,
   type: K,
   listener: (ev: DocumentEventMap[K]) => unknown,
   options?: boolean | AddEventListenerOptions,

package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_26_-form-item"
             type="button"
@@ -88,7 +88,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_28_-form-item"
             type="button"
@@ -155,7 +155,7 @@ exports[`renderZodSchema > should render a form column_conversion 1`] = `
             aria-autocomplete="none"
             aria-controls="radix-_r_e_"
             aria-expanded="false"
-            class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+            class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
             data-placeholder=""
             data-state="closed"
             dir="ltr"
@@ -204,7 +204,7 @@ exports[`renderZodSchema > should render a form column_conversion 1`] = `
           aria-autocomplete="none"
           aria-controls="radix-_r_g_"
           aria-expanded="false"
-          class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+          class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
           data-placeholder=""
           data-state="closed"
           dir="ltr"
@@ -337,7 +337,7 @@ exports[`renderZodSchema > should render a form expand_dict 1`] = `
             aria-autocomplete="none"
             aria-controls="radix-_r_2r_"
             aria-expanded="false"
-            class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+            class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
             data-placeholder=""
             data-state="closed"
             dir="ltr"
@@ -406,7 +406,7 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_2o_-form-item"
             type="button"
@@ -539,7 +539,7 @@ exports[`renderZodSchema > should render a form filter_rows 1`] = `
           </div>
           <div>
             <button
-              class="disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background opacity-80 hover:opacity-100 active:opacity-100 h-7 px-2 rounded-md text-xs hover:text-accent-foreground"
+              class="disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center 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] opacity-80 hover:opacity-100 active:opacity-100 h-7 px-2 rounded-md text-xs hover:text-accent-foreground"
               data-testid="marimo-plugin-data-frames-add-array-item"
             >
               <svg
@@ -604,7 +604,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_1o_-form-item"
             type="button"
@@ -660,7 +660,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_1q_-form-item"
             type="button"
@@ -710,7 +710,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-autocomplete="none"
           aria-controls="radix-_r_1t_"
           aria-expanded="false"
-          class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+          class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
           data-placeholder=""
           data-state="closed"
           dir="ltr"
@@ -812,7 +812,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_3a_-form-item"
             type="button"
@@ -868,7 +868,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_3c_-form-item"
             type="button"
@@ -924,7 +924,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_3e_-form-item"
             type="button"
@@ -974,7 +974,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-autocomplete="none"
           aria-controls="radix-_r_3h_"
           aria-expanded="false"
-          class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+          class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
           data-placeholder=""
           data-state="closed"
           dir="ltr"
@@ -1039,7 +1039,7 @@ exports[`renderZodSchema > should render a form rename_column 1`] = `
             aria-autocomplete="none"
             aria-controls="radix-_r_6_"
             aria-expanded="false"
-            class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+            class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
             data-placeholder=""
             data-state="closed"
             dir="ltr"
@@ -1217,7 +1217,7 @@ exports[`renderZodSchema > should render a form sample_rows 1`] = `
       class="flex flex-row align-start"
     >
       <button
-        class="disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-input shadow-xs active:shadow-none h-7 px-2 rounded-md text-xs"
+        class="disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center 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] bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-input shadow-xs active:shadow-none h-7 px-2 rounded-md text-xs"
         data-testid="marimo-plugin-data-frames-random-number-button"
       >
         <svg
@@ -1319,7 +1319,7 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_3_-form-item"
             type="button"
@@ -1371,7 +1371,7 @@ exports[`renderZodSchema > should render a form shuffle_rows 1`] = `
       class="flex flex-row align-start"
     >
       <button
-        class="disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-input shadow-xs active:shadow-none h-7 px-2 rounded-md text-xs"
+        class="disabled:opacity-50 disabled:pointer-events-none inline-flex items-center justify-center 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] bg-secondary text-secondary-foreground hover:bg-secondary/80 border border-input shadow-xs active:shadow-none h-7 px-2 rounded-md text-xs"
         data-testid="marimo-plugin-data-frames-random-number-button"
       >
         <svg
@@ -1436,7 +1436,7 @@ exports[`renderZodSchema > should render a form sort_column 1`] = `
             aria-autocomplete="none"
             aria-controls="radix-_r_1e_"
             aria-expanded="false"
-            class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+            class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
             data-placeholder=""
             data-state="closed"
             dir="ltr"
@@ -1607,7 +1607,7 @@ exports[`renderZodSchema > should render a form unique 1`] = `
             aria-disabled="false"
             aria-expanded="false"
             aria-haspopup="dialog"
-            class="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 min-w-[180px]"
+            class="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 min-w-[180px]"
             data-state="closed"
             id="_r_31_-form-item"
             type="button"
@@ -1657,7 +1657,7 @@ exports[`renderZodSchema > should render a form unique 1`] = `
           aria-autocomplete="none"
           aria-controls="radix-_r_34_"
           aria-expanded="false"
-          class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+          class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
           data-placeholder=""
           data-state="closed"
           dir="ltr"
@@ -1711,7 +1711,7 @@ exports[`renders custom forms column_id 1`] = `
         aria-autocomplete="none"
         aria-controls="radix-_r_3q_"
         aria-expanded="false"
-        class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+        class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
         data-placeholder=""
         data-state="closed"
         dir="ltr"
@@ -1767,7 +1767,7 @@ exports[`renders custom forms column_id_array 1`] = `
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="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 min-w-[180px]"
+        class="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 min-w-[180px]"
         data-state="closed"
         id="_r_40_-form-item"
         type="button"
@@ -1818,7 +1818,7 @@ exports[`renders custom forms column_id_dot_array 1`] = `
         aria-disabled="false"
         aria-expanded="false"
         aria-haspopup="dialog"
-        class="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 min-w-[180px]"
+        class="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 min-w-[180px]"
         data-state="closed"
         id="_r_42_-form-item"
         type="button"
@@ -1872,7 +1872,7 @@ exports[`renders custom forms column_id_optional 1`] = `
         aria-autocomplete="none"
         aria-controls="radix-_r_45_"
         aria-expanded="false"
-        class="flex h-6 w-fit 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 shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid mb-0 min-w-[180px]"
+        class="flex h-6 w-fit 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] 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] mb-0 min-w-[180px]"
         data-placeholder=""
         data-state="closed"
         dir="ltr"

package/dist/assets/alert-dialog-D_btUJmY.js

@@ -1,11 +0,0 @@
-import{a as e}from"./rolldown-runtime-B0Z9INg1.js";import{t}from"./react-CBDbhulC.js";import{t as n}from"./compiler-runtime-CYIjoINj.js";import{i as r,o as i,r as a}from"./useEventListener-92uWqz-P.js";import{t as o}from"./cn-ldLVeaqm.js";import{t as s}from"./jsx-runtime-B74pBk57.js";import{C as c,S as l,_ as u,c as d,d as ee,f as te,m as ne,o as re,r as ie,s as ae,u as oe,v as f,w as p,x as m,y as se}from"./fullscreen-BFfuaW3H.js";import{n as h}from"./button-MlJ5qApt.js";var g=e(t(),1),_=s(),v=`Dialog`,[y,b]=c(v),[ce,x]=y(v),le=e=>{let{__scopeDialog:t,children:n,open:r,defaultOpen:i,onOpenChange:a,modal:o=!0}=e,s=g.useRef(null),c=g.useRef(null),[l,d]=se({prop:r,defaultProp:i??!1,onChange:a,caller:v});return(0,_.jsx)(ce,{scope:t,triggerRef:s,contentRef:c,contentId:u(),titleId:u(),descriptionId:u(),open:l,onOpenChange:d,onOpenToggle:g.useCallback(()=>d(e=>!e),[d]),modal:o,children:n})};le.displayName=v;var ue=`DialogTrigger`,S=g.forwardRef((e,t)=>{let{__scopeDialog:n,...r}=e,a=x(ue,n),o=i(t,a.triggerRef);return(0,_.jsx)(p.button,{type:`button`,"aria-haspopup":`dialog`,"aria-expanded":a.open,"aria-controls":a.contentId,"data-state":L(a.open),...r,ref:o,onClick:m(e.onClick,a.onOpenToggle)})});S.displayName=ue;var C=`DialogPortal`,[de,w]=y(C,{forceMount:void 0}),T=e=>{let{__scopeDialog:t,forceMount:n,children:r,container:i}=e,a=x(C,t);return(0,_.jsx)(de,{scope:t,forceMount:n,children:g.Children.map(r,e=>(0,_.jsx)(f,{present:n||a.open,children:(0,_.jsx)(ee,{asChild:!0,container:i,children:e})}))})};T.displayName=C;var E=`DialogOverlay`,D=g.forwardRef((e,t)=>{let n=w(E,e.__scopeDialog),{forceMount:r=n.forceMount,...i}=e,a=x(E,e.__scopeDialog);return a.modal?(0,_.jsx)(f,{present:r||a.open,children:(0,_.jsx)(pe,{...i,ref:t})}):null});D.displayName=E;var fe=a(`DialogOverlay.RemoveScroll`),pe=g.forwardRef((e,t)=>{let{__scopeDialog:n,...r}=e,i=x(E,n);return(0,_.jsx)(d,{as:fe,allowPinchZoom:!0,shards:[i.contentRef],children:(0,_.jsx)(p.div,{"data-state":L(i.open),...r,ref:t,style:{pointerEvents:`auto`,...r.style}})})}),O=`DialogContent`,k=g.forwardRef((e,t)=>{let n=w(O,e.__scopeDialog),{forceMount:r=n.forceMount,...i}=e,a=x(O,e.__scopeDialog);return(0,_.jsx)(f,{present:r||a.open,children:a.modal?(0,_.jsx)(me,{...i,ref:t}):(0,_.jsx)(he,{...i,ref:t})})});k.displayName=O;var me=g.forwardRef((e,t)=>{let n=x(O,e.__scopeDialog),r=g.useRef(null),a=i(t,n.contentRef,r);return g.useEffect(()=>{let e=r.current;if(e)return ae(e)},[]),(0,_.jsx)(A,{...e,ref:a,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:m(e.onCloseAutoFocus,e=>{e.preventDefault(),n.triggerRef.current?.focus()}),onPointerDownOutside:m(e.onPointerDownOutside,e=>{let t=e.detail.originalEvent,n=t.button===0&&t.ctrlKey===!0;(t.button===2||n)&&e.preventDefault()}),onFocusOutside:m(e.onFocusOutside,e=>e.preventDefault())})}),he=g.forwardRef((e,t)=>{let n=x(O,e.__scopeDialog),r=g.useRef(!1),i=g.useRef(!1);return(0,_.jsx)(A,{...e,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:t=>{e.onCloseAutoFocus?.(t),t.defaultPrevented||(r.current||n.triggerRef.current?.focus(),t.preventDefault()),r.current=!1,i.current=!1},onInteractOutside:t=>{e.onInteractOutside?.(t),t.defaultPrevented||(r.current=!0,t.detail.originalEvent.type===`pointerdown`&&(i.current=!0));let a=t.target;n.triggerRef.current?.contains(a)&&t.preventDefault(),t.detail.originalEvent.type===`focusin`&&i.current&&t.preventDefault()}})}),A=g.forwardRef((e,t)=>{let{__scopeDialog:n,trapFocus:r,onOpenAutoFocus:a,onCloseAutoFocus:o,...s}=e,c=x(O,n),l=g.useRef(null),u=i(t,l);return oe(),(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(te,{asChild:!0,loop:!0,trapped:r,onMountAutoFocus:a,onUnmountAutoFocus:o,children:(0,_.jsx)(ne,{role:`dialog`,id:c.contentId,"aria-describedby":c.descriptionId,"aria-labelledby":c.titleId,"data-state":L(c.open),...s,ref:u,onDismiss:()=>c.onOpenChange(!1)})}),(0,_.jsxs)(_.Fragment,{children:[(0,_.jsx)(_e,{titleId:c.titleId}),(0,_.jsx)(ye,{contentRef:l,descriptionId:c.descriptionId})]})]})}),j=`DialogTitle`,M=g.forwardRef((e,t)=>{let{__scopeDialog:n,...r}=e,i=x(j,n);return(0,_.jsx)(p.h2,{id:i.titleId,...r,ref:t})});M.displayName=j;var N=`DialogDescription`,P=g.forwardRef((e,t)=>{let{__scopeDialog:n,...r}=e,i=x(N,n);return(0,_.jsx)(p.p,{id:i.descriptionId,...r,ref:t})});P.displayName=N;var F=`DialogClose`,I=g.forwardRef((e,t)=>{let{__scopeDialog:n,...r}=e,i=x(F,n);return(0,_.jsx)(p.button,{type:`button`,...r,ref:t,onClick:m(e.onClick,()=>i.onOpenChange(!1))})});I.displayName=F;function L(e){return e?`open`:`closed`}var R=`DialogTitleWarning`,[ge,z]=l(R,{contentName:O,titleName:j,docsSlug:`dialog`}),_e=({titleId:e})=>{let t=z(R),n=`\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
-
-If you want to hide the \`${t.titleName}\`, you can wrap it with our VisuallyHidden component.
-
-For more information, see https://radix-ui.com/primitives/docs/components/${t.docsSlug}`;return g.useEffect(()=>{e&&(document.getElementById(e)||console.error(n))},[n,e]),null},ve=`DialogDescriptionWarning`,ye=({contentRef:e,descriptionId:t})=>{let n=`Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${z(ve).contentName}}.`;return g.useEffect(()=>{let r=e.current?.getAttribute(`aria-describedby`);t&&r&&(document.getElementById(t)||console.warn(n))},[n,e,t]),null},B=le,V=S,H=T,U=D,W=k,G=M,K=P,q=I,J=`AlertDialog`,[be,xe]=c(J,[b]),Y=b(),X=e=>{let{__scopeAlertDialog:t,...n}=e,r=Y(t);return(0,_.jsx)(B,{...r,...n,modal:!0})};X.displayName=J;var Se=`AlertDialogTrigger`,Ce=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,...r}=e,i=Y(n);return(0,_.jsx)(V,{...i,...r,ref:t})});Ce.displayName=Se;var we=`AlertDialogPortal`,Te=e=>{let{__scopeAlertDialog:t,...n}=e,r=Y(t);return(0,_.jsx)(H,{...r,...n})};Te.displayName=we;var Ee=`AlertDialogOverlay`,De=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,...r}=e,i=Y(n);return(0,_.jsx)(U,{...i,...r,ref:t})});De.displayName=Ee;var Z=`AlertDialogContent`,[Oe,ke]=be(Z),Ae=r(`AlertDialogContent`),je=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,children:r,...a}=e,o=Y(n),s=g.useRef(null),c=i(t,s),l=g.useRef(null);return(0,_.jsx)(ge,{contentName:Z,titleName:Me,docsSlug:`alert-dialog`,children:(0,_.jsx)(Oe,{scope:n,cancelRef:l,children:(0,_.jsxs)(W,{role:`alertdialog`,...o,...a,ref:c,onOpenAutoFocus:m(a.onOpenAutoFocus,e=>{e.preventDefault(),l.current?.focus({preventScroll:!0})}),onPointerDownOutside:e=>e.preventDefault(),onInteractOutside:e=>e.preventDefault(),children:[(0,_.jsx)(Ae,{children:r}),(0,_.jsx)(Be,{contentRef:s})]})})})});je.displayName=Z;var Me=`AlertDialogTitle`,Ne=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,...r}=e,i=Y(n);return(0,_.jsx)(G,{...i,...r,ref:t})});Ne.displayName=Me;var Pe=`AlertDialogDescription`,Fe=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,...r}=e,i=Y(n);return(0,_.jsx)(K,{...i,...r,ref:t})});Fe.displayName=Pe;var Ie=`AlertDialogAction`,Le=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,...r}=e,i=Y(n);return(0,_.jsx)(q,{...i,...r,ref:t})});Le.displayName=Ie;var Re=`AlertDialogCancel`,ze=g.forwardRef((e,t)=>{let{__scopeAlertDialog:n,...r}=e,{cancelRef:a}=ke(Re,n),o=Y(n),s=i(t,a);return(0,_.jsx)(q,{...o,...r,ref:s})});ze.displayName=Re;var Be=({contentRef:e})=>{let t=`\`${Z}\` requires a description for the component to be accessible for screen reader users.
-
-You can add a description to the \`${Z}\` by passing a \`${Pe}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
-
-Alternatively, you can use your own component as a description by assigning it an \`id\` and passing the same value to the \`aria-describedby\` prop in \`${Z}\`. If the description is confusing or duplicative for sighted users, you can use the \`@radix-ui/react-visually-hidden\` primitive as a wrapper around your description component.
-
-For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;return g.useEffect(()=>{document.getElementById(e.current?.getAttribute(`aria-describedby`))||console.warn(t)},[t,e]),null},Ve=X,He=Ce,Ue=Te,We=De,Ge=je,Q=Le,Ke=ze,qe=Ne,Je=Fe,$=n();function Ye(){let e=(0,$.c)(3),[t,n]=(0,g.useState)(null),r;e[0]===Symbol.for(`react.memo_cache_sentinel`)?(r=()=>{n(document.activeElement)},e[0]=r):r=e[0];let i=r,a;return e[1]===t?a=e[2]:(a={onOpenAutoFocus:i,onCloseAutoFocus:e=>{document.activeElement===document.body&&(t instanceof HTMLElement&&t.focus(),e.preventDefault())}},e[1]=t,e[2]=a),a}var Xe=Ve,Ze=He,Qe=ie(({children:e,...t})=>(0,_.jsx)(Ue,{...t,children:(0,_.jsx)(re,{children:(0,_.jsx)(`div`,{className:`fixed inset-0 z-50 flex items-end justify-center sm:items-start sm:top-[15%]`,children:e})})}));Qe.displayName=Ue.displayName;var $e=g.forwardRef((e,t)=>{let n=(0,$.c)(9),r,i;if(n[0]!==e){let{className:t,children:a,...o}=e;r=t,i=o,n[0]=e,n[1]=r,n[2]=i}else r=n[1],i=n[2];let a;n[3]===r?a=n[4]:(a=o(`fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-opacity animate-in fade-in`,r),n[3]=r,n[4]=a);let s;return n[5]!==i||n[6]!==t||n[7]!==a?(s=(0,_.jsx)(We,{className:a,...i,ref:t}),n[5]=i,n[6]=t,n[7]=a,n[8]=s):s=n[8],s});$e.displayName=We.displayName;var et=g.forwardRef((e,t)=>{let n=(0,$.c)(11),r,i;n[0]===e?(r=n[1],i=n[2]):({className:r,...i}=e,n[0]=e,n[1]=r,n[2]=i);let a=Ye(),s;n[3]===Symbol.for(`react.memo_cache_sentinel`)?(s=(0,_.jsx)($e,{}),n[3]=s):s=n[3];let c;n[4]===r?c=n[5]:(c=o(`fixed z-50 grid w-full max-w-2xl scale-100 gap-4 border bg-background p-6 opacity-100 shadow-sm animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full`,r),n[4]=r,n[5]=c);let l;return n[6]!==i||n[7]!==t||n[8]!==a||n[9]!==c?(l=(0,_.jsxs)(Qe,{children:[s,(0,_.jsx)(Ge,{ref:t,className:c,...a,...i})]}),n[6]=i,n[7]=t,n[8]=a,n[9]=c,n[10]=l):l=n[10],l});et.displayName=Ge.displayName;var tt=e=>{let t=(0,$.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=o(`flex flex-col space-y-2 text-center sm:text-left`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,_.jsx)(`div`,{className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a};tt.displayName=`AlertDialogHeader`;var nt=e=>{let t=(0,$.c)(8),n,r;t[0]===e?(n=t[1],r=t[2]):({className:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let i;t[3]===n?i=t[4]:(i=o(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,n),t[3]=n,t[4]=i);let a;return t[5]!==r||t[6]!==i?(a=(0,_.jsx)(`div`,{className:i,...r}),t[5]=r,t[6]=i,t[7]=a):a=t[7],a};nt.displayName=`AlertDialogFooter`;var rt=g.forwardRef((e,t)=>{let n=(0,$.c)(9),r,i;n[0]===e?(r=n[1],i=n[2]):({className:r,...i}=e,n[0]=e,n[1]=r,n[2]=i);let a;n[3]===r?a=n[4]:(a=o(`text-lg font-semibold`,r),n[3]=r,n[4]=a);let s;return n[5]!==i||n[6]!==t||n[7]!==a?(s=(0,_.jsx)(qe,{ref:t,className:a,...i}),n[5]=i,n[6]=t,n[7]=a,n[8]=s):s=n[8],s});rt.displayName=qe.displayName;var it=g.forwardRef((e,t)=>{let n=(0,$.c)(9),r,i;n[0]===e?(r=n[1],i=n[2]):({className:r,...i}=e,n[0]=e,n[1]=r,n[2]=i);let a;n[3]===r?a=n[4]:(a=o(`text-muted-foreground`,r),n[3]=r,n[4]=a);let s;return n[5]!==i||n[6]!==t||n[7]!==a?(s=(0,_.jsx)(Je,{ref:t,className:a,...i}),n[5]=i,n[6]=t,n[7]=a,n[8]=s):s=n[8],s});it.displayName=Je.displayName;var at=g.forwardRef((e,t)=>{let n=(0,$.c)(9),r,i;n[0]===e?(r=n[1],i=n[2]):({className:r,...i}=e,n[0]=e,n[1]=r,n[2]=i);let a;n[3]===r?a=n[4]:(a=o(h(),r),n[3]=r,n[4]=a);let s;return n[5]!==i||n[6]!==t||n[7]!==a?(s=(0,_.jsx)(Q,{ref:t,className:a,...i}),n[5]=i,n[6]=t,n[7]=a,n[8]=s):s=n[8],s});at.displayName=Q.displayName;var ot=g.forwardRef((e,t)=>{let n=(0,$.c)(9),r,i;n[0]===e?(r=n[1],i=n[2]):({className:r,...i}=e,n[0]=e,n[1]=r,n[2]=i);let a;n[3]===r?a=n[4]:(a=o(h({variant:`destructive`}),r),n[3]=r,n[4]=a);let s;return n[5]!==i||n[6]!==t||n[7]!==a?(s=(0,_.jsx)(Q,{ref:t,className:a,...i}),n[5]=i,n[6]=t,n[7]=a,n[8]=s):s=n[8],s});ot.displayName=`AlertDialogDestructiveAction`;var st=g.forwardRef((e,t)=>{let n=(0,$.c)(9),r,i;n[0]===e?(r=n[1],i=n[2]):({className:r,...i}=e,n[0]=e,n[1]=r,n[2]=i);let a;n[3]===r?a=n[4]:(a=o(h({variant:`secondary`}),`mt-2 sm:mt-0`,r),n[3]=r,n[4]=a);let s;return n[5]!==i||n[6]!==t||n[7]!==a?(s=(0,_.jsx)(Ke,{ref:t,className:a,...i}),n[5]=i,n[6]=t,n[7]=a,n[8]=s):s=n[8],s});st.displayName=Ke.displayName;export{B as _,it as a,tt as c,Ye as d,q as f,H as g,U as h,et as i,rt as l,K as m,at as n,ot as o,W as p,st as r,nt as s,Xe as t,Ze as u,G as v,V as y};