---
title: "pdx-material-avatar JSON API (Canonical)"
slug: "pdx-material-avatar-json-api"
doc_type: "api-reference"
component: "pdx-material-avatar"
document_kind: "json-api-canonical"
reference_mode: "canonical"
contract_format: "json"
contract_source: "runtime-and-code"
description: "Referencia canonica do contrato JSON do componente pdx-material-avatar."
category: "components"
sub_category: "dynamic-fields"
audience:
  - "frontend"
  - "architect"
  - "platform-team"
level: "advanced"
status: "active"
owner: "praxis-ui"
source_of_truth:
  - "projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts"
  - "projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.component.ts"
  - "projects/praxis-core/src/lib/models/component-metadata.interface.ts"
source_of_truth_last_verified: "2026-04-25"
last_updated: "2026-04-25"
toc: true
sidebar: true
tags:
  - "json-api"
  - "canonical-contract"
  - "pdx-material-avatar"
api_stability: "canonical"
schema_verified: true
runtime_verified: true
editor_coverage_verified: false
runtime_scope: "public"
legacy_paths_present: false
has_known_mismatches: false
related_components:
  - "praxis-table"
  - "pdx-material-button"
---

# pdx-material-avatar

Este documento e a referencia canonica da API JSON de pdx-material-avatar.

## Summary

- Tipo documental: API reference canonica de contrato JSON.
- Source of truth: runtime e codigo declarados no frontmatter.
- Objetivo operacional: consulta rapida, auditavel e deterministica sob pressao.
- Resumo funcional: Contrato JSON metadata-driven com comportamento definido por runtime e schema associado.

## Purpose and scope

- O componente consome payload JSON metadata-driven e expoe comportamento runtime configuravel por contrato.
- Esta referencia cobre contrato publico, classificacao de paths e semantica de cobertura (runtime/schema/editor).
- Fora de escopo: quickstart, tutorial narrativo e notas arquiteturais que nao alteram contrato publico.

## Consulta rapida (obrigatorio)

| Regra/tema | Observado | Canonico desejado | Status | Evidencia |
| --- | --- | --- | --- | --- |
| Component id | `pdx-material-avatar` | Manter ID canonico estavel e versionado por contrato | Active | frontmatter.component |
| Primary contract source | `runtime-and-code` | Runtime, schema e docs devem permanecer rastreaveis | Partial | frontmatter.contract_source + source_of_truth |
| Runtime coverage | `true` | Comportamentos runtime criticos devem ficar explicitamente verificados | Active | `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts`, `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.component.ts` |
| Schema/type coverage | `true` | Tipos e schema devem refletir paths publicos do contrato | Active | source_of_truth + Detailed API reference |
| Editor/tooling coverage | `false` | Editor/tooling deve espelhar somente contrato publico suportado | Partial | `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts` |
| Legacy paths | `false` | Segregar legado de caminhos canonicos com janela de migracao | Active | frontmatter.legacy_paths_present |
| Known mismatches | `false` | Registrar observed vs desired de forma auditavel | Active | frontmatter.has_known_mismatches |

## Source of truth

| Source | Kind | Notes |
| --- | --- | --- |
| projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts | schema-metadata | Arquivo presente no repositorio e usado como evidencia de contrato. |
| projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.component.ts | runtime-code | Arquivo presente no repositorio e usado como evidencia de contrato. |
| projects/praxis-core/src/lib/models/component-metadata.interface.ts | schema-types | Arquivo presente no repositorio e usado como evidencia de contrato. |

## Support legend

- **Active**: suportado em runtime e liberado para uso externo.
- **Partial**: suporte parcial, com restricoes, lacunas ou validacao incompleta.
- **Declared-only**: declarado em tipos/schema sem evidencia operacional completa.
- **Schema-only**: presente em schema/tipos sem cobertura runtime confirmada.
- **Deprecated**: legado suportado por janela de migracao definida.

## Contract status snapshot

| Item | Value | Notes |
| --- | --- | --- |
| Reference mode | `canonical` | Deve permanecer canonico |
| Contract format | `json` | Contrato metadata-driven |
| Contract source | `runtime-and-code` | Alinhar com source_of_truth |
| Runtime scope | `public` | Escopo publicado para consumidores |
| Runtime verified | `true` | Revisar sempre com evidencia de runtime |
| Schema verified | `true` | Revisar sempre com evidencia de tipos/schema |
| Editor coverage verified | `false` | Revisar sempre com evidencia de editor/tooling |
| Legacy paths present | `false` | Segregar legado de contrato canonico |
| Has known mismatches | `false` | Divergencias devem aparecer em secao dedicada |

## Contract classification (obrigatorio)

### Canonical paths (public contract)

| Path | Type | Required | Default | Status | Notes |
| --- | --- | --- | --- | --- | --- |
| `metadata` | object | true | n/a | Partial | See Detailed API reference for runtime semantics. |
| `name` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.imageSrc` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.imageAlt` | unknown | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.initials` | unknown | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.name` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.icon` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.defaultIcon` | string | false | n/a | Partial | See Detailed API reference for runtime semantics. |
| `metadata.extra.status` | string | false | `none` | Active | Presence/status indicator: `online`, `offline`, `busy`, `away`, `verified`, `none`. |
| `metadata.extra.statusLabel` | string | false | n/a | Active | Accessible status text appended to the host label. |
| `metadata.extra.badge` | string \| number | false | n/a | Active | Short counter or badge text rendered over the avatar. |
| `metadata.extra.badgeLabel` | string | false | n/a | Active | Accessible badge text appended to the host label. |
| `metadata.extra.emphasis` | string | false | `none` | Active | Visual emphasis state: `none`, `ring`, `halo`. |
| `metadata.extra.emphasisColor` | string | false | `primary` | Active | Theme color token used by the emphasis ring or halo. |
| `metadata.extra.emphasisLabel` | string | false | n/a | Active | Accessible text appended when emphasis has business meaning. |
| `metadata.extra.initialsMaxLength` | number | false | `2` | Active | Clamped from 1 to 4 characters. |
| `metadata.extra.sizePx` | number | false | n/a | Active | Custom pixel size, higher precedence than semantic `size`. |
| `metadata.extra.sizeCss` | string | false | n/a | Active | Custom CSS length/percent size, higher precedence than `sizePx`. |
| `metadata.extra.tooltip` | string | false | n/a | Active | Visual tooltip text. |
| `metadata.extra.ariaLabel` | string | false | n/a | Active | Explicit accessible name for the host avatar image. |
| `metadata.extra.groupItems` | array | false | n/a | Active | Governed avatar group items rendered as an accessible stack. |
| `metadata.extra.groupMaxVisible` | number | false | `4` | Active | Visible item count before overflow, clamped 1..12. |
| `metadata.extra.groupLabel` | string | false | n/a | Active | Accessible group name when `groupItems` is present. |
| `metadata.extra.groupOverflowLabel` | string | false | derived | Active | Accessible label for the overflow marker. |
| `metadata.extra.groupOverlap` | number | false | `10` | Active | Negative overlap in px, clamped 0..32. |
| `metadata.extra.class` | string | false | n/a | Active | Additional host CSS class for governed styling hooks. |
| `metadata.extra.style` | object | false | n/a | Active | Inline style object or JSON object string applied to the avatar inner element. |

### Supported legacy paths

Nenhum path legado suportado foi identificado nesta revisao.

### Internal-only paths

Nao ha paths internal-only confirmados no contrato publico desta revisao.

### Experimental paths

Nao ha paths experimentais confirmados no contrato publico desta revisao.

## Public contract surface (obrigatorio)

### Top-level configuration blocks

| Block | Purpose | Required | Merge strategy | Notes |
| --- | --- | --- | --- | --- |
| `metadata` | Payload declarativo principal do componente | true | deep-merge | runtime linkage verified for core flows (component specs, 2026-03-06). |
| `name` | Configuracao especifica de runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
| `formControl` | Configuracao especifica de runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
| `readonlyMode` | Override de readonly no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
| `disabledMode` | Override de disabled no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
| `visible` | Override de visibilidade no host/runtime | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |
| `presentationMode` | Renderizacao de apresentacao sem interacao | false | override | runtime linkage verified for core flows (component specs, 2026-03-06). |

### Nested configuration blocks

