fix: inheritable properties leaking in. (#6)

Author: knightedcodemonkey

docs/next-steps.md

@@ -9,3 +9,15 @@ Focused follow-up work for `@knighted/develop`.
 2. **Preview UX polish**
    - Keep tooltip affordances for mode-specific behavior.
    - Continue tightening panel control alignment and spacing without introducing extra markup.
+
+3. **In-browser component/style linting**
+   - Explore running lint checks for component and style sources directly in the playground.
+   - Prefer CDN-delivered tooling where possible and preserve graceful fallback behavior when unavailable.
+
+4. **In-browser component type checking**
+   - Explore TypeScript/JSX type checking for component source in-browser using CDN-delivered tooling.
+   - Keep diagnostics responsive and surface clear inline/editor feedback without blocking the preview loop.
+
+5. **In-browser component testing**
+   - Explore authoring and running component-focused tests in-browser (for example, a Vitest-compatible flow) using CDN-delivered tooling.
+   - Define a lightweight test UX that supports writing tests, running them on demand, and displaying results in-app.

src/app.js

@@ -455,13 +455,29 @@ const updateStyleWarning = () => {
   styleWarning.textContent = `${styleLabels[mode]} is compiled in-browser via @knighted/css/browser.`
 }
 
+const shadowPreviewBaseStyles = `
+:host {
+  all: initial;
+  display: var(--preview-host-display, block);
+  flex: var(--preview-host-flex, 1 1 auto);
+  min-height: var(--preview-host-min-height, 180px);
+  padding: var(--preview-host-padding, 18px);
+  overflow: var(--preview-host-overflow, auto);
+  position: var(--preview-host-position, relative);
+  background: var(--surface-preview);
+  color-scheme: var(--control-color-scheme, dark);
+  z-index: var(--preview-host-z-index, 1);
+  box-sizing: border-box;
+}
+`
+
 const applyStyles = (target, cssText) => {
   if (!target) return
 
   const styleTag = document.createElement('style')
   const isShadowTarget = target instanceof ShadowRoot
   styleTag.textContent = isShadowTarget
-    ? cssText
+    ? `${shadowPreviewBaseStyles}\n${cssText}`
     : `@scope (#preview-host) {\n${cssText}\n}`
   target.append(styleTag)
 }

src/styles.css

@@ -510,13 +510,21 @@ textarea:focus {
 }
 
 .preview-host {
-  flex: 1 1 auto;
-  min-height: 180px;
-  padding: 18px;
-  overflow: auto;
-  position: relative;
+  --preview-host-display: block;
+  --preview-host-flex: 1 1 auto;
+  --preview-host-min-height: 180px;
+  --preview-host-padding: 18px;
+  --preview-host-overflow: auto;
+  --preview-host-position: relative;
+  --preview-host-z-index: 1;
+  display: var(--preview-host-display);
+  flex: var(--preview-host-flex);
+  min-height: var(--preview-host-min-height);
+  padding: var(--preview-host-padding);
+  overflow: var(--preview-host-overflow);
+  position: var(--preview-host-position);
   background: var(--surface-preview);
-  z-index: 1;
+  z-index: var(--preview-host-z-index);
 }
 
 .preview-host[data-style-compiling='true']::before {
@@ -613,7 +621,6 @@ textarea:focus {
   padding: 0;
 }
 
-.shadow-hint::before,
 .shadow-hint::after {
   opacity: 0;
   visibility: hidden;
@@ -624,18 +631,6 @@ textarea:focus {
     visibility 120ms ease;
 }
 
-.shadow-hint::before {
-  content: '';
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 4px;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid var(--surface-tooltip);
-  transform: translateY(-4px);
-  z-index: 31;
-}
-
 .shadow-hint::after {
   content: attr(data-tooltip);
   position: absolute;
@@ -656,9 +651,7 @@ textarea:focus {
   z-index: 30;
 }
 
-.shadow-hint:hover::before,
 .shadow-hint:hover::after,
-.shadow-hint:focus-visible::before,
 .shadow-hint:focus-visible::after {
   opacity: 1;
   visibility: visible;