@lucasbernardosn/react-ui 0.3.0 → 0.5.0

package/dist/components/layout/scroll-area/scroll-area-scrollbar.js

@@ -8,6 +8,9 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 *
 * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui
 * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.
+*
+* Com `scrollbars="always"` no `Root`, as barras filhas diretas dele ficam sempre visíveis com
+* mouse, com a trilha de 16px; no toque, seguem o comportamento padrão.
 */
 const ScrollAreaScrollbar = (props) => {
 	const { className, ...rest } = props;
@@ -19,9 +22,13 @@ const ScrollAreaScrollbar = (props) => {
 			"data-[orientation=horizontal]:items-center",
 			"m-(--scroll-area-scrollbar-inset,--spacing(0.5))",
 			"data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1))",
-			"pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1.5))",
+			"pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(3))",
 			"data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))",
-			"pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1.5))",
+			"pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(3))",
+			"pointer-fine:[[data-scrollbars=always]>&]:opacity-100",
+			"pointer-fine:[[data-scrollbars=always]>&]:pointer-events-auto",
+			"pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(4))",
+			"pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(4))",
 			"before:absolute",
 			"before:content-['']",
 			"data-[orientation=vertical]:before:inset-y-0",

package/dist/components/layout/scroll-area/scroll-area-scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-scrollbar.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-scrollbar.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaScrollbarProps = BaseScrollArea.Scrollbar.Props;\n\nexport type ScrollAreaScrollbarState = BaseScrollArea.Scrollbar.State;\n\n/**\n * A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline\n * (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.\n *\n * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui\n * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.\n */\nexport const ScrollAreaScrollbar = (props: ScrollAreaScrollbarProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Scrollbar\n      data-component=\"ScrollArea.Scrollbar\"\n      className={mergeStateClassNames(\n        [\n          // Centraliza o polegar quando ele é mais fino que a trilha.\n          'flex',\n          'data-[orientation=vertical]:justify-center',\n          'data-[orientation=horizontal]:items-center',\n\n          'm-(--scroll-area-scrollbar-inset,--spacing(0.5))',\n\n          // ESPESSURA — fina no toque, onde a barra só indica posição; mais grossa com mouse,\n          // onde vira alvo de arrasto. As duas regras leem a mesma variável, então uma classe no\n          // `Root` vale para os dois. Uma regra por orientação porque o comprimento vem do\n          // `top`/`bottom` que o Base UI escreve — uma altura explícita o desligaria.\n          'data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1.5))',\n\n          'data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1.5))',\n\n          // ÁREA DE TOQUE — pseudo-elemento de 12px, maior que a trilha visível; herda o\n          // `pointer-events` e some junto com ela. Cresce só para dentro: para fora, daria\n          // scroll à página. O `overflow-hidden` do `Root` seguraria, mas não se depende dele.\n          'before:absolute',\n          \"before:content-['']\",\n\n          'data-[orientation=vertical]:before:inset-y-0',\n          'data-[orientation=vertical]:before:inset-e-0',\n          'data-[orientation=vertical]:before:w-3',\n\n          'data-[orientation=horizontal]:before:inset-x-0',\n          'data-[orientation=horizontal]:before:bottom-0',\n          'data-[orientation=horizontal]:before:h-3',\n\n          // VISIBILIDADE — invisível e sem capturar clique em repouso. Aparece na hora e some\n          // com atraso: os estados zeram `delay`/`duration` na entrada, e a base volta a valer\n          // na saída.\n          'opacity-0',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-150',\n          'ease-exit',\n          'delay-300',\n\n          'data-hovering:opacity-100',\n          'data-hovering:pointer-events-auto',\n          'data-hovering:ease-enter',\n          'data-hovering:delay-0',\n\n          'data-scrolling:opacity-100',\n          'data-scrolling:pointer-events-auto',\n          'data-scrolling:duration-0',\n          'data-scrolling:delay-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollArea.Scrollbar';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,WAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GAEA;GAMA;GACA;GAEA;GACA;GAKA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"scroll-area-scrollbar.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-scrollbar.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaScrollbarProps = BaseScrollArea.Scrollbar.Props;\n\nexport type ScrollAreaScrollbarState = BaseScrollArea.Scrollbar.State;\n\n/**\n * A trilha do polegar, transparente e sobreposta ao conteúdo. O Base UI a posiciona inline\n * (`absolute` na borda do `Root`) e só a monta quando o eixo dela transborda.\n *\n * Espessura e recuo se ajustam pelas variáveis do `Root`, não por classe: um `w-*` passado aqui\n * perde para as regras `data-[orientation=…]:`, que têm especificidade maior.\n *\n * Com `scrollbars=\"always\"` no `Root`, as barras filhas diretas dele ficam sempre visíveis com\n * mouse, com a trilha de 16px; no toque, seguem o comportamento padrão.\n */\nexport const ScrollAreaScrollbar = (props: ScrollAreaScrollbarProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Scrollbar\n      data-component=\"ScrollArea.Scrollbar\"\n      className={mergeStateClassNames(\n        [\n          // Centraliza o polegar quando ele é mais fino que a trilha.\n          'flex',\n          'data-[orientation=vertical]:justify-center',\n          'data-[orientation=horizontal]:items-center',\n\n          'm-(--scroll-area-scrollbar-inset,--spacing(0.5))',\n\n          // ESPESSURA — fina no toque, onde a barra só indica posição; com mouse, 12px, onde vira\n          // alvo de arrasto e o polegar tem espaço para engrossar (ver `ScrollArea.Thumb`). As duas regras leem a mesma variável, então uma classe no\n          // `Root` vale para os dois. Uma regra por orientação porque o comprimento vem do\n          // `top`/`bottom` que o Base UI escreve — uma altura explícita o desligaria.\n          'data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(3))',\n\n          'data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(1))',\n          'pointer-fine:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(3))',\n\n          // SEMPRE VISÍVEL — `scrollbars=\"always\"` no `Root` (`data-scrollbars`). O seletor\n          // `[data-scrollbars=always]>&` vale só para a barra filha direta: um `ScrollArea`\n          // aninhado não herda. Ele soma um atributo à especificidade, então vence as regras\n          // de espessura acima sem depender da ordem do CSS; e a variável de quem usa vence\n          // todas, porque está no `var()`. Sem isso, a trilha fina e a opacidade 0 voltariam.\n          'pointer-fine:[[data-scrollbars=always]>&]:opacity-100',\n          'pointer-fine:[[data-scrollbars=always]>&]:pointer-events-auto',\n          'pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=vertical]:w-(--scroll-area-scrollbar-size,--spacing(4))',\n          'pointer-fine:[[data-scrollbars=always]>&]:data-[orientation=horizontal]:h-(--scroll-area-scrollbar-size,--spacing(4))',\n\n          // ÁREA DE TOQUE — pseudo-elemento de 12px, maior que a trilha visível; herda o\n          // `pointer-events` e some junto com ela. Cresce só para dentro: para fora, daria\n          // scroll à página. O `overflow-hidden` do `Root` seguraria, mas não se depende dele.\n          'before:absolute',\n          \"before:content-['']\",\n\n          'data-[orientation=vertical]:before:inset-y-0',\n          'data-[orientation=vertical]:before:inset-e-0',\n          'data-[orientation=vertical]:before:w-3',\n\n          'data-[orientation=horizontal]:before:inset-x-0',\n          'data-[orientation=horizontal]:before:bottom-0',\n          'data-[orientation=horizontal]:before:h-3',\n\n          // VISIBILIDADE — invisível e sem capturar clique em repouso. Aparece na hora e some\n          // com atraso: os estados zeram `delay`/`duration` na entrada, e a base volta a valer\n          // na saída.\n          'opacity-0',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-150',\n          'ease-exit',\n          'delay-300',\n\n          'data-hovering:opacity-100',\n          'data-hovering:pointer-events-auto',\n          'data-hovering:ease-enter',\n          'data-hovering:delay-0',\n\n          'data-scrolling:opacity-100',\n          'data-scrolling:pointer-events-auto',\n          'data-scrolling:duration-0',\n          'data-scrolling:delay-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollArea.Scrollbar';\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,WAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAEE;GACA;GACA;GAEA;GAMA;GACA;GAEA;GACA;GAOA;GACA;GACA;GACA;GAKA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAKA;GACA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-thumb.d.ts

@@ -4,7 +4,11 @@ export type ScrollAreaThumbProps = ScrollArea.Thumb.Props;
 export type ScrollAreaThumbState = ScrollArea.Thumb.State;
 /**
  * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,
- * ocupa a trilha toda. Translúcido para funcionar sobre qualquer fundo.
+ * ocupa a trilha toda.
+ *
+ * Tem três estados, em degraus da escala alpha do cinza, que é translúcida e funciona sobre
+ * qualquer fundo: repouso (entre o passo 8 e o 9), hover (10) e arrastando (11). Com mouse, no
+ * hover e ao arrastar, ele engrossa para 8px, sem passar da trilha; no toque, mantém a espessura.
  */
 export declare const ScrollAreaThumb: {
   (props: ScrollAreaThumbProps): import("react").JSX.Element;

package/dist/components/layout/scroll-area/scroll-area-thumb.js

@@ -4,7 +4,11 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/components/layout/scroll-area/scroll-area-thumb.tsx
 /**
 * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,
-* ocupa a trilha toda. Translúcido para funcionar sobre qualquer fundo.
+* ocupa a trilha toda.
+*
+* Tem três estados, em degraus da escala alpha do cinza, que é translúcida e funciona sobre
+* qualquer fundo: repouso (entre o passo 8 e o 9), hover (10) e arrastando (11). Com mouse, no
+* hover e ao arrastar, ele engrossa para 8px, sem passar da trilha; no toque, mantém a espessura.
 */
 const ScrollAreaThumb = (props) => {
 	const { className, ...rest } = props;
@@ -12,10 +16,16 @@ const ScrollAreaThumb = (props) => {
 		"data-component": "ScrollArea.Thumb",
 		className: mergeStateClassNames([
 			"size-(--scroll-area-thumb-size,100%)",
-			"rounded-full",
-			"bg-gray-9/50",
-			"active:bg-gray-10",
-			"transition-colors"
+			"pointer-fine:size-(--scroll-area-thumb-size,--spacing(1.5))",
+			"rounded-xs",
+			"bg-[color-mix(in_oklab,var(--gray-a8),var(--gray-a9))]",
+			"hover:bg-gray-a10",
+			"active:bg-gray-a11",
+			"pointer-fine:hover:[--scroll-area-thumb-size:min(--spacing(2),100%)]",
+			"pointer-fine:active:[--scroll-area-thumb-size:min(--spacing(2),100%)]",
+			"not-motion-reduced:transition-[background-color,width,height]",
+			"not-motion-reduced:duration-150",
+			"not-motion-reduced:ease-move"
 		], className),
 		...rest
 	});

package/dist/components/layout/scroll-area/scroll-area-thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area-thumb.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-thumb.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaThumbProps = BaseScrollArea.Thumb.Props;\n\nexport type ScrollAreaThumbState = BaseScrollArea.Thumb.State;\n\n/**\n * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,\n * ocupa a trilha toda. Translúcido para funcionar sobre qualquer fundo.\n */\nexport const ScrollAreaThumb = (props: ScrollAreaThumbProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Thumb\n      data-component=\"ScrollArea.Thumb\"\n      className={mergeStateClassNames(\n        [\n          // Os dois eixos sem olhar a orientação: o principal o Base UI escreve inline, e\n          // inline vence classe. Na prática, a classe só define o eixo cruzado.\n          'size-(--scroll-area-thumb-size,100%)',\n          'rounded-full',\n\n          // O `active:` dura o arrasto inteiro: o Base UI captura o ponteiro no polegar.\n          'bg-gray-9/50',\n          'active:bg-gray-10',\n          'transition-colors',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollArea.Thumb';\n"],"mappings":";;;;;;;;AAWA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,OAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GACA;GAGA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"scroll-area-thumb.js","names":["BaseScrollArea"],"sources":["../../../../src/components/layout/scroll-area/scroll-area-thumb.tsx"],"sourcesContent":["import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { mergeStateClassNames } from '#utils';\n\nexport type ScrollAreaThumbProps = BaseScrollArea.Thumb.Props;\n\nexport type ScrollAreaThumbState = BaseScrollArea.Thumb.State;\n\n/**\n * O polegar que corre na trilha. Espessura em `--scroll-area-thumb-size`, no `Root`; sem ela,\n * ocupa a trilha toda.\n *\n * Tem três estados, em degraus da escala alpha do cinza, que é translúcida e funciona sobre\n * qualquer fundo: repouso (entre o passo 8 e o 9), hover (10) e arrastando (11). Com mouse, no\n * hover e ao arrastar, ele engrossa para 8px, sem passar da trilha; no toque, mantém a espessura.\n */\nexport const ScrollAreaThumb = (props: ScrollAreaThumbProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseScrollArea.Thumb\n      data-component=\"ScrollArea.Thumb\"\n      className={mergeStateClassNames(\n        [\n          // Os dois eixos sem olhar a orientação: o principal o Base UI escreve inline, e\n          // inline vence classe. Na prática, a classe só define o eixo cruzado.\n          'size-(--scroll-area-thumb-size,100%)',\n          // Com mouse, 6px no meio da trilha de 12px (16px no `always`), com folga para o hover\n          // engrossar. No toque, a trilha toda. Também no `var()`: a variável do `Root` vence.\n          'pointer-fine:size-(--scroll-area-thumb-size,--spacing(1.5))',\n          'rounded-xs',\n\n          // Os três estados na escala alpha. O `active:` dura o arrasto inteiro: o Base UI\n          // captura o ponteiro no polegar.\n          'bg-[color-mix(in_oklab,var(--gray-a8),var(--gray-a9))]',\n          'hover:bg-gray-a10',\n          'active:bg-gray-a11',\n\n          // Com mouse, engrossa para 8px no hover e ao arrastar. A variável é redeclarada no\n          // próprio polegar, onde o `size-*` acima a lê; o `min` impede de passar da trilha, e\n          // numa barra fina ele só a ocupa toda.\n          'pointer-fine:hover:[--scroll-area-thumb-size:min(--spacing(2),100%)]',\n          'pointer-fine:active:[--scroll-area-thumb-size:min(--spacing(2),100%)]',\n\n          // A cor e o tamanho numa transição só, com uma curva só. Vale o `ease-move`: a troca de\n          // tamanho é movimento, e a de cor, de 150ms, acompanha sem diferença perceptível.\n          'not-motion-reduced:transition-[background-color,width,height]',\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:ease-move',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollArea.Thumb';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,WAAe,OAAhB;EACE,kBAAe;EACf,WAAW,qBACT;GAGE;GAGA;GACA;GAIA;GACA;GACA;GAKA;GACA;GAIA;GACA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc"}

package/dist/components/layout/scroll-area/scroll-area-viewport-variants.d.ts

@@ -22,7 +22,7 @@ export type ScrollAreaViewportVariants = {
  * já aparecer antes da primeira medição, quando ainda há conteúdo abaixo.
  */
 export declare const scrollAreaViewportVariants: (props?: ({
-  fade?: "vertical" | "horizontal" | "both" | null | undefined;
+  fade?: "both" | "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=scroll-area-viewport-variants.d.ts.map

package/dist/components/layout/separator/separator-variants.d.ts

@@ -22,7 +22,7 @@ export type SeparatorVariants = {
 };
 export declare const separatorDefaultVariants: Required<SeparatorVariants>;
 export declare const separatorVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | null | undefined;
+  colorScheme?: "gray" | "accent" | null | undefined;
   size?: "sm" | "md" | "lg" | "xl" | null | undefined;
   variant?: "solid" | "dashed" | "dotted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/layout/separator/separator-variants.js

@@ -14,7 +14,7 @@ const separatorVariants = cva([
 	variants: {
 		colorScheme: {
 			gray: ["border-gray-6"],
-			brand: ["border-brand-6"]
+			accent: ["border-accent-6"]
 		},
 		size: {
 			sm: ["[--separator-size:1px]"],

package/dist/components/layout/separator/separator-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator-variants.js","names":[],"sources":["../../../../src/components/layout/separator/separator-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SeparatorVariants = {\n  /**\n   * Cor da linha.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Espessura da linha: 1, 2, 4 ou 8px.\n   *\n   * @default 'sm'\n   */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * Estilo do traço.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'dashed' | 'dotted';\n};\n\nexport const separatorDefaultVariants: Required<SeparatorVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\nexport const separatorVariants = cva(\n  [\n    // A espessura vai só na borda do lado que desenha a linha. Um `border-*` de largura valeria\n    // para os quatro lados, e a linha sairia com o dobro da espessura e bordas laterais.\n    'data-[orientation=horizontal]:w-full',\n    'data-[orientation=horizontal]:border-t-(length:--separator-size)',\n\n    'data-[orientation=vertical]:self-stretch',\n    'data-[orientation=vertical]:border-s-(length:--separator-size)',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: ['border-gray-6'],\n        brand: ['border-brand-6'],\n      },\n      size: {\n        sm: ['[--separator-size:1px]'],\n        md: ['[--separator-size:2px]'],\n        lg: ['[--separator-size:4px]'],\n        xl: ['[--separator-size:8px]'],\n      },\n      variant: {\n        solid: ['border-solid'],\n        dashed: ['border-dashed'],\n        dotted: ['border-dotted'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: separatorDefaultVariants.colorScheme,\n      size: separatorDefaultVariants.size,\n      variant: separatorDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,2BAAwD;CACnE,aAAa;CACb,MAAM;CACN,SAAS;AACX;AAEA,MAAa,oBAAoB,IAC/B;CAGE;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM,CAAC,eAAe;GACtB,OAAO,CAAC,gBAAgB;EAC1B;EACA,MAAM;GACJ,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;EAC/B;EACA,SAAS;GACP,OAAO,CAAC,cAAc;GACtB,QAAQ,CAAC,eAAe;GACxB,QAAQ,CAAC,eAAe;EAC1B;CACF;CACA,iBAAiB;EACf,aAAa,yBAAyB;EACtC,MAAM,yBAAyB;EAC/B,SAAS,yBAAyB;CACpC;AACF,CACF"}
+{"version":3,"file":"separator-variants.js","names":[],"sources":["../../../../src/components/layout/separator/separator-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeCore } from '#types';\n\nexport type SeparatorVariants = {\n  /**\n   * Cor da linha.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Espessura da linha: 1, 2, 4 ou 8px.\n   *\n   * @default 'sm'\n   */\n  size?: 'sm' | 'md' | 'lg' | 'xl';\n  /**\n   * Estilo do traço.\n   *\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'dashed' | 'dotted';\n};\n\nexport const separatorDefaultVariants: Required<SeparatorVariants> = {\n  colorScheme: 'gray',\n  size: 'sm',\n  variant: 'solid',\n};\n\nexport const separatorVariants = cva(\n  [\n    // A espessura vai só na borda do lado que desenha a linha. Um `border-*` de largura valeria\n    // para os quatro lados, e a linha sairia com o dobro da espessura e bordas laterais.\n    'data-[orientation=horizontal]:w-full',\n    'data-[orientation=horizontal]:border-t-(length:--separator-size)',\n\n    'data-[orientation=vertical]:self-stretch',\n    'data-[orientation=vertical]:border-s-(length:--separator-size)',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: ['border-gray-6'],\n        accent: ['border-accent-6'],\n      },\n      size: {\n        sm: ['[--separator-size:1px]'],\n        md: ['[--separator-size:2px]'],\n        lg: ['[--separator-size:4px]'],\n        xl: ['[--separator-size:8px]'],\n      },\n      variant: {\n        solid: ['border-solid'],\n        dashed: ['border-dashed'],\n        dotted: ['border-dotted'],\n      },\n    },\n    defaultVariants: {\n      colorScheme: separatorDefaultVariants.colorScheme,\n      size: separatorDefaultVariants.size,\n      variant: separatorDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAwBA,MAAa,2BAAwD;CACnE,aAAa;CACb,MAAM;CACN,SAAS;AACX;AAEA,MAAa,oBAAoB,IAC/B;CAGE;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,aAAa;GACX,MAAM,CAAC,eAAe;GACtB,QAAQ,CAAC,iBAAiB;EAC5B;EACA,MAAM;GACJ,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;GAC7B,IAAI,CAAC,wBAAwB;EAC/B;EACA,SAAS;GACP,OAAO,CAAC,cAAc;GACtB,QAAQ,CAAC,eAAe;GACxB,QAAQ,CAAC,eAAe;EAC1B;CACF;CACA,iBAAiB;EACf,aAAa,yBAAyB;EACtC,MAAM,yBAAyB;EAC/B,SAAS,yBAAyB;CACpC;AACF,CACF"}

package/dist/components/overlays/action-bar/action-bar-selection-trigger.js

@@ -21,7 +21,7 @@ const ActionBarSelectionTrigger = (props) => {
 			"corner-squircle",
 			"border",
 			"border-dashed",
-			"border-gray-alpha-7",
+			"border-gray-7",
 			"text-sm",
 			"text-gray-12",
 			"font-medium",
@@ -30,7 +30,7 @@ const ActionBarSelectionTrigger = (props) => {
 			"hover:transition-[background-color]",
 			"hover:ease-in",
 			"hover:duration-150",
-			"hover:bg-gray-alpha-3",
+			"hover:bg-gray-a3",
 			"ring-gray-9",
 			"focus-ring-outside",
 			"[&_svg]:shrink-0"

package/dist/components/overlays/action-bar/action-bar-selection-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-bar-selection-trigger.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-selection-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ActionBarSelectionTriggerProps = useRender.ComponentProps<'button'>;\n\n/**\n * Resumo da seleção (\"3 selecionados\"), no início da barra. É um botão para quem usa ligar uma\n * ação à contagem, como limpar a seleção ou listar os itens.\n */\nexport const ActionBarSelectionTrigger = (\n  props: ActionBarSelectionTriggerProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'ActionBar.SelectionTrigger',\n    type: 'button' as const,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-2',\n        // Estica até a altura dos botões ao lado.\n        'self-stretch',\n        'shrink-0',\n\n        'px-3',\n\n        'rounded-md',\n        'corner-squircle',\n        'border',\n        'border-dashed',\n        'border-gray-alpha-7',\n\n        'text-sm',\n        'text-gray-12',\n        'font-medium',\n        'whitespace-nowrap',\n\n        'cursor-pointer',\n\n        'hover:transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n        'hover:ease-in',\n        'hover:duration-150',\n        'hover:bg-gray-alpha-3',\n\n        'ring-gray-9',\n        'focus-ring-outside',\n\n        '[&_svg]:shrink-0',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nActionBarSelectionTrigger.displayName = 'ActionBar.SelectionTrigger';\n"],"mappings":";;;;;;;AASA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"action-bar-selection-trigger.js","names":[],"sources":["../../../../src/components/overlays/action-bar/action-bar-selection-trigger.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type ActionBarSelectionTriggerProps = useRender.ComponentProps<'button'>;\n\n/**\n * Resumo da seleção (\"3 selecionados\"), no início da barra. É um botão para quem usa ligar uma\n * ação à contagem, como limpar a seleção ou listar os itens.\n */\nexport const ActionBarSelectionTrigger = (\n  props: ActionBarSelectionTriggerProps,\n) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'ActionBar.SelectionTrigger',\n    type: 'button' as const,\n    className: mergeTwClassNames(\n      [\n        'inline-flex',\n        'items-center',\n        'gap-2',\n        // Estica até a altura dos botões ao lado.\n        'self-stretch',\n        'shrink-0',\n\n        'px-3',\n\n        'rounded-md',\n        'corner-squircle',\n        'border',\n        'border-dashed',\n        'border-gray-7',\n\n        'text-sm',\n        'text-gray-12',\n        'font-medium',\n        'whitespace-nowrap',\n\n        'cursor-pointer',\n\n        'hover:transition-[background-color]', // O `transition-colors` animaria também a cor do anel de foco\n        'hover:ease-in',\n        'hover:duration-150',\n        'hover:bg-gray-a3',\n\n        'ring-gray-9',\n        'focus-ring-outside',\n\n        '[&_svg]:shrink-0',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'button',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nActionBarSelectionTrigger.displayName = 'ActionBar.SelectionTrigger';\n"],"mappings":";;;;;;;AASA,MAAa,6BACX,UACG;CACH,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,MAAM;EACN,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,0BAA0B,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-backdrop.d.ts

@@ -6,8 +6,7 @@ export type AlertDialogBackdropState = AlertDialog.Backdrop.State;
  * Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a
  * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.
  *
- * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
- * de `overlays`).
+ * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
  */
 export declare const AlertDialogBackdrop: {
   (props: AlertDialogBackdropProps): import("react").JSX.Element;

package/dist/components/overlays/alert-dialog/alert-dialog-backdrop.js

@@ -6,8 +6,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 * Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a
 * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.
 *
-* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README
-* de `overlays`).
+* Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.
 */
 const AlertDialogBackdrop = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/alert-dialog/alert-dialog-backdrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-backdrop.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-backdrop.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogBackdropProps = BaseAlertDialog.Backdrop.Props;\n\nexport type AlertDialogBackdropState = BaseAlertDialog.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a\n * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças (tabela no README\n * de `overlays`).\n */\nexport const AlertDialogBackdrop = (props: AlertDialogBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAlertDialog.Backdrop\n      data-component=\"AlertDialog.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'not-motion-reduced:data-ending-style:ease-exit',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogBackdrop.displayName = 'AlertDialog.Backdrop';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,UAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"alert-dialog-backdrop.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-backdrop.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogBackdropProps = BaseAlertDialog.Backdrop.Props;\n\nexport type AlertDialogBackdropState = BaseAlertDialog.Backdrop.State;\n\n/**\n * Camada atrás do popup que cobre e escurece a página. Num alert dialog aninhado, o Base UI não a\n * renderiza (a não ser com `forceRender`): quem escurece é o popup de trás.\n *\n * Cópia de `PopoverBackdrop`, a origem do backdrop dos popups, sem diferenças.\n */\nexport const AlertDialogBackdrop = (props: AlertDialogBackdropProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAlertDialog.Backdrop\n      data-component=\"AlertDialog.Backdrop\"\n      className={mergeStateClassNames(\n        [\n          'fixed',\n          'inset-0',\n          'min-h-dvh',\n          'supports-[-webkit-touch-callout:none]:absolute',\n\n          'bg-black/40',\n\n          'not-motion-reduced:transition-opacity',\n          'not-motion-reduced:ease-enter',\n          // Mesma duração e curva do `Popup` em cada sentido, para os dois sumirem juntos.\n          'not-motion-reduced:duration-150',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'not-motion-reduced:data-ending-style:ease-exit',\n\n          'data-ending-style:opacity-0',\n          'data-starting-style:opacity-0',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogBackdrop.displayName = 'AlertDialog.Backdrop';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,uBAAuB,UAAoC;CACtE,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,UAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GACA;GAEA;GAEA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,oBAAoB,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-body.d.ts

@@ -5,8 +5,11 @@ export type AlertDialogBodyProps = useRender.ComponentProps<'div'>;
  * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.
  * Opcional: o caso comum é só `Header` e `Footer`.
  *
- * Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogBody` (o mecanismo está explicado lá), com o
+ * espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda
+ * (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um
+ * `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície
+ * da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogBody: {
   (props: AlertDialogBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/overlays/alert-dialog/alert-dialog-body.js

@@ -5,8 +5,11 @@ import { mergeProps, useRender } from "@base-ui/react";
 * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.
 * Opcional: o caso comum é só `Header` e `Footer`.
 *
-* Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogBody` (o mecanismo está explicado lá), com o
+* espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda
+* (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um
+* `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície
+* da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogBody = (props) => {
 	const { render, className, ...rest } = props;
@@ -16,11 +19,13 @@ const AlertDialogBody = (props) => {
 			"flex",
 			"flex-1",
 			"flex-col",
+			"gap-4",
 			"min-h-0",
 			"overflow-y-auto",
 			"px-(--alert-dialog-padding)",
-			"py-2",
 			"first:pt-(--alert-dialog-padding)",
+			"not-first:mt-4",
+			"sm:[[data-component='AlertDialog.Header']:has(>[data-component='AlertDialog.Indicator'])~&]:pl-[calc(var(--alert-dialog-padding)+--spacing(8))]",
 			"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)"
 		], className)
 	};

package/dist/components/overlays/alert-dialog/alert-dialog-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-body.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.\n * Opcional: o caso comum é só `Header` e `Footer`.\n *\n * Cópia de `DialogBody`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogBody = (props: AlertDialogBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n        'min-h-0',\n        'overflow-y-auto',\n\n        'px-(--alert-dialog-padding)',\n        'py-2',\n        'first:pt-(--alert-dialog-padding)',\n        // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogBody.displayName = 'AlertDialog.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"alert-dialog-body.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo extra do alert dialog, como a lista do que será apagado ou um campo de confirmação.\n * Opcional: o caso comum é só `Header` e `Footer`.\n *\n * Cópia de `DialogBody` (o mecanismo está explicado lá), com o\n * espaço de cima por margem de 16px depois de outra parte, sem o `py-2`, e o recuo à esquerda\n * (padding mais 32px, a partir de `sm`) quando o `AlertDialog.Header` anterior tem um\n * `AlertDialog.Indicator`, para o conteúdo alinhar ao texto do header. Segue o modelo de superfície\n * da pendência \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogBody = (props: AlertDialogBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n        'gap-4',\n        // Sem o `min-h-0`, o item flex não encolhe abaixo do conteúdo, e o popup vaza da tela.\n        'min-h-0',\n        'overflow-y-auto',\n\n        'px-(--alert-dialog-padding)',\n        'first:pt-(--alert-dialog-padding)',\n        // Depois de outra parte, o espaço de 16px é margem, e não padding: fica fora da área que\n        // rola. Com padding, o conteúdo rolado seria cortado rente à descrição do header, e com a\n        // margem ele some 16px abaixo dela.\n        'not-first:mt-4',\n        // Com um indicador no header anterior (ícone de 20px mais gap de 12px), recua o conteúdo\n        // para o alinhar ao texto do header. No celular o header é centralizado, sem recuo.\n        \"sm:[[data-component='AlertDialog.Header']:has(>[data-component='AlertDialog.Indicator'])~&]:pl-[calc(var(--alert-dialog-padding)+--spacing(8))]\",\n        // Por irmão, e não por `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogBody.displayName = 'AlertDialog.Body';\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GAIA;GAGA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-description.d.ts

@@ -6,8 +6,7 @@ export type AlertDialogDescriptionState = AlertDialog.Description.State;
  * Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê
  * junto com o título ao abrir.
  *
- * Cópia de `DialogDescription`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogDescription`, sem diferenças; o mecanismo está explicado lá.
  */
 export declare const AlertDialogDescription: {
   (props: AlertDialogDescriptionProps): import("react").JSX.Element;

package/dist/components/overlays/alert-dialog/alert-dialog-description.js

@@ -6,8 +6,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 * Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê
 * junto com o título ao abrir.
 *
-* Cópia de `DialogDescription`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogDescription`, sem diferenças; o mecanismo está explicado lá.
 */
 const AlertDialogDescription = (props) => {
 	const { className, ...rest } = props;

package/dist/components/overlays/alert-dialog/alert-dialog-description.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-description.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-description.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogDescriptionProps = BaseAlertDialog.Description.Props;\n\nexport type AlertDialogDescriptionState = BaseAlertDialog.Description.State;\n\n/**\n * Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê\n * junto com o título ao abrir.\n *\n * Cópia de `DialogDescription`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAlertDialog.Description\n      data-component=\"AlertDialog.Description\"\n      className={mergeStateClassNames(\n        ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogDescription.displayName = 'AlertDialog.Description';\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,aAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}
+{"version":3,"file":"alert-dialog-description.js","names":["BaseAlertDialog"],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-description.tsx"],"sourcesContent":["import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';\nimport { mergeStateClassNames } from '#utils';\n\nexport type AlertDialogDescriptionProps = BaseAlertDialog.Description.Props;\n\nexport type AlertDialogDescriptionState = BaseAlertDialog.Description.State;\n\n/**\n * Texto de apoio do alert dialog, ligado ao popup por `aria-describedby`: o leitor de tela o lê\n * junto com o título ao abrir.\n *\n * Cópia de `DialogDescription`, sem diferenças; o mecanismo está explicado lá.\n */\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseAlertDialog.Description\n      data-component=\"AlertDialog.Description\"\n      className={mergeStateClassNames(\n        ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nAlertDialogDescription.displayName = 'AlertDialog.Description';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA0B,UAAuC;CAC5E,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,YAAgB,aAAjB;EACE,kBAAe;EACf,WAAW,qBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,uBAAuB,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-footer.d.ts

@@ -2,10 +2,13 @@ import { useRender } from "@base-ui/react";
 //#region src/components/overlays/alert-dialog/alert-dialog-footer.d.ts
 export type AlertDialogFooterProps = useRender.ComponentProps<'div'>;
 /**
- * Linha de ações na base do alert dialog, alinhadas à direita.
+ * Linha de ações na base do alert dialog, alinhadas à direita. Em tela pequena, empilha as ações
+ * na largura toda, com a última em cima: a ordem do DOM e do foco não muda (cancelar antes da
+ * ação).
  *
- * Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Cópia de `DialogFooter` (o mecanismo está explicado lá), com a
+ * pilha do celular e sempre 24px antes das ações (sem o `pt-2`). Segue o modelo de superfície
+ * da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogFooter: {
   (props: AlertDialogFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/overlays/alert-dialog/alert-dialog-footer.js

@@ -2,10 +2,13 @@ import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
 import { mergeProps, useRender } from "@base-ui/react";
 //#region src/components/overlays/alert-dialog/alert-dialog-footer.tsx
 /**
-* Linha de ações na base do alert dialog, alinhadas à direita.
+* Linha de ações na base do alert dialog, alinhadas à direita. Em tela pequena, empilha as ações
+* na largura toda, com a última em cima: a ordem do DOM e do foco não muda (cancelar antes da
+* ação).
 *
-* Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Cópia de `DialogFooter` (o mecanismo está explicado lá), com a
+* pilha do celular e sempre 24px antes das ações (sem o `pt-2`). Segue o modelo de superfície
+* da pendência "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogFooter = (props) => {
 	const { render, className, ...rest } = props;
@@ -17,9 +20,10 @@ const AlertDialogFooter = (props) => {
 			"justify-end",
 			"gap-2",
 			"px-(--alert-dialog-padding)",
-			"pt-2",
+			"pt-(--alert-dialog-padding)",
 			"pb-(--alert-dialog-padding)",
-			"first:pt-(--alert-dialog-padding)"
+			"max-sm:flex-col-reverse",
+			"max-sm:*:w-full"
 		], className)
 	};
 	return useRender({

package/dist/components/overlays/alert-dialog/alert-dialog-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do alert dialog, alinhadas à direita.\n *\n * Cópia de `DialogFooter`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogFooter = (props: AlertDialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--alert-dialog-padding)',\n        'pt-2',\n        'pb-(--alert-dialog-padding)',\n        // Abrindo o dialog, fecha o respiro de cima.\n        'first:pt-(--alert-dialog-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"alert-dialog-footer.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do alert dialog, alinhadas à direita. Em tela pequena, empilha as ações\n * na largura toda, com a última em cima: a ordem do DOM e do foco não muda (cancelar antes da\n * ação).\n *\n * Cópia de `DialogFooter` (o mecanismo está explicado lá), com a\n * pilha do celular e sempre 24px antes das ações (sem o `pt-2`). Segue o modelo de superfície\n * da pendência \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogFooter = (props: AlertDialogFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'justify-end',\n        'gap-2',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        'pb-(--alert-dialog-padding)',\n\n        'max-sm:flex-col-reverse',\n        'max-sm:*:w-full',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer';\n"],"mappings":";;;;;;;;;;;;AAcA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}

package/dist/components/overlays/alert-dialog/alert-dialog-header.d.ts

@@ -4,8 +4,15 @@ export type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;
 /**
  * Topo do alert dialog, onde ficam título e descrição.
  *
- * Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está
- * explicado lá.
+ * Com um `AlertDialog.Indicator` como filho, vira um grid de duas colunas: o indicador à esquerda,
+ * alinhado à primeira linha do título, e os demais filhos (título, descrição, o que vier) na
+ * coluna da direita, alinhados entre si. Em tela pequena o grid se desfaz: o indicador fica acima
+ * do texto e tudo é centralizado.
+ *
+ * Cópia de `DialogHeader` (o mecanismo está explicado lá), com o
+ * grid do indicador, o texto centralizado no celular, 4px entre título e descrição e sem o `pb-2`:
+ * o espaço antes da parte seguinte é o padding dela. Segue o modelo de superfície da pendência
+ * "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
  */
 export declare const AlertDialogHeader: {
   (props: AlertDialogHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/dist/components/overlays/alert-dialog/alert-dialog-header.js

@@ -4,8 +4,15 @@ import { mergeProps, useRender } from "@base-ui/react";
 /**
 * Topo do alert dialog, onde ficam título e descrição.
 *
-* Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está
-* explicado lá.
+* Com um `AlertDialog.Indicator` como filho, vira um grid de duas colunas: o indicador à esquerda,
+* alinhado à primeira linha do título, e os demais filhos (título, descrição, o que vier) na
+* coluna da direita, alinhados entre si. Em tela pequena o grid se desfaz: o indicador fica acima
+* do texto e tudo é centralizado.
+*
+* Cópia de `DialogHeader` (o mecanismo está explicado lá), com o
+* grid do indicador, o texto centralizado no celular, 4px entre título e descrição e sem o `pb-2`:
+* o espaço antes da parte seguinte é o padding dela. Segue o modelo de superfície da pendência
+* "Superfícies" do ROADMAP, ainda não aplicado ao Dialog.
 */
 const AlertDialogHeader = (props) => {
 	const { render, className, ...rest } = props;
@@ -14,11 +21,18 @@ const AlertDialogHeader = (props) => {
 		className: mergeTwClassNames([
 			"flex",
 			"flex-col",
-			"gap-0.5",
+			"gap-1",
 			"px-(--alert-dialog-padding)",
 			"pt-(--alert-dialog-padding)",
-			"pb-2",
-			"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)"
+			"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)",
+			"max-sm:text-center",
+			"max-sm:[&>[data-component='AlertDialog.Indicator']]:mb-2",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:grid",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:grid-cols-[auto_1fr]",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:gap-x-3",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>:not([data-component='AlertDialog.Indicator'])]:col-start-2",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:col-start-1",
+			"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:row-start-1"
 		], className)
 	};
 	return useRender({

package/dist/components/overlays/alert-dialog/alert-dialog-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-header.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do alert dialog, onde ficam título e descrição.\n *\n * Cópia de `DialogHeader`, sem diferenças (tabela no README de `overlays`); o mecanismo está\n * explicado lá.\n */\nexport const AlertDialogHeader = (props: AlertDialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        'pb-2',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do dialog embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogHeader.displayName = 'AlertDialog.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAGA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"alert-dialog-header.js","names":[],"sources":["../../../../src/components/overlays/alert-dialog/alert-dialog-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type AlertDialogHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do alert dialog, onde ficam título e descrição.\n *\n * Com um `AlertDialog.Indicator` como filho, vira um grid de duas colunas: o indicador à esquerda,\n * alinhado à primeira linha do título, e os demais filhos (título, descrição, o que vier) na\n * coluna da direita, alinhados entre si. Em tela pequena o grid se desfaz: o indicador fica acima\n * do texto e tudo é centralizado.\n *\n * Cópia de `DialogHeader` (o mecanismo está explicado lá), com o\n * grid do indicador, o texto centralizado no celular, 4px entre título e descrição e sem o `pb-2`:\n * o espaço antes da parte seguinte é o padding dela. Segue o modelo de superfície da pendência\n * \"Superfícies\" do ROADMAP, ainda não aplicado ao Dialog.\n */\nexport const AlertDialogHeader = (props: AlertDialogHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'AlertDialog.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-1',\n\n        'px-(--alert-dialog-padding)',\n        'pt-(--alert-dialog-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do dialog embaixo. Por irmão, e não por\n        // `last:`, porque um `Close` pode vir depois.\n        \"[&:not(:has(~[data-component='AlertDialog.Body'],~[data-component='AlertDialog.Footer']))]:pb-(--alert-dialog-padding)\",\n\n        'max-sm:text-center',\n        // Em coluna, o `gap` de 4px colaria o indicador no título; com o `mb-2`, ficam 12px.\n        \"max-sm:[&>[data-component='AlertDialog.Indicator']]:mb-2\",\n        // O grid vale a partir de `sm`; abaixo, o header segue em coluna, com o indicador acima do\n        // texto. O indicador fixa a coluna e a linha 1 para valer qualquer que seja a ordem dos\n        // filhos, e todo o resto vai para a coluna 2, alinhado entre si.\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:grid\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:grid-cols-[auto_1fr]\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:gap-x-3\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>:not([data-component='AlertDialog.Indicator'])]:col-start-2\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:col-start-1\",\n        \"sm:has-[>[data-component='AlertDialog.Indicator']]:[&>[data-component='AlertDialog.Indicator']]:row-start-1\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nAlertDialogHeader.displayName = 'AlertDialog.Header';\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAGA;GAEA;GAEA;GAIA;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,kBAAkB,cAAc"}