fix(FieldLabel): remove the gap between label and description

[ernestt]

Summary

A field's label and its description now sit flush against each other, with no gap between them.

FieldLabel returned a fragment, so the <label> and the description <span> came out as bare siblings of whatever column happened to hold them. The space between them was therefore set by that parent's gap — the same declaration that separates the label group from the control below it. No caller could close the pair without also pulling the control up against the description, and each had picked its own value: Field 4px, CheckboxInput and Switch 2px.

The pair now shares a wrapper of its own, so the space between them is theirs to set. This is one change in FieldLabel, not a change across ~20 input components — every input reaches it through Field.

Why

Requested against this reference, where the label and description read as a single block:

Before / after

Measured in Chromium as description.top - label.bottom:

	label → description	description → control
TextInput	4px → 0px	4px → 4px
Field	4px → 0px	4px → 4px
CheckboxInput	2px → 0px	n/a — control sits beside the label
Switch	2px → 0px	n/a — control sits beside the label

Only the label/description pair closes up. The description → control gap is unchanged at 4px, so fields keep their existing rhythm.

Implementation notes

• The label and description are wrapped in a flex column with no gap. Field's 4px containerGap is untouched — it now spaces the label group from the control instead of also splitting the label from its description.
• CheckboxInput and Switch each carried their own 2px label wrapper to do this job locally. The shared wrapper makes those redundant, so both are removed and all three callers now agree.
• A hidden label group takes display: contents, so the wrapper box leaves the caller's layout entirely and the sr-only label and description stay out of flow exactly as before — a hidden label still costs no space and draws no gap. The description keeps its own srOnly class.
• No API change: no new or changed props, no export changes.

Test plan

• vitest over Field/, CheckboxInput/, Switch/ — 5 files, 156 tests pass (covers isLabelHidden, group labels, description click-forwarding, aria-describedby wiring).
• Gaps measured in a real browser via Playwright against Storybook, before and after — table above.
• Verified the description → control gap is unchanged in the same run.
• Reviewer: visual pass over the WithDescription stories for Field, TextInput, CheckboxInput, Switch.

---

_{Screenshots are hosted on the throwaway branch assets/core-field-label-description-gap to keep this PR's diff code-only. Safe to delete once merged.}

Made with Cursor

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 28, 2026 11:47pm

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

CheckboxInput _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	324	-
Complexity	N/A	Very High (38)	-

Field _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	789	-
Complexity	N/A	Very High (49)	-

Switch _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	500	-
Complexity	N/A	Very High (46)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

4 of 686 shot(s) changed. View the report

To accept these exact frames: /accept-visual 33221383949/1 <reason>

A change here is a question, not a failure: check whether the after is the
picture you intended. If it is, say so in the PR — the release gate's baseline
is updated deliberately, and this check never rewrites it.

component	story	theme	mode	pixels
Field	Status Variants	stone	dark	29,949
Field	Status Variants	stone	light	29,649
Field	Status Variants	butter	light	27,511
Field	Status Variants	butter	dark	25,278

Field — Status Variants — stone dark

Before	After	Diff

Field — Status Variants — stone light

Before	After	Diff

Field — Status Variants — butter light

Before	After	Diff

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[ernestt]

/accept-visual 33221383949/1 All four changed frames are the same story (Field Status Variants) in four themes, and the diff is pure vertical translation: each description moves up 4px to sit flush under its label, so the three stacked fields shift 4px, 8px and 12px. No colour, border, size or text changed, and the description to input gap stays 4px.

[github-actions]

Visual changes accepted for 91c99ee24135. A new push invalidates this approval; after merge, the reviewed AFTER frames must reproduce before the baseline is promoted.

[xinzi-bot]

Automated review found no blockers at the current head. FieldLabel now owns label-description spacing while preserving the control gap; exact-head tests, accessibility/RTL checks, and accepted visual evidence are green.

[Automated review]