@teseor/css 1.14.2 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/base/root.docs.html

@@ -0,0 +1,20 @@
+---
+title: Root
+type: token
+id: root
+description: Base styles applied to the .root class: font family, size, line-height, color, and background
+skipValidation: true
+---
+
+<!-- @usage -->
+<!-- Add the .ui-root class to the html or body element to establish baseline typography and color. -->
+<div class="ui-root">
+  <p>Text inherits font-family, size, line-height, and color from .ui-root</p>
+</div>
+.ui-root {
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-leading-md);
+  color: var(--ui-color-text);
+  background: var(--ui-color-bg);
+}

package/src/base/typography/typography.docs.html

@@ -0,0 +1,161 @@
+---
+title: Typography
+type: token
+id: typography
+description: Modular scale (1.2 ratio) with 8px grid-snapped line-heights. Responsive breakpoints at 730px and 1080px adjust heading sizes.
+skipValidation: true
+---
+
+<!-- @type_scale -->
+<!-- Font sizes follow a 1.2 (Minor Third) modular scale from 12px to 40px. All line-heights snap to 8px multiples. -->
+<table class="ui-table">
+  <thead>
+    <tr>
+      <th>Token</th>
+      <th>Size</th>
+      <th>Line-height</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>--ui-font-size-xs</code>
+      </td>
+      <td>12px</td>
+      <td>16px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-sm</code>
+      </td>
+      <td>14px</td>
+      <td>24px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-md</code>
+      </td>
+      <td>16px</td>
+      <td>24px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-lg</code>
+      </td>
+      <td>20px</td>
+      <td>32px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-xl</code>
+      </td>
+      <td>24px</td>
+      <td>32px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-2xl</code>
+      </td>
+      <td>28px</td>
+      <td>32px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-3xl</code>
+      </td>
+      <td>32px</td>
+      <td>40px</td>
+    </tr>
+    <tr>
+      <td>
+        <code>--ui-font-size-4xl</code>
+      </td>
+      <td>40px</td>
+      <td>48px</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- @headings -->
+<!-- Headings use semantic tokens and adjust size at breakpoints. -->
+<h1>Heading 1 - 40px / 48px</h1>
+<h2>Heading 2 - 32px / 40px</h2>
+<h3>Heading 3 - 28px / 32px</h3>
+<h4>Heading 4 - 24px / 32px</h4>
+<h5>Heading 5 - 20px / 24px</h5>
+
+<!-- @body_text -->
+<!-- Default body text at 16px with 24px line-height (1.5x ratio). -->
+<p>
+Body text at 16px with 24px line-height. The 
+  <strong>bold text</strong>
+ and 
+  <code>inline code</code>
+ maintain the same rhythm.
+</p>
+<p class="ui-text-body-sm">Body small at 14px with 24px line-height for secondary text.</p>
+
+<!-- @text_roles -->
+<!-- Semantic text styles for specific use cases. -->
+<p class="ui-text-lead">Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.</p>
+<p class="ui-text-eyebrow">Eyebrow text</p>
+<h2>Related Heading</h2>
+<p class="ui-text-caption">Caption text - 12px / 16px. Use for labels, hints, and metadata.</p>
+
+<!-- @font_weights -->
+<!-- Four weight levels for hierarchy. -->
+<p class="ui-font-normal">Normal (400) - Body text</p>
+<p class="ui-font-medium">Medium (500) - Labels, small headings</p>
+<p class="ui-font-semibold">Semibold (600) - Subheadings</p>
+<p class="ui-font-bold">Bold (700) - Headlines, emphasis</p>
+
+<!-- @letter_spacing -->
+<!-- Three tracking options based on use case. -->
+<p class="ui-text-3xl ui-tracking-display">Display tracking (-0.02em)</p>
+<p>Body tracking (0) - default</p>
+<p class="ui-text-eyebrow">Caps tracking (+0.08em)</p>
+
+<!-- @line_length -->
+<!-- Constrain text width for optimal readability (45-75 characters). -->
+<div class="ui-prose">
+  <p>This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line.</p>
+</div>
+
+<!-- @responsive_behavior -->
+<!-- Headings scale down on mobile (<730px) and up on desktop (>1080px). -->
+<table class="ui-table">
+  <thead>
+    <tr>
+      <th>Heading</th>
+      <th>Mobile</th>
+      <th>Default</th>
+      <th>Desktop</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>h1</td>
+      <td>28px</td>
+      <td>40px</td>
+      <td>48px</td>
+    </tr>
+    <tr>
+      <td>h2</td>
+      <td>24px</td>
+      <td>32px</td>
+      <td>40px</td>
+    </tr>
+    <tr>
+      <td>h3</td>
+      <td>20px</td>
+      <td>28px</td>
+      <td>28px</td>
+    </tr>
+    <tr>
+      <td>h4</td>
+      <td>18px</td>
+      <td>24px</td>
+      <td>24px</td>
+    </tr>
+  </tbody>
+</table>

