From 62aeb4c19a3c290a9b4cb27c9dfecd75d9d0b408 Mon Sep 17 00:00:00 2001
From: Kyle Foster <kfoster@cloudflare.com>
Date: Thu, 10 Sep 2026 16:24:44 -0400
Subject: [PATCH 1/2] style(layer-dialog): refine dialog surfaces

---
 .../src/components/demos/LayerDialogDemo.tsx  | 11 ++++--
 .../src/pages/components/layer-dialog.mdx     |  2 +-
 .../components/layer-dialog/layer-dialog.tsx  | 36 ++++++++++---------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/LayerDialogDemo.tsx b/packages/kumo-docs-astro/src/components/demos/LayerDialogDemo.tsx
index 9528c617e..367c6f5fe 100644
--- a/packages/kumo-docs-astro/src/components/demos/LayerDialogDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/LayerDialogDemo.tsx
@@ -142,7 +142,10 @@ export function LayerDialogAlertDemo() {
       <LayerDialog.Content>
         <LayerDialog.Title>Delete Worker</LayerDialog.Title>
         <LayerDialog.Description>
-          Deleting <strong className="text-kumo-default">{workerName}</strong>{" "}
+          Deleting{" "}
+          <strong className="font-medium text-kumo-default">
+            {workerName}
+          </strong>{" "}
           is permanent.
         </LayerDialog.Description>
         <LayerDialog.Body>
@@ -155,7 +158,11 @@ export function LayerDialogAlertDemo() {
             <Input
               label={
                 <>
-                  Type <strong>{workerName}</strong> to confirm
+                  Type{" "}
+                  <strong className="font-medium text-kumo-default">
+                    {workerName}
+                  </strong>{" "}
+                  to confirm
                 </>
               }
               onChange={(event) => setConfirmation(event.target.value)}
diff --git a/packages/kumo-docs-astro/src/pages/components/layer-dialog.mdx b/packages/kumo-docs-astro/src/pages/components/layer-dialog.mdx
index 618c030f9..92e5429ed 100644
--- a/packages/kumo-docs-astro/src/pages/components/layer-dialog.mdx
+++ b/packages/kumo-docs-astro/src/pages/components/layer-dialog.mdx
@@ -97,7 +97,7 @@ Consumers cannot mix these layouts or add more primary actions. Use the X for re
 
 <ComponentSection>
 ## Informational dialog
-`Title` and `Description` always live in the bordered body surface. The title frame remains visible while the body scrolls, gains a bottom border after scrolling, and has the sole automatic X dismissal action. Once the body scrolls past the top, the description folds away beneath the title to give the content more room, and unfolds again at the top. The content edge mask signals overflow.
+`Title` and `Description` always live in the bordered body surface. The title frame remains visible while the body scrolls and has the sole automatic X dismissal action. Once the body scrolls past the top, the description folds away beneath the title to give the content more room, and unfolds again at the top. The content edge mask signals overflow.
 <ComponentExample demo="LayerDialogInformationalDemo"><LayerDialogInformationalDemo client:load /></ComponentExample>
 </ComponentSection>
 
diff --git a/packages/kumo/src/components/layer-dialog/layer-dialog.tsx b/packages/kumo/src/components/layer-dialog/layer-dialog.tsx
index 7d612144f..9c2881df7 100644
--- a/packages/kumo/src/components/layer-dialog/layer-dialog.tsx
+++ b/packages/kumo/src/components/layer-dialog/layer-dialog.tsx
@@ -326,7 +326,12 @@ export interface LayerDialogTitleProps {
 
 function LayerDialogTitle({ children }: LayerDialogTitleProps) {
   const title = (props: ComponentPropsWithoutRef<"h2">) => (
-    <Text {...props} as="h2" variant="heading">
+    <Text
+      {...props}
+      as="h2"
+      variant="heading"
+      DANGEROUS_className="font-medium"
+    >
       {children}
     </Text>
   );
@@ -360,13 +365,12 @@ export interface LayerDialogBodyProps {
   children: ReactNode;
 }
 
-/** Scroll distance before the header shows its divider and condenses. */
+/** Scroll distance before the header description condenses. */
 const SCROLL_THRESHOLD = 8;
 /** Overflow that must remain after the description collapses (see handleScroll). */
 const CONDENSE_MIN_OVERFLOW = 16;
 
 function LayerDialogBody({ children }: LayerDialogBodyProps) {
-  const [hasScrolled, setHasScrolled] = useState(false);
   const [condensed, setCondensed] = useState(false);
   const descriptionClipRef = useRef<HTMLDivElement>(null);
   const dismissDisabled = useContext(DismissDisabledContext);
@@ -376,7 +380,6 @@ function LayerDialogBody({ children }: LayerDialogBodyProps) {
   const handleScroll = (event: UIEvent<HTMLDivElement>) => {
     const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
     const scrolled = scrollTop > SCROLL_THRESHOLD;
-    setHasScrolled(scrolled);
 
     if (!scrolled) {
       setCondensed(false);
@@ -404,15 +407,8 @@ function LayerDialogBody({ children }: LayerDialogBodyProps) {
   );
 
   return (
-    <LayerCard.Primary className="min-h-0 flex-1 !gap-0 overflow-hidden border border-kumo-line !p-0 !ring-0">
-      <div
-        className={cn(
-          "z-10 flex shrink-0 items-start justify-between gap-4 bg-kumo-base px-4 py-4 transition-[border-color]",
-          hasScrolled
-            ? "border-b border-kumo-line"
-            : "border-b border-transparent",
-        )}
-      >
+    <LayerCard.Primary className="min-h-0 flex-1 gap-0 p-0">
+      <div className="z-10 flex shrink-0 items-start justify-between gap-4 rounded-t-lg bg-kumo-base px-4.5 py-4">
         <div className="flex min-w-0 flex-col">
           {title}
           {description && (
@@ -443,7 +439,7 @@ function LayerDialogBody({ children }: LayerDialogBodyProps) {
           className="min-h-0 flex-1 overscroll-none [mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]"
           onScroll={handleScroll}
         >
-          <ScrollAreaBase.Content className="px-4 pb-4">
+          <ScrollAreaBase.Content className="px-5 pb-5">
             {content}
           </ScrollAreaBase.Content>
         </ScrollAreaBase.Viewport>
@@ -472,8 +468,9 @@ function LayerDialogIconClose({
     <Button
       {...closeProps}
       aria-label={label}
+      className="-mt-1.5 -mr-1.5 rounded-lg"
       disabled={disabled}
-      icon={X}
+      icon={<X size={15} />}
       shape="square"
       size="sm"
       variant="ghost"
@@ -541,7 +538,7 @@ const LayerDialogActions = Object.assign(
     }
 
     return (
-      <div className="flex w-full shrink-0 items-center justify-between gap-2 pt-2 pb-1">
+      <div className="flex w-full shrink-0 items-center justify-between gap-2 pt-1.75">
         <LayerDialogDismiss disabled={dismissDisabled} label={label} />
         {children}
       </div>
@@ -561,7 +558,12 @@ function LayerDialogDismiss({
   label: string;
 }) {
   const close = (closeProps: ComponentPropsWithoutRef<"button">) => (
-    <Button {...closeProps} disabled={disabled} variant="ghost">
+    <Button
+      {...closeProps}
+      className="hover:bg-kumo-fill/50"
+      disabled={disabled}
+      variant="ghost"
+    >
       {label}
     </Button>
   );

From 4e84ab4c45fecfc654b1177b268eba6a598dde0e Mon Sep 17 00:00:00 2001
From: Kyle Foster <kfoster@cloudflare.com>
Date: Thu, 10 Sep 2026 16:49:09 -0400
Subject: [PATCH 2/2] style(layer-dialog): tighten body padding

---
 packages/kumo/src/components/layer-dialog/layer-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kumo/src/components/layer-dialog/layer-dialog.tsx b/packages/kumo/src/components/layer-dialog/layer-dialog.tsx
index 9c2881df7..3d925443f 100644
--- a/packages/kumo/src/components/layer-dialog/layer-dialog.tsx
+++ b/packages/kumo/src/components/layer-dialog/layer-dialog.tsx
@@ -439,7 +439,7 @@ function LayerDialogBody({ children }: LayerDialogBodyProps) {
           className="min-h-0 flex-1 overscroll-none [mask-image:linear-gradient(to_bottom,transparent_0,black_min(24px,var(--scroll-area-overflow-y-start,24px)),black_calc(100%-min(24px,var(--scroll-area-overflow-y-end,24px))),transparent_100%)]"
           onScroll={handleScroll}
         >
-          <ScrollAreaBase.Content className="px-5 pb-5">
+          <ScrollAreaBase.Content className="px-4.5 pb-4.5">
             {content}
           </ScrollAreaBase.Content>
         </ScrollAreaBase.Viewport>