@softize/opus 27.1.0 → 28.0.0

package/src/ui/components/primitives/icon-picker.tsx

@@ -7,10 +7,10 @@ import {
   Briefcase,
   Building2,
   Calendar,
+  Car,
   ChartBar,
   ChartLine,
   ChartPie,
-  Check,
   ChevronsUpDown,
   ClipboardList,
   Clock,
@@ -71,6 +71,7 @@ export const iconPickerIcons: Record<string, LucideIcon> = {
   briefcase: Briefcase,
   building: Building2,
   calendar: Calendar,
+  car: Car,
   "chart-bar": ChartBar,
   "chart-line": ChartLine,
   "chart-pie": ChartPie,
@@ -110,12 +111,111 @@ export const iconPickerIcons: Record<string, LucideIcon> = {
   zap: Zap,
 };
 
+/** Rótulos e termos de busca separados dos identificadores persistidos. */
+export const iconPickerSearch: Record<
+  string,
+  { label: string; keywords: string[] }
+> = {
+  car: { label: "Carro", keywords: ["veículo", "automóvel", "vendas"] },
+  activity: { label: "Atividade", keywords: ["pulso", "saúde"] },
+  banknote: { label: "Dinheiro", keywords: ["nota", "pagamento", "valor"] },
+  bell: { label: "Sino", keywords: ["alerta", "notificação"] },
+  box: { label: "Caixa", keywords: ["estoque", "produto"] },
+  briefcase: { label: "Maleta", keywords: ["trabalho", "negócio"] },
+  building: { label: "Edifício", keywords: ["empresa", "unidade", "prédio"] },
+  calendar: { label: "Calendário", keywords: ["agenda", "data", "evento"] },
+  "chart-bar": {
+    label: "Gráfico de barras",
+    keywords: ["relatório", "análise"],
+  },
+  "chart-line": {
+    label: "Gráfico de linhas",
+    keywords: ["evolução", "relatório"],
+  },
+  "chart-pie": {
+    label: "Gráfico de pizza",
+    keywords: ["percentual", "relatório"],
+  },
+  "clipboard-list": {
+    label: "Prancheta",
+    keywords: ["tarefas", "lista", "checklist"],
+  },
+  clock: { label: "Relógio", keywords: ["hora", "tempo", "prazo"] },
+  "credit-card": { label: "Cartão", keywords: ["crédito", "pagamento"] },
+  database: { label: "Banco de dados", keywords: ["base", "registros"] },
+  "file-text": { label: "Documento", keywords: ["página", "texto", "arquivo"] },
+  flag: { label: "Bandeira", keywords: ["marco", "sinalização"] },
+  folder: { label: "Pasta", keywords: ["diretório", "arquivos"] },
+  gauge: { label: "Medidor", keywords: ["velocidade", "desempenho"] },
+  globe: { label: "Globo", keywords: ["mundo", "público", "internet"] },
+  heart: { label: "Coração", keywords: ["favorito", "saúde"] },
+  layers: { label: "Camadas", keywords: ["coleção", "conjunto"] },
+  "layout-grid": { label: "Grade", keywords: ["cartões", "painel"] },
+  lightbulb: { label: "Lâmpada", keywords: ["ideia", "sugestão"] },
+  mail: {
+    label: "Envelope",
+    keywords: ["email", "e-mail", "correio", "mensagem"],
+  },
+  "map-pin": { label: "Localização", keywords: ["endereço", "mapa", "lugar"] },
+  "message-circle": {
+    label: "Conversa",
+    keywords: ["chat", "mensagem", "atendimento"],
+  },
+  "message-square": { label: "Mensagem", keywords: ["chat", "comentário"] },
+  package: { label: "Pacote", keywords: ["entrega", "produto", "encomenda"] },
+  phone: { label: "Telefone", keywords: ["ligação", "contato"] },
+  rocket: { label: "Foguete", keywords: ["lançamento", "inovação"] },
+  settings: { label: "Configurações", keywords: ["ajustes", "engrenagem"] },
+  "shopping-cart": { label: "Carrinho", keywords: ["compra", "venda"] },
+  star: { label: "Estrela", keywords: ["favorito", "destaque"] },
+  store: { label: "Loja", keywords: ["comércio", "unidade"] },
+  table: { label: "Tabela", keywords: ["planilha", "catálogo"] },
+  target: { label: "Alvo", keywords: ["meta", "objetivo"] },
+  "trending-down": { label: "Queda", keywords: ["redução", "tendência"] },
+  "trending-up": { label: "Crescimento", keywords: ["aumento", "tendência"] },
+  truck: {
+    label: "Caminhão",
+    keywords: ["transporte", "veículo", "logística"],
+  },
+  user: { label: "Pessoa", keywords: ["usuário", "cliente"] },
+  users: { label: "Pessoas", keywords: ["equipe", "grupo", "clientes"] },
+  wallet: { label: "Carteira", keywords: ["saldo", "financeiro"] },
+  wrench: { label: "Ferramenta", keywords: ["chave", "manutenção", "serviço"] },
+  zap: { label: "Raio", keywords: ["automação", "energia", "fluxo"] },
+};
+
+export interface IconCatalogEntry {
+  name: string;
+  label: string;
+  keywords: string[];
+}
+export interface IconCatalog {
+  load: () => Promise<IconCatalogEntry[]>;
+  render: (name: string, className: string) => React.ReactNode;
+}
+const IconCatalogContext = React.createContext<IconCatalog | null>(null);
+export function IconCatalogProvider({
+  catalog,
+  children,
+}: {
+  catalog: IconCatalog;
+  children: React.ReactNode;
+}) {
+  return (
+    <IconCatalogContext.Provider value={catalog}>
+      {children}
+    </IconCatalogContext.Provider>
+  );
+}
+
 export interface IconPickerProps {
   /** Nome do ícone selecionado (chave da paleta) — '' = nenhum. */
   value: string;
   onChange: (name: string) => void;
   /** Paleta nome → componente. Default: `iconPickerIcons` (curada). */
   icons?: Record<string, LucideIcon>;
+  /** Rótulos e sinônimos para busca; não alteram o valor persistido. */
+  searchTerms?: typeof iconPickerSearch;
   placeholder?: string;
   disabled?: boolean;
   className?: string;
@@ -133,7 +233,8 @@ export interface IconPickerProps {
 export function IconPicker({
   value,
   onChange,
-  icons = iconPickerIcons,
+  icons: providedIcons,
+  searchTerms = iconPickerSearch,
   placeholder = "Selecione um ícone…",
   disabled,
   className,
@@ -141,11 +242,80 @@ export function IconPicker({
   "aria-invalid": ariaInvalid,
   "aria-describedby": ariaDescribedBy,
 }: IconPickerProps): React.ReactElement {
+  const contextCatalog = React.useContext(IconCatalogContext);
+  const catalog = providedIcons ? null : contextCatalog;
+  const icons = providedIcons ?? iconPickerIcons;
+  const [entries, setEntries] = React.useState<IconCatalogEntry[] | null>(null);
+  const [loadError, setLoadError] = React.useState(false);
+  const [attempt, setAttempt] = React.useState(0);
+  const [query, setQuery] = React.useState("");
+  const [limit, setLimit] = React.useState(64);
+  const listRef = React.useRef<HTMLDivElement>(null);
   const [open, setOpen] = React.useState(false);
-  const Current = value !== "" ? icons[value] : undefined;
+  const Current = Object.hasOwn(icons, value) ? icons[value] : undefined;
+  const [active, setActive] = React.useState("");
+  const loadedCatalog = React.useRef<typeof catalog>(null);
+  React.useEffect(() => {
+    if (!open || !catalog || loadedCatalog.current === catalog) return;
+    setEntries(null);
+    let cancelled = false;
+    setLoadError(false);
+    catalog
+      .load()
+      .then((items) => {
+        if (!cancelled) {
+          loadedCatalog.current = catalog;
+          setEntries(items);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoadError(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, catalog, attempt]);
+  const normalize = (text: string) =>
+    text
+      .normalize("NFD")
+      .replace(/\p{Diacritic}/gu, "")
+      .toLocaleLowerCase("pt-BR");
+  const available = catalog
+    ? loadedCatalog.current === catalog
+      ? (entries ?? [])
+      : []
+    : Object.keys(icons).map((name) => ({
+        name,
+        label: searchTerms[name]?.label ?? name,
+        keywords: searchTerms[name]?.keywords ?? [],
+      }));
+  const filtered = available.filter((entry) =>
+    normalize(query)
+      .trim()
+      .split(/\s+/)
+      .every((term) =>
+        normalize(
+          [entry.name, entry.label, ...entry.keywords].join(" "),
+        ).includes(term),
+      ),
+  );
+  const renderIcon = (name: string, className: string) => {
+    if (catalog) return catalog.render(name, className);
+    const Icon = Object.hasOwn(icons, name) ? icons[name] : undefined;
+    return Icon ? <Icon className={className} aria-hidden="true" /> : null;
+  };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (next) {
+          setQuery("");
+          setLimit(64);
+        }
+      }}
+    >
       <PopoverTrigger asChild>
         <button
           type="button"
@@ -164,11 +334,13 @@ export function IconPicker({
             className,
           )}
         >
-          {Current !== undefined ? (
+          {(catalog && value) || Current !== undefined ? (
             <>
-              <Current className="size-4 shrink-0" />
-              <span data-slot="icon-picker-value" className="truncate">
-                {value}
+              {renderIcon(value, "size-4 shrink-0")}
+              <span data-slot="icon-picker-value" className="sr-only">
+                {available.find((entry) => entry.name === value)?.label ??
+                  searchTerms[value]?.label ??
+                  "Ícone selecionado"}
               </span>
             </>
           ) : (
@@ -179,33 +351,98 @@ export function IconPicker({
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        className="pointer-events-auto w-(--radix-popover-trigger-width) p-0"
+        className="pointer-events-auto w-96 max-w-[calc(100vw-2rem)] p-0"
+        onWheel={(event) => event.stopPropagation()}
+        onTouchMove={(event) => event.stopPropagation()}
       >
-        <Command>
-          <CommandInput placeholder="Buscar ícone…" />
-          <CommandList data-slot="icon-picker-list" className="max-h-60">
-            <CommandEmpty>Nada encontrado.</CommandEmpty>
-            <CommandGroup>
-              {Object.entries(icons).map(([name, Icon]) => (
-                <CommandItem
-                  key={name}
-                  data-slot="icon-picker-item"
-                  value={name}
-                  onSelect={() => {
-                    onChange(name === value ? "" : name);
-                    setOpen(false);
-                  }}
-                >
-                  <Icon className="size-4" />
-                  <span className="truncate">{name}</span>
-                  <Check
-                    className={cn(
-                      "ml-auto size-4 shrink-0",
-                      value === name ? "opacity-100" : "opacity-0",
-                    )}
-                  />
-                </CommandItem>
-              ))}
+        <Command
+          shouldFilter={false}
+          value={active}
+          onValueChange={setActive}
+          onKeyDown={(event) => {
+            const step =
+              event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+            if (!step) return;
+            event.preventDefault();
+            const items = Array.from(
+              event.currentTarget.querySelectorAll<HTMLElement>(
+                "[cmdk-item]:not([hidden])",
+              ),
+            );
+            const index = items.findIndex(
+              (item) => item.dataset.value === active,
+            );
+            const next =
+              items[Math.max(0, Math.min(items.length - 1, index + step))];
+            if (next) {
+              setActive(next.dataset.value ?? "");
+              next.scrollIntoView({ block: "nearest" });
+            }
+          }}
+        >
+          <CommandInput
+            placeholder="Buscar ícone…"
+            value={query}
+            onValueChange={(next) => {
+              if (listRef.current) listRef.current.scrollTop = 0;
+              setQuery(next);
+              setLimit(64);
+            }}
+          />
+          {catalog && !entries && !loadError ? (
+            <div role="status" className="p-4 text-sm">
+              Carregando ícones…
+            </div>
+          ) : loadError ? (
+            <div role="alert" className="p-4 text-sm">
+              Não foi possível carregar os ícones.{" "}
+              <button
+                type="button"
+                className="underline"
+                onClick={() => setAttempt((value) => value + 1)}
+              >
+                Tentar novamente
+              </button>
+            </div>
+          ) : null}
+          <CommandList
+            ref={listRef}
+            onScroll={(event) => {
+              const list = event.currentTarget;
+              if (
+                list.scrollHeight - list.scrollTop - list.clientHeight <=
+                list.clientHeight / 2
+              ) {
+                setLimit((count) => Math.min(count + 64, filtered.length));
+              }
+            }}
+            data-slot="icon-picker-list"
+            className="max-h-60 overscroll-contain"
+          >
+            {!loadError && (!catalog || entries) ? (
+              <CommandEmpty>Nada encontrado.</CommandEmpty>
+            ) : null}
+            <CommandGroup className="[&_[cmdk-group-items]]:grid [&_[cmdk-group-items]]:grid-cols-8 [&_[cmdk-group-items]]:gap-1">
+              {filtered.slice(0, limit).map(({ name, label }) => {
+                return (
+                  <CommandItem
+                    key={name}
+                    data-slot="icon-picker-item"
+                    value={name}
+                    aria-label={label}
+                    data-current={name === value}
+                    className="h-10 justify-center p-0 data-[current=true]:ring-1 data-[current=true]:ring-inset data-[current=true]:ring-primary"
+                    onSelect={() => {
+                      onChange(name === value ? "" : name);
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="flex h-full w-full items-center justify-center">
+                      {renderIcon(name, "size-5")}
+                    </span>
+                  </CommandItem>
+                );
+              })}
             </CommandGroup>
           </CommandList>
         </Command>

package/src/ui/components/primitives/pagination.tsx

@@ -3,7 +3,7 @@ import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-re
 
 import { cn } from '../../lib/cn.ts'
 import { buttonVariants, type ButtonProps } from './button.tsx'
-import { controlSquare, type ControlIconSize } from './control.ts'
+import { controlBase, controlSquare, type ControlIconSize } from './control.ts'
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -46,12 +46,13 @@ export interface PaginationLinkProps extends Omit<React.ComponentProps<'a'>, 'ch
 
 /**
  * Um link de página. Altura fixa, largura mínima quadrada e largura que cresce com o
- * número (`min-w-9 w-auto px-2`, dígitos tabulares): 5726 e 5727 nunca se sobrepõem. Com
+ * número (largura mínima igual à altura do tamanho escolhido, dígitos tabulares): 5726 e 5727 nunca se sobrepõem. Com
  * `href` é `<a>`; sem `href` é `<button type="button">`, que preserva foco e teclado no
- * modo controlado. Ajuste a escala por `className` (ex.: `h-7 min-w-7 text-xs`).
+ * modo controlado. Ajuste a escala por `size`; a largura mínima acompanha a altura do degrau.
  */
 function PaginationLink({ className, isActive, page, disabled, href, size = 'default', children, ...props }: PaginationLinkProps) {
   const square = typeof size === 'string' && size.startsWith('icon')
+  const minWidth = { xs: 'min-w-6', sm: 'min-w-8', default: 'min-w-9', lg: 'min-w-10' }[controlBase(size)]
   const shared = {
     'aria-current': isActive ? ('page' as const) : undefined,
     'aria-label': props['aria-label'] ?? (page !== undefined ? `Página ${page}` : undefined),
@@ -61,7 +62,7 @@ function PaginationLink({ className, isActive, page, disabled, href, size = 'def
       buttonVariants({ variant: isActive ? 'outline' : 'ghost', size }),
       // Número: a largura mínima é quadrada e o conteúdo manda no resto. Escala `icon*`
       // fica quadrada de verdade (sem `has-[>svg]:px-*` do `default`).
-      !square && 'h-9 w-auto min-w-9 px-2 tabular-nums',
+      !square && cn('w-auto px-2 tabular-nums', minWidth),
       className,
     ),
   }

package/src/ui/components/primitives/tabs.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
 
 import { cn } from "../../lib/cn.ts";
+import {
+  structuralBodyRhythm,
+  structuralRegionGap,
+} from "../patterns/surface-anatomy.ts";
 import { controlHeight, type ControlSize } from "./control.ts";
 
 // Divergência da casa (ejetado): o Tabs ganhou `size` — Button e Select têm `sm`, o Tabs
@@ -45,8 +49,10 @@ function Tabs({
               data-framed={framed}
               orientation={orientation}
               className={cn(
-                "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+                "group/tabs flex data-[orientation=horizontal]:flex-col",
+                structuralRegionGap,
                 framed && "overflow-hidden rounded-xl border",
+                framed && orientation === "vertical" && "p-4",
                 className,
               )}
               {...props}
@@ -192,10 +198,17 @@ function TabsPanel({
   className,
   ...props
 }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  const framed = React.useContext(TabsFramedContext);
+  const orientation = React.useContext(TabsOrientationContext);
   return (
     <TabsPrimitive.Content
       data-slot="tabs-panel"
-      className={cn("flex-1 outline-none", className)}
+      className={cn(
+        "flex-1 outline-none data-[state=inactive]:hidden",
+        structuralBodyRhythm,
+        framed && orientation === "horizontal" && "px-4 pb-4",
+        className,
+      )}
       {...props}
     />
   );

package/src/ui/components/primitives/toggle.tsx

@@ -19,7 +19,7 @@ const toggleVariants = cva(
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent text-muted-foreground hover:bg-interaction-hover hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-interaction-selected data-[state=on]:text-foreground",
+          "border border-input bg-transparent text-muted-foreground hover:bg-interaction-hover/50 hover:text-foreground active:bg-interaction-pressed data-[state=on]:bg-interaction-selected/50 data-[state=on]:text-foreground",
       },
       // Alturas da escala de control.ts (`sm` = o mesmo h-8 de Button e Select).
       size: {

package/src/ui/docs/content/action-list.md

@@ -536,7 +536,7 @@ render(
 | `text`     | `{ fields }` — liga a busca; convenção: param `q` no input. Ela aparece depois dos filtros inline e imediatamente antes do acesso aos filtros avançados. A busca participa da contagem de controles inline: com mais de um controle, a barra exibe as labels; quando ela é o único recorte, sua label é omitida.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 | `sort`     | `{ fields, default }` — ordenação inicial; header ordenável escreve `sort: 'chave:dir'`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `periods`  | `{ value, label, default? }[]` — o controle de período (presets + Personalizado com calendário); `default: true` marca o preset inicial, senão vale o primeiro; materializa em `from`/`to` no input.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `grouping` | `{ fields }` — dimensões enumeráveis disponíveis em **Agrupar por**. Cada nome referencia um filtro `select` ou `lookup` com até 12 opções declaradas ou resolvidas por `filterOptions`. Não define agrupamento inicial.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `grouping` | `{ fields }` — dimensões enumeráveis disponíveis em **Agrupar por**. Cada nome referencia um filtro `select` ou `lookup` com até 12 opções declaradas ou resolvidas por `filterOptions`. Não define agrupamento inicial.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
 ## useListAction
 
@@ -547,6 +547,14 @@ declarativo (`items`, `total`, `error`, `isLoading`, `isFetching`, `refetch`) so
 chamar a action. `options.enabled` suspende a consulta enquanto for `false`; sem a opção, vale
 `true`.
 
+## Controles da visualização
+
+Controles específicos da visualização ativa, como a orientação de um comparativo, usam
+`viewControls`. O slot fica imediatamente após o seletor de visualização. As configurações da lista
+aparecem antes desse conjunto. O consumidor controla seu estado e quando exibi-lo. Isso mantém a
+configuração visual junto à escolha da visualização, sem deslocar ações sobre o recorte
+para fora de `toolbarActions`.
+
 ## Propriedades de ActionList
 
 | Propriedade             | Tipo                                                                                                        | Padrão                                                                                                                                | Descrição                                                                                                                                                                                                     |
@@ -555,7 +563,7 @@ chamar a action. `options.enabled` suspende a consulta enquanto for `false`; sem
 | `input`                 | `TInput`                                                                                                    |                                                                                                                                       | O escopo base, como `{ workspaceId }`. A toolbar acrescenta busca, filtros e paginação sem sobrescrever essas chaves.                                                                                         |
 | `layout`                | `'flow' \| 'fill'`                                                                                          | `'fill'` como filha direta de `PageBody`, `SurfaceBody` ou do corpo da `Presentation` em uma página `fill`; `'flow'` nos demais casos | Em `fill`, ocupa a altura de um ancestral limitado e rola somente a região de resultados; na tabela, o cabeçalho fica fixo. Sem ancestral limitado, equivale a `flow`.                                        |
 | `cells`                 | `Record<string, (item) => ReactNode>`                                                                       |                                                                                                                                       | Células custom por cima das colunas do contrato (chave = column.key).                                                                                                                                         |
-| `filterOptions`         | `Record<string, SelectOption[]>`                                                                            |                                                                                                                                       | Opções de runtime para filtros select/lookup. Em uma dimensão de agrupamento, a coleção precisa ser completa e ter de 1 a 12 itens.                                                                            |
+| `filterOptions`         | `Record<string, SelectOption[]>`                                                                            |                                                                                                                                       | Opções de runtime para filtros select/lookup. Em uma dimensão de agrupamento, a coleção precisa ser completa e ter de 1 a 12 itens.                                                                           |
 | `filterDefaults`        | `Record<string, string>`                                                                                    |                                                                                                                                       | Valores de repouso aplicados à consulta; o `X` só aparece quando o filtro diverge deles e retorna a eles.                                                                                                     |
 | `filterIcons`           | `Record<string, ReactNode>`                                                                                 |                                                                                                                                       | Ícones leading dos filtros, indexados pelo nome declarado no contrato.                                                                                                                                        |
 | `advancedFilters`       | `{ columns?: 1 \| 2 \| 3; sectionIcons?: Record<string, ReactNode>; sectionVariant?: 'plain' \| 'framed' }` | `{ columns: 1, sectionVariant: 'plain' }`                                                                                             | Define as colunas, os ícones e o tratamento dos grupos; o Opus deriva a largura correspondente do diálogo.                                                                                                    |
@@ -575,5 +583,6 @@ chamar a action. `options.enabled` suspende a consulta enquanto for `false`; sem
 | `errorMessage`          | `string`                                                                                                    | `'Não foi possível carregar.'`                                                                                                        | Título do aviso de erro; a ação de tentar de novo refaz a consulta.                                                                                                                                           |
 | `retryLabel`            | `string`                                                                                                    | `'Tentar de novo'`                                                                                                                    | Nome acessível e tooltip da ação de recuperação.                                                                                                                                                              |
 | `onRowClick`            | `(item: TItem) => void`                                                                                     |                                                                                                                                       | Clique na linha (ex.: navegar para o detalhe) — só na tabela.                                                                                                                                                 |
+| `viewControls`          | `ReactNode`                                                                                                 |                                                                                                                                       | Controles da visualização ativa, imediatamente após o seletor de visualização.                                                                                                                                |
 | `toolbarActions`        | `ReactNode`                                                                                                 |                                                                                                                                       | Operações ligadas ao recorte atual, no fim da barra e separadas do grupo de controles. Os nós são renderizados como recebidos: nome acessível e tooltip de uma ação somente com ícone ficam com o consumidor. |
 | `rowActions`            | `(item: TItem) => ReactNode`                                                                                |                                                                                                                                       | Ações por linha (coluna final, à direita). A partir de duas, entram em um grupo com intervalo compacto; uma só fica solta, sem grupo. Cliques ali não disparam o `onRowClick`.                                |

package/src/ui/docs/content/button.md

@@ -32,22 +32,22 @@ há texto visível. O glifo dentro do controle acompanha o tamanho (0.875rem em
 | Nome      | Medida  | Uso                                                                                                                                   |
 | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
 | `xs`      | 1.5rem  | Ação dentro de um campo (`InputGroupButton`).                                                                                         |
-| `sm`      | 2rem    | Operação densa em toolbar ou dentro de uma seção, ao lado de `Select` e `Tabs` `sm`.                                                  |
-| `default` | 2.25rem | Decisão da superfície: header de Page, criação no cabeçalho de uma coleção e footer de Dialog ou Drawer; é também a linha de `Input`. |
+| `sm`      | 2rem    | Headers, criação de coleções e operações densas de toolbar ou seção.                                                  |
+| `default` | 2.25rem | Footers de Dialog e Drawer e controles comuns; é também a linha de `Input`. |
 | `lg`      | 2.5rem  | Chamada principal com mais área de toque.                                                                                             |
 | `icon-xs` | 1.5rem  | Ação só de ícone dentro de um campo ou de uma linha densa; é o quadrado de `ActionTrigger` com `icon`.                                |
-| `icon-sm` | 1.75rem | Ação só de ícone em composições compactas que precisam de mais presença; também é o quadrado das setas do pager de `ActionList`.      |
+| `icon-sm` | 2rem | Ação só de ícone em composições compactas que precisam de mais presença; também é o quadrado das setas do pager de `ActionList`.      |
 | `icon`    | 2.25rem | Ação só de ícone na linha padrão.                                                                                                     |
 | `icon-lg` | 2.5rem  | Ação só de ícone ao lado de um `lg`.                                                                                                  |
 
 Escolha o tamanho pela região, não pela importância visual: `variant` e `context` resolvem a
-hierarquia da ação. Headers de Page, a criação no cabeçalho de uma coleção e footers de
-[`Dialog`](/ui/dialog) e [`Drawer`](/ui/drawer) usam `default`; a criação de uma coleção é um botão textual, sem
-ícone, como mostra [`Surface`](/ui/surface). Operações densas de toolbar ou de seção usam `sm`;
+hierarquia da ação. Headers de Page, Dialog, Drawer e Surface usam `sm`/`icon-sm`. A criação
+no cabeçalho de uma coleção usa `sm` textual, sem ícone. Footers de
+[`Dialog`](/ui/dialog) e [`Drawer`](/ui/drawer) conservam `default`. Operações densas de toolbar ou de seção usam `sm`;
 ações dentro de linha ou célula usam `xs` ou `icon-xs`. Assim a mesma decisão mantém a mesma altura
 mesmo quando uma superfície troca uma ação secundária por uma primária.
 
-O retorno de `PageBack` usa `icon`. O fechamento de Dialog e Drawer é um `CloseButton` circular
+O retorno de `PageBack` usa `icon-sm`. O fechamento de Dialog e Drawer é um `CloseButton` circular
 (`shape="pill"`), `neutral` e `subtle`, no quadrado `icon-sm` por padrão, ou `icon-xs` com
 `closeSize="xs"`.