V13-FE-011: finalize search list layout slice

docs/Design/kbx-foundation-v36/packages/kbx-ui/src/components/KbxValidationSummary.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { KbxValidationError } from '@kbx/contracts'
+defineProps<{ errors: KbxValidationError[] }>()
+</script>
+<template>
+  <div v-if="errors.length" class="kbx-validation-summary" role="alert">
+    <strong>저장할 수 없습니다. {{ errors.length }}개 항목을 확인하세요.</strong>
+    <ul><li v-for="(error, i) in errors.slice(0,5)" :key="`${error.field}-${error.rowKey}-${i}`">{{ error.message }}</li></ul>
+  </div>
+</template>
+<style scoped>
+.kbx-validation-summary{border:var(--kbx-border-width) solid var(--kbx-color-danger-border);background:var(--kbx-color-danger-surface);padding:var(--kbx-space-2) var(--kbx-space-3);border-radius:var(--kbx-radius-sm);font-size:var(--kbx-font-sm);color:var(--kbx-color-text)}
+.kbx-validation-summary strong{color:var(--kbx-color-danger)}.kbx-validation-summary ul{margin:var(--kbx-space-1) 0 0 var(--kbx-space-5);padding:0}
+</style>