@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/IconPicker/IconPicker.css

@@ -0,0 +1,107 @@
+/* ─────────────────────────────────────────────
+   ICON PICKER
+   Grade de ícones com busca. O escolhido ganha o fundo e a borda do primário.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-icon-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-icon-picker__label {
+  font-size: var(--umds-semantic-field-label-size);
+  font-weight: var(--umds-semantic-field-label-weight);
+  color: var(--umds-semantic-field-label-color);
+}
+
+/* Só para leitor de tela: "12 ícones", a cada busca. */
+.umds-icon-picker__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Grade ── */
+/* Tamanho do ladrilho: o ícone escolhe, a grade só repete (nada estica quando o container é largo). */
+.umds-icon-picker--md {
+  --umds-icon-picker-tile: var(--umds-primitive-spacing-sm); /* 40px */
+}
+
+.umds-icon-picker--sm {
+  --umds-icon-picker-tile: var(--umds-primitive-spacing-xs); /* 32px */
+}
+
+.umds-icon-picker__grid {
+  display: grid;
+  justify-content: start;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  /* Folga para o anel de foco não ser cortado pelo overflow da grade. */
+  padding: var(--umds-primitive-spacing-quarck);
+  overflow-y: auto;
+}
+
+.umds-icon-picker__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  width: var(--umds-icon-picker-tile);
+  height: var(--umds-icon-picker-tile);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+  transition:
+    background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-icon-picker__item:hover:not(:disabled) {
+  background: var(--umds-semantic-color-background-light);
+  border-color: var(--umds-semantic-color-neutral-light-down);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-icon-picker__item--selected,
+.umds-icon-picker__item--selected:hover:not(:disabled) {
+  background: var(--umds-semantic-color-primary-light);
+  border-color: var(--umds-semantic-color-primary-pure);
+  color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-icon-picker__item:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: var(--umds-primitive-border-width-thin);
+}
+
+.umds-icon-picker__item:disabled {
+  cursor: not-allowed;
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+.umds-icon-picker__empty {
+  padding: var(--umds-primitive-spacing-xxxs) 0; /* 16px */
+  text-align: center;
+}
+
+@media (forced-colors: active) {
+  .umds-icon-picker__item--selected {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

package/dist/components/IconPicker/IconPicker.d.ts

@@ -0,0 +1,74 @@
+import './IconPicker.css';
+/**
+ * Ícone do IconPicker, quando precisa de nome ou palavras de busca próprios.
+ * @property {any} icon - O ícone: o objeto importado do Font Awesome (`faUser`).
+ * @property {string} label - Nome para leitor de tela, tooltip e busca (padrão: o nome do ícone, sem hífen).
+ * @property {string[]} keywords - Palavras que também acham o ícone na busca (ex.: ["pessoa", "usuário"]).
+ */
+export interface IconPickerItem {
+    icon: any;
+    label?: string;
+    keywords?: string[];
+    [key: string]: any;
+}
+/**
+ * IconPicker — escolha de UM ícone numa grade, com busca.
+ *
+ * Os ícones vêm por prop (`icons`): objetos do Font Awesome importados
+ * (`faUser`, `faFolder`...), puros ou embrulhados em `{ icon, label, keywords }`
+ * quando o nome ou a busca precisam de ajuda. O valor é o NOME do ícone
+ * (`"user"`, `"file-lines"`), o `iconName` do Font Awesome: guarde o nome e
+ * resolva de volta para o objeto na hora de desenhar.
+ *
+ * É um `radiogroup`: um Tab entra na grade (no ícone escolhido, ou no primeiro)
+ * e as setas movem a escolha (esquerda e direita um ícone, cima e baixo uma
+ * linha), com Home e End nas pontas. A busca (campo acima da grade, ligada por
+ * padrão) filtra por nome e palavras-chave sem acento nem caixa; a seta para
+ * baixo no campo leva à grade, e o número de resultados é anunciado.
+ *
+ * O ícone escolhido ganha fundo e borda do primário, e o resultado vazio mostra
+ * `emptyText`. A altura da grade pode ser limitada (`maxHeight`) para listas com
+ * dezenas de ícones.
+ * @property {any[]} icons - Os ícones: objetos do Font Awesome, ou `{ icon, label?, keywords? }`
+ * @property {string} value - Nome do ícone escolhido (controlado)
+ * @property {string} defaultValue - Nome inicial (não controlado)
+ * @property {string} label - Rótulo visível do grupo
+ * @property {string} ariaLabel - Nome acessível quando não há `label` visível
+ * @property {number} columns - Colunas da grade (padrão 8)
+ * @property {string} size - Tamanho do ícone: 'sm' | 'md' (padrão)
+ * @property {number} maxHeight - Altura máxima da grade, em px (rola dentro dela)
+ * @property {boolean} hideSearch - Esconde o campo de busca
+ * @property {string} searchLabel - Nome do campo de busca (padrão "Buscar ícone")
+ * @property {string} searchPlaceholder - Placeholder da busca (padrão "Buscar ícone...")
+ * @property {string} emptyText - Texto sem resultados (padrão "Nenhum ícone encontrado")
+ * @property {string} resultsLabel - Anúncio da quantidade de resultados; `{count}` vira o número (padrão "{count} ícones")
+ * @property {function} iconLabel - Nome de um ícone sem `label`: `(nome) => texto` (padrão: o nome sem hífen)
+ * @property {boolean} disabled - Desabilita o grupo inteiro
+ * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onChange - Chamado com o nome do ícone e o item escolhido
+ * @quandoUsar Escolher o ícone de uma categoria, de um tipo de documento, de um perfil, de um atalho.
+ * @quandoNaoUsar Para escolher entre poucas opções que o texto descreve melhor, use `SegmentedControl` ou `Select`. Para escolher uma cor, use `ColorPicker`.
+ */
+export interface IconPickerProps {
+    icons?: any[];
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    ariaLabel?: string;
+    columns?: number;
+    size?: "sm" | "md";
+    maxHeight?: number;
+    hideSearch?: boolean;
+    searchLabel?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    resultsLabel?: string;
+    iconLabel?: (name: string) => string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    onChange?: (name: string, item: any) => void;
+}
+declare function IconPicker(props: IconPickerProps): import("react/jsx-runtime").JSX.Element;
+export default IconPicker;

package/dist/components/IconPicker/IconPicker.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './IconPicker.css';
+import { useState, useRef, useEffect } from "react";
+import Icon from "../Icon/Icon";
+import Input from "../Input/Input";
+import Text from "../Text/Text";
+import { gerarId } from "../../utils/id";
+import { semAcento } from "../../utils/texto";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+function IconPicker(props) {
+    const groupRef = useRef(null);
+    const focoPendenteRef = useRef(-1);
+    const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
+    const [query, setQuery] = useState(() => "");
+    const [uid, setUid] = useState(() => "");
+    function baseId() {
+        return props.id || uid;
+    }
+    function labelId() {
+        return baseId() && props.label ? baseId() + "-label" : undefined;
+    }
+    function groupAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !labelId() ? props.label : undefined;
+    }
+    function currentValue() {
+        return props.value !== undefined ? props.value : internalValue;
+    }
+    function columnCount() {
+        return props.columns && props.columns > 0 ? props.columns : 8;
+    }
+    function classes() {
+        return [
+            "umds-icon-picker",
+            `umds-icon-picker--${props.size || "md"}`,
+            props.disabled ? "umds-icon-picker--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function gridStyle() {
+        const estilo = {
+            gridTemplateColumns: "repeat(" + columnCount() + ", var(--umds-icon-picker-tile))",
+        };
+        if (props.maxHeight)
+            estilo.maxHeight = props.maxHeight + "px";
+        return estilo;
+    }
+    function nomeDe(icone) {
+        if (!icone)
+            return "";
+        if (typeof icone === "string")
+            return icone;
+        return icone.iconName || "";
+    }
+    function rotuloDe(nome) {
+        if (props.iconLabel)
+            return props.iconLabel(nome);
+        return nome.replace(/-/g, " ");
+    }
+    function itemList() {
+        const lista = props.icons || [];
+        const saida = [];
+        for (let i = 0; i < lista.length; i++) {
+            const bruto = lista[i];
+            const embrulhado = !!bruto && bruto.icon !== undefined && bruto.iconName === undefined;
+            const icone = embrulhado ? bruto.icon : bruto;
+            const nome = nomeDe(icone);
+            if (!nome)
+                continue;
+            const rotulo = embrulhado && bruto.label ? bruto.label : rotuloDe(nome);
+            const palavras = embrulhado && bruto.keywords ? bruto.keywords.join(" ") : "";
+            saida.push({
+                name: nome,
+                label: rotulo,
+                icon: icone,
+                raw: bruto,
+                search: semAcento(nome + " " + rotulo + " " + palavras),
+            });
+        }
+        return saida;
+    }
+    function visibleItems() {
+        const busca = semAcento(query);
+        if (!busca)
+            return itemList();
+        return itemList().filter((item) => item.search.indexOf(busca) !== -1);
+    }
+    function hasResults() {
+        return visibleItems().length > 0;
+    }
+    function emptyMessage() {
+        return props.emptyText || "Nenhum ícone encontrado";
+    }
+    function resultsText() {
+        return (props.resultsLabel || "{count} ícones").replace("{count}", String(visibleItems().length));
+    }
+    function searchName() {
+        return props.searchLabel || "Buscar ícone";
+    }
+    function estaEscolhido(item) {
+        return !!currentValue() && item.name === currentValue();
+    }
+    function itemClasses(item) {
+        return [
+            "umds-icon-picker__item",
+            estaEscolhido(item) ? "umds-icon-picker__item--selected" : "",
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function indiceDoTab() {
+        const lista = visibleItems();
+        for (let i = 0; i < lista.length; i++) {
+            if (estaEscolhido(lista[i]))
+                return i;
+        }
+        return 0;
+    }
+    function tabIndexDe(index) {
+        return index === indiceDoTab() ? 0 : -1;
+    }
+    function escolher(item) {
+        if (props.disabled)
+            return;
+        setInternalValue(item.name);
+        if (props.onChange)
+            props.onChange(item.name, item.raw);
+    }
+    function focarEm(index) {
+        if (!groupRef.current)
+            return;
+        const botoes = groupRef.current.querySelectorAll('[role="radio"]');
+        const alvo = botoes[index];
+        if (alvo)
+            alvo.focus();
+    }
+    function handleKeyDown(event, index) {
+        if (!event || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const lista = visibleItems();
+        const total = lista.length;
+        if (!total)
+            return;
+        const colunas = columnCount();
+        let alvo = index;
+        if (event.key === "ArrowRight")
+            alvo = (index + 1) % total;
+        else if (event.key === "ArrowLeft")
+            alvo = (index - 1 + total) % total;
+        else if (event.key === "ArrowDown")
+            alvo = index + colunas < total ? index + colunas : index;
+        else if (event.key === "ArrowUp")
+            alvo = index - colunas >= 0 ? index - colunas : index;
+        else if (event.key === "Home")
+            alvo = 0;
+        else if (event.key === "End")
+            alvo = total - 1;
+        else
+            return;
+        event.preventDefault();
+        if (alvo === index &&
+            event.key !== "ArrowRight" &&
+            event.key !== "ArrowLeft")
+            return;
+        escolher(lista[alvo]);
+        focoPendenteRef.current = alvo;
+    }
+    function handleSearch(texto) {
+        setQuery(texto);
+    }
+    function handleSearchKeyDown(event) {
+        if (!event || event.key !== "ArrowDown" || !hasResults())
+            return;
+        event.preventDefault();
+        focarEm(indiceDoTab());
+    }
+    useEffect(() => {
+        if (!props.id)
+            setUid(gerarId("umds-icon-picker"));
+    }, []);
+    useEffect(() => {
+        if (focoPendenteRef.current >= 0) {
+            const alvo = focoPendenteRef.current;
+            focoPendenteRef.current = -1;
+            focarEm(alvo);
+        }
+    });
+    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-icon-picker__label", id: labelId(), children: props.label })) : null, !props.hideSearch ? (_jsx("div", { className: "umds-icon-picker__search", onKeyDown: (event) => handleSearchKeyDown(event), children: _jsx(Input, { size: "sm", type: "search", ariaLabel: searchName(), placeholder: props.searchPlaceholder || "Buscar ícone...", iconLeft: faMagnifyingGlass, value: query, disabled: props.disabled, onChange: (texto) => handleSearch(texto) }) })) : null, _jsx("span", { role: "status", "aria-live": "polite", className: "umds-icon-picker__sr", children: resultsText() }), hasResults() ? (_jsx("div", { role: "radiogroup", className: "umds-icon-picker__grid", ref: groupRef, "aria-label": groupAriaLabel(), "aria-labelledby": labelId(), style: gridStyle(), children: visibleItems()?.map((item, posicao) => (_jsx("button", { type: "button", role: "radio", "aria-checked": estaEscolhido(item) ? "true" : "false", "aria-label": item.label, title: item.label, disabled: props.disabled, tabIndex: tabIndexDe(posicao), onClick: (event) => escolher(item), onKeyDown: (event) => handleKeyDown(event, posicao), className: itemClasses(item), children: _jsx(Icon, { variant: "inherit", icon: item.icon, size: props.size === "sm" ? "sm" : "md" }) }, item.name))) })) : null, !hasResults() ? (_jsx("div", { className: "umds-icon-picker__empty", children: _jsx(Text, { as: "p", variant: "body2", color: "secondary", children: emptyMessage() }) })) : null] }));
+}
+export default IconPicker;

package/dist/components/Input/Input.css

@@ -186,6 +186,14 @@
   cursor: default;
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-input--readonly .umds-input__control::placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* ── Ícone esquerdo ── */
 .umds-input__icon-left {
   display: flex;
@@ -196,6 +204,20 @@
   flex-shrink: 0;
 }
 
+/* ── Ícone decorativo à direita (iconRight) ── */
+.umds-input__icon-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--umds-primitive-spacing-nano);
+  color: var(--umds-semantic-color-neutral-dark-medium);
+  flex-shrink: 0;
+}
+
+.umds-input--disabled .umds-input__icon-right {
+  color: var(--umds-semantic-color-neutral-dark-up);
+}
+
 /* ── Ações à direita (botões de ícone) ── */
 .umds-input__actions-right {
   display: flex;
@@ -235,6 +257,22 @@
   outline-offset: 0; /* exceção ao offset 2px: o botão vive DENTRO do campo, e o afastamento invadiria a borda */
 }
 
+/* ── borderless: o campo dentro de um grupo que já tem a moldura ──
+   Sem borda, fundo e raio. O foco NÃO some: o anel do campo vira um contorno
+   para dentro (WCAG 2.4.7), e o erro mantém a borda vermelha (a cor do erro não
+   pode depender só da moldura do grupo). Sem erro, hover e foco não pintam borda. */
+.umds-input--borderless:not(.umds-input--error) .umds-input__container {
+  border-color: transparent;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.umds-input--borderless .umds-input__container:focus-within:not(.umds-input__container--disabled):not(.umds-input__container--readonly) {
+  box-shadow: none;
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px;
+}
+
 /* ── Mobile: fonte ≥16px no controle (decisão 25/07) ──
    Fonte <16px num campo focado dispara zoom automático no Safari iOS.
    Só abaixo do breakpoint-sm (640px) — desktop permanece idêntico. */

package/dist/components/Input/Input.d.ts

@@ -34,7 +34,10 @@ export interface InputAction {
  * @property {string} ariaLabel - Nome acessível quando não há label visível
  * @property {IconProp} iconLeft - Ícone Font Awesome à esquerda
  * @property {InputAction[]} iconsRight - Botões de ação com ícone à direita
- * @property {function} onChange - Callback acionado ao digitar (recebe o novo valor string)
+ * @property {IconProp} iconRight - Ícone decorativo à direita (não é botão, some para o leitor de tela). Para ação clicável, use `iconsRight`.
+ * @property {boolean} borderless - Sem borda, fundo e raio: o campo dentro de um grupo que já tem a moldura (um Select e um Input lado a lado numa mesma caixa). O foco continua visível, em contorno, e o erro mantém a borda vermelha.
+ * @property {string} mask - Máscara simples: 'cpf' | 'cnpj' | 'cep' | 'phone'. O valor exibido e o que chega em `onChange` já vêm formatados (para só os dígitos, `valor.replace(/\D/g, "")`). Aceita só dígitos, limita o tamanho e abre o teclado numérico no celular.
+ * @property {function} onChange - Callback acionado A CADA TECLA (recebe o novo valor string), nos dois frameworks. O blur sai em `onBlur`.
  * @property {function} onFocus - Callback de foco (recebe o evento nativo)
  * @property {function} onBlur - Callback de blur (recebe o evento nativo)
  * @quandoUsar Entrada de texto de UMA linha: nome, e-mail, número, busca. É o campo padrão quando o dado é curto e livre.
@@ -87,6 +90,12 @@ export interface InputProps {
     hidePasswordLabel?: string;
     iconLeft?: IconProp;
     iconsRight?: InputAction[];
+    /** Ícone decorativo à direita (não clicável, `aria-hidden`). Para ação, use `iconsRight`. */
+    iconRight?: IconProp;
+    /** Sem borda, fundo e raio, para o campo dentro de um grupo que já tem a moldura. O foco e o erro continuam visíveis. @default false */
+    borderless?: boolean;
+    /** Máscara simples. O valor exibido e o de `onChange` já saem formatados. */
+    mask?: "cpf" | "cnpj" | "cep" | "phone";
     onChange?: (value: string) => void;
     onFocus?: (event?: any) => void;
     onBlur?: (event?: any) => void;

package/dist/components/Input/Input.js

@@ -1,11 +1,13 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Input.css';
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 import Icon from "../Icon/Icon";
 import Text from "../Text/Text";
 function Input(props) {
+    const ultimoEventoRef = useRef(null);
+    const ultimoValorRef = useRef(null);
     const [isPasswordVisible, setIsPasswordVisible] = useState(() => false);
     const [internalValue, setInternalValue] = useState(() => props.defaultValue || "");
     const [uid, setUid] = useState(() => "umds-input-" + Math.random().toString(36).slice(2, 9));
@@ -48,6 +50,7 @@ function Input(props) {
             props.disabled ? "umds-input--disabled" : "",
             props.readOnly ? "umds-input--readonly" : "",
             props.numberSpinner ? "umds-input--number-spinner" : "",
+            props.borderless ? "umds-input--borderless" : "",
             `umds-input--${props.size || "md"}`,
             props.className,
         ]
@@ -69,16 +72,74 @@ function Input(props) {
     function iconSize() {
         return props.size === "sm" || props.size === "xs" ? "sm" : "md";
     }
+    function aplicarMascara(valor) {
+        const texto = valor === undefined || valor === null ? "" : String(valor);
+        if (!props.mask)
+            return texto;
+        let digitos = texto.replace(/\D/g, "");
+        let padrao = "";
+        if (props.mask === "cpf")
+            padrao = "###.###.###-##";
+        else if (props.mask === "cnpj")
+            padrao = "##.###.###/####-##";
+        else if (props.mask === "cep")
+            padrao = "#####-###";
+        else if (props.mask === "phone")
+            padrao = digitos.length > 10 ? "(##) #####-####" : "(##) ####-####";
+        let saida = "";
+        let posicao = 0;
+        for (let i = 0; i < padrao.length && posicao < digitos.length; i++) {
+            if (padrao.charAt(i) === "#") {
+                saida += digitos.charAt(posicao);
+                posicao++;
+            }
+            else {
+                saida += padrao.charAt(i);
+            }
+        }
+        return saida;
+    }
+    function tamanhoMaximo() {
+        if (props.mask === "cpf")
+            return 14;
+        if (props.mask === "cnpj")
+            return 18;
+        if (props.mask === "cep")
+            return 9;
+        if (props.mask === "phone")
+            return 15;
+        return undefined;
+    }
+    function modoDoTeclado() {
+        return props.mask ? "numeric" : undefined;
+    }
+    function valorExibido() {
+        const bruto = props.value !== undefined ? props.value : internalValue;
+        return aplicarMascara(bruto);
+    }
     function handleChange(event) {
-        setInternalValue(event.target.value);
+        const nativo = event.nativeEvent || event;
+        if (nativo === ultimoEventoRef.current)
+            return;
+        ultimoEventoRef.current = nativo;
+        const valor = aplicarMascara(event.target.value);
+        // O `change` do blur (Vue) repete o que o `input` da última tecla
+        // entregou; só passa se o valor mudou de fato (ex.: change disparado à mão).
+        if (nativo.type === "change" && valor === ultimoValorRef.current)
+            return;
+        ultimoValorRef.current = valor;
+        if (props.mask && event.target.value !== valor) {
+            event.target.value = valor;
+        }
+        setInternalValue(valor);
         if (props.onChange) {
-            props.onChange(event.target.value);
+            props.onChange(valor);
         }
     }
-    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", forId: inputId(), children: [_jsx(_Fragment, { children: props.label }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: _jsx(Icon, { icon: props.iconLeft, size: iconSize() }) })) : null, _jsx("input", { className: "umds-input__control", id: inputId(), type: inputType(), name: props.name, min: props.min, max: props.max, step: props.step, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: props.value !== undefined ? props.value : internalValue, onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-label": props.ariaLabel, "aria-invalid": !!props.invalid ||
+    return (_jsxs("div", { className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-input__label", forId: inputId(), children: [_jsx(_Fragment, { children: props.label }), props.required ? (_jsx("span", { className: "umds-input__required", children: "*" })) : null] })) : null, _jsxs("div", { className: inputContainerClasses(), children: [props.iconLeft ? (_jsx("div", { className: "umds-input__icon-left", children: _jsx(Icon, { icon: props.iconLeft, size: iconSize() }) })) : null, _jsx("input", { className: "umds-input__control", id: inputId(), type: inputType(), name: props.name, min: props.min, max: props.max, step: props.step, disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, value: valorExibido(), maxLength: tamanhoMaximo(), inputMode: modoDoTeclado(), onInput: (event) => handleChange(event), onChange: (event) => handleChange(event), onFocus: (event) => props.onFocus?.(event), onBlur: (event) => props.onBlur?.(event), "aria-label": props.ariaLabel, "aria-invalid": !!props.invalid ||
                             !!(props.errorMessage && props.errorMessage.length > 0), "aria-describedby": describedBy() || undefined, required: props.required }), _jsxs("div", { className: "umds-input__actions-right", children: [props.type === "password" ? (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (event) => togglePassword(), "aria-label": passwordToggleLabel(), children: _jsx(Icon, { icon: isPasswordVisible ? faEyeSlash : faEye, size: iconSize() }) })) : null, props.iconsRight?.length ? (_jsx(_Fragment, { children: props.iconsRight?.map((action, index) => (_jsx("button", { type: "button", className: "umds-input__action-btn", disabled: props.disabled, onClick: (e) => {
                                         e.stopPropagation();
                                         action.onClick?.(e);
-                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: _jsx(Icon, { icon: action.icon, size: iconSize() }) }, index))) })) : null] })] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: _jsx(_Fragment, { children: props.errorMessage }) })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: _jsx(_Fragment, { children: props.helperText }) })) : null] }));
+                                    }, title: action.tooltip, "aria-label": action.label || action.tooltip, children: _jsx(Icon, { icon: action.icon, size: iconSize() }) }, index))) })) : null] }), props.iconRight ? (_jsx("div", { "aria-hidden": "true", className: "umds-input__icon-right", children: _jsx(Icon, { icon: props.iconRight, size: iconSize() }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: _jsx(_Fragment, { children: props.errorMessage }) })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: _jsx(_Fragment, { children: props.helperText }) })) : null] }));
 }
 export default Input;

