@teseor/css 1.14.2 → 1.15.0

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

package/src/components/forms/password-input/password-input.docs.html

@@ -0,0 +1,88 @@
+---
+title: Password Input
+type: component
+id: password-input
+description: Secure password field with toggle visibility button.
+api: ./password-input.api.json
+---
+
+<!-- @default -->
+<div class="ui-password-input">
+  <input class="ui-password-input__field" type="password" placeholder="Enter password"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+
+<!-- @sizes | column -->
+<div class="ui-password-input ui-password-input--sm">
+  <input class="ui-password-input__field" type="password" placeholder="Small"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+<div class="ui-password-input">
+  <input class="ui-password-input__field" type="password" placeholder="Default"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+<div class="ui-password-input ui-password-input--lg">
+  <input class="ui-password-input__field" type="password" placeholder="Large"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+
+<!-- @block -->
+<!-- Full-width layout. -->
+<div class="ui-password-input ui-password-input--block">
+  <input class="ui-password-input__field" type="password" placeholder="Full width"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+
+<!-- @states | column -->
+<div class="ui-password-input ui-password-input--error">
+  <input class="ui-password-input__field" type="password" value="wrongpass"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+<div class="ui-password-input ui-password-input--success">
+  <input class="ui-password-input__field" type="password" value="correctpass"></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password">
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>
+<div class="ui-password-input ui-password-input--disabled">
+  <input class="ui-password-input__field" type="password" placeholder="Disabled" disabled></input>
+  <button class="ui-password-input__toggle" type="button" aria-label="Show password" disabled>
+    <svg viewBox="0 0 24 24">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+      <circle cx="12" cy="12" r="3"></circle>
+    </svg>
+  </button>
+</div>

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

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

@@ -0,0 +1,52 @@
+---
+title: Radio
+type: component
+id: radio
+description: Native radio button with custom styling. Use for mutually exclusive options within a group.
+api: ./radio.api.json
+---
+
+<!-- @default | row -->
+<input class="ui-radio" type="radio" name="demo1"></input>
+<input class="ui-radio" type="radio" name="demo1" checked></input>
+
+<!-- @sizes | row -->
+<input class="ui-radio" type="radio" name="sizes" checked></input>
+<input class="ui-radio ui-radio--lg" type="radio" name="sizes2" checked></input>
+
+<!-- @states | row -->
+<input class="ui-radio" type="radio" name="states1"></input>
+<input class="ui-radio" type="radio" name="states2" checked></input>
+<input class="ui-radio" type="radio" name="states3" disabled></input>
+<input class="ui-radio" type="radio" name="states4" checked disabled></input>
+
+<!-- @validation_states | row -->
+<input class="ui-radio ui-radio--error" type="radio" name="error1"></input>
+<input class="ui-radio ui-radio--error" type="radio" name="error2" checked></input>
+<input class="ui-radio ui-radio--success" type="radio" name="success1"></input>
+<input class="ui-radio ui-radio--success" type="radio" name="success2" checked></input>
+
+<!-- @with_label -->
+<label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+  <input class="ui-radio" type="radio" name="labeled"></input>
+  <span>Option one</span>
+</label>
+
+<!-- @radio_group -->
+<fieldset style="border: none; padding: 0; margin: 0;">
+  <legend style="font-weight: 600; margin-block-end: var(--ui-space-1);">Choose an option</legend>
+  <div class="ui-column" style="--column-gap: var(--ui-space-1);">
+    <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+      <input class="ui-radio" type="radio" name="group-demo" checked></input>
+      <span>Option A</span>
+    </label>
+    <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+      <input class="ui-radio" type="radio" name="group-demo"></input>
+      <span>Option B</span>
+    </label>
+    <label class="ui-row" style="gap: var(--ui-space-1); cursor: pointer;">
+      <input class="ui-radio" type="radio" name="group-demo"></input>
+      <span>Option C</span>
+    </label>
+  </div>
+</fieldset>

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

package/src/components/forms/radio-group/radio-group.docs.html

