@teseor/css 1.15.1 → 1.15.3

package/src/utilities/text/docs.html

@@ -5,59 +5,59 @@ description: Typography and text utilities. Font sizes follow a 1.2 modular scal
 
 <!-- @sizes | column -->
 <!-- Font size utilities with 8px grid-snapped line-heights. -->
-<p class="ui-text-xs">text-xs: 12px / 16px line-height</p>
-<p class="ui-text-sm">text-sm: 14px / 24px line-height</p>
-<p class="ui-text-md">text-md: 16px / 24px line-height</p>
-<p class="ui-text-lg">text-lg: 20px / 32px line-height</p>
-<p class="ui-text-xl">text-xl: 24px / 32px line-height</p>
-<p class="ui-text-2xl">text-2xl: 28px / 32px line-height</p>
-<p class="ui-text-3xl">text-3xl: 32px / 40px line-height</p>
-<p class="ui-text-4xl">text-4xl: 40px / 48px line-height</p>
+<p class="ui-text-xs">{{ t('text_xs_desc', 'text-xs: 12px / 16px line-height') }}</p>
+<p class="ui-text-sm">{{ t('text_sm_desc', 'text-sm: 14px / 24px line-height') }}</p>
+<p class="ui-text-md">{{ t('text_md_desc', 'text-md: 16px / 24px line-height') }}</p>
+<p class="ui-text-lg">{{ t('text_lg_desc', 'text-lg: 20px / 32px line-height') }}</p>
+<p class="ui-text-xl">{{ t('text_xl_desc', 'text-xl: 24px / 32px line-height') }}</p>
+<p class="ui-text-2xl">{{ t('text_2xl_desc', 'text-2xl: 28px / 32px line-height') }}</p>
+<p class="ui-text-3xl">{{ t('text_3xl_desc', 'text-3xl: 32px / 40px line-height') }}</p>
+<p class="ui-text-4xl">{{ t('text_4xl_desc', 'text-4xl: 40px / 48px line-height') }}</p>
 
 <!-- @text_roles | column -->
 <!-- Semantic text styles for specific use cases. -->
-<p class="ui-text-lead">Lead: Opening paragraph style (20px / 32px)</p>
-<p class="ui-text-eyebrow">Eyebrow: Small caps label</p>
-<p class="ui-text-caption">Caption: Labels and hints (12px / 16px)</p>
-<p class="ui-text-body-sm">Body small: Secondary text (14px / 24px)</p>
+<p class="ui-text-lead">{{ t('lead_desc', 'Lead: Opening paragraph style (20px / 32px)') }}</p>
+<p class="ui-text-eyebrow">{{ t('eyebrow_desc', 'Eyebrow: Small caps label') }}</p>
+<p class="ui-text-caption">{{ t('caption_desc', 'Caption: Labels and hints (12px / 16px)') }}</p>
+<p class="ui-text-body-sm">{{ t('body_small_secondary_text_14px_24px', 'Body small: Secondary text (14px / 24px)') }}</p>
 
 <!-- @weights | column -->
-<p class="ui-font-normal">font-normal (400)</p>
-<p class="ui-font-medium">font-medium (500)</p>
-<p class="ui-font-semibold">font-semibold (600)</p>
-<p class="ui-font-bold">font-bold (700)</p>
+<p class="ui-font-normal">{{ t('font_normal_400', 'font-normal (400)') }}</p>
+<p class="ui-font-medium">{{ t('font_medium_500', 'font-medium (500)') }}</p>
+<p class="ui-font-semibold">{{ t('font_semibold_600', 'font-semibold (600)') }}</p>
+<p class="ui-font-bold">{{ t('font_bold_700', 'font-bold (700)') }}</p>
 
 <!-- @letter_spacing | column -->
-<p class="ui-text-2xl ui-tracking-display">tracking-display: Tight (-0.02em)</p>
-<p class="ui-tracking-body">tracking-body: Default (0)</p>
-<p class="ui-tracking-caps ui-uppercase">tracking-caps: Wide (+0.08em)</p>
+<p class="ui-text-2xl ui-tracking-display">{{ t('tracking_display_desc', 'tracking-display: Tight (-0.02em)') }}</p>
+<p class="ui-tracking-body">{{ t('tracking_body_desc', 'tracking-body: Default (0)') }}</p>
+<p class="ui-tracking-caps ui-uppercase">{{ t('tracking_caps_desc', 'tracking-caps: Wide (+0.08em)') }}</p>
 
 <!-- @line_length | column -->
 <!-- Constrain text width for optimal readability. -->
-<p class="ui-prose-sm">prose-sm: 45ch max-width</p>
-<p class="ui-prose">prose: 65ch max-width (recommended)</p>
-<p class="ui-prose-lg">prose-lg: 75ch max-width</p>
+<p class="ui-prose-sm">{{ t('prose_sm_desc', 'prose-sm: 45ch max-width') }}</p>
+<p class="ui-prose">{{ t('prose_desc', 'prose: 65ch max-width (recommended)') }}</p>
+<p class="ui-prose-lg">{{ t('prose_lg_desc', 'prose-lg: 75ch max-width') }}</p>
 
 <!-- @colors | column -->
-<p class="ui-text-primary">text-primary</p>
-<p class="ui-text-muted">text-muted</p>
-<p class="ui-text-success">text-success</p>
-<p class="ui-text-warning">text-warning</p>
-<p class="ui-text-danger">text-danger</p>
+<p class="ui-text-primary">{{ t('text_primary', 'text-primary') }}</p>
+<p class="ui-text-muted">{{ t('text_muted', 'text-muted') }}</p>
+<p class="ui-text-success">{{ t('text_success', 'text-success') }}</p>
+<p class="ui-text-warning">{{ t('text_warning', 'text-warning') }}</p>
+<p class="ui-text-danger">{{ t('text_danger', 'text-danger') }}</p>
 
 <!-- @alignment | column -->
-<p class="ui-text-start">text-start (default)</p>
-<p class="ui-text-center">text-center</p>
-<p class="ui-text-end">text-end</p>
+<p class="ui-text-start">{{ t('text_start_default', 'text-start (default)') }}</p>
+<p class="ui-text-center">{{ t('text_center', 'text-center') }}</p>
+<p class="ui-text-end">{{ t('text_end', 'text-end') }}</p>
 
 <!-- @text_wrap | column -->
 <!-- Control how text wraps across lines. -->
-<p class="ui-text-balance ui-text-2xl ui-font-bold" style="max-inline-size: 20rem">Balanced: distributes text evenly across lines</p>
-<p class="ui-text-pretty" style="max-inline-size: 20rem">Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally</p>
-<p class="ui-text-nowrap">Nowrap: prevents text from wrapping to the next line</p>
+<p class="ui-text-balance ui-text-2xl ui-font-bold" style="max-inline-size: 20rem">{{ t('balanced_desc', 'Balanced: distributes text evenly across lines') }}</p>
+<p class="ui-text-pretty" style="max-inline-size: 20rem">{{ t('pretty_desc', 'Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally') }}</p>
+<p class="ui-text-nowrap">{{ t('nowrap_desc', 'Nowrap: prevents text from wrapping to the next line') }}</p>
 
 <!-- @multi_line_truncation | column -->
 <!-- Clamp text to a specific number of lines with ellipsis. -->
-<p class="ui-truncate-2" style="max-inline-size: 20rem">Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character.</p>
-<p class="ui-truncate-3" style="max-inline-size: 20rem">Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end.</p>
-<p class="ui-truncate-4" style="max-inline-size: 20rem">Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis.</p>
+<p class="ui-truncate-2" style="max-inline-size: 20rem">{{ t('truncate_2_lines_demo', 'Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character.') }}</p>
+<p class="ui-truncate-3" style="max-inline-size: 20rem">{{ t('truncate_3_lines_demo', 'Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end.') }}</p>
+<p class="ui-truncate-4" style="max-inline-size: 20rem">{{ t('truncate_4_lines_demo', 'Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis.') }}</p>

package/src/utilities/view-transition/docs.html

@@ -10,18 +10,18 @@ description: CSS View Transitions API utilities for smooth page navigation. Enab
 
 <!-- @slide_animations -->
 <!-- Content slides in/out in different directions. -->
-<main class="ui-transition-name-main">Slides up</main>
-<main class="ui-transition-name-slide-up">Slides up</main>
-<main class="ui-transition-name-slide-down">Slides down</main>
-<main class="ui-transition-name-slide-start">Slides from left</main>
-<main class="ui-transition-name-slide-end">Slides from right</main>
+<main class="ui-transition-name-main">{{ t('slides_up', 'Slides up') }}</main>
+<main class="ui-transition-name-slide-up">{{ t('slides_up', 'Slides up') }}</main>
+<main class="ui-transition-name-slide-down">{{ t('slides_down', 'Slides down') }}</main>
+<main class="ui-transition-name-slide-start">{{ t('slides_from_left', 'Slides from left') }}</main>
+<main class="ui-transition-name-slide-end">{{ t('slides_from_right', 'Slides from right') }}</main>
 
 <!-- @scale_and_fade -->
 <!-- Scale effect for modals/cards, fade for subtle transitions. -->
-<div class="ui-transition-name-scale">Scales in/out</div>
-<div class="ui-transition-name-card">Card scales</div>
-<div class="ui-transition-name-modal">Modal scales</div>
-<div class="ui-transition-name-fade">Fades in/out</div>
+<div class="ui-transition-name-scale">{{ t('scales_inout', 'Scales in/out') }}</div>
+<div class="ui-transition-name-card">{{ t('card_scales', 'Card scales') }}</div>
+<div class="ui-transition-name-modal">{{ t('modal_scales', 'Modal scales') }}</div>
+<div class="ui-transition-name-fade">{{ t('fades_inout', 'Fades in/out') }}</div>
 
 <!-- @hero_morph -->
 <!-- Same element on both pages morphs (position/size interpolates). Use same class on source and target. -->
