@thibezer/ui-components-kit 2.15.0 → 2.17.1

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## 2.17.1 — 2026-11-12
+
+### `<ui-camadas>` & `<ui-seletor-cor>`: correções de seleção, bloqueio, teclado, DnD touch e usabilidade do seletor de cores
+
+- **`<ui-camadas>`:**
+  - **Seleção em intervalo (`Shift+Clique`):** `selecionarFeicao` agora respeita o limite expandido por *"Mostrar mais (+80)"* (`expandedFeatureLimits`), permitindo selecionar em intervalo feições além das 80 iniciais.
+  - **Proteção de bloqueio (`locked`):** movimentação e exclusão em lote pelo rodapé, bem como transferência de feições por Drag & Drop, agora ignoram feições individualmente bloqueadas ou pertencentes a camadas/grupos bloqueados; bloquear/desbloquear camada atualiza imediatamente o `<select>` de destino no rodapé.
+  - **Sincronização cirúrgica de DOM:** alterar a cor de uma camada atualiza *in-place* a barra lateral e a miniatura SVG das feições filhas que herdam a cor da camada; o círculo de seleção da camada (`.ui-target-circle`) respeita o filtro de busca ativo; `Escape` limpa o timer e restaura imediatamente os rótulos dos botões de exclusão em confirmação.
+  - **Navegação WAI-ARIA e Touch DnD:** `ArrowRight` em camada expandida move o foco para a primeira linha filha visível e `ArrowLeft` em feição/subcamada recolhida move o foco para a camada-mãe; arraste por toque (`touch`) suporta aninhamento hierárquico (`drop-into`) e emite `ui-camada-mover-hierarquia`; `.ui-col-actions` fica visível em `:focus-within` e com gaveta ativa.
+  - **Tokens e limpeza de estado:** substituição de variáveis CSS inexistentes em `.ui-truncate-notice` / `.ui-truncate-more-btn` pelos tokens oficiais `--ui-cor-fundo-elevado` e `--ui-cor-hover-menu`; limpeza automática de estados órfãos (`activeSettingsLayerId`, `editingLayerId`, `editingFeatureId`, `expandedFeatureLimits`) ao remover ou redefinir camadas/feições.
+- **`<ui-seletor-cor>`:**
+  - Substituição do ícone de círculo vazio com contorno duplo no botão do seletor do sistema (`.nativo`) por um ícone de conta-gotas (`pipeta`) claro e sem anéis fantasmas extras.
+  - Clique direto na metade `"NOVA"` da prévia (`.previa-metade--nova`) também abre o seletor de cor do sistema.
+  - No modo simples com `mostrarOpacidade: false`, a prévia antes/depois exibe a cor sólida real em vez de aplicar opacidade padrão de `35%`.
+
+## 2.17.0 — 2026-11-10
+
+### Customização: suporte completo a degradê interno (`degrade`) e `::part()` estruturais
+
+- **Design Tokens ($L_0$):**
+  - Novos tokens temáticos `--ui-gradiente-*` (`superficie`, `card`, `elevado`, `primario`, `secundario`, `destaque`, `destrutivo`, `sucesso`, `erro`, `alerta`, `info`, `texto`) declarados de forma consistente nos temas escuro, claro forçado (`[data-tema="claro"]`) e claro automático (`prefers-color-scheme: light`) em `src/tokens/colors.css`.
+  - Novo módulo `src/tokens/gradients.css` (importado por `src/tokens/index.css`) com utilitários `.degrade`, `.ui-degrade`, `.gradiente`, `.ui-gradiente` e `[data-degrade]` mapeando `--ui-fundo-*` para gradientes do tema ativo.
+- **Fundação Core ($L_1$):**
+  - Novo módulo puro e SSR-safe `src/core/degrade.ts` (re-exportado em `src/core/index.ts` e `src/index.ts`) com resolução de presets semânticos, validação anti-XSS/CSS-injection (`gradienteSeguro`, `resolverDegrade`) e sincronização declarativa (`aplicarDegradeNoElemento`) aceitando atributos `degrade`, `gradiente`, `gradient` e classes `.degrade` / `.gradiente`.
+- **Estilização e APIs de Componentes ($L_3 / L_4$):**
+  - Substituição das declarações bloqueantes `background-color: var(--ui-*)` por `background: var(--ui-degrade-interno, var(--ui-*-fundo, var(--ui-fundo-*, var(--ui-cor-*))))` nos CSS dos componentes, preservando variantes `outline`/`ghost`/`transparent`, shimmer de `<ui-skeleton>`, rótulos flutuantes (`<ui-campo-texto>`, `<ui-area-texto>`), chevrons SVG de `<select>` (`<ui-camadas>`, `<ui-tabela-propriedades>`) e recorte de texto por gradiente (`background-clip: text` opt-in no `<ui-texto>`).
+  - Exposição de `::part(base)` e subparts estruturais com documentação `@csspart` em `<ui-stat>`, `<ui-avatar>`, `<ui-skeleton>`, `<ui-ribbon>`, `<ui-paleta-ferramentas>`, `<ui-seletor-mapa-base>`, `<ui-canvas-cad>` e `<ui-mapa>`.
+- **Testes e Contratos:**
+  - Suíte unitária e adversarial em `src/core/degrade.test.ts` e cobertura de tokens, parts estruturais, classes, presets e bloqueio de CSS hostil em `tests/customizacao.test.ts`.
+
+## 2.16.1 — 2026-11-10
+
+### `<ui-tabela-propriedades>`: memória e persistência automática das abas/categorias abertas
+
+- **Memória em execução + persistência no `localStorage`:**
+  - Novo módulo puro e SSR-safe `propriedades-persistencia.ts` (`LembrancaCategoriasPropriedades` e helpers de normalização, chave de storage e proteção contra `Object.freeze`, `JSON` corrompido e poluição de protótipo).
+  - Preserva automaticamente quais categorias/abas estavam abertas ou fechadas ao reatribuir `categorias` em memória (mesmo com `persistir="false"` ou antes de conectar ao DOM) e entre sessões no `localStorage` usando o prefixo `ui_tabela_propriedades_estado_`.
+  - Suporte aos atributos/propriedades `persistir` (padrão `true`; defina `persistir="false"` para manter apenas em memória) e `storage-key` (com fallback para `id` do elemento ou `'default'`, emitindo `console.warn` caso múltiplos painéis persistentes sem identificador compartilhem a mesma chave padrão), alinhado ao contrato de `<ui-camadas>`.
+  - A busca/filtragem continua expandindo temporariamente categorias filtradas na visualização sem sobrescrever nem corromper as preferências salvas.
+- **API programática e evento unificado (`ui-categorias-estado`):**
+  - Novos métodos públicos `obterEstadoCategorias()`, `definirEstadoCategorias(estado, opcoes?)`, `limparEstadoCategorias()`, `limparLembranca()` e `obterChaveStorageAtual()`, além de `expandirTudo()`, `colapsarTudo()` e `toggleCategoria(id)` sincronizados com a lembrança e tolerantes a objetos `Object.freeze`.
+  - Emissão do evento `CustomEvent<UICategoriasEstadoDetail>('ui-categorias-estado')` (`{ estado, abertas, fechadas }`) nas alternâncias de abas e ações em lote, com sincronização cirúrgica do DOM (`sincronizarDomCategorias`) para preservar foco de campos em edição.
+- **Testes:**
+  - Novos testes unitários em `propriedades-persistencia.test.ts` e ampliação das suítes `ui-tabela-propriedades.test.ts` e `ui-tabela-propriedades.regressao.test.ts` (103 testes no módulo).
+
+## 2.16.0 — 2026-11-08
+
+### Customização: classe e formato `squarecircles` (Squircle / Cantos Suaves)
+
+- **Tokens Globais ($L_0$):** Adicionado token `--ui-raio-squircle: 24%` em `src/tokens/spacing.css` e suporte às classes utilitárias/contextuais `.squarecircles`, `.squarecircle`, `.ui-squarecircles` e `.ui-squarecircle` que elevam os raios base e derivam uma escala contínua com curvatura orgânica.
+- **Componentes ($L_3$):** Suporte nativo ao formato e classe nos componentes:
+  - `<ui-avatar>`: atributo `formato="squarecircle" | "squircle"` e classe `.squarecircle` aplicando o squircle (~24%).
+  - `<ui-botao>`: suporte a `:host(.squarecircle)` e `:host([formato="squarecircle"])` (raio refinado para botões e squircle simétrico para variantes `icone` / `icon-only`).
+  - `<ui-badge>`: suporte a formato squircle além da tradicional pílula.
+  - `<ui-card>`, `<ui-checkbox>`, `<ui-campo-texto>`, `<ui-area-texto>`, `<ui-modal>` e `<ui-alerta>`: cantos suaves estilizados.
+- **Testes e Contratos:** Nova suíte em `tests/customizacao.test.ts` e testes de regressão em `src/components/ui-avatar/ui-avatar.regressao.test.ts`.
+
 ## 2.15.0 — 2026-11-05
 
 ### `<ui-tabela>`: células interativas (botão, checkbox, campo editável) sem perder foco nem texto