@@ -0,0 +1,100 @@
+---
+title: Radio Group
+type: component
+id: radio-group
+description: Groups related radio buttons with a legend for single selection. Built on native fieldset semantics.
+api: ./radio-group.api.json
+mergeInto: radio
+---
+
+<!-- @default -->
+<fieldset class="ui-radio-group">
+  <legend class="ui-radio-group__legend">Payment method</legend>
+  <div class="ui-radio-group__items">
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="payment" checked></input>
+      <span>Credit card</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="payment"></input>
+      <span>Debit card</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="payment"></input>
+      <span>Bank transfer</span>
+    </label>
+  </div>
+</fieldset>
+
+<!-- @horizontal -->
+<fieldset class="ui-radio-group ui-radio-group--horizontal">
+  <legend class="ui-radio-group__legend">Size</legend>
+  <div class="ui-radio-group__items">
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="size" checked></input>
+      <span>Small</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="size"></input>
+      <span>Medium</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="size"></input>
+      <span>Large</span>
+    </label>
+  </div>
+</fieldset>
+
+<!-- @compact -->
+<fieldset class="ui-radio-group ui-radio-group--compact">
+  <legend class="ui-radio-group__legend">Priority</legend>
+  <div class="ui-radio-group__items">
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="priority" checked></input>
+      <span>Low</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="priority"></input>
+      <span>Medium</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="priority"></input>
+      <span>High</span>
+    </label>
+  </div>
+</fieldset>
+
+<!-- @error_state -->
+<fieldset class="ui-radio-group ui-radio-group--error">
+  <legend class="ui-radio-group__legend">Shipping</legend>
+  <div class="ui-radio-group__items">
+    <label class="ui-radio-group__item">
+      <input class="ui-radio ui-radio--error" type="radio" name="shipping"></input>
+      <span>Standard</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio ui-radio--error" type="radio" name="shipping"></input>
+      <span>Express</span>
+    </label>
+  </div>
+  <span class="ui-form-error">Please select a shipping method</span>
+</fieldset>
+
+<!-- @disabled -->
+<fieldset class="ui-radio-group" disabled>
+  <legend class="ui-radio-group__legend">Plan (locked)</legend>
+  <div class="ui-radio-group__items">
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="plan" checked></input>
+      <span>Free</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="plan"></input>
+      <span>Pro</span>
+    </label>
+    <label class="ui-radio-group__item">
+      <input class="ui-radio" type="radio" name="plan"></input>
+      <span>Enterprise</span>
+    </label>
+  </div>
+</fieldset>

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

package/src/components/forms/search-input/search-input.docs.html

@@ -0,0 +1,87 @@
+---
+title: Search Input
+type: component
+id: search-input
+description: Search field with built-in search icon and optional clear button.
+api: ./search-input.api.json
+---
+
+<!-- @default -->
+<div class="ui-search-input">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" placeholder="Search..."></input>
+</div>
+
+<!-- @with_clear_button -->
+<div class="ui-search-input ui-search-input--has-clear">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" value="Design tokens"></input>
+  <button class="ui-search-input__clear" type="button" aria-label="Clear search">
+    <svg viewBox="0 0 24 24">
+      <path d="M18 6 6 18"></path>
+      <path d="m6 6 12 12"></path>
+    </svg>
+  </button>
+</div>
+
+<!-- @sizes | column -->
+<div class="ui-search-input ui-search-input--sm">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" placeholder="Small"></input>
+</div>
+<div class="ui-search-input">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" placeholder="Default"></input>
+</div>
+<div class="ui-search-input ui-search-input--lg">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" placeholder="Large"></input>
+</div>
+
+<!-- @block -->
+<!-- Full-width layout. -->
+<div class="ui-search-input ui-search-input--block">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" placeholder="Full width search..."></input>
+</div>
+
+<!-- @disabled -->
+<div class="ui-search-input ui-search-input--disabled">
+  <span class="ui-search-input__icon">
+    <svg viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"></circle>
+      <path d="m21 21-4.3-4.3"></path>
+    </svg>
+  </span>
+  <input class="ui-search-input__field" type="search" placeholder="Disabled" disabled></input>
+</div>

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

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

