openVS Live Component Editor

Design System

Visão Geral

O openVS Design System fornece um conjunto robusto de componentes Web em conformidade com WCAG 2.1 AA, estruturados sob Shadow DOM e estilizados estritamente via Design Tokens extraídos do Figma.

1. Primitivos (Físicos)

➔

2. Semânticos (Temas)

➔

3. Componente (Especificidade)

Arquitetura de Tokens Estrita

Todos os estilos de componentes buscam variáveis CSS que herdam diretamente dos temas e escalas semânticas globais. Isso garante suporte imediato e robusto para multimodo (Light e Dark) e multimarca (Brand A e Brand B).

Ações

vs-button

Botões são elementos visuais interativos que permitem aos usuários executar ações importantes em um clique.

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`appearance`	`'Accent' \| 'Neutral' \| 'Ghost'`	`'Accent'`	Nível de ênfase visual do botão na interface.
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do componente.
`textLabel`	`string`	`''`	Texto visível exibido no botão.
`showTextLabel`	`boolean`	`true`	Controla se o rótulo de texto é visível.
`leadIcon` / `traillingIcon`	`string`	`''`	Nomes dos ícones do Material Design.

Diretrizes de UX

Hierarquia Visual: Nunca utilize mais de um botão Accent lado a lado em uma mesma seção de controle.
Acessibilidade: Se showTextLabel for desativado, é obrigatório declarar o atributo aria-label descrevendo textualmente a ação.

Layout

vs-card

O Card é um contêiner estrutural estático projetado para organizar e agrupar conteúdos relacionados em blocos visuais coerentes.

