import { computed, useId } from 'vue';
const props = defineProps();
const generatedId = useId();
const resolvedId = computed(() => props.inputId ?? `ks-field-${generatedId}`);
const messageId = computed(() => props.error || props.help ? `${resolvedId.value}-message` : undefined);
const __VLS_ctx = {
    ...{},
    ...{},
    ...{},
    ...{},
};
let __VLS_components;
let __VLS_intrinsics;
let __VLS_directives;
__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
    ...{ class: "ks-field-shell" },
    'data-invalid': (Boolean(__VLS_ctx.error) || undefined),
});
/** @type {__VLS_StyleScopedClasses['ks-field-shell']} */ ;
__VLS_asFunctionalElement1(__VLS_intrinsics.label, __VLS_intrinsics.label)({
    for: (__VLS_ctx.resolvedId),
});
(__VLS_ctx.label);
if (__VLS_ctx.required) {
    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
        'aria-hidden': "true",
    });
}
var __VLS_0 = {
    inputId: (__VLS_ctx.resolvedId),
    describedBy: (__VLS_ctx.messageId),
    invalid: (Boolean(__VLS_ctx.error)),
};
if (__VLS_ctx.error || __VLS_ctx.help) {
    __VLS_asFunctionalElement1(__VLS_intrinsics.small, __VLS_intrinsics.small)({
        id: (__VLS_ctx.messageId),
        ...{ class: ({ 'ks-danger-text': __VLS_ctx.error }) },
        role: (__VLS_ctx.error ? 'alert' : undefined),
    });
    /** @type {__VLS_StyleScopedClasses['ks-danger-text']} */ ;
    (__VLS_ctx.error ?? __VLS_ctx.help);
}
// @ts-ignore
var __VLS_1 = __VLS_0;
// @ts-ignore
[error, error, error, error, error, error, resolvedId, resolvedId, label, required, messageId, messageId, help, help,];
const __VLS_base = (await import('vue')).defineComponent({
    __typeProps: {},
});
const __VLS_export = {};
export default {};
