DialogContent

Source: client/lib/theme/vueda-tailwind/shell/index.js

The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens.

Vue component: DialogContent

Slot	Default classes	Description
root	callback	The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens.
close	3 classes	The close control inside the dialog surface. It stays low-emphasis until hover or focus and uses the shared ring color for keyboard focus.

root

The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens.

Callback:

({ fullScreen }) => {
            const geometry = fullScreen
                ? [
                      // Full-screen layout.
                      "inset-0 h-dvh w-full max-w-none gap-0 rounded-none border-0 p-0",
                  ]
                : [
                      // Centered modal layout.
                      "top-[50%] left-[50%] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4",
                      "rounded-vueda-modal overlay-hairline overlay-hairline-elevated p-6 sm:max-w-lg",
                  ];
            return {
                class: [
                    // Surface and motion.
                    "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

                    // Shared positioning and layout.
                    "fixed z-50 grid duration-200",

                    ...geometry,
                ],
            };
        }

Source: client/lib/theme/vueda-tailwind/shell/DialogContent.theme.js:18

close

The close control inside the dialog surface. It stays low-emphasis until hover or focus and uses the shared ring color for keyboard focus.

Default classes:

data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4
rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:focus-ring disabled:pointer-events-none
text-sm leading-none

Source: client/lib/theme/vueda-tailwind/shell/DialogContent.theme.js:44