| Path | Type | Required | Default | Constraints | Notes |
| --- | --- | --- | --- | --- | --- |
| `metadata.extra.imageSrc` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.imageAlt` | unknown | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.initials` | unknown | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.name` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.icon` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.defaultIcon` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.themeColor` | string | false | n/a | component-defined | Partial; verify per source_of_truth. |
| `metadata.extra.rounded` | string | false | `full` | `full/large/medium/small/none` | Active; `full` maps to circular avatar, `none` maps to square avatar. |
| `metadata.extra.size` | string | false | `medium` | `xsmall/small/medium/large/xlarge/xxlarge/none` | Active; semantic size token. |
| `metadata.extra.fillMode` | string | false | `solid` | `solid/outline/none` | Active; visual fill mode. |
| `metadata.extra.border` | boolean | false | `false` | component-defined | Active; adds a contrast border. |
| `metadata.extra.status` | string | false | `none` | `online/offline/busy/away/verified/none` | Active; visual overlay and accessible label supported. |
| `metadata.extra.statusLabel` | string | false | n/a | component-defined | Active; appended to host `aria-label` when status is visible. |
| `metadata.extra.badge` | string \| number | false | n/a | max 4 visible chars before truncation | Active; visual overlay and accessible label supported. |
| `metadata.extra.badgeLabel` | string | false | n/a | component-defined | Active; appended to host `aria-label` when badge is visible. |
| `metadata.extra.emphasis` | string | false | `none` | `none/ring/halo` | Active; renders a visual ring or halo without changing submitted values. |
| `metadata.extra.emphasisColor` | string | false | `primary` | `primary/secondary/tertiary/base/info/success/warning/error/dark/light/inverse/none` | Active; color token for emphasis. |
| `metadata.extra.emphasisLabel` | string | false | n/a | component-defined | Active; appended to host `aria-label` when present. |
| `metadata.extra.initialsMaxLength` | number | false | `2` | 1..4 | Active; controls explicit and generated initials. |
| `metadata.extra.sizePx` | number | false | n/a | positive number | Active; custom pixel size. |
| `metadata.extra.sizeCss` | string | false | n/a | CSS length or percent | Active; custom CSS size. |
| `metadata.extra.tooltip` | string | false | n/a | component-defined | Active; visual tooltip. |
| `metadata.extra.ariaLabel` | string | false | n/a | component-defined | Active; explicit accessible name. |
| `metadata.extra.groupItems` | array | false | n/a | `AvatarGroupItem[]` | Active; switches host role to `group` and renders a stacked list. |
| `metadata.extra.groupMaxVisible` | number | false | `4` | 1..12 | Active; overflow renders as `+N`. |
| `metadata.extra.groupLabel` | string | false | n/a | component-defined | Active; accessible group label. |
| `metadata.extra.groupOverflowLabel` | string | false | derived | component-defined | Active; accessible overflow label. |
| `metadata.extra.groupOverlap` | number | false | `10` | 0..32 | Active; visual stack overlap in px. |
| `metadata.extra.class` | string | false | n/a | component-defined | Active; additional host class. |
| `metadata.extra.style` | object | false | n/a | object or JSON object string | Active; inline style object for the inner avatar. |

#### AvatarGroupItem

`metadata.extra.groupItems` accepts an ordered `AvatarGroupItem[]`. Each item is visual-only metadata and does not change the submitted value.

| Property | Type | Required | Default | Constraints | Notes |
| --- | --- | --- | --- | --- | --- |
| `imageSrc` | string | false | n/a | safe URL only | Optional image source for the group item. Unsafe URL schemes are rejected. |
| `imageAlt` | string | false | n/a | component-defined | Accessible fallback label source when `name` and `ariaLabel` are absent. Image elements remain decorative. |
| `initials` | string | false | derived | clamped by `initialsMaxLength` | Explicit initials rendered when no image/icon is available. |
| `name` | string | false | n/a | component-defined | Preferred human-readable label source and initials source. |
| `icon` | string | false | n/a | Praxis icon name | Explicit icon rendered when no image is available. |
| `defaultIcon` | string | false | inherited fallback | Praxis icon name | Fallback icon when no image, explicit icon or initials can be rendered. |
| `themeColor` | string | false | inherited | `primary/secondary/tertiary/base/info/success/warning/error/dark/light/inverse/none` | Per-item color token. |
| `rounded` | string | false | inherited | `full/large/medium/small/none` | Per-item shape token. |
| `fillMode` | string | false | inherited | `solid/outline/none` | Per-item fill style. |
| `status` | string | false | `none` | `online/offline/busy/away/verified/none` | Visual status overlay. |
| `statusLabel` | string | false | derived | component-defined | Accessible status text appended to the item label when status is visible. |
| `emphasis` | string | false | `none` | `none/ring/halo` | Per-item emphasis for selected, primary, or attention avatars. |
| `emphasisColor` | string | false | inherited | `primary/secondary/tertiary/base/info/success/warning/error/dark/light/inverse/none` | Per-item emphasis color token. |
| `emphasisLabel` | string | false | n/a | component-defined | Accessible text appended to the item label when emphasis carries meaning. |
| `tooltip` | string | false | n/a | component-defined | Per-item visual tooltip for hover/focus details such as role or review responsibility. |
| `ariaLabel` | string | false | derived | component-defined | Explicit accessible item label; takes precedence over `name`, `imageAlt` and initials. |