package/src/components/actions/button/button.docs.html

@@ -0,0 +1,76 @@
+---
+title: Button
+type: component
+id: button
+description: Buttons trigger actions. Use primary for main CTA, secondary for less important actions.
+api: ./button.api.json
+---
+
+<!-- @variants | row -->
+<!-- Button styles for different purposes and emphasis levels. -->
+<button class="ui-button">Primary</button>
+<button class="ui-button ui-button--secondary">Secondary</button>
+<button class="ui-button ui-button--outline">Outline</button>
+<button class="ui-button ui-button--ghost">Ghost</button>
+<button class="ui-button ui-button--danger">Danger</button>
+<button class="ui-button ui-button--link">Link</button>
+
+<!-- @sizes | row -->
+<!-- Small for dense UIs, default for most cases, large for prominent CTAs. -->
+<button class="ui-button ui-button--sm">Small</button>
+<button class="ui-button ui-button--md">Medium</button>
+<button class="ui-button ui-button--lg">Large</button>
+
+<!-- @radius | row -->
+<!-- Override border radius. Use radius-full for pill-shaped buttons. -->
+<button class="ui-button ui-button--radius-none">None</button>
+<button class="ui-button ui-button--radius-sm">Small</button>
+<button class="ui-button">Default</button>
+<button class="ui-button ui-button--radius-lg">Large</button>
+<button class="ui-button ui-button--radius-full">Full</button>
+
+<!-- @block -->
+<!-- Full width button for mobile or form submit. -->
+<button class="ui-button ui-button--block">Block Button</button>
+
+<!-- @loading | row -->
+<!-- Shows spinner animation. Button becomes non-interactive. -->
+<button class="ui-button ui-button--loading">Loading</button>
+<button class="ui-button ui-button--secondary ui-button--loading">Loading</button>
+
+<!-- @icon_button | row -->
+<!-- Square icon-only buttons. Use with SVG icons from Lucide or similar sets. -->
+<button class="ui-button ui-button--icon ui-button--sm">
+  <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M18 6 6 18"></path>
+    <path d="m6 6 12 12"></path>
+  </svg>
+</button>
+<button class="ui-button ui-button--icon">
+  <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M5 12h14"></path>
+    <path d="M12 5v14"></path>
+  </svg>
+</button>
+<button class="ui-button ui-button--icon ui-button--lg">
+  <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <circle cx="11" cy="11" r="8"></circle>
+    <path d="m21 21-4.3-4.3"></path>
+  </svg>
+</button>
+
+<!-- @with_icon | row -->
+<!-- Buttons with icon and text. Use ui-button__icon element with --start or --end modifier. -->
+<button class="ui-button">
+  <svg class="ui-icon ui-button__icon ui-button__icon--start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M5 12h14"></path>
+    <path d="M12 5v14"></path>
+  </svg>
+Add Item
+</button>
+<button class="ui-button ui-button--secondary">
+Next
+  <svg class="ui-icon ui-button__icon ui-button__icon--end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="m9 18 6-6-6-6"></path>
+  </svg>
+</button>