package/dist/components/Kanban/Kanban.css

@@ -7,7 +7,11 @@
    cartão.
    ============================================ */
 
+/* `position: relative` ancora os textos só para leitor de tela (absolutos) das
+   colunas dentro da área que rola; sem ele, o de uma coluna fora da tela sobe
+   até a página e cria rolagem horizontal nela. */
 .umds-kanban {
+  position: relative;
   display: flex;
   align-items: stretch;
   gap: var(--umds-primitive-spacing-xxxs);

package/dist/components/Kbd/Kbd.css

@@ -0,0 +1,66 @@
+/* ─────────────────────────────────────────────
+   KBD
+   Uma tecla, ou uma combinação, em fonte monoespaçada.
+
+   A caixa é cinza com borda e uma sombra de base de 1px (a "espessura" da
+   tecla). Texto escuro sobre cinza claro: contraste de texto, não só de cor.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-kbd {
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: var(--umds-primitive-spacing-xxs); /* 24px */
+  padding: var(--umds-primitive-spacing-micro) var(--umds-primitive-spacing-nano); /* 2px 8px */
+  font-family: var(--umds-semantic-font-family-mono);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  line-height: var(--umds-primitive-font-line-height-lg);
+  text-align: center;
+  white-space: nowrap;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  background: var(--umds-semantic-color-background-light);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-bottom-width: var(--umds-primitive-border-width-thin);
+  border-radius: var(--umds-primitive-border-radius-xs);
+}
+
+.umds-kbd.umds-kbd--md {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+}
+
+.umds-kbd.umds-kbd--sm {
+  min-width: 0;
+  padding: 0 var(--umds-primitive-spacing-quarck); /* 0 4px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+/* ── Combinação ── */
+.umds-kbd-combo {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-family: var(--umds-semantic-font-family-mono);
+}
+
+.umds-kbd-combo__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+}
+
+.umds-kbd-combo__separator {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+/* O tamanho do conjunto vale para cada tecla dentro dele. */
+.umds-kbd-combo.umds-kbd--md .umds-kbd--inner {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+}
+
+.umds-kbd-combo.umds-kbd--sm .umds-kbd--inner {
+  min-width: 0;
+  padding: 0 var(--umds-primitive-spacing-quarck); /* 0 4px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}