### Input bindings (inbound data)

| Binding/Path | Type | Required | Source | Runtime normalization | Notes |
| --- | --- | --- | --- | --- | --- |
| `metadata` | object | true | host-json | component-defined | Primary inbound contract payload. |
| `readonlyMode` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
| `disabledMode` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
| `visible` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |
| `presentationMode` | boolean | false | host-runtime | not-yet-verified | Host-level behavioral override. |

### Output events

| Event | Payload | Trigger | Stability | Notes |
| --- | --- | --- | --- | --- |
| `imageError` | unknown | runtime-event | Experimental | Validate payload shape against source_of_truth. |

### External side channels

| Channel | Direction | Contract | Failure mode | Notes |
| --- | --- | --- | --- | --- |
| `host/services/storage` | bidirectional | component-defined | component-defined | Side channels variam por componente e host; verificar em source_of_truth. |

### Host/runtime dependencies

| Dependency | Required | Environment | Purpose | Notes |
| --- | --- | --- | --- | --- |
| `material-avatar.metadata.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts`. |
| `material-avatar.component.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.component.ts`. |
| `component-metadata.interface.ts` | true | browser/dev/prod/ssr | contract resolution | Refer to `projects/praxis-core/src/lib/models/component-metadata.interface.ts`. |

## Coverage by surface (obrigatorio)

### Coverage matrix (runtime, schema/type, editor/tooling)

| Surface | Verified | Coverage status | Evidence | Notes |
| --- | --- | --- | --- | --- |
| Runtime | `true` | Active | `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts`, `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.component.ts` | Core runtime flows verified via focused component specs on 2026-03-06; editor/tooling coverage remains independent. |
| Schema/Types | `true` | Active | source_of_truth + Detailed API reference | Reconcile schema/types with canonical paths during follow-up when needed. |
| Editor/Tooling | `false` | Partial | `projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts` | Optional provider for `ComponentMetadataRegistry` exists; end-to-end editor integration not yet verified. |

### Runtime coverage boundaries

- Ambientes suportados: browser/dev/prod; SSR/hydration appears to be component-dependent unless explicitly verified.
- Pre-condicoes: payload JSON valido, bindings de host consistentes e dependencias descritas no source_of_truth.
- Fora de cobertura confirmada: caminhos internos, experimentais ou aliases nao enumerados formalmente.

### Editor and tooling notes

- Evidencia parcial: `provideMaterialAvatarMetadata()` permite registrar metadata no `ComponentMetadataRegistry`.
- O que esta exposto no editor visual depende da cobertura real do workspace e nao deve ser inferido como suporte runtime total.
- Campos disponiveis apenas via JSON/manual devem continuar no contrato, com rotulo explicito de cobertura parcial.
- Quando houver divergencia entre editor e runtime, manter mismatch rastreavel em secao dedicada.

## Resolution and precedence model (obrigatorio)

### Merge order

1. defaults do componente
2. contrato JSON recebido
3. overrides de host/runtime
4. normalizacoes internas

### Fallback order

contrato explicito -> aliases legados (quando suportados) -> defaults internos -> comportamento seguro

### Override points

- inputs publicos do componente
- configuracao JSON de runtime
- integracoes de host (servicos/tokens/adapters)

### Runtime normalization

Alias e defaults devem convergir para paths canonicos; onde nao houver evidencia, manter not-yet-verified de forma explicita.

### Precedence rules

Em conflito entre alias legado e path canonico, priorizar path canonico e registrar janela de migracao do legado.

## Validation and error semantics (obrigatorio)

### Validation model

| Path/Rule | Validation phase | Behavior on fail | Error code / warning | Notes |
| --- | --- | --- | --- | --- |
| canonical-paths | parse/runtime | component-defined (warn/reject/default) | not-yet-standardized | Semantica detalhada preservada na referencia tecnica por componente. |

### Invalid and unknown field handling

- Campos desconhecidos: comportamento component-defined (ignore, warn ou reject).
- Tipos invalidos: pode haver fallback, warning ou falha, conforme runtime especifico.
- Valores fora de dominio: registrar observed vs desired em Known limitations and mismatches.

### Fail-open / fail-closed behavior

