@teseor/css 1.14.3 → 1.15.0

package/src/components/data-display/status/status.docs.html

@@ -0,0 +1,67 @@
+---
+title: Status
+type: component
+id: status
+description: Visual status indicator with colored dot to show state.
+api: ./status.api.json
+---
+
+<!-- @variants -->
+<div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
+  <span class="ui-status">
+    <span class="ui-status__dot"></span>
+Default
+  </span>
+  <span class="ui-status ui-status--success">
+    <span class="ui-status__dot"></span>
+Online
+  </span>
+  <span class="ui-status ui-status--warning">
+    <span class="ui-status__dot"></span>
+Away
+  </span>
+  <span class="ui-status ui-status--danger">
+    <span class="ui-status__dot"></span>
+Busy
+  </span>
+  <span class="ui-status ui-status--info">
+    <span class="ui-status__dot"></span>
+In a meeting
+  </span>
+</div>
+
+<!-- @sizes -->
+<div style="display: flex; gap: var(--ui-space-4); align-items: center;">
+  <span class="ui-status ui-status--success ui-status--sm">
+    <span class="ui-status__dot"></span>
+Small
+  </span>
+  <span class="ui-status ui-status--success">
+    <span class="ui-status__dot"></span>
+Default
+  </span>
+  <span class="ui-status ui-status--success ui-status--lg">
+    <span class="ui-status__dot"></span>
+Large
+  </span>
+</div>
+
+<!-- @pulse_animation -->
+<!-- For live or active indicators -->
+<span class="ui-status ui-status--success ui-status--pulse">
+  <span class="ui-status__dot"></span>
+Live
+</span>
+
+<!-- @dot_only -->
+<div style="display: flex; gap: var(--ui-space-2);">
+  <span class="ui-status ui-status--success">
+    <span class="ui-status__dot"></span>
+  </span>
+  <span class="ui-status ui-status--warning">
+    <span class="ui-status__dot"></span>
+  </span>
+  <span class="ui-status ui-status--danger">
+    <span class="ui-status__dot"></span>
+  </span>
+</div>

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

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

package/src/components/data-display/table/table.docs.html

@@ -0,0 +1,73 @@
+---
+title: Table
+type: component
+id: table
+description: Styled table with header formatting and optional variants.
+api: ./table.api.json
+---
+
+<!-- @basic_table -->
+<table class="ui-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Alpha</td>
+      <td>100</td>
+    </tr>
+    <tr>
+      <td>Beta</td>
+      <td>200</td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- @variants -->
+<table class="ui-table ui-table--compact">
+  <thead>
+    <tr>
+      <th>Token</th>
+      <th>Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code class="ui-code ui-code--sm">--space-1</code>
+      </td>
+      <td>0.5rem</td>
+    </tr>
+    <tr>
+      <td>
+        <code class="ui-code ui-code--sm">--space-2</code>
+      </td>
+      <td>1rem</td>
+    </tr>
+  </tbody>
+</table>
+<table class="ui-table ui-table--striped">
+  <thead>
+    <tr>
+      <th>Item</th>
+      <th>Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Task 1</td>
+      <td>Done</td>
+    </tr>
+    <tr>
+      <td>Task 2</td>
+      <td>Pending</td>
+    </tr>
+    <tr>
+      <td>Task 3</td>
+      <td>Done</td>
+    </tr>
+  </tbody>
+</table>

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

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

package/src/components/data-display/tag/tag.docs.html

@@ -0,0 +1,42 @@
+---
+title: Tag
+type: component
+id: tag
+description: Keyword labels for categorization. Use for filtering, attributes, or status indicators.
+api: ./tag.api.json
+---
+
+<!-- @default | row -->
+<span class="ui-tag">Tag</span>
+<span class="ui-tag">Category</span>
+<span class="ui-tag">Label</span>
+
+<!-- @sizes | row -->
+<span class="ui-tag ui-tag--sm">Small</span>
+<span class="ui-tag">Default</span>
+<span class="ui-tag ui-tag--lg">Large</span>
+
+<!-- @variants | row -->
+<span class="ui-tag">Default</span>
+<span class="ui-tag ui-tag--primary">Primary</span>
+<span class="ui-tag ui-tag--success">Success</span>
+<span class="ui-tag ui-tag--warning">Warning</span>
+<span class="ui-tag ui-tag--danger">Danger</span>
+
+<!-- @with_remove_button -->
+<span class="ui-tag">
+  <span>Removable</span>
+  <button class="ui-tag__remove" aria-label="Remove">
+    <svg class="ui-icon ui-icon--xs" viewBox="0 0 24 24">
+      <path d="M18 6 6 18M6 6l12 12"></path>
+    </svg>
+  </button>
+</span>
+
+<!-- @tag_group -->
+<div class="ui-tag-group">
+  <span class="ui-tag">JavaScript</span>
+  <span class="ui-tag">TypeScript</span>
+  <span class="ui-tag">React</span>
+  <span class="ui-tag">CSS</span>
+</div>

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

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

