@teseor/css 1.14.3 → 1.15.1

package/src/components/forms/number-input/{number-input.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, 'number-input.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,85 @@
+---
+title: Password Input
+description: Secure password field with toggle visibility button.
+---
+
+<!-- @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 → 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, 'password-input.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,49 @@
+---
+title: Radio
+description: Native radio button with custom styling. Use for mutually exclusive options within a group.
+---
+
+<!-- @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 → 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, 'radio.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,97 @@
+---
+title: Radio Group
+description: Groups related radio buttons with a legend for single selection. Built on native fieldset semantics.
+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 → 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, 'radio-group.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,84 @@
+---
+title: Search Input
+description: Search field with built-in search icon and optional clear button.
+---
+
+<!-- @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 → 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, 'search-input.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,67 @@
+---
+title: Select
+description: Native select dropdown with custom styling. Dropdown options use browser default styles.
+---
+
+<!-- @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 → 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, 'select.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,22 @@
+---
+title: Slider
+description: Range value selection. Styles the native range input cross-browser for track and thumb.
+---
+
+<!-- @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 → 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, 'slider.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

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

@@ -0,0 +1,36 @@
+---
+title: Textarea
+description: Multi-line text input for longer content like comments or descriptions.
+---
+
+<!-- @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 → 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, 'textarea.docs.json');
+const DOCS_PATH = resolve(__dirname, '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');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });