Base container for form controls that composes label, messages, counter, icons, and progress into a unified structure.

Field centralizes the visual representation management of input fields, handles focus and validation states, coordinates auxiliary element positioning, and provides a consistent API for building any type of inputs. It serves as the fundamental foundation for creating consistent forms with slot support, control icons, and subcomponent integration.

**Core capabilities:**

- Subcomponent composition (FieldLabel, FieldMessage, FieldCounter, Progress)
- State management (focus, disabled, readonly, selected, block)
- Slot coordination (caption, prefix, suffix, leading, trailing)
- Validation highlighting based on validationMessage and forceShowMessage
- Control icons with customizable visibility (cancel, arrows)
- Flexible counter positioning via counterTop
- Built-in helpers for sizing and icons (FieldSize, FieldIcons)
- Loading progress integration and skeleton state

**Typical use cases:**

- Base container for Input, Select, Textarea, and other form controls
- Building custom form components with unified styling
- Creating fields with validation and character counters
- Developing component libraries with consistent UI

```html
<script setup>
import { ref } from 'vue'
import { Field } from '@dxtmisha/constructor'

const value = ref('')

// Field provides structure and management
</script>

<template>
  <Field
    label="Username"
    helper-message="Enter your name"
    :counter="value.length"
    counter-max="50"
  >
    <template #default="{ id, className }">
      <input
        :id="id"
        :class="className"
        v-model="value"
        maxlength="50"
      />
    </template>
  </Field>
</template>
```

> Field is a constructor container: it does not handle data input directly, but organizes structure, classes, and auxiliary element display for any type of input fields.