package/src/components/disclosure/accordion/accordion.docs.html

@@ -0,0 +1,83 @@
+---
+title: Accordion
+type: component
+id: accordion
+description: Container for grouped expandable sections. Use with disclosure components.
+api: ./accordion.api.json
+---
+
+<!-- @default -->
+<div class="ui-accordion">
+  <details class="ui-disclosure">
+    <summary class="ui-disclosure__trigger">
+Section 1
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>Content for section 1</p>
+    </div>
+  </details>
+  <details class="ui-disclosure">
+    <summary class="ui-disclosure__trigger">
+Section 2
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>Content for section 2</p>
+    </div>
+  </details>
+  <details class="ui-disclosure">
+    <summary class="ui-disclosure__trigger">
+Section 3
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>Content for section 3</p>
+    </div>
+  </details>
+</div>
+
+<!-- @separated -->
+<!-- Gap between accordion items -->
+<div class="ui-accordion ui-accordion--separated">
+  <details class="ui-disclosure">
+    <summary class="ui-disclosure__trigger">
+Section 1
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>Content for section 1</p>
+    </div>
+  </details>
+  <details class="ui-disclosure">
+    <summary class="ui-disclosure__trigger">
+Section 2
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>Content for section 2</p>
+    </div>
+  </details>
+</div>
+
+<!-- @with_one_open -->
+<div class="ui-accordion">
+  <details class="ui-disclosure" open>
+    <summary class="ui-disclosure__trigger">
+Open Section
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>This section starts open</p>
+    </div>
+  </details>
+  <details class="ui-disclosure">
+    <summary class="ui-disclosure__trigger">
+Closed Section
+      <span class="ui-disclosure__icon">▾</span>
+    </summary>
+    <div class="ui-disclosure__content">
+      <p>Click to open</p>
+    </div>
+  </details>
+</div>

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

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

package/src/components/disclosure/disclosure/disclosure.docs.html

@@ -0,0 +1,51 @@
+---
+title: Disclosure
+type: component
+id: disclosure
+description: Expandable/collapsible content section. Uses native details/summary for accessibility without JS.
+api: ./disclosure.api.json
+---
+
+<!-- @default -->
+<details class="ui-disclosure">
+  <summary class="ui-disclosure__trigger">
+Click to expand
+    <span class="ui-disclosure__icon">▾</span>
+  </summary>
+  <div class="ui-disclosure__content">
+    <p>Hidden content that expands when clicked.</p>
+  </div>
+</details>
+
+<!-- @open_by_default -->
+<details class="ui-disclosure" open>
+  <summary class="ui-disclosure__trigger">
+Already expanded
+    <span class="ui-disclosure__icon">▾</span>
+  </summary>
+  <div class="ui-disclosure__content">
+    <p>This content is visible by default.</p>
+  </div>
+</details>
+
+<!-- @borderless -->
+<details class="ui-disclosure ui-disclosure--borderless">
+  <summary class="ui-disclosure__trigger">
+Borderless disclosure
+    <span class="ui-disclosure__icon">▾</span>
+  </summary>
+  <div class="ui-disclosure__content">
+    <p>No border around the disclosure.</p>
+  </div>
+</details>
+
+<!-- @animated -->
+<details class="ui-disclosure ui-disclosure--animate">
+  <summary class="ui-disclosure__trigger">
+Animated expansion
+    <span class="ui-disclosure__icon">▾</span>
+  </summary>
+  <div class="ui-disclosure__content">
+    <p>Content animates in when opened.</p>
+  </div>
+</details>

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

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

package/src/components/feedback/alert/alert.docs.html

