@softize/opus 19.0.0 → 20.1.0

package/src/ui/components/patterns/surface-header.tsx

@@ -45,10 +45,12 @@ interface SurfaceHeaderSlots {
   title: ElementType;
   count?: ElementType;
   description?: ElementType;
-  actions: ElementType;
+  actions?: ElementType;
 }
 
 export interface SurfaceHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Elemento estrutural; `legend` preserva a mesma anatomia com wrappers phrasing. */
+  as?: "div" | "legend";
   /** Nome do componente público, para as mensagens de erro (`PageHeader`, `ContentHeader`). */
   name: string;
   /** Prefixo dos `data-slot` (`page` → `page-header`, `page-heading`). */
@@ -57,6 +59,8 @@ export interface SurfaceHeaderProps extends HTMLAttributes<HTMLDivElement> {
   slots: SurfaceHeaderSlots;
   /** Posição de um slot introdutório opcional, antes da linha ou dentro dela. */
   leadingPlacement?: "above" | "inline";
+  /** Mantém a mídia na linha geral ou a agrupa com o heading. */
+  mediaPlacement?: "row" | "heading";
   /** Classes de um container interno quando a moldura precisa ocupar toda a largura. */
   contentClassName?: string;
   /** Permite uma superfície composta apenas pelas regiões leading/actions. */
@@ -71,6 +75,11 @@ export interface SurfaceHeaderProps extends HTMLAttributes<HTMLDivElement> {
    * NOMEIAM algo (Card, Dialog, Drawer, Page, Content) continuam estritas.
    */
   allowFreeContent?: boolean;
+  /**
+   * Mensagem própria para uma composição inválida, quando a regra do header não cabe na
+   * mensagem genérica (a legenda de um fieldset aceita menos slots que o header comum).
+   */
+  invalidMessage?: string;
 }
 
 /** Expande fragments de primeiro nível: o shorthand monta os slots dentro de um `<>`. */
@@ -83,19 +92,23 @@ function flatten(children: ReactNode): ReactNode[] {
 }
 
 export function SurfaceHeader({
+  as: Root = "div",
   name,
   slot,
   slots,
   leadingPlacement = "above",
+  mediaPlacement = "row",
   contentClassName,
   titleRequired = true,
   rowClassName,
   trailing,
   allowFreeContent = false,
+  invalidMessage,
   className,
   children,
   ...props
 }: SurfaceHeaderProps): ReactElement {
+  const Wrapper = Root === "legend" ? "span" : "div";
   const nodes = flatten(children);
   const of = (type: ElementType) =>
     nodes.filter((node) => isValidElement(node) && node.type === type);
@@ -111,7 +124,8 @@ export function SurfaceHeader({
   const counts = slots.count === undefined ? [] : of(slots.count);
   const descriptions =
     slots.description === undefined ? [] : of(slots.description);
-  const actionSlots = of(slots.actions);
+  const actionSlots =
+    slots.actions === undefined ? [] : of(slots.actions);
   const slotTypes = [
     ...leadingTypes,
     slots.media,
@@ -167,6 +181,7 @@ export function SurfaceHeader({
         isValidElement(node) ? [node.type as ElementType] : [],
       ),
     );
+    if (invalidMessage !== undefined) throw new Error(invalidMessage);
     throw new Error(
       distinctLeading.size > 1
         ? `${name} aceita ${[...distinctLeading].map(label).join(" ou ")} na região introdutória, nunca os dois na mesma superfície.`
@@ -174,24 +189,42 @@ export function SurfaceHeader({
     );
   }
 
+  const titleLine = titles.length + counts.length > 0 && (
+    <Wrapper className="flex items-baseline gap-2">
+      {titles}
+      {counts}
+    </Wrapper>
+  );
   const heading = titles.length +
     counts.length +
     descriptions.length +
-    free.length >
+    free.length +
+    (mediaPlacement === "heading" ? medias.length : 0) >
     0 && (
-    <div
+    <Wrapper
       data-slot={`${slot}-heading`}
       className={cn("min-w-0", leadingPlacement === "inline" && "flex-1")}
     >
-      {titles.length + counts.length > 0 && (
-        <div className="flex items-baseline gap-2">
-          {titles}
-          {counts}
-        </div>
+      {mediaPlacement === "heading" && medias.length > 0 ? (
+        <Wrapper
+          data-slot={`${slot}-heading-row`}
+          className="flex items-center gap-2"
+        >
+          {medias}
+          <Wrapper data-slot={`${slot}-heading-content`} className="min-w-0">
+            {titleLine}
+            {descriptions}
+            {free}
+          </Wrapper>
+        </Wrapper>
+      ) : (
+        <>
+          {titleLine}
+          {descriptions}
+          {free}
+        </>
       )}
-      {descriptions}
-      {free}
-    </div>
+    </Wrapper>
   );
   // A região introdutória carrega o mesmo `data-slot` nas duas apresentações: seletor de teste
   // ou de CSS que funcione no header padrão precisa funcionar na barra.
@@ -200,14 +233,14 @@ export function SurfaceHeader({
       {leadingPlacement === "inline" && leading.length > 0 && (
         // `min-w-0` aqui é o que deixa a trilha do PageNavigation ceder e truncar; sem ele o
         // wrapper assume o min-content do breadcrumb e a compressão toda cai sobre o título.
-        <div
+        <Wrapper
           data-slot={`${slot}-navigation`}
           className={cn("flex min-w-0 items-center", !heading && "flex-1")}
         >
           {leading}
-        </div>
+        </Wrapper>
       )}
-      {medias}
+      {mediaPlacement === "row" && medias}
       {heading}
       {actionSlots}
       {trailing}
@@ -215,15 +248,15 @@ export function SurfaceHeader({
   );
   const layout =
     leadingPlacement === "inline" ? (
-      <div className={cn("flex min-w-0 items-center gap-3", rowClassName)}>
+      <Wrapper className={cn("flex min-w-0 items-center gap-3", rowClassName)}>
         {row}
-      </div>
+      </Wrapper>
     ) : leading.length > 0 ? (
       <>
-        <div data-slot={`${slot}-navigation`} className="mb-4">
+        <Wrapper data-slot={`${slot}-navigation`} className="mb-4">
           {leading}
-        </div>
-        <div
+        </Wrapper>
+        <Wrapper
           data-slot={`${slot}-header-row`}
           className={cn(
             actionSlots.length > 0 &&
@@ -232,7 +265,7 @@ export function SurfaceHeader({
         >
           {heading}
           {actionSlots}
-        </div>
+        </Wrapper>
       </>
     ) : (
       <>
@@ -242,7 +275,7 @@ export function SurfaceHeader({
     );
 
   return (
-    <div
+    <Root
       data-slot={`${slot}-header`}
       className={cn(
         contentClassName === undefined &&
@@ -257,10 +290,10 @@ export function SurfaceHeader({
       {contentClassName === undefined ? (
         layout
       ) : (
-        <div data-slot={`${slot}-header-content`} className={contentClassName}>
+        <Wrapper data-slot={`${slot}-header-content`} className={contentClassName}>
           {layout}
-        </div>
+        </Wrapper>
       )}
-    </div>
+    </Root>
   );
 }

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/card.tsx

@@ -52,7 +52,7 @@ export function Card({
         data-slot="card"
         data-layout={layout}
         className={cn(
-          "rounded-xl border border-border bg-card text-card-foreground",
+          "rounded-xl border border-border bg-card text-card-foreground [--surface-background:var(--card)]",
           // Seccionado: o divisor encosta na borda, então o raio precisa recortar.
           layout === "sectioned" && "overflow-hidden",
           className,

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>
   )
 }