<script setup lang="ts">
withDefaults(
  defineProps<{ color?: string; size?: number; glow?: boolean }>(),
  { color: 'var(--ok)', size: 8, glow: true },
)
</script>

<template>
  <span
    class="dot"
    :style="{
      width: size + 'px',
      height: size + 'px',
      background: color,
      boxShadow: glow ? `0 0 0 3px ${color}22` : 'none',
    }"
  />
</template>

<style scoped>
.dot { display: inline-block; border-radius: 999px; flex-shrink: 0; }
</style>
