@seniorsistemas/angular-components 19.3.3 → 19.3.4

package/radio-button/README.md

@@ -0,0 +1,117 @@
+# RadioButton
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente de botão de opção (radio button) individual com integração nativa ao Angular Forms. Permite seleção única em grupos, utilizando o atributo `name` para garantir exclusividade. Pode ser usado isolado ou em conjunto com `RadioButtonGroupComponent`.
+
+## Quando usar
+
+- Seleção exclusiva entre duas ou mais opções mutuamente exclusivas
+- Formulários onde o usuário deve escolher exatamente uma opção de um conjunto pequeno e visível
+
+## Quando não usar
+
+- Para seleção de múltiplas opções simultaneamente — use `Checkbox`
+- Para conjuntos grandes de opções — use `Select` (dropdown)
+- Para toggle simples entre dois estados — use `Switch`
+
+## Instalação
+
+```typescript
+import { RadioButtonComponent } from '@seniorsistemas/angular-components/radio-button';
+
+@Component({
+  standalone: true,
+  imports: [RadioButtonComponent, FormsModule],
+})
+export class MeuComponent {}
+```
+
+## Uso básico
+
+```html
+<s-radiobutton
+  value="opcaoA"
+  name="minhasOpcoes"
+  label="Opção A"
+  [(ngModel)]="selecionado"
+></s-radiobutton>
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `label` | `string` | — | Sim | Texto exibido ao lado do botão de opção |
+| `name` | `string` | — | Sim | Nome do grupo. Deve ser igual para todos os botões do mesmo grupo |
+| `value` | `unknown` | — | Sim | Valor associado ao botão. Emitido ao formulário quando selecionado |
+| `buttonDisabled` | `boolean` | `false` | Não | Two-way binding para desabilitar o botão individualmente |
+| `inputId` | `string` | `'RadioButton_X'` | Não | ID único do `<input>` interno, usado para acessibilidade |
+
+### Outputs
+
+| Evento | Tipo | Descrição |
+|--------|------|-----------|
+| `focusedInput` | `OutputEmitterRef<FocusEvent>` | Emitido quando o campo interno recebe foco |
+| `inputFocusLost` | `OutputEmitterRef<FocusEvent>` | Emitido quando o campo interno perde o foco |
+
+## Exemplos
+
+### Grupo com ngModel
+
+```html
+<div style="display: flex; flex-direction: column; gap: 8px;">
+  <s-radiobutton value="BR" name="paises" label="Brasil" [(ngModel)]="selecionado"></s-radiobutton>
+  <s-radiobutton value="JP" name="paises" label="Japão" [(ngModel)]="selecionado"></s-radiobutton>
+  <s-radiobutton value="CA" name="paises" label="Canadá" [(ngModel)]="selecionado"></s-radiobutton>
+</div>
+<p>Selecionado: {{ selecionado }}</p>
+```
+
+### Grupo com Reactive Forms
+
+```html
+<form [formGroup]="form">
+  <s-radiobutton value="BR" name="pais" label="Brasil" formControlName="pais"></s-radiobutton>
+  <s-radiobutton value="JP" name="pais" label="Japão" formControlName="pais"></s-radiobutton>
+  <s-radiobutton value="CA" name="pais" label="Canadá" formControlName="pais"></s-radiobutton>
+</form>
+```
+
+### Com item desabilitado
+
+```html
+<s-radiobutton value="BR" name="paises" label="Brasil" [(ngModel)]="selecionado"></s-radiobutton>
+<s-radiobutton value="JP" name="paises" label="Japão (indisponível)" [(ngModel)]="selecionado" [buttonDisabled]="true"></s-radiobutton>
+<s-radiobutton value="CA" name="paises" label="Canadá" [(ngModel)]="selecionado"></s-radiobutton>
+```
+
+### Com ID customizado (para testes ou acessibilidade)
+
+```html
+<s-radiobutton
+  value="opcaoA"
+  name="grupo"
+  label="Opção A"
+  inputId="radio-opcao-a"
+  [(ngModel)]="selecionado"
+></s-radiobutton>
+```
+
+## Acessibilidade
+
+- Cada botão é um `<input type="radio">` nativo, totalmente acessível por teclado e leitores de tela
+- Navegação por teclado:
+  - `Tab`: move o foco para o grupo de radio buttons
+  - `Setas ↑↓` ou `←→`: navegam entre as opções do mesmo grupo (`name`)
+  - `Space` ou `Enter`: seleciona o botão em foco
+- O `label` é associado ao `<input>` via `inputId`, garantindo clicabilidade e semântica correta
+- Itens desabilitados são sinalizados com `disabled` nativo
+
+## Componentes relacionados
+
+- [`RadioButtonGroup`](../radio-button-group/README.md) — agrupamento com layout e registro centralizado de radio buttons
+- [`Checkbox`](../checkbox/README.md) — seleção múltipla
+- [`Switch`](../switch/README.md) — alternador booleano simples

package/rating-scale/README.md

@@ -0,0 +1,154 @@
+# RatingScale
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente de escala de avaliação que permite ao usuário selecionar um nó de uma escala visual. Ideal para pesquisas de satisfação (NPS, CSAT) e questionários de feedback. Implementa `ControlValueAccessor` para integração com Reactive Forms e Template-Driven Forms.
+
+## Quando usar
+
+- Pesquisas de satisfação com representação visual emocional (ícones de humor)
+- Net Promoter Score (NPS) com escala numérica de 0 a 10
+- Avaliação de atendimento, suporte ou experiência do usuário
+- Formulários de feedback com escalas qualitativas ou quantitativas
+
+## Quando não usar
+
+- Para avaliações com estrelas — use `StarRating`
+- Para seleção de uma opção de um conjunto sem representação visual de escala — use `RadioButtonGroup`
+- Quando a escala tem mais de 15 itens e o espaço horizontal é limitado
+
+## Instalação
+
+```typescript
+import { RatingScaleModule } from '@seniorsistemas/angular-components/rating-scale';
+
+@NgModule({ imports: [RatingScaleModule] })
+export class MeuModulo {}
+```
+
+## Uso básico
+
+```html
+<s-rating-scale
+  [nodes]="nosAvaliacao"
+  startLabel="Insatisfeito"
+  endLabel="Satisfeito"
+  [(ngModel)]="avaliacaoSelecionada"
+/>
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `nodes` | `RatingScaleNode[]` | — | Sim | Lista de nós que compõem a escala. Cada nó é uma opção clicável |
+| `startLabel` | `string` | `undefined` | Não | Rótulo exibido abaixo do primeiro nó (extremo negativo) |
+| `endLabel` | `string` | `undefined` | Não | Rótulo exibido abaixo do último nó (extremo positivo) |
+| `disabled` | `boolean` | `false` | Não | Desabilita o componente, impedindo seleção de qualquer nó |
+
+### Tipos
+
+```typescript
+interface RatingScaleNode {
+  id: string;      // Identificador único do nó (obrigatório)
+  title?: string;  // Texto exibido abaixo do ícone
+  icon?: string;   // Classe do ícone Font Awesome (ex: 'fa-smile')
+}
+```
+
+> O `FormControl` deve ser do tipo `RatingScaleNode`. O componente emite o objeto `RatingScaleNode` completo quando um nó é selecionado.
+
+## Exemplos
+
+### Escala de humor com ícones
+
+```typescript
+const nosHumor: RatingScaleNode[] = [
+  { id: 'very-happy', title: 'Muito feliz', icon: 'fa-laugh-wink' },
+  { id: 'happy', title: 'Feliz', icon: 'fa-smile' },
+  { id: 'normal', title: 'Normal', icon: 'fa-meh' },
+  { id: 'sad', title: 'Triste', icon: 'fa-sad-tear' },
+  { id: 'very-sad', title: 'Muito triste', icon: 'fa-sad-cry' },
+];
+```
+
+```html
+<form [formGroup]="form">
+  <s-rating-scale
+    formControlName="avaliacao"
+    [nodes]="nosHumor"
+    startLabel="Triste"
+    endLabel="Feliz"
+  ></s-rating-scale>
+</form>
+```
+
+### Escala numérica NPS (1 a 10)
+
+```typescript
+const nosNPS: RatingScaleNode[] = Array.from({ length: 10 }, (_, i) => ({
+  id: String(i + 1),
+  title: String(i + 1),
+}));
+```
+
+```html
+<s-rating-scale
+  formControlName="nps"
+  [nodes]="nosNPS"
+  startLabel="Muito insatisfeito"
+  endLabel="Muito satisfeito"
+></s-rating-scale>
+```
+
+### Com valor pré-selecionado
+
+```typescript
+this.form = new FormGroup({
+  avaliacao: new FormControl(nosHumor[1]), // 'Feliz' pré-selecionado
+});
+```
+
+### Desabilitado (somente leitura)
+
+```html
+<s-rating-scale
+  formControlName="avaliacao"
+  [nodes]="nosHumor"
+  [disabled]="true"
+  startLabel="Triste"
+  endLabel="Feliz"
+></s-rating-scale>
+```
+
+### Apenas ícones (sem títulos nos nós)
+
+```html
+<s-rating-scale
+  [nodes]="[
+    { id: 'very-happy', icon: 'fa-laugh-wink' },
+    { id: 'happy', icon: 'fa-smile' },
+    { id: 'normal', icon: 'fa-meh' },
+    { id: 'sad', icon: 'fa-sad-tear' },
+    { id: 'very-sad', icon: 'fa-sad-cry' }
+  ]"
+  startLabel="Triste"
+  endLabel="Feliz"
+  [(ngModel)]="avaliacao"
+></s-rating-scale>
+```
+
+## Acessibilidade
+
+- Cada nó é um elemento `<button>` nativo, navegável por `Tab`, `Enter` e `Space`
+- O nó selecionado recebe destaque visual
+- Os ícones requerem Font Awesome disponível na aplicação
+- `startLabel` e `endLabel` contextualizam os extremos da escala para todos os usuários
+- Em modo `disabled`, nenhum nó aceita interação e o estilo visual indica o estado inativo
+
+## Componentes relacionados
+
+- [`StarRating`](../star-rating/README.md) — avaliação por estrelas com escala numérica fixa
+- [`RadioButtonGroup`](../radio-button-group/README.md) — seleção única em lista de opções

