@thibezer/ui-components-kit 2.9.0 → 2.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +138 -0
- package/README.md +7 -4
- package/dist/camadas.cjs +53 -55
- package/dist/camadas.js +254 -242
- package/dist/campo-texto.cjs +1 -1
- package/dist/campo-texto.js +1 -1
- package/dist/canvas.cjs +73 -72
- package/dist/canvas.js +3212 -2690
- package/dist/card.cjs +1 -1
- package/dist/card.js +1 -1
- package/dist/components/ui-area-texto/area-texto-altura.d.ts +16 -0
- package/dist/components/ui-area-texto/area-texto-contador.d.ts +6 -0
- package/dist/components/ui-area-texto/area-texto-template.d.ts +2 -0
- package/dist/components/ui-area-texto/index.d.ts +3 -0
- package/dist/components/ui-area-texto/tipos.d.ts +19 -0
- package/dist/components/ui-area-texto/ui-area-texto.d.ts +100 -0
- package/dist/components/ui-campo-texto/campo-texto-estados.d.ts +5 -1
- package/dist/components/ui-campo-texto/ui-campo-texto.d.ts +1 -0
- package/dist/components/ui-canvas-cad/cad-acessibilidade.d.ts +7 -1
- package/dist/components/ui-canvas-cad/cad-feicoes-edicao.d.ts +13 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-ponteiro.d.ts +8 -2
- package/dist/components/ui-canvas-cad/cad-feicoes-teclado.d.ts +19 -0
- package/dist/components/ui-canvas-cad/cad-feicoes-tipos.d.ts +1 -1
- package/dist/components/ui-canvas-cad/cad-feicoes.d.ts +12 -1
- package/dist/components/ui-canvas-cad/cad-ferramentas-barra.d.ts +8 -1
- package/dist/components/ui-canvas-cad/cad-recusas.d.ts +6 -0
- package/dist/components/ui-canvas-cad/cad-snap.d.ts +2 -0
- package/dist/components/ui-canvas-cad/ui-canvas-cad.d.ts +7 -0
- package/dist/components/ui-card/card-interacao.d.ts +17 -0
- package/dist/components/ui-card/card-secoes.d.ts +10 -0
- package/dist/components/ui-card/ui-card.d.ts +23 -0
- package/dist/components/ui-cores/cores-utils.d.ts +2 -0
- package/dist/components/ui-cores/tipos.d.ts +9 -2
- package/dist/components/ui-cores/ui-controle-cores.d.ts +9 -4
- package/dist/components/ui-cores/ui-seletor-cor.d.ts +12 -9
- package/dist/components/ui-tabela-propriedades/editores-basicos.d.ts +1 -1
- package/dist/components/ui-tabela-propriedades/propriedades-dom-utils.d.ts +5 -0
- package/dist/components/ui-tabela-propriedades/propriedades-gerenciador-valores.d.ts +3 -3
- package/dist/components/ui-tabela-propriedades/propriedades-valor-misto.d.ts +25 -0
- package/dist/components/ui-tabela-propriedades/tipos.d.ts +5 -0
- package/dist/components/ui-tabela-propriedades/ui-tabela-propriedades.d.ts +7 -0
- package/dist/components/ui-texto/ui-texto.d.ts +16 -0
- package/dist/core/alvo-digitavel.d.ts +5 -0
- package/dist/core/opcoes.d.ts +7 -0
- package/dist/cores.cjs +1 -1
- package/dist/cores.js +11 -9
- package/dist/custom-elements.json +16677 -13587
- package/dist/data.cjs +1 -1
- package/dist/data.js +72 -64
- package/dist/forms.cjs +1 -1
- package/dist/forms.d.ts +4 -0
- package/dist/forms.js +15 -12
- package/dist/gerencigeo-canvas/canvas_interacao.d.ts +2 -0
- package/dist/gerencigeo-canvas/feature_desenho.d.ts +15 -1
- package/dist/gerencigeo-canvas/feature_desenho_controle.d.ts +6 -0
- package/dist/gerencigeo-canvas/feature_edicao_ops.d.ts +9 -0
- package/dist/gerencigeo-canvas/feature_editor_vertices.d.ts +64 -6
- package/dist/gerencigeo-canvas/mapa_core.d.ts +4 -0
- package/dist/gerencigeo-canvas/popup_residual.d.ts +5 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.js +204 -191
- package/dist/{motor-CFI84lM2.js → motor-BKT2eStP.js} +3 -3
- package/dist/motor.js +1 -1
- package/dist/opcoes-CupvWVIm.js +24 -0
- package/dist/opcoes-vdAUY5OI.cjs +1 -0
- package/dist/register.cjs +1 -1
- package/dist/register.js +10 -9
- package/dist/tabela.cjs +1 -1
- package/dist/tabela.js +66 -58
- package/dist/tipos-elementos.d.ts +78 -0
- package/dist/tipos-react.d.ts +4 -0
- package/dist/tipos-vue.d.ts +76 -0
- package/dist/{ui-badge-BWhoGgo9.js → ui-badge-B5J_c5P5.js} +1 -1
- package/dist/{ui-badge-SIR81R9l.cjs → ui-badge-DC4y6Dik.cjs} +1 -1
- package/dist/{ui-campo-texto-B_OHVGiN.js → ui-campo-texto-19tIrmBK.js} +91 -93
- package/dist/ui-campo-texto-CH8mzX61.cjs +16 -0
- package/dist/ui-card-0wu4rjEX.cjs +20 -0
- package/dist/ui-card-DRtpOo3l.js +143 -0
- package/dist/ui-controle-cores-CohlwXJK.cjs +32 -0
- package/dist/ui-controle-cores-DMtTUtLk.js +292 -0
- package/dist/{ui-linha-BYAX4W6x.cjs → ui-linha-C306zxWG.cjs} +6 -6
- package/dist/{ui-linha-aqLlaYi7.js → ui-linha-C_azWkcG.js} +103 -99
- package/dist/ui-seletor-cor-D9iI7yew.js +413 -0
- package/dist/ui-seletor-cor-Ft06TEUH.cjs +110 -0
- package/dist/{ui-switch-DO1R0Ce7.js → ui-switch-BL-x_-SM.js} +460 -173
- package/dist/ui-switch-C0i_3QXu.cjs +66 -0
- package/dist/ui-tabela-propriedades-B8AwlpqL.cjs +141 -0
- package/dist/{ui-tabela-propriedades-DoL4SE0r.js → ui-tabela-propriedades-DuaC4sFX.js} +1295 -1195
- package/package.json +1 -1
- package/dist/opcoes-CJYLi6kd.js +0 -12
- package/dist/opcoes-CkyDxBuQ.cjs +0 -1
- package/dist/ui-campo-texto-DauJCde3.cjs +0 -16
- package/dist/ui-card-BNYCQ7g-.js +0 -119
- package/dist/ui-card-BrjBL-yo.cjs +0 -20
- package/dist/ui-controle-cores-DgEza3wF.js +0 -612
- package/dist/ui-controle-cores-uY__TgwW.cjs +0 -117
- package/dist/ui-switch-D9a8XlVX.cjs +0 -53
- package/dist/ui-tabela-propriedades-CjK2gG14.cjs +0 -141
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,143 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.10.1 — 2026-10-23
|
|
4
|
+
|
|
5
|
+
Junta à 2.10.0 tudo o que ainda estava fora do npm: a revisão da edição de formas da 2.4.0 (PR #7), a espessura do traço no controle e no seletor de cor e o estado misto do `<ui-tabela-propriedades>` (PR #12). Sai como 2.10.1 a pedido, embora traga novidades.
|
|
6
|
+
|
|
7
|
+
### `<ui-controle-cores>` e `<ui-seletor-cor>`: espessura do traço
|
|
8
|
+
|
|
9
|
+
- **`<ui-controle-cores>`**: atributo `espessura-traco`, propriedade `espessuraTraco` (0,5 a 50 px, padrão 2,5) e `obterCores()`/`definirCores()` com a espessura. `ui-cores-change` ganha `espessuraTraco`, o alterado `'espessuraTraco'` e a origem `'espessura'`.
|
|
10
|
+
- **`<ui-seletor-cor>`**: controle de espessura do traçado (faixa e atalhos de 1 a 8 px) e prévia antes × depois com a espessura real. Novas opções `espessuraTraco` e `mostrarEspessura` (padrão: só com o alvo Traço). `ui-cor-input`/`ui-cor-confirmar` trazem `espessuraTraco`.
|
|
11
|
+
- Utilitário `normalizarEspessura()`: limita a [0,5; 50] px com uma casa decimal; valor inválido vira 2,5. Um atributo `espessura-traco` vazio volta ao padrão (antes da revisão, viraria o mínimo de 0,5 px).
|
|
12
|
+
- Página de exemplos: card 17, com controle e seletor ligados, prévia SVG e estado em JSON.
|
|
13
|
+
|
|
14
|
+
### `<ui-tabela-propriedades>`: estado misto ("Varia") para seleção múltipla
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
- Com várias formas selecionadas, a propriedade cujo valor difere entre elas exibe **"Varia"**; as iguais exibem o valor comum (como o *\*VARIES\** do AutoCAD).
|
|
19
|
+
|
|
20
|
+
- Novo valor sentinela `VALOR_MISTO` (`Symbol.for('ui-tabela-propriedades:misto')`) e atalho `misto: true` em `ItemPropriedade`. Funções puras `combinarValores(registros)`, `valorComum(valores)` e `isValorMisto(valor)`: `painel.valores = combinarValores(formas.map(f => f.propriedades))`.
|
|
21
|
+
|
|
22
|
+
- Novo atributo/propriedade `texto-misto` / `textoMisto` define a palavra exibida (padrão "Varia").
|
|
23
|
+
|
|
24
|
+
- Todos os editores suportam o estado: texto e número ficam vazios com "Varia" no placeholder; seleção, tipo/espessura de linha e cor CAD mostram uma opção "Varia" não selecionável; booleano fica indeterminado (`aria-checked="mixed"`, o primeiro clique marca todos); cor e somente leitura exibem "Varia". Linha recebe a classe `ui-prop__linha--misto`; cor ajustável por `--ui-prop-misto-cor`.
|
|
25
|
+
|
|
26
|
+
- Sair do campo sem digitar, apagar o texto, Esc, ↑/↓ e o arrasto do rótulo não alteram um valor misto. Ao editar, `ui-propriedade-alterada` sai com `valorAnterior: VALOR_MISTO`; **Desfazer** volta ao estado misto. Em `ui-aplicar`, as propriedades não editadas continuam com `VALOR_MISTO` — filtre com `isValorMisto()` antes de gravar.
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### `<ui-canvas-cad>`: volta a revisão dos modos de edição da 2.4.0
|
|
30
|
+
|
|
31
|
+
A 2.4.0 e a 2.4.1 foram publicadas no npm, mas a revisão da edição de formas que elas traziam não entrou na 2.5.0 nem nas versões seguintes. Esta versão a traz de volta, portada para os módulos extraídos depois (`cad-feicoes-edicao.ts`, `cad-feicoes-ponteiro.ts` e o novo `cad-feicoes-teclado.ts`) e combinada com a edição da 2.10.0 (alças latentes, ponto médio arrastável, dica do HUD).
|
|
32
|
+
|
|
33
|
+
**Novidades**
|
|
34
|
+
|
|
35
|
+
- **Desfazer/refazer/cancelar na edição**: Ctrl+Z, Ctrl+Shift+Z / Ctrl+Y e botões no HUD (100 gestos); **Cancelar** volta à geometria de quando a edição começou. Mudar a geometria por fora recomeça o histórico.
|
|
36
|
+
- **Nó selecionado**: clique na alça destaca o nó; Delete/Backspace ou "Excluir nó" o exclui. Recusas (mínimo de nós, ponto, círculo) avisam no HUD.
|
|
37
|
+
- **Mais formas de entrar na edição**: **Enter** com uma só feição editável selecionada e botão **Editar** na barra (`ferramentas="editar"` ou `"todas"`; reflete a edição em curso com `aria-pressed`). `cad-edicao-recusada` ganha o motivo `sem-selecao` (botão Editar sem uma feição selecionada), com aviso visível.
|
|
38
|
+
- **Novo evento `cad-feicao-duplo-clique`** (cancelável, `{ camadaId, feicao, coordenada }`). O duplo clique sobre a feição continua abrindo o popup, como na 2.8.1 (na 2.4.0 ele abria a edição). Com `preventDefault()` o consumidor assume o gesto, por exemplo chamando `editarVertices()`.
|
|
39
|
+
- **Retângulo**: arrastar um canto de um retângulo alinhado aos eixos mantém o retângulo (Shift solta).
|
|
40
|
+
- **Fantasmas** não aparecem em segmentos com menos de 24 px na tela e voltam ao aproximar o zoom.
|
|
41
|
+
- **Ferramentas de desenho avisam no HUD** quando recusam o clique (círculo abaixo de 2 m, cantos alinhados, centro repetido) ou quando Enter/duplo clique chega com pontos de menos.
|
|
42
|
+
- O HUD de edição passa a ter vários botões (Desfazer, Refazer, Excluir nó, Cancelar, Concluir): quem buscava o botão pelo seletor `#cm-vertex-edit-hud button` deve usar `[data-acao="concluir"]`.
|
|
43
|
+
|
|
44
|
+
**Correções**
|
|
45
|
+
|
|
46
|
+
- **Círculo**: o popup oferece o botão **Editar**; a alça da borda fica onde foi solta (antes voltava para o leste do centro).
|
|
47
|
+
- **Fantasma de inserção**: o duplo clique insere um vértice e não o converte mais em curva (`dblclick` até 600 ms depois da inserção é ignorado).
|
|
48
|
+
- **Camada ou feição fechada durante a edição**: ocultar, bloquear ou remover a camada, ou bloquear a feição, encerra a edição (`cad-edicao-concluida`) e tira alças e HUD.
|
|
49
|
+
- **Caneta**: o arraste da alça termina com o `mouseup` na janela; soltar o botão fora do mapa não deixa mais a alça seguindo o cursor.
|
|
50
|
+
- **Snap em curvas**: feição com `curva` atrai pelos nós (vértice) e pelo meio do trecho curvo; os vértices de apoio amostrados só valem como aresta.
|
|
51
|
+
- **Mudança externa no meio do arraste** (outro operador, API): a alça arrastada não é destruída; o gesto em curso vence ao soltar.
|
|
52
|
+
- **Tecla S** e **Enter** com vários canvases na página só valem no que está sob o mouse ou com foco. Com um único canvas nada muda.
|
|
53
|
+
|
|
54
|
+
## 2.10.0 — 2026-10-23
|
|
55
|
+
|
|
56
|
+
Junta à 2.9.0 o trabalho que tinha ficado fora do npm: o `<ui-area-texto>` e a lapidação dos textos (PR #10), a usabilidade do desenho e da edição de vértices, as curvas Bézier sempre à mão, o painel de camadas no estilo Adobe e a lapidação do `<ui-card>`.
|
|
57
|
+
|
|
58
|
+
### Novo: `<ui-area-texto>` (alias `<ui-textarea>`) para textos grandes
|
|
59
|
+
|
|
60
|
+
- Área de texto de várias linhas, form-associated (`name`, `value`, `required`, `minlength`/`maxlength`, `setCustomValidity`, `form.reset()`), com rótulo, ajuda/erro e os mesmos eventos do `<ui-campo-texto>` (`ui-input`, `ui-change`, `input`, `change`).
|
|
61
|
+
- `linhas` (1–50, padrão 4), `auto-altura` (cresce com o conteúdo, sem pular a rolagem da página) com `linhas-max` como teto, `redimensionar` (`nenhum`|`vertical`|`horizontal`|`ambos`) e `contador` (usa `maxlength` como limite).
|
|
62
|
+
- **Enter insere quebra de linha** e não submete o formulário. **Ctrl/Cmd + Enter** emite `ui-enviar` (`detail: { value }`).
|
|
63
|
+
- Acessibilidade: nome acessível pelo `label`, `aria-label` do host, `<label for>` ou `<label>` envolvente; `aria-required`; `aria-describedby` só com a ajuda visível; o contador avisa leitores de tela apenas quando muda de nível (perto do limite, atingido, excedido), não a cada tecla.
|
|
64
|
+
- API programática: `focus()`, `blur()`, `select()`, `setSelectionRange()`, `limpar()`, `readOnly`, `minLength`, `maxLength`.
|
|
65
|
+
- Parts: `rotulo`, `campo`, `input`, `rodape`, `ajuda`, `contador`. Exportado por `index`, `register` e `forms`.
|
|
66
|
+
|
|
67
|
+
### `<ui-texto>`: texto longo e lapidação
|
|
68
|
+
|
|
69
|
+
- **Novo `linhas`:** limita o texto a N linhas (1–50) com reticências; `truncar` continua tendo prioridade. Valores inválidos são ignorados.
|
|
70
|
+
- Palavras e URLs muito compridas passam a quebrar (`overflow-wrap`) em vez de estourar o contêiner; `alinhamento="justificado"` usa hifenização.
|
|
71
|
+
- O elemento interno expõe `part="base"`. Sem DOM (SSR) o componente fica inerte, sem casts `any`.
|
|
72
|
+
|
|
73
|
+
### `<ui-campo-texto>`: lapidação
|
|
74
|
+
|
|
75
|
+
- **`minlength`/`maxlength` inválidos** (`abc`, vazio, negativo) eram repassados ao `<input>` como `NaN`; agora são ignorados, e os getters `minLength`/`maxLength` devolvem `-1` em vez de `NaN`.
|
|
76
|
+
- Acessibilidade: `aria-required` no campo obrigatório; `aria-describedby` só referencia a ajuda enquanto ela está visível; a ajuda/erro é uma região `aria-live="polite"`, então mensagens de erro passam a ser anunciadas.
|
|
77
|
+
- Ouvintes via `ListenerBag` e temporizador de sincronização cancelado ao desconectar/reconectar (sem `any`).
|
|
78
|
+
|
|
79
|
+
### Núcleo
|
|
80
|
+
|
|
81
|
+
- `core/opcoes`: `escolherInteiro` e `inteiroOuNulo` convertem atributos numéricos hostis (`NaN`, `Infinity`, texto, fora da faixa) em inteiros seguros. `sincronizarFeedbackErro` aceita `<textarea>` e um prefixo de classe opcional (padrão inalterado).
|
|
82
|
+
|
|
83
|
+
### `<ui-canvas-cad>`: usabilidade do desenho e da edição de vértices
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
- **Esc voltava a falhar depois do primeiro popup.** O Leaflet mantém `map._popup` apontando para o último popup mesmo fechado, e o atalho de teclado do mapa engole o Esc enquanto essa referência existe: com o foco no mapa, o Esc deixava de encerrar a edição de vértices, cancelar a figura em desenho e limpar a seleção. O mapa agora solta a referência no `popupclose` (`src/gerencigeo-canvas/popup_residual.ts`); popup aberto continua fechando com Esc.
|
|
88
|
+
|
|
89
|
+
- **Enter em botões durante o desenho.** Com uma ferramenta ativa, o Enter era tratado como "concluir" mesmo com o foco num botão (barra de ferramentas, "Sair" do HUD), e o clique do botão não acontecia. O Enter agora fica com botões, links e controles com `role` acionável (`focoEmControleAcionavel`, em `src/core/alvo-digitavel.ts`).
|
|
90
|
+
|
|
91
|
+
- **Ferramenta ou edição recusada agora avisa.** Sem camada de desenho (ou com camada bloqueada/inválida), e ao recusar a edição de uma feição (bloqueada, com furos, multiparte...), o componente mostra um aviso visível por 5 s e o anuncia na região viva, além de emitir `cad-desenho-recusado`/`cad-edicao-recusada` como antes. **Novo atributo `sem-avisos`**: o consumidor que mostra o próprio aviso a partir dos eventos desliga o do componente.
|
|
92
|
+
|
|
93
|
+
- **Ponto médio arrastável na edição de vértices.** Arrastar o ponto médio de uma aresta cria o nó já na posição solta (com snap, prévia e HUD ao vivo e um único `cad-feicao-atualizada`); o clique continua inserindo no meio da aresta. Em feição com curva, o nó nasce sobre o traçado e a curva é mantida (antes, inserir um nó numa curva a convertia em poligonal). A dica do HUD passou a mencionar inserir e excluir.
|
|
94
|
+
|
|
95
|
+
- **Toque.** Um toque que começa numa alça de edição, num ponto médio ou nos HUDs não move mais o mapa junto; alças de Bézier passam a ser tratadas como as demais alças pelo mouse (não iniciam caixa de seleção).
|
|
96
|
+
|
|
97
|
+
- Testes de regressão em `tests/ui-canvas-cad-edicao.regressao.test.ts`.
|
|
98
|
+
|
|
99
|
+
### Canvas CAD: curvas (Bézier) sempre à mão
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
- **Editor de vértices**: as alças de Bézier agora aparecem **sempre**, inclusive em linhas/polígonos retos (alças latentes pontilhadas a 1/3 do vizinho, até 40 nós). Arrastar uma alça converte o nó em curva; `Shift` solta a simetria.
|
|
104
|
+
|
|
105
|
+
- **Caneta**: as alças das âncoras já colocadas podem ser **ajustadas durante o desenho** (arraste a alça, ou a própria âncora para criar/ajustar a curva dela). `Shift` solta a simetria; o cursor muda ao passar sobre uma alça.
|
|
106
|
+
|
|
107
|
+
- A dica do HUD de edição junta os gestos das duas mudanças acima (curvar pelas alças, ponto do meio, botão direito para excluir, duplo clique, Shift).
|
|
108
|
+
|
|
109
|
+
### `<ui-camadas>`: painel de camadas no estilo Adobe
|
|
110
|
+
|
|
111
|
+
- **Mudança visual:** os selos "✓ Ativa", "N SUB" e "OFICIAL" saem da linha da camada (a informação continua em `aria-current`, na dica da contagem e no marcador da prévia). Quem estilizava `.ui-active-badge`/`.ui-group-badge` precisa revisar.
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
- **Cor da camada editável**: clicar (ou Enter/Espaço) na barra de cor da linha abre o `<ui-seletor-cor>` ao lado, com prévia ao vivo, "cores do projeto" e Cancelar que restaura. Emite `ui-camada-cor` como antes.
|
|
116
|
+
|
|
117
|
+
- **Destaque de seleção na cor da camada**: a camada ativa, as feições selecionadas e o alvo de seleção usam a cor da camada (variável `--layer-active-color`, agora definida no grupo e herdada pelas feições).
|
|
118
|
+
|
|
119
|
+
- **Menos selos**: removidos "✓ Ativa", "N SUB" e "OFICIAL"; a camada ativa é indicada pelo destaque da linha (`aria-current`), a contagem vira um número discreto (a dica traz feições e subcamadas) e só a geometria prévia ganha um marcador.
|
|
120
|
+
|
|
121
|
+
- Alça de arraste mais estreita (8px, antes 14px).
|
|
122
|
+
|
|
123
|
+
- Colunas fixas (alça, olho, cadeado, barra de cor) alinhadas à esquerda em camadas, subcamadas e feições; só seta, miniatura e nome recuam com a profundidade, como no Illustrator. A barra de cor não se expande mais ao passar o mouse.
|
|
124
|
+
|
|
125
|
+
### `<ui-card>`: lapidação
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
- **Teclado:** Enter/Espaço vindos de um campo ou botão dentro do card não o ativam mais nem têm o `preventDefault` aplicado (antes era impossível digitar espaço num `<input>` dentro de um card `clicavel`). Tecla mantida (`repeat`) e atalhos com Ctrl/Alt/Meta não ativam.
|
|
130
|
+
|
|
131
|
+
- **Cliques internos:** o clique num ícone SVG dentro de um botão (alvo `<path>`) passou a ser reconhecido como de controle interno; `label`, `summary`, conteúdo editável, `ui-campo-texto` e `ui-segmented` também. Um `<a>`/`<label>` que *envolve* o card não o bloqueia mais.
|
|
132
|
+
|
|
133
|
+
- **Acessibilidade:** `aria-label` do host dá nome ao card clicável; `focus()` no host foca o card; anel de foco visível (`:focus-visible`, contorno que sobrevive ao modo de alto contraste).
|
|
134
|
+
|
|
135
|
+
- **Estilo:** o atributo `hidden` passa a esconder o card (o `display: block` do host o anulava); o realce de hover vale só com `(hover: hover)`; `prefers-reduced-motion` desliga transições e deslocamento.
|
|
136
|
+
|
|
137
|
+
- **Seções:** `[slot="cabecalho|rodape|midia"]` aninhado em um descendente não revela mais a seção do card (só filhos diretos).
|
|
138
|
+
|
|
139
|
+
- Lógica extraída para `card-interacao.ts` e `card-secoes.ts`; JSDoc de atributos, slots, parts e evento para o manifesto. API pública inalterada (novo observado: `aria-label`).
|
|
140
|
+
|
|
3
141
|
## 2.9.0 — 2026-10-23
|
|
4
142
|
|
|
5
143
|
### Junta a 2.8.2 com a linha 2.6.1–2.8.1
|
package/README.md
CHANGED
|
@@ -330,6 +330,8 @@ O Shadow DOM isola o CSS, mas os elementos internos principais são expostos com
|
|
|
330
330
|
| :--- | :--- |
|
|
331
331
|
| `<ui-botao>` / `<ui-botao-primario>` | `base`, `spinner` |
|
|
332
332
|
| `<ui-campo-texto>` / `<ui-input>` | `rotulo`, `campo`, `input`, `icone`, `icone-esquerda`, `icone-direita`, `ajuda` |
|
|
333
|
+
| `<ui-area-texto>` / `<ui-textarea>` | `rotulo`, `campo`, `input`, `rodape`, `ajuda`, `contador` |
|
|
334
|
+
| `<ui-texto>` | `base` |
|
|
333
335
|
| `<ui-lista-flutuante>` / `<ui-select>` | `rotulo`, `campo`, `valor`, `seta`, `lista`, `opcao`, `opcao-selecionada` |
|
|
334
336
|
| `<ui-checkbox>`, `<ui-radio>`, `<ui-switch>` | `base`, `controle`, `indicador`, `rotulo` |
|
|
335
337
|
| `<ui-segmented>` | `base`, `indicador`, `opcao`, `opcao-selecionada` |
|
|
@@ -393,7 +395,7 @@ Você pode acionar modais, fechar janelas, disparar notificações toast ou copi
|
|
|
393
395
|
---
|
|
394
396
|
|
|
395
397
|
### 2. Formulários Automáticos com `FormData` Nativo (W3C FACE)
|
|
396
|
-
Todos os campos (`<ui-campo-texto>`, `<ui-lista-flutuante>`, `<ui-checkbox>`, `<ui-radio>`, `<ui-switch>`) implementam a especificação oficial de **Form-Associated Custom Elements**.
|
|
398
|
+
Todos os campos (`<ui-campo-texto>`, `<ui-area-texto>`, `<ui-lista-flutuante>`, `<ui-checkbox>`, `<ui-radio>`, `<ui-switch>`) implementam a especificação oficial de **Form-Associated Custom Elements**.
|
|
397
399
|
|
|
398
400
|
Isso significa que você extrai os dados de todos os campos de uma única vez, sem ler um por um:
|
|
399
401
|
|
|
@@ -721,8 +723,9 @@ window.addEventListener('message', (event) => {
|
|
|
721
723
|
| :--- | :--- | :--- | :--- |
|
|
722
724
|
| `<ui-botao-primario>` | Botão com estados de loading, ícone e variantes. Form-associated (`type="submit"`/`"reset"`, `name`/`value`, `form`). Só com ícone, informe `aria-label` (ou `title`). | `variante`, `carregando`, `disabled`, `type`, `aria-label`, `target-modal` | `ui-click` |
|
|
723
725
|
| `<ui-campo-texto>` | Input de texto com Floating Label, validação e senha. | `label`, `value`, `tipo`, `obrigatorio`, `name` | `ui-input`, `ui-change` |
|
|
726
|
+
| `<ui-area-texto>` | Texto longo de várias linhas (descrições, laudos): contador, altura automática, redimensionamento, form-associated. Enter quebra a linha; Ctrl/Cmd+Enter emite `ui-enviar`. | `label`, `value`, `linhas`, `auto-altura`, `linhas-max`, `maxlength`, `contador`, `obrigatorio`, `name` | `ui-input`, `ui-change`, `ui-enviar` |
|
|
724
727
|
| `<ui-lista-flutuante>` | Select/Dropdown com Bottom Sheet no mobile. | `itens`, `value`, `placeholder`, `name` | `ui-selecionar` |
|
|
725
|
-
| `<ui-texto>` | Tipografia semântica (H1-H6, corpo, caption, código). | `variante`, `cor`, `peso` | - |
|
|
728
|
+
| `<ui-texto>` | Tipografia semântica (H1-H6, corpo, caption, código). Texto longo: `linhas="3"` limita a N linhas com reticências e palavras compridas quebram. | `variante`, `cor`, `peso`, `linhas`, `truncar` | - |
|
|
726
729
|
| `<ui-icone>` | Wrapper para ícones vetoriais padronizados. | `nome`, `tamanho`, `cor` | - |
|
|
727
730
|
|
|
728
731
|
### 🔵 Camada 2: Controles & Seleção
|
|
@@ -748,14 +751,14 @@ window.addEventListener('message', (event) => {
|
|
|
748
751
|
| `<ui-skeleton>` | Placeholder de carregamento animado com pulsos. | `tipo`, `largura`, `altura`, `animado` | - |
|
|
749
752
|
| `<ui-stat>` | Cartão KPI de estatísticas, métricas e tendências. | `rotulo`, `valor`, `variacao`, `tendencia` (`alta`, `baixa`, `neutro`) | - |
|
|
750
753
|
| `<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) |
|
|
751
|
-
| `<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` |
|
|
754
|
+
| `<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. | `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` |
|
|
752
755
|
| `<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` |
|
|
753
756
|
| `<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` |
|
|
754
757
|
| `<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` |
|
|
755
758
|
| `<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` |
|
|
756
759
|
| `<ui-mapa>` | Mapa geográfico interativo com camadas OpenStreetMap. | `lat`, `lng`, `zoom`, `camadas` | - |
|
|
757
760
|
| `<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` |
|
|
758
|
-
| `<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`, `popups`, `renderizador` (`leaflet` \| `canvas`: motor + Canvas 2D para dezenas de milhares de formas, ver [`docs/motor-formas.md`](docs/motor-formas.md)), `estatisticasFeicoes()`, `abrirPopupFeicao()`, `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`) |
|
|
761
|
+
| `<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 (Enter, botão Editar ou popup; desfazer, refazer e cancelar), 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`, `sem-avisos`, `aceitar-origem`, `popups`, `renderizador` (`leaflet` \| `canvas`: motor + Canvas 2D para dezenas de milhares de formas, ver [`docs/motor-formas.md`](docs/motor-formas.md)), `estatisticasFeicoes()`, `abrirPopupFeicao()`, `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`) |
|
|
759
762
|
|
|
760
763
|
#### `<ui-canvas-cad>`: montar só com API pública (2.1)
|
|
761
764
|
|