DateField

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

The input-shaped shell hosting the editable date segments. Same hairline + focus + aria-invalid recipe as Input.root, with the row of DateFieldInput.root segments laid out as flex items inside; sizes pick the standard h-vueda-control* tier from base.css § Control sizing. The read-only treatment swaps to bg-muted/50 so a frozen date field reads as the same surface family as a read-only text input.

Vue component: DateField

Slot	Default classes	Description
root	callback	The input-shaped shell hosting the editable date segments. Same hairline + focus + aria-invalid recipe as Input.root, with the row of DateFieldInput.root segments laid out as flex items inside; sizes pick the standard h-vueda-control* tier from base.css § Control sizing. The read-only treatment swaps to bg-muted/50 so a frozen date field reads as the same surface family as a read-only text input.

root

The input-shaped shell hosting the editable date segments. Same hairline + focus + aria-invalid recipe as Input.root, with the row of DateFieldInput.root segments laid out as flex items inside; sizes pick the standard h-vueda-control* tier from base.css § Control sizing. The read-only treatment swaps to bg-muted/50 so a frozen date field reads as the same surface family as a read-only text input.

Callback:

({ size }) => ({
            class: [
                // Shell and surface.
                "dark:bg-input/30 flex w-full items-center rounded-vueda-field hairline bg-transparent text-sm shadow-vueda-control transition-shadow",

                // Focus, read-only, and disabled states.
                "focus-within:hairline-ring focus-within:focus-ring-shadow data-[readonly]:bg-muted/50 disabled:cursor-not-allowed disabled:opacity-50",
                "aria-invalid:hairline-destructive focus-within:aria-invalid:focus-ring-shadow-destructive",

                // Size classes.
                {
                    "h-vueda-control px-vueda-control-px": !size || size === "default",
                    "h-vueda-control-sm px-vueda-control-px-sm": size === "sm",
                    "h-vueda-control-lg px-vueda-control-px-lg": size === "lg",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/controls/DateField.theme.js:18