2.1 KiB
CssField (eidos)
Visual wrapper over Soma's css-field spinbutton. Adds only chrome — size,
variant, color — and projects them as data-* for the recipe. Parsing,
validation, the unit whitelist, scrubbing, keyboard and Field integration are
owned by Soma.
<CssField bind:value allowedUnits={['px', 'rem', '%']} size="md" variant="surface" color="primary">
<CssField.DecrementTrigger>−</CssField.DecrementTrigger>
<CssField.Input />
<CssField.IncrementTrigger>+</CssField.IncrementTrigger>
</CssField>
Props (visual)
| Prop | Type | Default |
|---|---|---|
size |
ResponsiveProp<'xs' | 'sm' | 'md' | 'lg' | 'xl'> |
'md' |
variant |
'surface' | 'outline' | 'ghost' (ControlVariant) |
'surface' |
color |
ColorRole (8 roles) |
'primary' |
All Soma Provider props pass through (value, allowedUnits, keywords, validate, min/max, step, …).
Recipe
Tokens live under the css-field recipe key in src/uix/eidos/lib/recipes/base.ts
(--css-field-*), re-mapped to internal --_css-field-* for the size/color cascade in
css-field.css. The control row reuses the same control-height / spacing tokens as
number-field. [data-invalid] tints the border with --color-risk-border;
[data-focused] / [data-scrubbing] raise the focus ring.
Baseline
No Air baseline — new component. Recipe cloned from number-field's with token renames.
Comparativa
See src/uix/soma/components/css-field/README.md for the cross-library feature table.
Visually it is a single-row control matching the input family (DateField / NumberField /
ColorField): border + control buttons + optional scrubber, 5 sizes × 3 variants × 8 colors.
Decisiones
- Subset:
sizexs..xl(text-input family),variant=ControlVariant,color= 8 roles. - Fixed control row height — triggers + scrubber inherit the resolved input height.
- No component-specific visual state beyond the Soma data-attrs (
data-invalid,data-focused,data-scrubbing).
Gaps
- A units-suffix affordance (showing the unit separately) is not provided — the unit lives inside the input text. diferir.