@teseor/css 1.14.3 → 1.15.1

package/src/components/forms/toggle/docs.html

@@ -0,0 +1,61 @@
+---
+title: Toggle
+description: Switch control for boolean states. Uses checkbox semantics with role=switch for accessibility.
+---
+
+<!-- @default -->
+<label class="ui-toggle">
+  <input class="ui-toggle__input" type="checkbox" role="switch"></input>
+  <span class="ui-toggle__track"></span>
+  <span class="ui-toggle__thumb"></span>
+</label>
+
+<!-- @checked -->
+<label class="ui-toggle">
+  <input class="ui-toggle__input" type="checkbox" role="switch" checked></input>
+  <span class="ui-toggle__track"></span>
+  <span class="ui-toggle__thumb"></span>
+</label>
+
+<!-- @sizes -->
+<div style="display: flex; gap: var(--ui-space-2); align-items: center;">
+  <label class="ui-toggle ui-toggle--sm">
+    <input class="ui-toggle__input" type="checkbox" role="switch"></input>
+    <span class="ui-toggle__track"></span>
+    <span class="ui-toggle__thumb"></span>
+  </label>
+  <label class="ui-toggle">
+    <input class="ui-toggle__input" type="checkbox" role="switch" checked></input>
+    <span class="ui-toggle__track"></span>
+    <span class="ui-toggle__thumb"></span>
+  </label>
+  <label class="ui-toggle ui-toggle--lg">
+    <input class="ui-toggle__input" type="checkbox" role="switch"></input>
+    <span class="ui-toggle__track"></span>
+    <span class="ui-toggle__thumb"></span>
+  </label>
+</div>
+
+<!-- @disabled -->
+<div style="display: flex; gap: var(--ui-space-2);">
+  <label class="ui-toggle">
+    <input class="ui-toggle__input" type="checkbox" role="switch" disabled></input>
+    <span class="ui-toggle__track"></span>
+    <span class="ui-toggle__thumb"></span>
+  </label>
+  <label class="ui-toggle">
+    <input class="ui-toggle__input" type="checkbox" role="switch" checked disabled></input>
+    <span class="ui-toggle__track"></span>
+    <span class="ui-toggle__thumb"></span>
+  </label>
+</div>
+
+<!-- @with_label -->
+<div style="display: flex; align-items: center; gap: var(--ui-space-2);">
+  <label class="ui-toggle">
+    <input class="ui-toggle__input" type="checkbox" role="switch" id="notifications"></input>
+    <span class="ui-toggle__track"></span>
+    <span class="ui-toggle__thumb"></span>
+  </label>
+  <label for="notifications">Enable notifications</label>
+</div>

package/src/components/forms/toggle/{toggle.visual.spec.ts → visual.spec.ts}

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

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

@@ -0,0 +1,57 @@
+---
+title: Breadcrumb
+description: Navigation hierarchy showing current page location in site structure.
+---
+
+<!-- @default -->
+<nav class="ui-breadcrumb" aria-label="Breadcrumb">
+  <ol class="ui-breadcrumb">
+    <li class="ui-breadcrumb__item">
+      <a class="ui-breadcrumb__link" href="#">Home</a>
+    </li>
+    <li class="ui-breadcrumb__item">
+      <a class="ui-breadcrumb__link" href="#">Products</a>
+    </li>
+    <li class="ui-breadcrumb__item">
+      <span class="ui-breadcrumb__current" aria-current="page">Shoes</span>
+    </li>
+  </ol>
+</nav>
+
+<!-- @with_icons -->
+<nav aria-label="Breadcrumb">
+  <ol class="ui-breadcrumb">
+    <li class="ui-breadcrumb__item">
+      <a class="ui-breadcrumb__link" href="#">
+        <svg class="ui-icon ui-icon--sm" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
+        </svg>
+      </a>
+    </li>
+    <li class="ui-breadcrumb__item">
+      <a class="ui-breadcrumb__link" href="#">Settings</a>
+    </li>
+    <li class="ui-breadcrumb__item">
+      <span class="ui-breadcrumb__current" aria-current="page">Profile</span>
+    </li>
+  </ol>
+</nav>
+
+<!-- @overflow_with_ellipsis -->
+<!-- Truncate long breadcrumbs with hidden items and an ellipsis indicator. -->
+<nav aria-label="Breadcrumb">
+  <ol class="ui-breadcrumb">
+    <li class="ui-breadcrumb__item">
+      <a class="ui-breadcrumb__link" href="#">Home</a>
+    </li>
+    <li class="ui-breadcrumb__item ui-breadcrumb__item--hidden">
+      <a class="ui-breadcrumb__link" href="#">Category</a>
+    </li>
+    <li class="ui-breadcrumb__item">
+      <span class="ui-breadcrumb__ellipsis">...</span>
+    </li>
+    <li class="ui-breadcrumb__item">
+      <span class="ui-breadcrumb__current" aria-current="page">Current Page</span>
+    </li>
+  </ol>
+</nav>

