fix: Add whitespace when appending/prepending icon in uui-input

[nathanwoulfe]

Description

When rendering an icon in the prepend or append slot in the uui-input component, the icon was lacking whitespace:

Changes here add whitespace (Append example has inline background color and left-padding):

For simplicity, the icon has a left-margin when prepended, and a right margin when appended, to move it off the input edge in both cases. Additional styling would need to depend on the context (ie an appended icon with a background color would need additional padding on the left side to separate the input text), which would need to be managed in the specific implementation.

Vertical alignment relies on the icon not being slotted directly, but using an enclosing element (this is the existing behaviour before this change):

<div
  slot="append"
  style="background:#f3f3f3; padding-left:var(--uui-size-2, 6px)">
  <uui-icon-registry-essential>
    <uui-icon name="delete"></uui-icon>
  </uui-icon-registry-essential>
</div>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)