Lock page scroll while a modal dialog is open

Pure CSS: html:has(<dialog>:modal) gets overflow: hidden. A scroll
timeline sets scrollbar-gutter: stable only when the page can scroll,
so the layout doesn't shift.

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## Unreleased
+## [Unreleased]
+
+### Fixed
+
+- Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup.
+- Fixed long Tooltip text clipping instead of showing an ellipsis across all style packs.
+- Locked page scroll while a modal Dialog, Alert Dialog, Command Dialog or Drawer is open.
 
 ## [1.0.2] - 2026-07-06
 

site/src/docs/components/combobox.mdx

@@ -85,6 +85,8 @@ Combobox is input-first. The visible input filters the list; the hidden input st
   </Step>
 </Steps>
 
+Pressing Escape in the input closes an open suggestions popup without dismissing an enclosing dialog. Once the popup is closed, press Escape again to dismiss the dialog.
+
 ### HTML structure
 
 <dl>

site/src/docs/components/tooltip.mdx

@@ -53,6 +53,14 @@ Basecoat tooltips are CSS-only and text-only. This intentionally differs from sh
 <button class="btn" data-variant="outline" data-tooltip="Default tooltip">Default</button>
 </Preview>
 
+### Long text
+
+Tooltips stay on one line and truncate with an ellipsis when the text exceeds the maximum width. This intentionally differs from shadcn/ui's multiline tooltip content.
+
+<Preview>
+<button class="btn" data-variant="outline" data-tooltip="A tooltip with enough text to exceed the default maximum width and demonstrate truncation">Hover</button>
+</Preview>
+
 ### Sides
 
 <Preview>

src/css/components/dialog.css

@@ -1,5 +1,19 @@
 /* Dialog */
+@keyframes dialog-scroll-lock {
+  from, to {
+    scrollbar-gutter: stable;
+  }
+}
+
 @layer components {
+  /* Lock page scroll while a modal dialog is open. The scroll timeline only
+     reserves the scrollbar gutter if the page can scroll, so nothing shifts. */
+  html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
+    overflow: hidden;
+    animation: dialog-scroll-lock linear both;
+    animation-timeline: scroll(self);
+  }
+
   .dialog,
   .alert-dialog {
     @apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;

src/css/components/tooltip.css

@@ -4,7 +4,7 @@
     @apply relative;
 
     &:before {
-      @apply absolute z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
+      @apply absolute block z-[60] w-fit max-w-xs origin-(--transform-origin) scale-95 truncate invisible opacity-0 transition-all pointer-events-none content-[attr(data-tooltip)];
     }
 
     &:hover:before {

src/css/styles/luma.css

@@ -1324,7 +1324,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
+    @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/lyra.css

@@ -1327,7 +1327,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
+    @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/maia.css

@@ -1312,7 +1312,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-4xl;
+    @apply bg-foreground text-background rounded-2xl px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/mira.css

@@ -1321,7 +1321,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
+    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/nova.css

@@ -1335,7 +1335,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
+    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/rhea.css

@@ -1329,7 +1329,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-lg;
+    @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/sera.css

@@ -1345,7 +1345,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-none;
+    @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/vega.css

@@ -1334,7 +1334,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-[.kbd]:pe-1.5 [&_.kbd]:relative [&_.kbd]:isolate [&_.kbd]:z-50 [&_.kbd]:rounded-sm;
+    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
   }
 
   [data-tooltip][data-arrow]::after {

src/js/combobox.js

@@ -390,7 +390,11 @@
     }
 
     if (event.key === 'Escape') {
-      root.close(true);
+      if (isOpen) {
+        event.preventDefault();
+        event.stopPropagation();
+        root.close(true);
+      }
       return;
     }
 
@@ -503,7 +507,7 @@
       if (!root.contains(event.target)) root.close(false);
     };
     const handleDocumentPopover = (event) => {
-      if (!root.contains(event.detail.source)) root.close(false);
+      if (event.detail.source !== root) root.close(false);
     };
 
     state.input.addEventListener('focus', handleInputFocus);

src/js/dropdown-menu.js

@@ -165,7 +165,7 @@
     };
 
     const handleDocumentPopover = (event) => {
-      if (!root.contains(event.detail.source)) root.close(false);
+      if (event.detail.source !== root) root.close(false);
     };
 
     state.trigger.addEventListener('click', handleTriggerClick);

src/js/popover.js

@@ -60,7 +60,7 @@
     };
 
     const handleDocumentPopover = (event) => {
-      if (!popoverComponent.contains(event.detail.source)) {
+      if (event.detail.source !== popoverComponent) {
         closePopover(false);
       }
     };

src/js/select.js

@@ -373,7 +373,7 @@
       if (!root.contains(event.target)) root.close(false);
     };
     const handleDocumentPopover = (event) => {
-      if (!root.contains(event.detail.source)) root.close(false);
+      if (event.detail.source !== root) root.close(false);
     };
 
     state.trigger.addEventListener('keydown', handleTriggerKeydown);