@softize/opus 19.0.0 → 20.0.0

package/src/ui/components/patterns/surface-anatomy.ts

@@ -9,7 +9,8 @@
  * Dois layouts, e cada um é um pacote indivisível:
  *
  * - `continuous` — sem divisores. O ritmo separa: o header se aproxima do corpo e a
- *   última região fecha o espaço de baixo. É o card de leitura.
+ *   última região — seja ela o header, o body ou o footer — fecha o espaço de baixo com
+ *   o mesmo respiro do topo. É o card de leitura.
  * - `sectioned` — regiões simétricas, com divisor entre as que forem adjacentes. É o
  *   modal, o drawer e o painel.
  *
@@ -18,7 +19,14 @@
  * é mais folgado que um painel de operação.
  */
 
-import { createContext, useContext } from "react";
+import {
+  createContext,
+  createElement,
+  useContext,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { FillBoundary } from "./fill-region.ts";
 
 export type SurfaceFamily = "card" | "dialog" | "drawer" | "pane";
 export type SurfaceLayout = "continuous" | "sectioned";
@@ -76,9 +84,11 @@ export const surfaceAnatomy: Record<SurfaceFamily, FamilyAnatomy> = {
   card: {
     regions: {
       // O `pb-3` do header e do body encurtam a distância até a região seguinte; quando
-      // o body é a última região, ele reassume o respiro de baixo (`[&:last-child]:pb-5`).
+      // a região é a última, ela reassume o respiro de baixo (`[&:last-child]:pb-5`) —
+      // inclusive o header sozinho, que sem isso fecharia o card mais apertado embaixo
+      // do que em cima.
       continuous: {
-        header: "px-5 pt-5 pb-3",
+        header: "px-5 pt-5 pb-3 [&:last-child]:pb-5",
         body: "px-5 py-3 [&:last-child]:pb-5 [&:first-child]:pt-5",
         footer: "px-5 pt-3 pb-5",
       },
@@ -95,7 +105,7 @@ export const surfaceAnatomy: Record<SurfaceFamily, FamilyAnatomy> = {
   dialog: {
     regions: {
       continuous: {
-        header: "p-4 pb-2",
+        header: "p-4 pb-2 [&:last-child]:pb-4",
         body: "p-4 py-2 [&:last-child]:pb-4 [&:first-child]:pt-4",
         footer: "p-4 pt-2",
       },
@@ -112,7 +122,7 @@ export const surfaceAnatomy: Record<SurfaceFamily, FamilyAnatomy> = {
   drawer: {
     regions: {
       continuous: {
-        header: "p-4 pb-2",
+        header: "p-4 pb-2 [&:last-child]:pb-4",
         body: "p-4 py-2 [&:last-child]:pb-4 [&:first-child]:pt-4",
         footer: "p-4 pt-2",
       },
@@ -129,7 +139,7 @@ export const surfaceAnatomy: Record<SurfaceFamily, FamilyAnatomy> = {
   pane: {
     regions: {
       continuous: {
-        header: "flex shrink-0 items-center px-3 pt-3 pb-2",
+        header: "flex shrink-0 items-center px-3 pt-3 pb-2 [&:last-child]:pb-3",
         body: "p-3 [&:first-child]:pt-3",
         footer: "px-3 pt-2 pb-3",
       },
@@ -200,7 +210,24 @@ export const surfaceActionsClasses = "flex shrink-0 items-center gap-2";
  */
 const SurfaceLayoutContext = createContext<SurfaceLayout | null>(null);
 
-export const SurfaceLayoutProvider = SurfaceLayoutContext.Provider;
+/**
+ * Publica o layout da superfície para os slots. A superfície também interrompe a
+ * propagação de `layout="fill"` da página (ADR 0024): a altura do seu corpo é decisão dela,
+ * inclusive quando um portal a renderiza dentro de uma página `fill`.
+ */
+export function SurfaceLayoutProvider({
+  value,
+  children,
+}: {
+  value: SurfaceLayout;
+  children?: ReactNode;
+}): ReactElement {
+  return createElement(
+    SurfaceLayoutContext.Provider,
+    { value },
+    createElement(FillBoundary, null, children),
+  );
+}
 
 const familyDefaultLayout: Record<SurfaceFamily, SurfaceLayout> = {
   card: "continuous",

package/src/ui/components/patterns/trigger.tsx

@@ -66,6 +66,7 @@ export interface ActionTriggerProps<TInput, TData> {
     title: string;
     /** Conteúdo relevante apresentado antes das ações. */
     body?: ReactNode;
+    /** Texto do botão de confirmar. Default: `action.label`; o `label` do gatilho só sem ele. */
     actionLabel?: string;
     cancelLabel?: string;
   };
@@ -123,6 +124,15 @@ export function ActionTrigger<TInput, TData>({
 
   const buttonLabel =
     label ?? (typeof action.label === "string" ? action.label : action.name);
+  /**
+   * Botão de confirmar: `confirmLabel` do contrato, depois o `label` da action. O `label` do
+   * gatilho costuma ser um nome acessível que identifica o alvo ("Excluir Unidade Centro"); na
+   * pergunta o alvo já está no corpo, então ele só entra quando o contrato não tem rótulo.
+   */
+  const confirmActionLabel =
+    action.label !== undefined
+      ? msgText(action.label, buttonLabel)
+      : buttonLabel;
 
   // Prop sobrepõe; sem prop, o ConfirmSpec DECLARADO no contrato (action.confirm) vale.
   const spec = action.confirm;
@@ -135,7 +145,7 @@ export function ActionTrigger<TInput, TData>({
             ? { body: msgText(spec.message, "") }
             : {}),
           ...(spec.confirmLabel !== undefined
-            ? { actionLabel: msgText(spec.confirmLabel, buttonLabel) }
+            ? { actionLabel: msgText(spec.confirmLabel, confirmActionLabel) }
             : {}),
           ...(spec.cancelLabel !== undefined
             ? { cancelLabel: msgText(spec.cancelLabel, "Cancelar") }
@@ -248,7 +258,7 @@ export function ActionTrigger<TInput, TData>({
                 busy={isLoading}
                 onClick={fire}
               >
-                {confirm.actionLabel ?? buttonLabel}
+                {confirm.actionLabel ?? confirmActionLabel}
               </Button>
             </ButtonGroup>
           </DialogFooter>

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

@@ -71,6 +71,14 @@ function alertMediaClasses(context: AlertContext): string {
   );
 }
 
+/**
+ * `role="alert"` interrompe o leitor de tela; só perigo e atenção justificam a interrupção.
+ * Os demais contextos são anunciados sem cortar a leitura, como `role="status"`.
+ */
+function alertRole(context: AlertContext): "alert" | "status" {
+  return context === "danger" || context === "warning" ? "alert" : "status";
+}
+
 const alertHeaderClasses =
   "col-start-2 row-start-1 flex min-w-0 flex-col justify-center gap-1";
 
@@ -147,7 +155,7 @@ export function Alert({
         data-slot="alert"
         data-context={resolved.context}
         data-variant={resolved.variant}
-        role="alert"
+        role={alertRole(resolved.context)}
         className={cn(alertVariants(resolved), className)}
         {...props}
       >

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

@@ -8,6 +8,10 @@ import type { ControlSize } from './control.ts'
  * Ejetado (14.0.0): `size` segue a escala de control.ts — o avatar de uma linha `sm` mede o
  * mesmo que o controle `sm` ao lado (2rem); `xs` (1.5rem) é a lista densa; `default` (2.25rem)
  * e `lg` (2.5rem) pareiam com Button/Input. O fallback e o selo acompanham o tamanho.
+ *
+ * O root não recorta (20.0.0): imagem e fallback herdam o raio do root e se recortam sozinhos, e
+ * o AvatarBadge, que transborda o círculo no canto, aparece inteiro. A forma continua declarada
+ * no root (`rounded-full` por padrão, `rounded-lg` para logo) e o anel do AvatarGroup a segue.
  */
 function Avatar({
   className,
@@ -21,7 +25,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "group/avatar relative flex shrink-0 overflow-hidden rounded-full select-none data-[size=xs]:size-6 data-[size=sm]:size-8 data-[size=default]:size-9 data-[size=lg]:size-10",
+        "group/avatar relative flex shrink-0 rounded-full select-none data-[size=xs]:size-6 data-[size=sm]:size-8 data-[size=default]:size-9 data-[size=lg]:size-10",
         className
       )}
       {...props}
@@ -36,7 +40,7 @@ function AvatarImage({
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
+      className={cn("aspect-square size-full rounded-[inherit] object-cover", className)}
       {...props}
     />
   )
@@ -50,7 +54,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center overflow-hidden rounded-[inherit] bg-muted text-sm text-muted-foreground group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}

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

@@ -34,12 +34,33 @@ function useCarousel() {
   const context = React.useContext(CarouselContext)
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error(
+      "useCarousel só funciona dentro de <Carousel />. Coloque CarouselContent, CarouselItem, CarouselPrevious e CarouselNext dentro de um <Carousel>."
+    )
   }
 
   return context
 }
 
+// Quem usa as setas por conta própria: campos editáveis e widgets compostos que navegam por dentro
+// (Slider, RadioGroup, Tabs, listas, menus; ToggleGroup e Accordion pelos itens de coleção do
+// Radix). A captura do carrossel roda antes deles e, com `preventDefault`, os handlers do Radix
+// desistem do evento — por isso as setas vindas daqui ficam com o widget.
+const ARROW_OWNERS =
+  "input, textarea, select, [contenteditable]:not([contenteditable=false]), " +
+  "[role=slider], [role=radiogroup], [role=tablist], [role=listbox], [role=menu], [role=menubar], " +
+  "[role=combobox], [role=grid], [role=tree], [role=spinbutton], [role=toolbar], " +
+  "[data-radix-collection-item]"
+
+// Só conta o dono que está DENTRO do carrossel (ou num portal aberto a partir dele): um carrossel
+// posto dentro de uma toolbar ou de uma célula de grid continua respondendo às setas.
+function ownsArrowKeys(target: EventTarget, carousel: EventTarget): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.isContentEditable) return true
+  const owner = target.closest(ARROW_OWNERS)
+  return owner !== null && !(carousel instanceof Node && owner.contains(carousel))
+}
+
 function Carousel({
   orientation = "horizontal",
   opts,
@@ -75,15 +96,22 @@ function Carousel({
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
+      // As setas de um campo editável dentro do slide movem o cursor ou mudam a opção; o
+      // carrossel não as rouba.
+      if (ownsArrowKeys(event.target, event.currentTarget)) return
+      const [prevKey, nextKey] =
+        orientation === "vertical"
+          ? ["ArrowUp", "ArrowDown"]
+          : ["ArrowLeft", "ArrowRight"]
+      if (event.key === prevKey) {
         event.preventDefault()
         scrollPrev()
-      } else if (event.key === "ArrowRight") {
+      } else if (event.key === nextKey) {
         event.preventDefault()
         scrollNext()
       }
     },
-    [scrollPrev, scrollNext]
+    [orientation, scrollPrev, scrollNext]
   )
 
   React.useEffect(() => {
@@ -98,7 +126,8 @@ function Carousel({
     api.on("select", onSelect)
 
     return () => {
-      api?.off("select", onSelect)
+      api.off("reInit", onSelect)
+      api.off("select", onSelect)
     }
   }, [api, onSelect])
 

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

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { CheckIcon } from "lucide-react"
+import { CheckIcon, MinusIcon } from "lucide-react"
 import { Checkbox as CheckboxPrimitive } from "radix-ui"
 
 import { cn } from '../../lib/cn.ts'
@@ -12,7 +12,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer size-4 shrink-0 rounded-[0.25rem] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-context-danger/40 dark:data-[state=checked]:bg-primary",
+        "peer group/checkbox size-4 shrink-0 rounded-[0.25rem] border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-context-danger/40 dark:data-[state=checked]:bg-primary dark:data-[state=indeterminate]:bg-primary",
         className
       )}
       {...props}
@@ -21,7 +21,15 @@ function Checkbox({
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none"
       >
-        <CheckIcon className="size-3.5" />
+        {/* Indeterminado ("alguns marcados") tem glifo próprio: o traço não se confunde com o check. */}
+        <CheckIcon
+          data-slot="checkbox-check"
+          className="size-3.5 group-data-[state=indeterminate]/checkbox:hidden"
+        />
+        <MinusIcon
+          data-slot="checkbox-indeterminate"
+          className="hidden size-3.5 group-data-[state=indeterminate]/checkbox:block"
+        />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

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

@@ -103,12 +103,13 @@ function CommandList({
 }
 
 function CommandEmpty({
+  className,
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className="py-6 text-center text-sm"
+      className={cn("py-6 text-center text-sm", className)}
       {...props}
     />
   );

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

@@ -2,6 +2,76 @@ import * as React from 'react'
 import { CheckIcon, CopyIcon } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
 
+/**
+ * A região viva que anuncia "Copiado", uma por documento.
+ *
+ * Uma tela com dezenas de Copyable (uma tabela de IDs, por exemplo) montaria dezenas de regiões
+ * `role="status"` vazias no fim do `body`. Todas as instâncias compartilham a mesma: a primeira a
+ * montar cria o nó, a última a desmontar o remove. Quem escreve a confirmação vira dono do texto;
+ * só o dono o apaga, para que a expiração de uma cópia antiga não silencie a mais recente.
+ * Se algo fora do React tirar o nó do documento (um `body.innerHTML` de script legado, por
+ * exemplo), a próxima montagem ou cópia o recoloca, para que o anúncio não suma em silêncio.
+ */
+interface SharedStatus {
+  node: HTMLSpanElement
+  users: number
+  owner: symbol | undefined
+}
+
+const statusByDocument = new WeakMap<Document, SharedStatus>()
+
+function acquireStatus(doc: Document): SharedStatus {
+  let shared = statusByDocument.get(doc)
+  if (shared === undefined) {
+    const node = doc.createElement('span')
+    node.setAttribute('role', 'status')
+    node.setAttribute('aria-live', 'polite')
+    node.setAttribute('data-slot', 'copyable-status')
+    node.className = 'sr-only'
+    doc.body.appendChild(node)
+    shared = { node, users: 0, owner: undefined }
+    statusByDocument.set(doc, shared)
+  }
+  ensureConnected(shared.node, doc)
+  shared.users += 1
+  return shared
+}
+
+// Devolve `true` quando precisou recolocar a região no `body`.
+function ensureConnected(node: HTMLSpanElement, doc: Document): boolean {
+  if (node.isConnected) return false
+  doc.body.appendChild(node)
+  return true
+}
+
+function releaseStatus(doc: Document, shared: SharedStatus, id: symbol): void {
+  if (shared.owner === id) clearStatus(shared, id)
+  shared.users -= 1
+  if (shared.users > 0) return
+  shared.node.remove()
+  if (statusByDocument.get(doc) === shared) statusByDocument.delete(doc)
+}
+
+function announceCopied(shared: SharedStatus, id: symbol): void {
+  shared.owner = id
+  const doc = shared.node.ownerDocument
+  // Um nó de texto novo, em vez de manter o anterior: uma segunda cópia enquanto "Copiado" ainda
+  // está na região (da mesma instância ou de outra) continua sendo uma mudança a anunciar.
+  const write = (): void => {
+    if (shared.owner === id) shared.node.replaceChildren(doc.createTextNode('Copiado'))
+  }
+  // Uma região recém-inserida já com texto costuma não ser lida: depois de recolocá-la, o texto
+  // entra no tick seguinte, quando o leitor de tela já a conhece.
+  if (ensureConnected(shared.node, doc)) setTimeout(write, 0)
+  else write()
+}
+
+function clearStatus(shared: SharedStatus, id: symbol): void {
+  if (shared.owner !== id) return
+  shared.owner = undefined
+  shared.node.replaceChildren()
+}
+
 export interface CopyableProps extends Omit<React.ComponentProps<'button'>, 'value'> {
   /** O texto que vai pro clipboard no clique. */
   value: string
@@ -13,7 +83,16 @@ export interface CopyableProps extends Omit<React.ComponentProps<'button'>, 'val
  * Clicar-pra-copiar com feedback: copia `value` pro clipboard e troca o ícone por um
  * check por ~1.5s. Sem filhos é um botão-ícone (bom pra toolbar/célula); com filhos, o
  * rótulo visível + o ícone à direita. Pra IDs, tokens, slugs, URLs. No-op silencioso se
- * o clipboard não estiver disponível (contexto inseguro/SSR).
+ * o clipboard não estiver disponível (contexto inseguro/SSR) ou recusar a escrita (permissão
+ * negada, documento sem foco): o botão só confirma "copiado" depois que a escrita conclui.
+ *
+ * Nome acessível: com filhos, é o próprio texto visível (quem fala o que vê aciona o botão);
+ * sem filhos, "Copiar" e, na confirmação, "Copiado". Um `aria-label` do consumidor vence os
+ * dois. A confirmação é anunciada por uma região viva no fim de `document.body`, compartilhada
+ * por todas as instâncias do documento: dentro do botão, o texto entraria no nome calculado pelo
+ * conteúdo (e o botão não expõe descendentes como regiões); como irmã, mudaria a estrutura do
+ * contêiner e seletores como `:first-child` de um ButtonGroup. A região só é criada no cliente,
+ * depois da hidratação, e existe antes da primeira cópia para que a mudança seja anunciada.
  */
 export function Copyable({
   value,
@@ -25,26 +104,57 @@ export function Copyable({
 }: CopyableProps): React.ReactElement {
   const [copied, setCopied] = React.useState(false)
   const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  React.useEffect(() => () => clearTimeout(timer.current), [])
+  const [id] = React.useState(() => Symbol('copyable'))
+  const status = React.useRef<SharedStatus | undefined>(undefined)
+  React.useEffect(() => {
+    const doc = document
+    const shared = acquireStatus(doc)
+    status.current = shared
+    return () => {
+      clearTimeout(timer.current)
+      status.current = undefined
+      releaseStatus(doc, shared, id)
+    }
+  }, [id])
+  const iconOnly = children === undefined || children === null || children === false || children === ''
   return (
     <button
       type="button"
       data-slot="copyable"
       data-copied={copied || undefined}
-      aria-label={copied ? 'Copiado' : 'Copiar'}
-      onClick={(e) => {
+      aria-label={iconOnly ? (copied ? 'Copiado' : 'Copiar') : undefined}
+      onClick={async (e) => {
         onClick?.(e)
-        void navigator.clipboard?.writeText(value).then(() => {
-          setCopied(true)
-          clearTimeout(timer.current)
-          timer.current = setTimeout(() => setCopied(false), feedbackMs)
-        })
+        const clipboard = globalThis.navigator?.clipboard
+        if (clipboard === undefined) return
+        clearTimeout(timer.current)
+        try {
+          await clipboard.writeText(value)
+        } catch {
+          // Recusado: some com um "copiado" anterior para não afirmar o que não aconteceu.
+          setCopied(false)
+          if (status.current !== undefined) clearStatus(status.current, id)
+          return
+        }
+        const shared = status.current
+        // Desmontou enquanto a escrita corria: não há botão nem região a atualizar.
+        if (shared === undefined) return
+        setCopied(true)
+        announceCopied(shared, id)
+        timer.current = setTimeout(() => {
+          setCopied(false)
+          clearStatus(shared, id)
+        }, feedbackMs)
       }}
       className={cn('inline-flex items-center gap-1.5', className)}
       {...props}
     >
       {children}
-      {copied ? <CheckIcon className="size-3.5 text-context-success-emphasis" /> : <CopyIcon className="size-3.5" />}
+      {copied ? (
+        <CheckIcon aria-hidden="true" className="size-3.5 text-context-success-emphasis" />
+      ) : (
+        <CopyIcon aria-hidden="true" className="size-3.5" />
+      )}
     </button>
   )
 }

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

@@ -11,6 +11,7 @@ import {
   useSurfaceLayout,
   type SurfaceLayout,
 } from "../patterns/surface-anatomy.ts";
+import { FillBoundary } from "../patterns/fill-region.ts";
 import { headingTags, type HeadingLevel } from "../patterns/heading-level.ts";
 import { SurfaceHeader } from "../patterns/surface-header.tsx";
 import {
@@ -45,6 +46,24 @@ const DialogContentContext = React.createContext<DialogContentContextValue>({
   closeSize: "sm",
 });
 
+/**
+ * Compõe o handler de dispensa do consumidor com o bloqueio de `closeDisabled`: o handler dele
+ * roda primeiro e, com a superfície bloqueada, o evento é cancelado para que Esc, clique fora ou
+ * foco fora não a fechem. Sem bloqueio, devolve o handler original.
+ */
+export function preventDismissWhen<
+  E extends { defaultPrevented: boolean; preventDefault(): void },
+>(
+  blocked: boolean,
+  handler: ((event: E) => void) | undefined,
+): ((event: E) => void) | undefined {
+  if (!blocked) return handler;
+  return (event) => {
+    handler?.(event);
+    if (!event.defaultPrevented) event.preventDefault();
+  };
+}
+
 function useDialogContext(): DialogContextValue {
   return React.useContext(DialogContext);
 }
@@ -192,11 +211,16 @@ export function DialogContent({
   closeSize = "sm",
   layout = "sectioned",
   "aria-describedby": ariaDescribedBy,
+  onEscapeKeyDown,
+  onInteractOutside,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   /** Mostra a ação “Fechar” no modo padrão. O modo `alert` exige uma resposta identificável. */
   showCloseButton?: boolean;
-  /** Mantém a ação visível, mas impede fechar enquanto a superfície está bloqueada. */
+  /**
+   * Bloqueia o fechamento enquanto a superfície está ocupada: desabilita a ação “Fechar”, que
+   * continua visível, e cancela Esc e clique ou foco fora depois dos handlers do consumidor.
+   */
   closeDisabled?: boolean;
   /** Tamanho da ação circular de fechar no cabeçalho. */
   closeSize?: CloseButtonSize;
@@ -217,17 +241,22 @@ export function DialogContent({
           data-mode="alert"
           className={cn(contentClasses, "grid max-w-xs gap-4 p-6", className)}
           aria-describedby={ariaDescribedBy}
+          onEscapeKeyDown={preventDismissWhen(closeDisabled, onEscapeKeyDown)}
           {...props}
         >
-          <DialogContentContext.Provider
-            value={{
-              showCloseButton: false,
-              closeDisabled: true,
-              closeSize,
-            }}
-          >
-            {children}
-          </DialogContentContext.Provider>
+          {/* Sem anatomia seccionada (exceção da ADR 0023), mas a altura continua sendo
+              decisão do diálogo: a cadeia `fill` da página não atravessa o portal. */}
+          <FillBoundary>
+            <DialogContentContext.Provider
+              value={{
+                showCloseButton: false,
+                closeDisabled: true,
+                closeSize,
+              }}
+            >
+              {children}
+            </DialogContentContext.Provider>
+          </FillBoundary>
         </AlertDialogPrimitive.Content>
       </DialogPortal>
     );
@@ -246,6 +275,8 @@ export function DialogContent({
           className,
         )}
         aria-describedby={ariaDescribedBy}
+        onEscapeKeyDown={preventDismissWhen(closeDisabled, onEscapeKeyDown)}
+        onInteractOutside={preventDismissWhen(closeDisabled, onInteractOutside)}
         {...props}
       >
         <SurfaceLayoutProvider value={layout}>

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

@@ -21,7 +21,7 @@ import {
   CloseButton,
   type CloseButtonSize,
 } from "./close-button.tsx";
-import { overlayClasses } from "./dialog.tsx";
+import { overlayClasses, preventDismissWhen } from "./dialog.tsx";
 
 interface DrawerContentContextValue {
   showCloseButton: boolean;
@@ -95,10 +95,16 @@ function DrawerContent({
   closeSize = "sm",
   layout = "sectioned",
   "aria-describedby": ariaDescribedBy,
+  onEscapeKeyDown,
+  onInteractOutside,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
+  /**
+   * Bloqueia o fechamento enquanto a superfície está ocupada: desabilita a ação “Fechar”, que
+   * continua visível, e cancela Esc e clique ou foco fora depois dos handlers do consumidor.
+   */
   closeDisabled?: boolean;
   closeSize?: CloseButtonSize;
   /** Anatomia da superfície: `sectioned` (default) ou `continuous` — ADR 0023. */
@@ -123,6 +129,8 @@ function DrawerContent({
           className,
         )}
         aria-describedby={ariaDescribedBy}
+        onEscapeKeyDown={preventDismissWhen(closeDisabled, onEscapeKeyDown)}
+        onInteractOutside={preventDismissWhen(closeDisabled, onInteractOutside)}
         {...props}
       >
         <SurfaceLayoutProvider value={layout}>

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

@@ -69,7 +69,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+function EmptyDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-description"

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

@@ -46,7 +46,7 @@ import {
   type LucideIcon,
 } from 'lucide-react'
 import { cn } from '../../lib/cn.ts'
-import { focusRing } from './control.ts'
+import { controlHeight, focusRing } from './control.ts'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command.tsx'
 import { Popover, PopoverContent, PopoverTrigger } from './popover.tsx'
 
@@ -142,8 +142,12 @@ export function IconPicker({
           aria-describedby={ariaDescribedBy}
           data-slot="icon-picker"
           className={cn(
-            'flex h-10 w-full items-center gap-2 rounded-md border border-input bg-muted/30 px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+            // Mesma altura do Input e do Select no tamanho default: lado a lado num form, alinham.
+            'flex w-full items-center gap-2 rounded-md border border-input bg-muted/30 px-3 text-sm outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+            controlHeight.default,
             focusRing,
+            // As mesmas classes de inválido do Input e do Select: o erro aparece na moldura.
+            'aria-invalid:border-context-danger aria-invalid:ring-context-danger/20 dark:aria-invalid:ring-context-danger/40',
             className,
           )}
         >

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

@@ -41,6 +41,13 @@ export interface IconTileProps
   extends React.ComponentProps<'span'>,
     IconTileStyleOptions {}
 
+/**
+ * Preenche os padrões de `context`, `variant` e `size` (`neutral`, `subtle`, `default`).
+ *
+ * @deprecated Não há decisão a tomar com os valores resolvidos fora do próprio IconTile. Para a
+ * moldura, renderize `IconTile`; para aplicá-la a outro elemento, use `iconTileVariants`, que já
+ * aplica os mesmos padrões. Sai do pacote numa próxima versão major.
+ */
 export function resolveIconTileStyle({
   context,
   variant,