chore: alinhar projeto às regras do agent

src/playground/indicador.playground.vue

@@ -0,0 +1,65 @@
+<template>
+  <section class="stack">
+    <h2>EliBadge (indicador)</h2>
+
+    <div class="row">
+      <EliBadge badge="3">
+        <v-icon>mdi-bell</v-icon>
+      </EliBadge>
+
+      <EliBadge badge="Novo" radius="pill" color="success">
+        <span class="chip">Mensagens</span>
+      </EliBadge>
+
+      <EliBadge dot :visible="true" color="error">
+        <v-icon>mdi-email</v-icon>
+      </EliBadge>
+    </div>
+
+    <div class="row">
+      <EliBadge badge="99+" :visible="mostrar" radius="12px">
+        <span class="chip">Toggle visible</span>
+      </EliBadge>
+
+      <EliBotao variant="outlined" @click="mostrar = !mostrar">
+        Alternar visible ({{ mostrar ? "mostrando" : "oculto" }})
+      </EliBotao>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { EliBadge } from "@/componentes/indicador";
+import { EliBotao } from "@/componentes/botao";
+
+export default defineComponent({
+  name: "IndicadorPlayground",
+  components: { EliBadge, EliBotao },
+  setup() {
+    const mostrar = ref(true);
+    return { mostrar };
+  },
+});
+</script>
+
+<style scoped>
+.stack {
+  display: grid;
+  gap: 16px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+
+.chip {
+  display: inline-flex;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+</style>