INLINE EDITABLE: Transparent input editing pattern
COMPOSES: Color tokens, spacing tokens, typography tokens
VARIANTS: Default | Compact (sm) | Group | Row
Notion/Linear-style inline editing where fields look like plain text at rest. On hover: subtle neutral tint. On focus: white background + blue border + focus ring. No mode switching — fields are always editable.
Section: Label + input in a flex row. Input is transparent at rest, tints on hover, shows border on focus.
<div class="tw-inline-editable"><label class="tw-inline-editable-label">...</label><input class="tw-inline-editable-input"></div>
Section: Multi-input row with type select + tel input + delete button. Delete button appears on row hover. Group hover tints all non-focused inputs.
<div class="tw-inline-editable-group">...</div>
Section: Stacked inputs with a 2-column row for Town + Postcode.
Uses .tw-inline-editable-row for side-by-side layout.
<div class="tw-inline-editable-row"><input ...><input ...></div>
Section: Tighter padding and smaller text for narrow contexts.
Add .tw-inline-editable-sm to the container.
<div class="tw-inline-editable-sm">...</div>
Section: Validation and disabled states.
.tw-is-invalid on input for validation. disabled attribute for locked fields.