@thibezer/ui-components-kit 2.6.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2.6.1 — 2026-10-17
+
+### `<ui-controle-cores>` e `<ui-seletor-cor>`: revisão de erros e visual
+
+**Correções**
+
+- O botão "sem cor" ficava por cima da amostra do traço e roubava os cliques da metade inferior esquerda dela. As ações (inverter, sem cor, restaurar padrão) agora ficam numa coluna ao lado das amostras, cada uma com a própria área de clique, sem sobreposição.
+- `desabilitado` agora desativa todos os botões (antes só bloqueava o mouse: Tab + Enter ainda inverter/limpar/restaurar) e fecha um seletor aberto; remover o atributo reativa o controle.
+- Trocar o alvo pelo controle (`alternarAlvo()`, `definirAlvo()`, clique na outra amostra) agora acompanha a aba do seletor aberto, em vez de deixá-las divergentes.
+- `fecharSeletor(false)` agora cancela de verdade: as cores iniciais voltam (com um `ui-cores-change` não confirmado) em vez de ficar a pré-visualização aplicada sem nenhuma confirmação.
+- `ui-alvo-change` não é mais emitido em duplicidade no documento (o painel do seletor deixou de repassá-lo ao abrir pelo popover; use `aoTrocarAlvo`).
+- Espaço/Enter na amostra ativa com o seletor aberto fecham como o clique, e o Espaço não fecha mais o painel recém-aberto em navegadores que disparam o clique ao soltar a tecla.
+
+**Acessibilidade**
+
+- `abrirSeletorCor({ focar: true })` leva o foco ao painel (o controle usa ao abrir por teclado); ao fechar, o foco volta para a âncora. O painel ganha `aria-label` e as amostras da paleta `aria-pressed`.
+- O grupo de amostras é anunciado como "Cores de desenho"; a dica/`aria-label` do preenchimento informa a opacidade.
+
+**Visual**
+
+- Amostras maiores (`--ui-controle-cores-amostra`, padrão 26px), coluna de ações alinhada, ícone "padrão" refeito e anel de foco visível.
+- Ambos os componentes passam a usar os tokens do kit (`--ui-cor-texto`, `--ui-cor-borda`, `--ui-cor-primaria`…) e acompanham o tema claro; antes eram fixos no escuro.
+- Seletor: trilha da opacidade preenchida até o valor, rótulos ORIGINAL/NOVA sempre legíveis, diagonal de "sem cor" igual à do controle, aba de preenchimento "sem cor" com a diagonal vermelha, `prefers-reduced-motion` respeitado e painel reposicionado ao redimensionar a janela.
+
 ## 2.6.0 — 2026-10-17
 
 ### `<ui-ribbon>` e `<ui-paleta-ferramentas>`: contrato com o consumidor

package/README.md

