Seletores do chrome

Tema, idioma, moeda e a engrenagem de aparência: os menus pequenos que mudam o site em vez de navegar por ele. Dois deles são alimentados pela API.

Os três da barra

Tema, idioma e moeda, sobre um único mecanismo: abrir um fecha os outros, clique fora fecha, Escape fecha e devolve o foco ao gatilho. São os controles de verdade - trocar o tema aqui troca o tema do site, e as opções de idioma e moeda são as que a plataforma devolveu.

Sem cápsula, com rótulo

a barra é só o cenário

Padrão: cápsula e rótulo

Só ícone, bandeira e sinal

A cápsula é o padrão porque é o que torna um ícone visível sobre uma barra translúcida. Sem ela, numa barra de links de texto, o controle deixa de parecer o único item pressionado. Só ícone é para a barra densa: `compact` no idioma deixa a bandeira sozinha, e a moeda já mostra o SINAL, que é o que uma etiqueta de preço diz. O nome acessível continua completo nos três.

<element-theme-switch>

Claro, escuro ou o do sistema. Preferência do navegador: não há endpoint e nunca haverá.

system

<element-language-switch>

Troca de idioma NAVEGA - a URL é dona do locale. O rótulo de cada opção é o `native_name` da API.

pt-BR · Portugues (Brasil)

<element-currency-switch>

A lista inteira vem da plataforma, com nome, sinal e casas decimais. O gatilho mostra o SINAL, que é o que uma etiqueta de preço diz.

USD

A engrenagem flutuante

Largura do conteúdo e paleta da marca. Ela flutua porque não é navegação nem preferência de leitura: é a demonstração do sistema de tokens, que é o que este template existe para mostrar.

data-width

compact, extended ou full. O padrão do deploy vem do .env; o que o leitor escolhe vale neste navegador.

extended

data-palette

Seis paletas, e as seis derivam de quatro valores hex. A bolinha de cada opção se pinta sozinha com data-palette.

echosistema

Ela está aqui na tela, encostada na margem direita: os dois valores acima mudam ao vivo quando você usa o painel.

O mecanismo por baixo

É o `element-switch-dropdown` que cada um dos três veste. Um quinto seletor num site derivado nasce daqui, com o comportamento pronto.

<element-switch-dropdown label="Ordenar">
  <template #trigger>…</template>

  <template #default="{ choose }">
    <li><button @click="choose(); select(option)">…</button></li>
  </template>
</element-switch-dropdown>

`start` ancora o menu pela borda esquerda do gatilho e `up` o abre para cima: são as duas props que mantêm um menu dentro da janela quando o gatilho está na borda.

Para agentes de IA

Especificação desta página

Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.

Baixar: Seletores Baixar o guia completo Ler no navegador

/agents/switchers.md