package/src/components/navigation/breadcrumb/{breadcrumb.visual.spec.ts → visual.spec.ts}

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

package/src/components/navigation/dropdown-menu/docs.html

@@ -0,0 +1,103 @@
+---
+title: Dropdown Menu
+description: Trigger button with floating menu panel. Reuses the menu component for consistent item styling.
+---
+
+<!-- @default -->
+<div class="ui-dropdown-menu ui-dropdown-menu--open">
+  <button class="ui-dropdown-menu__trigger ui-button" type="button">
+    <span>Actions</span>
+    <span class="ui-dropdown-menu__trigger-icon">▾</span>
+  </button>
+  <div class="ui-dropdown-menu__panel" role="menu">
+    <div class="ui-menu">
+      <ul class="ui-menu__group">
+        <li>
+          <button class="ui-menu__item" role="menuitem">Edit</button>
+        </li>
+        <li>
+          <button class="ui-menu__item" role="menuitem">Duplicate</button>
+        </li>
+        <li>
+          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Delete</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- @with_separator -->
+<div class="ui-dropdown-menu ui-dropdown-menu--open">
+  <button class="ui-dropdown-menu__trigger ui-button ui-button--secondary" type="button">File</button>
+  <div class="ui-dropdown-menu__panel" role="menu">
+    <div class="ui-menu">
+      <ul class="ui-menu__group">
+        <li>
+          <button class="ui-menu__item" role="menuitem">New</button>
+        </li>
+        <li>
+          <button class="ui-menu__item" role="menuitem">Open</button>
+        </li>
+        <li>
+          <button class="ui-menu__item" role="menuitem">Save</button>
+        </li>
+        <li>
+          <hr class="ui-menu__separator">
+        </li>
+        <li>
+          <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Close</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- @top_position -->
+<!-- Opens panel above the trigger. -->
+<div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--top">
+  <button class="ui-dropdown-menu__trigger ui-button">Actions</button>
+  <div class="ui-dropdown-menu__panel" role="menu">
+    <div class="ui-menu">
+      <ul class="ui-menu__group">
+        <li><button class="ui-menu__item" role="menuitem">Edit</button></li>
+        <li><button class="ui-menu__item" role="menuitem">Delete</button></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- @full_width -->
+<!-- Panel stretches to match trigger width. -->
+<div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--full-width">
+  <button class="ui-dropdown-menu__trigger ui-button">Select option</button>
+  <div class="ui-dropdown-menu__panel" role="menu">
+    <div class="ui-menu">
+      <ul class="ui-menu__group">
+        <li><button class="ui-menu__item" role="menuitem">Option A</button></li>
+        <li><button class="ui-menu__item" role="menuitem">Option B</button></li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!-- @align_end -->
+<div style="display: flex; justify-content: flex-end">
+  <div class="ui-dropdown-menu ui-dropdown-menu--open ui-dropdown-menu--align-end">
+    <button class="ui-dropdown-menu__trigger ui-button ui-button--ghost" type="button">⋮</button>
+    <div class="ui-dropdown-menu__panel" role="menu">
+      <div class="ui-menu">
+        <ul class="ui-menu__group">
+          <li>
+            <button class="ui-menu__item" role="menuitem">View</button>
+          </li>
+          <li>
+            <button class="ui-menu__item" role="menuitem">Share</button>
+          </li>
+          <li>
+            <button class="ui-menu__item ui-menu__item--danger" role="menuitem">Remove</button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

package/src/components/navigation/dropdown-menu/{dropdown-menu.visual.spec.ts → visual.spec.ts}

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

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

@@ -0,0 +1,119 @@
+---
+title: Menu
+---
+
+<!-- @default -->
+<div class="ui-menu">
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item">Edit</button>
+    </li>
+    <li>
+      <button class="ui-menu__item">Duplicate</button>
+    </li>
+    <li>
+      <button class="ui-menu__item">Archive</button>
+    </li>
+  </ul>
+</div>
+
+<!-- @with_icons_and_shortcuts -->
+<div class="ui-menu">
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item">
+        <span class="ui-menu__item-icon">+</span>
+New File
+        <span class="ui-menu__item-shortcut">Cmd+N</span>
+      </button>
+    </li>
+    <li>
+      <button class="ui-menu__item">
+        <span class="ui-menu__item-icon">O</span>
+Open
+        <span class="ui-menu__item-shortcut">Cmd+O</span>
+      </button>
+    </li>
+    <li>
+      <button class="ui-menu__item">
+        <span class="ui-menu__item-icon">S</span>
+Save
+        <span class="ui-menu__item-shortcut">Cmd+S</span>
+      </button>
+    </li>
+  </ul>
+</div>
+
+<!-- @groups_with_labels -->
+<div class="ui-menu">
+  <div class="ui-menu__label">Edit</div>
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item">Cut</button>
+    </li>
+    <li>
+      <button class="ui-menu__item">Copy</button>
+    </li>
+    <li>
+      <button class="ui-menu__item">Paste</button>
+    </li>
+  </ul>
+  <div class="ui-menu__separator"></div>
+  <div class="ui-menu__label">View</div>
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item">Zoom In</button>
+    </li>
+    <li>
+      <button class="ui-menu__item">Zoom Out</button>
+    </li>
+  </ul>
+</div>
+
+<!-- @states -->
+<div class="ui-menu">
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item">Normal Item</button>
+    </li>
+    <li>
+      <button class="ui-menu__item ui-menu__item--disabled" aria-disabled="true">Disabled Item</button>
+    </li>
+    <li>
+      <button class="ui-menu__item ui-menu__item--danger">Delete</button>
+    </li>
+  </ul>
+</div>
+
+<!-- @checkable_items -->
+<div class="ui-menu">
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item ui-menu__item--check">
+        <span class="ui-menu__item-indicator">✓</span>
+Show Toolbar
+      </button>
+    </li>
+    <li>
+      <button class="ui-menu__item ui-menu__item--check">
+        <span class="ui-menu__item-indicator"></span>
+Show Sidebar
+      </button>
+    </li>
+  </ul>
+  <div class="ui-menu__separator"></div>
+  <ul class="ui-menu__group">
+    <li>
+      <button class="ui-menu__item ui-menu__item--radio">
+        <span class="ui-menu__item-indicator">•</span>
+List View
+      </button>
+    </li>
+    <li>
+      <button class="ui-menu__item ui-menu__item--radio">
+        <span class="ui-menu__item-indicator"></span>
+Grid View
+      </button>
+    </li>
+  </ul>
+</div>

package/src/components/navigation/menu/{menu.visual.spec.ts → visual.spec.ts}

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

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

