@seniorsistemas/angular-components-mcp 1.0.0-beta.3 → 1.0.0

package/dist/data/component-technical/dynamic-form.md

@@ -0,0 +1,292 @@
+# DynamicForm — Guia Técnico
+
+**Seletor:** `s-dynamic-form`
+**Package:** `@seniorsistemas/angular-components/dynamic-form`
+
+## Exports e Imports
+
+| Tipo       | Símbolo                                                                                  |
+| ---------- | ---------------------------------------------------------------------------------------- |
+| Components | `DynamicFormComponent`, `DynamicFormDirective`, `FieldLabelComponent`, `LookupComponent` |
+| Classes    | `DynamicFormRegistry`                                                                    |
+| Types      | `DynamicStructure`, `FieldConfig`, `DynamicType`, `FieldType`, `FieldTypeMap`            |
+
+```typescript
+import { DynamicFormComponent } from '@seniorsistemas/angular-components/dynamic-form';
+import { DynamicFormModule } from '@seniorsistemas/angular-components/dynamic-form';
+import type { DynamicStructure } from '@seniorsistemas/angular-components/dynamic-form';
+```
+
+---
+
+## Regra de estruturas
+
+- Use `row` quando os campos não precisam de título visual agrupando-os. É o tipo padrão.
+- **TODOS** os campos do formulário devem ir na **mesma `row`**. Só crie uma estrutura adicional se for necessário separar campos em um agrupamento com título próprio.
+- `section` **OBRIGATORIAMENTE** deve ter `header`. Nunca use `section` sem `header`.
+- Dentro de `section` **SEMPRE** deve haver outra `DynamicStructure` (`row` ou `fieldset`). Campos diretos em `section` não são permitidos.
+- **NUNCA** aninhe `section` dentro de `section`.
+- **Antes de agrupar campos**, pergunte ao usuário qual estrutura ele quer usar para organizar o formulário: `row` (sem título), `section` (nova seção com título), ou `fieldset` (agrupamento semântico com título).
+
+### Exemplo comum (sem seção)
+
+```typescript
+protected configs: DynamicStructure[] = [
+    {
+        type: 'row',
+        fields: [
+            { name: 'name', type: 'string', label: 'Nome', required: () => true, size: { xl: 6 } },
+            { name: 'email', type: 'string', label: 'E-mail', required: () => true, size: { xl: 6 } },
+        ],
+    },
+];
+```
+
+> **OBRIGATÓRIO:** Para cada campo em `fields`, o `FormGroup` **deve ter um `FormControl` declarado explicitamente com o mesmo valor de `name`**. O DynamicForm usa esse nome internamente como `formControlName` para fazer o vínculo — ele NÃO cria os controles automaticamente.
+> No exemplo acima, o `FormGroup` deve ser criado com: `this.fb.group({ name: [], email: [] })`.
+
+### Exemplo com seção (quando há nova seção)
+
+```typescript
+protected configs: DynamicStructure[] = [
+    {
+        type: 'section',
+        header: 'Dados Pessoais',
+        configs: [
+            {
+                type: 'row',
+                fields: [
+                    { name: 'name', type: 'string', label: 'Nome', required: () => true, size: { xl: 6 } },
+                    { name: 'email', type: 'string', label: 'E-mail', required: () => true, size: { xl: 6 } },
+                ],
+            },
+        ],
+    },
+];
+```
+
+### Exemplo com `fieldset` para agrupamento
+
+```typescript
+protected configs: DynamicStructure[] = [
+    {
+        type: 'row',
+        fields: [
+            { name: 'fullName', type: 'string', label: 'Nome completo', size: { xl: 12 } },
+        ],
+    },
+    {
+        type: 'fieldset',
+        header: 'Endereço',
+        configs: [
+            {
+                type: 'row',
+                fields: [
+                    { name: 'zipCode', type: 'string', label: 'CEP', size: { xl: 4 }, mask: '000000-000' },
+                    { name: 'street', type: 'string', label: 'Rua', size: { xl: 8 } },
+                ],
+            },
+        ],
+    },
+];
+```
+
+---
+
+## Padrão 1: Com `FormGroup` externo ✅ PADRÃO OBRIGATÓRIO
+
+O DynamicForm **NÃO cria nem gerencia seu próprio FormGroup**. O `FormGroup` deve ser criado externamente no componente e passado via `[form]`. **Para cada campo declarado em `configs`, deve existir um `FormControl` no `FormGroup` com o mesmo valor de `name`** — o DynamicForm usa esse nome como `formControlName` internamente.
+
+### Exemplo
+
+```typescript
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { DynamicFormModule, DynamicStructure } from '@seniorsistemas/angular-components/dynamic-form';
+
+@Component({
+    imports: [DynamicFormModule, ReactiveFormsModule],
+    template: `
+        <s-dynamic-form
+            [form]="form"
+            [configs]="configs"
+        />
+        <s-button
+            label="Salvar"
+            priority="primary"
+            [disabled]="form.invalid"
+            (clicked)="save()"
+        />
+    `,
+})
+export class MyComponent implements OnInit {
+    private readonly fb = inject(FormBuilder);
+
+    protected form!: FormGroup;
+    protected configs: DynamicStructure[] = [
+        {
+            type: 'row',
+            fields: [
+                { name: 'name', type: 'string', label: 'Nome', required: () => true, size: { xl: 6 } },
+                { name: 'email', type: 'string', label: 'E-mail', required: () => true, size: { xl: 6 } },
+                { name: 'birthDate', type: 'date', label: 'Data de Nascimento', size: { xl: 4 } },
+            ],
+        },
+    ];
+
+    public ngOnInit(): void {
+        // Cada FormControl deve ter o mesmo nome que o `name` do campo em configs
+        this.form = this.fb.group({
+            name: [],
+            email: [],
+            birthDate: [],
+        });
+    }
+
+    protected save(): void {
+        if (this.form.valid) {
+            console.log(this.form.value);
+        }
+    }
+}
+```
+
+---
+
+## Notas de integração
+
+- O `FormGroup` **DEVE** ser criado antes do DynamicForm renderizar, com um `FormControl` para cada campo. Exemplo: `this.fb.group({ fieldName: [], otherField: [] })`.
+- Cada campo em `fields` **DEVE** ter `name` definido. Para cada `name`, **declare explicitamente um `FormControl` no `FormGroup` com o mesmo nome** — o DynamicForm usa esse nome como `formControlName` internamente e não cria controles automaticamente.
+- Exemplo: campos com `name: 'name'` e `name: 'email'` exigem `this.fb.group({ name: [], email: [] })`.
+- No array `fields`, a propriedade `required` deve ser uma função que retorna boolean (`() => boolean`).
+- Para campos opcionais com providers específicos (ex: `editor`), use a tool `detect_required_providers` para identificar o provider necessário e onde adicioná-lo.
+- Use `size` com breakpoints customizados (`xs`, `sm`, `md`, `lg`, `xl`, `xxl`, `big`) — **NÃO use breakpoints padrão do Tailwind**.
+- **NUNCA** use `s-select`, `s-checkbox`, `s-text-area` ou outros campos individualmente — sempre prefira `s-dynamic-form`.
+
+---
+
+## Criando um tipo de campo customizado
+
+> ⚠️ **ATENÇÃO: uso pouco frequente.** Criar um tipo custom do zero é trabalhoso e só deve ser feito quando não existe nenhum tipo nativo que atenda à necessidade e nenhuma lib externa com provider já disponível. **Antes de criar, pergunte ao usuário:**
+>
+> 1. Já existe algum tipo custom implementado no projeto (ex: em `optional-fields/` ou equivalente)?
+> 2. Existe alguma biblioteca/pacote que o projeto já usa que fornece um provider pronto para o DynamicForm?
+
+### Passo 1 — Criar a interface de configuração e o provider
+
+Crie um arquivo `<nome>-field.ts` no diretório do seu campo customizado.
+A interface deve estender `FieldConfig`, fazer o module augmentation registrando o novo tipo em `FieldTypeMap`, e exportar uma função `provide<Nome>Field()` que registra o componente no `DynamicFormRegistry`.
+
+```typescript
+// my-custom-field.ts
+import { APP_INITIALIZER, EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { FieldConfig, DynamicFormRegistry } from '@seniorsistemas/angular-components/dynamic-form';
+import { MyCustomFieldComponent } from './my-custom-field/my-custom-field.component';
+
+/** Configuração do campo customizado. */
+export interface MyCustomFieldConfig extends FieldConfig {
+    type: 'myCustom';
+    // adicione aqui as propriedades específicas do seu campo
+    someOption?: string;
+}
+
+// Augmentation: registra o novo tipo no mapa do DynamicForm
+declare module '@seniorsistemas/angular-components/dynamic-form' {
+    export interface FieldTypeMap {
+        myCustom: MyCustomFieldConfig;
+    }
+}
+
+/** Registra o componente do campo customizado no DynamicForm. */
+export function provideMyCustomField(): EnvironmentProviders {
+    return makeEnvironmentProviders([
+        {
+            provide: APP_INITIALIZER,
+            useFactory: () => () => {
+                DynamicFormRegistry.registerField(MyCustomFieldComponent, 'myCustom');
+            },
+            multi: true,
+        },
+    ]);
+}
+```
+
+### Passo 2 — Criar o componente Angular
+
+Crie um componente standalone que implementa `BaseFieldComponentConfig`.
+Requisitos obrigatórios:
+
+- Ser `standalone: true`
+- Implementar `BaseFieldComponentConfig`
+- Ter o `input` de `field` (tipado com a interface criada no passo 1)
+- Ter o `input` de `formControl` (necessário quando o campo modifica o `FormGroup`, que é quase sempre)
+- Importar e **renderizar `FieldLabelComponent` como primeira tag no template** — responsável por exibir o label, tooltip e infoSign do campo
+
+```typescript
+// my-custom-field/my-custom-field.component.ts
+import { Component, input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { BaseFieldComponentConfig, FieldLabelComponent } from '@seniorsistemas/angular-components/dynamic-form';
+import { MyCustomFieldConfig } from '../my-custom-field';
+
+@Component({
+    standalone: true,
+    imports: [ReactiveFormsModule, FieldLabelComponent /* + outros imports necessários */],
+    templateUrl: './my-custom-field.component.html',
+})
+export class MyCustomFieldComponent implements BaseFieldComponentConfig {
+    /** Config do campo injetada pelo DynamicForm. */
+    field = input.required<MyCustomFieldConfig>();
+
+    /** FormControl associado ao campo no FormGroup pai. */
+    formControl = input.required<FormControl>();
+}
+```
+
+```html
+<!-- my-custom-field/my-custom-field.component.html -->
+@let _field = field();
+
+<!-- OBRIGATÓRIO: sempre a primeira tag do template -->
+<s-field-label [field]="_field"></s-field-label>
+
+<!-- Implemente aqui o input/controle visual do campo -->
+<input
+    [formControl]="formControl()"
+    [placeholder]="_field.placeholder ?? ''"
+/>
+```
+
+### Passo 3 — Registrar o provider no AppConfig ou AppModule
+
+O provider gerado no Passo 1 deve ser adicionado ao `providers` do `app.config.ts` (projetos standalone) ou ao `providers` do `AppModule` (projetos com módulos).
+
+```typescript
+// app.config.ts (projetos standalone)
+import { provideMyCustomField } from './my-custom-field/my-custom-field';
+
+export const appConfig: ApplicationConfig = {
+    providers: [
+        // ... outros providers
+        provideMyCustomField(),
+    ],
+};
+```
+
+Após registrar o provider, o tipo `'myCustom'` estará disponível na configuração do DynamicForm:
+
+```typescript
+configs: DynamicStructure[] = [
+    {
+        type: 'section',
+        configs: [
+            {
+                type: 'row',
+                fields: [
+                    { type: 'myCustom', name: 'meuCampo', label: 'Meu Campo', someOption: 'valor' }
+                ]
+            }
+        ]
+    }
+];
+```
+

