Document Tailwind Play CDN setup for Basecoat theme colors

CHANGELOG.md

@@ -1,12 +1,6 @@
 # Changelog
 
-## [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.
+## Unreleased
 
 ## [1.0.2] - 2026-07-06
 

site/src/docs/components/combobox.mdx

@@ -85,8 +85,6 @@ 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,14 +53,6 @@ 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>

site/src/docs/installation.mdx

@@ -70,6 +70,32 @@ Or load the Basecoat runtime once, then only the component scripts you use.
 | `dist/js/basecoat.min.js` | Runtime only. Load once before individual component scripts. |
 | `dist/js/{component}.min.js` | Individual JavaScript component file. |
 
+### Tailwind utilities with the CDN
+
+The CDN stylesheets only include the utilities Basecoat uses, so classes like `bg-primary` or `text-muted-foreground` are not available. If you add the [Tailwind Play CDN](https://tailwindcss.com/docs/installation/play-cdn) for utilities, map Basecoat's theme tokens to Tailwind colors and restore the border color after Tailwind's preflight. Load this after the Basecoat stylesheet.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+<style type="text/tailwindcss">
+  @theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-border: var(--border);
+  }
+  @layer base {
+    *, ::before, ::after { border-color: var(--border); }
+  }
+</style>
+```
+
+Add any other tokens you use the same way, for example `--color-destructive: var(--destructive);`. The Play CDN is meant for prototypes. For production, use the [Tailwind CLI with a bundle file](#npm) instead.
+
 ## NPM
 
 <Steps>

src/css/components/dialog.css

@@ -1,19 +1,5 @@
 /* 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 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)];
+      @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)];
     }
 
     &:hover:before {

src/css/styles/luma.css

@@ -1324,7 +1324,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/lyra.css

@@ -1327,7 +1327,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/maia.css

@@ -1312,7 +1312,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-2xl px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/mira.css

@@ -1321,7 +1321,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/nova.css

@@ -1335,7 +1335,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/rhea.css

@@ -1329,7 +1329,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-xl px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/sera.css

@@ -1345,7 +1345,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-none px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/css/styles/vega.css

@@ -1334,7 +1334,7 @@
 
   /* Tooltip */
   [data-tooltip]::before {
-    @apply bg-foreground text-background rounded-md px-3 py-1.5 text-xs;
+    @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;
   }
 
   [data-tooltip][data-arrow]::after {

src/js/combobox.js

@@ -390,11 +390,7 @@
     }
 
     if (event.key === 'Escape') {
-      if (isOpen) {
-        event.preventDefault();
-        event.stopPropagation();
-        root.close(true);
-      }
+      root.close(true);
       return;
     }