Chrome switchers

Theme, language, currency and the appearance gear: the small menus that change the site rather than navigate it. Two of them are fed by the API.

The three in the bar

Theme, language and currency, over a single machine: opening one closes the others, an outside click closes, Escape closes and gives focus back to the trigger. These are the real controls - switching the theme here switches the site’s, and the language and currency options are the ones the platform returned.

No capsule, with the label

the bar is only the setting

Default: capsule and label

Icon, flag and sign only

The capsule is the default because it is what makes an icon visible over a translucent bar. Without it, on a bar of text links, the control stops looking like the one item that has been pressed. Icon-only is for the dense bar: `compact` leaves the language as its flag alone, and the currency already shows its SIGN, which is what a price tag says. The accessible name stays complete in all three.

<element-theme-switch>

Light, dark or the system’s. A browser preference: there is no endpoint and there never will be.

system

<element-language-switch>

Switching language NAVIGATES - the URL owns the locale. Each option’s label is the API’s `native_name`.

en · English

<element-currency-switch>

The whole list comes from the platform, with its name, sign and decimal places. The trigger shows the SIGN, which is what a price tag says.

USD

The floating gear

Content width and brand palette. It floats because it is neither navigation nor a reading preference: it is the demonstration of the token system, which is what this template exists to show.

data-width

compact, extended or full. The deployment’s default comes from .env; what the reader picks lives in this browser.

extended

data-palette

Six palettes, and all six derive from four hex values. Each option’s swatch paints itself through data-palette.

echosistema

It is on screen right now, against the right margin: the two values above change live as you use the panel.

The machine underneath

It is `element-switch-dropdown` that each of the three wears. A fifth switcher on a derived site starts here, with the behaviour already done.

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

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

`start` anchors the menu by the trigger’s left edge and `up` opens it upwards: the two props that keep a menu inside the window when the trigger sits at an edge.

For AI agents

This page’s specification

A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.

Download: Switchers Download the full guide Read in the browser

/agents/switchers.md