angular-visuals 0.1.3 → 0.2.0

package/README.md

@@ -59,18 +59,22 @@ import { AvBadge, AvButton, AvCard, AvIcon, AvInput } from 'angular-visuals';
 export class ExampleComponent {}
 ```
 
+### Angular + Ionic + Capacitor
+
+A biblioteca pode ser usada em aplicações Ionic/Capacitor como camada de componentes visuais, mantendo o Ionic para navegação, `ion-router-outlet`, `ion-content` e APIs nativas. Garanta apenas que o app tenha versões compatíveis de Angular, `@angular/cdk` e `@angular/forms`, e importe os estilos globais da biblioteca uma vez no stylesheet principal da aplicação.
+
 ## Componentes disponíveis
 
 | Categoria | Componentes |
 | --- | --- |
-| Base | `AvBadge`, `AvButton`, `AvCard`, `AvIcon` |
-| Formulários | `AvForm`, `AvInput`, `AvSelect`, `AvMultiSelect`, `AvCheckbox`, `AvCurrencyInput`, `AvDateTimePicker`, `AvSwitch`, `AvSlider`, `AvFileUpload`, `AvTextArea` |
-| Layout e dados | `AvGrid`, `AvTable`, `AvPaginator`, `AvCalendar` |
-| Navegação | `AvSidenav`, `AvNavLink`, `AvNavDropdown`, `AvTabs`, `AvTab`, `AvStepper`, `AvStep` |
-| Feedback | `AvProgressBar`, `AvProgressBarCircle` |
+| Base | `AvAvatar`, `AvBadge`, `AvButton`, `AvButtonGroup`, `AvCard`, `AvChip`, `AvIcon`, `AvTag` |
+| Formulários | `AvForm`, `AvInput`, `AvInputGroup`, `AvSelect`, `AvMultiSelect`, `AvCheckbox`, `AvRadioGroup`, `AvRadio`, `AvCurrencyInput`, `AvDateTimePicker`, `AvSwitch`, `AvSlider`, `AvFileUpload`, `AvTextArea` |
+| Layout e dados | `AvAccordion`, `AvGrid`, `AvTable`, `AvPaginator`, `AvCalendar`, `AvTimeline` |
+| Navegação | `AvBottomnav`, `AvBreadcrumb`, `AvSidenav`, `AvNavLink`, `AvNavDropdown`, `AvTabs`, `AvTab`, `AvStepper`, `AvStep` |
+| Feedback | `AvAlert`, `AvEmptyState`, `AvSkeleton`, `AvProgressBar`, `AvProgressBarCircle` |
 | Mídia | `AvCarousel`, `AvCarouselItem` |
-| Overlay | `AvTooltip`, `AvDropdown`, `AvDropdownItem` |
-| Primitives | `AvText` |
+| Overlay | `AvTooltip`, `AvDropdown`, `AvDropdownItem`, `AvToast`, `ToastService`, `AvDialog`, `AvPopover`, `AvDrawer` |
+| Primitives | `AvText`, `AvBox`, `AvCenter`, `AvHeading`, `AvKbd`, `AvSpacer`, `AvVisuallyHidden` |
 
 ### Primitives
 
@@ -103,6 +107,19 @@ export class ExampleComponent {}
 </av-sidenav>
 ```
 
+### Navegação inferior
+
+`AvBottomnav` projeta `AvNavLink` e muda o destaque ativo com `highlight`: `floating-circle`, `normal`, `static`, `inline-label` ou `underline`.
+
+```html
+<av-bottomnav highlight="underline" variant="purple">
+  <av-nav-link label="Home" icon="menu" [active]="true" variant="purple" />
+  <av-nav-link label="Buscar" icon="search" variant="purple" />
+  <av-nav-link label="Agenda" icon="calendar_today" variant="purple" />
+  <av-nav-link label="Perfil" icon="schedule" variant="purple" />
+</av-bottomnav>
+```
+
 ## Serviços
 
 ### `ThemeService`
@@ -155,47 +172,20 @@ Depois de registrado, o ícone pode ser usado pelos componentes que aceitam nome
 <button av-button icon="custom-icon">Ação</button>
 ```
 
-## Roadmap
-### Fase 1: Feedback e primitives
-
-1. `AvSpinner` — loading indeterminado simples.
-2. `AvSkeleton` — estado de carregamento reutilizável.
-3. `AvAlert` — feedback com `variant`, `appearance` e `AvIcon`.
-4. `AvEmptyState` — estado vazio para tabelas, selects, árvores e outras telas.
-9. `AvVisuallyHidden` — conteúdo visualmente oculto para acessibilidade.
-
-
-
-10. `AvToast` — feedback temporário em overlay.
-11. `ToastService` — API programática para exibir toasts.
-12. `AvDialog` — base para overlays complexos.
-13. `AvPopover` — conteúdo contextual usando a infraestrutura de overlay.
-14. `AvDrawer` — variação estrutural de diálogo.
-
-### Fase 3: Componentes básicos
-
-15. `AvAccordion` — conteúdo expansível.
-16. `AvBreadcrumb` — navegação hierárquica.
-17. `AvRadioGroup` e `AvRadio` — controles de seleção única para completar os forms.
-
-### Fase 4: Componentes compostos
+## Roadmap restante
 
-18. `AvCombobox` — input, overlay, seleção e busca.
-19. `AvDateRangePicker` — evolução do `AvDateTimePicker`.
-20. `AvDataTable` — tabela com ordenação, filtros, seleção, loading, estado vazio e paginação.
+O roadmap mostra apenas o que ainda falta implementar como componente dedicado. O que já foi entregue aparece na tabela de componentes disponíveis.
 
-### Fase 5: Componentes avançados
+### Média complexidade
 
-21. `AvTimeline` — visualização de eventos em sequência.
-22. `AvTreeView` — árvore com seleção, expansão e teclado.
-23. `AvCommandPalette` — busca e navegação por teclado composta por diálogo, input, ícones e estado vazio.
-24. `AvIconPicker` — catálogo de ícones usando registry, combobox, grid e popover.
+1. `AvCombobox` — input, overlay, busca, seleção e navegação por teclado.
+2. `AvDateRangePicker` — evolução do `AvDateTimePicker` para intervalos.
+3. `AvIconPicker` — catálogo de ícones usando registry, busca, grid e popover.
 
-### Fase 6: Conveniências
+### Alta complexidade
 
-25. `AvHeading` — tipografia semântica conveniente.
-26. `AvBox` — primitive de composição para casos simples.
-27. `AvCenter` — centralização de conteúdo.
-28. `AvSpacer` — espaçamento explícito em layouts.
+4. `AvTreeView` — árvore com expansão, seleção, estado parcial e navegação por teclado.
+5. `AvCommandPalette` — busca e navegação por teclado composta por diálogo, input, ícones, atalhos e estado vazio.
 
-Componentes adicionais que podem entrar antes da versão `1.0`, conforme as necessidades dos consumidores: `AvAvatar`, `AvChip` ou `AvTag`, `AvButtonGroup`, `AvInputGroup` e `AvKbd`.
+### Incrementos futuros
+As primeiras versões de `AvAccordion`, `AvButtonGroup`, `AvInputGroup`, `AvRadioGroup`, `AvBreadcrumb` e `AvTimeline` priorizam API simples, projeção de conteúdo e integração com Angular Forms onde necessário. Versões futuras podem ampliar casos específicos, como navegação por teclado mais rica no `AvAccordion` e seleção múltipla no `AvButtonGroup`.