ilibras-widget 1.5.3 → 1.7.0

package/CHANGELOG.md

@@ -4,6 +4,111 @@ Todas as mudanças notáveis neste projeto serão documentadas neste arquivo.
 
 ---
 
+## [1.7.0] - 2026-10-29
+
+### 🌙 O widget acompanha o tema do site, e o ícone fica branco no escuro
+
+A logo é azul-marinho sobre fundo transparente: num site escuro, sumia. Agora
+o widget lê o fundo do site e escolhe o tema que aparece melhor sobre ele. No
+escuro, o azul do ícone vira branco — o dourado continua — e o formulário fica
+escuro junto.
+
+Quem decide é o **fundo do site**, não o `prefers-color-scheme` do sistema,
+que era o que ligava o tema escuro do formulário até aqui. O ícone flutua
+sobre a página, e num site claro aberto num computador em modo escuro o tema
+do sistema pintaria o ícone de branco sobre branco. O sistema continua
+contando por tabela: o site que segue o modo escuro do computador escurece o
+próprio fundo, e é esse fundo que se lê.
+
+- O fundo é o do `<html>` com o do `<body>` por cima, transparência incluída.
+  Site sem fundo próprio mostra a tela-base do navegador, que só é escura
+  quando o site declara `color-scheme` escuro (no CSS ou na `<meta>`).
+- A cor é lida por um canvas de 1 pixel, que entende `oklch()` e `lab()` — o
+  formato em que o Tailwind 4, por exemplo, devolve a cor de fundo.
+- O widget acompanha a troca sem recarregar: classe ou `data-*` mudando no
+  `<html>`/`<body>` (o botão de tema do site), o fim da transição do fundo e o
+  sistema trocando de modo.
+- **Mudança de comportamento:** num site claro, quem tem o sistema em modo
+  escuro passa a ver o formulário claro, como o site. Antes via o escuro.
+
+### ⚙️ Nova opção `tema` e novo método `definirTema()`
+
+`tema: 'auto'` é o padrão. `'claro'` e `'escuro'` fixam o tema — para o site
+que pinta o fundo com gradiente, imagem ou num elemento de dentro, que o
+widget não consegue ler. `definirTema('claro' | 'escuro' | 'auto')` troca na
+hora.
+
+### 🩹 Tema escuro
+
+- O campo com foco era pintado de branco, com o texto claro por cima: sumia o
+  que se digitava.
+- **Agendar** e **Voltar** ficavam em 3:1 no fundo escuro; agora passam de 8:1.
+- O placeholder subiu para 4,6:1, e o contorno de foco — inclusive o do ícone,
+  que fica sobre o fundo do site — ficou claro no tema escuro.
+- O container declara `color-scheme` conforme o tema, para campo, checkbox e o
+  X de fechar não herdarem o esquema do site.
+
+### 🧪 Testes
+
+`tests/tema.test.mjs`: ícone branco com o dourado mantido no site escuro,
+ícone azul no site claro com o sistema escuro, `color-scheme` e `<meta>`,
+transparência, o limite de luminância, canvas bloqueado por proteção contra
+fingerprint, `tema` fixo, `definirTema`, releitura na troca de classe e na
+troca do sistema, e `destroy()` desligando a observação.
+
+---
+
+## [1.6.0] - 2026-09-29
+
+### 🧭 Avisa antes de levar a pessoa para o iLibras
+
+Ao clicar em **Iniciar atendimento em Libras** ou em **Agendar uma conversa**,
+o widget agora mostra, no lugar do formulário, o aviso de que a pessoa será
+redirecionada para o iLibras — numa aba nova — e só segue quando ela confirma
+em **Continuar para o iLibras**. **Voltar** (ou Esc) devolve o formulário com o
+nome ainda preenchido.
+
+O atendimento só é criado **depois** do "sim". Criar antes e perguntar depois
+deixaria um atendimento órfão na fila de quem desistiu — com o alarme dos
+intérpretes tocando para ninguém.
+
+### 🗂️ A aba nova abre dentro do clique
+
+A aba do iLibras passa a ser aberta no próprio clique de confirmação, em
+branco ("Abrindo o iLibras…"), e só recebe o endereço quando o atendimento
+volta criado. Antes ela era aberta depois da resposta da API — e `window.open`
+depois de um `await` já não conta como gesto do usuário, que é quando o
+bloqueador de pop-up age. Se a criação falhar, a aba reservada é fechada e a
+pessoa volta ao formulário, onde está a explicação do que houve. O plano B de
+sempre (trocar a página da aba atual) continua valendo para quando nem a aba
+do clique é permitida.
+
+### ⚙️ Nova opção: `confirmarRedirecionamento`
+
+Ligada por padrão. Com `false`, o widget se comporta como antes da 1.6.0: o
+botão cria o atendimento e abre o iLibras direto.
+
+### ♿ Acessibilidade
+
+- O aviso é um `alertdialog` com título e texto ligados: ao receber o foco, o
+  leitor de tela lê os dois antes do botão.
+- O foco vai para **Continuar** ao abrir o aviso e volta ao botão que a pessoa
+  tinha apertado ao sair dele.
+- A região de status saiu de dentro do formulário: escondida junto com ele
+  durante o aviso, deixaria de anunciar o andamento do envio.
+- O botão de contorno (agendar, e agora também **Voltar**) ganhou foco visível
+  próprio, inclusive em alto contraste — antes dependia do padrão do navegador.
+
+### 🧪 Testes
+
+`tests/confirmacao.test.mjs` exercita o fluxo na build publicada, com rede e
+janelas simuladas: nada enviado antes da confirmação, aba aberta antes da
+requisição, aba fechada na falha, clique duplo criando um atendimento só.
+Rodada contra a 1.5.3, a suíte reprova em 9 de 10 casos — o único que passa é
+o da opção desligada, que é justamente o comportamento antigo.
+
+---
+
 ## [1.5.3] - 2026-09-18
 
 ### 🩹 Conserta o widget que sumiu da tela na 1.5.1

