<script setup lang="ts">
import { computed, useId } from 'vue'
const props = defineProps<{ label: string; inputId?: string; required?: boolean; error?: string; help?: string }>()
const generatedId = useId()
const resolvedId = computed(() => props.inputId ?? `ks-field-${generatedId}`)
const messageId = computed(() => props.error || props.help ? `${resolvedId.value}-message` : undefined)
</script>
<template>
  <div class="ks-field-shell" :data-invalid="Boolean(error) || undefined">
    <label :for="resolvedId">{{ label }} <span v-if="required" aria-hidden="true">*</span></label>
    <slot :input-id="resolvedId" :described-by="messageId" :invalid="Boolean(error)" :required="Boolean(required)" />
    <small v-if="error || help" :id="messageId" :class="{ 'ks-danger-text': error }" :role="error ? 'alert' : undefined">{{ error ?? help }}</small>
  </div>
</template>
<style scoped>
.ks-field-shell{display:grid;gap:var(--ks-space-1)}
label{font-weight:650} small{color:var(--ks-color-neutral-600)}
</style>