package/select/README.md

@@ -0,0 +1,147 @@
+# Select
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente de seleção dropdown genérico com suporte a seleção simples e múltipla, filtro, agrupamento, virtual scroll e acessibilidade ARIA completa. Implementa `ControlValueAccessor` para integração com Angular Forms.
+
+## Quando usar
+
+- Selecionar uma ou mais opções de uma lista fixa de itens
+- Substituir `<select>` nativo com estilo customizado e recursos avançados
+- Listas longas que precisam de busca textual (`filter`)
+- Opções organizadas por categoria (`group`)
+- Listas com muitos itens que exigem virtualização (`virtualScroll`)
+
+## Quando não usar
+
+- Listas com poucas opções sempre visíveis — prefira `SelectButton` ou `RadioButtonGroup`
+- Busca com carregamento dinâmico de resultados — prefira `Autocomplete`
+- Entrada de múltiplos valores livres — prefira `Chips`
+
+## Instalação
+
+```typescript
+import { SelectComponent } from '@seniorsistemas/angular-components/select';
+
+@Component({ standalone: true, imports: [SelectComponent] })
+export class MeuComponent {}
+```
+
+## Uso básico
+
+```html
+<s-select
+  formControlName="pais"
+  [options]="paises"
+  optionLabel="nome"
+  optionValue="codigo"
+  placeholder="Selecione um país" />
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `options` | `T[]` | — | Sim | Lista de opções disponíveis para seleção |
+| `placeholder` | `string` | `''` | Não | Texto exibido quando nenhuma opção está selecionada |
+| `optionLabel` | `keyof T` | `undefined` | Não | Chave do objeto usada como texto de exibição. Obrigatório quando `options` são objetos |
+| `optionValue` | `keyof T` | `undefined` | Não | Chave do objeto cujo valor será emitido ao formulário |
+| `multiple` | `boolean` | `false` | Não | Habilita seleção de múltiplas opções com checkboxes |
+| `filter` | `boolean` | `false` | Não | Exibe campo de busca textual no topo do dropdown |
+| `filterBy` | `keyof T \| (keyof T)[]` | `undefined` | Não | Campo(s) usados para filtragem textual. Padrão: `optionLabel` |
+| `showClear` | `boolean` | `false` | Não | Exibe botão X para limpar a seleção atual |
+| `checkmark` | `boolean` | `false` | Não | Exibe ícone de checkmark ao lado da opção selecionada |
+| `group` | `boolean` | `false` | Não | Habilita agrupamento. As opções devem ter estrutura `{ name, items[] }` |
+| `virtualScroll` | `boolean` | `false` | Não | Virtualiza a lista para melhor performance com grandes volumes |
+| `virtualScrollItemSize` | `number` | `37` | Não | Altura fixa de cada item em pixels para cálculo do virtual scroll |
+| `emptyMessage` | `string \| null` | `null` | Não | Mensagem exibida quando nenhuma opção corresponde ao filtro |
+| `disabled` | `boolean` (model) | `false` | Não | Controla o estado desabilitado via two-way binding |
+| `showOptions` | `boolean` (model) | `false` | Não | Controla a visibilidade do painel via two-way binding |
+| `ariaLabel` | `string` | `''` | Não | Label de acessibilidade do componente |
+| `ariaLabelledBy` | `string` | `''` | Não | ID do elemento externo que descreve o componente |
+
+### Tipos
+
+```typescript
+// Estrutura para opções agrupadas
+interface GroupedOption {
+  name: string;   // label do grupo
+  items: T[];     // opções filhas
+}
+```
+
+## Exemplos
+
+### Seleção simples
+
+```html
+<form [formGroup]="form">
+  <s-select
+    formControlName="pais"
+    [options]="paises"
+    optionLabel="nome"
+    optionValue="nome"
+    placeholder="Selecione um país"
+    [showClear]="true"
+    ariaLabel="Selecione um país"
+  ></s-select>
+</form>
+```
+
+### Com filtro de busca
+
+```html
+<s-select
+  formControlName="pais"
+  [options]="paises"
+  optionLabel="nome"
+  optionValue="nome"
+  placeholder="Buscar país..."
+  [filter]="true"
+  [showClear]="true"
+></s-select>
+```
+
+### Seleção múltipla
+
+```html
+<s-select
+  formControlName="paises"
+  [options]="paises"
+  optionLabel="nome"
+  optionValue="nome"
+  placeholder="Selecione países..."
+  [multiple]="true"
+  [filter]="true"
+  [showClear]="true"
+></s-select>
+```
+
+### Opções agrupadas
+
+```html
+<s-select
+  formControlName="pais"
+  [options]="paisesPorContinente"
+  optionLabel="nome"
+  optionValue="nome"
+  placeholder="Selecione por continente..."
+  [group]="true"
+  ariaLabel="Selecione um país por continente"
+></s-select>
+```
+
+## Acessibilidade
+
+- O componente implementa o padrão ARIA `combobox` com `role="combobox"`, `aria-expanded` e `aria-haspopup`
+- Navegação pelo teclado: `ArrowDown`/`ArrowUp` para mover entre opções, `Enter`/`Espaço` para selecionar, `Escape` para fechar
+- Com `filter` aberto: `ArrowDown` move o foco para a lista, `Escape` retorna foco ao campo de busca
+- Os inputs `ariaLabel` e `ariaLabelledBy` permitem associar descrições externas para leitores de tela
+- Ao fechar o dropdown, o foco retorna automaticamente ao elemento trigger
+
+## Componentes relacionados
+
+- [`SelectButton`](../select-button/README.md) — quando as opções devem estar sempre visíveis como botões
+- [`Autocomplete`](../autocomplete/README.md) — quando a lista é carregada dinamicamente via busca

package/select-button/README.md

@@ -0,0 +1,137 @@
+# SelectButton
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente para seleção de uma ou múltiplas opções através de botões visuais agrupados. Alternativa visual ao `select` ou `radio button` quando as opções são poucas e devem estar sempre visíveis. Implementa `ControlValueAccessor` para integração com Angular Forms.
+
+## Quando usar
+
+- Filtros de período (hoje, semana, mês) em dashboards
+- Alternância entre modos de visualização (lista, grade, mapa)
+- Seleção de tipo ou categoria com opções mutuamente exclusivas e poucas alternativas (até 5)
+- Filtros com múltiplos critérios aplicáveis simultaneamente (`multiple: true`)
+
+## Quando não usar
+
+- Listas com muitas opções — prefira `Select` com dropdown
+- Seleção única com rótulos descritivos longos — prefira `RadioButtonGroup`
+- Entrada de valores livres — prefira `Chips`
+
+## Instalação
+
+```typescript
+import { SelectButtonModule } from '@seniorsistemas/angular-components/select-button';
+
+@NgModule({ imports: [SelectButtonModule] })
+export class MeuModule {}
+```
+
+## Uso básico
+
+```html
+<s-select-button
+  formControlName="periodo"
+  [items]="periodos"
+/>
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `items` | `SelectButtonItem[]` | — | Sim | Lista de itens exibidos como botões de seleção |
+| `multiple` | `boolean` | `false` | Não | Permite selecionar múltiplos itens simultaneamente |
+
+### Outputs
+
+| Evento | Tipo | Descrição |
+|--------|------|-----------|
+| `itemSelected` | `EventEmitter<SelectButtonItem[]>` | Emitido após a seleção ser atualizada. Emite o array completo de itens ativos |
+| `itemClicked` | `EventEmitter<SelectButtonItem>` | Emitido quando um item habilitado é clicado, antes da atualização da seleção |
+
+### Tipos
+
+```typescript
+interface SelectButtonItem {
+  label: string;     // Texto exibido no botão. Obrigatório.
+  value: any;        // Valor associado. Obrigatório.
+  disabled?: boolean; // Desabilita o item individualmente.
+}
+```
+
+## Exemplos
+
+### Seleção única — filtro de período
+
+```html
+<form [formGroup]="form">
+  <s-select-button
+    formControlName="periodo"
+    [items]="periodos"
+    [multiple]="false"
+    (itemSelected)="onPeriodoChange($event)"
+  ></s-select-button>
+</form>
+```
+
+```typescript
+periodos: SelectButtonItem[] = [
+  { label: 'Hoje', value: 'today' },
+  { label: 'Esta semana', value: 'week' },
+  { label: 'Este mês', value: 'month' },
+  { label: 'Este ano', value: 'year' },
+];
+```
+
+### Seleção múltipla
+
+```html
+<form [formGroup]="form">
+  <s-select-button
+    formControlName="frameworks"
+    [items]="frameworks"
+    [multiple]="true"
+    (itemSelected)="onSelecionados($event)"
+    (itemClicked)="onClicado($event)"
+  ></s-select-button>
+</form>
+```
+
+### Com item desabilitado individualmente
+
+```html
+<s-select-button
+  formControlName="status"
+  [items]="statusItems"
+></s-select-button>
+```
+
+```typescript
+statusItems: SelectButtonItem[] = [
+  { label: 'Ativo', value: 'active' },
+  { label: 'Inativo', value: 'inactive' },
+  { label: 'Bloqueado', value: 'blocked', disabled: true },
+];
+```
+
+### Com valor pré-selecionado via FormControl
+
+```typescript
+form = new FormGroup({
+  selection: new FormControl([{ label: 'Angular', value: 'angular' }])
+});
+```
+
+## Acessibilidade
+
+- Cada item do grupo é renderizado como um `<button>` com `role="button"`
+- Itens desabilitados recebem o atributo `disabled` nativo e não respondem a foco ou clique
+- O estado de seleção é indicado visualmente por classes CSS; recomenda-se associar `aria-pressed` via customização para leitores de tela
+- O componente inteiro pode ser desabilitado via `FormControl.disable()` ou `setDisabledState`
+
+## Componentes relacionados
+
+- [`Select`](../select/README.md) — quando há muitas opções ou o espaço é limitado
+- [`RadioButtonGroup`](../radio-button-group/README.md) — seleção única com layout vertical/horizontal