@@ -727,8 +727,8 @@ window.addEventListener('message', (event) => {
 | `<ui-tabela-propriedades>` | Inspetor de propriedades técnicas padrão AutoCAD & Revit com cálculos matemáticos inline (+, -, *, /, ^, %), arraste de valor contínuo (scrubbing), splitter redimensionável e editores CAD. | `categorias`, `tipo-objeto`, `splitter-pos`, `modo-aplicar`, `filtro` | `ui-propriedade-alterada`, `ui-aplicar`, `ui-desfazer`, `ui-editar-tipo`, `ui-acao-clique`, `ui-quick-select`, `ui-calculadora` |
 | `<ui-ribbon>` | Barra de ferramentas em abas e grupos (estilo AutoCAD / Word / Excel): botões grandes e pequenos em colunas de 3, toggles, menus suspensos, abas contextuais, modo recolhido (duplo clique na aba) e navegação por teclado (roving tabindex). `aba-ativa` pode ser definido antes de `abas` (fica pendente); `aria-label` e `rotulo-abas` rotulam a toolbar e o tablist; `ui-ferramenta` é cancelável (`preventDefault()` reverte o toggle); `atalho` é só texto no ribbon. Use `id` únicos e `rotulo`/`rotuloAcessivel` em botões só de ícone. | `abas`, `aba-ativa`, `recolhido`, `compacto`, `aria-label`, `rotulo-abas` | `ui-ferramenta`, `ui-aba-change`, `ui-recolhido-change` |
 | `<ui-paleta-ferramentas>` | Paleta de ferramentas (estilo Illustrator / Photoshop): seleção exclusiva, grupos com flyout (clique longo, botão direito ou seta), 1 ou 2 colunas, vertical/horizontal e atalhos de teclado que percorrem o grupo. `valor` pode vir antes de `ferramentas` (pendente) e `valor = ''` / `limpar()` remove a seleção; `ui-ferramenta` dispara sempre e é cancelável (`preventDefault()` reverte), `ui-change`/`ui-selecionar` só quando a seleção muda (ouça um deles, não ambos). Atalhos: use `atalhos` em uma paleta por página. | `ferramentas`, `valor`, `orientacao`, `colunas`, `tamanho`, `atalhos`, `aria-label` | `ui-change`, `ui-selecionar`, `ui-ferramenta` |
-| `<ui-controle-cores>` | Par de cores de desenho (estilo Illustrator): preenchimento na frente, traço atrás, botões de inverter, "sem cor" e restaurar padrão, estado misto (`?`) e modo só traço. Clique no alvo ativo abre o `<ui-seletor-cor>`. Não registra atalhos: quem usa chama `alternarAlvo()`, `inverter()`, `semCor()`, `restaurarPadrao()` e pode exibir as teclas via `atalhos`. Entrada: `@thibezer/ui-components-kit/cores`. | `preenchimento`, `traco`, `opacidade`, `alvo`, `padrao-preenchimento`, `padrao-traco`, `titulo-seletor`, `so-traco`, `desabilitado`, `coresProjeto`, `definirCores()`, `definirMisto()` | `ui-cores-change` (`confirmado` false = pré-visualização), `ui-alvo-change` |
-| `<ui-seletor-cor>` | Painel de cor flutuante: abas Preenchimento/Traço (ou cor única), prévia antes × depois, hexadecimal, seletor do sistema, opacidade, cores do projeto, paleta e "sem cor". Abra com `abrirSeletorCor({ ancora, ... })`: um por vez, Esc/clique fora confirmam, Cancelar restaura, `X` alterna o alvo. | `abrirSeletorCor()`, `fecharSeletorCor()`, `configurar()`, `modo` (`duplo`, `simples`), `alvo`, `preenchimento`, `traco`, `cor`, `opacidade`, `mostrarOpacidade`, `misto`, `coresProjeto`, `paleta` | `ui-cor-input`, `ui-cor-confirmar`, `ui-cor-cancelar`, `ui-alvo-change` |
+| `<ui-controle-cores>` | Par de cores de desenho (estilo Illustrator): preenchimento na frente, traço atrás, botões de inverter, "sem cor" e restaurar padrão, estado misto (`?`) e modo só traço. Clique no alvo ativo abre o `<ui-seletor-cor>`. Não registra atalhos: quem usa chama `alternarAlvo()`, `inverter()`, `semCor()`, `restaurarPadrao()` e pode exibir as teclas via `atalhos`. Tamanho ajustável com `--ui-controle-cores-amostra`. Entrada: `@thibezer/ui-components-kit/cores`. | `preenchimento`, `traco`, `opacidade`, `alvo`, `padrao-preenchimento`, `padrao-traco`, `titulo-seletor`, `so-traco`, `desabilitado`, `coresProjeto`, `definirCores()`, `definirMisto()` | `ui-cores-change` (`confirmado` false = pré-visualização), `ui-alvo-change` |
+| `<ui-seletor-cor>` | Painel de cor flutuante: abas Preenchimento/Traço (ou cor única), prévia antes × depois, hexadecimal, seletor do sistema, opacidade, cores do projeto, paleta e "sem cor". Abra com `abrirSeletorCor({ ancora, ... })`: um por vez, Esc/clique fora confirmam, Cancelar restaura, `X` alterna o alvo. | `abrirSeletorCor()`, `fecharSeletorCor()`, `configurar()`, `modo` (`duplo`, `simples`), `alvo`, `preenchimento`, `traco`, `cor`, `opacidade`, `mostrarOpacidade`, `misto`, `coresProjeto`, `paleta`, `focar` | `ui-cor-input`, `ui-cor-confirmar`, `ui-cor-cancelar`, `ui-alvo-change` |
 | `<ui-mapa>` | Mapa geográfico interativo com camadas OpenStreetMap. | `lat`, `lng`, `zoom`, `camadas` | - |
 | `<ui-camadas>` | Painel de camadas vetoriais CAD/GIS com hierarquia em árvore, barra de arraste vertical (`redimensionavel`), estabilidade de altura sem colapso, drag-and-drop, métricas geodésicas e persistência no LocalStorage. | `redimensionavel`, `altura`, `min-altura`, `max-altura`, `flutuante`, `colapsado`, `camada-ativa`, `persistir` | `ui-redimensionar-altura`, `ui-camada-selecionada`, `ui-camada-visibilidade`, `ui-camadas-reordenadas`, `ui-acao-massa` |
 | `<ui-canvas-cad>` | Mesa CAD/GIS para poligonais, vértices geodésicos e **feições genéricas** (ponto, linha, polígono, círculo, texto) que você cria: seleção por clique e caixa, popup, edição de vértices, snap, 15 ferramentas de desenho/medição, oficial × prévia, cursores remotos e culling/clusters para 100 mil feições. Linha multiparte, feição `oculta`, selo de texto e contorno de ponto. Nenhuma camada vem pronta. Guia: [`docs/guia-migracao-mapengine.md`](docs/guia-migracao-mapengine.md). | `pontos`, `segmentos`, `ferramentas`, `sem-camadas-padrao`, `sem-painel-camadas`, `sem-barra-rapida`, `sem-atalho-snap`, `aceitar-origem`, `inicializarAgora()`, `definirFeicoes()`, `aplicarLote()`, `definirFerramenta()`, `editarVertices()`, `definirMargensHud()`, `definirEstilosExternos()`, `fitBounds()` | `ui-ponto-selecionado`, `cad-selecao`, `cad-feicao-selecionada`, `cad-feicao-criada`, `cad-feicao-atualizada`, `cad-feicao-hover`, `cad-feicao-menu`, `cad-snap`, `cad-previas` e outros (ver `docs/canvas-cad-eventos.md`) |

package/dist/components/ui-cores/tipos.d.ts

@@ -41,6 +41,8 @@ export interface OpcoesSeletorCor {
     coresProjeto?: ValorCor[];
     /** Substitui a paleta padrão. */
     paleta?: ValorCor[];
+    /** Leva o foco do teclado para o painel ao abrir (ao fechar, o foco volta para a âncora). Padrão: `false`. */
+    focar?: boolean;
     /** Cada alteração (pré-visualização, ainda não confirmada). */
     aoAlterar?: (detalhe: DetalheSeletorCor) => void;
     /** Ao fechar confirmando: Concluir, ✕, Enter no hexadecimal, Esc ou clique fora. */

package/dist/components/ui-cores/ui-controle-cores.d.ts

@@ -79,11 +79,16 @@ export declare class UIControleCores extends SafeHTMLElement {
     semCor(alvo?: AlvoCor): void;
     /** Volta às cores de `padrao-preenchimento` e `padrao-traco`; emite `ui-cores-change` confirmado. */
     restaurarPadrao(): void;
-    /** Abre o seletor de cor ancorado na amostra do alvo (que passa a ser o ativo). */
-    abrirSeletor(alvo?: AlvoCor): void;
-    /** Fecha o seletor aberto por este controle (confirmando, por padrão). */
+    /** Abre o seletor de cor ancorado na amostra do alvo (que passa a ser o ativo). Com `focar`, leva o foco do teclado para o painel. */
+    abrirSeletor(alvo?: AlvoCor, focar?: boolean): void;
+    /**
+     * Fecha o seletor aberto por este controle. Com `confirmar` (padrão), grava o que foi editado;
+     * sem ele, cancela: as cores iniciais voltam (com um `ui-cores-change` não confirmado) e nada é confirmado.
+     */
     fecharSeletor(confirmar?: boolean): void;
     private mudarAlvo;
+    /** Mantém a aba do seletor aberto igual ao alvo do controle. */
+    private sincronizarSeletor;
     private aplicarDoSeletor;
     private emitirCores;
     private dica;

package/dist/components/ui-cores/ui-seletor-cor.d.ts

@@ -1,7 +1,7 @@
 import { SafeHTMLElement } from '../../core/ssr-safe';
 import { AlvoCor, DetalheSeletorCor, OpcoesSeletorCor, SeletorCorAberto, ValorCor } from './tipos';
 /** Configuração aceita por `UISeletorCor.configurar()` (as opções de `abrirSeletorCor` sem âncora e callbacks). */
-export type ConfiguracaoSeletorCor = Omit<OpcoesSeletorCor, 'ancora' | 'aoAlterar' | 'aoConfirmar' | 'aoCancelar' | 'aoTrocarAlvo'>;
+export type ConfiguracaoSeletorCor = Omit<OpcoesSeletorCor, 'ancora' | 'focar' | 'aoAlterar' | 'aoConfirmar' | 'aoCancelar' | 'aoTrocarAlvo'>;
 /**
  * <ui-seletor-cor> — painel de cor no estilo Illustrator: abas Preenchimento/Traço, prévia
  * antes × depois, hexadecimal, seletor do sistema, opacidade do preenchimento, cores do projeto,
@@ -51,6 +51,8 @@ export declare class UISeletorCor extends SafeHTMLElement {
     private get opacidadeVisivel();
     private renderizar;
     private atualizarVisual;
+    /** `activeElement` lança em alguns DOMs simulados quando o foco está em outra árvore de sombra. */
+    private campoEmFoco;
     private vincularEventos;
     private emitir;
 }

package/dist/cores.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const r=require("./ui-controle-cores-Er6ZcQ7U.cjs");exports.PALETA_CORES_PADRAO=r.PALETA_CORES_PADRAO;exports.UIControleCores=r.UIControleCores;exports.UISeletorCor=r.UISeletorCor;exports.abrirSeletorCor=r.abrirSeletorCor;exports.coresUnicas=r.coresUnicas;exports.escaparHtml=r.escaparHtml;exports.fecharSeletorCor=r.fecharSeletorCor;exports.normalizarCor=r.normalizarCor;exports.normalizarOpacidade=r.normalizarOpacidade;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const r=require("./ui-controle-cores-uY__TgwW.cjs");exports.PALETA_CORES_PADRAO=r.PALETA_CORES_PADRAO;exports.UIControleCores=r.UIControleCores;exports.UISeletorCor=r.UISeletorCor;exports.abrirSeletorCor=r.abrirSeletorCor;exports.coresUnicas=r.coresUnicas;exports.escaparHtml=r.escaparHtml;exports.fecharSeletorCor=r.fecharSeletorCor;exports.normalizarCor=r.normalizarCor;exports.normalizarOpacidade=r.normalizarOpacidade;

package/dist/cores.js

@@ -1,5 +1,5 @@
 /* empty css               */
-import { P as e, U as s, a as l, b as t, c as C, e as c, f as i, n as m, d as n } from "./ui-controle-cores-BS0WYPdi.js";
+import { P as e, U as s, a as l, b as t, c as C, e as c, f as i, n as m, d as n } from "./ui-controle-cores-DgEza3wF.js";
 export {
   e as PALETA_CORES_PADRAO,
   s as UIControleCores,