@@ -0,0 +1,70 @@
+---
+title: Select
+type: component
+id: select
+description: Native select dropdown with custom styling. Dropdown options use browser default styles.
+api: ./select.api.json
+---
+
+<!-- @default -->
+<select class="ui-select">
+  <option value disabled selected>Choose option...</option>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+  <option value="3">Option 3</option>
+</select>
+
+<!-- @sizes | column -->
+<select class="ui-select ui-select--sm">
+  <option>Small</option>
+  <option>Option 2</option>
+</select>
+<select class="ui-select">
+  <option>Default</option>
+  <option>Option 2</option>
+</select>
+<select class="ui-select ui-select--lg">
+  <option>Large</option>
+  <option>Option 2</option>
+</select>
+
+<!-- @variants | column -->
+<select class="ui-select">
+  <option>Outline (default)</option>
+</select>
+<select class="ui-select ui-select--filled">
+  <option>Filled</option>
+</select>
+<select class="ui-select ui-select--ghost">
+  <option>Ghost</option>
+</select>
+
+<!-- @states | column -->
+<select class="ui-select ui-select--error">
+  <option>Error state</option>
+</select>
+<select class="ui-select ui-select--success">
+  <option>Success state</option>
+</select>
+<select class="ui-select" disabled>
+  <option>Disabled</option>
+</select>
+
+<!-- @full_width -->
+<select class="ui-select ui-select--block">
+  <option value>Full width select...</option>
+  <option value="1">Option 1</option>
+</select>
+
+<!-- @with_option_groups -->
+<select class="ui-select ui-select--block">
+  <option value disabled selected>Choose a fruit...</option>
+  <optgroup label="Citrus">
+    <option value="orange">Orange</option>
+    <option value="lemon">Lemon</option>
+  </optgroup>
+  <optgroup label="Berries">
+    <option value="strawberry">Strawberry</option>
+    <option value="blueberry">Blueberry</option>
+  </optgroup>
+</select>

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

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

@@ -0,0 +1,25 @@
+---
+title: Slider
+type: component
+id: slider
+description: Range value selection. Styles the native range input cross-browser for track and thumb.
+api: ./slider.api.json
+---
+
+<!-- @default -->
+<input class="ui-slider" type="range" min="0" max="100" value="50"></input>
+
+<!-- @sizes | column -->
+<input class="ui-slider ui-slider--sm" type="range" min="0" max="100" value="30"></input>
+<input class="ui-slider" type="range" min="0" max="100" value="50"></input>
+<input class="ui-slider ui-slider--lg" type="range" min="0" max="100" value="70"></input>
+
+<!-- @colors | column -->
+<input class="ui-slider" type="range" min="0" max="100" value="50"></input>
+<input class="ui-slider ui-slider--success" type="range" min="0" max="100" value="80"></input>
+<input class="ui-slider ui-slider--warning" type="range" min="0" max="100" value="60"></input>
+<input class="ui-slider ui-slider--danger" type="range" min="0" max="100" value="25"></input>
+
+<!-- @disabled | column -->
+<input class="ui-slider" type="range" min="0" max="100" value="40" disabled></input>
+<input class="ui-slider ui-slider--success" type="range" min="0" max="100" value="70" disabled></input>

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

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

@@ -0,0 +1,39 @@
+---
+title: Textarea
+type: component
+id: textarea
+description: Multi-line text input for longer content like comments or descriptions.
+api: ./textarea.api.json
+---
+
+<!-- @default -->
+<textarea class="ui-textarea" placeholder="Enter your message..."></textarea>
+
+<!-- @sizes | column -->
+<textarea class="ui-textarea ui-textarea--sm" placeholder="Small (3 rows)"></textarea>
+<textarea class="ui-textarea" placeholder="Default (4 rows)"></textarea>
+<textarea class="ui-textarea ui-textarea--lg" placeholder="Large (6 rows)"></textarea>
+
+<!-- @variants | column -->
+<textarea class="ui-textarea" placeholder="Outline (default)"></textarea>
+<textarea class="ui-textarea ui-textarea--filled" placeholder="Filled"></textarea>
+<textarea class="ui-textarea ui-textarea--ghost" placeholder="Ghost"></textarea>
+
+<!-- @states | column -->
+<textarea class="ui-textarea ui-textarea--error">Invalid content</textarea>
+<textarea class="ui-textarea ui-textarea--success">Valid content</textarea>
+<textarea class="ui-textarea" disabled placeholder="Disabled"></textarea>
+<textarea class="ui-textarea" readonly>Read only content</textarea>
+
+<!-- @resize_options | column -->
+<!-- Control how users can resize the textarea. -->
+<textarea class="ui-textarea" placeholder="Vertical resize (default)"></textarea>
+<textarea class="ui-textarea ui-textarea--resize-none" placeholder="No resize"></textarea>
+<textarea class="ui-textarea ui-textarea--resize-horizontal" placeholder="Horizontal resize only"></textarea>
+<textarea class="ui-textarea ui-textarea--resize-both" placeholder="Resize both directions"></textarea>
+
+<!-- @auto_size | column -->
+<!-- Automatically grows to fit content using field-sizing: content. Falls back to fixed min-height in unsupported browsers. -->
+<textarea class="ui-textarea ui-textarea--auto-size" placeholder="Type to grow..."></textarea>
+<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--sm" placeholder="Small auto-size"></textarea>
+<textarea class="ui-textarea ui-textarea--auto-size ui-textarea--lg" placeholder="Large auto-size"></textarea>

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