@teseor/css 1.15.0 → 1.15.1

package/package.json

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

package/src/base/{root.docs.html → docs.html}

@@ -1,6 +1,5 @@
 ---
 title: Root
-type: token
 id: root
 description: Base styles applied to the .root class: font family, size, line-height, color, and background
 skipValidation: true

package/src/base/typography/{typography.docs.html → docs.html}

@@ -1,7 +1,5 @@
 ---
 title: Typography
-type: token
-id: typography
 description: Modular scale (1.2 ratio) with 8px grid-snapped line-heights. Responsive breakpoints at 730px and 1080px adjust heading sizes.
 skipValidation: true
 ---

package/src/components/actions/button/{button.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Button
-type: component
-id: button
 description: Buttons trigger actions. Use primary for main CTA, secondary for less important actions.
-api: ./button.api.json
 ---
 
 <!-- @variants | row -->

package/src/components/actions/button/{button.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'button.docs.html');
+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('button.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/actions/button-group/{button-group.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Button Group
-type: component
-id: button-group
 description: Container for grouped buttons that share borders and have connected appearance.
-api: ./button-group.api.json
 mergeInto: button
 ---
 

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'button-group.docs.html');
+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('button-group.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/actions/close-button/{close-button.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Close Button
-type: component
-id: close-button
 description: Dismiss button for closing modals, alerts, drawers, and other dismissible elements.
-api: ./close-button.api.json
 mergeInto: button
 ---
 

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'close-button.docs.html');
+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('close-button.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/content/divider/{divider.docs.html → docs.html}

@@ -1,8 +1,6 @@
 ---
 title: Divider
-type: component
 description: Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.
-api: ./divider.api.json
 ---
 
 <!-- @default -->

package/src/components/content/divider/{divider.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'divider.docs.html');
+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('divider.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/content/scroll-area/{scroll-area.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Scroll Area
-type: component
-id: scroll-area
 description: Scrollable container with styled scrollbar. Provides overflow control and custom scrollbar styling.
-api: ./scroll-area.api.json
 ---
 
 <!-- @default -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'scroll-area.docs.html');
+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('scroll-area-visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/content/spacer/{spacer.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Spacer
-type: component
-id: spacer
 description: Flexible space filler that grows to fill available space in flex containers.
-api: ./spacer.api.json
 ---
 
 <!-- @default -->

package/src/components/content/spacer/{spacer.visual.spec.ts → visual.spec.ts}

@@ -2,13 +2,13 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import { saveForLostPixel, setupVisualTestFromHtmlDocs } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'spacer.docs.html');
+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('spacer.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/avatar/{avatar.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Avatar
-type: component
-id: avatar
 description: User or entity thumbnail representation. Supports image with fallback to initials.
-api: ./avatar.api.json
 ---
 
 <!-- @default | row -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'avatar.docs.html');
+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('avatar.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/badge/{badge.docs.html → docs.html}

@@ -1,8 +1,6 @@
 ---
 title: Badge
-type: component
 description: Inline labels for status indicators, counts, and categories
-api: ./badge.api.json
 labels:
   sm: Small
   lg: Large

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'badge.docs.html');
+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('badge.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/card/{card.docs.html → docs.html}

@@ -1,8 +1,5 @@
 ---
 title: Card
-type: component
-id: card
-api: ./card.api.json
 ---
 
 <!-- @default -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'card.docs.html');
+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('card.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/data-list/{data-list.docs.html → docs.html}

@@ -1,8 +1,5 @@
 ---
 title: Data List
-type: component
-id: data-list
-api: ./data-list.api.json
 ---
 
 <!-- @default -->

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

@@ -6,7 +6,7 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'data-list.docs.html');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('data-list visual regression', () => {
   test('all variations', async ({ page }) => {
@@ -14,6 +14,6 @@ test.describe('data-list visual regression', () => {
     // 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('data-list.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/icon/{icon.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Icon
-type: component
-id: icon
 description: CSS classes for sizing and styling SVG icons. Works with any stroke-based icon set like Lucide, Heroicons, or Feather.
-api: ./icon.api.json
 ---
 
 <!-- @basic_usage -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'icon.docs.html');
+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('icon.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/image/{image.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Image
-type: component
-id: image
 description: Responsive image with fallback placeholder, optional caption, and shape modifiers.
-api: ./image.api.json
 ---
 
 <!-- @default -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'image.docs.html');
+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('image.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/stat/{stat.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Stat
-type: component
-id: stat
 description: Statistic display with prominent value and descriptive label.
-api: ./stat.api.json
 ---
 
 <!-- @default -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'stat.docs.html');
+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('stat.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/status/{status.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Status
-type: component
-id: status
 description: Visual status indicator with colored dot to show state.
-api: ./status.api.json
 ---
 
 <!-- @variants -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'status.docs.html');
+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('status.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/table/{table.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Table
-type: component
-id: table
 description: Styled table with header formatting and optional variants.
-api: ./table.api.json
 ---
 
 <!-- @basic_table -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'table.docs.html');
+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('table.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/data-display/tag/{tag.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Tag
-type: component
-id: tag
 description: Keyword labels for categorization. Use for filtering, attributes, or status indicators.
-api: ./tag.api.json
 ---
 
 <!-- @default | row -->

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'tag.docs.html');
+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('tag.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/disclosure/accordion/{accordion.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Accordion
-type: component
-id: accordion
 description: Container for grouped expandable sections. Use with disclosure components.
-api: ./accordion.api.json
 ---
 
 <!-- @default -->

package/src/components/disclosure/accordion/{accordion.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'accordion.docs.html');
+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('accordion.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/disclosure/disclosure/{disclosure.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Disclosure
-type: component
-id: disclosure
 description: Expandable/collapsible content section. Uses native details/summary for accessibility without JS.
-api: ./disclosure.api.json
 ---
 
 <!-- @default -->

package/src/components/disclosure/disclosure/{disclosure.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'disclosure.docs.html');
+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('disclosure.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/feedback/alert/{alert.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Alert
-type: component
-id: alert
 description: Informational banner for important messages. Use variants for different message types.
-api: ./alert.api.json
 ---
 
 <!-- @default -->

package/src/components/feedback/alert/{alert.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'alert.docs.html');
+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('alert.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/feedback/progress/{progress.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Progress
-type: component
-id: progress
 description: Progress bar indicator showing completion status. Use aria-valuenow for accessibility.
-api: ./progress.api.json
 ---
 
 <!-- @default -->

package/src/components/feedback/progress/{progress.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'progress.docs.html');
+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('progress.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/feedback/progress-circle/{progress-circle.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Progress Circle
-type: component
-id: progress-circle
 description: Circular progress indicator showing completion as a donut ring. Set value via --ui-progress-circle-value (0-100).
-api: ./progress-circle.api.json
 mergeInto: progress
 ---
 

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

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'progress-circle.docs.html');
+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('progress-circle.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });

package/src/components/feedback/skeleton/{skeleton.docs.html → docs.html}

@@ -1,9 +1,6 @@
 ---
 title: Skeleton
-type: component
-id: skeleton
 description: Loading placeholder with shimmer animation for content loading states.
-api: ./skeleton.api.json
 ---
 
 <!-- @text_lines -->

package/src/components/feedback/skeleton/{skeleton.visual.spec.ts → visual.spec.ts}

@@ -6,13 +6,13 @@ import {
   validateGridRhythm,
 } from '../../../../test-utils';
 
-const DOCS_PATH = resolve(__dirname, 'skeleton.docs.html');
+const DOCS_PATH = resolve(__dirname, 'docs.html');
 
 test.describe('skeleton visual regression', () => {
   test('all variations', async ({ page }) => {
     await setupVisualTestFromHtmlDocs(page, DOCS_PATH);
     await validateGridRhythm(page, 'skeleton');
     await saveForLostPixel(page, 'skeleton');
-    await expect(page.locator('body')).toHaveScreenshot('skeleton.visual.png');
+    await expect(page.locator('body')).toHaveScreenshot('visual.png');
   });
 });