From 6336dfa24c714c8c624dbf67d620b28650366f1a Mon Sep 17 00:00:00 2001
From: Rodrigo Castro <redrodrigo.dev@gmail.com>
Date: Wed, 4 Nov 2026 21:22:47 -0300
Subject: [PATCH] =?UTF-8?q?Adiciona=20biblioteca=20de=20componentes=20base?=
 =?UTF-8?q?=20do=20tema=20Sert=C3=A3o=20(#50)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tema DaisyUI mapeado aos tokens --ph-*, 18 componentes Ph* acessíveis
(botão, campos, badge, card, abas, tabela, modal, painel, avisos...),
catálogo em /_dev/componentes, testes de componente, de contraste e e2e
de teclado/foco, e docs/UI-KIT.md.
---
 front-admin/CLAUDE.md                         |   2 +
 .../app/application/locales/pt-br/index.ts    |   2 +
 .../app/application/locales/pt-br/ui.ts       |  20 +++
 .../shared/components/ui/Badge.test.ts        |  21 +++
 .../shared/components/ui/Badge.vue            |  33 ++++
 .../shared/components/ui/Button.test.ts       |  46 +++++
 .../shared/components/ui/Button.vue           |  49 ++++++
 .../application/shared/components/ui/Card.vue |  17 ++
 .../shared/components/ui/Checkbox.test.ts     |  23 +++
 .../shared/components/ui/Checkbox.vue         |  36 ++++
 .../shared/components/ui/Chip.test.ts         |  16 ++
 .../application/shared/components/ui/Chip.vue |  19 ++
 .../shared/components/ui/Drawer.test.ts       |  21 +++
 .../shared/components/ui/Drawer.vue           |  38 ++++
 .../shared/components/ui/EmptyState.vue       |  19 ++
 .../shared/components/ui/Input.test.ts        |  52 ++++++
 .../shared/components/ui/Input.vue            |  54 ++++++
 .../application/shared/components/ui/Kpi.vue  |  13 ++
 .../shared/components/ui/Modal.test.ts        |  35 ++++
 .../shared/components/ui/Modal.vue            |  38 ++++
 .../shared/components/ui/Pagination.test.ts   |  26 +++
 .../shared/components/ui/Pagination.vue       |  53 ++++++
 .../shared/components/ui/Select.test.ts       |  30 ++++
 .../shared/components/ui/Select.vue           |  60 +++++++
 .../shared/components/ui/Skeleton.vue         |  19 ++
 .../shared/components/ui/Stripe.vue           |   7 +
 .../shared/components/ui/Table.vue            |  13 ++
 .../shared/components/ui/Tabs.test.ts         |  57 ++++++
 .../application/shared/components/ui/Tabs.vue |  79 +++++++++
 .../shared/components/ui/Textarea.test.ts     |  23 +++
 .../shared/components/ui/Textarea.vue         |  52 ++++++
 .../shared/components/ui/ToastHost.test.ts    |  59 +++++++
 .../shared/components/ui/ToastHost.vue        |  45 +++++
 .../shared/components/ui/misc.test.ts         |  74 ++++++++
 .../shared/components/ui/tokens.test.ts       |  50 ++++++
 .../shared/composables/useDialog.ts           |  23 +++
 .../shared/composables/useToast.ts            |  14 ++
 front-admin/app/assets/css/main.css           |  51 +++++-
 front-admin/app/layouts/default.vue           |   1 +
 front-admin/app/pages/_dev/componentes.vue    | 165 ++++++++++++++++++
 front-admin/app/stores/toastStore.ts          |  52 ++++++
 front-admin/docs/UI-KIT.md                    |  35 ++++
 front-admin/e2e/ui-catalog.spec.ts            |  68 ++++++++
 front-admin/nuxt.config.ts                    |   9 +-
 front-admin/playwright.config.ts              |   3 +
 45 files changed, 1620 insertions(+), 2 deletions(-)
 create mode 100644 front-admin/app/application/locales/pt-br/ui.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Badge.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Badge.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Button.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Button.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Card.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Checkbox.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Checkbox.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Chip.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Chip.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Drawer.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Drawer.vue
 create mode 100644 front-admin/app/application/shared/components/ui/EmptyState.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Input.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Input.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Kpi.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Modal.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Modal.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Pagination.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Pagination.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Select.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Select.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Skeleton.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Stripe.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Table.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Tabs.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Tabs.vue
 create mode 100644 front-admin/app/application/shared/components/ui/Textarea.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/Textarea.vue
 create mode 100644 front-admin/app/application/shared/components/ui/ToastHost.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/ToastHost.vue
 create mode 100644 front-admin/app/application/shared/components/ui/misc.test.ts
 create mode 100644 front-admin/app/application/shared/components/ui/tokens.test.ts
 create mode 100644 front-admin/app/application/shared/composables/useDialog.ts
 create mode 100644 front-admin/app/application/shared/composables/useToast.ts
 create mode 100644 front-admin/app/pages/_dev/componentes.vue
 create mode 100644 front-admin/app/stores/toastStore.ts
 create mode 100644 front-admin/docs/UI-KIT.md
 create mode 100644 front-admin/e2e/ui-catalog.spec.ts

diff --git a/front-admin/CLAUDE.md b/front-admin/CLAUDE.md
index 8579377..d32ba98 100644
--- a/front-admin/CLAUDE.md
+++ b/front-admin/CLAUDE.md
@@ -6,6 +6,8 @@ Próximos módulos a construir, nesta ordem (ver `../docs/produto.md`): edição
 
 Design/protótipo das telas: [claude.ai/artifact/3B7ZWqjBQPDFZ5vhGgNs4N](https://claude.ai/artifact/3B7ZWqjBQPDFZ5vhGgNs4N#page-dcb81aee8d83).
 
+Kit de UI do tema Sertão (componentes `Ph*`, tokens, acessibilidade): [`docs/UI-KIT.md`](docs/UI-KIT.md). Use-o antes de criar markup próprio.
+
 Full layer rules live in [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md) — read that first, it's the actual convention document, not a summary. `.claude/rules/` covers what's specific to this being a template (which module is the reference, why `HttpClient` is shaped the way it is, the two different reasons something is "shared").
 
 `app/modules/login/` is the reference module — a complete, working example of every layer, with tests for each. Imitate its shape when creating a new module.
diff --git a/front-admin/app/application/locales/pt-br/index.ts b/front-admin/app/application/locales/pt-br/index.ts
index db21bc8..f09b385 100644
--- a/front-admin/app/application/locales/pt-br/index.ts
+++ b/front-admin/app/application/locales/pt-br/index.ts
@@ -1,7 +1,9 @@
 import login from '../../../modules/login/locales/pt-br'
+import ui from './ui'
 
 // Every module's locale is registered here — see docs/ARCHITECTURE.md,
 // "Registro obrigatório". Add one import + one key per new module.
 export default {
   login,
+  ui,
 }
diff --git a/front-admin/app/application/locales/pt-br/ui.ts b/front-admin/app/application/locales/pt-br/ui.ts
new file mode 100644
index 0000000..bf194ff
--- /dev/null
+++ b/front-admin/app/application/locales/pt-br/ui.ts
@@ -0,0 +1,20 @@
+// Textos do kit de UI compartilhado (app/application/shared/components/ui).
+export default {
+  loading: 'Carregando…',
+  required: 'obrigatório',
+  close: 'Fechar',
+  dismiss: 'Dispensar aviso',
+  pagination: 'Paginação',
+  previousPage: 'Página anterior',
+  nextPage: 'Próxima página',
+  page: (n: number) => `Página ${n}`,
+  selectPlaceholder: 'Selecione…',
+  notifications: 'Avisos',
+  statusLabels: {
+    ok: 'Tudo certo',
+    warn: 'Atenção',
+    danger: 'Problema',
+    info: 'Informação',
+    neutral: 'Neutro',
+  },
+}
diff --git a/front-admin/app/application/shared/components/ui/Badge.test.ts b/front-admin/app/application/shared/components/ui/Badge.test.ts
new file mode 100644
index 0000000..fbd20ed
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Badge.test.ts
@@ -0,0 +1,21 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Badge from './Badge.vue'
+
+describe('PhBadge', () => {
+  it.each(['ok', 'warn', 'danger', 'info', 'neutral'] as const)('renderiza o estado %s com texto', async (status) => {
+    const wrapper = await mountSuspended(Badge, { props: { status }, slots: { default: 'Pago' } })
+    expect(wrapper.attributes('data-status')).toBe(status)
+    expect(wrapper.text()).toBe('Pago')
+  })
+
+  it('mostra o ponto por padrão e o esconde do leitor de tela', async () => {
+    const wrapper = await mountSuspended(Badge, { slots: { default: 'Pago' } })
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(true)
+  })
+
+  it('pode ocultar o ponto', async () => {
+    const wrapper = await mountSuspended(Badge, { props: { dot: false }, slots: { default: 'Pago' } })
+    expect(wrapper.find('[aria-hidden="true"]').exists()).toBe(false)
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Badge.vue b/front-admin/app/application/shared/components/ui/Badge.vue
new file mode 100644
index 0000000..5c87bf0
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Badge.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export type BadgeStatus = 'ok' | 'warn' | 'danger' | 'info' | 'neutral'
+
+const props = withDefaults(defineProps<{ status?: BadgeStatus, dot?: boolean }>(), {
+  status: 'neutral',
+  dot: true,
+})
+
+// Classes completas (não montadas por string) para o Tailwind enxergá-las.
+const tone = computed(
+  () =>
+    ({
+      ok: 'bg-(--ph-ok-bg) text-(--ph-ok)',
+      warn: 'bg-(--ph-warn-bg) text-(--ph-warn)',
+      danger: 'bg-(--ph-danger-bg) text-(--ph-danger)',
+      info: 'bg-(--ph-info-bg) text-(--ph-info)',
+      neutral: 'bg-(--ph-surface-2) text-(--ph-ink-2)',
+    })[props.status],
+)
+</script>
+
+<template>
+  <span
+    class="inline-flex h-6.5 items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 text-xs font-medium"
+    :class="tone"
+    :data-status="status"
+  >
+    <span v-if="dot" class="size-1.5 rounded-full bg-current" aria-hidden="true" />
+    <slot />
+  </span>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Button.test.ts b/front-admin/app/application/shared/components/ui/Button.test.ts
new file mode 100644
index 0000000..bd6bf7e
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Button.test.ts
@@ -0,0 +1,46 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Button from './Button.vue'
+
+describe('PhButton', () => {
+  it('renderiza como botão do tipo "button" com a variante primária', async () => {
+    const wrapper = await mountSuspended(Button, { slots: { default: 'Salvar' } })
+    const el = wrapper.find('button')
+    expect(el.text()).toBe('Salvar')
+    expect(el.attributes('type')).toBe('button')
+    expect(el.classes()).toContain('btn-primary')
+  })
+
+  it.each([
+    ['secondary', 'btn-neutral'],
+    ['ghost', 'btn-ghost'],
+    ['danger', 'btn-error'],
+  ] as const)('aplica a variante %s', async (variant, cls) => {
+    const wrapper = await mountSuspended(Button, { props: { variant } })
+    expect(wrapper.find('button').classes()).toContain(cls)
+  })
+
+  it('desabilitado: não dispara clique e fica com o atributo disabled', async () => {
+    const wrapper = await mountSuspended(Button, { props: { disabled: true } })
+    expect(wrapper.find('button').attributes('disabled')).toBeDefined()
+  })
+
+  it('carregando: desabilita, marca aria-busy e avisa leitores de tela', async () => {
+    const wrapper = await mountSuspended(Button, { props: { loading: true } })
+    const el = wrapper.find('button')
+    expect(el.attributes('disabled')).toBeDefined()
+    expect(el.attributes('aria-busy')).toBe('true')
+    expect(el.text()).toContain('Carregando')
+  })
+
+  it('com "to" renderiza um link e não um botão', async () => {
+    const wrapper = await mountSuspended(Button, { props: { to: '/login' }, slots: { default: 'Entrar' } })
+    expect(wrapper.find('a').attributes('href')).toBe('/login')
+    expect(wrapper.find('button').exists()).toBe(false)
+  })
+
+  it('tem altura mínima de 44 px garantida pelo tema', async () => {
+    const wrapper = await mountSuspended(Button)
+    expect(wrapper.find('button').classes()).toContain('btn')
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Button.vue b/front-admin/app/application/shared/components/ui/Button.vue
new file mode 100644
index 0000000..3a1f1c4
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Button.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, resolveComponent } from 'vue'
+import locale from '@/application/locales/pt-br/ui'
+
+type Variant = 'primary' | 'secondary' | 'ghost' | 'danger'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: Variant
+    type?: 'button' | 'submit' | 'reset'
+    loading?: boolean
+    disabled?: boolean
+    block?: boolean
+    to?: string
+  }>(),
+  { variant: 'primary', type: 'button', loading: false, disabled: false, block: false, to: undefined },
+)
+
+const classes = computed(() => [
+  'btn',
+  {
+    primary: 'btn-primary',
+    secondary: 'btn-neutral btn-soft border-base-300',
+    ghost: 'btn-ghost border-base-300',
+    danger: 'btn-error',
+  }[props.variant],
+  { 'w-full': props.block },
+])
+
+const isLink = computed(() => !!props.to)
+const tag = computed(() => (isLink.value ? resolveComponent('NuxtLink') : 'button'))
+const blocked = computed(() => props.disabled || props.loading)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :to="isLink ? to : undefined"
+    :type="isLink ? undefined : type"
+    :class="classes"
+    :disabled="isLink ? undefined : blocked"
+    :aria-disabled="isLink && blocked ? 'true' : undefined"
+    :aria-busy="loading ? 'true' : undefined"
+  >
+    <span v-if="loading" class="loading loading-spinner loading-sm" aria-hidden="true" />
+    <span v-if="loading" class="sr-only">{{ locale.loading }}</span>
+    <slot />
+  </component>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Card.vue b/front-admin/app/application/shared/components/ui/Card.vue
new file mode 100644
index 0000000..2752dd9
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Card.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{ title?: string }>()
+</script>
+
+<template>
+  <section class="card border border-base-300 bg-base-100">
+    <div class="card-body gap-4 p-6">
+      <header v-if="title || $slots.actions" class="flex flex-wrap items-center justify-between gap-3">
+        <h2 v-if="title" class="text-lg font-semibold">{{ title }}</h2>
+        <div v-if="$slots.actions" class="flex items-center gap-2">
+          <slot name="actions" />
+        </div>
+      </header>
+      <slot />
+    </div>
+  </section>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Checkbox.test.ts b/front-admin/app/application/shared/components/ui/Checkbox.test.ts
new file mode 100644
index 0000000..d6a0575
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Checkbox.test.ts
@@ -0,0 +1,23 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Checkbox from './Checkbox.vue'
+
+describe('PhCheckbox', () => {
+  it('rótulo clicável ligado à caixa', async () => {
+    const wrapper = await mountSuspended(Checkbox, { props: { label: 'Mostrar no site' } })
+    expect(wrapper.find('label').attributes('for')).toBe(wrapper.find('input').attributes('id'))
+  })
+
+  it('emite true ao marcar', async () => {
+    const wrapper = await mountSuspended(Checkbox, { props: { label: 'Mostrar', modelValue: false } })
+    await wrapper.find('input').setValue(true)
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([true])
+  })
+
+  it('desabilitado, com dica descrevendo o campo', async () => {
+    const wrapper = await mountSuspended(Checkbox, { props: { label: 'Mostrar', hint: 'Pode mudar depois.', disabled: true } })
+    const input = wrapper.find('input')
+    expect(input.attributes('disabled')).toBeDefined()
+    expect(wrapper.find(`#${input.attributes('aria-describedby')}`).text()).toBe('Pode mudar depois.')
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Checkbox.vue b/front-admin/app/application/shared/components/ui/Checkbox.vue
new file mode 100644
index 0000000..679c564
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Checkbox.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    hint?: string
+    disabled?: boolean
+    id?: string
+  }>(),
+  { hint: undefined, disabled: false, id: undefined },
+)
+
+const model = defineModel<boolean>({ default: false })
+
+const autoId = useId()
+const fieldId = computed(() => props.id ?? `ph-${autoId}`)
+const hintId = computed(() => `${fieldId.value}-hint`)
+</script>
+
+<template>
+  <div class="flex min-h-11 items-start gap-3 py-2.5">
+    <input
+      :id="fieldId"
+      v-model="model"
+      type="checkbox"
+      class="checkbox checkbox-primary mt-0.5"
+      :disabled="disabled"
+      :aria-describedby="hint ? hintId : undefined"
+    >
+    <div class="flex flex-col">
+      <label :for="fieldId" class="cursor-pointer text-sm">{{ label }}</label>
+      <p v-if="hint" :id="hintId" class="text-xs text-(--ph-ink-3)">{{ hint }}</p>
+    </div>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Chip.test.ts b/front-admin/app/application/shared/components/ui/Chip.test.ts
new file mode 100644
index 0000000..cd1b700
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Chip.test.ts
@@ -0,0 +1,16 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Chip from './Chip.vue'
+
+describe('PhChip', () => {
+  it('expõe o estado selecionado por aria-pressed', async () => {
+    const wrapper = await mountSuspended(Chip, { props: { modelValue: true }, slots: { default: 'Todos' } })
+    expect(wrapper.find('button').attributes('aria-pressed')).toBe('true')
+  })
+
+  it('alterna ao clicar', async () => {
+    const wrapper = await mountSuspended(Chip, { props: { modelValue: false }, slots: { default: 'Pagos' } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([true])
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Chip.vue b/front-admin/app/application/shared/components/ui/Chip.vue
new file mode 100644
index 0000000..f290a08
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Chip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-pressed="model"
+    class="inline-flex min-h-9 items-center rounded-full border px-3.5 text-sm font-medium"
+    :class="
+      model
+        ? 'border-primary bg-primary text-primary-content'
+        : 'border-base-300 bg-base-100 text-(--ph-ink-2) hover:bg-base-200'
+    "
+    @click="model = !model"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Drawer.test.ts b/front-admin/app/application/shared/components/ui/Drawer.test.ts
new file mode 100644
index 0000000..b46bc99
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Drawer.test.ts
@@ -0,0 +1,21 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Drawer from './Drawer.vue'
+
+describe('PhDrawer', () => {
+  it('abre e fecha com v-model e fica ancorado à direita', async () => {
+    const wrapper = await mountSuspended(Drawer, { props: { title: 'Editar sessão', modelValue: false } })
+    const dialog = wrapper.find('dialog')
+    expect(dialog.classes()).toContain('modal-end')
+    await wrapper.setProps({ modelValue: true })
+    expect((dialog.element as HTMLDialogElement).open).toBe(true)
+  })
+
+  it('tem título como nome acessível e botão de fechar', async () => {
+    const wrapper = await mountSuspended(Drawer, { props: { title: 'Editar sessão', modelValue: true } })
+    const labelledBy = wrapper.find('dialog').attributes('aria-labelledby')
+    expect(wrapper.find(`#${labelledBy}`).text()).toBe('Editar sessão')
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Drawer.vue b/front-admin/app/application/shared/components/ui/Drawer.vue
new file mode 100644
index 0000000..ad4920a
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Drawer.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref, useId } from 'vue'
+import { useDialog } from '@/application/shared/composables/useDialog'
+import locale from '@/application/locales/pt-br/ui'
+
+defineProps<{ title: string }>()
+const open = defineModel<boolean>({ default: false })
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const titleId = `ph-${useId()}-title`
+useDialog(dialog, open)
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    class="modal modal-end"
+    :aria-labelledby="titleId"
+    @close="open = false"
+    @click.self="open = false"
+  >
+    <div class="modal-box flex h-full max-h-none w-full max-w-md flex-col gap-4 rounded-none bg-base-100">
+      <div class="flex items-start justify-between gap-4">
+        <h2 :id="titleId" class="text-lg font-semibold">{{ title }}</h2>
+        <button type="button" class="btn btn-ghost btn-square btn-sm" @click="open = false">
+          <span aria-hidden="true">✕</span>
+          <span class="sr-only">{{ locale.close }}</span>
+        </button>
+      </div>
+      <div class="grow overflow-y-auto text-sm">
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="flex flex-wrap justify-end gap-2">
+        <slot name="footer" />
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/EmptyState.vue b/front-admin/app/application/shared/components/ui/EmptyState.vue
new file mode 100644
index 0000000..de9c377
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/EmptyState.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ title: string, description?: string }>()
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3 px-4 py-10 text-center">
+    <div
+      v-if="$slots.icon"
+      class="flex size-14 items-center justify-center rounded-full bg-(--ph-surface-2) text-primary"
+    >
+      <slot name="icon" />
+    </div>
+    <h3 class="text-base font-semibold">{{ title }}</h3>
+    <p v-if="description" class="max-w-sm text-sm text-(--ph-ink-2)">{{ description }}</p>
+    <div v-if="$slots.default" class="mt-1">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Input.test.ts b/front-admin/app/application/shared/components/ui/Input.test.ts
new file mode 100644
index 0000000..a177a92
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Input.test.ts
@@ -0,0 +1,52 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Input from './Input.vue'
+
+describe('PhInput', () => {
+  it('associa o rótulo ao campo pelo id', async () => {
+    const wrapper = await mountSuspended(Input, { props: { label: 'Nome da edição' } })
+    const input = wrapper.find('input')
+    expect(wrapper.find('label').attributes('for')).toBe(input.attributes('id'))
+  })
+
+  it('atualiza o v-model ao digitar', async () => {
+    const wrapper = await mountSuspended(Input, {
+      props: { label: 'Nome', modelValue: '', 'onUpdate:modelValue': (v: string | number) => wrapper.setProps({ modelValue: v }) },
+    })
+    await wrapper.find('input').setValue('PHPeste 2027')
+    expect(wrapper.props('modelValue')).toBe('PHPeste 2027')
+  })
+
+  it('mostra a dica ligada ao campo por aria-describedby', async () => {
+    const wrapper = await mountSuspended(Input, { props: { label: 'Nome', hint: 'Aparece no site.' } })
+    const describedBy = wrapper.find('input').attributes('aria-describedby')
+    expect(describedBy).toBeTruthy()
+    expect(wrapper.find(`#${describedBy}`).text()).toBe('Aparece no site.')
+  })
+
+  it('erro: marca aria-invalid, anuncia como alerta e esconde a dica', async () => {
+    const wrapper = await mountSuspended(Input, {
+      props: { label: 'E-mail', hint: 'dica', error: 'E-mail inválido' },
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('aria-invalid')).toBe('true')
+    expect(input.classes()).toContain('input-error')
+    expect(wrapper.find('[role="alert"]').text()).toBe('E-mail inválido')
+    expect(wrapper.text()).not.toContain('dica')
+  })
+
+  it('desabilitado: o campo fica com o atributo disabled', async () => {
+    const wrapper = await mountSuspended(Input, { props: { label: 'Nome', disabled: true } })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it.each(['date', 'time', 'email'] as const)('aceita o tipo %s', async (type) => {
+    const wrapper = await mountSuspended(Input, { props: { label: 'Campo', type } })
+    expect(wrapper.find('input').attributes('type')).toBe(type)
+  })
+
+  it('obrigatório: indica no rótulo, sem depender só de cor', async () => {
+    const wrapper = await mountSuspended(Input, { props: { label: 'Data', required: true } })
+    expect(wrapper.find('label').text()).toContain('obrigatório')
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Input.vue b/front-admin/app/application/shared/components/ui/Input.vue
new file mode 100644
index 0000000..dea37b3
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Input.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import locale from '@/application/locales/pt-br/ui'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    type?: 'text' | 'email' | 'password' | 'number' | 'date' | 'time' | 'datetime-local' | 'search' | 'tel' | 'url'
+    placeholder?: string
+    hint?: string
+    error?: string | null
+    disabled?: boolean
+    required?: boolean
+    autocomplete?: string
+    id?: string
+  }>(),
+  { type: 'text', placeholder: undefined, hint: undefined, error: null, disabled: false, required: false, autocomplete: undefined, id: undefined },
+)
+
+const model = defineModel<string | number>({ default: '' })
+
+const autoId = useId()
+const inputId = computed(() => props.id ?? `ph-${autoId}`)
+const hintId = computed(() => `${inputId.value}-hint`)
+const errorId = computed(() => `${inputId.value}-error`)
+const describedBy = computed(() => {
+  if (props.error) return errorId.value
+  return props.hint ? hintId.value : undefined
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <label :for="inputId" class="text-sm font-medium">
+      {{ label }}
+      <span v-if="required" class="text-(--ph-ink-3) font-normal">({{ locale.required }})</span>
+    </label>
+    <input
+      :id="inputId"
+      v-model="model"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :autocomplete="autocomplete"
+      :aria-invalid="error ? 'true' : undefined"
+      :aria-describedby="describedBy"
+      class="input w-full"
+      :class="{ 'input-error': error }"
+    >
+    <p v-if="error" :id="errorId" role="alert" class="text-sm text-error">{{ error }}</p>
+    <p v-else-if="hint" :id="hintId" class="text-xs text-(--ph-ink-3)">{{ hint }}</p>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Kpi.vue b/front-admin/app/application/shared/components/ui/Kpi.vue
new file mode 100644
index 0000000..fb858e9
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Kpi.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{ label: string, value: string | number, hint?: string }>()
+</script>
+
+<template>
+  <div class="card border border-base-300 bg-base-100 px-6 py-5">
+    <dl class="flex flex-col gap-1">
+      <dt class="text-xs text-(--ph-ink-3)">{{ label }}</dt>
+      <dd class="text-3xl leading-tight font-semibold tabular-nums">{{ value }}</dd>
+      <dd v-if="hint" class="text-xs text-(--ph-ink-3)">{{ hint }}</dd>
+    </dl>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Modal.test.ts b/front-admin/app/application/shared/components/ui/Modal.test.ts
new file mode 100644
index 0000000..6a4adb2
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Modal.test.ts
@@ -0,0 +1,35 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Modal from './Modal.vue'
+
+describe('PhModal', () => {
+  it('fica fechado por padrão e abre com v-model', async () => {
+    const wrapper = await mountSuspended(Modal, { props: { title: 'Reembolsar', modelValue: false }, slots: { default: 'texto' } })
+    const dialog = wrapper.find('dialog').element as HTMLDialogElement
+    expect(dialog.open).toBe(false)
+    await wrapper.setProps({ modelValue: true })
+    expect(dialog.open).toBe(true)
+  })
+
+  it('nomeia o diálogo pelo título', async () => {
+    const wrapper = await mountSuspended(Modal, { props: { title: 'Reembolsar', modelValue: true } })
+    const labelledBy = wrapper.find('dialog').attributes('aria-labelledby')
+    expect(wrapper.find(`#${labelledBy}`).text()).toBe('Reembolsar')
+  })
+
+  it('o botão de fechar avisa quem usa o componente', async () => {
+    const wrapper = await mountSuspended(Modal, { props: { title: 'Reembolsar', modelValue: true } })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+
+  it('fecha ao clicar fora (no fundo) e mostra o rodapé quando existe', async () => {
+    const wrapper = await mountSuspended(Modal, {
+      props: { title: 'Reembolsar', modelValue: true },
+      slots: { footer: '<button>Confirmar</button>' },
+    })
+    expect(wrapper.text()).toContain('Confirmar')
+    await wrapper.find('dialog').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Modal.vue b/front-admin/app/application/shared/components/ui/Modal.vue
new file mode 100644
index 0000000..82c998c
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Modal.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref, useId } from 'vue'
+import { useDialog } from '@/application/shared/composables/useDialog'
+import locale from '@/application/locales/pt-br/ui'
+
+defineProps<{ title: string }>()
+const open = defineModel<boolean>({ default: false })
+
+const dialog = ref<HTMLDialogElement | null>(null)
+const titleId = `ph-${useId()}-title`
+useDialog(dialog, open)
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    class="modal"
+    :aria-labelledby="titleId"
+    @close="open = false"
+    @click.self="open = false"
+  >
+    <div class="modal-box flex max-w-lg flex-col gap-4 bg-base-100">
+      <div class="flex items-start justify-between gap-4">
+        <h2 :id="titleId" class="text-lg font-semibold">{{ title }}</h2>
+        <button type="button" class="btn btn-ghost btn-square btn-sm" @click="open = false">
+          <span aria-hidden="true">✕</span>
+          <span class="sr-only">{{ locale.close }}</span>
+        </button>
+      </div>
+      <div class="text-sm">
+        <slot />
+      </div>
+      <div v-if="$slots.footer" class="flex flex-wrap justify-end gap-2">
+        <slot name="footer" />
+      </div>
+    </div>
+  </dialog>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Pagination.test.ts b/front-admin/app/application/shared/components/ui/Pagination.test.ts
new file mode 100644
index 0000000..2c5c672
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Pagination.test.ts
@@ -0,0 +1,26 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Pagination from './Pagination.vue'
+
+describe('PhPagination', () => {
+  it('marca a página atual com aria-current', async () => {
+    const wrapper = await mountSuspended(Pagination, { props: { page: 2, pageCount: 9 } })
+    expect(wrapper.find('[aria-current="page"]').text()).toBe('2')
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Paginação')
+  })
+
+  it('emite a página escolhida e respeita os limites', async () => {
+    const wrapper = await mountSuspended(Pagination, { props: { page: 1, pageCount: 3 } })
+    const buttons = wrapper.findAll('button')
+    await buttons[buttons.length - 1]!.trigger('click')
+    expect(wrapper.emitted('update:page')?.at(-1)).toEqual([2])
+  })
+
+  it('desabilita "anterior" na primeira página e "próxima" na última', async () => {
+    const first = await mountSuspended(Pagination, { props: { page: 1, pageCount: 3 } })
+    expect(first.findAll('button')[0]!.attributes('disabled')).toBeDefined()
+    const last = await mountSuspended(Pagination, { props: { page: 3, pageCount: 3 } })
+    const buttons = last.findAll('button')
+    expect(buttons[buttons.length - 1]!.attributes('disabled')).toBeDefined()
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Pagination.vue b/front-admin/app/application/shared/components/ui/Pagination.vue
new file mode 100644
index 0000000..9f6967f
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Pagination.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import locale from '@/application/locales/pt-br/ui'
+
+const props = defineProps<{ pageCount: number }>()
+const page = defineModel<number>('page', { required: true })
+
+const pages = computed(() => {
+  const total = props.pageCount
+  const start = Math.max(1, Math.min(page.value - 2, total - 4))
+  const end = Math.min(total, start + 4)
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+})
+
+function go(n: number) {
+  page.value = Math.min(Math.max(1, n), props.pageCount)
+}
+</script>
+
+<template>
+  <nav :aria-label="locale.pagination" class="flex items-center gap-1">
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm min-h-11"
+      :disabled="page <= 1"
+      @click="go(page - 1)"
+    >
+      <span aria-hidden="true">←</span>
+      <span class="sr-only">{{ locale.previousPage }}</span>
+    </button>
+    <button
+      v-for="n in pages"
+      :key="n"
+      type="button"
+      class="btn btn-sm min-h-11 min-w-11"
+      :class="n === page ? 'btn-primary' : 'btn-ghost'"
+      :aria-current="n === page ? 'page' : undefined"
+      :aria-label="locale.page(n)"
+      @click="go(n)"
+    >
+      {{ n }}
+    </button>
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm min-h-11"
+      :disabled="page >= pageCount"
+      @click="go(page + 1)"
+    >
+      <span aria-hidden="true">→</span>
+      <span class="sr-only">{{ locale.nextPage }}</span>
+    </button>
+  </nav>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Select.test.ts b/front-admin/app/application/shared/components/ui/Select.test.ts
new file mode 100644
index 0000000..c6d26f2
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Select.test.ts
@@ -0,0 +1,30 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Select from './Select.vue'
+
+const options = [
+  { value: 'cfp', label: 'CFP aberto' },
+  { value: 'vendas', label: 'Vendas abertas' },
+]
+
+describe('PhSelect', () => {
+  it('lista as opções e o texto de seleção', async () => {
+    const wrapper = await mountSuspended(Select, { props: { label: 'Etapa', options, placeholder: 'Selecione…' } })
+    const texts = wrapper.findAll('option').map((o) => o.text())
+    expect(texts).toEqual(['Selecione…', 'CFP aberto', 'Vendas abertas'])
+    expect(wrapper.find('label').attributes('for')).toBe(wrapper.find('select').attributes('id'))
+  })
+
+  it('emite a opção escolhida', async () => {
+    const wrapper = await mountSuspended(Select, { props: { label: 'Etapa', options } })
+    await wrapper.find('select').setValue('vendas')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['vendas'])
+  })
+
+  it('erro e desabilitado', async () => {
+    const wrapper = await mountSuspended(Select, { props: { label: 'Etapa', options, error: 'Escolha uma etapa', disabled: true } })
+    expect(wrapper.find('select').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('select').attributes('disabled')).toBeDefined()
+    expect(wrapper.find('[role="alert"]').text()).toBe('Escolha uma etapa')
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Select.vue b/front-admin/app/application/shared/components/ui/Select.vue
new file mode 100644
index 0000000..76333aa
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Select.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import locale from '@/application/locales/pt-br/ui'
+
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    options: SelectOption[]
+    placeholder?: string
+    hint?: string
+    error?: string | null
+    disabled?: boolean
+    required?: boolean
+    id?: string
+  }>(),
+  { placeholder: undefined, hint: undefined, error: null, disabled: false, required: false, id: undefined },
+)
+
+const model = defineModel<string>({ default: '' })
+
+const autoId = useId()
+const fieldId = computed(() => props.id ?? `ph-${autoId}`)
+const hintId = computed(() => `${fieldId.value}-hint`)
+const errorId = computed(() => `${fieldId.value}-error`)
+const describedBy = computed(() => {
+  if (props.error) return errorId.value
+  return props.hint ? hintId.value : undefined
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <label :for="fieldId" class="text-sm font-medium">
+      {{ label }}
+      <span v-if="required" class="text-(--ph-ink-3) font-normal">({{ locale.required }})</span>
+    </label>
+    <select
+      :id="fieldId"
+      v-model="model"
+      :disabled="disabled"
+      :required="required"
+      :aria-invalid="error ? 'true' : undefined"
+      :aria-describedby="describedBy"
+      class="select w-full"
+      :class="{ 'select-error': error }"
+    >
+      <option v-if="placeholder !== undefined" value="" disabled>{{ placeholder }}</option>
+      <option v-for="option in options" :key="option.value" :value="option.value">
+        {{ option.label }}
+      </option>
+    </select>
+    <p v-if="error" :id="errorId" role="alert" class="text-sm text-error">{{ error }}</p>
+    <p v-else-if="hint" :id="hintId" class="text-xs text-(--ph-ink-3)">{{ hint }}</p>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Skeleton.vue b/front-admin/app/application/shared/components/ui/Skeleton.vue
new file mode 100644
index 0000000..4755061
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Skeleton.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import locale from '@/application/locales/pt-br/ui'
+
+withDefaults(defineProps<{ lines?: number }>(), { lines: 3 })
+const widths = ['w-3/4', 'w-full', 'w-5/6', 'w-2/3', 'w-1/2']
+</script>
+
+<template>
+  <div role="status" class="flex flex-col gap-3" aria-busy="true">
+    <span class="sr-only">{{ locale.loading }}</span>
+    <div
+      v-for="n in lines"
+      :key="n"
+      class="skeleton h-3.5"
+      :class="widths[(n - 1) % widths.length]"
+      aria-hidden="true"
+    />
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Stripe.vue b/front-admin/app/application/shared/components/ui/Stripe.vue
new file mode 100644
index 0000000..142abb9
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Stripe.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="h-2 w-full"
+    style="background: repeating-linear-gradient(90deg, var(--ph-accent) 0 16px, var(--ph-terra) 16px 32px)"
+    aria-hidden="true"
+  />
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Table.vue b/front-admin/app/application/shared/components/ui/Table.vue
new file mode 100644
index 0000000..0402c64
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Table.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{ caption: string }>()
+</script>
+
+<template>
+  <!-- A região rolável precisa receber foco para quem usa só teclado -->
+  <div class="overflow-x-auto" role="region" :aria-label="caption" tabindex="0">
+    <table class="table">
+      <caption class="sr-only">{{ caption }}</caption>
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Tabs.test.ts b/front-admin/app/application/shared/components/ui/Tabs.test.ts
new file mode 100644
index 0000000..30a3c5a
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Tabs.test.ts
@@ -0,0 +1,57 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Tabs from './Tabs.vue'
+
+const items = [
+  { id: 'geral', label: 'Geral' },
+  { id: 'trilhas', label: 'Trilhas' },
+  { id: 'criterios', label: 'Critérios' },
+]
+
+async function mountTabs(active = 'geral') {
+  const wrapper = await mountSuspended(Tabs, {
+    props: { items, label: 'Seções', modelValue: active, 'onUpdate:modelValue': (v: string) => wrapper.setProps({ modelValue: v }) },
+    slots: { default: '<p>conteúdo</p>' },
+  })
+  return wrapper
+}
+
+describe('PhTabs', () => {
+  it('usa os papéis tablist, tab e tabpanel e liga painel e aba', async () => {
+    const wrapper = await mountTabs()
+    expect(wrapper.find('[role="tablist"]').attributes('aria-label')).toBe('Seções')
+    const tabs = wrapper.findAll('[role="tab"]')
+    expect(tabs).toHaveLength(3)
+    expect(tabs[0]!.attributes('aria-selected')).toBe('true')
+    const panel = wrapper.find('[role="tabpanel"]')
+    expect(panel.attributes('aria-labelledby')).toBe(tabs[0]!.attributes('id'))
+    expect(tabs[0]!.attributes('aria-controls')).toBe(panel.attributes('id'))
+  })
+
+  it('só a aba ativa entra na ordem de Tab (roving tabindex)', async () => {
+    const wrapper = await mountTabs()
+    const tabindexes = wrapper.findAll('[role="tab"]').map((t) => t.attributes('tabindex'))
+    expect(tabindexes).toEqual(['0', '-1', '-1'])
+  })
+
+  it('setas, Home e End trocam de aba', async () => {
+    const wrapper = await mountTabs()
+    const list = wrapper.find('[role="tablist"]')
+    await list.trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.props('modelValue')).toBe('trilhas')
+    await list.trigger('keydown', { key: 'End' })
+    expect(wrapper.props('modelValue')).toBe('criterios')
+    await list.trigger('keydown', { key: 'ArrowRight' })
+    expect(wrapper.props('modelValue')).toBe('geral')
+    await list.trigger('keydown', { key: 'ArrowLeft' })
+    expect(wrapper.props('modelValue')).toBe('criterios')
+    await list.trigger('keydown', { key: 'Home' })
+    expect(wrapper.props('modelValue')).toBe('geral')
+  })
+
+  it('clicar numa aba a ativa', async () => {
+    const wrapper = await mountTabs()
+    await wrapper.findAll('[role="tab"]')[1]!.trigger('click')
+    expect(wrapper.props('modelValue')).toBe('trilhas')
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Tabs.vue b/front-admin/app/application/shared/components/ui/Tabs.vue
new file mode 100644
index 0000000..b7f1635
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Tabs.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, useId } from 'vue'
+
+export interface TabItem {
+  id: string
+  label: string
+}
+
+const props = defineProps<{ items: TabItem[], label: string }>()
+const model = defineModel<string>({ required: true })
+
+const uid = useId()
+const tabRefs = ref<HTMLButtonElement[]>([])
+const tabId = (id: string) => `ph-${uid}-tab-${id}`
+const panelId = (id: string) => `ph-${uid}-panel-${id}`
+const activeIndex = computed(() => Math.max(0, props.items.findIndex((i) => i.id === model.value)))
+
+async function move(index: number) {
+  const next = props.items[(index + props.items.length) % props.items.length]
+  if (!next) return
+  model.value = next.id
+  await nextTick()
+  tabRefs.value.find((el) => el?.id === tabId(next.id))?.focus()
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const keys: Record<string, number> = {
+    ArrowRight: activeIndex.value + 1,
+    ArrowLeft: activeIndex.value - 1,
+    Home: 0,
+    End: props.items.length - 1,
+  }
+  const target = keys[event.key]
+  if (target === undefined) return
+  event.preventDefault()
+  move(target)
+}
+</script>
+
+<template>
+  <div>
+    <div
+      role="tablist"
+      :aria-label="label"
+      class="flex gap-1 overflow-x-auto border-b border-base-300"
+      @keydown="onKeydown"
+    >
+      <button
+        v-for="item in items"
+        :id="tabId(item.id)"
+        :key="item.id"
+        ref="tabRefs"
+        type="button"
+        role="tab"
+        :aria-selected="item.id === model"
+        :aria-controls="panelId(item.id)"
+        :tabindex="item.id === model ? 0 : -1"
+        class="-mb-px min-h-11 whitespace-nowrap border-b-[3px] px-4 text-sm font-medium"
+        :class="
+          item.id === model
+            ? 'border-primary text-base-content'
+            : 'border-transparent text-(--ph-ink-2) hover:text-base-content'
+        "
+        @click="model = item.id"
+      >
+        {{ item.label }}
+      </button>
+    </div>
+    <div
+      :id="panelId(model)"
+      role="tabpanel"
+      :aria-labelledby="tabId(model)"
+      tabindex="0"
+      class="pt-5"
+    >
+      <slot :active="model" />
+    </div>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/Textarea.test.ts b/front-admin/app/application/shared/components/ui/Textarea.test.ts
new file mode 100644
index 0000000..b7da064
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Textarea.test.ts
@@ -0,0 +1,23 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Textarea from './Textarea.vue'
+
+describe('PhTextarea', () => {
+  it('associa rótulo e campo e mostra a dica', async () => {
+    const wrapper = await mountSuspended(Textarea, { props: { label: 'Mini bio', hint: 'Até 400 caracteres.' } })
+    const area = wrapper.find('textarea')
+    expect(wrapper.find('label').attributes('for')).toBe(area.attributes('id'))
+    expect(wrapper.text()).toContain('Até 400 caracteres.')
+  })
+
+  it('erro: aria-invalid e mensagem como alerta', async () => {
+    const wrapper = await mountSuspended(Textarea, { props: { label: 'Bio', error: 'Muito longo' } })
+    expect(wrapper.find('textarea').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('[role="alert"]').text()).toBe('Muito longo')
+  })
+
+  it('desabilitado', async () => {
+    const wrapper = await mountSuspended(Textarea, { props: { label: 'Bio', disabled: true } })
+    expect(wrapper.find('textarea').attributes('disabled')).toBeDefined()
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/Textarea.vue b/front-admin/app/application/shared/components/ui/Textarea.vue
new file mode 100644
index 0000000..063d831
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/Textarea.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import locale from '@/application/locales/pt-br/ui'
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    placeholder?: string
+    hint?: string
+    error?: string | null
+    disabled?: boolean
+    required?: boolean
+    rows?: number
+    id?: string
+  }>(),
+  { placeholder: undefined, hint: undefined, error: null, disabled: false, required: false, rows: 4, id: undefined },
+)
+
+const model = defineModel<string>({ default: '' })
+
+const autoId = useId()
+const fieldId = computed(() => props.id ?? `ph-${autoId}`)
+const hintId = computed(() => `${fieldId.value}-hint`)
+const errorId = computed(() => `${fieldId.value}-error`)
+const describedBy = computed(() => {
+  if (props.error) return errorId.value
+  return props.hint ? hintId.value : undefined
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <label :for="fieldId" class="text-sm font-medium">
+      {{ label }}
+      <span v-if="required" class="text-(--ph-ink-3) font-normal">({{ locale.required }})</span>
+    </label>
+    <textarea
+      :id="fieldId"
+      v-model="model"
+      :rows="rows"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :aria-invalid="error ? 'true' : undefined"
+      :aria-describedby="describedBy"
+      class="textarea w-full"
+      :class="{ 'textarea-error': error }"
+    />
+    <p v-if="error" :id="errorId" role="alert" class="text-sm text-error">{{ error }}</p>
+    <p v-else-if="hint" :id="hintId" class="text-xs text-(--ph-ink-3)">{{ hint }}</p>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/ToastHost.test.ts b/front-admin/app/application/shared/components/ui/ToastHost.test.ts
new file mode 100644
index 0000000..f850d15
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/ToastHost.test.ts
@@ -0,0 +1,59 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { useToast } from '@/application/shared/composables/useToast'
+import { useToastStore } from '@/stores/toastStore'
+import ToastHost from './ToastHost.vue'
+
+beforeEach(() => {
+  vi.useRealTimers()
+  // O store do Nuxt é compartilhado entre os testes: limpa os avisos anteriores.
+  useToastStore().items.splice(0)
+})
+
+describe('PhToastHost + toastStore', () => {
+  it('é uma região viva e mostra o aviso disparado', async () => {
+    const wrapper = await mountSuspended(ToastHost)
+    useToast().success('Identidade publicada.')
+    await nextTick()
+    expect(wrapper.find('[aria-live="polite"]').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Identidade publicada.')
+  })
+
+  it('erro usa role="alert" e os demais "status"', async () => {
+    const wrapper = await mountSuspended(ToastHost)
+    const toast = useToast()
+    toast.error('Falha ao enviar.')
+    toast.info('Salvo.')
+    await nextTick()
+    const roles = wrapper.findAll('.alert').map((a) => a.attributes('role'))
+    expect(roles).toEqual(['alert', 'status'])
+  })
+
+  it('dispensa o aviso pelo botão', async () => {
+    const wrapper = await mountSuspended(ToastHost)
+    useToast().info('Salvo.')
+    await nextTick()
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.text()).not.toContain('Salvo.')
+  })
+
+  it('executa a ação ("Desfazer") e remove o aviso', async () => {
+    const run = vi.fn()
+    const wrapper = await mountSuspended(ToastHost)
+    useToast().success('Publicada.', { label: 'Desfazer', run })
+    await nextTick()
+    const undo = wrapper.findAll('button').find((b) => b.text() === 'Desfazer')!
+    await undo.trigger('click')
+    expect(run).toHaveBeenCalledOnce()
+    expect(useToastStore().items).toHaveLength(0)
+  })
+
+  it('some sozinho depois do tempo', async () => {
+    vi.useFakeTimers()
+    useToast().info('Salvo.')
+    expect(useToastStore().items).toHaveLength(1)
+    vi.advanceTimersByTime(5001)
+    expect(useToastStore().items).toHaveLength(0)
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/ToastHost.vue b/front-admin/app/application/shared/components/ui/ToastHost.vue
new file mode 100644
index 0000000..a1f48d2
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/ToastHost.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useToastStore } from '@/stores/toastStore'
+import locale from '@/application/locales/pt-br/ui'
+
+const store = useToastStore()
+
+const tone = {
+  success: 'alert-success',
+  info: 'alert-info',
+  warning: 'alert-warning',
+  error: 'alert-error',
+} as const
+</script>
+
+<template>
+  <!-- Região viva: leitores de tela anunciam cada aviso novo sem tirar o foco -->
+  <div
+    class="toast toast-end toast-bottom z-50"
+    role="region"
+    :aria-label="locale.notifications"
+    aria-live="polite"
+  >
+    <div
+      v-for="toast in store.items"
+      :key="toast.id"
+      class="alert alert-soft flex items-center gap-3 text-sm"
+      :class="tone[toast.kind]"
+      :role="toast.kind === 'error' ? 'alert' : 'status'"
+    >
+      <span>{{ toast.message }}</span>
+      <button
+        v-if="toast.action"
+        type="button"
+        class="btn btn-ghost btn-sm underline"
+        @click="toast.action.run(); store.dismiss(toast.id)"
+      >
+        {{ toast.action.label }}
+      </button>
+      <button type="button" class="btn btn-ghost btn-square btn-sm" @click="store.dismiss(toast.id)">
+        <span aria-hidden="true">✕</span>
+        <span class="sr-only">{{ locale.dismiss }}</span>
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/ui/misc.test.ts b/front-admin/app/application/shared/components/ui/misc.test.ts
new file mode 100644
index 0000000..3378a52
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/misc.test.ts
@@ -0,0 +1,74 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import Card from './Card.vue'
+import EmptyState from './EmptyState.vue'
+import Kpi from './Kpi.vue'
+import Skeleton from './Skeleton.vue'
+import Stripe from './Stripe.vue'
+import Table from './Table.vue'
+
+describe('PhCard', () => {
+  it('mostra título, conteúdo e ações', async () => {
+    const wrapper = await mountSuspended(Card, {
+      props: { title: 'Regras' },
+      slots: { default: '<p>corpo</p>', actions: '<button>Editar</button>' },
+    })
+    expect(wrapper.find('h2').text()).toBe('Regras')
+    expect(wrapper.text()).toContain('corpo')
+    expect(wrapper.text()).toContain('Editar')
+  })
+
+  it('sem título e sem ações não cria cabeçalho', async () => {
+    const wrapper = await mountSuspended(Card, { slots: { default: '<p>corpo</p>' } })
+    expect(wrapper.find('header').exists()).toBe(false)
+  })
+})
+
+describe('PhKpi', () => {
+  it('relaciona rótulo e valor como lista de definição', async () => {
+    const wrapper = await mountSuspended(Kpi, { props: { label: 'Ingressos', value: 128, hint: 'de 400' } })
+    expect(wrapper.find('dt').text()).toBe('Ingressos')
+    expect(wrapper.findAll('dd').map((d) => d.text())).toEqual(['128', 'de 400'])
+  })
+})
+
+describe('PhTable', () => {
+  it('tem legenda acessível e região rolável focável', async () => {
+    const wrapper = await mountSuspended(Table, {
+      props: { caption: 'Pedidos recentes' },
+      slots: { default: '<tbody><tr><td>#1</td></tr></tbody>' },
+    })
+    expect(wrapper.find('caption').text()).toBe('Pedidos recentes')
+    const region = wrapper.find('[role="region"]')
+    expect(region.attributes('aria-label')).toBe('Pedidos recentes')
+    expect(region.attributes('tabindex')).toBe('0')
+  })
+})
+
+describe('PhSkeleton', () => {
+  it('anuncia "Carregando" e marca ocupado, sem expor as barras', async () => {
+    const wrapper = await mountSuspended(Skeleton, { props: { lines: 4 } })
+    expect(wrapper.attributes('aria-busy')).toBe('true')
+    expect(wrapper.text()).toContain('Carregando')
+    expect(wrapper.findAll('.skeleton')).toHaveLength(4)
+  })
+})
+
+describe('PhEmptyState', () => {
+  it('mostra título, descrição e a próxima ação', async () => {
+    const wrapper = await mountSuspended(EmptyState, {
+      props: { title: 'Nenhuma proposta ainda', description: 'Quando chegar a primeira, aparece aqui.' },
+      slots: { default: '<button>Ver formulário</button>' },
+    })
+    expect(wrapper.find('h3').text()).toBe('Nenhuma proposta ainda')
+    expect(wrapper.text()).toContain('Quando chegar a primeira')
+    expect(wrapper.text()).toContain('Ver formulário')
+  })
+})
+
+describe('PhStripe', () => {
+  it('é decorativa e fica escondida de leitores de tela', async () => {
+    const wrapper = await mountSuspended(Stripe)
+    expect(wrapper.attributes('aria-hidden')).toBe('true')
+  })
+})
diff --git a/front-admin/app/application/shared/components/ui/tokens.test.ts b/front-admin/app/application/shared/components/ui/tokens.test.ts
new file mode 100644
index 0000000..802c8ff
--- /dev/null
+++ b/front-admin/app/application/shared/components/ui/tokens.test.ts
@@ -0,0 +1,50 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// Lê os tokens reais de main.css: se alguém trocar uma cor e quebrar o
+// contraste mínimo (WCAG AA = 4,5:1 para texto), este teste falha.
+const css = readFileSync(resolve(process.cwd(), 'app/assets/css/main.css'), 'utf8')
+
+function token(name: string): string {
+  const match = css.match(new RegExp(`--ph-${name}:\\s*(#[0-9a-fA-F]{6})`))
+  if (!match?.[1]) throw new Error(`Token --ph-${name} não encontrado em main.css`)
+  return match[1]
+}
+
+function luminance(hex: string): number {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) =>
+    c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4,
+  ) as [number, number, number]
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+function ratio(a: string, b: string): number {
+  const [hi, lo] = [luminance(token(a)), luminance(token(b))].sort((x, y) => y - x) as [number, number]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+const textPairs: Array<[string, string]> = [
+  ['ink', 'bg'], ['ink', 'surface'], ['ink', 'surface-2'],
+  ['ink-2', 'bg'], ['ink-2', 'surface'], ['ink-2', 'surface-2'],
+  ['ink-3', 'bg'], ['ink-3', 'surface'], ['ink-3', 'surface-2'],
+  ['link', 'bg'], ['link', 'surface'],
+  ['on-brand', 'brand'], ['on-brand', 'terra'],
+  ['ink', 'accent'],
+  ['ok', 'ok-bg'], ['warn', 'warn-bg'], ['danger', 'danger-bg'], ['info', 'info-bg'],
+  ['danger', 'surface'], ['ok', 'surface'], ['warn', 'surface'], ['info', 'surface'],
+  ['on-brand', 'ok'], ['on-brand', 'warn'], ['on-brand', 'danger'], ['on-brand', 'info'],
+]
+
+describe('contraste dos tokens do tema Sertão', () => {
+  it.each(textPairs)('texto --ph-%s sobre --ph-%s tem pelo menos 4,5:1', (fg, bg) => {
+    expect(ratio(fg, bg)).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it.each([['brand', 'bg'], ['brand', 'surface']])(
+    'anel de foco --ph-%s sobre --ph-%s tem pelo menos 3:1',
+    (fg, bg) => {
+      expect(ratio(fg, bg)).toBeGreaterThanOrEqual(3)
+    },
+  )
+})
diff --git a/front-admin/app/application/shared/composables/useDialog.ts b/front-admin/app/application/shared/composables/useDialog.ts
new file mode 100644
index 0000000..1f1de26
--- /dev/null
+++ b/front-admin/app/application/shared/composables/useDialog.ts
@@ -0,0 +1,23 @@
+import { onMounted, watch, type Ref } from 'vue'
+
+/**
+ * Liga um <dialog> nativo a um `open` reativo. O elemento nativo já cuida de
+ * prender o foco, fechar com Esc e devolver o foco a quem o abriu.
+ * O fallback com atributo `open` existe só para ambientes sem showModal (testes).
+ */
+export function useDialog(el: Ref<HTMLDialogElement | null>, open: Ref<boolean>) {
+  function sync() {
+    const dialog = el.value
+    if (!dialog) return
+    if (open.value && !dialog.open) {
+      if (typeof dialog.showModal === 'function') dialog.showModal()
+      else dialog.setAttribute('open', '')
+    } else if (!open.value && dialog.open) {
+      if (typeof dialog.close === 'function') dialog.close()
+      else dialog.removeAttribute('open')
+    }
+  }
+
+  onMounted(sync)
+  watch(open, sync, { flush: 'post' })
+}
diff --git a/front-admin/app/application/shared/composables/useToast.ts b/front-admin/app/application/shared/composables/useToast.ts
new file mode 100644
index 0000000..a4ccf77
--- /dev/null
+++ b/front-admin/app/application/shared/composables/useToast.ts
@@ -0,0 +1,14 @@
+import { useToastStore, type ToastAction } from '@/stores/toastStore'
+
+/** API enxuta para disparar avisos de qualquer módulo. */
+export function useToast() {
+  const store = useToastStore()
+
+  return {
+    success: (message: string, action?: ToastAction) => store.push('success', message, action),
+    info: (message: string) => store.push('info', message),
+    warning: (message: string, action?: ToastAction) => store.push('warning', message, action),
+    error: (message: string) => store.push('error', message),
+    dismiss: (id: number) => store.dismiss(id),
+  }
+}
diff --git a/front-admin/app/assets/css/main.css b/front-admin/app/assets/css/main.css
index 8d42623..c39903f 100644
--- a/front-admin/app/assets/css/main.css
+++ b/front-admin/app/assets/css/main.css
@@ -1,5 +1,8 @@
 @import 'tailwindcss';
-@plugin 'daisyui';
+@plugin 'daisyui' {
+  themes: false;
+  logs: false;
+}
 
 @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600&display=swap');
 
@@ -43,6 +46,52 @@
   --ph-radius: 10px;
 }
 
+/*
+ * Tema DaisyUI "sertao": aponta as cores semânticas do DaisyUI para os
+ * tokens --ph-*. Assim `btn-primary`, `input`, `alert` etc. mudam junto
+ * com os tokens (inclusive quando uma edição sobrescreve marca/destaque).
+ */
+@plugin 'daisyui/theme' {
+  name: 'sertao';
+  default: true;
+  color-scheme: light;
+  --color-base-100: var(--ph-surface);
+  --color-base-200: var(--ph-surface-2);
+  --color-base-300: var(--ph-line);
+  --color-base-content: var(--ph-ink);
+  --color-primary: var(--ph-brand);
+  --color-primary-content: var(--ph-on-brand);
+  --color-secondary: var(--ph-terra);
+  --color-secondary-content: var(--ph-on-brand);
+  --color-accent: var(--ph-accent);
+  --color-accent-content: var(--ph-ink);
+  --color-neutral: var(--ph-ink);
+  --color-neutral-content: var(--ph-on-brand);
+  --color-info: var(--ph-info);
+  --color-info-content: var(--ph-on-brand);
+  --color-success: var(--ph-ok);
+  --color-success-content: var(--ph-on-brand);
+  --color-warning: var(--ph-warn);
+  --color-warning-content: var(--ph-on-brand);
+  --color-error: var(--ph-danger);
+  --color-error-content: var(--ph-on-brand);
+  --radius-selector: 999px;
+  --radius-field: var(--ph-radius);
+  --radius-box: 14px;
+  /* altura dos campos e botões: 44 px (11 × 0,25rem × 1rem) */
+  --size-field: 0.275rem;
+  --size-selector: 0.25rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+/* Foco visível em tudo que recebe teclado. Marca escura sobre fundo claro. */
+:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+  outline: 3px solid var(--ph-brand);
+  outline-offset: 2px;
+}
+
 body {
   background-color: var(--ph-bg);
   color: var(--ph-ink);
diff --git a/front-admin/app/layouts/default.vue b/front-admin/app/layouts/default.vue
index 56a8b72..8af4614 100644
--- a/front-admin/app/layouts/default.vue
+++ b/front-admin/app/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
     <slot />
+    <PhToastHost />
   </div>
 </template>
diff --git a/front-admin/app/pages/_dev/componentes.vue b/front-admin/app/pages/_dev/componentes.vue
new file mode 100644
index 0000000..5a088c0
--- /dev/null
+++ b/front-admin/app/pages/_dev/componentes.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Inbox } from '@lucide/vue'
+import { useToast } from '@/application/shared/composables/useToast'
+
+// Catálogo do kit de UI. Só existe em desenvolvimento (ou com NUXT_PUBLIC_UI_CATALOG=true,
+// usado pelos testes e2e): em produção devolve 404.
+if (!import.meta.dev && !useRuntimeConfig().public.uiCatalog) {
+  throw createError({ statusCode: 404, statusMessage: 'Página não encontrada', fatal: true })
+}
+
+const toast = useToast()
+
+const tab = ref('geral')
+const tabs = [
+  { id: 'geral', label: 'Geral' },
+  { id: 'trilhas', label: 'Trilhas' },
+  { id: 'criterios', label: 'Critérios' },
+]
+const page = ref(2)
+const modalOpen = ref(false)
+const drawerOpen = ref(false)
+const chipA = ref(true)
+const chipB = ref(false)
+const text = ref('')
+const textError = ref('')
+const email = ref('livia@comunidade')
+const area = ref('')
+const choice = ref('')
+const check = ref(true)
+const date = ref('2027-10-08')
+const time = ref('09:00')
+const options = [
+  { value: 'cfp', label: 'CFP aberto' },
+  { value: 'vendas', label: 'Vendas abertas' },
+  { value: 'evento', label: 'Em andamento' },
+]
+const statuses = ['ok', 'warn', 'danger', 'info', 'neutral'] as const
+const statusText = { ok: 'Pago', warn: 'Aguardando', danger: 'Recusado', info: 'Rascunho', neutral: 'Encerrado' }
+</script>
+
+<template>
+  <main class="mx-auto flex max-w-5xl flex-col gap-10 p-6 pb-24">
+    <PhStripe />
+    <header class="flex flex-col gap-1">
+      <h1 class="text-3xl font-semibold">Componentes do tema Sertão</h1>
+      <p class="text-(--ph-ink-2)">
+        Catálogo de desenvolvimento. Cada bloco mostra os estados normal, erro e desabilitado.
+      </p>
+    </header>
+
+    <section aria-labelledby="sec-botoes" class="flex flex-col gap-4">
+      <h2 id="sec-botoes" class="text-xl font-semibold">Botões</h2>
+      <div class="flex flex-wrap items-center gap-3">
+        <PhButton>Primário</PhButton>
+        <PhButton variant="secondary">Secundário</PhButton>
+        <PhButton variant="ghost">Ghost</PhButton>
+        <PhButton variant="danger">Perigo</PhButton>
+        <PhButton loading>Salvando</PhButton>
+        <PhButton disabled>Desabilitado</PhButton>
+        <PhButton to="/">Como link</PhButton>
+      </div>
+    </section>
+
+    <section aria-labelledby="sec-campos" class="flex flex-col gap-4">
+      <h2 id="sec-campos" class="text-xl font-semibold">Campos</h2>
+      <div class="grid gap-5 md:grid-cols-2">
+        <PhInput v-model="text" label="Nome da edição" hint="Aparece no site e nos e-mails." />
+        <PhInput v-model="email" label="E-mail" type="email" error="Informe um e-mail completo, como nome@dominio.dev." />
+        <PhInput v-model="textError" label="Campo desabilitado" disabled />
+        <PhInput v-model="date" label="Data" type="date" required />
+        <PhInput v-model="time" label="Hora" type="time" />
+        <PhSelect v-model="choice" label="Etapa" :options="options" placeholder="Selecione…" />
+        <PhTextarea v-model="area" label="Mini bio" hint="Até 400 caracteres." class="md:col-span-2" />
+        <PhCheckbox v-model="check" label="Mostrar no site e no app" hint="Pode ser alterado depois." />
+        <PhCheckbox :model-value="false" label="Opção desabilitada" disabled />
+      </div>
+    </section>
+
+    <section aria-labelledby="sec-status" class="flex flex-col gap-4">
+      <h2 id="sec-status" class="text-xl font-semibold">Badges e filtros</h2>
+      <div class="flex flex-wrap items-center gap-3">
+        <PhBadge v-for="s in statuses" :key="s" :status="s">{{ statusText[s] }}</PhBadge>
+      </div>
+      <div class="flex flex-wrap items-center gap-2">
+        <PhChip v-model="chipA">Todos</PhChip>
+        <PhChip v-model="chipB">Pagos</PhChip>
+      </div>
+    </section>
+
+    <section aria-labelledby="sec-cards" class="flex flex-col gap-4">
+      <h2 id="sec-cards" class="text-xl font-semibold">Cartão e indicadores</h2>
+      <div class="grid gap-4 md:grid-cols-3">
+        <PhKpi label="Ingressos vendidos" :value="128" hint="de 400 disponíveis" />
+        <PhKpi label="Receita bruta" value="R$ 19.200" />
+        <PhKpi label="Propostas no CFP" :value="47" hint="31 já avaliadas" />
+      </div>
+      <PhCard title="Regras de seleção">
+        <p class="text-sm text-(--ph-ink-2)">Conteúdo do cartão.</p>
+        <template #actions><PhButton variant="ghost">Editar</PhButton></template>
+      </PhCard>
+    </section>
+
+    <section aria-labelledby="sec-abas" class="flex flex-col gap-4">
+      <h2 id="sec-abas" class="text-xl font-semibold">Abas</h2>
+      <PhTabs v-model="tab" :items="tabs" label="Seções do CFP">
+        <template #default="{ active }"><p class="text-sm">Painel ativo: {{ active }}</p></template>
+      </PhTabs>
+    </section>
+
+    <section aria-labelledby="sec-tabela" class="flex flex-col gap-4">
+      <h2 id="sec-tabela" class="text-xl font-semibold">Tabela e paginação</h2>
+      <PhCard>
+        <PhTable caption="Pedidos recentes">
+          <thead>
+            <tr><th scope="col">Pedido</th><th scope="col">Comprador</th><th scope="col">Status</th></tr>
+          </thead>
+          <tbody>
+            <tr><td>#1042</td><td>Marina Alves</td><td><PhBadge status="ok">Pago</PhBadge></td></tr>
+            <tr><td>#1040</td><td>Luana Pires</td><td><PhBadge status="warn">Aguardando Pix</PhBadge></td></tr>
+          </tbody>
+        </PhTable>
+        <PhPagination v-model:page="page" :page-count="9" />
+      </PhCard>
+    </section>
+
+    <section aria-labelledby="sec-camadas" class="flex flex-col gap-4">
+      <h2 id="sec-camadas" class="text-xl font-semibold">Modal, painel lateral e avisos</h2>
+      <div class="flex flex-wrap gap-3">
+        <PhButton variant="secondary" @click="modalOpen = true">Abrir modal</PhButton>
+        <PhButton variant="secondary" @click="drawerOpen = true">Abrir painel lateral</PhButton>
+        <PhButton variant="ghost" @click="toast.success('Identidade publicada.', { label: 'Desfazer', run: () => {} })">Aviso de sucesso</PhButton>
+        <PhButton variant="ghost" @click="toast.warning('Webhook do gateway sem teste.')">Aviso de atenção</PhButton>
+        <PhButton variant="ghost" @click="toast.error('Falha ao enviar 3 e-mails.')">Aviso de erro</PhButton>
+      </div>
+      <PhModal v-model="modalOpen" title="Reembolsar pedido #1037">
+        <p>Esta ação pede o estorno ao gateway.</p>
+        <template #footer>
+          <PhButton variant="ghost" @click="modalOpen = false">Voltar</PhButton>
+          <PhButton variant="danger" @click="modalOpen = false">Confirmar</PhButton>
+        </template>
+      </PhModal>
+      <PhDrawer v-model="drawerOpen" title="Editar sessão">
+        <PhInput v-model="text" label="Título" />
+        <template #footer>
+          <PhButton variant="ghost" @click="drawerOpen = false">Cancelar</PhButton>
+          <PhButton @click="drawerOpen = false">Salvar</PhButton>
+        </template>
+      </PhDrawer>
+    </section>
+
+    <section aria-labelledby="sec-estados" class="flex flex-col gap-4">
+      <h2 id="sec-estados" class="text-xl font-semibold">Carregando e vazio</h2>
+      <div class="grid gap-4 md:grid-cols-2">
+        <PhCard title="Carregando"><PhSkeleton :lines="4" /></PhCard>
+        <PhCard>
+          <PhEmptyState title="Nenhuma proposta ainda" description="Quando o CFP receber a primeira proposta, ela aparece aqui.">
+            <template #icon><Inbox :size="24" :stroke-width="1.75" /></template>
+            <PhButton variant="ghost">Ver formulário público</PhButton>
+          </PhEmptyState>
+        </PhCard>
+      </div>
+    </section>
+  </main>
+</template>
diff --git a/front-admin/app/stores/toastStore.ts b/front-admin/app/stores/toastStore.ts
new file mode 100644
index 0000000..ccb81aa
--- /dev/null
+++ b/front-admin/app/stores/toastStore.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+
+export type ToastKind = 'success' | 'info' | 'warning' | 'error'
+
+export interface ToastAction {
+  label: string
+  run: () => void
+}
+
+export interface Toast {
+  id: number
+  kind: ToastKind
+  message: string
+  action?: ToastAction
+}
+
+interface ToastState {
+  items: Toast[]
+  nextId: number
+}
+
+// Avisos precisam de tempo para serem lidos; com ação (ex.: "Desfazer"), mais.
+const DURATION_MS: Record<ToastKind, number> = {
+  success: 5000,
+  info: 5000,
+  warning: 8000,
+  error: 10000,
+}
+const DURATION_WITH_ACTION_MS = 10000
+
+/**
+ * Store global legítima: qualquer módulo dispara um aviso e um único
+ * <PhToastHost> (no layout) os mostra. Ver docs/ARCHITECTURE.md, "Estado global".
+ */
+export const useToastStore = defineStore('toast', {
+  state: (): ToastState => ({ items: [], nextId: 1 }),
+
+  actions: {
+    push(kind: ToastKind, message: string, action?: ToastAction): number {
+      const id = this.nextId++
+      this.items.push({ id, kind, message, action })
+      if (import.meta.client) {
+        setTimeout(() => this.dismiss(id), action ? DURATION_WITH_ACTION_MS : DURATION_MS[kind])
+      }
+      return id
+    },
+
+    dismiss(id: number) {
+      this.items = this.items.filter((toast) => toast.id !== id)
+    },
+  },
+})
diff --git a/front-admin/docs/UI-KIT.md b/front-admin/docs/UI-KIT.md
new file mode 100644
index 0000000..a38e8f9
--- /dev/null
+++ b/front-admin/docs/UI-KIT.md
@@ -0,0 +1,35 @@
+# Kit de UI — tema Sertão (issue #50)
+
+Componentes base do front-admin. Vivem em `app/application/shared/components/ui/` e são
+auto-importados com o prefixo `Ph` (`Button.vue` → `<PhButton>`), sem `import`.
+
+## Tema
+
+- Tokens `--ph-*` em `app/assets/css/main.css` (fundo, superfícies, tinta, marca, mostarda, terracota, estados).
+- O tema DaisyUI `sertao` mapeia as variáveis do DaisyUI para esses tokens: classes como `btn-primary`
+  e `input-error` já seguem a identidade. **Não use cores literais** nos componentes; use os tokens.
+- Foco visível global: anel de 3 px na cor da marca (`:focus-visible`).
+
+## Componentes
+
+`PhButton` (primary/secondary/ghost/danger, `loading`, `disabled`, `to`), `PhInput`, `PhTextarea`,
+`PhSelect`, `PhCheckbox`, `PhBadge` (ok/warn/danger/info/neutral), `PhStripe`, `PhCard`, `PhKpi`,
+`PhTabs`, `PhChip`, `PhTable`, `PhPagination`, `PhSkeleton`, `PhEmptyState`, `PhModal`, `PhDrawer`,
+`PhToastHost` (já montado em `layouts/default.vue`).
+
+Avisos: `const toast = useToast(); toast.success('Salvo.')` (também `info`, `warning`, `error`, e uma ação
+opcional `{ label, run }`). Estado em `stores/toastStore.ts`.
+
+## Acessibilidade (regras do kit)
+
+- Rótulo real (`<label for>`), erro com `aria-invalid` + `role="alert"`, dica ligada por `aria-describedby`.
+- Estado nunca só por cor: `PhBadge` sempre tem texto.
+- Abas com roving tabindex e setas/Home/End; modal e painel usam `<dialog>` nativo (foco preso, Esc fecha).
+- Tabelas com legenda e região rolável focável; avisos numa região `aria-live`.
+- Contraste: `tokens.test.ts` lê o `main.css` e exige ≥ 4,5:1 nos pares de texto (≥ 3:1 no anel de foco).
+
+## Catálogo e testes
+
+- Catálogo visual: `/_dev/componentes` (só em dev; em produção devolve 404).
+- Testes de componente: `*.test.ts` ao lado de cada componente (`npm test`).
+- Teclado e foco no navegador: `e2e/ui-catalog.spec.ts` (`npm run test:e2e`).
diff --git a/front-admin/e2e/ui-catalog.spec.ts b/front-admin/e2e/ui-catalog.spec.ts
new file mode 100644
index 0000000..8e6ff19
--- /dev/null
+++ b/front-admin/e2e/ui-catalog.spec.ts
@@ -0,0 +1,68 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+// Comportamento de teclado e foco do kit de UI, no navegador de verdade,
+// usando a página de catálogo (/_dev/componentes, só existe em dev).
+test.describe('Catálogo de componentes (teclado e foco)', () => {
+  test.beforeEach(async ({ goto }) => {
+    await goto('/_dev/componentes', { waitUntil: 'hydration' })
+  })
+
+  test('o foco visível aparece ao navegar com Tab', async ({ page }) => {
+    await page.keyboard.press('Tab')
+    const focused = page.locator(':focus-visible')
+    await expect(focused).toBeVisible()
+    const outline = await focused.evaluate((el) => getComputedStyle(el).outlineStyle)
+    expect(outline).not.toBe('none')
+  })
+
+  test('abas: setas, Home e End trocam a aba ativa', async ({ page }) => {
+    const tablist = page.getByRole('tablist', { name: 'Seções do CFP' })
+    const tabs = tablist.getByRole('tab')
+    await tabs.first().focus()
+    await page.keyboard.press('ArrowRight')
+    await expect(tabs.nth(1)).toHaveAttribute('aria-selected', 'true')
+    await expect(tabs.nth(1)).toBeFocused()
+    await page.keyboard.press('End')
+    await expect(tabs.last()).toHaveAttribute('aria-selected', 'true')
+    await page.keyboard.press('Home')
+    await expect(tabs.first()).toHaveAttribute('aria-selected', 'true')
+  })
+
+  test('modal: abre, prende o foco e fecha com Esc devolvendo o foco', async ({ page }) => {
+    const opener = page.getByRole('button', { name: 'Abrir modal' })
+    await opener.click()
+    const dialog = page.getByRole('dialog', { name: 'Reembolsar pedido #1037' })
+    await expect(dialog).toBeVisible()
+    // Com <dialog> modal o conteúdo de fora fica inerte: o foco nunca chega nele.
+    const background = page.getByRole('button', { name: 'Abrir painel lateral' })
+    for (let i = 0; i < 8; i++) {
+      await page.keyboard.press('Tab')
+      await expect(background).not.toBeFocused()
+    }
+    await page.keyboard.press('Escape')
+    await expect(dialog).toBeHidden()
+    await expect(opener).toBeFocused()
+  })
+
+  test('painel lateral: abre e fecha pelo botão Cancelar', async ({ page }) => {
+    await page.getByRole('button', { name: 'Abrir painel lateral' }).click()
+    const drawer = page.getByRole('dialog', { name: 'Editar sessão' })
+    await expect(drawer).toBeVisible()
+    await drawer.getByRole('button', { name: 'Cancelar' }).click()
+    await expect(drawer).toBeHidden()
+  })
+
+  test('aviso: aparece numa região viva, tem ação e pode ser dispensado', async ({ page }) => {
+    await page.getByRole('button', { name: 'Aviso de sucesso' }).click()
+    const region = page.getByRole('region', { name: 'Avisos', exact: true })
+    await expect(region).toContainText('Identidade publicada.')
+    await region.getByRole('button', { name: 'Desfazer' }).focus()
+    await page.keyboard.press('Enter')
+    await expect(region).not.toContainText('Identidade publicada.')
+  })
+
+  test('tabela larga é rolável e alcançável pelo teclado', async ({ page }) => {
+    const region = page.getByRole('region', { name: 'Pedidos recentes' })
+    await expect(region).toHaveAttribute('tabindex', '0')
+  })
+})
diff --git a/front-admin/nuxt.config.ts b/front-admin/nuxt.config.ts
index 69ea88b..678950f 100644
--- a/front-admin/nuxt.config.ts
+++ b/front-admin/nuxt.config.ts
@@ -6,6 +6,11 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@pinia/nuxt', '@nuxt/eslint'],
   css: ['~/assets/css/main.css'],
+  // Kit de UI do tema Sertão: <PhButton>, <PhInput>, <PhCard>… (ver app/application/shared/components/ui)
+  components: [
+    { path: '~/application/shared/components/ui', pathPrefix: false, prefix: 'Ph' },
+    { path: '~/components', pathPrefix: false },
+  ],
   vite: {
     plugins: [tailwindcss()]
   },
@@ -13,7 +18,9 @@ export default defineNuxtConfig({
   // Laravel packages/* module directly, only HTTP. See .claude/rules/architecture.md.
   runtimeConfig: {
     public: {
-      apiBase: process.env.NUXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1'
+      apiBase: process.env.NUXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1',
+      // Libera a página /_dev/componentes fora do modo dev (só os testes e2e ligam).
+      uiCatalog: false
     }
   }
 })
diff --git a/front-admin/playwright.config.ts b/front-admin/playwright.config.ts
index 3cc8e43..ce7898f 100644
--- a/front-admin/playwright.config.ts
+++ b/front-admin/playwright.config.ts
@@ -4,6 +4,9 @@ import { defineConfig, devices } from '@playwright/test'
 // @nuxt/test-utils/playwright's `goto` fixture boots an ephemeral Nuxt
 // server per worker (via the `nuxt` option below) — no separate `npm run
 // dev` needed in another terminal, `npm run test:e2e` just works.
+// O servidor efêmero roda fora do modo dev; esta flag libera a página de catálogo.
+process.env.NUXT_PUBLIC_UI_CATALOG = 'true'
+
 export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,