semmet-angular 0.42.0 → 0.44.0

package/README.md

@@ -1,332 +1,240 @@
 # semmet-angular
 
-**Dev kit de entrega de UI acessível em Angular.**
+**Accessible Angular UI generation for Angular applications.**
 
-Gere componentes Angular acessíveis, blocos de interface e scaffolds de entrega pelo CLI.
+Semmet Angular is a collection of Angular CLI schematics that generate accessible, editable application code: components, starter blocks, tests, and delivery scaffolds.
 
-Semmet Angular ajuda times a gerar, compor, testar, verificar e empacotar UI acessível usando o ecossistema do Angular CLI.
+The generated code belongs to the consuming project. There is no Semmet runtime UI package to import at runtime; `semmet-angular` is only needed when generating files.
 
-**Gerar. Compor. Testar. Verificar. Empacotar.**
+## Core Positioning
 
-Leia a direção geral do produto em [PRODUCT_VISION.md](./PRODUCT_VISION.md).
+Semmet Angular is not a visual design system.
 
-English documentation is available in [README.en.md](./README.en.md).
+It generates accessible Angular building blocks with semantic HTML, ARIA wiring, keyboard/focus behavior, signal-based state, and minimal functional CSS. The consuming project owns the final layout, spacing, typography, color, radius, shadow, motion, and brand expression.
 
-`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.
+Use isolated components for precise application UI, and optional starter blocks for common editable section scaffolds.
 
-## Uso
+## Usage
 
 ```bash
 ng add semmet-angular
-ng generate semmet-angular:accordion minha-faq
+ng generate semmet-angular:button cta-button
+ng generate semmet-angular:list-group feature-list
 ng generate semmet-angular:block section-card
+ng generate semmet-angular:e2e
 ng generate semmet-angular:ci
 ng generate semmet-angular:docker
 ng generate semmet-angular:deploy
 ```
 
-`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, scripts npm e `npm run verify`. 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.
+Generated components are standalone Angular files:
 
-## Arquitetura em Camadas
-
-Use componentes isolados quando precisar de controle fino, ou compositions quando quiser acelerar telas acessíveis com estrutura já validada.
-
-- **Components**: componentes isolados como `button`, `card`, `accordion`, `table` e `navbar`.
-- **Compositions / Blocks**: seções prontas como `section-card`, `section-faq`, `section-pricing`, `section-stats`, `section-table`, `section-form`, `section-tabs`, `section-list-group`, `section-alert`, `section-progress`, `section-carousel`, `header-navbar`, `footer-navigation` e `command-list`.
-- **Delivery**: `ng add`, `ci`, `docker`, `deploy` e `verify`.
-
-## Comandos de Composição
-
-Compositions/blocks geram seções Angular standalone usando os componentes correspondentes da própria Semmet. O CSS gerado fica local no block e usa tokens locais de espaçamento para manter ritmo de landing page sem injetar estilo global na aplicação.
-
-| Comando | Gera | Usa como base |
-|---|---|---|
-| `ng generate semmet-angular:block hero` | Seção hero semântica | Estrutura de seção |
-| `ng generate semmet-angular:block section-card` | Seção de cards | `card` |
-| `ng generate semmet-angular:block section-faq` | Seção de FAQ | `accordion` |
-| `ng generate semmet-angular:block section-pricing` | Seção de preços | `card` |
-| `ng generate semmet-angular:block section-stats` | Seção de métricas | Estrutura de seção |
-| `ng generate semmet-angular:block section-table` | Seção com tabela | `table` |
-| `ng generate semmet-angular:block section-form` | Seção com formulário | `form` |
-| `ng generate semmet-angular:block section-tabs` | Seção com abas | `tabs` |
-| `ng generate semmet-angular:block section-list-group` | Seção com lista de ações | `list-group` |
-| `ng generate semmet-angular:block section-alert` | Seção com alerta | `alert` |
-| `ng generate semmet-angular:block section-progress` | Seção com progresso | `progress-bar` |
-| `ng generate semmet-angular:block section-carousel` | Seção com carousel | `carousel` |
-| `ng generate semmet-angular:block header-navbar` | Header com navegação | `navbar` |
-| `ng generate semmet-angular:block footer-navigation` | Footer com navegação | `navbar` |
-| `ng generate semmet-angular:block command-list` | Seção de comandos | Estrutura de seção |
-
-## Fluxo de Entrega
-
-Depois de rodar `ng add semmet-angular`, use:
-
-```bash
-npm test
-npm run e2e
-npm run e2e:ui
-npm run verify
+```text
+cta-button.ts
+cta-button.html
+cta-button.css
+cta-button.spec.ts
 ```
 
-`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.
-
-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:
+Playwright e2e specs are opt-in:
 
 ```bash
-npm test -- --watch=false
-npm run e2e
-npm run build
-npm run lint
+ng generate semmet-angular:button cta-button --e2e
 ```
 
-`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`.
+Only pass `--e2e` when the consuming app has Playwright configured — run `ng generate semmet-angular:e2e` first if it doesn't. `ng add semmet-angular` no longer configures Playwright by default; e2e infrastructure is opt-in and explicit.
 
-## CI com GitHub Actions
+## Components vs Starter Blocks
 
-```bash
-ng generate semmet-angular:ci
-```
+### Components
 
-Esse comando gera `.github/workflows/ci.yml` usando os scripts já existentes no `package.json`. O workflow usa Node 24, 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.
+Components and directives are the core of Semmet Angular. They are the best choice when the consuming application needs precise control over markup, layout, and visual design.
 
-Quando o projeto usa Playwright, o CI também instala o Chromium com `playwright install --with-deps chromium` e cacheia `~/.cache/ms-playwright` com `actions/cache`, reduzindo o tempo das execuções seguintes.
+They provide the accessibility contract while leaving layout and visual design to the application:
 
-Por padrão, o comando não sobrescreve um workflow existente. Use `--force` quando quiser substituir `.github/workflows/ci.yml`.
+- semantic root elements where the native element matters;
+- headless directives where accessibility comes from relationships between elements;
+- ARIA attributes and accessible names/descriptions;
+- keyboard and focus behavior;
+- signal-based state;
+- projected rich content through `ng-template` when needed;
+- open visual inputs such as `variant` and `size` as `string`, not closed visual unions.
 
-## Empacotamento com Docker
+Examples:
 
 ```bash
-ng generate semmet-angular:docker
+ng generate semmet-angular:button save-button
+ng generate semmet-angular:card testimonial-card
+ng generate semmet-angular:input-group search-box
+ng generate semmet-angular:list-group feature-list
+ng generate semmet-angular:tabs settings-tabs
 ```
 
-Esse comando gera `Dockerfile`, `.dockerignore` e `nginx.conf` para empacotar a aplicação Angular como uma imagem servida por Nginx. O Dockerfile usa Node 24 no estágio de build, detecta o gerenciador de pacotes por lockfile, executa o build e copia o output configurado no `angular.json` para `/usr/share/nginx/html`.
-
-O `nginx.conf` inclui fallback de SPA com `try_files ... /index.html`. Por padrão, o comando não sobrescreve arquivos existentes; use `--force` para substituir a configuração Docker atual.
+### Starter Blocks
 
-## Deploy Guiado
-
-```bash
-ng generate semmet-angular:deploy
-```
+Blocks are optional section scaffolds. They are useful for fast first drafts, common marketing/product sections, and quick app structure.
 
-O comando pergunta qual plataforma você quer usar e gera a configuração mínima para o destino escolhido. Também dá para passar a plataforma direto:
+They are not a public UI API and they are not meant to preserve a Semmet layout. A generated block is local application code. If the target UI needs a different structure, replace the block markup or switch to isolated components.
 
 ```bash
-ng generate semmet-angular:deploy --platform=vercel
-ng generate semmet-angular:deploy --platform=netlify
-ng generate semmet-angular:deploy --platform=firebase
-ng generate semmet-angular:deploy --platform=github-pages
-ng generate semmet-angular:deploy --platform=docker
+ng generate semmet-angular:block hero
+ng generate semmet-angular:block section-card
+ng generate semmet-angular:block section-pricing
+ng generate semmet-angular:block section-table
+ng generate semmet-angular:block section-form
+ng generate semmet-angular:block section-tabs
+ng generate semmet-angular:block section-list-group
+ng generate semmet-angular:block header-navbar
+ng generate semmet-angular:block footer-navigation
 ```
 
-Destinos suportados: Vercel (`vercel.json`), Netlify (`netlify.toml`), Firebase Hosting (`firebase.json` e `.firebaserc`), GitHub Pages (`.github/workflows/deploy.yml`) e deploy baseado em Docker (`compose.yml` e `deploy/docker.README.md`). O comando detecta o output do build no `angular.json` quando possível e não sobrescreve arquivos existentes sem `--force`.
-
-## Testes Gerados
+Generated block HTML includes an inline comment reminding developers that the scaffold is editable and replaceable.
 
-Todo comando de componente gera arquivos de teste ao lado do componente:
-
-```text
-minha-faq.ts
-minha-faq.html
-minha-faq.css
-minha-faq.spec.ts
-minha-faq.e2e-spec.ts
-```
+## Minimal Functional CSS
 
-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.
+Generated CSS is intentionally sparse.
 
-## Containers com Conteúdo Projetado
+Keep CSS only when it supports structure, behavior, or accessibility:
 
-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.
+- open/closed state;
+- overlay positioning;
+- visible focus;
+- hidden content;
+- native-control inheritance;
+- basic box behavior needed by the component.
 
-`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.
+Do not treat generated CSS as a theme. Typography, color, radius, shadow, decorative borders, visual hover states, spacing rhythm, and final layout belong to the consuming project.
 
-Exemplo depois de gerar `faq`:
+## Projected Content
 
-```ts
-import { Component, signal } from '@angular/core';
-import { Faq, FaqItem } from './faq/faq';
-import { ProfilePanel } from './profile-panel/profile-panel';
-import { SettingsPanel } from './settings-panel/settings-panel';
+Rich content uses Angular projection patterns instead of string-only APIs.
 
-@Component({
-  selector: 'app-root',
-  imports: [Faq, FaqItem, ProfilePanel, SettingsPanel],
-  templateUrl: './app.html',
-})
-export class App {
-  readonly userId = signal(123);
-
-  reload(): void {}
-}
-```
+Example after generating `search-box`:
 
 ```html
-<app-faq>
-  <ng-template faqItem id="profile" title="Perfil" [expanded]="true">
-    <app-profile-panel />
+<app-search-box label="Search" type="search" [(value)]="query">
+  <ng-template searchBoxPrefix>
+    <app-search-icon aria-hidden="true" />
   </ng-template>
 
-  <ng-template faqItem id="settings" title="Configurações">
-    <app-settings-panel [userId]="userId()" (saved)="reload()" />
+  <ng-template searchBoxSuffix>
+    {{ query().length }}
   </ng-template>
-</app-faq>
+</app-search-box>
 ```
 
-O mesmo padrão vale para `tabs`, `carousel` e `disclosure`:
+Example after generating `testimonial-card`:
 
 ```html
-<app-settings-tabs>
-  <ng-template settingsTabsItem id="profile" label="Perfil" [selected]="true">
-    <app-profile-panel />
-  </ng-template>
-</app-settings-tabs>
-
-<app-featured-carousel>
-  <ng-template featuredCarouselSlide id="intro" label="Introdução">
-    <app-intro-slide />
-  </ng-template>
-</app-featured-carousel>
-
-<app-details label="Mostrar detalhes do perfil" [(expanded)]="profileDetailsOpen">
-  <ng-template detailsContent>
-    <app-profile-details [userId]="userId()" />
-  </ng-template>
-</app-details>
+<app-testimonial-card>
+  <h3 testimonialCardHeading>Customer quote</h3>
+  <p>Semmet gives the accessibility structure; this app owns the content and layout.</p>
+</app-testimonial-card>
 ```
 
-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.
-
-Os componentes estruturais menores mantêm APIs simples por input e adicionam slots seguros onde o componente gerado continua dono da estrutura acessível:
+Example after generating `feature-list`:
 
 ```html
-<app-product-card title="Componentes acessíveis">
-  <ng-template productCardMedia>
-    <img src="/assets/card.png" alt="Prévia de componente Angular gerado" />
-  </ng-template>
-
-  <ng-template productCardDescription>
-    Gere componentes Angular com ARIA, comportamento de teclado e signals.
-  </ng-template>
-
-  <ng-template productCardActions>
-    <a href="/docs">Ler docs</a>
-  </ng-template>
-</app-product-card>
-
-<app-save-button label="Salvar">
-  <ng-template saveButtonLeading>
-    <app-save-icon aria-hidden="true" />
-  </ng-template>
-</app-save-button>
-
-<app-status-badge accessibleLabel="Build passou">
-  <ng-template statusBadgeLabel>Passou</ng-template>
-</app-status-badge>
-
-<app-main-navbar brand="Acme">
-  <ng-template mainNavbarActions>
-    <a href="/conta">Conta</a>
-  </ng-template>
-</app-main-navbar>
+<ul featureList label="Pricing features" [(activeId)]="activeFeature">
+  @for (item of features; track item.id) {
+    <li
+      featureListItem
+      [value]="item.id"
+      #featureItem="featureListItem"
+      [class.active]="featureItem.active()"
+    >
+      <span>{{ item.label }}</span>
+      <strong>{{ item.value }}</strong>
+    </li>
+  }
+</ul>
+```
 
-<app-results-table caption="Receita trimestral" [rows]="results">
-  <ng-template resultsTableEmpty>Nenhum resultado de receita ainda.</ng-template>
-</app-results-table>
+## Delivery Schematics
 
-<app-view-switcher [items]="views">
-  <ng-template viewSwitcherItem let-item>
-    {{ item.label }}
-  </ng-template>
-</app-view-switcher>
+```bash
+ng generate semmet-angular:e2e
+ng generate semmet-angular:ci
+ng generate semmet-angular:docker
+ng generate semmet-angular:deploy
 ```
 
-## Componentes, Blocks e Entrega (43)
-
-**Overlays e disclosure**
-
-| Comando | Gera | Comportamento de teclado/foco implementado |
-|---|---|---|
-| `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 |
-| `ng generate semmet-angular:disclosure <nome>` | [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) | Clique/Enter/Espaço alterna |
-| `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 |
-| `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) |
-| `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 |
-| `ng generate semmet-angular:popover <nome>` | Popover | Acionador disclosure com `aria-haspopup="dialog"`; Escape fecha; clique externo dispensa |
-| `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 |
-| `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 |
-| `ng generate semmet-angular:button <nome>` | Button | `<button>` nativo com variante, tamanho, desabilitado, ocupado, estado pressionado opcional e slots seguros de rótulo/ícone |
-| `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 |
-| `ng generate semmet-angular:close-button <nome>` | Close Button | Botão de ícone nativo com rótulo acessível obrigatório |
-
-**Navegação e estrutura**
-
-| Comando | Gera | Comportamento de teclado/foco implementado |
-|---|---|---|
-| `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 |
-| `ng generate semmet-angular:breadcrumb <nome>` | [Breadcrumb](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) | Estático — links simples + `aria-current="page"` |
-| `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 |
-| `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 |
-| `ng generate semmet-angular:pagination <nome>` | Pagination | Estado de página funcional; Anterior/Próximo desabilitam nos limites |
-| `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 |
-| `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`) |
-| `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 |
-| `ng generate semmet-angular:toolbar <nome>` | [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) | Esquerda/Direita/Home/End com `tabindex` roving |
-| `ng generate semmet-angular:card <nome>` | Card | `<article>` semântico com heading/descrição/ações/mídia e slots seguros |
-| `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 |
-| `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 |
-
-**Formulários e inputs**
-
-| Comando | Gera | Comportamento de teclado/foco implementado |
-|---|---|---|
-| `ng generate semmet-angular:form <nome>` | Form | `<form>` nativo com controles rotulados, validação inline e mensagens de status |
-| `ng generate semmet-angular:input <nome>` | Input | `<input>` nativo com label, dica, mensagem de validação e valor com signal |
-| `ng generate semmet-angular:select <nome>` | Select | `<select>` nativo com label, dica, mensagem de validação e valor com signal |
-| `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 |
-| `ng generate semmet-angular:textarea <nome>` | Textarea | `<textarea>` nativo com label, dica, contador, mensagem de validação e valor com signal |
-| `ng generate semmet-angular:checkbox <nome>` | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) | Clique/Enter/Espaço alterna |
-| `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 |
-| `ng generate semmet-angular:switch <nome>` | [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) | `<button>` nativo — Clique/Enter/Espaço alterna |
-| `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` |
-| `ng generate semmet-angular:listbox <nome>` | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) | Cima/Baixo/Home/End via `aria-activedescendant` |
-| `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 |
-| `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 |
-| `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 |
-| `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 |
-
-**Feedback e mídia**
-
-| Comando | Gera | Comportamento de teclado/foco implementado |
-|---|---|---|
-| `ng generate semmet-angular:alert <nome>` | [Alert](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) | Região live assertiva e dispensável |
-| `ng generate semmet-angular:toast <nome>` | Toast / Notification | Auto-dismiss após 5s (limpo via `DestroyRef`); pode ser dispensado antes |
-| `ng generate semmet-angular:skeleton <nome>` | Skeleton Loading | Placeholder de carregamento composível para texto, mídia, círculos, cards e blocos customizados |
-| `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 |
-| `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 |
-| `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"` |
-
-## Como Cada Componente Gerado É
-
-- Standalone (implícito — sem `standalone: true`, alinhado ao padrão atual do Angular).
-- Estado via `signal()`/`computed()`, não campos simples de classe.
-- Templates usam o control flow embutido (`@for`, `@if`), não `*ngFor`/`*ngIf`.
-- Sem sufixo `.component` nos nomes de arquivos ou classes (`accordion.ts`, `export class Accordion`), seguindo a convenção atual de `ng generate component`.
-- 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`.
-- 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.
-
-## Identidade Visual
-
-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.
-
-## Opções
-
-Todo comando de componente aceita as mesmas três opções de `ng generate component`:
-
-- `name` (obrigatório, posicional) — nome do componente.
-- `project` — projeto alvo; por padrão, usa o projeto atual/default.
-- `path` — diretório alvo; por padrão, usa `src/app` do projeto.
-
-## Licença
+The delivery schematics are explicit and optional:
+
+- `e2e` configures Playwright (dependency, npm scripts, `playwright.config.ts`) and folds `npm run e2e` into an existing `verify` script.
+- `ci` generates a GitHub Actions workflow from existing package scripts.
+- `docker` generates Docker/Nginx packaging files for an Angular SPA.
+- `deploy` generates minimal deployment configuration for supported platforms.
+
+## Available Component Commands
+
+Overlays and disclosure:
+
+- `accordion`
+- `alert-dialog`
+- `dialog`
+- `disclosure`
+- `menu-button`
+- `offcanvas`
+- `popover`
+- `tooltip`
+
+Navigation and structure:
+
+- `breadcrumb`
+- `card`
+- `landmarks`
+- `list-group`
+- `navbar`
+- `navigation-menu`
+- `pagination`
+- `skip-link`
+- `tabs`
+- `toolbar`
+- `tree-view`
+
+Forms and inputs:
+
+- `checkbox`
+- `combobox`
+- `form`
+- `input`
+- `input-group`
+- `listbox`
+- `meter`
+- `progress-bar`
+- `radio-group`
+- `select`
+- `slider`
+- `spinbutton`
+- `switch`
+- `textarea`
+
+Feedback, media, and display:
+
+- `alert`
+- `avatar`
+- `badge`
+- `button`
+- `button-group`
+- `carousel`
+- `close-button`
+- `rating`
+- `skeleton`
+- `spinner`
+- `steps`
+- `table`
+- `toast`
+
+## Options
+
+Common component options:
+
+- `name` required, positional.
+- `project` target Angular project.
+- `path` target directory.
+- `e2e` optional boolean. Generates a Playwright spec only when explicitly requested.
+
+## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "Accessible UI delivery dev kit in Angular: schematics that generate components, compositions, tests, and delivery scaffolds as native editable Angular code.",
   "publisher": "danilodevsilva",
   "license": "MIT",
@@ -25,8 +25,8 @@
   },
   "schematics": "./src/collection.json",
   "files": [
+    "README.md",
     "README.en.md",
-    "README.pt-BR.md",
     "src",
     "!src/**/*_spec.ts",
     "!src/**/*_spec.js",

package/src/accordion/files/__name@dasherize__/__name@dasherize__.css.template

@@ -1,57 +1,26 @@
 :host {
-  --semmet-color-primary: #18181b;
-  --semmet-color-surface: #ffffff;
-  --semmet-color-outline: #d4d4d8;
-  --semmet-color-on-surface: #18181b;
-  --semmet-color-on-surface-variant: #52525b;
-  --semmet-radius-md: 12px;
-  --semmet-space-2xs: 8px;
-  --semmet-space-xs: 16px;
-  --semmet-space-sm: 24px;
-  --semmet-motion: 160ms cubic-bezier(0.2, 0, 0, 1);
-
   display: block;
-  font-family: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  color: var(--semmet-color-on-surface);
-  background: var(--semmet-color-surface);
-  border: 1px solid var(--semmet-color-outline);
-  border-radius: var(--semmet-radius-md);
-  overflow: hidden;
 }
 
 h3 {
   margin: 0;
 }
 
-h3:not(:first-of-type) {
-  border-top: 1px solid var(--semmet-color-outline);
-}
-
 button {
   display: flex;
   align-items: center;
-  gap: var(--semmet-space-xs);
   width: 100%;
-  padding: var(--semmet-space-xs) var(--semmet-space-sm);
   font: inherit;
-  font-weight: 500;
   color: inherit;
   background: none;
   border: none;
   cursor: pointer;
   text-align: left;
-  transition: background-color var(--semmet-motion);
-}
-
-button:hover {
-  background: color-mix(in srgb, var(--semmet-color-on-surface) 6%, transparent);
 }
 
 button:focus-visible {
-  outline: 2px solid var(--semmet-color-primary);
-  outline-offset: -2px;
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
 
 button::after {
@@ -60,17 +29,11 @@ button::after {
   height: 0.5rem;
   margin-left: auto;
   flex-shrink: 0;
-  border-right: 2px solid var(--semmet-color-on-surface-variant);
-  border-bottom: 2px solid var(--semmet-color-on-surface-variant);
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
   transform: rotate(45deg);
-  transition: transform var(--semmet-motion);
 }
 
 button[aria-expanded='true']::after {
   transform: rotate(-135deg);
 }
-
-[role='region'] {
-  padding: 0 var(--semmet-space-sm) var(--semmet-space-sm);
-  color: var(--semmet-color-on-surface-variant);
-}