@@ -33,16 +33,16 @@ description: CSS View Transitions API utilities for smooth page navigation. Enab
 
 <!-- @disable -->
 <!-- Exclude an element from view transitions. -->
-<div class="ui-transition-name-none">No transition</div>
+<div class="ui-transition-name-none">{{ t('no_transition', 'No transition') }}</div>
 
 <!-- @preserving_scroll_position -->
 <!-- View transitions snapshot elements, resetting scroll. Use `pagereveal` event to restore scroll before paint. -->
-// Save scroll on navigation
+{{ t('save_scroll_on_navigation', '// Save scroll on navigation') }}
 link.addEventListener('click', () => {
   sessionStorage.setItem('scroll', sidebar.scrollTop);
 });
 
-// Restore before page reveals
+{{ t('restore_before_page_reveals', '// Restore before page reveals') }}
 window.addEventListener('pagereveal', () => {
   const saved = sessionStorage.getItem('scroll');
   if (saved) sidebar.scrollTop = parseInt(saved, 10);

package/src/utilities/visually-hidden/docs.html

@@ -7,10 +7,10 @@ description: Hides content visually while keeping it accessible to screen reader
 <!-- @default -->
 <!-- Content is hidden visually but announced by screen readers -->
 <button>
-Submit
-  <span class="ui-visually-hidden"> form to contact support</span>
+{{ t('submit', 'Submit') }}
+  <span class="ui-visually-hidden"> {{ t('form_to_contact_support', 'form to contact support') }}</span>
 </button>
 
 <!-- @focusable_skip_link -->
 <!-- Becomes visible when focused - useful for skip links -->
-<a class="ui-visually-hidden ui-visually-hidden--focusable" href="#main" style="position: relative;">Skip to main content</a>
+<a class="ui-visually-hidden ui-visually-hidden--focusable" href="#main" style="position: relative;">{{ t('skip_to_main_content', 'Skip to main content') }}</a>

package/src/components/actions/button/visual.spec.ts

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

package/src/components/actions/button-group/visual.spec.ts

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

package/src/components/actions/close-button/visual.spec.ts

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

package/src/components/content/divider/visual.spec.ts

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

package/src/components/content/scroll-area/visual.spec.ts

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

package/src/components/content/spacer/visual.spec.ts

@@ -1,14 +0,0 @@
-import { resolve } from 'node:path';
-import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromHtmlDocs } from '../../../../test-utils';
-
-const DOCS_PATH = resolve(__dirname, 'docs.html');
-
-test.describe('spacer visual regression', () => {
-  test('all variations', async ({ page }) => {
-    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
-    // skip validateGridRhythm: spacer has no intrinsic height
-    await saveForLostPixel(page, 'spacer');
-    await expect(page.locator('body')).toHaveScreenshot('visual.png');
-  });
-});

package/src/components/data-display/avatar/visual.spec.ts

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

package/src/components/data-display/badge/visual.spec.ts

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

package/src/components/data-display/card/visual.spec.ts

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

package/src/components/data-display/data-list/visual.spec.ts

@@ -1,19 +0,0 @@
-import { resolve } from 'node:path';
-import { expect, test } from '@playwright/test';
-import {
-  saveForLostPixel,
-  setupVisualTestFromHtmlDocs,
-  validateGridRhythm,
-} from '../../../../test-utils';
-
-const DOCS_PATH = resolve(__dirname, 'docs.html');
-
-test.describe('data-list visual regression', () => {
-  test('all variations', async ({ page }) => {
-    await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
-    // TODO: fix grid rhythm - 1px borders cause off-grid heights (#179)
-    // await validateGridRhythm(page, 'data-list');
-    await saveForLostPixel(page, 'data-list');
-    await expect(page.locator('body')).toHaveScreenshot('visual.png');
-  });
-});

package/src/components/data-display/icon/visual.spec.ts

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

package/src/components/data-display/image/visual.spec.ts

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

package/src/components/data-display/stat/visual.spec.ts

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

package/src/components/data-display/status/visual.spec.ts

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

package/src/components/data-display/table/visual.spec.ts

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

package/src/components/data-display/tag/visual.spec.ts

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

package/src/components/disclosure/accordion/visual.spec.ts

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

package/src/components/disclosure/disclosure/visual.spec.ts

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

package/src/components/feedback/alert/visual.spec.ts

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

package/src/components/feedback/progress/visual.spec.ts

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

package/src/components/feedback/progress-circle/visual.spec.ts

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