SheetContent

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

The edge-attached sheet surface. It maps the side prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body.

Vue component: SheetContent

Slot	Default classes	Description
root	callback	The edge-attached sheet surface. It maps the side prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body.
close	3 classes	The close control inside a sheet. It stays visually quiet until hover or focus and uses the same keyboard focus outline as dialog close controls.

root

The edge-attached sheet surface. It maps the side prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body.

Callback:

({ side }) => {
            const sideClasses = {
                right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l-hairline sm:max-w-sm",
                left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r-hairline sm:max-w-sm",
                top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b-hairline",
                bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t-hairline",
            };
            return {
                class: [
                    // Surface and state motion.
                    "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out",

                    // Positioning and layout.
                    "fixed z-50 flex flex-col gap-4",

                    // Elevation and duration.
                    "shadow-vueda-overlay transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",

                    sideClasses[side] || sideClasses.right,
                ],
            };
        }

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

close

The close control inside a sheet. It stays visually quiet until hover or focus and uses the same keyboard focus outline as dialog close controls.

Default classes:

data-[state=open]:bg-secondary 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/SheetContent.theme.js:43