@thibezer/ui-components-kit 2.6.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 2.7.0 — 2026-10-17
+
+### `UIBus`: independente do componente de toast
+
+- `src/core/ui-bus.ts` (L1) deixou de importar `ui-alerta` (L3). Novo `UIBus.registrarProvedorToast(fn | null)`; o `ui-toast` se registra sozinho ao ser carregado (`registrarToastNoBus()`).
+- **Mudança de comportamento:** quem importar apenas `core/ui-bus` sem carregar `ui-alerta` (ou o pacote principal) passa a ter `UIBus.notificar()` como no-op, sem erro. Exceções do provedor são capturadas (`console.error`).
+- Contratos `UIToastOpcoes`/`UIToastAcao` movidos para `src/core/tipos-toast.ts` e reexportados por `ui-alerta` (nomes públicos inalterados).
+
+### `<ui-ribbon>`, `<ui-paleta-ferramentas>` e `<ui-tabela>`: organização interna
+
+- **Sem mudança de comportamento nem de API.** Teclado, renderização, clique longo, atalhos, rolagem de linhas e estados (erro, anúncio do filtro, aria) passam a viver em módulos próprios com testes unitários.
+
+### Componentes simples e de formulário: robustez e acessibilidade
+
+- **`<ui-skeleton>`:** `linhas` é limitado a 100 (um valor enorme derrubava a página). Decorativo por padrão (`aria-hidden`); com `aria-label` vira `role="status"`.
+- **Classes por atributo:** `variante`, `cor`, `peso`, `alinhamento` (`ui-texto`), `elevacao` (`ui-stat`, `ui-card`), `variante`/`estilo` (`ui-badge`) só aceitam valores conhecidos; qualquer outro usa o padrão (antes, o texto virava classes CSS arbitrárias).
+- **`<ui-avatar>`:** host com `role="img"` e `aria-label` (nome, e o status quando houver) ou `aria-hidden` sem nome; **a imagem interna agora tem `alt=""`** (antes `alt` = nome ou "Avatar"). `aria-label`/`aria-hidden` do consumidor são respeitados. Tamanho numérico aceito entre 8 e 512 px.
+- **`<ui-stat>`:** grupo rotulado e indicador de variação como imagem nomeada. **`<ui-card clicavel>`:** `role="button"`, `aria-disabled`. **`<ui-badge>`:** `disabled` desativa o ✕; nome acessível "Remover …".
+- **`<ui-radio>`:** o grupo agora acompanha `setAttribute('name')` depois de conectado, mudança de nome e remoção do formulário; o primeiro radio habilitado entra na ordem de Tab.
+- **`<ui-checkbox>`, `<ui-switch>`, `<ui-radio>`:** `focus()` no host foca o controle; checkbox e radio passam a respeitar `<label for>`, `<label>` envolvente e `aria-label` (como o switch).
+
+### `<ui-tooltip>` e `<ui-modal>`: correções de comportamento
+
+- **`<ui-tooltip>`:** o clique no gatilho deixa de ser interrompido (`stopPropagation`) e volta a chegar aos ouvintes de ancestrais; `disabled` fecha o balão aberto (e `aberto` + `disabled` não o mostra); ambientes sem `matchMedia` não lançam; o quadro de animação do posicionamento é cancelado ao fechar/desconectar.
+- **`<ui-modal>`:** `Shift+Tab` no botão de fechar agora leva ao último controle do conteúdo (antes o foco escapava do modal); `Tab` no último controle volta ao primeiro. O foco real é lido atravessando Shadow DOMs.
+- Ouvintes globais de ambos passam a ser gerenciados por `ListenerBag`. Sem mudança de API.
+
+### `<ui-camadas>`: arrastos interrompidos e organização interna
+
+- Desconectar o painel durante a pintura de controles (olho, cadeado, seleção) deixava `user-select: none` no `body` da página e ouvintes em `window`; o gesto agora é cancelado. O mesmo vale para o arraste por toque de camadas.
+- Dados com ciclo de `parentId` não travam mais a verificação de descendência ao aninhar camadas por arraste.
+- **Sem mudança de API.** Código dividido em módulos de responsabilidade única (renderização, seleção, lembrança, coleções, regras de soltar, renomear, miniaturas e hierarquia).
+
+### `<ui-mapa>`, `<ui-mapa-marcador>` e `<ui-mapa-linha>`: robustez e acessibilidade
+
+- **Segurança:** `cor` do `<ui-mapa-marcador>` era interpolada em HTML/estilo do ícone (injeção de atributo). O ícone agora é montado com DOM e `cor` só aceita hex, `rgb()`/`hsl()` ou nome de cor; outro valor usa a cor padrão (`#00f5a0`; `#3388ff` na linha).
+- `lat`, `lng` e `zoom` inválidos (ou fora de -90..90, -180..180, 0..22) caem no padrão em vez de lançar; `espessura` inválida usa 3.
+- Desconectar o `<ui-mapa>` antes de o Leaflet carregar não cria mais um mapa órfão. `<ui-mapa-linha>` reaparece quando o mapa é recriado e ignora pares inválidos em `pontos`.
+- **Acessibilidade:** o mapa é uma região com nome (`aria-label` do host, padrão "Mapa"; o atributo passa a ser observado); marcadores são focáveis por teclado (`role=button`) e usam `titulo` como nome acessível.
+
+### `<ui-canvas-cad>`: organização interna e acessibilidade
+
+- **Sem mudança de API.** `GerenciadorFeicoes` virou fachada sobre módulos de responsabilidade única (`cad-feicoes-dados`, `-operacoes`, `-versoes`, `-camera`, `-desenho`, `-edicao`, `-consulta`, `-ponteiro`, `-selecao-regiao`, `-tipos`); tipos do Leaflet em `tipos.ts`, `cad-leaflet-adaptador.ts` e `cad-selecao-pontos.ts` substituem casts `as any`.
+- **Acessibilidade:** o canvas é uma região nomeada ("Mapa CAD"), a barra rápida é uma `toolbar` com botões nomeados, o botão de snap expõe `aria-pressed` e uma região viva anuncia a seleção ("2 feições selecionadas") e a ferramenta ativa.
+
+### Ferramentas de arquitetura
+
+- `scripts/check-layers.mjs` verifica o DAG L0→L5 resolvendo imports (estáticos, de efeito colateral, re-exports e dinâmicos); `npm run gate` / `gate:full` agrupam as verificações.
+
+## 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/acessibilidade-CSzX-DkG.cjs

@@ -0,0 +1 @@
+"use strict";let d=0;function m(t="ui"){return d+=1,`${t}-${d.toString(36)}-${Math.random().toString(36).slice(2,7)}`}function f(t,e){if(t===e)return"";if(t.nodeType===3)return t.textContent??"";let i="";return t.childNodes.forEach(r=>{i+=f(r,e)}),i}function b(t,e){var l,n,u;const i=(l=t.getAttribute("aria-label"))==null?void 0:l.trim();if(i)return i;const r=new Set;try{(n=e==null?void 0:e.labels)==null||n.forEach(o=>r.add(o))}catch{}if(t.id){const o=t.getRootNode();(u=o.querySelectorAll)==null||u.call(o,"label[for]").forEach(a=>{a.htmlFor===t.id&&r.add(a)})}const c=t.closest("label");return c&&r.add(c),Array.from(r).map(o=>f(o,t).replace(/\s+/g," ").trim()).filter(Boolean).join(" ")}function E(t,e){return e.composedPath()[0]===t}exports.cliqueVeioDeRotuloExterno=E;exports.gerarIdUnico=m;exports.obterRotuloExterno=b;

package/dist/acessibilidade-CUlSXc2X.js

@@ -0,0 +1,38 @@
+let d = 0;
+function m(t = "ui") {
+  return d += 1, `${t}-${d.toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+}
+function f(t, e) {
+  if (t === e) return "";
+  if (t.nodeType === 3) return t.textContent ?? "";
+  let a = "";
+  return t.childNodes.forEach((r) => {
+    a += f(r, e);
+  }), a;
+}
+function b(t, e) {
+  var i, l, n;
+  const a = (i = t.getAttribute("aria-label")) == null ? void 0 : i.trim();
+  if (a) return a;
+  const r = /* @__PURE__ */ new Set();
+  try {
+    (l = e == null ? void 0 : e.labels) == null || l.forEach((o) => r.add(o));
+  } catch {
+  }
+  if (t.id) {
+    const o = t.getRootNode();
+    (n = o.querySelectorAll) == null || n.call(o, "label[for]").forEach((u) => {
+      u.htmlFor === t.id && r.add(u);
+    });
+  }
+  const c = t.closest("label");
+  return c && r.add(c), Array.from(r).map((o) => f(o, t).replace(/\s+/g, " ").trim()).filter(Boolean).join(" ");
+}
+function s(t, e) {
+  return e.composedPath()[0] === t;
+}
+export {
+  s as c,
+  m as g,
+  b as o
+};