@thibezer/ui-components-kit 2.5.0 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # 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
+
+- **Valor inicial pendente**: `aba-ativa` / `valor` definidos antes de `abas` / `ferramentas` são aplicados quando os dados chegam; `aba-ativa` reflete a aba realmente ativa.
+- **`valor = ''` / `limpar()`** removem a seleção da paleta (`ui-change` com `item: null`). Novas propriedades `orientacao`, `colunas`, `tamanho` (paleta) e `compacto` (ribbon); `valor` reflete no atributo usado (`valor` ou `value`).
+- **Eventos**: `ui-ferramenta` agora é cancelável (`preventDefault()` reverte toggle/seleção); `definirAbaVisivel` emite `ui-aba-change` quando a aba ativa muda; novo `ui-recolhido-change`; tipos dos eventos no `HTMLElementEventMap` (`FerramentaDetail`, `AbaChangeDetail`, `PaletaChangeDetail`, `RecolhidoChangeDetail`).
+- **Foco e roving tabindex**: re-renderizações preservam o foco; o tabindex acompanha o botão focado; `atualizarItem` não recria o DOM para mudanças de estado (paleta) nem para itens de outra aba (ribbon).
+- **Menu/flyout**: `menuitemcheckbox`/`menuitemradio` com `aria-checked`, `aria-controls`, foco devolvido ao botão, fecha ao rolar, `ArrowDown` com menu aberto foca o primeiro item.
+- **ARIA**: abas/painel ligados (`aria-controls`/`aria-labelledby`), `aria-label` e `rotulo-abas` configuráveis, `FerramentaItem.rotuloAcessivel`, `aria-keyshortcuts`; o nome acessível não cai mais no `id` quando há `rotulo` ou ícone nomeado.
+- **Paleta**: grupo pula filho desabilitado/separador; clique longo cancelado ao arrastar; `suprimirClique` não prende mais o clique seguinte; atalhos ignoram `role=textbox` e `aria-modal`.
+- `console.warn` para ids duplicados, `ativar()`/`atualizarItem()`/`selecionarAba()` com id inválido.
+
 ## 2.5.0
 
 ### `<ui-tabela>`: robustez, modo remoto e ordenação

package/README.md

@@ -725,10 +725,10 @@ window.addEventListener('message', (event) => {
 | `<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. | `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). | `abas`, `aba-ativa`, `recolhido`, `compacto` | `ui-ferramenta`, `ui-aba-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. | `ferramentas`, `valor`, `orientacao`, `colunas`, `tamanho`, `atalhos` | `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-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`. 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-barra-ferramentas/ferramentas-comum.d.ts

@@ -1,22 +1,34 @@
 import { FerramentaItem } from './tipos';
 export type VarianteBotaoFerramenta = 'grande' | 'pequeno' | 'paleta';
 export declare function criarIcone(icone: string | undefined, tamanho: number): HTMLElement | null;
+export declare function nomeAcessivel(item: FerramentaItem): string;
 export declare function textoTooltip(item: FerramentaItem): string;
+/** Avisa (console.warn) sobre ids repetidos. */
+export declare function avisarIdsDuplicados(ids: string[], contexto: string): void;
+export declare function coletarIds(itens: FerramentaItem[], saida?: string[]): string[];
 export declare function aplicarEstadoBotao(btn: HTMLButtonElement, item: FerramentaItem): void;
 export declare function criarBotaoFerramenta(item: FerramentaItem, variante: VarianteBotaoFerramenta, tamanhoIcone: number): HTMLButtonElement;
 export declare function acharItem(itens: FerramentaItem[], id: string): FerramentaItem | undefined;
 export declare function definirRoving(botoes: HTMLButtonElement[]): void;
+/** Garante um único botão com tabindex 0, preservando o atual se ainda estiver habilitado. */
+export declare function atualizarRoving(botoes: HTMLButtonElement[]): void;
+/** O roving tabindex acompanha o botão que recebeu foco (clique, Tab ou programático). */
+export declare function seguirFoco(botoes: HTMLButtonElement[], alvo: EventTarget | null): void;
 /** Move o foco entre botões com as setas informadas. Retorna true se tratou a tecla. */
 export declare function navegarRoving(e: KeyboardEvent, botoes: HTMLButtonElement[], teclasAnterior: string[], teclasProximo: string[]): boolean;
 export interface OpcoesMenu {
     lado?: 'baixo' | 'direita';
     /** Foca o primeiro item ao abrir (abertura por teclado). */
     focar?: boolean;
+    /** Papel dos itens sem `tipo`: ribbon = botao (menuitem), paleta = ferramenta (menuitemradio). */
+    tipoPadrao?: 'botao' | 'ferramenta';
     onFechar?: () => void;
 }
 export interface MenuHandle {
     elemento: HTMLElement;
     ancora: HTMLElement;
     fechar(): void;
+    /** Move o foco para o primeiro item habilitado. */
+    focarPrimeiro(): void;
 }
 export declare function abrirMenu(raiz: ShadowRoot, ancora: HTMLElement, itens: FerramentaItem[], onEscolher: (item: FerramentaItem) => void, opcoes?: OpcoesMenu): MenuHandle;

package/dist/components/ui-barra-ferramentas/tipos.d.ts

@@ -21,6 +21,11 @@ export interface FerramentaItem {
     tipo?: TipoFerramenta;
     ativo?: boolean;
     disabled?: boolean;
+    /**
+     * Nome acessível (leitor de tela) quando não há `rotulo` visível (ex.: botões só de ícone).
+     * Sem ele e sem `rotulo`, usa-se o nome do ícone e, por último, o `id`.
+     */
+    rotuloAcessivel?: string;
     /** Apenas ribbon: botão grande (ícone sobre o rótulo) ou pequeno (em colunas de 3). Padrão: 'pequeno'. */
     tamanho?: 'grande' | 'pequeno';
     /** Apenas ribbon: oculta o rótulo em botões pequenos. */
@@ -53,3 +58,28 @@ export interface FerramentaDetail {
     /** Apenas ribbon: id da aba ativa no momento do disparo. */
     aba?: string;
 }
+/** `detail` de `ui-aba-change`. */
+export interface AbaChangeDetail {
+    id: string;
+    aba: RibbonAba;
+}
+/** `detail` de `ui-change` / `ui-selecionar` da paleta. `item` é `null` quando a seleção é limpa (`valor = ''`). */
+export interface PaletaChangeDetail {
+    valor: string;
+    item: FerramentaItem | null;
+    anterior: string;
+}
+/** `detail` de `ui-recolhido-change` do ribbon. */
+export interface RecolhidoChangeDetail {
+    recolhido: boolean;
+}
+declare global {
+    interface HTMLElementEventMap {
+        /** Cancelável: `preventDefault()` reverte o toggle / a seleção feita pelo clique. */
+        'ui-ferramenta': CustomEvent<FerramentaDetail>;
+        'ui-aba-change': CustomEvent<AbaChangeDetail>;
+        'ui-recolhido-change': CustomEvent<RecolhidoChangeDetail>;
+        'ui-change': CustomEvent<PaletaChangeDetail>;
+        'ui-selecionar': CustomEvent<PaletaChangeDetail>;
+    }
+}

package/dist/components/ui-barra-ferramentas/ui-paleta-ferramentas.d.ts

@@ -9,19 +9,26 @@ import { SafeHTMLElement } from '../../core/ssr-safe';
  * - Com o atributo `atalhos`, a tecla `atalho` do item ativa a ferramenta; teclas repetidas
  *   entre itens percorrem o grupo.
  *
- * Atributos: valor, orientacao (vertical|horizontal), colunas (1|2), tamanho (sm|md|lg), atalhos
- * Propriedades: ferramentas, valor
- * Métodos: ativar(id), atualizarItem(id, parcial)
- * Eventos: ui-change / ui-selecionar { valor, item, anterior }, ui-ferramenta { id, item, pai?, ativo?, origem }
+ * Atributos: valor (vazio limpa a seleção), orientacao (vertical|horizontal), colunas (1|2),
+ *            tamanho (sm|md|lg), atalhos, aria-label (rótulo da toolbar)
+ * Propriedades: ferramentas, valor, orientacao, colunas, tamanho
+ * Métodos: ativar(id), limpar(), atualizarItem(id, parcial)
+ * Eventos: ui-change / ui-selecionar { valor, item, anterior },
+ *          ui-ferramenta { id, item, pai?, ativo?, origem } (cancelável: preventDefault reverte a ação)
+ *
+ * `valor` pode ser definido antes de `ferramentas`: fica pendente até a ferramenta existir.
  */
 export declare class UIPaletaFerramentas extends SafeHTMLElement {
     static get observedAttributes(): string[];
     private rootElement;
     private _ferramentas;
     private _ativo;
+    private _pendente;
     private visiveis;
     private menu;
     private timerPressao;
+    private timerSupressao;
+    private inicioPressao;
     private suprimirClique;
     private listeners;
     constructor();
@@ -34,17 +41,40 @@ export declare class UIPaletaFerramentas extends SafeHTMLElement {
     set valor(id: string);
     get value(): string;
     set value(id: string);
-    /** Ativa uma ferramenta (exclusiva). Se estiver dentro de um grupo, ela passa a ser a exibida. */
+    get orientacao(): 'vertical' | 'horizontal';
+    set orientacao(val: 'vertical' | 'horizontal');
+    get colunas(): 1 | 2;
+    set colunas(val: 1 | 2);
+    get tamanho(): 'sm' | 'md' | 'lg';
+    set tamanho(val: 'sm' | 'md' | 'lg');
+    /**
+     * Ativa uma ferramenta (exclusiva). Se estiver dentro de um grupo, ela passa a ser a exibida.
+     * `id` vazio limpa a seleção. Se as `ferramentas` ainda não foram definidas, o valor fica pendente.
+     */
     ativar(id: string, emitir?: boolean): void;
+    /** Remove a seleção atual (nenhuma ferramenta ativa). Equivale a `valor = ''`. */
+    limpar(emitir?: boolean): void;
     atualizarItem(id: string, parcial: Partial<FerramentaItem>): void;
+    private refletirValor;
+    private aplicarPendente;
     private definirAtivoInterno;
+    private emitirMudanca;
+    /** Filho exibido de um grupo: o último usado, pulando separadores e itens desabilitados. */
     private itemExibido;
+    private itemParaBotao;
     private todasFerramentas;
     private renderizar;
     private botoes;
+    /** Reflete no botão o estado atual do item (sem recriar o DOM). */
+    private atualizarBotaoDe;
     private acionar;
     private handleClick;
+    private handleFocusIn;
     private handlePointerDown;
+    /** Arrastar/rolar com o dedo cancela o clique longo. */
+    private handlePointerMove;
+    /** Fim do gesto: cancela o timer e, se o flyout abriu, descarta a supressão logo após o `click` residual. */
+    private handlePointerFim;
     private cancelarPressao;
     private handleContextMenu;
     private handleKeyDown;

package/dist/components/ui-barra-ferramentas/ui-ribbon.d.ts

@@ -1,18 +1,15 @@
 import { FerramentaItem, RibbonAba } from './tipos';
 import { SafeHTMLElement } from '../../core/ssr-safe';
-/**
- * <ui-ribbon> — barra de ferramentas em abas com grupos (estilo AutoCAD / Word / Excel).
- *
- * Atributos: aba-ativa, recolhido, compacto
- * Propriedades: abas, abaAtiva, recolhido
- * Métodos: atualizarItem(id, parcial), definirAbaVisivel(id, visivel), selecionarAba(id)
- * Eventos: ui-ferramenta { id, item, pai?, ativo?, origem, aba }, ui-aba-change { id, aba }
- */
 export declare class UIRibbon extends SafeHTMLElement {
     static get observedAttributes(): string[];
     private rootElement;
     private abasElement;
     private gruposElement;
+    private painelElement;
+    private fixarElement;
+    private readonly uid;
+    private _abaPendente;
+    private _pronto;
     private _abas;
     private _abaAtiva;
     private menu;
@@ -21,24 +18,34 @@ export declare class UIRibbon extends SafeHTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, old: string | null, value: string | null): void;
+    private aplicarRotulos;
     get abas(): RibbonAba[];
     set abas(val: RibbonAba[]);
     get abaAtiva(): string;
     set abaAtiva(id: string);
     get recolhido(): boolean;
     set recolhido(val: boolean);
+    get compacto(): boolean;
+    set compacto(val: boolean);
     selecionarAba(id: string, emitir?: boolean): void;
     definirAbaVisivel(id: string, visivel: boolean): void;
     /** Atualiza um item (estado ou aparência) sem precisar recriar as abas. */
     atualizarItem(id: string, parcial: Partial<FerramentaItem>): void;
+    private efetivo;
+    private capturarFoco;
+    private comFoco;
+    private handleFocusInGrupos;
     private abasVisiveis;
     private renderizar;
     private renderizarAbas;
+    private idAba;
     private renderizarPainel;
     private criarGrupo;
     private criarBotao;
     private botoesPainel;
     private handleClickAbas;
+    private handleClickFixar;
+    private get rtl();
     private handleDblClickAbas;
     private handleKeyDownAbas;
     private handleClickGrupos;
@@ -48,5 +55,6 @@ export declare class UIRibbon extends SafeHTMLElement {
     private acionar;
     private alternarMenu;
     private fecharMenu;
+    /** Retorna false se o consumidor cancelou o evento (preventDefault). */
     private emitir;
 }

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,