@1doc/1ds-react 2.7.2 → 2.9.0

package/dist/components/List/ListItem.d.ts

@@ -0,0 +1,85 @@
+/** Elemento interativo (ou não) que ocupa a linha inteira. */
+export type ListItemTag = "button" | "a" | "div";
+/**
+ * ListItem — linha de lista inteira clicável, com conteúdo livre.
+ *
+ * Renderiza um `<li>` que contém UM elemento (`button`, `a` ou `div`) do tamanho
+ * da linha: o alvo de clique e de foco é a linha toda, não só o título. Por isso
+ * o ListItem vive dentro de um `List` (ou de um `ul`/`ol`, como `Stack as="ul"`).
+ *
+ * O conteúdo se encaixa por slots, todos opcionais: `start` (avatar, ícone,
+ * checkbox decorativo), `title`, `subtitle`, `meta` (data, contexto), `end`
+ * (badge, seta, valor) e o conteúdo padrão, que entra abaixo de `meta`. `title`,
+ * `subtitle` e `meta` também aceitam texto direto por prop.
+ *
+ * Elemento: sem `as`, vira `a` quando há `href` e `button` nos outros casos.
+ * `as="div"` é a linha que não navega nem age (só mostra), e vira acionável
+ * (role="button", Enter e Espaço) se receber `onClick`. Controles dentro de uma
+ * linha clicável (botão, checkbox) quebram o HTML: se a linha precisa deles,
+ * use `as="div"` sem `onClick` e ponha a ação num deles.
+ *
+ * `selected` marca o item atual (fundo azul-claro e `aria-current`). `disabled`
+ * tira a linha da ordem de tabulação e bloqueia o clique.
+ *
+ * Atributos HTML (`id`, `style`, `role`, `tabIndex`, `data-*`, `aria-*`) vão
+ * para o elemento interativo, que é quem recebe `aria-label` quando a linha não
+ * tem texto visível. `title` NÃO é o atributo HTML: é o título da linha.
+ * @property {string} as - Elemento da linha: 'button' | 'a' | 'div'. Padrão: 'a' com href, senão 'button'
+ * @property {string} href - Destino do link (vira as="a")
+ * @property {string} target - Destino do link: '_blank' ganha rel="noopener noreferrer"
+ * @property {string} rel - Relação do link (sobrescreve o padrão do target)
+ * @property {boolean} selected - Item atual: fundo de seleção e aria-current
+ * @property {boolean} disabled - Bloqueia clique e foco
+ * @property {any} title - Título da linha: texto, ou slot `title` (nó)
+ * @property {any} subtitle - Segunda linha: texto, ou slot `subtitle` (nó)
+ * @property {any} meta - Terceira linha, menor (data, contexto): texto, ou slot `meta` (nó)
+ * @property {any} start - Slot `start`: conteúdo antes do texto (avatar, ícone)
+ * @property {any} end - Slot `end`: conteúdo no fim da linha (badge, seta, valor)
+ * @property {function} onClick - Callback do clique (ou de Enter/Espaço no as="div")
+ * @property {string} className - Classes CSS adicionais, no elemento interativo
+ * @slot start - Conteúdo antes do texto.
+ * @slot title - Título (substitui a prop `title`).
+ * @slot subtitle - Segunda linha (substitui a prop `subtitle`).
+ * @slot meta - Terceira linha (substitui a prop `meta`).
+ * @slot end - Conteúdo no fim da linha.
+ * @quandoUsar Itens de uma lista em que a linha toda é a ação: documentos não lidos, notificações, resultados de busca, opções de menu de filtro, itens de navegação secundária. Hover, foco visível e seleção já vêm resolvidos.
+ * @quandoNaoUsar Para dados comparados coluna a coluna, use `DataTable`. Para um cartão com título, ações e elevação própria, use `Card`. Para um botão solto fora de lista, use `Button`. Para a navegação principal do produto, use `SidePanelItem` ou `AppNavItem`.
+ */
+/** Elemento interativo (ou não) que ocupa a linha inteira. */
+export interface ListItemProps {
+    /** Elemento da linha. Sem `as`: `a` quando há `href`, senão `button`. */
+    as?: ListItemTag;
+    /** Destino do link (liga `as="a"`). */
+    href?: string;
+    /** Destino do link. `_blank` ganha `rel="noopener noreferrer"`. */
+    target?: string;
+    /** Relação do link. Sobrescreve o padrão do `target`. */
+    rel?: string;
+    /** Item atual: fundo de seleção e `aria-current`. @default false */
+    selected?: boolean;
+    /** Bloqueia clique e foco. @default false */
+    disabled?: boolean;
+    /** Título da linha. Texto, ou slot `title` para um nó. */
+    title?: any;
+    /** Segunda linha. Texto, ou slot `subtitle` para um nó. */
+    subtitle?: any;
+    /** Terceira linha, menor (data, contexto). Texto, ou slot `meta` para um nó. */
+    meta?: any;
+    /** Conteúdo antes do texto (avatar, ícone). No Vue, slot `start`. */
+    start?: any;
+    /** Conteúdo no fim da linha (badge, seta, valor). No Vue, slot `end`. */
+    end?: any;
+    /** Chamado no clique da linha (ou em Enter/Espaço no `as="div"`). */
+    onClick?: (event: any) => void;
+    /** Classes CSS adicionais, no elemento interativo. */
+    className?: string;
+    /** ID HTML do elemento interativo. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento interativo (style, data-*, aria-*…). */
+    style?: any;
+    [key: string]: any;
+    /** Conteúdo livre, abaixo de `meta`. */
+    children?: any;
+}
+declare function ListItem(props: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export default ListItem;

package/dist/components/List/ListItem.js

@@ -0,0 +1,81 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "../Text/Text";
+function ListItem(props) {
+    function elementTag() {
+        if (props.as)
+            return props.as;
+        return props.href ? "a" : "button";
+    }
+    function isInteractive() {
+        return elementTag() !== "div" || !!props.onClick;
+    }
+    function classes() {
+        return [
+            "umds-list-item",
+            isInteractive() ? "umds-list-item--interactive" : "",
+            props.selected ? "umds-list-item--selected" : "",
+            props.disabled ? "umds-list-item--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function ariaCurrent() {
+        return props.selected ? "true" : undefined;
+    }
+    function ariaDisabled() {
+        return props.disabled ? "true" : undefined;
+    }
+    function hrefValue() {
+        return props.disabled ? undefined : props.href;
+    }
+    function relValue() {
+        if (props.rel)
+            return props.rel;
+        return props.target === "_blank" ? "noopener noreferrer" : undefined;
+    }
+    function divRole() {
+        return props.onClick ? "button" : undefined;
+    }
+    function divTabIndex() {
+        if (!props.onClick)
+            return undefined;
+        return props.disabled ? -1 : 0;
+    }
+    function handleClick(event) {
+        if (props.disabled) {
+            if (event && event.preventDefault)
+                event.preventDefault();
+            return;
+        }
+        if (props.onClick)
+            props.onClick(event);
+    }
+    function handleKeyDown(event) {
+        if (!props.onClick || props.disabled || !event)
+            return;
+        // Só a própria linha aciona: Enter/Espaço dentro de um controle interno não.
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        props.onClick(event);
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "role" ||
+                chave === "tabIndex") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] }));
+}
+export default ListItem;

package/dist/components/Modal/Modal.css

@@ -29,6 +29,7 @@
   left: 0;
   right: 0;
   bottom: 0;
+  /* stylelint-disable-next-line 1ds/cor-por-token -- o DS não tem token de scrim/overlay (candidato a novo token) */
   background-color: rgba(0, 0, 0, 0.4); /* overlay escuro — sem token 1DS: candidato a novo token */
   backdrop-filter: blur(4px);
   animation: umds-fade-in 0.2s ease-out;
@@ -214,7 +215,8 @@
    Cor: sempre token; as que o DS não tem vão no vizinho já decidido:
      #222222 título  → neutral-dark-pure    #333333
      #e1e3e6 bordas  → neutral-light-medium #EBEBEB
-     #7d7d7d apoio   → neutral-dark-medium  #7D7D7D (bate exato)
+     #7d7d7d apoio   → neutral-dark-down    #565656 (o #7D7D7D do produto dá
+                       4,11:1 sobre branco e reprova o WCAG 1.4.3 — ver subtítulo)
    Raio: 8px do DS, não os 12px do produto — a rodada de agosto fez 8 universal.
    Os cantos de baixo ficam arredondados porque o diálogo recorta (overflow).
    ───────────────────────────────────────────────────────────────────────────── */
@@ -234,14 +236,14 @@
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--umds-primitive-spacing-mini); /* 12px */
-  padding: 18px 22px 14px; /* produto: 18px 22px 14px */
+  padding: var(--umds-primitive-spacing-xxxs) var(--umds-primitive-spacing-xxs); /* 16px 24px — mesma altura total do produto (18px 22px 14px) */
   border-bottom: 1px solid var(--umds-semantic-color-neutral-light-medium);
   flex-shrink: 0;
   box-sizing: border-box;
 }
 
 .umds-modal--base .umds-modal__text-group {
-  gap: 3px; /* produto: 3px entre título e subtítulo */
+  gap: var(--umds-primitive-spacing-quarck); /* 4px entre título e subtítulo (produto: 3px) */
   min-width: 0;
 }
 
@@ -253,14 +255,17 @@
 
 .umds-modal__subtitle {
   font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
-  color: var(--umds-semantic-color-neutral-dark-medium);
+  /* neutral-dark-down, não neutral-dark-medium: o subtítulo é TEXTO (vira a
+     aria-describedby do diálogo) e o #7D7D7D dá 4,11:1 sobre branco — abaixo
+     dos 4,5:1 do WCAG 1.4.3. #565656 dá 7,34:1 e passa nos 13 temas. */
+  color: var(--umds-semantic-color-neutral-dark-down);
 }
 
 /* ── Controles de janela ──────────────────────────────────────────────────── */
 .umds-modal__header-actions {
   display: flex;
   align-items: center;
-  gap: 2px; /* produto: 2px — os controles andam juntos */
+  gap: var(--umds-primitive-spacing-micro); /* 2px — os controles andam juntos */
   flex-shrink: 0;
 }
 
@@ -315,7 +320,7 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
-  padding: 20px 22px; /* produto: 20px 22px */
+  padding: var(--umds-primitive-spacing-xxxs) var(--umds-primitive-spacing-xxs); /* 16px 24px (produto: 20px 22px) */
   display: flex;
   flex-direction: column;
   gap: var(--umds-primitive-spacing-xxxs); /* 16px */
@@ -327,9 +332,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px; /* produto: 10px */
+  gap: var(--umds-primitive-spacing-nano); /* 8px (produto: 10px) */
   margin-top: 0;
-  padding: 14px 22px; /* produto: 14px 22px */
+  padding: var(--umds-primitive-spacing-xxxs) var(--umds-primitive-spacing-xxs); /* 16px 24px (produto: 14px 22px) */
   border-top: 1px solid var(--umds-semantic-color-neutral-light-medium);
   background: var(--umds-semantic-color-neutral-light-pure);
   /* Levanta o rodapé do conteúdo que passa por baixo dele ao rolar.
@@ -370,6 +375,86 @@
   border-radius: 0;
 }
 
+/* ── variant="primary": cabeçalho cheio na cor primária ──
+   Título, subtítulo e controles em branco (neutral-light-pure, o mesmo par que
+   o Button primary usa sobre primary-pure). */
+.umds-modal--primary .umds-modal__header {
+  background-color: var(--umds-semantic-color-primary-pure);
+  border-bottom-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-modal--primary .umds-modal__title,
+.umds-modal--primary .umds-modal__subtitle {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl:hover,
+.umds-modal--primary .umds-modal__ctrl--ativo,
+.umds-modal--primary .umds-modal__ctrl--close:hover {
+  background: var(--umds-semantic-color-primary-dark);
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl:focus-visible {
+  outline-color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl-divider {
+  background: var(--umds-semantic-color-primary-medium);
+}
+
+/* ── responsive: abaixo do breakpoint vira painel que sobe pela borda de baixo ──
+   Mesma anatomia do BottomSheet (largura total, cantos de cima arredondados,
+   alça, entrada por baixo). Quem decide o breakpoint é o componente (media
+   query em JS, para a prop `responsiveBreakpoint` valer). */
+.umds-modal-root--sheet {
+  align-items: flex-end;
+  padding: 0;
+}
+
+.umds-modal.umds-modal--sheet {
+  width: 100%;
+  max-width: none;
+  max-height: 90vh;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  animation: umds-modal-sheet-in var(--umds-semantic-motion-duration-base)
+    var(--umds-semantic-motion-easing-standard);
+}
+
+@keyframes umds-modal-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.umds-modal__grabber {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--umds-primitive-spacing-nano) 0 0;
+  flex-shrink: 0;
+}
+
+.umds-modal--primary .umds-modal__grabber {
+  background-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-modal__grabber-bar {
+  display: block;
+  width: var(--umds-primitive-spacing-sm); /* 40px */
+  height: var(--umds-primitive-spacing-quarck); /* 4px */
+  border-radius: var(--umds-primitive-border-radius-pill);
+  background-color: var(--umds-semantic-color-neutral-light-down);
+}
+
 /* ── Alto contraste ──
    No 1doc-high-contrast o painel e a página são pretos e a sombra (preta)
    não aparece: sem traço, o modal não tem borda visível. O traço é um

package/dist/components/Modal/Modal.d.ts

@@ -27,11 +27,43 @@ export interface ModalProps {
      * - "positive": sucesso (verde, ícone circle-check).
      * - "negative": erro/falha (vermelho, ícone circle-exclamation).
      * - "info": atenção (laranja, ícone triangle-exclamation).
+     * - "primary": modal base com o cabeçalho cheio na cor primária (título e
+     *   controles em branco). Não é diálogo de feedback: mantém as três faixas.
      * @default 'default'
      */
-    variant?: "default" | "positive" | "negative" | "info";
-    /** Título em destaque */
+    variant?: "default" | "positive" | "negative" | "info" | "primary";
+    /**
+     * Largura do modal, qualquer valor CSS (`"600px"`, `"60vw"`). Sem
+     * `maxWidth`, o teto passa a ser a própria tela (o 498px do `md` não
+     * segura mais). Vence o `size`. Com `windowControls`, vale só no modo
+     * normal: expandido e tela cheia mandam no tamanho.
+     */
+    width?: string;
+    /** Largura máxima, qualquer valor CSS. Vence o teto do `size`. */
+    maxWidth?: string;
+    /**
+     * Abaixo do breakpoint (`responsiveBreakpoint`), o modal vira um painel que
+     * sobe pela borda de baixo, como o `BottomSheet`: largura total, cantos de
+     * cima arredondados, alça no topo. Acima dele, continua centralizado. É
+     * o mesmo componente reorganizado, então título, corpo e rodapé não mudam.
+     * @default false
+     */
+    responsive?: boolean;
+    /** Largura da tela, em px, abaixo da qual o `responsive` vira painel. Lida na montagem. @default 640 */
+    responsiveBreakpoint?: number;
+    /**
+     * Título em destaque. Com título, o diálogo é nomeado por ele
+     * (`aria-labelledby`) e `ariaLabel` é ignorado.
+     */
     title?: string;
+    /**
+     * Nome acessível do diálogo quando não há `title` (vira `aria-label`).
+     * Sem título e sem esta prop, o leitor de tela anuncia só "diálogo", sem
+     * dizer do quê — informe sempre que o modal não tiver título visível. Como
+     * último recurso o componente usa "Diálogo", para o `role="dialog"` nunca
+     * sair anônimo.
+     */
+    ariaLabel?: string;
     /** Texto de descrição/apoio */
     description?: string;
     /** Texto do botão de confirmação/ação primária */
@@ -68,12 +100,18 @@ export interface ModalProps {
     /** Se verdadeiro, renderiza o modal inline (sem fixed/overlay), útil para documentação */
     inline?: boolean;
     /**
-     * Controles de janela no cabeçalho: restaurar, expandir, tela cheia e
-     * minimizar, antes do ×. É tudo ou nada — ou o modal tem só o ×, ou tem o
-     * conjunto inteiro. Ligado, o modal passa a mudar de tamanho sozinho.
+     * Controles de janela no cabeçalho, antes do ×. Duas formas:
+     * - `true`: o conjunto inteiro (restaurar, expandir, tela cheia e minimizar).
+     *   O modal passa a mudar de tamanho sozinho (normal 780px, expandido, tela
+     *   cheia).
+     * - uma lista com os que quiser, na ordem fixa do cabeçalho:
+     *   `["expand", "fullscreen"]`, `["fullscreen"]`... Os nomes são `normal`,
+     *   `expand`, `fullscreen` e `minimize`. Sem `normal` na lista, clicar de
+     *   novo no modo ativo volta ao normal, e o modo normal usa o tamanho do
+     *   próprio modal (`size`, `width`), não os 780px do conjunto inteiro.
      */
-    windowControls?: boolean;
-    /** Acionado no botão minimizar. Só existe com `windowControls`. */
+    windowControls?: boolean | Array<"normal" | "expand" | "fullscreen" | "minimize">;
+    /** Acionado no botão minimizar. Só existe quando `minimize` está entre os controles. */
     onMinimize?: (event?: any) => void;
     /**
      * Região esquerda do rodapé — conteúdo de apoio que não é botão: a caixa

package/dist/components/Modal/Modal.js

@@ -12,6 +12,7 @@ function Modal(props) {
     const escCleanupRef = useRef(null);
     const closeFnRef = useRef(null);
     const previousFocusRef = useRef(null);
+    const mediaCleanupRef = useRef(null);
     const [lastOpen, setLastOpen] = useState(() => false);
     const [uid, setUid] = useState(() => "umds-modal-" + Math.random().toString(36).slice(2, 9));
     function titleId() {
@@ -23,22 +24,92 @@ function Modal(props) {
     function labelledBy() {
         return props.title ? uid + "-title" : undefined;
     }
+    function nomeAcessivel() {
+        if (props.title)
+            return undefined;
+        return props.ariaLabel || "Diálogo";
+    }
     function describedBy() {
         return props.description ? uid + "-description" : undefined;
     }
     function ehFeedback() {
-        const temVariante = props.variant ? props.variant !== "default" : false;
+        // `primary` é só o cabeçalho cheio do modal base: não é feedback.
+        const temVariante = props.variant
+            ? props.variant !== "default" && props.variant !== "primary"
+            : false;
         return temVariante || props.layout === "dialog";
     }
     const [modoAtual, setModoAtual] = useState(() => "normal");
+    const [isCompact, setIsCompact] = useState(() => false);
+    function ehSheet() {
+        return !!props.responsive && isCompact;
+    }
+    function temNormal() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("normal"));
+    }
+    function temExpandir() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("expand"));
+    }
+    function temTelaCheia() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("fullscreen"));
+    }
+    function temMinimizar() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("minimize"));
+    }
+    function temControles() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) && props.windowControls.length > 0);
+    }
+    function janelaPorLista() {
+        return Array.isArray(props.windowControls);
+    }
+    function estiloDoDialogo() {
+        if (!props.width && !props.maxWidth)
+            return undefined;
+        if (props.responsive && isCompact)
+            return undefined;
+        if (props.windowControls && modoAtual !== "normal")
+            return undefined;
+        const estilo = {};
+        if (props.width)
+            estilo.width = props.width;
+        if (props.maxWidth)
+            estilo.maxWidth = props.maxWidth;
+        else
+            estilo.maxWidth = "100%";
+        return estilo;
+    }
     function irParaNormal() {
         setModoAtual("normal");
     }
     function irParaExpandido() {
-        setModoAtual("expanded");
+        setModoAtual(modoAtual === "expanded" && !temNormal() ? "normal" : "expanded");
     }
     function irParaTelaCheia() {
-        setModoAtual("fullscreen");
+        setModoAtual(modoAtual === "fullscreen" && !temNormal() ? "normal" : "fullscreen");
     }
     function classeDoControle(modo) {
         return modo === modoAtual
@@ -48,6 +119,12 @@ function Modal(props) {
     function classeDaJanela() {
         if (!props.windowControls)
             return "";
+        if (props.responsive && isCompact)
+            return "";
+        // Lista de controles: o normal é o tamanho do próprio modal.
+        if (Array.isArray(props.windowControls) && modoAtual === "normal") {
+            return "";
+        }
         return `umds-modal--janela-${modoAtual}`;
     }
     function temRodape() {
@@ -61,6 +138,7 @@ function Modal(props) {
             props.inline ? "umds-modal-root--inline" : "umds-modal-root",
             props.open ? "umds-modal-root--open" : "umds-modal-root--closed",
             props.size === "fullscreen" ? "umds-modal-root--fullscreen" : "",
+            props.responsive && isCompact ? "umds-modal-root--sheet" : "",
         ]
             .filter(Boolean)
             .join(" ");
@@ -72,6 +150,7 @@ function Modal(props) {
             props.size && props.size !== "md" ? `umds-modal--${props.size}` : "",
             ehFeedback() ? "umds-modal--feedback" : "umds-modal--base",
             classeDaJanela(),
+            props.responsive && isCompact ? "umds-modal--sheet" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -103,6 +182,10 @@ function Modal(props) {
     function handleEscClose(event) {
         if (props.closeOnEsc === false)
             return;
+        // Quem já usou o Esc (Select, DatePicker, Popover aberto dentro do
+        // modal) chamou preventDefault: a tecla é dele, o modal não fecha.
+        if (event && event.defaultPrevented)
+            return;
         if (!isTopOverlay(uid))
             return;
         handleClose(event);
@@ -168,10 +251,23 @@ function Modal(props) {
                 closeFnRef.current(event);
             }
         };
-        document.addEventListener("keydown", watcher, true);
+        // No borbulho (false), não na captura: o ouvinte do document só vê a tecla
+        // depois que o componente aberto dentro do modal teve a vez de consumi-la.
+        document.addEventListener("keydown", watcher, false);
         escCleanupRef.current = () => {
-            document.removeEventListener("keydown", watcher, true);
+            document.removeEventListener("keydown", watcher, false);
         };
+        if (typeof window !== "undefined" && window.matchMedia) {
+            const consulta = window.matchMedia("(max-width: " + (props.responsiveBreakpoint || 640) + "px)");
+            const aoMudar = (e) => {
+                setIsCompact(!!e.matches);
+            };
+            setIsCompact(!!consulta.matches);
+            consulta.addEventListener("change", aoMudar);
+            mediaCleanupRef.current = () => {
+                consulta.removeEventListener("change", aoMudar);
+            };
+        }
         syncOpenState();
     }, []);
     useEffect(() => {
@@ -185,9 +281,13 @@ function Modal(props) {
                 escCleanupRef.current();
                 escCleanupRef.current = null;
             }
+            if (mediaCleanupRef.current) {
+                mediaCleanupRef.current();
+                mediaCleanupRef.current = null;
+            }
             removeOverlay(uid);
         };
     }, []);
-    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { className: "umds-modal-overlay", onClick: (e) => handleOverlayClick(e) }), _jsxs("div", { role: "dialog", "aria-modal": "true", ref: dialogRef, "aria-labelledby": labelledBy(), "aria-describedby": describedBy(), tabIndex: -1, onKeyDown: (event) => handleTrapKeydown(event), className: modalClasses(), children: [!ehFeedback() ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-modal__header", children: [_jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx("span", { className: "umds-modal__title", id: titleId(), children: props.title })) : null, props.description ? (_jsx("span", { className: "umds-modal__subtitle", id: descriptionId(), children: props.description })) : null] }), _jsxs("div", { className: "umds-modal__header-actions", children: [props.windowControls ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", title: props.normalModeLabel || "Modo normal", "aria-label": props.normalModeLabel || "Modo normal", "aria-pressed": modoAtual === "normal", onClick: (event) => irParaNormal(), className: classeDoControle("normal"), children: _jsx(Icon, { customSize: "14px", icon: faWindowRestore }) }), _jsx("button", { type: "button", title: props.expandLabel || "Expandir", "aria-label": props.expandLabel || "Expandir", "aria-pressed": modoAtual === "expanded", onClick: (event) => irParaExpandido(), className: classeDoControle("expanded"), children: _jsx(Icon, { customSize: "14px", icon: faUpRightAndDownLeftFromCenter }) }), _jsx("button", { type: "button", title: props.fullscreenLabel || "Tela cheia", "aria-label": props.fullscreenLabel || "Tela cheia", "aria-pressed": modoAtual === "fullscreen", onClick: (event) => irParaTelaCheia(), className: classeDoControle("fullscreen"), children: _jsx(Icon, { customSize: "14px", icon: faExpand }) }), _jsx("button", { type: "button", className: "umds-modal__ctrl", title: props.minimizeLabel || "Minimizar", "aria-label": props.minimizeLabel || "Minimizar", onClick: (e) => props.onMinimize?.(e), children: _jsx(Icon, { customSize: "14px", icon: faMinus }) }), _jsx("span", { className: "umds-modal__ctrl-divider" })] })) : null, !props.hideCloseButton ? (_jsx("button", { type: "button", className: "umds-modal__ctrl umds-modal__ctrl--close", onClick: (e) => handleClose(e), title: props.closeLabel || "Fechar", "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { customSize: "16px", icon: faXmark }) })) : null] })] }), _jsx("div", { className: "umds-modal__body", children: _jsx(_Fragment, { children: props.children }) }), temRodape() ? (_jsxs("div", { className: "umds-modal__footer", children: [_jsx("div", { className: "umds-modal__footer-start", children: props.footerStart ? _jsx(_Fragment, { children: props.footerStart }) : null }), _jsxs("div", { className: "umds-modal__footer-end", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })) : null] })) : null, ehFeedback() ? (_jsxs(_Fragment, { children: [!props.hideCloseButton ? (_jsx("div", { className: "umds-modal__close-wrapper", children: _jsx("button", { className: "umds-modal__close-button", onClick: (e) => handleClose(e), "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { size: "sm", icon: faXmark }) }) })) : null, _jsxs("div", { className: "umds-modal__content", children: [_jsxs("div", { className: "umds-modal__header umds-modal__header--feedback", children: [props.variant && props.variant !== "default" ? (_jsx("div", { className: `umds-modal__icon ${iconVariantClass()}`, children: _jsx(Icon, { customSize: "40px", icon: iconName() }) })) : null, _jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx(Text, { variant: "h5", weight: "bold", id: titleId(), children: props.title })) : null, props.description ? (_jsx(Text, { variant: "body2", color: "secondary", id: descriptionId(), children: props.description })) : null] })] }), _jsx(_Fragment, { children: props.children }), _jsxs("div", { className: "umds-modal__footer umds-modal__footer--feedback", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })] })) : null] })] }) })) : null }));
+    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { className: "umds-modal-overlay", onClick: (e) => handleOverlayClick(e) }), _jsxs("div", { role: "dialog", "aria-modal": "true", ref: dialogRef, "aria-label": nomeAcessivel(), "aria-labelledby": labelledBy(), "aria-describedby": describedBy(), tabIndex: -1, style: estiloDoDialogo(), onKeyDown: (event) => handleTrapKeydown(event), className: modalClasses(), children: [!ehFeedback() ? (_jsxs(_Fragment, { children: [ehSheet() ? (_jsx("div", { "aria-hidden": "true", className: "umds-modal__grabber", children: _jsx("span", { className: "umds-modal__grabber-bar" }) })) : null, _jsxs("div", { className: "umds-modal__header", children: [_jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx("span", { className: "umds-modal__title", id: titleId(), children: props.title })) : null, props.description ? (_jsx("span", { className: "umds-modal__subtitle", id: descriptionId(), children: props.description })) : null] }), _jsxs("div", { className: "umds-modal__header-actions", children: [temNormal() ? (_jsx("button", { type: "button", title: props.normalModeLabel || "Modo normal", "aria-label": props.normalModeLabel || "Modo normal", "aria-pressed": modoAtual === "normal", onClick: (event) => irParaNormal(), className: classeDoControle("normal"), children: _jsx(Icon, { customSize: "14px", icon: faWindowRestore }) })) : null, temExpandir() ? (_jsx("button", { type: "button", title: props.expandLabel || "Expandir", "aria-label": props.expandLabel || "Expandir", "aria-pressed": modoAtual === "expanded", onClick: (event) => irParaExpandido(), className: classeDoControle("expanded"), children: _jsx(Icon, { customSize: "14px", icon: faUpRightAndDownLeftFromCenter }) })) : null, temTelaCheia() ? (_jsx("button", { type: "button", title: props.fullscreenLabel || "Tela cheia", "aria-label": props.fullscreenLabel || "Tela cheia", "aria-pressed": modoAtual === "fullscreen", onClick: (event) => irParaTelaCheia(), className: classeDoControle("fullscreen"), children: _jsx(Icon, { customSize: "14px", icon: faExpand }) })) : null, temMinimizar() ? (_jsx("button", { type: "button", className: "umds-modal__ctrl", title: props.minimizeLabel || "Minimizar", "aria-label": props.minimizeLabel || "Minimizar", onClick: (e) => props.onMinimize?.(e), children: _jsx(Icon, { customSize: "14px", icon: faMinus }) })) : null, temControles() && !props.hideCloseButton ? (_jsx("span", { className: "umds-modal__ctrl-divider" })) : null, !props.hideCloseButton ? (_jsx("button", { type: "button", className: "umds-modal__ctrl umds-modal__ctrl--close", onClick: (e) => handleClose(e), title: props.closeLabel || "Fechar", "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { customSize: "16px", icon: faXmark }) })) : null] })] }), _jsx("div", { className: "umds-modal__body", children: _jsx(_Fragment, { children: props.children }) }), temRodape() ? (_jsxs("div", { className: "umds-modal__footer", children: [_jsx("div", { className: "umds-modal__footer-start", children: props.footerStart ? _jsx(_Fragment, { children: props.footerStart }) : null }), _jsxs("div", { className: "umds-modal__footer-end", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })) : null] })) : null, ehFeedback() ? (_jsxs(_Fragment, { children: [!props.hideCloseButton ? (_jsx("div", { className: "umds-modal__close-wrapper", children: _jsx("button", { className: "umds-modal__close-button", onClick: (e) => handleClose(e), "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { size: "sm", icon: faXmark }) }) })) : null, _jsxs("div", { className: "umds-modal__content", children: [_jsxs("div", { className: "umds-modal__header umds-modal__header--feedback", children: [props.variant && props.variant !== "default" ? (_jsx("div", { className: `umds-modal__icon ${iconVariantClass()}`, children: _jsx(Icon, { customSize: "40px", icon: iconName() }) })) : null, _jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx(Text, { variant: "h5", weight: "bold", id: titleId(), children: props.title })) : null, props.description ? (_jsx(Text, { variant: "body2", color: "secondary", id: descriptionId(), children: props.description })) : null] })] }), _jsx(_Fragment, { children: props.children }), _jsxs("div", { className: "umds-modal__footer umds-modal__footer--feedback", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })] })) : null] })] }) })) : null }));
 }
 export default Modal;

package/dist/components/MultiSelect/MultiSelect.css

@@ -37,7 +37,7 @@
   display: flex;
   align-items: center;
   background-color: var(--umds-semantic-color-background-white);
-  border: 1px solid var(--umds-semantic-color-neutral-light-down);
+  border: 1px solid var(--umds-semantic-field-border-default);
   border-radius: var(--umds-primitive-border-radius-sm);
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* era 8px 12px (protótipo --space-3) — snap 14/07 */
   min-height: var(--umds-semantic-field-height); /* 44px — Figma Size=Default (era 40px) */
@@ -378,6 +378,14 @@
   border-color: var(--umds-semantic-field-border-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-multiselect--readonly .umds-multiselect__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* O campo de busca precisa de indicador de foco — o painel foca ele ao abrir.
    Um outline no <input> desenhava um retângulo azul solto no meio do painel,
    porque o input não tem borda própria para o anel acompanhar.