package/README.md

@@ -753,7 +753,7 @@ window.addEventListener('message', (event) => {
 | `<ui-skeleton>` | Placeholder de carregamento animado com pulsos. | `tipo`, `largura`, `altura`, `animado` | - |
 | `<ui-stat>` | Cartão KPI de estatísticas, métricas e tendências. | `rotulo`, `valor`, `variacao`, `tendencia` (`alta`, `baixa`, `neutro`) | - |
 | `<ui-tabela>` | Tabela orientada a dados, virtualizada tipo Excel. **Teclado**: cabeçalhos ordenáveis são botões (Tab + Enter/Espaço, com `aria-sort`); nas linhas, ↑/↓, Home/End e PageUp/PageDown movem o foco e Enter/Espaço selecionam (`aria-current`). A seleção é mantida ao ordenar e filtrar. Nome acessível via `aria-label`. | `colunas`, `dados`, `src`, `densidade`, `aria-label` | `ui-sort`, `ui-column-resize`, `ui-linha-clique` (demais eventos: ver seção 4) |
-| `<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. Seleção múltipla: propriedade com valores diferentes entre os objetos (`VALOR_MISTO`, `misto: true` ou `combinarValores()`) mostra "Varia" (texto via `texto-misto`); as iguais mostram o valor comum. Números com `min`/`max`/`passo` e unidade digitável ("25 mm"), prévia do cálculo, ↺ para restaurar o valor original, busca sem acentos, Shift+Enter / Ctrl+Enter e splitter pelo teclado. | `categorias`, `tipos`, `tipoSelecionado`, `valores`, `estilo-visual`, `modo-aplicar`, `filtro`, `largura-rotulo`, `densidade`, `flutuante`, `colapsado`, `fechavel`, `texto-misto`; métodos `aplicar()`, `desfazer()`, `redefinirValor(id)`, `definirValor()` | `ui-propriedade-alterada`, `ui-aplicar` (`valores`, `alterados`), `ui-desfazer`, `ui-tipo-alterado`, `ui-editar-tipo-clique`, `ui-acao-clique`, `ui-quick-select`, `ui-selecionar-objetos`, `ui-calculadora`, `ui-categoria-toggle`, `ui-splitter-resize` |
+| `<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, editores CAD e **memória/persistência automática das abas abertas** (preservada entre recargas de `categorias` e salva no `localStorage` por padrão via `persistir`/`storage-key`). Seleção múltipla: propriedade com valores diferentes entre os objetos (`VALOR_MISTO`, `misto: true` ou `combinarValores()`) mostra "Varia" (texto via `texto-misto`); as iguais mostram o valor comum. Números com `min`/`max`/`passo` e unidade digitável ("25 mm"), prévia do cálculo, ↺ para restaurar o valor original, busca sem acentos, Shift+Enter / Ctrl+Enter e splitter pelo teclado. | `categorias`, `tipos`, `tipoSelecionado`, `valores`, `estilo-visual`, `modo-aplicar`, `filtro`, `largura-rotulo`, `densidade`, `flutuante`, `colapsado`, `fechavel`, `texto-misto`, `persistir`, `storage-key`; métodos `aplicar()`, `desfazer()`, `redefinirValor(id)`, `definirValor()`, `expandirTudo()`, `colapsarTudo()`, `toggleCategoria()`, `obterEstadoCategorias()`, `definirEstadoCategorias()`, `limparEstadoCategorias()`, `limparLembranca()`, `obterChaveStorageAtual()` | `ui-propriedade-alterada`, `ui-aplicar` (`valores`, `alterados`), `ui-desfazer`, `ui-tipo-alterado`, `ui-editar-tipo-clique`, `ui-acao-clique`, `ui-quick-select`, `ui-selecionar-objetos`, `ui-calculadora`, `ui-categoria-toggle`, `ui-categorias-estado`, `ui-splitter-resize` |
 | `<ui-ribbon>` | Barra de ferramentas em abas e grupos (estilo AutoCAD / Word / Excel): botões grandes e pequenos em colunas de 3, split buttons (`item.dividido`), toggles, exclusividade configurável (`grupo.exclusivo`), menus suspensos com submenus aninhados, lançador de diálogo (`grupo.lancadorDialogo`), colapso automático responsivo de grupos (`ResizeObserver` + `grupo.prioridade`), abas contextuais, ativação manual de abas (`ativacao-manual`), atalhos de teclado e KeyTips (`keytips`), modo controlado sem mutação (`copiar-dados`), tooltips estilizados 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). Use `id` únicos e `rotulo`/`rotuloAcessivel` em botões só de ícone. | `abas`, `aba-ativa`, `recolhido`, `compacto`, `ativacao-manual`, `copiar-dados`, `atalhos`, `keytips`, `aria-label`, `rotulo-abas` | `ui-ferramenta`, `ui-aba-change`, `ui-recolhido-change`, `ui-grupo-dialogo` |
 | `<ui-paleta-ferramentas>` | Paleta de ferramentas gráficas (estilo Illustrator / Photoshop): seleção exclusiva, grupos com flyout expansível e submenus aninhados, navegação em grade bidimensional para `colunas="2"`, suporte a atalhos compostos (`Ctrl+Z`, `Shift+V`, `Esc`) com isolamento multi-paleta, modo controlado sem mutação (`copiar-dados`), orientações vertical/horizontal e tooltips leves integrados no Shadow DOM. `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). | `ferramentas`, `valor`, `orientacao`, `colunas`, `tamanho`, `atalhos`, `copiar-dados`, `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`. 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` |

package/dist/botao.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const o=require("./ui-botao-D24oXySA.cjs");exports.UIBotao=o.UIBotao;exports.UIBotaoPrimario=o.UIBotaoPrimario;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                 */const o=require("./ui-botao-Dz8YvmiA.cjs");exports.UIBotao=o.UIBotao;exports.UIBotaoPrimario=o.UIBotaoPrimario;

package/dist/botao.js

@@ -1,5 +1,5 @@
 /* empty css               */
-import { U as t, a as i } from "./ui-botao-Dsj08jjw.js";
+import { U as t, a as i } from "./ui-botao-zLkcMMyP.js";
 export {
   t as UIBotao,
   i as UIBotaoPrimario