Enhance Textbox with leading and trailing "slots"

[bramsmulders]

We want to enhance the existing utrecht-textbox component by wrapping it in a utrecht-textbox-container that supports leading and trailing "slots". This will allow for more flexible and customizable layouts, such as adding icons, buttons, or other elements before or after the textbox. This is a prerequisite of the work for our clippy-combobox.

Requirements:

• utrecht-textbox-container should accept two slots/properties: leading and trailing.
• utrecht-textbox should remain the primary slot/child of the container.
• The slots should be optional and not affect the core functionality of utrecht-textbox.

Anatomy

+----------------------------------------+
|  [LEADING]  |  TEXTBOX  |  [TRAILING]  |
+----------------------------------------+

• [LEADING]: Optional content (e.g., icon, button).
• [TEXTBOX]: The existing utrecht-textbox component.
• [TRAILING]: Optional content (e.g., icon or button).

Acceptance Criteria:

• utrecht-textbox-container is implemented and documented.
• The leading and trailing slots/properties are functional and optional.
• The existing utrecht-textbox functionality remains unchanged.
• The component is backward compatible.

[bramsmulders]

Comment for self-reference:
I started exploring this functionality in #3112, everything works as expected aside from the following classes/mixins which cannot be applied to the TextboxContainer:

• utrecht-textbox--numeric
• utrecht-textbox--password
• utrecht-textbox--url,
• utrecht-textbox--placeholder-rtl
• utrecht-textbox--placeholder-ltr

Possible solution here is to have a containerClassName property on the container element and pass the className prop on to the input. The issue here is that the container is not always present, and some classes can only be applied to the container and some only to the input. Without renaming the classes (for backwards compatibility) there is no way for an implementer to know which classes have effect on which element.