@@ -0,0 +1,71 @@
+---
+title: Nav
+description: Horizontal or vertical navigation links for primary and secondary navigation.
+---
+
+<!-- @basic -->
+<!-- Underline-style navigation with active state indicator. -->
+<nav class="ui-nav">
+  <ul class="ui-nav__list">
+    <li>
+      <a class="ui-nav__item ui-nav__item--active" href="#">Dashboard</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Projects</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Settings</a>
+    </li>
+    <li>
+      <a class="ui-nav__item ui-nav__item--disabled" href="#">Disabled</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- @pills -->
+<!-- Background-filled variant for standalone navigation. -->
+<nav class="ui-nav ui-nav--pills">
+  <ul class="ui-nav__list">
+    <li>
+      <a class="ui-nav__item ui-nav__item--active" href="#">Overview</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Analytics</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Reports</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- @vertical -->
+<!-- Vertical navigation with start-side indicator. -->
+<nav class="ui-nav ui-nav--vertical" style="inline-size: 200px">
+  <ul class="ui-nav__list">
+    <li>
+      <a class="ui-nav__item ui-nav__item--active" href="#">Profile</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Account</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Security</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- @vertical_pills -->
+<!-- Vertical navigation with pill-style active indicator. -->
+<nav class="ui-nav ui-nav--vertical ui-nav--pills" style="inline-size: 200px">
+  <ul class="ui-nav__list">
+    <li>
+      <a class="ui-nav__item ui-nav__item--active" href="#">General</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Notifications</a>
+    </li>
+    <li>
+      <a class="ui-nav__item" href="#">Billing</a>
+    </li>
+  </ul>
+</nav>

package/src/components/navigation/nav/{nav.visual.spec.ts → visual.spec.ts}

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

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

@@ -0,0 +1,113 @@
+---
+title: Pagination
+---
+
+<!-- @default -->
+<nav class="ui-pagination">
+  <a class="ui-pagination__link ui-pagination__prev" href="#">Prev</a>
+  <ul class="ui-pagination__list">
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">1</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">3</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">4</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">5</a>
+    </li>
+  </ul>
+  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
+</nav>
+
+<!-- @with_ellipsis -->
+<nav class="ui-pagination">
+  <a class="ui-pagination__link ui-pagination__prev" href="#">Prev</a>
+  <ul class="ui-pagination__list">
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">1</a>
+    </li>
+    <li class="ui-pagination__item">
+      <span class="ui-pagination__ellipsis">...</span>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">4</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">5</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">6</a>
+    </li>
+    <li class="ui-pagination__item">
+      <span class="ui-pagination__ellipsis">...</span>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">20</a>
+    </li>
+  </ul>
+  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
+</nav>
+
+<!-- @disabled_states -->
+<nav class="ui-pagination">
+  <a class="ui-pagination__link ui-pagination__prev ui-pagination__link--disabled" aria-disabled="true">Prev</a>
+  <ul class="ui-pagination__list">
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">1</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">2</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">3</a>
+    </li>
+  </ul>
+  <a class="ui-pagination__link ui-pagination__next" href="#">Next</a>
+</nav>
+
+<!-- @sizes | column -->
+<nav class="ui-pagination ui-pagination--sm">
+  <ul class="ui-pagination__list">
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">1</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">3</a>
+    </li>
+  </ul>
+</nav>
+<nav class="ui-pagination">
+  <ul class="ui-pagination__list">
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">1</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">3</a>
+    </li>
+  </ul>
+</nav>
+<nav class="ui-pagination ui-pagination--lg">
+  <ul class="ui-pagination__list">
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">1</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link ui-pagination__link--active" aria-current="page" href="#">2</a>
+    </li>
+    <li class="ui-pagination__item">
+      <a class="ui-pagination__link" href="#">3</a>
+    </li>
+  </ul>
+</nav>

package/src/components/navigation/pagination/{pagination.visual.spec.ts → visual.spec.ts}

@@ -2,17 +2,17 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import {
   saveForLostPixel,
-  setupVisualTestFromDocs,
+  setupVisualTestFromHtmlDocs,
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'pagination.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });