semmet-angular 0.27.0 → 0.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.en.md +255 -0
  2. package/README.md +147 -120
  3. package/README.pt-BR.md +267 -0
  4. package/package.json +3 -1
  5. package/src/ci/index.d.ts +3 -0
  6. package/src/ci/index.js +117 -0
  7. package/src/ci/index.js.map +1 -0
  8. package/src/ci/index.ts +143 -0
  9. package/src/ci/schema.d.ts +4 -0
  10. package/src/ci/schema.js +3 -0
  11. package/src/ci/schema.js.map +1 -0
  12. package/src/ci/schema.json +20 -0
  13. package/src/ci/schema.ts +4 -0
  14. package/src/collection.json +5 -0
package/README.md CHANGED
@@ -1,59 +1,86 @@
1
1
  # semmet-angular
2
2
 
3
- **Accessible UI Delivery Kit for Angular.**
3
+ **Kit de entrega de UI acessível para Angular.**
4
4
 
5
- `semmet-angular` is a delivery-focused schematic collection for Angular teams that want to ship accessible UI faster: components with real ARIA behavior, a consistent visual identity, and generated test files from the first command.
5
+ `semmet-angular` é uma coleção de schematics focada em entrega para times Angular que querem publicar interfaces acessíveis mais rápido: componentes com comportamento ARIA real, identidade visual consistente e arquivos de teste gerados desde o primeiro comando.
6
6
 
7
- Semmet Angular helps teams generate, test, verify, and package accessible Angular UI using the Angular CLI ecosystem.
7
+ Semmet Angular ajuda times a gerar, testar, verificar e empacotar UI acessível usando o ecossistema do Angular CLI.
8
8
 
9
9
  **Gerar. Testar. Verificar. Empacotar.**
10
10
 
11
- Read the broader product direction in [PRODUCT_VISION.md](./PRODUCT_VISION.md).
11
+ Leia a direção geral do produto em [PRODUCT_VISION.md](./PRODUCT_VISION.md).
12
12
 
13
- `ng generate semmet-angular:accordion my-faq` scaffolds a standalone, signals-based Angular component — `.ts`/`.html`/`.css` — plus `.spec.ts` and `.e2e-spec.ts` smoke tests. The generated component implements a W3C ARIA Authoring Practices Guide pattern for real: correct roles and `aria-*` wiring, the keyboard/focus behavior the pattern requires (arrow-key navigation, focus traps, focus restoration...), and a consistent visual identity out of the box.
13
+ English documentation is available in [README.en.md](./README.en.md).
14
14
 
15
- ## Usage
15
+ `ng generate semmet-angular:accordion minha-faq` cria um componente Angular standalone baseado em signals — `.ts`/`.html`/`.css` — junto com testes `.spec.ts` e `.e2e-spec.ts`. O componente gerado implementa de verdade um padrão do W3C ARIA Authoring Practices Guide: roles corretos, ligação de atributos `aria-*`, comportamento de teclado/foco exigido pelo padrão (navegação por setas, focus trap, restauração de foco...) e uma identidade visual consistente logo de saída.
16
16
 
17
- ```
17
+ ## Uso
18
+
19
+ ```bash
18
20
  ng add semmet-angular
19
- ng generate semmet-angular:accordion my-faq
21
+ ng generate semmet-angular:accordion minha-faq
22
+ ng generate semmet-angular:ci
20
23
  ```
21
24
 
22
- `ng add semmet-angular` installs the package and configures the delivery workflow once for the target application, including Playwright e2e support and npm scripts. Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
25
+ `ng add semmet-angular` instala o pacote e configura uma vez o fluxo de entrega da aplicação alvo, incluindo suporte a e2e com Playwright e scripts npm. Cada componente gerado entra no seu projeto do mesmo jeito que entraria com `ng generate component` (respeitando `angular.json`, `sourceRoot` e prefixo de seletor), e tem **zero dependência em tempo de execução** deste pacote — `semmet-angular` só é necessário na geração.
23
26
 
24
- ## Generated tests
27
+ ## Fluxo de Entrega
25
28
 
26
- Every component schematic generates test files next to the component:
29
+ Depois de rodar `ng add semmet-angular`, use:
27
30
 
28
- ```
29
- my-faq.ts
30
- my-faq.html
31
- my-faq.css
32
- my-faq.spec.ts
33
- my-faq.e2e-spec.ts
31
+ ```bash
32
+ npm test
33
+ npm run e2e
34
+ npm run e2e:ui
35
+ npm run verify
34
36
  ```
35
37
 
36
- The unit test uses Angular's `TestBed` to verify the component through its public selector. Interactive components also generate behavior-focused tests for their ARIA state, keyboard flow, value changes, focus management, and open/close behavior. The e2e test uses Playwright and becomes active as soon as the component is mounted in a route or host component. If the component has not been added to any rendered page yet, the generated e2e smoke test is skipped with a clear message instead of failing the whole suite.
38
+ `npm run e2e` executa o Playwright contra o servidor de desenvolvimento Angular configurado por `playwright.config.ts`; `npm run e2e:ui` abre a interface interativa do Playwright.
37
39
 
38
- After running `ng add semmet-angular`, use:
40
+ O script `npm run verify` é criado sem sobrescrever um script `verify` existente. Quando os scripts estão disponíveis no `package.json` da aplicação, ele compõe um fluxo simples com:
39
41
 
40
- ```
41
- npm test
42
+ ```bash
43
+ npm test -- --watch=false
42
44
  npm run e2e
43
- npm run e2e:ui
45
+ npm run build
46
+ npm run lint
44
47
  ```
45
48
 
46
- `npm run e2e` runs Playwright against the Angular dev server configured by `playwright.config.ts`; `npm run e2e:ui` opens Playwright's interactive UI.
49
+ `lint` só entra quando a aplicação já tem um script `lint`; `build` e `test` seguem a mesma lógica. O `e2e` entra depois da configuração do Playwright feita pelo `ng add`.
47
50
 
48
- ## Projected content containers
51
+ ## CI com GitHub Actions
52
+
53
+ ```bash
54
+ ng generate semmet-angular:ci
55
+ ```
49
56
 
50
- Some generated components are containers: they own the ARIA wiring, keyboard behavior, focus management, and visual shell, while your app owns the content rendered inside them.
57
+ Esse comando gera `.github/workflows/ci.yml` usando os scripts já existentes no `package.json`. O workflow detecta o gerenciador de pacotes por lockfile (`package-lock.json`, `pnpm-lock.yaml` ou `yarn.lock`), instala dependências e executa `verify` quando disponível. Se `verify` ainda não existir, ele roda `build`, `test` e `e2e` conforme esses scripts existirem.
51
58
 
52
- `accordion`, `tabs`, `carousel`, `disclosure`, `card`, `button`, `badge`, `navbar`, `table`, and `button-group` use Angular's modern projection pattern with `ng-template`, signal queries, and `NgTemplateOutlet`. This means you can place real app components inside generated components without dynamic component factories.
59
+ Por padrão, o schematic não sobrescreve um workflow existente. Use `--force` quando quiser substituir `.github/workflows/ci.yml`.
53
60
 
54
- Example after generating `faq`:
61
+ ## Testes Gerados
55
62
 
63
+ Todo schematic de componente gera arquivos de teste ao lado do componente:
64
+
65
+ ```text
66
+ minha-faq.ts
67
+ minha-faq.html
68
+ minha-faq.css
69
+ minha-faq.spec.ts
70
+ minha-faq.e2e-spec.ts
56
71
  ```
72
+
73
+ O teste unitário usa o `TestBed` do Angular para verificar o componente pelo seletor público. Componentes interativos também geram testes focados em comportamento: estado ARIA, fluxo de teclado, mudanças de valor, gerenciamento de foco e abertura/fechamento. O teste e2e usa Playwright e passa a valer assim que o componente estiver montado em uma rota ou componente host. Se o componente ainda não estiver em nenhuma página renderizada, o smoke test e2e gerado é pulado com uma mensagem clara, sem quebrar a suíte inteira.
74
+
75
+ ## Containers com Conteúdo Projetado
76
+
77
+ Alguns componentes gerados são containers: eles cuidam da ligação ARIA, comportamento de teclado, gerenciamento de foco e casca visual, enquanto a sua aplicação controla o conteúdo renderizado dentro deles.
78
+
79
+ `accordion`, `tabs`, `carousel`, `disclosure`, `card`, `button`, `badge`, `navbar`, `table` e `button-group` usam o padrão moderno de projeção do Angular com `ng-template`, signal queries e `NgTemplateOutlet`. Isso permite colocar componentes reais da aplicação dentro dos componentes gerados sem factories de componente dinâmico.
80
+
81
+ Exemplo depois de gerar `faq`:
82
+
83
+ ```ts
57
84
  import { Component, signal } from '@angular/core';
58
85
  import { Faq, FaqItem } from './faq/faq';
59
86
  import { ProfilePanel } from './profile-panel/profile-panel';
@@ -71,77 +98,77 @@ export class App {
71
98
  }
72
99
  ```
73
100
 
74
- ```
101
+ ```html
75
102
  <app-faq>
76
- <ng-template faqItem id="profile" title="Profile" [expanded]="true">
103
+ <ng-template faqItem id="profile" title="Perfil" [expanded]="true">
77
104
  <app-profile-panel />
78
105
  </ng-template>
79
106
 
80
- <ng-template faqItem id="settings" title="Settings">
107
+ <ng-template faqItem id="settings" title="Configurações">
81
108
  <app-settings-panel [userId]="userId()" (saved)="reload()" />
82
109
  </ng-template>
83
110
  </app-faq>
84
111
  ```
85
112
 
86
- The same pattern applies to `tabs`, `carousel`, and `disclosure`:
113
+ O mesmo padrão vale para `tabs`, `carousel` e `disclosure`:
87
114
 
88
- ```
115
+ ```html
89
116
  <app-settings-tabs>
90
- <ng-template settingsTabsItem id="profile" label="Profile" [selected]="true">
117
+ <ng-template settingsTabsItem id="profile" label="Perfil" [selected]="true">
91
118
  <app-profile-panel />
92
119
  </ng-template>
93
120
  </app-settings-tabs>
94
121
 
95
122
  <app-featured-carousel>
96
- <ng-template featuredCarouselSlide id="intro" label="Introduction">
123
+ <ng-template featuredCarouselSlide id="intro" label="Introdução">
97
124
  <app-intro-slide />
98
125
  </ng-template>
99
126
  </app-featured-carousel>
100
127
 
101
- <app-details label="Show profile details" [(expanded)]="profileDetailsOpen">
128
+ <app-details label="Mostrar detalhes do perfil" [(expanded)]="profileDetailsOpen">
102
129
  <ng-template detailsContent>
103
130
  <app-profile-details [userId]="userId()" />
104
131
  </ng-template>
105
132
  </app-details>
106
133
  ```
107
134
 
108
- By default, projected panel/slide content is preserved after its first render. Set `[preserveContent]="false"` on the generated container to destroy inactive content when it closes or becomes inactive.
135
+ Por padrão, o conteúdo projetado de painel/slide é preservado depois da primeira renderização. Use `[preserveContent]="false"` no container gerado para destruir conteúdo inativo quando ele fechar ou ficar inativo.
109
136
 
110
- The smaller structural schematics keep their simple input APIs and add safe slots where the generated component still owns the accessible structure:
137
+ Os schematics estruturais menores mantêm APIs simples por input e adicionam slots seguros onde o componente gerado continua dono da estrutura acessível:
111
138
 
112
- ```
113
- <app-product-card title="Accessible components">
139
+ ```html
140
+ <app-product-card title="Componentes acessíveis">
114
141
  <ng-template productCardMedia>
115
- <img src="/assets/card.png" alt="Generated Angular component preview" />
142
+ <img src="/assets/card.png" alt="Prévia de componente Angular gerado" />
116
143
  </ng-template>
117
144
 
118
145
  <ng-template productCardDescription>
119
- Generate Angular components with ARIA, keyboard behavior and signals.
146
+ Gere componentes Angular com ARIA, comportamento de teclado e signals.
120
147
  </ng-template>
121
148
 
122
149
  <ng-template productCardActions>
123
- <a href="/docs">Read docs</a>
150
+ <a href="/docs">Ler docs</a>
124
151
  </ng-template>
125
152
  </app-product-card>
126
153
 
127
- <app-save-button label="Save">
154
+ <app-save-button label="Salvar">
128
155
  <ng-template saveButtonLeading>
129
156
  <app-save-icon aria-hidden="true" />
130
157
  </ng-template>
131
158
  </app-save-button>
132
159
 
133
- <app-status-badge accessibleLabel="Build passed">
134
- <ng-template statusBadgeLabel>Passed</ng-template>
160
+ <app-status-badge accessibleLabel="Build passou">
161
+ <ng-template statusBadgeLabel>Passou</ng-template>
135
162
  </app-status-badge>
136
163
 
137
164
  <app-main-navbar brand="Acme">
138
165
  <ng-template mainNavbarActions>
139
- <a href="/account">Account</a>
166
+ <a href="/conta">Conta</a>
140
167
  </ng-template>
141
168
  </app-main-navbar>
142
169
 
143
- <app-results-table caption="Quarterly revenue" [rows]="results">
144
- <ng-template resultsTableEmpty>No revenue results yet.</ng-template>
170
+ <app-results-table caption="Receita trimestral" [rows]="results">
171
+ <ng-template resultsTableEmpty>Nenhum resultado de receita ainda.</ng-template>
145
172
  </app-results-table>
146
173
 
147
174
  <app-view-switcher [items]="views">
@@ -153,90 +180,90 @@ The smaller structural schematics keep their simple input APIs and add safe slot
153
180
 
154
181
  ## Schematics (43)
155
182
 
156
- **Overlays & disclosure**
183
+ **Overlays e disclosure**
157
184
 
158
- | Command | Generates | Keyboard/focus behavior implemented |
185
+ | Comando | Gera | Comportamento de teclado/foco implementado |
159
186
  |---|---|---|
160
- | `ng generate semmet-angular:accordion <name>` | [Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) | Click/Enter/Space toggle; Up/Down/Home/End moves focus between headers |
161
- | `ng generate semmet-angular:disclosure <name>` | [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) | Click/Enter/Space toggle |
162
- | `ng generate semmet-angular:dialog <name>` | [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) | Focus moves in on open; Tab/Shift+Tab focus trap; Escape closes; focus returns to trigger on close |
163
- | `ng generate semmet-angular:alert-dialog <name>` | [Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) | Same focus trap as Dialog; initial focus on the least destructive action (Cancel) |
164
- | `ng generate semmet-angular:offcanvas <name>` | Offcanvas / Drawer | Modal dialog semantics; focus moves in; Tab/Shift+Tab focus trap; Escape/backdrop close; focus returns to trigger |
165
- | `ng generate semmet-angular:popover <name>` | Popover | Disclosure trigger with `aria-haspopup="dialog"`; Escape closes; outside click dismisses |
166
- | `ng generate semmet-angular:tooltip <name>` | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) | Shows on hover **and** focus (required for keyboard users); hides on blur/mouseleave/Escape |
167
- | `ng generate semmet-angular:menu-button <name>` | [Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) | Up/Down/Home/End/Escape inside the menu; closes on outside click; focus returns to the trigger |
168
- | `ng generate semmet-angular:button <name>` | Button | Native `<button>` with variant, size, disabled, busy, optional pressed state, and safe label/icon slots |
169
- | `ng generate semmet-angular:button-group <name>` | Button Group | Native grouped buttons with `role="group"`, optional `aria-pressed` toggle state, and safe item-label projection |
170
- | `ng generate semmet-angular:close-button <name>` | Close Button | Native icon button with required accessible label |
171
-
172
- **Navigation & structure**
173
-
174
- | Command | Generates | Keyboard/focus behavior implemented |
187
+ | `ng generate semmet-angular:accordion <nome>` | [Accordion](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) | Clique/Enter/Espaço alterna; Cima/Baixo/Home/End move foco entre cabeçalhos |
188
+ | `ng generate semmet-angular:disclosure <nome>` | [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) | Clique/Enter/Espaço alterna |
189
+ | `ng generate semmet-angular:dialog <nome>` | [Dialog (Modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) | Foco entra ao abrir; Tab/Shift+Tab prende o foco; Escape fecha; foco volta para o acionador |
190
+ | `ng generate semmet-angular:alert-dialog <nome>` | [Alert Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) | Mesmo focus trap do Dialog; foco inicial na ação menos destrutiva (Cancelar) |
191
+ | `ng generate semmet-angular:offcanvas <nome>` | Offcanvas / Drawer | Semântica de dialog modal; foco entra; Tab/Shift+Tab prende o foco; Escape/backdrop fecha; foco volta para o acionador |
192
+ | `ng generate semmet-angular:popover <nome>` | Popover | Acionador disclosure com `aria-haspopup="dialog"`; Escape fecha; clique externo dispensa |
193
+ | `ng generate semmet-angular:tooltip <nome>` | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) | Aparece no hover **e** no foco; esconde no blur/mouseleave/Escape |
194
+ | `ng generate semmet-angular:menu-button <nome>` | [Menu Button](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/) | Cima/Baixo/Home/End/Escape dentro do menu; fecha em clique externo; foco volta para o acionador |
195
+ | `ng generate semmet-angular:button <nome>` | Button | `<button>` nativo com variante, tamanho, desabilitado, ocupado, estado pressionado opcional e slots seguros de rótulo/ícone |
196
+ | `ng generate semmet-angular:button-group <nome>` | Button Group | Botões nativos agrupados com `role="group"`, estado toggle opcional com `aria-pressed` e projeção segura de rótulo por item |
197
+ | `ng generate semmet-angular:close-button <nome>` | Close Button | Botão de ícone nativo com rótulo acessível obrigatório |
198
+
199
+ **Navegação e estrutura**
200
+
201
+ | Comando | Gera | Comportamento de teclado/foco implementado |
175
202
  |---|---|---|
176
- | `ng generate semmet-angular:tabs <name>` | [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) | Automatic activation; Left/Right/Home/End with roving `tabindex` |
177
- | `ng generate semmet-angular:breadcrumb <name>` | [Breadcrumb](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) | Static — plain links + `aria-current="page"` |
178
- | `ng generate semmet-angular:navigation-menu <name>` | [Navigation Menu (Disclosure)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) | Click/Enter/Space toggles the submenu — deliberately avoids `role="menu"`, reserved for app-style menus |
179
- | `ng generate semmet-angular:navbar <name>` | Navbar | Semantic `nav`/list/link structure with responsive disclosure toggle, `aria-current`, and safe brand/action slots |
180
- | `ng generate semmet-angular:pagination <name>` | Pagination | Working page state; Previous/Next disable at the boundaries |
181
- | `ng generate semmet-angular:skip-link <name>` | [Skip Link](https://www.w3.org/WAI/WCAG21/Techniques/general/G1) | Hidden until focused, per the standard skip-link pattern |
182
- | `ng generate semmet-angular:landmarks <name>` | [Landmarks (Page Skeleton)](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) | Content-projected layout wrapper (`header`/`nav`/`main`/`aside`/`footer` slots) |
183
- | `ng generate semmet-angular:tree-view <name>` | [Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) | Up/Down/Left/Right/Home/End/Enter with roving `tabindex` across visible nodes |
184
- | `ng generate semmet-angular:toolbar <name>` | [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) | Left/Right/Home/End with roving `tabindex` |
185
- | `ng generate semmet-angular:card <name>` | Card | Semantic `<article>` with owned heading/description/action/media structure and safe projection slots |
186
- | `ng generate semmet-angular:list-group <name>` | List Group | Semantic list structure with action items, active state, optional badges, and disabled states |
187
- | `ng generate semmet-angular:table <name>` | [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) | Caption + scoped headers, input rows, and safe caption/empty-state slots |
188
-
189
- **Forms & inputs**
190
-
191
- | Command | Generates | Keyboard/focus behavior implemented |
203
+ | `ng generate semmet-angular:tabs <nome>` | [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) | Ativação automática; Esquerda/Direita/Home/End com `tabindex` roving |
204
+ | `ng generate semmet-angular:breadcrumb <nome>` | [Breadcrumb](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) | Estático — links simples + `aria-current="page"` |
205
+ | `ng generate semmet-angular:navigation-menu <nome>` | [Navigation Menu (Disclosure)](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) | Clique/Enter/Espaço alterna submenu; evita `role="menu"` de propósito, reservado para menus de aplicação |
206
+ | `ng generate semmet-angular:navbar <nome>` | Navbar | Estrutura semântica `nav`/lista/link com toggle responsivo, `aria-current` e slots seguros de marca/ações |
207
+ | `ng generate semmet-angular:pagination <nome>` | Pagination | Estado de página funcional; Anterior/Próximo desabilitam nos limites |
208
+ | `ng generate semmet-angular:skip-link <nome>` | [Skip Link](https://www.w3.org/WAI/WCAG21/Techniques/general/G1) | Escondido até receber foco, conforme o padrão de skip link |
209
+ | `ng generate semmet-angular:landmarks <nome>` | [Landmarks (Page Skeleton)](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) | Wrapper de layout com projeção de conteúdo (`header`/`nav`/`main`/`aside`/`footer`) |
210
+ | `ng generate semmet-angular:tree-view <nome>` | [Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) | Cima/Baixo/Esquerda/Direita/Home/End/Enter com `tabindex` roving nos nós visíveis |
211
+ | `ng generate semmet-angular:toolbar <nome>` | [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) | Esquerda/Direita/Home/End com `tabindex` roving |
212
+ | `ng generate semmet-angular:card <nome>` | Card | `<article>` semântico com heading/descrição/ações/mídia e slots seguros |
213
+ | `ng generate semmet-angular:list-group <nome>` | List Group | Estrutura semântica de lista com itens de ação, estado ativo, badges opcionais e estados desabilitados |
214
+ | `ng generate semmet-angular:table <nome>` | [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) | Caption + cabeçalhos escopados, linhas por input e slots seguros de caption/estado vazio |
215
+
216
+ **Formulários e inputs**
217
+
218
+ | Comando | Gera | Comportamento de teclado/foco implementado |
192
219
  |---|---|---|
193
- | `ng generate semmet-angular:form <name>` | Form | Native `<form>` with labeled controls, inline validation, and status messaging |
194
- | `ng generate semmet-angular:input <name>` | Input | Native `<input>` with label, hint, validation message wiring, and signal-backed value |
195
- | `ng generate semmet-angular:select <name>` | Select | Native `<select>` with label, hint, validation message wiring, and signal-backed value |
196
- | `ng generate semmet-angular:input-group <name>` | Input Group | Native `<input>` with prefix/suffix addons announced via `aria-describedby` and optional action button |
197
- | `ng generate semmet-angular:textarea <name>` | Textarea | Native `<textarea>` with label, hint, counter, validation message wiring, and signal-backed value |
198
- | `ng generate semmet-angular:checkbox <name>` | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) | Click/Enter/Space toggle |
199
- | `ng generate semmet-angular:radio-group <name>` | [Radio Group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) | Up/Down/Left/Right/Home/End move focus and selection together |
200
- | `ng generate semmet-angular:switch <name>` | [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) | Native `<button>` — Click/Enter/Space toggle |
201
- | `ng generate semmet-angular:combobox <name>` | [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) | Live filtering; Up/Down/Home/End/Enter/Escape via `aria-activedescendant` |
202
- | `ng generate semmet-angular:listbox <name>` | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) | Up/Down/Home/End via `aria-activedescendant` |
203
- | `ng generate semmet-angular:slider <name>` | [Slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) | Arrow keys/PageUp/PageDown/Home/End, plus pointer drag |
204
- | `ng generate semmet-angular:spinbutton <name>` | [Spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) | Up/Down/Home/End, plus increment/decrement buttons |
205
- | `ng generate semmet-angular:meter <name>` | [Meter](https://www.w3.org/TR/wai-aria-1.2/#meter) | Static — native `<meter>` bound to a signal |
206
- | `ng generate semmet-angular:progress-bar <name>` | [Progress Bar](https://www.w3.org/TR/wai-aria-1.2/#progressbar) | Native `<progress>` bound to a signal |
207
-
208
- **Feedback & media**
209
-
210
- | Command | Generates | Keyboard/focus behavior implemented |
220
+ | `ng generate semmet-angular:form <nome>` | Form | `<form>` nativo com controles rotulados, validação inline e mensagens de status |
221
+ | `ng generate semmet-angular:input <nome>` | Input | `<input>` nativo com label, dica, mensagem de validação e valor com signal |
222
+ | `ng generate semmet-angular:select <nome>` | Select | `<select>` nativo com label, dica, mensagem de validação e valor com signal |
223
+ | `ng generate semmet-angular:input-group <nome>` | Input Group | `<input>` nativo com prefixo/sufixo anunciados por `aria-describedby` e botão de ação opcional |
224
+ | `ng generate semmet-angular:textarea <nome>` | Textarea | `<textarea>` nativo com label, dica, contador, mensagem de validação e valor com signal |
225
+ | `ng generate semmet-angular:checkbox <nome>` | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) | Clique/Enter/Espaço alterna |
226
+ | `ng generate semmet-angular:radio-group <nome>` | [Radio Group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) | Cima/Baixo/Esquerda/Direita/Home/End movem foco e seleção juntos |
227
+ | `ng generate semmet-angular:switch <nome>` | [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) | `<button>` nativo — Clique/Enter/Espaço alterna |
228
+ | `ng generate semmet-angular:combobox <nome>` | [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) | Filtro em tempo real; Cima/Baixo/Home/End/Enter/Escape via `aria-activedescendant` |
229
+ | `ng generate semmet-angular:listbox <nome>` | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) | Cima/Baixo/Home/End via `aria-activedescendant` |
230
+ | `ng generate semmet-angular:slider <nome>` | [Slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) | Setas/PageUp/PageDown/Home/End, além de arraste por ponteiro |
231
+ | `ng generate semmet-angular:spinbutton <nome>` | [Spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) | Cima/Baixo/Home/End, além de botões incrementar/decrementar |
232
+ | `ng generate semmet-angular:meter <nome>` | [Meter](https://www.w3.org/TR/wai-aria-1.2/#meter) | Estático — `<meter>` nativo ligado a um signal |
233
+ | `ng generate semmet-angular:progress-bar <nome>` | [Progress Bar](https://www.w3.org/TR/wai-aria-1.2/#progressbar) | `<progress>` nativo ligado a um signal |
234
+
235
+ **Feedback e mídia**
236
+
237
+ | Comando | Gera | Comportamento de teclado/foco implementado |
211
238
  |---|---|---|
212
- | `ng generate semmet-angular:alert <name>` | [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) | Dismissible assertive live region |
213
- | `ng generate semmet-angular:toast <name>` | Toast / Notification | Auto-dismisses after 5s (cleaned up via `DestroyRef`); dismissible early |
214
- | `ng generate semmet-angular:skeleton <name>` | Skeleton Loading | Composable loading placeholder for text, media, circles, cards, and custom blocks |
215
- | `ng generate semmet-angular:badge <name>` | Badge | Compact status label/counter with decorative mode, optional accessible label, and safe label projection |
216
- | `ng generate semmet-angular:spinner <name>` | Spinner | Loading status with `role="status"`, visually hidden label by default, and reduced-motion support |
217
- | `ng generate semmet-angular:carousel <name>` | [Carousel](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) | Previous/Next controls; `aria-live="polite"` slide region |
239
+ | `ng generate semmet-angular:alert <nome>` | [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) | Região live assertiva e dispensável |
240
+ | `ng generate semmet-angular:toast <nome>` | Toast / Notification | Auto-dismiss após 5s (limpo via `DestroyRef`); pode ser dispensado antes |
241
+ | `ng generate semmet-angular:skeleton <nome>` | Skeleton Loading | Placeholder de carregamento composível para texto, mídia, círculos, cards e blocos customizados |
242
+ | `ng generate semmet-angular:badge <nome>` | Badge | Rótulo/contador compacto com modo decorativo, rótulo acessível opcional e projeção segura de label |
243
+ | `ng generate semmet-angular:spinner <nome>` | Spinner | Status de carregamento com `role="status"`, rótulo visualmente escondido por padrão e suporte a reduced motion |
244
+ | `ng generate semmet-angular:carousel <nome>` | [Carousel](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/) | Controles Anterior/Próximo; região de slide com `aria-live="polite"` |
218
245
 
219
- ## What every generated component looks like
246
+ ## Como Cada Componente Gerado É
220
247
 
221
- - Standalone (implicit — no `standalone: true` needed, matches Angular's current default).
222
- - State via `signal()`/`computed()`, not plain class fields.
223
- - Templates use the built-in control flow (`@for`, `@if`), not `*ngFor`/`*ngIf`.
224
- - No `.component` suffix on file names or class names (`accordion.ts`, `export class Accordion`), matching the current `ng generate component` convention.
225
- - A unique per-instance id (`<name>-0`, `<name>-1`, ...) so multiple instances of the same generated component never collide on `id`/`aria-controls`/`aria-labelledby`.
226
- - A generated unit test (`.spec.ts`) and Playwright e2e smoke test (`.e2e-spec.ts`) so the component starts life with a test surface.
248
+ - Standalone (implícito — sem `standalone: true`, alinhado ao padrão atual do Angular).
249
+ - Estado via `signal()`/`computed()`, não campos simples de classe.
250
+ - Templates usam o control flow embutido (`@for`, `@if`), não `*ngFor`/`*ngIf`.
251
+ - Sem sufixo `.component` nos nomes de arquivos ou classes (`accordion.ts`, `export class Accordion`), seguindo a convenção atual de `ng generate component`.
252
+ - Id único por instância (`<nome>-0`, `<nome>-1`, ...) para múltiplas instâncias do mesmo componente nunca colidirem em `id`/`aria-controls`/`aria-labelledby`.
253
+ - Teste unitário (`.spec.ts`) e smoke test e2e Playwright (`.e2e-spec.ts`) gerados para o componente já nascer com uma superfície de teste.
227
254
 
228
- ## Visual identity
255
+ ## Identidade Visual
229
256
 
230
- Every generated component shares the same Material Design-informed look — clean surfaces, subtle elevation, a consistent radius/motion scale — using its own color palette (not Material's colors, to stay clear of any lookalike/plagiarism concern). The tokens are plain CSS custom properties declared on each component's `:host` (e.g. `--semmet-color-primary`, `--semmet-radius-md`, `--semmet-elevation-1`), so you can either use the defaults as-is or override the whole family from a global stylesheet without touching the generated files.
257
+ Todo componente gerado compartilha um visual inspirado em Material Design — superfícies limpas, elevação sutil e escala consistente de raio/movimento — usando sua própria paleta de cores (não as cores do Material, para evitar qualquer risco de cópia visual). Os tokens são CSS custom properties declaradas no `:host` de cada componente (por exemplo, `--semmet-color-primary`, `--semmet-radius-md`, `--semmet-elevation-1`), então você pode usar os defaults como estão ou sobrescrever a família inteira em uma stylesheet global sem tocar nos arquivos gerados.
231
258
 
232
- ## Options
259
+ ## Opções
233
260
 
234
- Every schematic accepts the same three options (same as `ng generate component`):
261
+ Todo schematic aceita as mesmas três opções de `ng generate component`:
235
262
 
236
- - `name` (required, positional) — component name.
237
- - `project` — target project; defaults to the current/default project.
238
- - `path` — target directory; defaults to the project's `src/app`.
263
+ - `name` (obrigatório, posicional) — nome do componente.
264
+ - `project` — projeto alvo; por padrão, usa o projeto atual/default.
265
+ - `path` — diretório alvo; por padrão, usa `src/app` do projeto.
239
266
 
240
- ## License
267
+ ## Licença
241
268
 
242
269
  MIT