<script setup lang="ts">
withDefaults(defineProps<{message:string;kind?:'success'|'info'|'warning';visible?:boolean}>(),{kind:'success',visible:true})
</script>
<template><div v-if="visible" class="kbx-toast" :data-kind="kind" role="status" aria-live="polite">{{message}}</div></template>
<style scoped>.kbx-toast{display:inline-flex;max-width:420px;padding:8px 12px;border:1px solid var(--kbx-color-border);border-left:3px solid var(--kbx-color-success);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface);box-shadow:var(--kbx-shadow-overlay);font-size:var(--kbx-font-sm)}.kbx-toast[data-kind="warning"]{border-left-color:var(--kbx-color-warning)}.kbx-toast[data-kind="info"]{border-left-color:var(--kbx-color-primary)}</style>