package/dist/data/component-technical/index.json

@@ -0,0 +1,4 @@
+{
+    "components": ["dialog", "confirm-dialog", "toast", "sidebar", "loading-state", "dynamic-form", "kanban", "table"]
+}
+

package/dist/data/component-technical/kanban.md

@@ -0,0 +1,116 @@
+# Kanban — Guia Técnico
+
+**Seletor:** `s-kanban`
+**Package:** `@seniorsistemas/angular-components/kanban`
+
+## Exports e Imports
+
+| Tipo      | Símbolo                                                                                  |
+| --------- | ---------------------------------------------------------------------------------------- |
+| Component | `KanbanComponent`                                                                        |
+| Module    | `KanbanModule`                                                                           |
+| Types     | `KanbanData`, `KanbanColumn`, `KanbanItem`, `KanbanItemMovedData`, `KanbanTemplateTypes` |
+
+```typescript
+import { KanbanComponent } from '@seniorsistemas/angular-components/kanban';
+import { KanbanModule } from '@seniorsistemas/angular-components/kanban';
+import type { KanbanData, KanbanColumn, KanbanItem } from '@seniorsistemas/angular-components/kanban';
+```
+
+---
+
+## Estruturas de dados
+
+### `KanbanData`
+
+Estrutura raiz passada ao input `[data]` do componente. Contém um array de colunas.
+
+```typescript
+const data: KanbanData = {
+    columns: [
+        { id: 'todo', title: 'A Fazer', items: [] },
+        { id: 'doing', title: 'Em Progresso', items: [] },
+        { id: 'done', title: 'Concluído', items: [] },
+    ],
+};
+```
+
+### `KanbanColumn`
+
+| Propriedade | Tipo                   | Obrigatório | Descrição                             |
+| ----------- | ---------------------- | ----------- | ------------------------------------- |
+| `id`        | `string`               | Não         | Identificador único da coluna         |
+| `title`     | `string`               | Sim         | Título exibido no cabeçalho da coluna |
+| `items`     | `KanbanItem[]`         | Sim         | Array de itens dentro da coluna       |
+| `options`   | `KanbanColumnOption[]` | Não         | Menu de opções da coluna              |
+
+### `KanbanItem`
+
+| Propriedade | Tipo                 | Obrigatório | Descrição                                                                      |
+| ----------- | -------------------- | ----------- | ------------------------------------------------------------------------------ |
+| `data`      | `any`                | Sim         | Dados customizados do item (acessados via `item.data.propriedade` no template) |
+| `options`   | `KanbanItemOption[]` | Não         | Menu de opções do item                                                         |
+| `disabled`  | `boolean`            | Não         | Quando `true`, o item não pode ser arrastado                                   |
+| `frozen`    | `boolean`            | Não         | Quando `true`, o item fica fixo no topo da coluna                              |
+
+> O template do item acessa os dados via `item.data.propriedade` — ex: `{{ item.data.title }}`
+
+---
+
+## Templates (`KanbanTemplateTypes`)
+
+O Kanban aceita **exatamente 5 tipos de template**, identificados pelo atributo `sTemplate`. Qualquer outro valor é silenciosamente ignorado.
+
+| Tipo                   | Onde é renderizado                  |
+| ---------------------- | ----------------------------------- |
+| `column-header`        | Cabeçalho de cada coluna            |
+| `column-empty-message` | Corpo da coluna quando não há itens |
+| `item-header`          | Cabeçalho do card (item)            |
+| `item-body`            | Corpo do card (item)                |
+| `item-footer`          | Rodapé do card (item)               |
+
+### Exemplo de uso
+
+```html
+<s-kanban [data]="kanbanData">
+    <!-- Cabeçalho customizado da coluna -->
+    <ng-template
+        sTemplate="column-header"
+        let-column
+    >
+        <strong>{{ column.title }}</strong>
+    </ng-template>
+
+    <!-- Mensagem quando a coluna está vazia -->
+    <ng-template sTemplate="column-empty-message">
+        <span>Nenhum item nesta coluna</span>
+    </ng-template>
+
+    <!-- Cabeçalho do card -->
+    <ng-template
+        sTemplate="item-header"
+        let-item
+    >
+        <span>{{ item.data.title }}</span>
+    </ng-template>
+
+    <!-- Corpo do card -->
+    <ng-template
+        sTemplate="item-body"
+        let-item
+    >
+        <p>{{ item.data.description }}</p>
+    </ng-template>
+
+    <!-- Rodapé do card -->
+    <ng-template
+        sTemplate="item-footer"
+        let-item
+    >
+        <small>{{ item.data.status }}</small>
+    </ng-template>
+</s-kanban>
+```
+
+> **ATENÇÃO:** Use **apenas** os 5 tipos listados acima como valor de `sTemplate`. Valores fora deste conjunto (`KanbanTemplateTypes`) são ignorados sem erro — o template simplesmente não será renderizado.
+

