@teseor/css 1.14.2 → 1.14.3

package/src/components/navigation/pagination/pagination.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'pagination.docs.json');
 

package/src/components/navigation/tabs/tabs.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'tabs.docs.json');
 

package/src/components/overlays/dialog/dialog.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'dialog.docs.json');
 

package/src/components/overlays/drawer/drawer.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'drawer.docs.json');
 

package/src/components/overlays/modal/modal.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'modal.docs.json');
 

package/src/components/overlays/overlay/overlay.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'overlay.docs.json');
 

package/src/components/overlays/popover/popover.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'popover.docs.json');
 

package/src/components/overlays/tooltip/tooltip.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'tooltip.docs.json');
 

package/src/components/typography/blockquote/blockquote.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'blockquote.docs.json');
 

package/src/components/typography/code/code.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'code.docs.json');
 

package/src/components/typography/code-block/code-block.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'code-block.docs.json');
 

package/src/components/typography/heading/heading.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'heading.docs.json');
 

package/src/components/typography/kbd/kbd.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'kbd.docs.json');
 

package/src/components/typography/link/link.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'link.docs.json');
 

package/src/components/typography/list/list.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'list.docs.json');
 

package/src/components/typography/mark/mark.visual.spec.ts

@@ -1,6 +1,10 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'mark.docs.json');
 

package/src/config/{tokens → guides}/accessibility.docs.json

@@ -3,6 +3,7 @@
   "type": "guide",
   "title": "Accessibility",
   "description": "Built-in accessibility features: reduced motion, system theme detection, high contrast, and keyboard focus indicators",
+  "weight": 3,
   "skipValidation": true,
   "sections": [
     {

package/src/config/guides/getting-started.docs.json

@@ -0,0 +1,106 @@
+{
+  "id": "getting-started",
+  "type": "guide",
+  "title": "Getting Started",
+  "description": "Install, import, and start using the CSS library in your project",
+  "weight": 1,
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Installation",
+      "description": "Install the package from npm.",
+      "examples": [
+        {
+          "title": "npm / pnpm / yarn",
+          "code": "npm install @teseor/css\n# or\npnpm add @teseor/css\n# or\nyarn add @teseor/css"
+        }
+      ]
+    },
+    {
+      "title": "Import",
+      "description": "Import the compiled CSS in your app entry point.",
+      "examples": [
+        {
+          "title": "JS / TS entry",
+          "code": "import '@teseor/css';\n// or\nimport '@teseor/css/dist/index.css';"
+        },
+        {
+          "title": "HTML link",
+          "code": "<link rel=\"stylesheet\" href=\"node_modules/@teseor/css/dist/index.css\">"
+        }
+      ]
+    },
+    {
+      "title": "Root Class",
+      "description": "Add the .ui-root class to set baseline typography and colors.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-root",
+              "children": [{ "tag": "p", "text": "Text inherits font, size, color from .ui-root" }]
+            }
+          ],
+          "code": "<html class=\"ui-root\">\n  <body>\n    <!-- All children inherit base styles -->\n  </body>\n</html>"
+        }
+      ]
+    },
+    {
+      "title": "First Component",
+      "description": "Use any component by adding its class. No JS required.",
+      "examples": [
+        {
+          "title": "Button",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Primary" },
+                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
+                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-button\">Primary</button>\n<button class=\"ui-button ui-button--secondary\">Secondary</button>\n<button class=\"ui-button ui-button--danger\">Danger</button>"
+        },
+        {
+          "title": "Card",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "children": [
+                { "tag": "h3", "class": "ui-heading ui-heading--4", "text": "Card Title" },
+                {
+                  "tag": "p",
+                  "text": "Cards use semantic tokens for padding, border, and background."
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-card\">\n  <h3 class=\"ui-heading ui-heading--4\">Card Title</h3>\n  <p>Content goes here.</p>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Customize",
+      "description": "Override design tokens with CSS custom properties. No build step required.",
+      "examples": [
+        {
+          "title": "Change brand color",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo",
+              "style": { "--ui-hue-primary": "270" },
+              "children": [{ "tag": "button", "class": "ui-button", "text": "Purple brand" }]
+            }
+          ],
+          "code": ":root {\n  --ui-hue-primary: 270; /* purple */\n}"
+        }
+      ]
+    }
+  ]
+}

