Alert

Alert (UI) — Design System (Symfony UX Toolkit / shadcn)

BASE CONGELADA (não mude por instância): Congelado: o card de alerta rounded-lg + border, espaçamento px-2.5 py-2, text-sm, título font-medium, descrição text-muted-foreground; as DUAS intenções default/destructive (tokens bg-card/text-destructive — trocar cor/variante é decisão de BASE, não enricher); a semântica role="alert" e o contrato de a11y; o grid automático que detecta o svg de abertura (size-4, text-current, à esquerda); o suporte RTL; e a convenção do slot Alert:Action ancorado no topo-direita. Nada disso muda ao ligar/desligar capacidade.

USO: <twig:Alert variant="default" />

CAPACIDADES OPT-IN (ligue sem alterar o visual):
- Fechável (dispensar): Adiciona um botão X que dispensa o alerta e emite evento de fechamento; usa o slot de ação topo-direita da base. [toggle]- Auto-fechar (temporizador): Dispensa o alerta sozinho após N segundos; pausa ao passar o mouse ou receber foco. Só comportamento, o visual não muda. [number]- Barra de tempo (contagem regressiva): Trilha fina mostrando o tempo restante do auto-fechar escoando. Feedback aditivo do temporizador, ancorado na borda topo/rodapé. [toggle]- Ações (botões): Botões de resposta compostos no alerta (análogo à coluna de Ações da Tabela): o usuário escolhe quais aparecem. [multi → Desfazer / Repetir / Ver detalhes / Copiar / Descartar]- Detalhes expansíveis (ver mais): Área colapsável para conteúdo técnico extra (stack trace, payload, motivo do erro) sem inflar o alerta fechado. [toggle]- Lembrar dispensa (não mostrar de novo): Ao dispensar, persiste por chave (localStorage) para o alerta não reaparecer — ideal para banners de anúncio. [toggle]- Modo flutuante (toast): Desprende o alerta como toast fixo na viewport, escolhendo o canto/borda. Muda só a colocação; fonte/cor/cantos/espaçamento intactos. [position]- Prioridade de anúncio (leitores de tela): Escolhe como a mensagem é anunciada: assertivo (interrompe) ou polido (aguarda). Ajuste funcional de a11y, sem tocar no visual. [select → Assertivo (interrompe) / Polido (aguarda a vez)]FAÇA:
- Use <twig:Nome> — a base é congelada, você é dono do template em templates/components/.
- Ligue apenas capacidades opt-in listadas (e_funcao=true); a aparência não muda ao ligá-las.
- Passe atributos extras (id, aria-*, name, data-*) via {{ attributes }}.
NÃO FAÇA:
- Não mude cor/fonte/cantos/espaçamento por instância — é decisão de BASE, na fonte única assets/styles/app.css.
- Não crie variante/fork para a mesma coisa — existe UMA base por componente.
- Não reimplemente o componente nem adicione toolchain Node.
TESTE ANTES DE MUDAR: "é função ou é base?" — função = capacidade opt-in; base = mude o token na fonte única (assets/styles/app.css), para todos.

A11Y (herdada da base): as DUAS intenções default/destructive (tokens bg-card/text-destructive — trocar cor/variante é decisão de BASE, não enricher). a semântica role="alert" e o contrato de a11y

{
    "$schema_version": "1.0",
    "id": "alert",
    "component": "Alert",
    "eixo": "ui",
    "particularidade": "O Alert é o componente de mensagem anunciada (live region role=\"alert\"): um banner de status com ícone opcional + título + descrição + ação no canto, em duas intenções (default/destructive). Sua natureza única é ser NOTIFICAÇÃO com ciclo de vida (aparece, é lida por leitores de tela, pode ser dispensada) — por isso enriquece por comportamento de dispensa/tempo/ação, nunca por novos visuais.",
    "base_congelada": "Congelado: o card de alerta rounded-lg + border, espaçamento px-2.5 py-2, text-sm, título font-medium, descrição text-muted-foreground; as DUAS intenções default/destructive (tokens bg-card/text-destructive — trocar cor/variante é decisão de BASE, não enricher); a semântica role=\"alert\" e o contrato de a11y; o grid automático que detecta o svg de abertura (size-4, text-current, à esquerda); o suporte RTL; e a convenção do slot Alert:Action ancorado no topo-direita. Nada disso muda ao ligar/desligar capacidade.",
    "props": [
        {
            "name": "variant",
            "type": "'default'|'destructive'",
            "default": "default",
            "description": "The visual style variant. Defaults to `default` #}"
        }
    ],
    "capacidades": [
        {
            "id": "fech-vel-dispensar",
            "nome": "Fechável (dispensar)",
            "descricao": "Adiciona um botão X que dispensa o alerta e emite evento de fechamento; usa o slot de ação topo-direita da base.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "auto-fechar-temporizador",
            "nome": "Auto-fechar (temporizador)",
            "descricao": "Dispensa o alerta sozinho após N segundos; pausa ao passar o mouse ou receber foco. Só comportamento, o visual não muda.",
            "controle": "number",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (number). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "barra-de-tempo-contagem-regressiva",
            "nome": "Barra de tempo (contagem regressiva)",
            "descricao": "Trilha fina mostrando o tempo restante do auto-fechar escoando. Feedback aditivo do temporizador, ancorado na borda topo/rodapé.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": true,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "a-es-bot-es",
            "nome": "Ações (botões)",
            "descricao": "Botões de resposta compostos no alerta (análogo à coluna de Ações da Tabela): o usuário escolhe quais aparecem.",
            "controle": "multi",
            "opcoes": [
                "Desfazer",
                "Repetir",
                "Ver detalhes",
                "Copiar",
                "Descartar"
            ],
            "posicionavel": true,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (multi). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "detalhes-expans-veis-ver-mais",
            "nome": "Detalhes expansíveis (ver mais)",
            "descricao": "Área colapsável para conteúdo técnico extra (stack trace, payload, motivo do erro) sem inflar o alerta fechado.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "lembrar-dispensa-n-o-mostrar-de-novo",
            "nome": "Lembrar dispensa (não mostrar de novo)",
            "descricao": "Ao dispensar, persiste por chave (localStorage) para o alerta não reaparecer — ideal para banners de anúncio.",
            "controle": "toggle",
            "opcoes": [],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (toggle). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "modo-flutuante-toast",
            "nome": "Modo flutuante (toast)",
            "descricao": "Desprende o alerta como toast fixo na viewport, escolhendo o canto/borda. Muda só a colocação; fonte/cor/cantos/espaçamento intactos.",
            "controle": "position",
            "opcoes": [],
            "posicionavel": true,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (position). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        },
        {
            "id": "prioridade-de-an-ncio-leitores-de-tela",
            "nome": "Prioridade de anúncio (leitores de tela)",
            "descricao": "Escolhe como a mensagem é anunciada: assertivo (interrompe) ou polido (aguarda). Ajuste funcional de a11y, sem tocar no visual.",
            "controle": "select",
            "opcoes": [
                "Assertivo (interrompe)",
                "Polido (aguarda a vez)"
            ],
            "posicionavel": false,
            "e_funcao": true,
            "como_plugar": "Capacidade opt-in (select). Ligue no configurador em /vitrine/ui/alert; comportamento via controller Stimulus. Não altera a base."
        }
    ],
    "snippet_uso": "<twig:Alert variant=\"default\" />",
    "exemplo_demo": "<div class=\"grid w-full max-w-md items-start gap-4\">\n    <twig:Alert>\n        <twig:ux:icon name=\"lucide:circle-check-big\" />\n        <twig:Alert:Title>Payment successful</twig:Alert:Title>\n        <twig:Alert:Description>\n            Your payment of $29.99 has been processed. A receipt has been sent to your email address.\n        </twig:Alert:Description>\n    </twig:Alert>\n    <twig:Alert>\n        <twig:ux:icon name=\"lucide:info\" />\n        <twig:Alert:Title>New feature available</twig:Alert:Title>\n        <twig:Alert:Description>\n            We've added dark mode support. You can enable it in your account settings.\n        </twig:Alert:Description>\n    </twig:Alert>\n</div>",
    "regras": {
        "faca": [
            "Use <twig:Nome> — a base é congelada, você é dono do template em templates/components/.",
            "Ligue apenas capacidades opt-in listadas (e_funcao=true); a aparência não muda ao ligá-las.",
            "Passe atributos extras (id, aria-*, name, data-*) via {{ attributes }}."
        ],
        "nao_faca": [
            "Não mude cor/fonte/cantos/espaçamento por instância — é decisão de BASE, na fonte única assets/styles/app.css.",
            "Não crie variante/fork para a mesma coisa — existe UMA base por componente.",
            "Não reimplemente o componente nem adicione toolchain Node."
        ]
    },
    "a11y": "as DUAS intenções default/destructive (tokens bg-card/text-destructive — trocar cor/variante é decisão de BASE, não enricher). a semântica role=\"alert\" e o contrato de a11y",
    "mcp": {
        "tool": "get_component",
        "args": {
            "id": "alert"
        }
    }
}