FieldSetRange

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

Card shell for paired lower and upper range fields, including nested-fieldset inset chrome.

Vue component: FieldSetRange

Slot	Default classes	Description
root	2 classes	Card shell for paired lower and upper range fields, including nested-fieldset inset chrome.
inner	2 classes	Responsive range grid that stacks on narrow viewports and splits into lower, separator, upper at sm.
header	flex items-baseline gap-1 2xs:gap-2 mb-1	Label row above the paired controls.
separator	2 classes	Visual separator between lower and upper bounds.
title	3 classes	Compact uppercase range title.
label	3 classes	Compact uppercase fallback label for the range group. See also: FieldSetRange.title.
field		Wrapper around each rendered range endpoint field.
choresPanel	3 classes	Fieldset-level description and messages panel below the paired controls.

root

Card shell for paired lower and upper range fields, including nested-fieldset inset chrome.

Default classes:

bg-card border-hairline rounded-vueda-card overflow-clip p-3
[[data-vueda-fieldset]_&]:border-0 [[data-vueda-fieldset]_&]:shadow-[inset_0_0_0_var(--vueda-hairline-width)_var(--border)]

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:18

inner

Responsive range grid that stacks on narrow viewports and splits into lower, separator, upper at sm.

Default classes:

grid items-center gap-1 2xs:gap-2
grid-cols-1 sm:grid-cols-[1fr_16px_1fr]

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:26

header

Label row above the paired controls.

Default classes:

flex items-baseline gap-1 2xs:gap-2 mb-1

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:30

separator

Visual separator between lower and upper bounds.

Default classes:

hidden sm:flex items-center justify-center text-muted-foreground
h-8 w-4 select-none leading-none

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:34

title

Compact uppercase range title.

Default classes:

leading-none
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:41

label

Compact uppercase fallback label for the range group. See also: FieldSetRange.title.

Default classes:

leading-none
text-[length:var(--vueda-text-micro)] font-semibold uppercase tracking-[0.06em]
text-muted-foreground

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:49

field

Wrapper around each rendered range endpoint field.

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:57

choresPanel

Fieldset-level description and messages panel below the paired controls.

Default classes:

-mx-3 -mb-3 mt-3 px-3 py-2 border-t-hairline
bg-[color-mix(in_oklab,var(--muted)_15%,var(--card))]
flex flex-col gap-1

Source: client/lib/theme/vueda-tailwind/form/FieldSetRange.theme.js:63