package/src/config/{tokens → guides}/theming.docs.json

@@ -3,6 +3,7 @@
   "type": "guide",
   "title": "Theming",
   "description": "Customize the design system with CSS custom properties",
+  "weight": 2,
   "skipValidation": true,
   "sections": [
     {

package/src/config/tokens/design-tokens.docs.json

@@ -0,0 +1,239 @@
+{
+  "id": "design-tokens",
+  "type": "token",
+  "title": "Design Tokens",
+  "description": "Borders, radius, shadows, motion, z-index, and semantic tokens that form the visual foundation",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Borders",
+      "description": "Border width tokens derived from the 8px unit.",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "style": {
+                "width": "var(--ui-space-8)",
+                "height": "var(--ui-row-2)",
+                "border": "var(--ui-border-width-sm) solid var(--ui-color-border-strong)"
+              }
+            },
+            {
+              "tag": "div",
+              "style": {
+                "width": "var(--ui-space-8)",
+                "height": "var(--ui-row-2)",
+                "border": "var(--ui-border-width-md) solid var(--ui-color-border-strong)"
+              }
+            },
+            {
+              "tag": "div",
+              "style": {
+                "width": "var(--ui-space-8)",
+                "height": "var(--ui-row-2)",
+                "border": "var(--ui-border-width-lg) solid var(--ui-color-border-strong)"
+              }
+            }
+          ],
+          "code": ":root {\n  --ui-border-width-sm: calc(var(--ui-unit) * 0.125); /* 1px */\n  --ui-border-width-md: calc(var(--ui-unit) * 0.25);  /* 2px */\n  --ui-border-width-lg: calc(var(--ui-unit) * 0.5);   /* 4px */\n}"
+        }
+      ]
+    },
+    {
+      "title": "Radius",
+      "description": "Border radius tokens derived from the 8px unit.",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "small", "text": "sm (4px)" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-md)"
+                  }
+                },
+                { "tag": "small", "text": "md (8px)" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-lg)"
+                  }
+                },
+                { "tag": "small", "text": "lg (16px)" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-full)"
+                  }
+                },
+                { "tag": "small", "text": "full" }
+              ]
+            }
+          ],
+          "code": ":root {\n  --ui-radius-sm: calc(var(--ui-unit) * 0.5); /* 4px */\n  --ui-radius-md: var(--ui-unit);              /* 8px */\n  --ui-radius-lg: calc(var(--ui-unit) * 2);    /* 16px */\n  --ui-radius-full: 9999px;\n}"
+        }
+      ]
+    },
+    {
+      "title": "Shadows",
+      "description": "Elevation shadows using the primary hue for tinted depth.",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-bg)",
+                    "border-radius": "var(--ui-radius-md)",
+                    "box-shadow": "var(--ui-shadow-sm)"
+                  }
+                },
+                { "tag": "small", "text": "sm" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-bg)",
+                    "border-radius": "var(--ui-radius-md)",
+                    "box-shadow": "var(--ui-shadow-md)"
+                  }
+                },
+                { "tag": "small", "text": "md" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-bg)",
+                    "border-radius": "var(--ui-radius-md)",
+                    "box-shadow": "var(--ui-shadow-lg)"
+                  }
+                },
+                { "tag": "small", "text": "lg" }
+              ]
+            }
+          ],
+          "code": ":root {\n  --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary) 10% 20% / 0.05);\n  --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary) 10% 20% / 0.1);\n  --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary) 10% 20% / 0.15);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Motion",
+      "description": "Duration and easing tokens. All durations drop to 0ms when prefers-reduced-motion is active.",
+      "examples": [
+        {
+          "title": "Duration scale",
+          "code": ":root {\n  --ui-duration-instant: 50ms;\n  --ui-duration-fast: 100ms;\n  --ui-duration-base: 150ms;\n  --ui-duration-normal: 200ms;\n  --ui-duration-slow: 250ms;\n  --ui-duration-slower: 400ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --ui-duration-instant: 0ms;\n    --ui-duration-fast: 0ms;\n    /* ...all set to 0ms */\n  }\n}"
+        },
+        {
+          "title": "Easing functions",
+          "code": ":root {\n  --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);\n  --ui-ease-in:      cubic-bezier(0.4, 0, 1, 1);\n  --ui-ease-out:     cubic-bezier(0, 0, 0.2, 1);\n  --ui-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Z-index",
+      "description": "Layering scale with gaps to allow insertion without renumbering.",
+      "examples": [
+        {
+          "title": "Z-index tokens",
+          "code": ":root {\n  --ui-z-base: 0;\n  --ui-z-sticky: 100;\n  --ui-z-dropdown: 200;\n  --ui-z-overlay: 300;\n  --ui-z-modal: 400;\n  --ui-z-popover: 500;\n  --ui-z-tooltip: 600;\n  --ui-z-toast: 700;\n  --ui-z-drawer: 800;\n  --ui-z-debug: 9999;\n}"
+        }
+      ]
+    },
+    {
+      "title": "Semantic Colors",
+      "description": "Context-aware color tokens that resolve automatically in light and dark mode via light-dark().",
+      "examples": [
+        {
+          "title": "Text and background",
+          "code": ":root {\n  color-scheme: light dark;\n  --ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));\n  --ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));\n  --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));\n  --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));\n}"
+        },
+        {
+          "title": "Borders and interactive",
+          "code": ":root {\n  --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));\n  --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));\n  --ui-color-interactive: var(--ui-color-primary);\n  --ui-color-interactive-hover: var(--ui-color-primary-dark);\n  --ui-color-focus: var(--ui-color-primary-light);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Semantic Spacing",
+      "description": "Named spacing aliases that map to the numeric spacing scale for consistent layout patterns.",
+      "examples": [
+        {
+          "title": "Semantic spacing tokens",
+          "code": ":root {\n  --ui-spacing-xs: var(--ui-space-1);     /* 8px */\n  --ui-spacing-sm: var(--ui-space-2);     /* 16px */\n  --ui-spacing-md: var(--ui-space-4);     /* 32px */\n  --ui-spacing-lg: var(--ui-space-6);     /* 48px */\n  --ui-spacing-xl: var(--ui-space-8);     /* 64px */\n  --ui-spacing-gutter: var(--ui-space-4); /* 32px */\n  --ui-spacing-section: var(--ui-space-8);/* 64px */\n}"
+        }
+      ]
+    }
+  ]
+}

package/src/debug/debug.docs.json

@@ -0,0 +1,96 @@
+{
+  "id": "debug",
+  "type": "utility",
+  "title": "Debug",
+  "description": "Visual debugging overlays for grid alignment, baseline rhythm, and element boundaries",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Grid Overlay",
+      "description": "Shows the 8px unit grid. Add the class to any container.",
+      "examples": [
+        {
+          "title": "Unit grid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-grid",
+              "style": {
+                "height": "var(--ui-row-6)",
+                "position": "relative"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-debug-grid\">\n  <!-- 8px grid lines appear -->\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Row Grid",
+      "description": "Shows both 8px unit lines and stronger row (16px) lines.",
+      "examples": [
+        {
+          "title": "Unit + row grid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-grid-rows",
+              "style": {
+                "height": "var(--ui-row-6)",
+                "position": "relative"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-debug-grid-rows\">\n  <!-- 8px + 16px grid lines -->\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Baseline",
+      "description": "Horizontal baseline grid for verifying text alignment.",
+      "examples": [
+        {
+          "title": "Baseline grid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-baseline",
+              "style": {
+                "height": "var(--ui-row-6)",
+                "position": "relative"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-debug-baseline\">\n  <!-- Horizontal 8px baseline lines -->\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Outline",
+      "description": "Outlines all child elements to reveal layout boundaries.",
+      "examples": [
+        {
+          "title": "Element outlines",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-outline",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-row ui-row--sm",
+                  "children": [
+                    { "tag": "div", "text": "A", "style": { "padding": "var(--ui-space-1)" } },
+                    { "tag": "div", "text": "B", "style": { "padding": "var(--ui-space-1)" } },
+                    { "tag": "div", "text": "C", "style": { "padding": "var(--ui-space-1)" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-debug-outline\">\n  <!-- All children get red outlines -->\n</div>"
+        }
+      ]
+    }
+  ]
+}