package/README.md

@@ -18,7 +18,7 @@ Widget de acessibilidade em Libras: um botão flutuante que leva a pessoa surda
 - 🔒 **Envio seguro** - Dados enviados via POST para API
 - 🌐 **Universal** - Funciona em qualquer site ou sistema
 - ♿ **Acessível** - Suporte a leitores de tela e navegação por teclado
-- 🌙 **Tema escuro** - Adapta-se automaticamente às preferências do usuário
+- 🌙 **Tema claro e escuro** - Acompanha o fundo do site, e o ícone fica branco no tema escuro
 
 ## 📦 Instalação
 
@@ -168,6 +168,8 @@ new ILibrasWidget({
 | `buttonText` | `string` | `'Iniciar atendimento em Libras'` | Texto do botão de envio |
 | `agendamento` | `boolean` | `true` | Mostra o segundo botão, que leva direto à escolha de data e horário em vez da fila ao vivo. Deixe `false` em site que só atende ao vivo |
 | `scheduleButtonText` | `string` | `'Agendar uma conversa'` | Texto do botão de agendamento |
+| `confirmarRedirecionamento` | `boolean` | `true` | Avisa que a pessoa vai para o site do iLibras, numa aba nova, e só cria o atendimento depois que ela confirma. Com `false`, o botão cria o atendimento e abre o iLibras direto, como antes da v1.6.0 |
+| `tema` | `string` | `'auto'` | `'auto'` acompanha o fundo do site — inclusive quando o site segue o modo escuro do sistema. `'claro'` ou `'escuro'` fixam o tema. Ver [Tema claro e escuro](#tema-claro-e-escuro) |
 | `token` | `string` | `''` | **OBRIGATÓRIO** — token de autenticação da API |
 | `zIndex` | `number` | `9999` | Z-index do widget |
 | `apiUrl` | `string` | endpoint de produção | Endpoint de cadastro. Troque apenas para apontar a um ambiente de homologação |
@@ -359,6 +361,38 @@ Você pode sobrescrever os estilos padrão:
 }
 ```
 
+### Tema claro e escuro
+
+O widget lê a cor de fundo do site e escolhe o tema que aparece melhor sobre
+ela: no escuro, o ícone fica branco (o dourado da logo continua) e o formulário
+fica escuro. Ele acompanha a troca sem recarregar — o botão de tema do site, ou
+o sistema mudando de modo quando o site segue o sistema.
+
+> ✅ **Não precisa configurar nada.** Vem ligado por padrão (`tema: 'auto'`)
+> desde a v1.7.0. Quem já tem o widget instalado só precisa atualizar: o
+> pacote (`npm i ilibras-widget@latest`) ou o arquivo `ilibras-widget.js` — a
+> configuração continua a mesma.
+
+Para ver funcionando, abra `teste-modo-escuro.html` no navegador: ele troca o
+fundo do "site" e o tema do widget, com o envio simulado.
+
+Quem decide é o **fundo do site**, não a preferência do sistema: o ícone flutua
+sobre a página, e num site claro aberto num computador em modo escuro um ícone
+branco sumiria.
+
+O fundo lido é o do `<html>` e o do `<body>`. Se o site pinta o fundo com
+gradiente, imagem ou num elemento de dentro, fixe o tema:
+
+```javascript
+new ILibrasWidget({ token: 'SEU_TOKEN', tema: 'escuro' });
+
+// ou, num botão de tema que o widget não percebe sozinho:
+widget.definirTema('escuro');  // 'claro', 'escuro' ou 'auto'
+```
+
+No CSS, o tema escuro é a classe `.ilibras-widget-tema-escuro` no
+`#ilibras-widget-container`.
+
 ## 🔧 API JavaScript
 
 ### Métodos Públicos
@@ -375,6 +409,9 @@ widget.closeWidget();
 // Alternar estado (abrir/fechar)
 widget.toggleWidget();
 
+// Trocar o tema: 'claro', 'escuro' ou 'auto' (volta a seguir o site)
+widget.definirTema('escuro');
+
 // Destruir o widget e remover do DOM
 widget.destroy();
 ```
@@ -605,6 +642,7 @@ Ilibras_widget/
 ├── ilibras-widget.js        # GERADO: build de <script>, no endereço de sempre
 ├── index.d.ts               # Tipos TypeScript
 ├── exemplo.html             # Página de exemplo e demonstração
+├── teste-modo-escuro.html   # Teste manual do tema claro e escuro
 └── README.md                # Esta documentação
 ```