Componentes

TopBar

Posição: fixed top, z-index 100, fundo transparente. ESQUERDA: logo URBS + pill de saldo. DIREITA: botões de idioma (PT/EN/ES) + botão de saída. Surface light para a maioria das telas, surface dark para estados full-dark (ScreenSaver / ExitRemoveCard).

Surfaces do TopBar

Light · Dark (telas full-dark)

Balance R$ 50,00

Available balance R$ 50,00

Balance R$ 50,00

Available balance R$ 50,00

Posição: fixed top 0 · z-100
Espaçamento: clamp 14-24px · 20-48px
Fundo: transparent (sobre o BG da tela)
Logo: urbs-logo · h:44px
Label do saldo: "Available balance" · uppercase 11-13px
Valor do saldo: 15-22px · fw:800 · tabular-nums
Botão de idioma (ativo): bg #00B4AE · fw:700 · sem borda
Tamanho do botão de idioma: min-h:48px · radius 10
Idioma inativo (light): bg white 92% · 1.5px #C8CDD5
Idioma inativo (dark): bg white 10% · 1.5px white 25%
Botão Exit: bg #1A2332 · texto branco · fw:700
Ícone do Exit: right-from-bracket · 12-17px
Nota da surface dark: Exit oculto em ScreenSaver · ExitRemoveCard

Uso

---
import KioskButton from '@/components/kiosk/Button.astro';
import KioskIcon   from '@/components/icons/KioskIcon.astro';
---

{/* Superfície clara (TopBar na maioria das telas) */}
<KioskButton variant="primary" size="md" label="Exit">
  Exit
  <KioskIcon slot="trailing" name="right-from-bracket" size={16} />
</KioskButton>

{/* Superfície escura (wrapper do ScreenSaver / ExitRemoveCard) */}
<KioskButton variant="primary-dark" size="md" label="Exit">
  Exit
  <KioskIcon slot="trailing" name="right-from-bracket" size={16} />
</KioskButton>

{/* Ação secundária — ghost em superfície clara / escura */}
<KioskButton variant="ghost-light" size="md">Skip</KioskButton>
<KioskButton variant="ghost-dark"  size="md">Skip</KioskButton>

Props

Prop	Tipo	Padrão	Descrição
`variant`	`'primary' \| 'primary-dark' \| 'ghost-light' \| 'ghost-dark'`	`'primary'`	Preenchimento navy para TopBar/Exit; a variante dark adiciona uma borda sutil para leitura sobre painéis escuros.
`size`	`'sm' \| 'md'`	`'md'`	md = kiosk completo (min-h touch 48px · texto 17px) · sm = preview compacto (40px · 14px).
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Atributo `type` nativo do botão.
`label`	`string`	`—`	Label acessível (mapeia para `aria-label`).
`class`	`string`	`—`	Classes extras anexadas ao elemento raiz.
`slot: leading` slot	`—`	`—`	Slot do ícone leading.
`slot: (default)` slot	`—`	`—`	Label / conteúdo do botão.
`slot: trailing` slot	`—`	`—`	Slot do ícone trailing.

variant

Tipo

'primary' | 'primary-dark' | 'ghost-light' | 'ghost-dark'

Padrão

'primary'

Desc

Preenchimento navy para TopBar/Exit; a variante dark adiciona uma borda sutil para leitura sobre painéis escuros.
size

Tipo

'sm' | 'md'

Padrão

'md'

Desc

md = kiosk completo (min-h touch 48px · texto 17px) · sm = preview compacto (40px · 14px).
type

Tipo

'button' | 'submit' | 'reset'

Padrão

'button'

Desc

Atributo `type` nativo do botão.
label

Tipo

string

Padrão

—

Desc

Label acessível (mapeia para `aria-label`).
class

Tipo

string

Padrão

—

Desc

Classes extras anexadas ao elemento raiz.
slot: leading slot

Tipo

—

Padrão

—

Desc

Slot do ícone leading.
slot: (default) slot

Tipo

—

Padrão

—

Desc

Label / conteúdo do botão.
slot: trailing slot

Tipo

—

Padrão

—

Desc

Slot do ícone trailing.