package/src/components/actions/button/button.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, 'button.docs.json');
+const DOCS_PATH = resolve(__dirname, 'button.docs.html');
 
 test.describe('button visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'button');
     await saveForLostPixel(page, 'button');
     await expect(page.locator('body')).toHaveScreenshot('button.visual.png');

package/src/components/actions/button-group/button-group.docs.html

@@ -0,0 +1,47 @@
+---
+title: Button Group
+type: component
+id: button-group
+description: Container for grouped buttons that share borders and have connected appearance.
+api: ./button-group.api.json
+mergeInto: button
+---
+
+<!-- @default -->
+<div class="ui-button-group" role="group">
+  <button class="ui-button ui-button--outline">Left</button>
+  <button class="ui-button ui-button--outline">Middle</button>
+  <button class="ui-button ui-button--outline">Right</button>
+</div>
+
+<!-- @primary_buttons -->
+<div class="ui-button-group" role="group">
+  <button class="ui-button">Save</button>
+  <button class="ui-button">Save & Close</button>
+</div>
+
+<!-- @vertical -->
+<div class="ui-button-group ui-button-group--vertical" role="group">
+  <button class="ui-button ui-button--outline">Top</button>
+  <button class="ui-button ui-button--outline">Middle</button>
+  <button class="ui-button ui-button--outline">Bottom</button>
+</div>
+
+<!-- @with_icons -->
+<div class="ui-button-group" role="group" aria-label="Text formatting">
+  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Bold">
+    <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"></path>
+    </svg>
+  </button>
+  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Italic">
+    <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"></path>
+    </svg>
+  </button>
+  <button class="ui-button ui-button--outline ui-button--icon" aria-label="Underline">
+    <svg class="ui-icon" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"></path>
+    </svg>
+  </button>
+</div>

package/src/components/actions/button-group/button-group.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, 'button-group.docs.json');
+const DOCS_PATH = resolve(__dirname, 'button-group.docs.html');
 
 test.describe('button-group visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'button-group');
     await saveForLostPixel(page, 'button-group');
     await expect(page.locator('body')).toHaveScreenshot('button-group.visual.png');

package/src/components/actions/close-button/close-button.docs.html

@@ -0,0 +1,77 @@
+---
+title: Close Button
+type: component
+id: close-button
+description: Dismiss button for closing modals, alerts, drawers, and other dismissible elements.
+api: ./close-button.api.json
+mergeInto: button
+---
+
+<!-- @default -->
+<button class="ui-close-button" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+
+<!-- @sizes | row -->
+<button class="ui-close-button ui-close-button--sm" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+<button class="ui-close-button" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+<button class="ui-close-button ui-close-button--lg" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+
+<!-- @subtle | row -->
+<!-- Lower visual prominence for secondary dismiss actions. -->
+<button class="ui-close-button ui-close-button--subtle" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+<button class="ui-close-button ui-close-button--subtle ui-close-button--sm" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+
+<!-- @states | row -->
+<button class="ui-close-button" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+<button class="ui-close-button ui-close-button--hover" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+<button class="ui-close-button ui-close-button--focus" type="button" aria-label="Close">
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>
+<button class="ui-close-button" type="button" aria-label="Close" disabled>
+  <svg class="ui-close-button__icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+</button>

package/src/components/actions/close-button/close-button.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, 'close-button.docs.json');
+const DOCS_PATH = resolve(__dirname, 'close-button.docs.html');
 
 test.describe('close-button visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'close-button');
     await saveForLostPixel(page, 'close-button');
     await expect(page.locator('body')).toHaveScreenshot('close-button.visual.png');

package/src/components/content/divider/divider.docs.html

@@ -0,0 +1,27 @@
+---
+title: Divider
+type: component
+description: Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.
+api: ./divider.api.json
+---
+
+<!-- @default -->
+<div class="ui-divider" role="separator"></div>
+
+<!-- @with_label -->
+<div class="ui-divider" role="separator">OR</div>
+
+<!-- @label_alignment -->
+<div class="ui-divider ui-divider--start" role="separator">{{ t('start', 'Start') }}</div>
+<div class="ui-divider" role="separator">{{ t('center', 'Center') }}</div>
+<div class="ui-divider ui-divider--end" role="separator">{{ t('end', 'End') }}</div>
+
+<!-- @dashed -->
+<div class="ui-divider ui-divider--dashed" role="separator"></div>
+
+<!-- @vertical -->
+<div style="display: flex; height: 64px; align-items: center;">
+  <span>{{ t('left', 'Left') }}</span>
+  <div class="ui-divider ui-divider--vertical" role="separator"></div>
+  <span>{{ t('right', 'Right') }}</span>
+</div>

package/src/components/content/divider/divider.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, 'divider.docs.json');
+const DOCS_PATH = resolve(__dirname, 'divider.docs.html');
 
 test.describe('divider visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'divider');
     await saveForLostPixel(page, 'divider');
     await expect(page.locator('body')).toHaveScreenshot('divider.visual.png');

package/src/components/content/scroll-area/scroll-area.docs.html

@@ -0,0 +1,130 @@
+---
+title: Scroll Area
+type: component
+id: scroll-area
+description: Scrollable container with styled scrollbar. Provides overflow control and custom scrollbar styling.
+api: ./scroll-area.api.json
+---
+
+<!-- @default -->
+<div class="ui-scroll-area">
+  <div class="ui-scroll-area__viewport">
+    <p>Line 1 of scrollable content</p>
+    <p>Line 2 of scrollable content</p>
+    <p>Line 3 of scrollable content</p>
+    <p>Line 4 of scrollable content</p>
+    <p>Line 5 of scrollable content</p>
+    <p>Line 6 of scrollable content</p>
+    <p>Line 7 of scrollable content</p>
+    <p>Line 8 of scrollable content</p>
+    <p>Line 9 of scrollable content</p>
+    <p>Line 10 of scrollable content</p>
+    <p>Line 11 of scrollable content</p>
+    <p>Line 12 of scrollable content</p>
+    <p>Line 13 of scrollable content</p>
+    <p>Line 14 of scrollable content</p>
+    <p>Line 15 of scrollable content</p>
+  </div>
+</div>
+
+<!-- @sizes | column -->
+<div class="ui-scroll-area ui-scroll-area--sm">
+  <div class="ui-scroll-area__viewport">
+    <p>Small - Line 1</p>
+    <p>Small - Line 2</p>
+    <p>Small - Line 3</p>
+    <p>Small - Line 4</p>
+    <p>Small - Line 5</p>
+    <p>Small - Line 6</p>
+    <p>Small - Line 7</p>
+    <p>Small - Line 8</p>
+  </div>
+</div>
+<div class="ui-scroll-area ui-scroll-area--xl">
+  <div class="ui-scroll-area__viewport">
+    <p>XL - Line 1</p>
+    <p>XL - Line 2</p>
+    <p>XL - Line 3</p>
+    <p>XL - Line 4</p>
+    <p>XL - Line 5</p>
+  </div>
+</div>
+<div class="ui-scroll-area ui-scroll-area--lg">
+  <div class="ui-scroll-area__viewport">
+    <p>Large - Line 1</p>
+    <p>Large - Line 2</p>
+    <p>Large - Line 3</p>
+    <p>Large - Line 4</p>
+    <p>Large - Line 5</p>
+    <p>Large - Line 6</p>
+    <p>Large - Line 7</p>
+    <p>Large - Line 8</p>
+    <p>Large - Line 9</p>
+    <p>Large - Line 10</p>
+    <p>Large - Line 11</p>
+    <p>Large - Line 12</p>
+    <p>Large - Line 13</p>
+    <p>Large - Line 14</p>
+    <p>Large - Line 15</p>
+    <p>Large - Line 16</p>
+    <p>Large - Line 17</p>
+    <p>Large - Line 18</p>
+    <p>Large - Line 19</p>
+    <p>Large - Line 20</p>
+  </div>
+</div>
+
+<!-- @direction | column -->
+<div class="ui-scroll-area ui-scroll-area--horizontal">
+  <div class="ui-scroll-area__viewport">
+    <p style="white-space: nowrap">This content scrolls horizontally when it overflows the container width. Resize the window to test.</p>
+  </div>
+</div>
+<div class="ui-scroll-area ui-scroll-area--both ui-scroll-area--sm">
+  <div class="ui-scroll-area__viewport">
+    <p style="white-space: nowrap">Both directions - Line 1 with long content that overflows horizontally</p>
+    <p>Line 2</p>
+    <p>Line 3</p>
+    <p>Line 4</p>
+    <p>Line 5</p>
+    <p>Line 6</p>
+    <p>Line 7</p>
+    <p>Line 8</p>
+  </div>
+</div>
+
+<!-- @thin_scrollbar -->
+<div class="ui-scroll-area ui-scroll-area--thin">
+  <div class="ui-scroll-area__viewport">
+    <p>Thin scrollbar - Line 1</p>
+    <p>Thin scrollbar - Line 2</p>
+    <p>Thin scrollbar - Line 3</p>
+    <p>Thin scrollbar - Line 4</p>
+    <p>Thin scrollbar - Line 5</p>
+    <p>Thin scrollbar - Line 6</p>
+    <p>Thin scrollbar - Line 7</p>
+    <p>Thin scrollbar - Line 8</p>
+    <p>Thin scrollbar - Line 9</p>
+    <p>Thin scrollbar - Line 10</p>
+    <p>Thin scrollbar - Line 11</p>
+    <p>Thin scrollbar - Line 12</p>
+  </div>
+</div>
+
+<!-- @auto_hide -->
+<div class="ui-scroll-area ui-scroll-area--auto-hide">
+  <div class="ui-scroll-area__viewport">
+    <p>Scrollbar hidden until hover - Line 1</p>
+    <p>Scrollbar hidden until hover - Line 2</p>
+    <p>Scrollbar hidden until hover - Line 3</p>
+    <p>Scrollbar hidden until hover - Line 4</p>
+    <p>Scrollbar hidden until hover - Line 5</p>
+    <p>Scrollbar hidden until hover - Line 6</p>
+    <p>Scrollbar hidden until hover - Line 7</p>
+    <p>Scrollbar hidden until hover - Line 8</p>
+    <p>Scrollbar hidden until hover - Line 9</p>
+    <p>Scrollbar hidden until hover - Line 10</p>
+    <p>Scrollbar hidden until hover - Line 11</p>
+    <p>Scrollbar hidden until hover - Line 12</p>
+  </div>
+</div>

package/src/components/content/scroll-area/scroll-area.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, 'scroll-area.docs.json');
+const DOCS_PATH = resolve(__dirname, 'scroll-area.docs.html');
 
 test.describe('scroll-area visual regression', () => {
   test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'scroll-area');
     await saveForLostPixel(page, 'scroll-area');
     await expect(page.locator('body')).toHaveScreenshot('scroll-area-visual.png');