| Condition | Mode | Runtime behavior | Consumer impact |
| --- | --- | --- | --- |
| invalid-or-unknown-field | component-defined | not-yet-verified | Pode gerar warning, fallback silencioso ou rejeicao; validar por componente. |

### Runtime warnings vs hard failures

| Condition | Severity | Observability | Consumer action |
| --- | --- | --- | --- |
| partial-or-declared-only-coverage | warning | logs/eventos do componente | Confirmar ligacao runtime antes de uso critico. |
| mismatch-confirmed | error-or-warning | componente/host observability | Planejar migracao e corrigir contrato/runtime. |

## Detailed API reference
### Preserved technical reference (normalized from previous revision)

### 1. Visao Geral e Quando Usar
`pdx-material-avatar` renderiza avatar reutilizavel com prioridade de conteudo: imagem > icone > iniciais > conteudo projetado.

Use quando precisar:
- avatar consistente com tokens M3;
- fallback automatico de imagem para iniciais/icone;
- integracao com `DynamicFieldLoader` por metadata `extra`.

### 2. API do Componente (Inputs/Outputs)
| Propriedade | Tipo | Padrao | Obrigatorio | Comportamento |
| --- | --- | --- | --- | --- |
| `metadata` | `ComponentMetadata` | - | Nao | Contrato opcional para integracao loader. |
| `imageSrc` | `string` | - | Nao | URL de imagem principal. |
| `imageAlt` | `string` | - | Nao | Texto alternativo da imagem. |
| `initials` | `string` | - | Nao | Iniciais explicitas (prioritarias sobre nome). |
| `initialsMaxLength` | `number` | `2` | Nao | Limite de caracteres das iniciais, normalizado entre 1 e 4. |
| `name` | `string` | - | Nao | Nome para gerar iniciais automaticamente. |
| `icon` | `string \| SafeHtml \| object` | - | Nao | Icone explicito (name/svg/fontClass). |
| `defaultIcon` | `string \| SafeHtml \| object` | - | Nao | Icone fallback quando sem imagem/icone/iniciais. |
| `themeColor` | enum | `primary` | Nao | Tema visual do avatar. |
| `rounded` | enum | `full` | Nao | Formato de borda. |
| `size` | enum | `medium` | Nao | Tamanho predefinido do avatar. |
| `sizePx` | `number` | - | Nao | Sobrescreve tamanho por px. |
| `sizeCss` | `string` | - | Nao | Sobrescreve tamanho por unidade CSS valida. |
| `fillMode` | enum | `solid` | Nao | Modo de preenchimento (`solid/outline/none`). |
| `border` | `boolean` | `false` | Nao | Borda adicional do avatar. |
| `status` | enum | `none` | Nao | Indicador de presenca/status (`online/offline/busy/away/verified/none`). |
| `statusLabel` | `string` | label derivado | Nao | Texto acessivel do status. |
| `badge` | `string \| number` | - | Nao | Badge curto ou contador sobreposto ao avatar. |
| `badgeLabel` | `string` | label derivado | Nao | Texto acessivel do badge. |
| `emphasis` | enum | `none` | Nao | Destaque visual (`none/ring/halo`) para selecionado, principal ou atenção. |
| `emphasisColor` | enum | `primary` | Nao | Token de cor do destaque visual. |
| `emphasisLabel` | `string` | - | Nao | Texto acessivel que descreve o significado do destaque. |
| `tooltip` | `string` | - | Nao | Tooltip opcional. |
| `ariaLabel` | `string` | - | Nao | Label acessivel customizado. |
| `groupItems` | `AvatarGroupItem[]` | - | Nao | Itens do Avatar Group. |
| `groupMaxVisible` | `number` | `4` | Nao | Limite visivel antes de overflow. |
| `groupLabel` | `string` | - | Nao | Label acessivel do grupo. |
| `groupOverflowLabel` | `string` | derivado | Nao | Label acessivel do overflow. |
| `groupOverlap` | `number` | `10` | Nao | Sobreposicao entre itens em px. |
| `readonlyMode/disabledMode/visible/presentationMode` | `boolean` | - | Nao | Estados de host para shell dinâmico. |
| `imageError` | `void` | - | Output | Dispara quando imagem falha no carregamento. |

Em contexto metadata-driven, `metadata.label` e renderizado como label visual acima do avatar e `metadata.hint` como texto de apoio abaixo, ligado por `aria-describedby`. Quando o componente esta hospedado em `pfx-field-shell`, o tamanho visual padrao e `64px`; o uso direto permanece em `medium` (`40px`) salvo `size`, `sizePx` ou `sizeCss`.

### 3. Matriz de Cobertura JSON (Completa)
#### 3.1 Campos especificos do componente
| Caminho JSON | Tipo | Status | Comportamento em runtime |
| --- | --- | --- | --- |
| `metadata.extra.imageSrc` | `string` | Ativo | Define imagem principal quando `@Input` direto nao vem. |
| `metadata.extra.imageAlt` | `string` | Ativo | Texto alternativo do avatar. |
| `metadata.extra.initials` | `string` | Ativo | Iniciais explicitas de fallback. |
| `metadata.extra.initialsMaxLength` | `number` | Ativo | Limite das iniciais, com clamp entre 1 e 4. |
| `metadata.extra.name` | `string` | Ativo | Nome para gerar iniciais automaticas. |
| `metadata.extra.icon` | `string \| object` | Ativo | Icone explicito do avatar. |
| `metadata.extra.defaultIcon` | `string \| object` | Ativo | Icone fallback final. |
| `metadata.extra.themeColor` | enum | Ativo | Classe `theme-*` aplicada no host. |
| `metadata.extra.rounded` | enum | Ativo | Classe `rounded-*` aplicada no host. |
| `metadata.extra.size` | enum | Ativo | Classe `size-*` aplicada no host. |
| `metadata.extra.fillMode` | enum | Ativo | Classe `fill-*` aplicada no host. |
| `metadata.extra.border` | `boolean` | Ativo | Classe `has-border`. |
| `metadata.extra.status` | enum | Ativo | Renderiza indicador visual e classe `status-*`. |
| `metadata.extra.statusLabel` | `string` | Ativo | Texto acessivel anexado ao `aria-label` do host. |
| `metadata.extra.badge` | `string \| number` | Ativo | Renderiza badge visual curto no avatar. |
| `metadata.extra.badgeLabel` | `string` | Ativo | Texto acessivel anexado ao `aria-label` do host. |
| `metadata.extra.emphasis` | enum | Ativo | Renderiza anel ou halo de destaque sem alterar o valor submetido. |
| `metadata.extra.emphasisColor` | enum | Ativo | Define a cor do destaque visual. |
| `metadata.extra.emphasisLabel` | `string` | Ativo | Texto acessivel anexado ao `aria-label` do host. |
| `metadata.extra.sizePx` | `number` | Ativo | Define `--pfx-avatar-size` em px. |
| `metadata.extra.sizeCss` | `string` | Ativo | Define `--pfx-avatar-size` com unidade CSS valida. |
| `metadata.extra.tooltip` | `string` | Ativo | Tooltip no avatar. |
| `metadata.extra.ariaLabel` | `string` | Ativo | ARIA label explicito. |
| `metadata.extra.groupItems` | `AvatarGroupItem[]` | Ativo | Renderiza grupo empilhado com itens acessiveis. |
| `metadata.extra.groupMaxVisible` | `number` | Ativo | Define quantos itens aparecem antes de overflow. |
| `metadata.extra.groupLabel` | `string` | Ativo | Nome acessivel do grupo. |
| `metadata.extra.groupOverflowLabel` | `string` | Ativo | Texto acessivel do overflow. |
| `metadata.extra.groupOverlap` | `number` | Ativo | Sobreposicao visual em px entre avatares. |
| `metadata.extra.class` | `string` | Ativo | Classes adicionais no host. |
| `metadata.extra.style` | `object \| string(JSON)` | Ativo | Estilos inline adicionais (parse JSON quando string). |
| `metadata.label` | `string` | Ativo | Label visual renderizada acima do avatar quando fornecida por metadata. |
| `metadata.hint` | `string` | Ativo | Texto de apoio renderizado abaixo do avatar e associado via `aria-describedby`. |
| `metadata.imageSrc` | `string` | Ativo | Fallback top-level para origem da imagem. |
| `metadata.defaultValue` | `string` | Ativo | Fallback de imagem quando URL valida. |
| `formControl.value` | `string \| object` | Ativo | Fonte secundaria para URL (`imageSrc/src/url/...`). |

Notas de runtime:
- ordem de resolucao de imagem: `@Input imageSrc` > `formControl.value` > `metadata.imageSrc` > `metadata.defaultValue`.
- quando `metadata.extra.groupItems` contem itens, o componente renderiza Avatar Group e o host passa de `role="img"` para `role="group"`.
- URLs inseguras (`javascript:`) sao rejeitadas.
- quando imagem falha, o componente cai para icone/iniciais e emite `imageError`.
- quando `tooltip` existe no avatar ou em `AvatarGroupItem`, o elemento visual recebe foco por teclado para expor a dica tambem por focus, nao apenas hover.

#### 3.2 Campos herdados compartilhados (exaustivo)
Contrato de input base nao e usado integralmente; o avatar implementa API propria focada em apresentacao.

Resumo de composicao deste componente:
- `Ativo`: modelo visual completo via inputs e `metadata.extra`.
- `Parcial`: sem semantica de valor de formulario tradicional (e componente visual).

### 4. Mapeamento de Comportamento
- Prioridade de exibicao:
  1. imagem valida,
  2. icone explicito,
  3. iniciais,
  4. icone padrao,
  5. conteudo projetado.
- Iniciais automaticas: derivadas do `name` quando `initials` nao existe.
- Tema/shape/size: aplicados por classes CSS e variaveis custom.

### 5. Exemplo Minimo (JSON + Uso)
```json
{
  "componentId": "pdx-material-avatar",
  "metadata": {
    "name": "ownerAvatar",
    "label": "Responsavel",
    "extra": {
      "name": "Maria Beatriz",
      "themeColor": "primary"
    }
  }
}
```
Uso: avatar com iniciais geradas automaticamente por nome.

### 6. Exemplo Corporativo (JSON + Uso)
```json
{
  "componentId": "pdx-material-avatar",
  "metadata": {
    "name": "approverAvatar",
    "label": "Aprovador",
    "extra": {
      "imageSrc": "https://cdn.corp.example/avatar/u123.png",
      "imageAlt": "Foto do aprovador",
      "defaultIcon": "mi:person",
      "themeColor": "secondary",
      "rounded": "full",
      "size": "large",
      "border": true,
      "tooltip": "Aprovador principal",
      "ariaLabel": "Avatar do aprovador principal"
    }
  }
}
```
Uso: avatar corporativo com fallback de icone e acessibilidade explicita.

### 7. Troubleshooting e Armadilhas Comuns
1. Imagem nao aparece.
Correcao: validar protocolo permitido (`http/https/blob/data:image`) e URL efetiva.

2. Iniciais inesperadas.
Correcao: definir `initials` explicitamente para evitar heuristica por nome.

3. Tamanho custom nao aplica.
Correcao: usar `sizePx` numerico ou `sizeCss` com unidade valida (`px/rem/%/...`).

4. Icone SVG nao renderiza.
Correcao: fornecer `icon.svg` valido ou string segura para sanitizacao.

5. Classe/estilo extra nao aplica.
Correcao: em `metadata.extra.style` string, enviar JSON valido.

### 8. Cross-links
- `projects/praxis-dynamic-fields/src/lib/components/material-button/pdx-material-button.json-api.md`

### 9. Relatorio de Validacao Estrutural
- Visao geral: PASS
- API (inputs/outputs): PASS
- Cobertura JSON completa (especifico + herdado): PASS
- Mapeamento de comportamento: PASS
- Exemplo minimo: PASS
- Exemplo corporativo: PASS
- Troubleshooting: PASS

## JSON path index (obrigatorio)

| Path | Type | Required | Default | Status | Notes |
| --- | --- | --- | --- | --- | --- |
| `metadata` | object | true | n/a | Partial | See Detailed API reference. |
| `name` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.imageSrc` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.imageAlt` | unknown | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.initials` | unknown | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.initialsMaxLength` | number | false | `2` | Active | See Detailed API reference. |
| `metadata.extra.name` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.icon` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.defaultIcon` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.themeColor` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.rounded` | unknown | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.size` | number | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.fillMode` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.border` | unknown | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.status` | string | false | `none` | Active | See Detailed API reference. |
| `metadata.extra.statusLabel` | string | false | n/a | Active | See Detailed API reference. |
| `metadata.extra.badge` | string \| number | false | n/a | Active | See Detailed API reference. |
| `metadata.extra.badgeLabel` | string | false | n/a | Active | See Detailed API reference. |
| `metadata.extra.sizePx` | number | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.sizeCss` | unknown | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.tooltip` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.ariaLabel` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.class` | string | false | n/a | Partial | See Detailed API reference. |
| `metadata.extra.style` | object | false | n/a | Partial | See Detailed API reference. |
| `metadata.imageSrc` | string | false | n/a | Partial | See Detailed API reference. |

## Events reference (obrigatorio)

| Event | Payload | Trigger | Stability | Notes |
| --- | --- | --- | --- | --- |
| `imageError` | unknown | runtime-event | Experimental | Check component/runtime implementation. |

## Styling API (obrigatorio quando aplicavel)

| Token/Class | Scope | Purpose | Notes |
| --- | --- | --- | --- |
| `metadata.extra.icon` | component | Styling-related JSON path | Validate against runtime implementation. |
| `metadata.extra.defaultIcon` | component | Styling-related JSON path | Validate against runtime implementation. |
| `metadata.extra.themeColor` | component | Styling-related JSON path | Validate against runtime implementation. |
| `metadata.extra.class` | component | Styling-related JSON path | Validate against runtime implementation. |
| `metadata.extra.style` | component | Styling-related JSON path | Validate against runtime implementation. |

## Examples (obrigatorio)

| Example | Scenario | Validates | Notes |
| --- | --- | --- | --- |
| `Minimal valid` | baseline payload | required contract blocks | Extracted from preserved technical reference when available. |
| `Common setup` | common component usage | standard runtime behavior | Validate against host integration path. |
| `Advanced setup` | richer config with overrides | precedence and normalization | Requires runtime confirmation for edge cases. |
| `Enterprise scenario` | governance/legacy/migration context | auditability and compatibility boundaries | Include tenant-specific constraints when applicable. |

### Minimal valid

```json
{
  "componentId": "pdx-material-avatar",
  "metadata": {
    "name": "ownerAvatar",
    "label": "Responsavel",
    "extra": {
      "name": "Maria Beatriz",
      "themeColor": "primary"
    }
  },
  "readonlyMode": false
}
```

### Common setup

```json
{
  "componentId": "pdx-material-avatar",
  "metadata": {
    "name": "approverAvatar",
    "label": "Aprovador",
    "extra": {
      "imageSrc": "https://cdn.corp.example/avatar/u123.png",
      "imageAlt": "Foto do aprovador",
      "defaultIcon": "mi:person",
      "themeColor": "secondary",
      "rounded": "full",
      "size": "large",
      "border": true,
      "tooltip": "Aprovador principal",
      "ariaLabel": "pdx-material-avatar-common"
    }
  }
}
```

### Advanced setup

```json
{
  "componentId": "pdx-material-avatar",
  "metadata": {
    "name": "approverAvatar",
    "label": "Aprovador",
    "extra": {
      "imageSrc": "https://cdn.corp.example/avatar/u123.png",
      "imageAlt": "Foto do aprovador",
      "defaultIcon": "mi:person",
      "themeColor": "secondary",
      "rounded": "full",
      "size": 5,
      "border": true,
      "tooltip": "Aprovador principal",
      "ariaLabel": "Avatar do aprovador principal"
    }
  },
  "readonlyMode": false,
  "disabledMode": false
}
```

### Enterprise scenario

```json
{
  "componentId": "pdx-material-avatar",
  "metadata": {
    "name": "approverAvatar",
    "label": "Aprovador",
    "extra": {
      "imageSrc": "https://cdn.corp.example/avatar/u123.png",
      "imageAlt": "Foto do aprovador",
      "defaultIcon": "mi:person",
      "themeColor": "secondary",
      "rounded": "full",
      "size": "large",
      "border": true,
      "tooltip": "Aprovador principal",
      "ariaLabel": "Avatar do aprovador principal"
    }
  },
  "presentationMode": true,
  "visible": true
}
```

## Compatibility and migration notes (recomendado)

| Concern | Affected versions | Migration action | Deadline | Notes |
| --- | --- | --- | --- | --- |
| No legacy path detected in current revision | n/a | No migration action required for canonical paths | n/a | Re-evaluate if backward-compat aliases are introduced |

## Known limitations and mismatches (recomendado)

| Path/Behavior | Observed behavior (runtime) | Desired behavior | Impact | Tracking issue | Target fix |
| --- | --- | --- | --- | --- | --- |
| Canonical contract parity | No confirmed mismatch in this revision; runtime linkage verified for core flows (2026-03-06), with editor/tooling coverage pending | Keep runtime/schema/editor alignment evidence updated | Low | n/a | Monitor in periodic audit |

## Source references (obrigatorio)

| Source type | Path/URL | Why it is source of truth | Last verified (YYYY-MM-DD) | Notes |
| --- | --- | --- | --- | --- |
| schema-metadata | projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.metadata.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
| runtime-code | projects/praxis-dynamic-fields/src/lib/components/material-avatar/material-avatar.component.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |
| schema-types | projects/praxis-core/src/lib/models/component-metadata.interface.ts | Primary source of truth for contract and behavior. | 2026-03-06 | verified-path |