/**
 * `<field-ui>` — Labeled field wrapper. Composes a <label for="…"> with a form control (input-ui, select-ui, textarea-ui, etc.) placed in the default slot, plus optional [slot="trailing"] and [slot="action"] regions. Auto-mints an id on the slotted control when missing so clicking the label focuses the control — an accessibility upgrade over setting label="…" on the control directly, which has no [for] binding. Two layouts — stacked (default) and inline (the `inline` mode attribute collapses everything to a single row).
 *
 * @see https://ui-kit.exe.xyz/site/components/field
 *
 * Type declarations generated by scripts/build/dts-codegen.mjs from
 * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
 * run `npm run build:components`, then `npm run codegen:dts` to
 * regenerate; or hand-author this file fully if rich event types are
 * needed beyond what the yaml `events:` block can express.
 */

import { UIElement } from '../../core/element.js';

export class UIField extends UIElement {
  /** Renders a "*" marker on the label. Does not itself enforce validation — the slotted control's own `required` attr does that; this is a visual signal only. */
  required: boolean;
  /** Label alignment within its grid area. `start` (default) — label is left-aligned (leading edge). `end` — label is right-aligned (trailing edge), useful when stacking several `<field-ui>` in a form and aligning labels flush to the control column for better scanability. */
  align: 'start' | 'end';
  /** Help text rendered below the control in caption style. Wired into the slotted control's aria-describedby so screen readers announce it. Suppressed when `error` is set. */
  hint: string;
  /** Lay out label, trailing, control, and action on a single row instead of the stacked default (mode attribute — changes grid geometry, not tokens). Hint/error still render on their own row below. */
  inline: boolean;
  /** Label text rendered in the label row. */
  label: string;
}
