@softize/opus 29.0.0 → 31.0.0

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

@@ -7,7 +7,6 @@
  *
  *   framed     borda, raio e recorte;
  *   elevation  fundo próprio (`raised`) ou o fundo de quem hospeda (`none`);
- *   layout     ritmo contínuo ou faixas com divisores derivados.
  *
  * Três formas de compor produzem a mesma anatomia:
  *
@@ -42,6 +41,7 @@ import { headingTags, type HeadingLevel } from "./heading-level.ts";
 import { usePageHeadingPresence } from "./page-heading-context.tsx";
 import {
   StructuralHeader,
+  structuralMetaClasses,
   structuralHeaderClasses,
 } from "./structural-header.tsx";
 import {
@@ -51,7 +51,6 @@ import {
   surfaceRegionClasses,
   structuralRegionSpacing,
   surfaceTitleClasses,
-  type SurfaceLayout,
 } from "./surface-anatomy.ts";
 
 export type SurfaceElement = "div" | "section" | "article" | "fieldset";
@@ -63,7 +62,6 @@ interface SurfaceContextValue {
   /** Tem moldura ou elevação: as regiões carregam o recuo. */
   bounded: boolean;
   framed: boolean;
-  layout: SurfaceLayout;
   level: HeadingLevel;
   titleId: string;
   variant: "page" | "section";
@@ -83,11 +81,9 @@ function requiredContext<T>(
 }
 
 /** Como a `legend` de um fieldset delimitado se relaciona com a moldura. */
-function legendPlacement(
-  surface: SurfaceContextValue,
-): "notch" | "band" | null {
+function legendPlacement(surface: SurfaceContextValue): "band" | null {
   if (surface.element !== "fieldset" || !surface.bounded) return null;
-  return surface.framed && surface.layout === "continuous" ? "notch" : "band";
+  return "band";
 }
 
 interface SurfaceBaseProps {
@@ -98,8 +94,6 @@ interface SurfaceBaseProps {
    * o fundo de quem hospeda.
    */
   elevation?: SurfaceElevation;
-  /** Anatomia da superfície inteira: `continuous` (default) ou `sectioned`. */
-  layout?: SurfaceLayout;
   className?: string;
   children?: ReactNode;
 }
@@ -113,6 +107,8 @@ interface SurfaceHeaderShorthandProps {
   count?: number;
   /** Forma curta: frase de apoio sob o título. */
   description?: ReactNode;
+  /** Forma curta: badges, datas e autoria sob a orientação. */
+  meta?: ReactNode;
   /** Forma curta: ações sobre a superfície inteira, no extremo oposto ao título. */
   actions?: ReactNode;
 }
@@ -124,6 +120,7 @@ interface SurfaceLegendShorthandProps {
   media?: ReactNode;
   count?: never;
   description?: never;
+  meta?: never;
   actions?: never;
 }
 
@@ -132,6 +129,7 @@ interface SurfaceNoShorthandProps {
   media?: never;
   count?: never;
   description?: never;
+  meta?: never;
   actions?: never;
 }
 
@@ -198,12 +196,12 @@ export function Surface({
   asChild = false,
   framed = false,
   elevation = "none",
-  layout = "continuous",
   level = 2,
   title,
   media,
   count,
   description,
+  meta,
   actions,
   className,
   children,
@@ -218,11 +216,6 @@ export function Surface({
   const element: SurfaceElement | null = asChild ? null : (as ?? "div");
   const raised = elevation === "raised";
   const bounded = framed || raised;
-  if (layout === "sectioned" && !bounded) {
-    throw new Error(
-      'Surface layout="sectioned" exige framed ou elevation="raised".',
-    );
-  }
 
   const shorthand = title !== undefined;
   if (
@@ -230,10 +223,11 @@ export function Surface({
     (hasMedia(media) ||
       count !== undefined ||
       description !== undefined ||
+      meta !== undefined ||
       actions !== undefined)
   ) {
     throw new Error(
-      "Surface exige title para usar media, count, description ou actions.",
+      "Surface exige title para usar media, count, description, meta ou actions.",
     );
   }
   if (asChild && shorthand) {
@@ -292,7 +286,6 @@ export function Surface({
     element,
     bounded,
     framed,
-    layout,
     level,
     titleId: resolvedTitleId,
     variant,
@@ -303,10 +296,11 @@ export function Surface({
       <SurfaceHeader>
         {hasMedia(media) && <SurfaceMedia>{media}</SurfaceMedia>}
         <SurfaceTitle>{title}</SurfaceTitle>
-        {count !== undefined && <SurfaceMeta>{count}</SurfaceMeta>}
+        {count !== undefined && <SurfaceCount>{count}</SurfaceCount>}
         {description !== undefined && (
           <SurfaceDescription>{description}</SurfaceDescription>
         )}
+        {meta !== undefined && <SurfaceMeta>{meta}</SurfaceMeta>}
         {actions !== undefined && <SurfaceActions>{actions}</SurfaceActions>}
       </SurfaceHeader>
       {regions > 0
@@ -334,13 +328,12 @@ export function Surface({
       data-as={element ?? undefined}
       data-framed={framed}
       data-elevation={elevation}
-      data-layout={layout}
       {...(link ? fill.attributes : {})}
       aria-labelledby={named ? resolvedTitleId : undefined}
       className={cn(
         framed && "rounded-xl border border-border",
         // O divisor e o conteúdo sem recuo encostam na borda: o raio precisa recortar.
-        framed && layout === "sectioned" && "overflow-hidden",
+        framed && "overflow-hidden",
         framed && "has-[>[data-flush=true]]:overflow-hidden",
         raised &&
           "bg-card text-card-foreground [--surface-background:var(--card)]",
@@ -367,10 +360,16 @@ export function Surface({
   );
 }
 
-export type SurfaceHeaderProps = Omit<HTMLAttributes<HTMLDivElement>, "title">;
+export type SurfaceHeaderProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "title"
+> & {
+  /** TabsList abaixo do título; indisponível em fieldset. */
+  tabs?: ReactNode;
+};
 
 const legendInvalidMessage =
-  "SurfaceHeader de fieldset aceita somente SurfaceMedia e SurfaceTitle; contador, descrição e ações ficam fora da legenda.";
+  "SurfaceHeader de fieldset aceita somente SurfaceMedia e SurfaceTitle; contador, descrição, metadados e ações ficam fora da legenda.";
 
 /**
  * Header da superfície; não existe fora dela. Monta a linha sozinho — mídia, título com
@@ -401,7 +400,8 @@ export function SurfaceHeader({
             : {
                 media: SurfaceMedia,
                 title: SurfaceTitle,
-                count: SurfaceMeta,
+                count: SurfaceCount,
+                meta: SurfaceMeta,
                 description: SurfaceDescription,
                 actions: SurfaceActions,
               }
@@ -411,9 +411,9 @@ export function SurfaceHeader({
         rowClassName={surfaceHeaderRowClasses("surface")}
         {...(legend ? { invalidMessage: legendInvalidMessage } : {})}
         className={cn(
-          surface.bounded &&
-            placement !== "notch" &&
-            surfaceRegionClasses("surface", surface.layout, "header"),
+          surfaceRegionClasses("surface", "header", {
+            bounded: surface.bounded,
+          }),
           placement !== null && surfaceLegendClasses[placement],
           className,
         )}
@@ -470,7 +470,7 @@ export function SurfaceTitle({
   );
   const legend = surface.element === "fieldset";
   const Heading = legend ? "span" : headingTags[surface.level];
-  usePageHeadingPresence(!legend && surface.level === 1);
+  usePageHeadingPresence(!legend && surface.level === 1, "surface");
   return (
     <Heading
       id={id ?? surface.titleId}
@@ -478,7 +478,7 @@ export function SurfaceTitle({
       className={cn(
         surface.variant === "page"
           ? structuralHeaderClasses.page.title
-          : surfaceTitleClasses("surface", surface.layout),
+          : surfaceTitleClasses("surface"),
         className,
       )}
       {...props}
@@ -509,25 +509,44 @@ export function SurfaceDescription({
   );
 }
 
-/** Metadado ao lado do título — o slot do `count` da forma curta. */
-export function SurfaceMeta({
+/** Contador ao lado do título — o slot do `count` da forma curta. */
+export function SurfaceCount({
   className,
   ...props
 }: HTMLAttributes<HTMLSpanElement>): ReactElement {
   const surface = requiredContext(
     useContext(SurfaceHeaderContext),
-    "SurfaceMeta",
+    "SurfaceCount",
     "SurfaceHeader",
   );
   return (
     <span
-      data-slot="surface-meta"
+      data-slot="surface-count"
       className={cn(structuralHeaderClasses[surface.variant].count, className)}
       {...props}
     />
   );
 }
 
+/** Badges, datas e autoria sob o título e a orientação da superfície. */
+export function SurfaceMeta({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>): ReactElement {
+  requiredContext(
+    useContext(SurfaceHeaderContext),
+    "SurfaceMeta",
+    "SurfaceHeader",
+  );
+  return (
+    <div
+      data-slot="surface-meta"
+      className={cn(structuralMetaClasses, className)}
+      {...props}
+    />
+  );
+}
+
 /** Ações do header — a família as posiciona no extremo oposto ao título. */
 export function SurfaceActions({
   className,
@@ -577,10 +596,10 @@ export function SurfaceBody({
       data-flush={flush ? "true" : undefined}
       {...fill.attributes}
       className={cn(
-        surfaceRegionClasses("surface", surface.layout, "body", {
-          flush: !surface.bounded || flush,
+        surfaceRegionClasses("surface", "body", {
+          bounded: surface.bounded,
+          flush,
         }),
-        placement === "notch" && surfaceLegendClasses.afterNotch,
         placement === "band" && surfaceLegendClasses.afterBand,
         fill.filling && fillRegionClassName,
         className,
@@ -608,8 +627,7 @@ export function SurfaceFooter({
       data-slot="surface-footer"
       className={cn(
         "flex items-center justify-end gap-2",
-        surface.bounded &&
-          surfaceRegionClasses("surface", surface.layout, "footer"),
+        surfaceRegionClasses("surface", "footer", { bounded: surface.bounded }),
         placement === "band" && surfaceLegendClasses.afterBand,
         className,
       )}

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

@@ -52,6 +52,8 @@ export interface ActionTriggerProps<TInput, TData> {
   input: TInput;
   /** Texto do botão. Default usa action.label. */
   label?: string;
+  /** Nome acessível completo quando o texto visível é abreviado. */
+  "aria-label"?: string;
   /** Contexto visual. Por padrão, ações destrutivas usam `danger`. */
   context?: ButtonProps["context"];
   /** Tratamento visual do Button. */
@@ -70,6 +72,8 @@ export interface ActionTriggerProps<TInput, TData> {
     actionLabel?: string;
     cancelLabel?: string;
   };
+  /** Mensagem de sucesso desta ocorrência; substitui a mensagem do contrato. */
+  successMessage?: string;
   /** Callback adicional pós-sucesso (cache já foi invalidado). */
   onSuccess?: (data: TData) => void;
   /** Notifica o renderer que coordena bloqueio entre várias actions. */
@@ -87,12 +91,14 @@ export function ActionTrigger<TInput, TData>({
   action,
   input,
   label,
+  "aria-label": ariaLabel,
   context,
   variant,
   size,
   disabled = false,
   confirm: confirmProp,
   onSuccess,
+  successMessage,
   onLoadingChange,
   icon,
   itemLabel,
@@ -102,7 +108,9 @@ export function ActionTrigger<TInput, TData>({
   const [open, setOpen] = useState(false);
   const { trigger, isLoading } = useTriggerAction(action, {
     onSuccess: (data) => {
-      toast.success(msgText(action.messages?.success, "Concluído"));
+      toast.success(
+        successMessage ?? msgText(action.messages?.success, "Concluído"),
+      );
       onSuccess?.(data);
       setOpen(false);
     },
@@ -184,7 +192,7 @@ export function ActionTrigger<TInput, TData>({
         size={size ?? (icon !== undefined ? "icon-xs" : "default")}
         busy={isLoading}
         disabled={disabled}
-        aria-label={icon !== undefined ? buttonLabel : undefined}
+        aria-label={ariaLabel ?? (icon !== undefined ? buttonLabel : undefined)}
         onClick={(e) => {
           e.stopPropagation();
           onClick();

package/src/ui/components/primitives/close-button.tsx

@@ -3,22 +3,30 @@ import { XIcon } from "lucide-react";
 
 import { Button, type ButtonProps } from "./button.tsx";
 
-export type CloseButtonSize = "xs" | "sm";
+export type CloseButtonSize = "xs" | "sm" | "default";
 
 const buttonSizeByCloseSize = {
+  default: "icon",
   xs: "icon-xs",
   sm: "icon-sm",
 } as const;
 
 export interface CloseButtonProps extends Omit<
   ButtonProps,
-  "busy" | "children" | "context" | "icon" | "shape" | "size" | "type" | "variant"
+  | "busy"
+  | "children"
+  | "context"
+  | "icon"
+  | "shape"
+  | "size"
+  | "type"
+  | "variant"
 > {
   size?: CloseButtonSize;
 }
 
 export function CloseButton({
-  size = "sm",
+  size = "xs",
   disabled = false,
   "aria-label": ariaLabel = "Fechar",
   ...props

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

@@ -38,9 +38,6 @@ function CommandDialog({
   return (
     <Dialog {...props}>
       <DialogContent
-        // A paleta é uma superfície contínua: a lista já separa os grupos, e uma faixa
-        // sob o cabeçalho competiria com ela.
-        layout="continuous"
         className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
         aria-describedby={descriptionId}
@@ -50,11 +47,8 @@ function CommandDialog({
         <p id={descriptionId} className="sr-only">
           {description}
         </p>
-        {/* O recuo e a escala são os da paleta, não os da família: a caixa de busca
-            manda na densidade, e o título aqui é um rótulo acima dela. É a única
-            superfície do SDK que diverge nos dois, e por isso está escrito aqui. */}
-        <DialogHeader className="px-3 py-2">
-          <DialogTitle className="text-sm">{title}</DialogTitle>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
         <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}

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

@@ -122,7 +122,7 @@ function DetailField({
         !dividedHorizontalField &&
           "group-data-[orientation=horizontal]/detail-group:grid-cols-[minmax(0,var(--detail-label-width))_minmax(0,1fr)] group-data-[orientation=horizontal]/detail-group:items-baseline group-data-[orientation=horizontal]/detail-group:gap-x-3",
         dividedHorizontalField && "items-stretch gap-x-0",
-        "group-data-[orientation=vertical]/detail-group:gap-y-1",
+        "group-data-[orientation=vertical]/detail-group:gap-y-1.5",
         "group-data-[dividers=true]/detail-group:outline group-data-[dividers=true]/detail-group:outline-1 group-data-[dividers=true]/detail-group:outline-border",
         "group-data-[variant=framed]/detail-group:bg-transparent",
         className,

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

@@ -3,21 +3,17 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { cn } from "../../lib/cn.ts";
 import {
-  SurfaceLayoutProvider,
   surfaceActionsClasses,
   surfaceDescriptionClasses,
   surfaceHeaderRowClasses,
   surfaceRegionClasses,
   surfaceTitleClasses,
-  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 {
   StructuralHeader,
-  structuralHeaderClasses,
-  validateSurfaceIntro,
+  structuralMetaClasses,
 } from "../patterns/structural-header.tsx";
 import {
   StructuralMedia,
@@ -64,10 +60,10 @@ interface DialogContentContextValue {
 const DialogContentContext = React.createContext<DialogContentContextValue>({
   showCloseButton: false,
   closeDisabled: false,
-  closeSize: "sm",
+  closeSize: "xs",
 });
 
-const DialogIntroContext = React.createContext(false);
+const DialogMetaContext = React.createContext(false);
 
 /**
  * Compõe o handler de dispensa do consumidor com o bloqueio de `closeDisabled`: o handler dele
@@ -415,8 +411,7 @@ export function DialogContent({
   children,
   showCloseButton,
   closeDisabled = false,
-  closeSize = "sm",
-  layout = "sectioned",
+  closeSize = "xs",
   "aria-describedby": ariaDescribedBy,
   onEscapeKeyDown,
   onPointerDownOutside,
@@ -436,8 +431,6 @@ export function DialogContent({
   closeDisabled?: boolean;
   /** Tamanho da ação circular de fechar no cabeçalho. */
   closeSize?: CloseButtonSize;
-  /** Anatomia da superfície: `sectioned` (default) ou `continuous` — ADR 0023. */
-  layout?: SurfaceLayout;
 }) {
   const { mode, open, modal } = useDialogContext();
   const layer = useLayerPortal();
@@ -527,7 +520,6 @@ export function DialogContent({
         ref={composedRef}
         data-slot="dialog-content"
         data-mode="default"
-        data-layout={layout}
         {...{ [LAYER_MODAL_ATTRIBUTE]: internal || undefined }}
         className={cn(
           contentClasses,
@@ -548,13 +540,13 @@ export function DialogContent({
         {...props}
       >
         <LayerPortalProvider value={nestedPortal}>
-          <SurfaceLayoutProvider value={layout}>
+          <FillBoundary>
             <DialogContentContext.Provider
               value={{ showCloseButton: showClose, closeDisabled, closeSize }}
             >
               {children}
             </DialogContentContext.Provider>
-          </SurfaceLayoutProvider>
+          </FillBoundary>
         </LayerPortalProvider>
       </DialogPrimitive.Content>
     </DialogPortal>
@@ -564,16 +556,21 @@ export function DialogContent({
 export function DialogHeader({
   className,
   children,
+  tabs,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.ComponentProps<"div"> & {
+  tabs?: React.ReactNode;
+}) {
   const { mode } = useDialogContext();
-  const layout = useSurfaceLayout("dialog");
   const { showCloseButton, closeDisabled, closeSize } =
     React.useContext(DialogContentContext);
 
   // O modo de alerta é a exceção declarada da ADR 0023: a resposta obrigatória empilha
   // mídia, título e corpo centralizados, e o padding mora na raiz do conteúdo.
   if (mode === "alert") {
+    if (tabs !== undefined && tabs !== null && tabs !== false) {
+      throw new Error("DialogHeader de alerta não aceita abas.");
+    }
     return (
       <div
         data-slot="dialog-header"
@@ -589,33 +586,37 @@ export function DialogHeader({
   }
 
   return (
-    <StructuralHeader
-      name="DialogHeader"
-      slot="dialog"
-      slots={{
-        leading: DialogNavigation,
-        media: DialogMedia,
-        title: DialogTitle,
-        description: DialogDescription,
-        actions: DialogActions,
-      }}
-      leadingPlacement="inline"
-      titleRequired={false}
-      rowClassName={surfaceHeaderRowClasses("dialog")}
-      className={cn(
-        "text-left",
-        surfaceRegionClasses("dialog", layout, "header"),
-        className,
-      )}
-      trailing={
-        showCloseButton ? (
-          <DialogCloseButton disabled={closeDisabled} size={closeSize} />
-        ) : undefined
-      }
-      {...props}
-    >
-      {children}
-    </StructuralHeader>
+    <DialogMetaContext.Provider value>
+      <StructuralHeader
+        tabs={tabs}
+        name="DialogHeader"
+        slot="dialog"
+        slots={{
+          leading: DialogNavigation,
+          media: DialogMedia,
+          title: DialogTitle,
+          description: DialogDescription,
+          meta: DialogMeta,
+          actions: DialogActions,
+        }}
+        leadingPlacement="inline"
+        titleRequired
+        rowClassName={surfaceHeaderRowClasses("dialog")}
+        className={cn(
+          "text-left",
+          surfaceRegionClasses("dialog", "header"),
+          className,
+        )}
+        trailing={
+          showCloseButton ? (
+            <DialogCloseButton disabled={closeDisabled} size={closeSize} />
+          ) : undefined
+        }
+        {...props}
+      >
+        {children}
+      </StructuralHeader>
+    </DialogMetaContext.Provider>
   );
 }
 
@@ -647,42 +648,22 @@ export function DialogActions({
   );
 }
 
-/** Título e ações da composição principal, como primeiro bloco de DialogBody. */
-export function DialogIntro({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <DialogIntroContext.Provider value>
-      <StructuralHeader
-        name="DialogIntro"
-        slot="dialog-intro"
-        slots={{
-          title: DialogTitle,
-          description: DialogDescription,
-          actions: DialogIntroActions,
-        }}
-        leadingPlacement="inline"
-        titleRequired
-        className={cn("text-left", className)}
-        {...props}
-      >
-        {children}
-      </StructuralHeader>
-    </DialogIntroContext.Provider>
-  );
-}
-
-/** Ações relacionadas ao título do conteúdo, separadas das ações de chrome do header. */
-export function DialogIntroActions({
+/** Badges, datas e autoria abaixo do título e da orientação. */
+export function DialogMeta({
   className,
   ...props
 }: React.ComponentProps<"div">) {
+  const { mode } = useDialogContext();
+  const inside = React.useContext(DialogMetaContext);
+  if (mode === "alert")
+    throw new Error(
+      'DialogMeta não está disponível em Dialog com mode="alert"; coloque as informações no corpo do alerta.',
+    );
+  if (!inside) throw new Error("DialogMeta deve estar dentro de DialogHeader.");
   return (
     <div
-      data-slot="dialog-intro-actions"
-      className={cn(surfaceActionsClasses, className)}
+      data-slot="dialog-meta"
+      className={cn(structuralMetaClasses, className)}
       {...props}
     />
   );
@@ -701,8 +682,6 @@ export function DialogBody({
   ...props
 }: React.ComponentProps<"div"> & { flush?: boolean }) {
   const { mode } = useDialogContext();
-  const layout = useSurfaceLayout("dialog");
-  validateSurfaceIntro(props.children, DialogIntro, "DialogBody");
   return (
     <div
       data-slot="dialog-body"
@@ -711,7 +690,7 @@ export function DialogBody({
           ? "flex min-w-0 flex-col gap-6"
           : cn(
               "min-h-0 flex-1 overflow-y-auto",
-              surfaceRegionClasses("dialog", layout, "body", { flush }),
+              surfaceRegionClasses("dialog", "body", { flush }),
             ),
         className,
       )}
@@ -727,7 +706,6 @@ export function DialogFooter({
   ...props
 }: React.ComponentProps<"div">) {
   const { mode } = useDialogContext();
-  const layout = useSurfaceLayout("dialog");
   return (
     <div
       data-slot="dialog-footer"
@@ -736,7 +714,7 @@ export function DialogFooter({
           ? "w-full"
           : cn(
               "flex shrink-0 flex-row justify-end gap-2",
-              surfaceRegionClasses("dialog", layout, "footer"),
+              surfaceRegionClasses("dialog", "footer"),
             ),
         className,
       )}
@@ -755,19 +733,11 @@ export function DialogTitle({
   level?: HeadingLevel;
 }) {
   const { mode } = useDialogContext();
-  const intro = React.useContext(DialogIntroContext);
-  const layout = useSurfaceLayout("dialog");
   const Title =
     mode === "alert" ? AlertDialogPrimitive.Title : DialogPrimitive.Title;
   const classes = cn(
-    mode === "alert"
-      ? undefined
-      : intro
-        ? "min-w-0 whitespace-normal"
-        : "min-w-0 truncate",
-    intro
-      ? structuralHeaderClasses.page.title
-      : surfaceTitleClasses("dialog", layout),
+    mode === "alert" ? undefined : "min-w-0 truncate",
+    surfaceTitleClasses("dialog"),
     className,
   );
   // O nível troca a TAG do mesmo nó, via `asChild` — nunca aninha um heading dentro