package/dist/data/component-technical/loading-state.md

@@ -0,0 +1,96 @@
+# LoadingState — Guia Técnico
+
+**Seletor:** `s-loading-state` / `[sLoadingState]`  
+**Package:** `@seniorsistemas/angular-components/loading-state`
+
+O LoadingState pode ser usado de duas formas: como **componente wrapper** que envolve o conteúdo a ser bloqueado, ou como **diretiva estrutural** `[sLoadingState]` aplicada diretamente a um elemento existente.
+
+---
+
+## Padrão 1: Como componente wrapper ✅ PREFERIDO
+
+Envolve o conteúdo que deve ser bloqueado durante o carregamento. Quando `loading` é `true`, exibe o indicador animado sobre o conteúdo projetado.
+
+### Exemplo
+
+```typescript
+import { LoadingStateModule } from '@seniorsistemas/angular-components/loading-state';
+
+@Component({
+  imports: [LoadingStateModule],
+  template: `
+    <s-loading-state [loading]="isLoading">
+      <s-card>
+        <!-- conteúdo que será bloqueado durante o carregamento -->
+        <p>{{ data }}</p>
+      </s-card>
+    </s-loading-state>
+  `
+})
+export class MyComponent {
+  protected isLoading = false;
+  protected data = '';
+
+  protected async loadData(): Promise<void> {
+    this.isLoading = true;
+    try {
+      this.data = await this.api.fetchData();
+    } finally {
+      this.isLoading = false; // SEMPRE usar finally para garantir reset
+    }
+  }
+}
+```
+
+---
+
+## Padrão 2: Como diretiva estrutural `[sLoadingState]`
+
+Aplica o comportamento de loading diretamente a um elemento existente sem adicionar um elemento DOM extra ao layout.
+
+### Exemplo
+
+```typescript
+import { LoadingStateModule } from '@seniorsistemas/angular-components/loading-state';
+
+@Component({
+  imports: [LoadingStateModule],
+  template: `
+    <div [sLoadingState]="isLoading">
+      <p>{{ data }}</p>
+    </div>
+  `
+})
+export class MyComponent {
+  protected isLoading = false;
+  protected data = '';
+}
+```
+
+---
+
+## Padrão 3: Bloqueio de tela inteira
+
+Bloqueia a tela inteira durante operações globais.
+
+### Exemplo
+
+```typescript
+@Component({
+  imports: [LoadingStateModule],
+  template: `
+    <s-loading-state [loading]="isLoading" [blockWindow]="true">
+      <router-outlet />
+    </s-loading-state>
+  `
+})
+export class AppComponent {
+  protected isLoading = false;
+}
+```
+
+---
+
+## Notas de integração
+
+- **Sempre use `finally`** ao resetar `isLoading` para garantir que o loading seja removido mesmo em caso de erro.