Mapeado diretamente ao Figma (node-id=325-756).

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-cards-card-background-color`	`var(--commom-colors-surface-default, #ffffff)`	Cor de fundo do contêiner do card.
`--specific-cards-card-border-color`	`var(--commom-colors-border-soft, #f5f5f5)`	Cor da borda externa (stroke) do card.
`--specific-cards-card-border-radius`	`var(--commom-border-style-radius-medium, 16px)`	Arredondamento das quinas do contêiner.
`--specific-cards-card-padding`	`var(--commom-size-8, 8px)`	Espaçamento interno para conteúdo no slot.
`--specific-cards-card-width` / `-height`	`328px / 312px`	Dimensões padrão estritas mapeadas no Figma.

Diretrizes de UX

Organização: Use cards para separar informações heterogêneas na interface (como widgets de painel, itens de grade).
Interação: Sendo um elemento estático, não aplique comportamentos de clique ou estados focados diretamente no card. Utilize elementos internos de ação se necessário.

Layout

vs-divider

O Divider é um componente visual reativo projetado para estruturar layouts e separar conteúdos com sutileza e consistência.

Mapeado diretamente ao Figma (node-id=185-802).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`intensity`	`'Soft' \| 'Medium' \| 'Intense'`	`'Soft'`	Define a intensidade de cor/contraste do divisor.
`weight`	`'Light' \| 'Medium' \| 'Bold' \| 'Extra Bold'`	`'Light'`	Define a espessura física do divisor.

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-divider-border-radius`	`var(--commom-border-style-radius-pill, 1000px)`	Arredondamento das quinas do divisor (formato Pill).

Diretrizes de UX

Consistência: Sempre prefira a intensidade Soft para divisores comuns do dia a dia, reservando Medium e Intense para blocos com maior necessidade de separação visual.
Acessibilidade: O componente renderiza automaticamente a role semântica role="separator" com aria-orientation="horizontal".

Feedback

vs-snackbar

O Snackbar é um componente de notificação reativo projetado para exibir feedbacks temporários ou permanentes de forma elegante.

Mapeado diretamente ao Figma (node-id=327-1501).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`appearance`	`'Neutral' \| 'Positive' \| 'Warning' \| 'Negative'`	`'Neutral'`	Define a variação visual/tema de feedback da notificação.
`text-label`	`string`	`'Snackbar with action'`	O texto de descrição a ser exibido (pode ser sobrescrito pelo slot padrão).
`show-close-button`	`boolean`	`true`	Se o botão com ícone de fechar deve ser renderizado à direita.

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-snackbar-border-radius`	`var(--commom-border-style-radius-quark, 4px)`	Arredondamento das quinas do snackbar.
`--specific-snackbar-padding`	`var(--commom-size-8, 8px)`	Espaçamento interno do contêiner.
`--specific-snackbar-gap`	`var(--commom-size-16, 16px)`	Distância entre o texto e a ação.
`--specific-snackbar-width`	`312px`	Largura do contêiner da notificação.
`--specific-snackbar-elevation`	`0px 4px 8px rgba(0,0,0,0.08)`	Sombra/elevação do contêiner.

Diretrizes de UX

Objetividade: Mantenha o texto da notificação curto, direto e autoexplicativo (máximo 2 linhas recomendadas).
Acessibilidade: O componente possui role="status" e aria-live="polite" para anúncio automático por leitores de tela.

Images

vs-avatar

O Avatar é um componente visual utilizado para representar usuários por meio de fotos, iniciais ou ícones de fallback de forma consistente.

Mapeado diretamente ao Figma (node-id=177-1680).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`kind`	`'Icon' \| 'Initial' \| 'Image'`	`'Icon'`	Determina a forma de representação do avatar.
`appearance`	`'Neutral' \| 'Inversed' \| 'Accent'`	`'Neutral'`	Define a variação de cores do contêiner.
`size`	`'Extra Small' \| 'Small' \| 'Medium' \| 'Large'`	`'Medium'`	Define a escala de tamanho do avatar.
`state`	`'Enabled' \| 'Disabled'`	`'Enabled'`	Define o estado de interação e opacidade.
`initial-content`	`string`	`'Aa'`	Iniciais do usuário exibidas se kind for Initial.
`image-url`	`string`	`''`	URL da imagem do usuário se kind for Image.

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-avatar-large-border-radius`	`var(--commom-border-style-radius-pill, 1000px)`	Arredondamento das quinas do avatar Large.
`--specific-avatar-medium-border-radius`	`var(--commom-border-style-radius-pill, 1000px)`	Arredondamento das quinas do avatar Medium.
`--specific-avatar-small-border-radius`	`var(--commom-border-style-radius-pill, 1000px)`	Arredondamento das quinas do avatar Small.
`--specific-avatar-extra-small-border-radius`	`var(--border-style-radius-micro, 4px)`	Arredondamento das quinas do avatar Extra Small.

Diretrizes de UX

Consistência visual: Avatares de tamanho Extra Small (24px) possuem cantos ligeiramente arredondados (4px) por questões de legibilidade em escalas reduzidas, enquanto os demais tamanhos são circulares.
Acessibilidade: Quando a propriedade image-url for definida, sempre forneça um texto alternativo em image-alt para acessibilidade.

Feedback

vs-tag

A Tag é um componente interativo de indicação, contendo um rótulo e um botão de fechar opcional para dispensá-lo.

Mapeado diretamente ao Figma (node-id=305-187).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`open`	`boolean`	`true`	Controla se a tag é exibida.
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Disabled'`	`'Enabled'`	Estado de interação da tag.
`show-trailing-icon`	`boolean`	`true`	Exibe o ícone de fechar à direita.
`text-label`	`string`	`'Tag Label'`	Texto exibido dentro da tag.

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-tag-border-radius`	`var(--commom-border-style-radius-quark, 4px)`	Arredondamento dos cantos da tag.
`--specific-tag-padding`	`var(--commom-size-4, 4px)`	Espaçamento interno.
`--specific-tag-gap`	`var(--commom-size-4, 4px)`	Espaçamento entre o texto e o ícone.

Diretrizes de UX

Eventos: Quando o botão de fechar é clicado, a tag dispara o evento vs-close antes de definir open = false.
Interação: O estado desabilitado impede qualquer interação (bloqueia cliques e cursor pointer).

Seleção

vs-checkbox

Checkboxes permitem que o usuário selecione uma ou mais opções de uma lista, ou confirme termos e decisões binárias individuais.

Mapeado diretamente ao Figma (node-id=325-955).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`status`	`'Unselected' \| 'Indeterminate' \| 'Selected'`	`'Unselected'`	Define a seleção atual do checkbox.
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do seletor.
`textLabel`	`string`	`'Checkbox Label'`	Texto descritivo posicionado ao lado do seletor.
`showLabel`	`boolean`	`true`	Controla se o texto ao lado é renderizado.

Diretrizes de UX

Múltipla Escolha: Use checkboxes quando múltiplas opções independentes puderem ser selecionadas simultaneamente.
Indeterminado: O status Indeterminate deve ser usado de forma lógica em listagens hierárquicas quando apenas parte das sub-opções estiver selecionada.

Seleção

vs-radio-button

Radio Buttons permitem que os usuários escolham exatamente uma única opção em uma lista de opções mutuamente exclusivas.

Mapeado diretamente ao Figma (node-id=325-1089).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`isActive`	`boolean`	`false`	Define se a opção está ativa/selecionada.
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do seletor.
`textLabel`	`string`	`'Radio Label'`	Rótulo de texto descritivo.
`showLabel`	`boolean`	`true`	Exibe ou oculta o rótulo de texto.

Diretrizes de UX

Exclusividade: Garanta que apenas um Radio Button por grupo esteja marcado (`is-active="true"`) a qualquer momento.
Opções Limitadas: Use Radio Buttons para conjuntos curtos (entre 2 e 5 opções). Acima disso, utilize o componente Select.

Seleção

vs-switch

O Switch (interruptor) permite alternar de forma imediata o estado binário de uma configuração ou serviço.

Mapeado diretamente ao Figma (node-id=325-1141).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`checked`	`boolean`	`false`	Define se o switch está ativado (On) ou desativado (Off).
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do botão de comutação.
`textLabel`	`string`	`'Switch Label'`	Texto do rótulo ao lado do switch.
`showLabel`	`boolean`	`true`	Exibe ou oculta o texto de rótulo.

Diretrizes de UX

Ação Imediata: Um switch deve aplicar sua configuração imediatamente após a alteração de estado (ex: ativar Wi-Fi, alternar Dark Mode). Não utilize switches dentro de formulários que dependem de um botão "Salvar" secundário.

Seleção

vs-chip

Chips são blocos compactos e informativos que permitem aos usuários filtrar conteúdos, fazer seleções rápidas ou visualizar rótulos/tags.

Mapeado diretamente ao Figma (node-id=282-209).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`isActive`	`boolean`	`false`	Controla o estado visual de seleção/ativação do chip.
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do chip.
`textLabel`	`string`	`"I'm a Chip"`	Rótulo de texto visível no interior do chip.
`showTextLabel`	`boolean`	`true`	Exibe ou oculta o texto.
`traillingIcon`	`string`	`'apps'`	Ícone do Material Design posicionado ao lado direito.
`showTraillingIcon`	`boolean`	`true`	Exibe ou oculta o ícone de fechamento/ação à direita.

Diretrizes de UX

Filtros: Use chips para permitir que usuários alternem categorias de listagens rapidamente de forma empilhada.
Ação Compacta: O ícone à direita (trailling icon) geralmente indica uma ação associada (ex: limpar filtro, remover tag).

Entrada de Texto

vs-text-input

O Text Input é um wrapper estilizado de formulário em torno do input nativo HTML, com suporte a rótulos, estados, ícones de leading/trailing e tratamento de erros.

Mapeado diretamente ao Figma (node-id=181-87).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`kind`	`'Default' \| 'Negative'`	`'Default'`	Altera a aparência para padrão ou erro/alerta (Negative).
`state`	`'Enabled' \| 'Hovered' \| 'Pressed' \| 'Focused' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do componente.
`value` (text-content)	`string`	`''`	O texto digitado e contido no input.
`isPopulated`	`boolean`	`false`	Reflete se o input possui algum texto digitado.
`label`	`string`	`'Label'`	Rótulo descritivo posicionado acima do input.
`showRequired` (show-required)	`boolean`	`true`	Controla a exibição do indicador de campo obrigatório (Show Required).
`requiredText` (required-text)	`string`	`'(Required)'`	O conteúdo de texto exibido como indicador de obrigatoriedade (Required Text).
`helperText`	`string`	`'Helper text'`	Texto de auxílio exibido abaixo do input.
`leadIcon` / `traillingIcon`	`string`	`'apps' / 'bubble_chart'`	Ícones decorativos do Material Design.

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-input-text-border-radius`	`var(--commom-border-radius-12, 12px)`	Arredondamento das quinas da caixa de texto (12px).
`--input-text-min-widith`	`312px`	Largura padrão do componente de input (312px).
`--specific-input-text-padding-y`	`var(--commom-size-8, 8px)`	Padding vertical interno da caixa de texto (8px).
`--specific-input-text-padding-x`	`var(--commom-size-16, 16px)`	Padding horizontal interno da caixa de texto (16px).
`--specific-input-text-gap`	`var(--commom-size-2, 2px)`	Espaçamento interno entre elementos na caixa de texto (2px).
`--specific-input-text-container-gap`	`var(--commom-size-4, 4px)`	Espaçamento vertical geral do container do componente (4px).
`--specific-input-text-label-gap`	`var(--commom-size-2, 2px)`	Espaçamento entre o rótulo e o indicador de obrigatório (2px).
`--specific-input-text-content-padding-right`	`var(--commom-size-12, 12px)`	Padding direito da área de conteúdo interna (12px).
`--specific-input-text-background-color`	`var(--commom-colors-neutral-semi-soft, #f5f5f5)`	Cor de fundo do input padrão.
`--specific-input-text-negative-background-color`	`var(--commom-colors-decorative-03-soft, #ffd3d3)`	Cor de fundo para o estado de erro (Negative).
`--specific-input-text-negative-color`	`var(--commom-colors-decorative-03-intense, #840000)`	Cor do texto e ícones em caso de erro (Negative).

Diretrizes de UX e Acessibilidade

Validação e Feedback: Use o kind Negative juntamente com uma mensagem esclarecedora no helperText para guiar a correção de dados pelo usuário.
Foco: Graças ao delegatesFocus: true do Shadow DOM, clicar em qualquer lugar da caixa de texto foca o input nativo, ativando o anel de foco externo de 2px de espessura de alto contraste.
Leitores de Tela: O indicador de obrigatoriedade (configurado via requiredText) possui aria-hidden="true" para evitar a leitura desnecessária de caracteres especiais ou redundantes. O input gera automaticamente uma descrição acessível unindo rótulo e placeholder se nenhum aria-label personalizado for especificado.

Coleções

vs-chips-input

O Chips Input é um wrapper estruturado que agrupa múltiplos chips e um input de texto inline para seleção e entrada de múltiplos valores.

Mapeado diretamente ao Figma (node-id=311-5041).

Propriedades Reativas

Propriedade	Tipo	Valor Padrão	Finalidade
`kind`	`'Default' \| 'Negative'`	`'Default'`	Altera a aparência para padrão ou erro/alerta (Negative).
`state`	`'Enabled' \| 'Disabled'`	`'Enabled'`	Estado de interação atual do componente.
`chips`	`string[]`	`['Item 01', 'Item 02', 'Item 03']`	Lista de strings contendo cada tag/chip ativo.
`label`	`string`	`'Label'`	Rótulo descritivo posicionado acima do input.
`showRequired` (show-required)	`boolean`	`true`	Controla a exibição do indicador de campo obrigatório.
`requiredText` (required-text)	`string`	`'(Required Text)'`	O conteúdo de texto exibido como indicador de obrigatoriedade.
`helperText`	`string`	`'Helper text'`	Texto de auxílio exibido abaixo do input.
`placeholderContent` (placeholder-content)	`string`	`'Add item...'`	Dica exibida no input interno quando vazio.

Tokens de Customização Específicos

Token de Estilo	Fallback Padrão	Finalidade
`--specific-chips-input-container-gap`	`var(--commom-size-4, 4px)`	Espaçamento vertical geral do container do componente (4px).
`--specific-chips-input-label-gap`	`var(--commom-size-2, 2px)`	Espaçamento entre o rótulo e o indicador de obrigatório (2px).
`--specific-chips-input-chips-gap`	`var(--commom-size-4, 4px)`	Espaçamento interno entre os chips inseridos no fluxo (4px).

Diretrizes de UX e Acessibilidade

Interação Inteligente: Ao pressionar Enter no input interno, a string digitada é adicionada ao conjunto de chips. Pressionar Backspace com o campo de texto vazio remove o último chip inserido.
Reuso de Componentes: Os chips internos herdam a acessibilidade e o foco do componente vs-chip original, garantindo que o leitor de tela possa navegar individualmente por cada tag.
Estado Desabilitado: Ao setar o estado como Disabled, a opacidade do componente é ajustada para 32%, bloqueando todas as interações do input e dos chips contidos.

Visualização em Tempo Real

Código Gerado (HTML)

Visão Geral

Arquitetura de Tokens Estrita

vs-button

Propriedades Reativas

Diretrizes de UX

vs-card

Tokens de Customização Específicos

Diretrizes de UX

vs-divider

Propriedades Reativas

Tokens de Customização Específicos

Diretrizes de UX

vs-snackbar

Propriedades Reativas

Tokens de Customização Específicos

Diretrizes de UX

vs-avatar

Propriedades Reativas

Tokens de Customização Específicos

Diretrizes de UX

vs-tag

Propriedades Reativas

Tokens de Customização Específicos

Diretrizes de UX

vs-checkbox

Propriedades Reativas

Diretrizes de UX

vs-radio-button

Propriedades Reativas

Diretrizes de UX

vs-switch

Propriedades Reativas

Diretrizes de UX

vs-chip

Propriedades Reativas

Diretrizes de UX

vs-text-input

Propriedades Reativas

Tokens de Customização Específicos

Diretrizes de UX e Acessibilidade

vs-chips-input

Propriedades Reativas

Tokens de Customização Específicos

Diretrizes de UX e Acessibilidade