@@ -0,0 +1,90 @@
+---
+title: Alert
+type: component
+id: alert
+description: Informational banner for important messages. Use variants for different message types.
+api: ./alert.api.json
+---
+
+<!-- @default -->
+<div class="ui-alert">
+  <div class="ui-alert__content">
+    <p class="ui-alert__title">Note</p>
+    <p class="ui-alert__description">This is a default alert message.</p>
+  </div>
+</div>
+
+<!-- @variants -->
+<div class="ui-column" style="--column-gap: var(--ui-space-2);">
+  <div class="ui-alert ui-alert--info">
+    <div class="ui-alert__content">
+      <p class="ui-alert__title">Info</p>
+      <p class="ui-alert__description">Informational message for the user.</p>
+    </div>
+  </div>
+  <div class="ui-alert ui-alert--success">
+    <div class="ui-alert__content">
+      <p class="ui-alert__title">Success</p>
+      <p class="ui-alert__description">Your action was completed successfully.</p>
+    </div>
+  </div>
+  <div class="ui-alert ui-alert--warning">
+    <div class="ui-alert__content">
+      <p class="ui-alert__title">Warning</p>
+      <p class="ui-alert__description">Please review before continuing.</p>
+    </div>
+  </div>
+  <div class="ui-alert ui-alert--danger">
+    <div class="ui-alert__content">
+      <p class="ui-alert__title">Error</p>
+      <p class="ui-alert__description">Something went wrong. Please try again.</p>
+    </div>
+  </div>
+</div>
+
+<!-- @with_icon -->
+<div class="ui-alert ui-alert--info">
+  <svg class="ui-icon ui-icon--sm ui-alert__icon" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M12 16v-4"></path>
+    <path d="M12 8h.01"></path>
+  </svg>
+  <div class="ui-alert__content">
+    <p class="ui-alert__description">Your session will expire in 5 minutes.</p>
+  </div>
+</div>
+
+<!-- @description_only -->
+<div class="ui-alert ui-alert--success">
+  <div class="ui-alert__content">
+    <p class="ui-alert__description">File uploaded successfully.</p>
+  </div>
+</div>
+
+<!-- @sizes -->
+<div class="ui-column" style="--column-gap: var(--ui-space-2);">
+  <div class="ui-alert ui-alert--info ui-alert--sm">
+    <div class="ui-alert__content">
+      <p class="ui-alert__description">Small alert with compact padding.</p>
+    </div>
+  </div>
+  <div class="ui-alert ui-alert--info">
+    <div class="ui-alert__content">
+      <p class="ui-alert__description">Default alert size.</p>
+    </div>
+  </div>
+  <div class="ui-alert ui-alert--info ui-alert--lg">
+    <div class="ui-alert__content">
+      <p class="ui-alert__description">Large alert with extra padding.</p>
+    </div>
+  </div>
+</div>
+
+<!-- @dismissible -->
+<div class="ui-alert ui-alert--info ui-alert--dismissible">
+  <div class="ui-alert__content">
+    <p class="ui-alert__title">Dismissible</p>
+    <p class="ui-alert__description">This alert can be closed by the user.</p>
+  </div>
+  <button class="ui-alert__close ui-close-button" aria-label="Close"></button>
+</div>

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

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

package/src/components/feedback/progress/progress.docs.html

@@ -0,0 +1,65 @@
+---
+title: Progress
+type: component
+id: progress
+description: Progress bar indicator showing completion status. Use aria-valuenow for accessibility.
+api: ./progress.api.json
+---
+
+<!-- @default -->
+<div class="ui-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="Loading">
+  <div class="ui-progress__bar" style="width: 60%;"></div>
+</div>
+
+<!-- @sizes -->
+<div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
+  <div class="ui-progress ui-progress--sm" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="width: 40%;"></div>
+  </div>
+  <div class="ui-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="width: 60%;"></div>
+  </div>
+  <div class="ui-progress ui-progress--lg" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="width: 80%;"></div>
+  </div>
+</div>
+
+<!-- @colors -->
+<div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
+  <div class="ui-progress ui-progress--success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="width: 100%;"></div>
+  </div>
+  <div class="ui-progress ui-progress--warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="width: 60%;"></div>
+  </div>
+  <div class="ui-progress ui-progress--danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="width: 25%;"></div>
+  </div>
+</div>
+
+<!-- @striped -->
+<div class="ui-progress ui-progress--striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
+  <div class="ui-progress__bar" style="width: 70%;"></div>
+</div>
+
+<!-- @animated_stripes -->
+<div class="ui-progress ui-progress--striped ui-progress--animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
+  <div class="ui-progress__bar" style="width: 50%;"></div>
+</div>
+
+<!-- @indeterminate -->
+<!-- For unknown progress duration -->
+<div class="ui-progress ui-progress--indeterminate" role="progressbar" aria-label="Loading">
+  <div class="ui-progress__bar"></div>
+</div>
+
+<!-- @typed_custom_property -->
+<!-- Set value via --ui-progress-value instead of inline width. The @property registration enables smooth CSS transitions when JS updates the value. -->
+<div style="display: flex; flex-direction: column; gap: var(--ui-space-2);">
+  <div class="ui-progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="--ui-progress-value: 25%"></div>
+  </div>
+  <div class="ui-progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+    <div class="ui-progress__bar" style="--ui-progress-value: 75%"></div>
+  </div>
+</div>

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

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