package/dist/data/component-technical/sidebar.md

@@ -0,0 +1,82 @@
+# Sidebar — Guia Técnico
+
+**Seletor:** `s-sidebar`  
+**Package:** `@seniorsistemas/angular-components/sidebar`
+
+O Sidebar é controlado via binding bidirecional `[(visible)]`. Suporta templates customizáveis para cabeçalho, corpo e rodapé, bloqueio de scroll automático e confirmação antes de fechar.
+
+---
+
+## Padrão 1: Declarativo via `[(visible)]` ✅ PREFERIDO
+
+Controla a abertura e fechamento do sidebar via two-way binding da propriedade `visible`.
+
+### Exemplo
+
+```typescript
+import { SidebarModule } from '@seniorsistemas/angular-components/sidebar';
+
+@Component({
+  imports: [SidebarModule],
+  template: `
+    <s-button label="Abrir painel" (clicked)="isOpen = true" />
+
+    <s-sidebar [(visible)]="isOpen" header="Detalhes">
+      <ng-template sTemplate="body">
+        <!-- conteúdo do painel -->
+      </ng-template>
+      <ng-template sTemplate="footer">
+        <s-button label="Fechar" (clicked)="isOpen = false" />
+        <s-button label="Salvar" priority="primary" (clicked)="save()" />
+      </ng-template>
+    </s-sidebar>
+  `
+})
+export class MyComponent {
+  protected isOpen = false;
+
+  protected save(): void {
+    // lógica de salvamento
+    this.isOpen = false;
+  }
+}
+```
+
+---
+
+## Padrão 2: Com confirmação de fechamento
+
+Usa a propriedade `closeConfirmation` para exibir um dialog de confirmação antes de fechar o sidebar, evitando perda de dados não salvos.
+
+### Exemplo
+
+```typescript
+import { SidebarModule } from '@seniorsistemas/angular-components/sidebar';
+
+@Component({
+  imports: [SidebarModule],
+  template: `
+    <s-sidebar
+      [(visible)]="isOpen"
+      header="Editar registro"
+      [closeConfirmation]="formDirty"
+      closeConfirmationMessage="Existem alterações não salvas. Deseja sair mesmo assim?"
+    >
+      <ng-template sTemplate="body">
+        <!-- formulário -->
+      </ng-template>
+    </s-sidebar>
+  `
+})
+export class MyComponent {
+  protected isOpen = false;
+  protected formDirty = false;
+}
+```
+
+---
+
+## Notas de integração
+
+- Use `sTemplate` com os valores `'header'`, `'body'` e `'footer'` para projetar conteúdo em cada seção.
+- Para formulários no sidebar, sempre considere usar `closeConfirmation` quando o formulário estiver sujo (`dirty`).