package/sidebar/README.md

@@ -0,0 +1,117 @@
+# Sidebar
+
+![Status](https://img.shields.io/badge/status-stable-brightgreen)
+
+Componente de painel lateral deslizante que aparece sobre o conteúdo vindo do lado direito da tela. Suporta templates customizados para cabeçalho, corpo e rodapé via `sTemplate`, bloqueio automático de scroll e confirmação de fechamento.
+
+## Quando usar
+
+- Exibir detalhes de um item selecionado sem sair da página atual
+- Formulários simples de edição rápida sem necessidade de uma nova rota
+- Painéis de filtros avançados em listas e tabelas
+- Configurações ou propriedades de um elemento da interface
+- Fluxos complementares que não devem interromper o contexto principal
+
+## Quando não usar
+
+- Confirmações de ações destrutivas — prefira `ConfirmDialog`
+- Conteúdo crítico que exige atenção exclusiva do usuário — prefira `Dialog` modal
+- Navegação principal da aplicação — prefira um menu lateral (`nav`) fixo
+
+## Instalação
+
+```typescript
+import { SidebarModule } from '@seniorsistemas/angular-components/sidebar';
+
+@NgModule({ imports: [SidebarModule] })
+export class MeuModule {}
+```
+
+## Uso básico
+
+```html
+<s-sidebar [(visible)]="sidebarAberta" header="Detalhes">
+  <p>Conteúdo do painel lateral.</p>
+</s-sidebar>
+
+<button (click)="sidebarAberta = true">Abrir Sidebar</button>
+```
+
+## API
+
+### Inputs
+
+| Propriedade | Tipo | Padrão | Obrigatório | Descrição |
+|-------------|------|--------|:-----------:|-----------|
+| `visible` | `ModelSignal<boolean>` | `false` | Não | Controla a visibilidade da sidebar. Suporta `[(visible)]` |
+| `closable` | `boolean` | `true` | Não | Exibe o botão de fechar (X) no cabeçalho |
+| `dismissible` | `boolean` | `true` | Não | Fechar ao clicar no backdrop (área escurecida fora do painel) |
+| `closeOnEscape` | `boolean` | `true` | Não | Fechar ao pressionar a tecla Escape |
+| `header` | `string` | `undefined` | Não | Texto exibido no cabeçalho padrão. Substituível via `sTemplate="header"` |
+| `largeSized` | `boolean` | `false` | Não | Aumenta a largura da sidebar para acomodar mais conteúdo |
+| `cache` | `boolean` | `false` | Não | Mantém o conteúdo no DOM quando fechada, preservando estado interno |
+| `registerConfirmClose` | `() => boolean` | `() => true` | Não | Função chamada antes de fechar; retornar `false` bloqueia o fechamento |
+
+## Exemplos
+
+### Sidebar básica
+
+```html
+<s-sidebar [(visible)]="visible" header="Filtros Avançados" [closable]="true">
+  <p>Conteúdo do painel.</p>
+</s-sidebar>
+<s-button label="Abrir" (clicked)="visible = true"></s-button>
+```
+
+### Sidebar grande
+
+```html
+<s-sidebar [(visible)]="visible" header="Edição de Registro" [largeSized]="true">
+  <!-- formulário complexo -->
+</s-sidebar>
+```
+
+### Com templates customizados
+
+```html
+<s-sidebar [(visible)]="visible">
+  <ng-template sTemplate="header">
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <i class="fa fa-filter"></i>
+      <span>Filtros Avançados</span>
+    </div>
+  </ng-template>
+  <ng-template sTemplate="body">
+    <!-- conteúdo do painel -->
+  </ng-template>
+  <ng-template sTemplate="footer">
+    <s-button label="Aplicar" priority="primary" (clicked)="visible = false"></s-button>
+  </ng-template>
+</s-sidebar>
+```
+
+### Com confirmação de fechamento
+
+```typescript
+confirmClose = (): boolean => {
+  return window.confirm('Deseja realmente fechar? As alterações serão perdidas.');
+};
+```
+
+```html
+<s-sidebar [(visible)]="visible" [registerConfirmClose]="confirmClose">
+  <!-- formulário com alterações não salvas -->
+</s-sidebar>
+```
+
+## Acessibilidade
+
+- A sidebar utiliza `cdkTrapFocus` para aprisionar o foco dentro do painel enquanto aberta
+- Pressionar `Escape` fecha a sidebar quando `closeOnEscape = true`
+- O painel entra e sai com animação de deslizamento (300ms) vindo da direita
+- Ao abrir, o scroll da página é bloqueado automaticamente e restaurado ao fechar
+
+## Componentes relacionados
+
+- [`Dialog`](../dialog/README.md) — modal centralizado para confirmações e conteúdo crítico
+- [`SlideInBar`](../slide-in-bar/README.md) — painel que expande/colapsa embutido no layout