@teseor/css 1.14.2 → 1.15.0

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'pagination.docs.json');
+const DOCS_PATH = resolve(__dirname, 'pagination.docs.html');
 
 test.describe('pagination visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'pagination');
     await saveForLostPixel(page, 'pagination');
     await expect(page.locator('body')).toHaveScreenshot('pagination.visual.png');

package/src/components/navigation/tabs/tabs.docs.html

@@ -0,0 +1,66 @@
+---
+title: Tabs
+type: component
+id: tabs
+api: ./tabs.api.json
+---
+
+<!-- @default -->
+<div class="ui-tabs">
+  <div class="ui-tabs__list">
+    <button class="ui-tabs__tab ui-tabs__tab--active">Tab 1</button>
+    <button class="ui-tabs__tab">Tab 2</button>
+    <button class="ui-tabs__tab">Tab 3</button>
+  </div>
+  <div class="ui-tabs__panel ui-tabs__panel--active">Panel 1 content</div>
+  <div class="ui-tabs__panel">Panel 2 content</div>
+  <div class="ui-tabs__panel">Panel 3 content</div>
+</div>
+
+<!-- @two_tabs -->
+<div class="ui-tabs">
+  <div class="ui-tabs__list">
+    <button class="ui-tabs__tab ui-tabs__tab--active">Preview</button>
+    <button class="ui-tabs__tab">Code</button>
+  </div>
+  <div class="ui-tabs__panel ui-tabs__panel--active">
+    <div class="ui-card">Preview content goes here</div>
+  </div>
+  <div class="ui-tabs__panel">
+    <pre class="ui-code-block">
+      <code><div>Code snippet</div></code>
+    </pre>
+  </div>
+</div>
+
+<!-- @sizes -->
+<div class="ui-column" style="--column-gap: var(--ui-space-3);">
+  <div class="ui-tabs ui-tabs--sm">
+    <div class="ui-tabs__list">
+      <button class="ui-tabs__tab ui-tabs__tab--active">Small</button>
+      <button class="ui-tabs__tab">Tab 2</button>
+    </div>
+  </div>
+  <div class="ui-tabs">
+    <div class="ui-tabs__list">
+      <button class="ui-tabs__tab ui-tabs__tab--active">Default</button>
+      <button class="ui-tabs__tab">Tab 2</button>
+    </div>
+  </div>
+  <div class="ui-tabs ui-tabs--lg">
+    <div class="ui-tabs__list">
+      <button class="ui-tabs__tab ui-tabs__tab--active">Large</button>
+      <button class="ui-tabs__tab">Tab 2</button>
+    </div>
+  </div>
+</div>
+
+<!-- @vertical -->
+<div class="ui-tabs ui-tabs--vertical">
+  <div class="ui-tabs__list">
+    <button class="ui-tabs__tab ui-tabs__tab--active">Tab 1</button>
+    <button class="ui-tabs__tab">Tab 2</button>
+    <button class="ui-tabs__tab">Tab 3</button>
+  </div>
+  <div class="ui-tabs__panel ui-tabs__panel--active">Vertical tab content</div>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'tabs.docs.json');
+const DOCS_PATH = resolve(__dirname, 'tabs.docs.html');
 
 test.describe('tabs visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'tabs');
     await saveForLostPixel(page, 'tabs');
     await expect(page.locator('body')).toHaveScreenshot('tabs.visual.png');

package/src/components/overlays/dialog/dialog.docs.html

@@ -0,0 +1,61 @@
+---
+title: Dialog
+type: component
+id: dialog
+description: Structured modal with header, body, and footer sections. Use with modal component for positioning.
+api: ./dialog.api.json
+---
+
+<!-- @default -->
+<div style="position: relative; height: 240px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content ui-dialog" style="max-height: 200px;">
+      <header class="ui-dialog__header">
+        <h2 class="ui-dialog__title">Dialog Title</h2>
+        <button class="ui-button ui-button--ghost ui-button--sm ui-dialog__close">X</button>
+      </header>
+      <div class="ui-dialog__body">
+        <p>Dialog content goes here.</p>
+      </div>
+      <footer class="ui-dialog__footer">
+        <button class="ui-button ui-button--ghost">Cancel</button>
+        <button class="ui-button">Confirm</button>
+      </footer>
+    </div>
+  </div>
+</div>
+
+<!-- @borderless -->
+<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content ui-dialog ui-dialog--borderless" style="max-height: 180px;">
+      <header class="ui-dialog__header">
+        <h2 class="ui-dialog__title">Simple Dialog</h2>
+      </header>
+      <div class="ui-dialog__body">
+        <p>Content without borders.</p>
+      </div>
+      <footer class="ui-dialog__footer">
+        <button class="ui-button">OK</button>
+      </footer>
+    </div>
+  </div>
+</div>
+
+<!-- @confirmation_dialog -->
+<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content ui-dialog">
+      <header class="ui-dialog__header">
+        <h2 class="ui-dialog__title">Delete Item?</h2>
+      </header>
+      <div class="ui-dialog__body">
+        <p>This action cannot be undone.</p>
+      </div>
+      <footer class="ui-dialog__footer">
+        <button class="ui-button ui-button--ghost">Cancel</button>
+        <button class="ui-button ui-button--danger">Delete</button>
+      </footer>
+    </div>
+  </div>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'dialog.docs.json');
+const DOCS_PATH = resolve(__dirname, 'dialog.docs.html');
 
 test.describe('dialog visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'dialog');
     await saveForLostPixel(page, 'dialog');
     await expect(page.locator('body')).toHaveScreenshot('dialog.visual.png');

package/src/components/overlays/drawer/drawer.docs.html

@@ -0,0 +1,90 @@
+---
+title: Drawer
+type: component
+id: drawer
+api: ./drawer.api.json
+---
+
+<!-- @default_end -->
+<!-- Slides in from the end (right in LTR) -->
+<div style="position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer-overlay" style="position:absolute"></div>
+  <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
+    <div class="ui-drawer__header">
+      <div>
+        <h2 class="ui-drawer__title">Drawer Title</h2>
+        <p class="ui-drawer__description">Optional description text</p>
+      </div>
+      <button class="ui-drawer__close ui-button ui-button--ghost ui-button--icon">X</button>
+    </div>
+    <div class="ui-drawer__body">
+      <p>Drawer content goes here.</p>
+    </div>
+    <div class="ui-drawer__footer">
+      <button class="ui-button ui-button--secondary">Cancel</button>
+      <button class="ui-button">Save</button>
+    </div>
+  </div>
+</div>
+
+<!-- @positions | column -->
+<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--start ui-drawer--sm" style="position:absolute" data-state="open">
+    <div class="ui-drawer__header">
+      <h2 class="ui-drawer__title">Start</h2>
+    </div>
+    <div class="ui-drawer__body">
+      <p>From start edge</p>
+    </div>
+  </div>
+</div>
+<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--top" style="position:absolute" data-state="open">
+    <div class="ui-drawer__header">
+      <h2 class="ui-drawer__title">Top</h2>
+    </div>
+    <div class="ui-drawer__body">
+      <p>From top edge</p>
+    </div>
+  </div>
+</div>
+<div style="position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--bottom" style="position:absolute" data-state="open">
+    <div class="ui-drawer__header">
+      <h2 class="ui-drawer__title">Bottom</h2>
+    </div>
+    <div class="ui-drawer__body">
+      <p>From bottom edge</p>
+    </div>
+  </div>
+</div>
+
+<!-- @sizes | column -->
+<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--end ui-drawer--sm" style="position:absolute" data-state="open">
+    <div class="ui-drawer__body">
+      <p>Small drawer</p>
+    </div>
+  </div>
+</div>
+<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--end" style="position:absolute" data-state="open">
+    <div class="ui-drawer__body">
+      <p>Default drawer</p>
+    </div>
+  </div>
+</div>
+<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--end ui-drawer--lg" style="position:absolute" data-state="open">
+    <div class="ui-drawer__body">
+      <p>Large drawer</p>
+    </div>
+  </div>
+</div>
+<div style="position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)">
+  <div class="ui-drawer ui-drawer--end ui-drawer--full" style="position:absolute" data-state="open">
+    <div class="ui-drawer__body">
+      <p>Full-size drawer</p>
+    </div>
+  </div>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'drawer.docs.json');
+const DOCS_PATH = resolve(__dirname, 'drawer.docs.html');
 
 test.describe('drawer visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'drawer');
     await saveForLostPixel(page, 'drawer');
     await expect(page.locator('body')).toHaveScreenshot('drawer.visual.png');

package/src/components/overlays/modal/modal.docs.html

@@ -0,0 +1,69 @@
+---
+title: Modal
+type: component
+id: modal
+description: Container for modal dialogs. Use with overlay for backdrop effect.
+api: ./modal.api.json
+---
+
+<!-- @default -->
+<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content">
+      <p>Modal content goes here</p>
+    </div>
+  </div>
+</div>
+
+<!-- @sizes -->
+<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--sm ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content">
+      <p>Small modal</p>
+    </div>
+  </div>
+</div>
+
+<!-- @large -->
+<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--lg ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content">
+      <p>Large modal</p>
+    </div>
+  </div>
+</div>
+
+<!-- @full -->
+<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--full ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content">
+      <p>Full-screen modal</p>
+    </div>
+  </div>
+</div>
+
+<!-- @entering_animation -->
+<!-- Apply entering modifier for open transition. -->
+<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--visible ui-modal--entering" style="position: absolute;">
+    <div class="ui-modal__content">
+      <p>Entering modal</p>
+    </div>
+  </div>
+</div>
+
+<!-- @with_scrollable_content -->
+<div style="position: relative; height: 200px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-modal ui-modal--visible" style="position: absolute;">
+    <div class="ui-modal__content" style="max-height: 150px;">
+      <div class="ui-modal__body">
+        <p>Line 1</p>
+        <p>Line 2</p>
+        <p>Line 3</p>
+        <p>Line 4</p>
+        <p>Line 5</p>
+        <p>Line 6</p>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'modal.docs.json');
+const DOCS_PATH = resolve(__dirname, 'modal.docs.html');
 
 test.describe('modal visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'modal');
     await saveForLostPixel(page, 'modal');
     await expect(page.locator('body')).toHaveScreenshot('modal.visual.png');

package/src/components/overlays/overlay/overlay.docs.html

@@ -0,0 +1,30 @@
+---
+title: Overlay
+type: component
+id: overlay
+description: Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.
+api: ./overlay.api.json
+---
+
+<!-- @default -->
+<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-overlay" style="position: absolute;"></div>
+  <p style="position: relative; padding: var(--ui-space-2);">Content behind overlay</p>
+</div>
+
+<!-- @light_variant -->
+<div style="position: relative; height: 120px; background: var(--ui-color-text);">
+  <div class="ui-overlay ui-overlay--light" style="position: absolute;"></div>
+  <p style="position: relative; padding: var(--ui-space-2); color: white;">Dark content behind light overlay</p>
+</div>
+
+<!-- @blur_variant -->
+<div style="position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));">
+  <div class="ui-overlay ui-overlay--blur" style="position: absolute;"></div>
+  <p style="position: relative; padding: var(--ui-space-2); color: white;">Blurred backdrop</p>
+</div>
+
+<!-- @with_animation -->
+<div style="position: relative; height: 120px; background: var(--ui-color-bg-subtle);">
+  <div class="ui-overlay ui-overlay--animate ui-overlay--visible" style="position: absolute;"></div>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'overlay.docs.json');
+const DOCS_PATH = resolve(__dirname, 'overlay.docs.html');
 
 test.describe('overlay visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'overlay');
     await saveForLostPixel(page, 'overlay');
     await expect(page.locator('body')).toHaveScreenshot('overlay.visual.png');

package/src/components/overlays/popover/popover.docs.html

@@ -0,0 +1,41 @@
+---
+title: Popover
+type: component
+id: popover
+description: Floating panel for additional content. Larger than tooltip, can contain structured content.
+api: ./popover.api.json
+---
+
+<!-- @default -->
+<div class="ui-popover" style="position: relative;">
+  <p>Popover content goes here. Can contain multiple paragraphs and other elements.</p>
+</div>
+
+<!-- @with_header -->
+<div class="ui-popover" style="position: relative;">
+  <header class="ui-popover__header">
+    <h3 class="ui-popover__title">Popover Title</h3>
+  </header>
+  <p>Content with a header section.</p>
+</div>
+
+<!-- @positions -->
+<div style="padding: var(--ui-space-4);">
+  <div class="ui-popover ui-popover--top" style="position: relative;">
+    <p>Top (arrow down)</p>
+  </div>
+</div>
+<div style="padding: var(--ui-space-4);">
+  <div class="ui-popover ui-popover--bottom" style="position: relative;">
+    <p>Bottom (arrow up)</p>
+  </div>
+</div>
+
+<!-- @visibility -->
+<!-- Control popover visibility and animation. -->
+<div class="ui-popover ui-popover--visible ui-popover--animate" style="position: relative;">
+  <p>Visible and animated</p>
+</div>
+<div class="ui-popover ui-popover--hidden" style="position: relative;">
+  <p>Hidden popover</p>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'popover.docs.json');
+const DOCS_PATH = resolve(__dirname, 'popover.docs.html');
 
 test.describe('popover visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'popover');
     await saveForLostPixel(page, 'popover');
     await expect(page.locator('body')).toHaveScreenshot('popover.visual.png');

package/src/components/overlays/tooltip/tooltip.docs.html

@@ -0,0 +1,33 @@
+---
+title: Tooltip
+type: component
+id: tooltip
+description: Small informational popup for additional context. Position via JS.
+api: ./tooltip.api.json
+---
+
+<!-- @positions -->
+<div style="display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4); flex-wrap: wrap;">
+  <div style="position: relative;">
+    <span class="ui-tooltip ui-tooltip--top" style="position: relative;">Top</span>
+  </div>
+  <div style="position: relative;">
+    <span class="ui-tooltip ui-tooltip--bottom" style="position: relative;">Bottom</span>
+  </div>
+  <div style="position: relative;">
+    <span class="ui-tooltip ui-tooltip--start" style="position: relative;">Start</span>
+  </div>
+  <div style="position: relative;">
+    <span class="ui-tooltip ui-tooltip--end" style="position: relative;">End</span>
+  </div>
+</div>
+
+<!-- @with_animation -->
+<span class="ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible" style="position: relative;">Animated tooltip</span>
+
+<!-- @anchor_positioned -->
+<!-- Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers. -->
+<div style="position: relative; padding: var(--ui-space-4); display: flex; gap: var(--ui-space-4);">
+  <button class="ui-button" style="anchor-name: --tooltip;">Hover me</button>
+  <span class="ui-tooltip ui-tooltip--anchored ui-tooltip--visible">Anchored tooltip</span>
+</div>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'tooltip.docs.json');
+const DOCS_PATH = resolve(__dirname, 'tooltip.docs.html');
 
 test.describe('tooltip visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'tooltip');
     await saveForLostPixel(page, 'tooltip');
     await expect(page.locator('body')).toHaveScreenshot('tooltip.visual.png');

package/src/components/typography/blockquote/blockquote.docs.html

@@ -0,0 +1,24 @@
+---
+title: Blockquote
+type: component
+id: blockquote
+description: Quote block with left border and optional citation.
+api: ./blockquote.api.json
+---
+
+<!-- @default -->
+<blockquote class="ui-blockquote">
+  <p>Design is not just what it looks like and feels like. Design is how it works.</p>
+</blockquote>
+
+<!-- @with_citation -->
+<blockquote class="ui-blockquote">
+  <p>The best way to predict the future is to invent it.</p>
+  <cite class="ui-blockquote__cite">Alan Kay</cite>
+</blockquote>
+
+<!-- @accent_variant -->
+<blockquote class="ui-blockquote ui-blockquote--accent">
+  <p>Simplicity is the ultimate sophistication.</p>
+  <cite class="ui-blockquote__cite">Leonardo da Vinci</cite>
+</blockquote>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'blockquote.docs.json');
+const DOCS_PATH = resolve(__dirname, 'blockquote.docs.html');
 
 test.describe('blockquote visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'blockquote');
     await saveForLostPixel(page, 'blockquote');
     await expect(page.locator('body')).toHaveScreenshot('blockquote.visual.png');

package/src/components/typography/code/code.docs.html

@@ -0,0 +1,23 @@
+---
+title: Code
+type: component
+id: code
+description: Inline code and code blocks with monospace font.
+api: ./code.api.json
+---
+
+<!-- @inline_code -->
+<p>
+Use the 
+  <code class="ui-code">--space-2</code>
+ token for padding.
+</p>
+<code class="ui-code ui-code--sm">--button-height</code>
+
+<!-- @code_block -->
+<pre class="ui-code-block">
+  <code>.button {
+  display: inline-flex;
+  align-items: center;
+}</code>
+</pre>

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

@@ -1,12 +1,16 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+import {
+  saveForLostPixel,
+  setupVisualTestFromHtmlDocs,
+  validateGridRhythm,
+} from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'code.docs.json');
+const DOCS_PATH = resolve(__dirname, 'code.docs.html');
 
 test.describe('code visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'code');
     await saveForLostPixel(page, 'code');
     await expect(page.locator('body')).toHaveScreenshot('code.visual.png');