@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,32 @@
+import './Kbd.css';
+/**
+ * Kbd — uma tecla, ou uma combinação de teclas, num `<kbd>`.
+ *
+ * Uma tecla: `<Kbd>Esc</Kbd>`. Uma combinação: `keys` (`["Ctrl", "Shift", "P"]`),
+ * que desenha uma caixa por tecla com o `separator` entre elas (`+` por padrão).
+ * A fonte é a monoespaçada do DS (`--umds-semantic-font-family-mono`), a caixa é
+ * cinza com borda e uma sombra de base, como uma tecla de verdade.
+ *
+ * Semântica: `<kbd>` é o elemento HTML de "entrada de teclado", e um `<kbd>`
+ * dentro de outro é a forma de dizer "combinação de teclas". O leitor de tela lê
+ * "Ctrl + Shift + P" (o separador é texto, não desenho).
+ * @property {string[]} keys - Teclas de uma combinação, em ordem. Sem `keys`, vale o conteúdo (uma tecla)
+ * @property {string} separator - Texto entre as teclas de uma combinação (padrão "+")
+ * @property {string} size - 'sm' | 'md' (padrão)
+ * @property {string} className - Classes CSS adicionais
+ * @quandoUsar Mostrar um atalho de teclado ou a tecla que a pessoa deve apertar: painel de atalhos, dica de campo, instrução.
+ * @quandoNaoUsar Para botão, use `Button`. Para trecho de código, use `CodeBlock`.
+ */
+export interface KbdProps {
+    keys?: string[];
+    separator?: string;
+    size?: "sm" | "md";
+    className?: string;
+    id?: string;
+    style?: any;
+    [key: string]: any;
+    /** Uma tecla (quando não há `keys`). */
+    children?: any;
+}
+declare function Kbd(props: KbdProps): import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,40 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Kbd.css';
+function Kbd(props) {
+    function isSingle() {
+        return !(props.keys && props.keys.length > 0);
+    }
+    function keyList() {
+        return props.keys || [];
+    }
+    function classes() {
+        const combinacao = !!props.keys && props.keys.length > 0;
+        return [
+            combinacao ? "umds-kbd-combo" : "umds-kbd",
+            `umds-kbd--${props.size || "md"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function separatorText() {
+        return props.separator || "+";
+    }
+    function isLast(index) {
+        return index === keyList().length - 1;
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "title") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs("kbd", { id: props.id, ...htmlAttrs(), className: classes(), children: [isSingle() ? _jsx(_Fragment, { children: props.children }) : null, keyList()?.map((tecla, posicao) => (_jsxs("span", { className: "umds-kbd-combo__item", children: [_jsx("kbd", { className: "umds-kbd umds-kbd--inner", children: tecla }), !isLast(posicao) ? (_jsx("span", { className: "umds-kbd-combo__separator", children: separatorText() })) : null] }, posicao)))] }));
+}
+export default Kbd;

package/dist/components/List/List.css

@@ -0,0 +1,136 @@
+/* ─────────────────────────────────────────────
+   LIST / LIST ITEM
+   Lista semântica (ul/ol > li) de linhas clicáveis com conteúdo livre.
+   Só tokens do DS. Sem equivalente (mantido como literal):
+     padding vertical de 10px do CrisDoc → usa spacing-nano (8px).
+───────────────────────────────────────────── */
+
+/* ── List ── */
+.umds-list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  box-sizing: border-box;
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+ul.umds-list,
+ol.umds-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.umds-list--gap-none   { gap: 0; }
+.umds-list--gap-micro  { gap: var(--umds-primitive-spacing-micro); }
+.umds-list--gap-quarck { gap: var(--umds-primitive-spacing-quarck); }
+.umds-list--gap-nano   { gap: var(--umds-primitive-spacing-nano); }
+.umds-list--gap-mini   { gap: var(--umds-primitive-spacing-mini); }
+.umds-list--gap-xxxs   { gap: var(--umds-primitive-spacing-xxxs); }
+
+/* Estado vazio: o miolo da lista troca de conteúdo; quem rodeia não muda. */
+.umds-list--empty {
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── <li> que envolve a linha ── */
+.umds-list__item {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+/* ── Linha ── */
+.umds-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  width: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  border: 0;
+  border-radius: var(--umds-primitive-border-radius-sm); /* 8px */
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  transition: background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-list-item--interactive {
+  cursor: pointer;
+}
+
+.umds-list-item--interactive:hover {
+  background: var(--umds-semantic-color-background-light);
+}
+
+.umds-list-item--interactive:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px; /* dentro da linha: o anel não é cortado por overflow do pai */
+}
+
+/* ── Selecionado ── */
+.umds-list-item--selected {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+.umds-list-item--selected.umds-list-item--interactive:hover {
+  background: color-mix(
+    in srgb,
+    var(--umds-semantic-color-primary-light) 85%,
+    var(--umds-semantic-color-background-white)
+  );
+}
+
+/* ── Desabilitado ── */
+.umds-list-item--disabled,
+.umds-list-item--disabled .umds-list-item__subtitle,
+.umds-list-item--disabled .umds-list-item__meta {
+  color: var(--umds-semantic-color-neutral-dark-up);
+}
+
+.umds-list-item--disabled,
+.umds-list-item--disabled.umds-list-item--interactive:hover {
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* ── Anatomia ── */
+.umds-list-item__start,
+.umds-list-item__end {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  align-self: center;
+}
+
+.umds-list-item__end {
+  margin-left: auto;
+}
+
+.umds-list-item__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-micro); /* 2px */
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.umds-list-item__title {
+  display: block;
+  color: inherit;
+}
+
+.umds-list-item__subtitle,
+.umds-list-item__meta {
+  display: block;
+  color: var(--umds-semantic-color-neutral-dark-down);
+}

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

@@ -0,0 +1,82 @@
+import './List.css';
+/** Espaço entre as linhas, na escala oficial do DS. `none` cola as linhas. */
+export type ListGap = "none" | "micro" | "quarck" | "nano" | "mini" | "xxxs";
+/** Elemento da lista: `ul` (padrão) ou `ol` quando a ordem importa. */
+/** Espaço entre as linhas, na escala oficial do DS. `none` cola as linhas. */
+/** Elemento da lista: `ul` (padrão) ou `ol` quando a ordem importa. */
+export type ListTag = "ul" | "ol";
+/**
+ * List — agrupa `ListItem` numa lista semântica (`ul`/`ol` com `li`) e traz o
+ * estado vazio dentro dela.
+ *
+ * Quando não há itens, passe `isEmpty`: a lista troca os itens por um
+ * `EmptyState` (`emptyTitle`, `emptyDescription`, `emptyIcon`, `emptyActionLabel`
+ * com `onEmptyAction`) ou, para um conteúdo próprio, pelo slot `empty`. Só o
+ * miolo troca: o título do cartão, a busca, os filtros e a paginação ao redor
+ * continuam montados, e o estado vazio é anunciado ao leitor de tela
+ * (`role="status"`). `isEmpty` é uma decisão sua, porque a lista não conta
+ * filhos: `:is-empty="!itens.length"`.
+ *
+ * A lista precisa de nome: passe `ariaLabel` (ou `ariaLabelledby`, apontando
+ * para o título visível). Sem isso o leitor de tela anuncia "lista, 5 itens"
+ * sem dizer de quê.
+ *
+ * `ul` e `ol` saem sem marcador, margem e recuo, com `role="list"` (o Safari
+ * tira a semântica de lista de `list-style: none`).
+ * @property {string} as - Elemento: 'ul' (padrão) | 'ol'
+ * @property {string} gap - Espaço entre as linhas, na escala do DS ('none' cola)
+ * @property {string} ariaLabel - Nome acessível da lista
+ * @property {string} ariaLabelledby - Id do título visível que nomeia a lista
+ * @property {boolean} isEmpty - Sem itens: mostra o estado vazio no lugar das linhas
+ * @property {string} emptyTitle - Título do estado vazio (padrão: "Nenhum item encontrado")
+ * @property {string} emptyDescription - Texto de apoio do estado vazio
+ * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto do Font Awesome)
+ * @property {string} emptySize - Tamanho do estado vazio: 'sm' (padrão, compacto) | 'md' | 'lg'
+ * @property {string} emptyActionLabel - Rótulo do botão do estado vazio (junto de onEmptyAction)
+ * @property {function} onEmptyAction - Callback do botão do estado vazio
+ * @property {any} empty - Slot `empty`: conteúdo próprio no lugar do EmptyState
+ * @property {string} className - Classes CSS adicionais
+ * @slot empty - Conteúdo do estado vazio (substitui o EmptyState padrão).
+ * @quandoUsar Qualquer lista de linhas clicáveis (`ListItem`) ou de itens simples que pode ficar sem resultado: documentos não lidos, notificações, resultados de busca. Resolve a semântica de lista e o "nada por aqui" num lugar só.
+ * @quandoNaoUsar Para dados tabulares comparados coluna a coluna, use `DataTable` (que já tem o próprio estado vazio). Para só empilhar blocos com espaçamento, sem semântica de lista, use `Stack`. Para um estado vazio que ocupa a tela inteira (sem lista), use `EmptyState` direto.
+ */
+/** Espaço entre as linhas, na escala oficial do DS. `none` cola as linhas. */
+/** Elemento da lista: `ul` (padrão) ou `ol` quando a ordem importa. */
+export interface ListProps {
+    /** Elemento da lista. @default 'ul' */
+    as?: ListTag;
+    /** Espaço entre as linhas, na escala oficial (`none` cola). @default 'quarck' */
+    gap?: ListGap;
+    /** Nome acessível da lista. */
+    ariaLabel?: string;
+    /** Id do título visível que nomeia a lista. */
+    ariaLabelledby?: string;
+    /** Sem itens: mostra o estado vazio no lugar das linhas. @default false */
+    isEmpty?: boolean;
+    /** Título do estado vazio. @default 'Nenhum item encontrado' */
+    emptyTitle?: string;
+    /** Texto de apoio do estado vazio. */
+    emptyDescription?: string;
+    /** Ícone do estado vazio: o objeto importado do Font Awesome. */
+    emptyIcon?: IconProp;
+    /** Tamanho do estado vazio. @default 'sm' */
+    emptySize?: "sm" | "md" | "lg";
+    /** Rótulo do botão do estado vazio (exibido junto de `onEmptyAction`). */
+    emptyActionLabel?: string;
+    /** Chamado no botão do estado vazio. */
+    onEmptyAction?: () => void;
+    /** Conteúdo próprio do estado vazio. No Vue, slot `empty`. */
+    empty?: any;
+    /** Classes CSS adicionais. */
+    className?: string;
+    /** ID HTML do elemento raiz. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento raiz (style, data-*…). */
+    style?: any;
+    [key: string]: any;
+    /** As linhas: `ListItem` (ou `li`). */
+    children?: any;
+}
+import type { IconProp } from "../Icon/Icon";
+declare function List(props: ListProps): import("react/jsx-runtime").JSX.Element;
+export default List;

package/dist/components/List/List.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './List.css';
+import EmptyState from "../EmptyState/EmptyState";
+function List(props) {
+    function elementTag() {
+        return props.as || "ul";
+    }
+    function showEmpty() {
+        return !!props.isEmpty;
+    }
+    function showItems() {
+        return !props.isEmpty;
+    }
+    function classes() {
+        return [
+            "umds-list",
+            `umds-list--gap-${props.gap || "quarck"}`,
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function emptyClasses() {
+        return ["umds-list umds-list--empty", props.className]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function emptyTitleText() {
+        return props.emptyTitle || "Nenhum item encontrado";
+    }
+    function emptyActionProps() {
+        if (!props.onEmptyAction)
+            return {};
+        return {
+            actionLabel: props.emptyActionLabel,
+            onAction: props.onEmptyAction,
+        };
+    }
+    function emptySizeValue() {
+        return props.emptySize || "sm";
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 || chave === "style") {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs(_Fragment, { children: [showEmpty() ? (_jsx("div", { role: "status", id: props.id, ...htmlAttrs(), className: emptyClasses(), children: _jsx(_Fragment, { children: props.empty || (_jsx(EmptyState, { icon: props.emptyIcon, title: emptyTitleText(), description: props.emptyDescription, size: emptySizeValue(), ...emptyActionProps() })) }) })) : null, showItems() && elementTag() === "ul" ? (_jsx("ul", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null, showItems() && elementTag() === "ol" ? (_jsx("ol", { role: "list", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledby, ...htmlAttrs(), className: classes(), children: _jsx(_Fragment, { children: props.children }) })) : null] }));
+}
+export default List;

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

@@ -375,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,9 +27,30 @@ 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";
+    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.
@@ -79,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