<script setup lang="ts">
import { computed } from 'vue'
import type { KbxFieldState } from '@kbx/contracts'
const props=withDefaults(defineProps<{modelValue?:string|null;label:string;required?:boolean;readonly?:boolean;disabled?:boolean;error?:string;warning?:string;helpText?:string;state?:KbxFieldState;placeholder?:string;rows?:number;maxlength?:number}>(),{modelValue:'',rows:3,state:'default'})
const emit=defineEmits<{ 'update:modelValue':[string] }>()
const uid=`kbx-textarea-${Math.random().toString(36).slice(2)}`;const messageId=`${uid}-message`
const effectiveState=computed(()=>props.error?'error':props.warning?'warning':props.state)
const message=computed(()=>props.error||props.warning||props.helpText||'')
</script>
<template><div class="kbx-field" :data-state="effectiveState"><label :for="uid">{{label}}<span v-if="required" aria-hidden="true"> *</span></label><textarea :id="uid" :value="modelValue??''" :required="required" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" :rows="rows" :maxlength="maxlength" :aria-invalid="Boolean(error)" :aria-describedby="message?messageId:undefined" @input="emit('update:modelValue',($event.target as HTMLTextAreaElement).value)"/><span v-if="message" :id="messageId" class="kbx-field__message" :role="error?'alert':undefined">{{message}}</span></div></template>
<style scoped>.kbx-field{display:grid;grid-template-columns:var(--kbx-label-width) minmax(0,1fr);gap:var(--kbx-space-2);align-items:start;font-size:var(--kbx-font-md)}.kbx-field label{padding-top:var(--kbx-space-2);font-weight:500}.kbx-field textarea{min-height:var(--kbx-textarea-min-height);resize:vertical;border:var(--kbx-border-width) solid var(--kbx-color-border-strong);border-radius:var(--kbx-radius-sm);padding:var(--kbx-space-2) var(--kbx-space-3);font:inherit;background:var(--kbx-color-surface);color:var(--kbx-color-text)}.kbx-field[data-state="changed"] textarea{border-color:var(--kbx-color-changed-border);background:var(--kbx-color-changed-surface)}.kbx-field[data-state="warning"] textarea{border-color:var(--kbx-color-warning-border);background:var(--kbx-color-warning-surface)}.kbx-field[data-state="ai-suggested"] textarea{border-color:var(--kbx-color-ai-border);background:var(--kbx-color-ai-surface)}.kbx-field[data-state="error"] textarea{border-color:var(--kbx-color-danger);background:var(--kbx-color-danger-surface)}.kbx-field textarea[readonly]{background:var(--kbx-color-surface-muted)}.kbx-field textarea:disabled{background:var(--kbx-color-surface-subtle);color:var(--kbx-color-text-muted)}.kbx-field__message{grid-column:2;color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs)}.kbx-field[data-state="warning"] .kbx-field__message{color:var(--kbx-color-warning-text)}.kbx-field[data-state="error"] .kbx-field__message{color:var(--kbx-color-danger)}.kbx-field[data-state="ai-suggested"] .kbx-field__message{color:var(--kbx-color-ai-text)}</style>