package/dist/data/component-technical/table.md

@@ -0,0 +1,19 @@
+# Table — Guia Técnico
+
+**Seletor:** `s-table` / `s-table-columns` / `s-table-paging`
+**Package:** `@seniorsistemas/angular-components/table`
+
+## Exports e Imports
+
+| Tipo       | Símbolo                                                                                                                |
+| ---------- | ---------------------------------------------------------------------------------------------------------------------- |
+| Components | `TableColumnsComponent`, `TablePagingComponent`                                                                        |
+| Module     | `TableModule`                                                                                                          |
+| Directives | `NavigationDirective`, `RowTogllerDirective`                                                                           |
+| Types      | `Column`, `BadgeConfigs`, `BadgeColumn`, `ColumnValues`, `DynamicEditableGrid`, `LocaleOptions`, `NumberLocaleOptions` |
+
+```typescript
+import { TableModule } from '@seniorsistemas/angular-components/table';
+import type { Column } from '@seniorsistemas/angular-components/table';
+```
+

package/dist/data/component-technical/toast.md

@@ -0,0 +1,63 @@
+# Toast — Guia Técnico
+
+**Seletor:** `s-toast`  
+**Package:** `@seniorsistemas/angular-components/toast`
+
+Toasts são **SEMPRE** exibidos via `ToastService`. O componente `s-toast` individual **não deve ser instanciado manualmente** para exibir notificações — o serviço gerencia a criação, empilhamento e remoção automaticamente.
+
+---
+
+## Padrão único: Via `ToastService` ✅ PADRÃO RECOMENDADO
+
+Exibe notificações temporárias na tela injetando `ToastService` de qualquer componente ou serviço.
+
+### Exemplo
+
+```typescript
+import { ToastModule, ToastService } from '@seniorsistemas/angular-components/toast';
+
+// No componente raiz (AppComponent ou layout principal)
+// O <s-toast> deve existir UMA VEZ na aplicação, no nível mais alto
+@Component({
+    imports: [ToastModule],
+    template: `
+        <s-toast />
+        <router-outlet />
+    `,
+})
+export class AppComponent {}
+
+// Em qualquer componente ou serviço
+@Injectable({ providedIn: 'root' })
+export class MyService {
+    private readonly toast = inject(ToastService);
+
+    async save(data: unknown): Promise<void> {
+        try {
+            await this.api.save(data);
+            this.toast.success('Registro salvo com sucesso!');
+        } catch {
+            this.toast.error('Falha ao salvar. Tente novamente.');
+        }
+    }
+}
+```
+
+---
+
+## Métodos disponíveis no `ToastService`
+
+| Método               | Uso                                |
+| -------------------- | ---------------------------------- |
+| `toast.success(msg)` | Operação concluída com sucesso     |
+| `toast.error(msg)`   | Falha ou erro                      |
+| `toast.warning(msg)` | Aviso, situação que merece atenção |
+| `toast.info(msg)`    | Informação neutra                  |
+
+---
+
+## Notas de integração
+
+- O componente `<s-toast>` deve estar presente no template do componente raiz (`AppComponent`) para que os toasts sejam exibidos na aplicação.
+- Por padrão os toasts são removidos automaticamente após alguns segundos. Use `sticky: true` para manter o toast até o usuário fechar manualmente.
+