@thibezer/ui-components-kit 2.14.0 → 2.17.0

package/CHANGELOG.md

@@ -1,16 +1,70 @@
 # Changelog
 
+## 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
+
+- **Rolagem virtual preserva as linhas visíveis:** novo modo `renderBody('rolagem')` (usado pelo scroll e pela rolagem programática). Linhas com o mesmo item, a mesma posição e as mesmas colunas ficam intactas; só as que entram na janela são criadas. O campo em edição mantém o nó, o foco e o texto digitado, e o `render` roda só para as linhas novas.
+- **Foco devolvido após renderização completa** (trocar `dados`, filtrar, ordenar): o foco volta ao mesmo controle da mesma linha (achada pelo objeto, pelo `data-id` ou pela posição), com texto digitado, checkbox marcado e seleção de texto de `input`/`textarea`/`select` nativos, se o dado não mudou nesse meio-tempo (senão o dado novo prevalece). A tabela nunca grava nos dados. Novo micro-módulo `tabela-foco.ts`.
+- **Cliques em controles não selecionam a linha:** além de `button`, `input`, `select`, `textarea`, `a` e `summary`, agora também `label`, `contenteditable` e elementos com `role` de controle (`checkbox`, `switch`, `radio`, `textbox`, `combobox`, `slider`, `spinbutton`, `menuitem`, `tab`, `link`), como `<ui-checkbox>` e `<ui-switch>`.
+- **`render(valor, item, indice, indiceDados)`:** novo 4º argumento com a posição do item em `dados` (estável ao ordenar e filtrar). `indice` continua sendo a posição exibida.
+- **Leitor de tela:** a região de anúncio do filtro só é escrita quando o texto muda (antes era reescrita a cada quadro de rolagem com filtro ativo).
+- **Atributos:** mudar `aria-label`, `texto-erro` ou `texto-carregando` não recria mais as linhas.
+- Testes de regressão em `ui-tabela-robustez.test.ts`; README com o contrato de células interativas.
+
 ## 2.14.0 — 2026-11-05
 
-### `<ui-canvas-cad>` & `gerencigeo-canvas`: auditoria, seleção avançada, navegação e HUD de coordenadas
-
-- **Seleção aditiva e subtrativa:** Suporte a `Shift` (adicionar à seleção) e `Ctrl`/`Cmd` (remover/subtrair da seleção) tanto no clique em feições quanto na caixa de seleção por arraste (caixa vermelha estilizada para operação subtrativa).
-- **Escape na Edição de Vértices:** Pressionar `Escape` com nó selecionado desmarca o nó; pressionar `Escape` sem nó selecionado cancela a edição e reverte a feição para a geometria original (`cancelar()`).
-- **Navegação com Barra de Espaço (`Hand Tool`):** Segurar a barra de espaço permite pan fluido com botão esquerdo do mouse (ideal para notebooks e trackpads), respeitando campos digitáveis.
-- **HUD de Coordenadas em Tempo Real:** Rodapé do canvas exibindo coordenadas UTM (Fuso, Hemisfério, Este e Norte formatados no padrão brasileiro) e coordenadas geográficas (Lat/Lon decimais), com suporte ao atributo `sem-hud-coordenadas`.
-- **Desempenho & GC:** Otimização de Garbage Collection em `feature_snap.ts` eliminando alocações de arrays e tuplas intermediárias durante o hot-path do cursor; cancelamento de timers concorrentes no hover de feições.
-- Testes abrangentes em `tests/canvas-melhorias-auditoria.test.ts`.
-
+### `<ui-canvas-cad>` & `gerencigeo-canvas`: auditoria, seleção avançada, navegação e HUD de coordenadas
+
+- **Seleção aditiva e subtrativa:** Suporte a `Shift` (adicionar à seleção) e `Ctrl`/`Cmd` (remover/subtrair da seleção) tanto no clique em feições quanto na caixa de seleção por arraste (caixa vermelha estilizada para operação subtrativa).
+- **Escape na Edição de Vértices:** Pressionar `Escape` com nó selecionado desmarca o nó; pressionar `Escape` sem nó selecionado cancela a edição e reverte a feição para a geometria original (`cancelar()`).
+- **Navegação com Barra de Espaço (`Hand Tool`):** Segurar a barra de espaço permite pan fluido com botão esquerdo do mouse (ideal para notebooks e trackpads), respeitando campos digitáveis.
+- **HUD de Coordenadas em Tempo Real:** Rodapé do canvas exibindo coordenadas UTM (Fuso, Hemisfério, Este e Norte formatados no padrão brasileiro) e coordenadas geográficas (Lat/Lon decimais), com suporte ao atributo `sem-hud-coordenadas`.
+- **Desempenho & GC:** Otimização de Garbage Collection em `feature_snap.ts` eliminando alocações de arrays e tuplas intermediárias durante o hot-path do cursor; cancelamento de timers concorrentes no hover de feições.
+- Testes abrangentes em `tests/canvas-melhorias-auditoria.test.ts`.
+
 ## 2.13.0 — 2026-11-05
 
 ### `<ui-canvas-cad>`: atributo `qualidade` (`alta` | `media` | `baixa`)

package/README.md

@@ -505,7 +505,9 @@ const ok = await tabela.carregarDoEndpoint('/api/v1/vertices'); // true em suces
 | `ui-fetch-erro` | `{ url, erro, origem, status? }` | Falha. `origem`: `rede`, `http` (com `status`), `json` ou `render` |
 | `ui-fetch-cancelado` | `{ url }` | Requisição abortada ou substituída (fecha o par do `ui-fetch-start`) |
 
-Boas práticas: trate `dados` como imutável (atribua sempre um array novo), mantenha `chave-id` única e não nula, memorize `colunas` (atribuí-las de novo refaz a tabela) e coloque controles interativos das células com `data-prevent-select` se não quiser que o clique selecione a linha. `render` devolvendo `string` vira texto (não HTML); devolva um `HTMLElement` novo por chamada.
+Boas práticas: trate `dados` como imutável (atribua sempre um array novo), mantenha `chave-id` única e não nula, memorize `colunas` (atribuí-las de novo refaz a tabela) e coloque controles interativos das células com `data-prevent-select` se não quiser que o clique selecione a linha (`button`, `input`, `select`, `textarea`, `a`, `label`, `contenteditable` e elementos com `role` de controle, como o `<ui-checkbox>` e o `<ui-switch>`, já são ignorados). `render` devolvendo `string` vira texto (não HTML); devolva um `HTMLElement` novo por chamada.
+
+**Células interativas (`render`)**: `render(valor, item, indice, indiceDados)` pode devolver botão, checkbox ou campo editável. `indice` é a posição **exibida** (muda ao ordenar e filtrar); para editar ou remover use `item` ou `indiceDados`, a posição do item em `dados`. Com virtualização, a rolagem mantém as linhas que continuam visíveis (o campo em edição conserva foco e texto) e só renderiza as que entram. Trocar `dados`, filtrar ou ordenar recria as linhas e roda o `render` de novo: o foco volta ao mesmo controle da mesma linha, com o texto digitado (ou o checkbox marcado) e a seleção de texto, desde que o dado do item não tenha mudado nesse meio-tempo (senão o dado novo prevalece). A tabela nunca grava nos dados: grave o valor em `item` no seu handler (`input`/`change`). Vale para `input`, `textarea` e `select` nativos; componentes próprios (`<ui-campo-texto>` etc.) mantêm o foco, mas não o texto não gravado. `dados` guarda uma cópia do array (entradas nulas são descartadas): para refletir um `push`, atribua um array novo.
 
 ---
 
@@ -751,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