@teseor/css 1.14.2 → 1.14.3

package/src/debug/index.scss

@@ -1 +1,81 @@
-@forward "./grid-overlay";
+@use '../config/tokens/variables' as t;
+// Debug grid overlay - add class="debug-grid" to body or any container
+.debug-grid,
+.debug-grid-rows,
+.debug-baseline {
+  position: relative;
+}
+
+.debug-grid {
+  // Fallback hue 220 (blue) when --ui-hue-primary not set
+  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.15);
+}
+
+.debug-grid::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: var(--ui-unit) var(--ui-unit);
+  background-position: 0 0;
+}
+
+// Stronger grid at row intervals
+.debug-grid-rows {
+  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.1);
+  --debug-color-strong: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.25);
+}
+
+.debug-grid-rows::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-row);
+  background-position: 0 0;
+}
+
+// Baseline grid only (horizontal lines)
+.debug-baseline {
+  --debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
+}
+
+.debug-baseline::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: 100% var(--ui-unit);
+}
+
+// Element boundaries outline
+.debug-outline * {
+  outline: 1px solid hsl(0 100% 50% / 0.5);
+}

package/src/layout/app-shell/app-shell.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'app-shell.docs.json');
 

package/src/layout/aspect-ratio/aspect-ratio.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'aspect-ratio.docs.json');
 

package/src/layout/box/box.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'box.docs.json');
 

package/src/layout/center/center.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'center.docs.json');
 

package/src/layout/column/column.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'column.docs.json');
 

package/src/layout/content/content.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'content.docs.json');
 

package/src/layout/footer/footer.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'footer.docs.json');
 

package/src/layout/grid/grid.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'grid.docs.json');
 

package/src/layout/nav-rail/nav-rail.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'nav-rail.docs.json');
 

package/src/layout/page-header/page-header.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'page-header.docs.json');
 

package/src/layout/row/row.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'row.docs.json');
 

package/src/layout/sidebar/sidebar.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'sidebar.docs.json');
 

package/src/layout/sidebar-nav/sidebar-nav.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'sidebar-nav.docs.json');
 

package/src/layout/topbar/topbar.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'topbar.docs.json');
 

package/src/debug/grid-overlay.scss

@@ -1,81 +0,0 @@
-@use '../config/tokens/variables' as t;
-// Debug grid overlay - add class="debug-grid" to body or any container
-.debug-grid,
-.debug-grid-rows,
-.debug-baseline {
-  position: relative;
-}
-
-.debug-grid {
-  // Fallback hue 220 (blue) when --ui-hue-primary not set
-  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.15);
-}
-
-.debug-grid::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
-
-  block-size: 100%;
-  inline-size: 100%;
-  min-block-size: 100vh;
-
-  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
-    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
-  pointer-events: none;
-  background-size: var(--ui-unit) var(--ui-unit);
-  background-position: 0 0;
-}
-
-// Stronger grid at row intervals
-.debug-grid-rows {
-  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.1);
-  --debug-color-strong: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.25);
-}
-
-.debug-grid-rows::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
-
-  block-size: 100%;
-  inline-size: 100%;
-  min-block-size: 100vh;
-
-  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
-    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px),
-    linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);
-  pointer-events: none;
-  background-size: var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-row);
-  background-position: 0 0;
-}
-
-// Baseline grid only (horizontal lines)
-.debug-baseline {
-  --debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
-}
-
-.debug-baseline::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  z-index: var(--ui-z-debug);
-
-  block-size: 100%;
-  inline-size: 100%;
-  min-block-size: 100vh;
-
-  background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
-  pointer-events: none;
-  background-size: 100% var(--ui-unit);
-}
-
-// Element boundaries outline
-.debug-outline * {
-  outline: 1px solid hsl(0 100% 50% / 0.5);
-}

package/src/testing/api-types.ts

@@ -1,20 +0,0 @@
-export interface ComponentAPI {
-  name: string;
-  baseClass?: string;
-  element: string;
-  description: string;
-  modifiers: Record<
-    string,
-    {
-      values?: string[];
-      type?: string;
-      default?: string | null;
-      description: string;
-    }
-  >;
-  states?: string[];
-  combinations?: Array<{
-    modifiers: string[];
-    disabled?: boolean;
-  }>;
-}

package/src/testing/grid-alignment.spec.ts

@@ -1,38 +0,0 @@
-import { readdirSync, statSync } from 'node:fs';
-import { basename, join, resolve } from 'node:path';
-import { test } from '@playwright/test';
-import { generateHtmlFromDocs, loadDocsJson, setupVisualTest, validateGridRhythm } from '.';
-
-const COMPONENTS_DIR = resolve(__dirname, '../components');
-
-// Known grid rhythm issues tracked in separate issues
-const SKIP_COMPONENTS = [
-  'data-list', // 1px borders cause off-grid heights (#179)
-  'spinner', // CSS var resolution issue (#154)
-  'spacer', // no intrinsic height by design
-];
-
-function findDocsFiles(dir: string): Array<{ name: string; path: string }> {
-  const results: Array<{ name: string; path: string }> = [];
-  for (const entry of readdirSync(dir)) {
-    const full = join(dir, entry);
-    if (statSync(full).isDirectory()) {
-      results.push(...findDocsFiles(full));
-    } else if (entry.endsWith('.docs.json')) {
-      results.push({ name: basename(entry, '.docs.json'), path: full });
-    }
-  }
-  return results;
-}
-
-const docsFiles = findDocsFiles(COMPONENTS_DIR);
-
-for (const { name, path } of docsFiles) {
-  test(`${name} aligns to vertical grid`, async ({ page }) => {
-    test.skip(SKIP_COMPONENTS.includes(name), `${name} has known grid issues`);
-    const docs = loadDocsJson(path);
-    const html = generateHtmlFromDocs(docs);
-    await setupVisualTest(page, { html });
-    await validateGridRhythm(page, name);
-  });
-}

package/src/testing/html-generator.ts

@@ -1,151 +0,0 @@
-import type { ComponentAPI } from './api-types';
-
-const PREFIX = 'ui-';
-
-function generateCombinations(
-  api: ComponentAPI,
-): Array<{ modifiers: string[]; disabled?: boolean }> {
-  if (api.combinations) return api.combinations;
-
-  const enumModifiers = Object.entries(api.modifiers)
-    .filter(([, def]) => def.values)
-    .map(([, def]) => def.values!);
-
-  if (enumModifiers.length < 2) return [];
-
-  const [first, second] = enumModifiers;
-  const combos: Array<{ modifiers: string[] }> = [];
-
-  for (const a of first) {
-    for (const b of second) {
-      combos.push({ modifiers: [a, b] });
-    }
-  }
-
-  return combos;
-}
-
-function capitalize(s: string): string {
-  return s.charAt(0).toUpperCase() + s.slice(1);
-}
-
-export function generateVariationsHtml(api: ComponentAPI): string {
-  const baseClass = `${PREFIX}${api.baseClass ?? api.name}`;
-  const element = api.element;
-  const title = capitalize(api.name);
-
-  const sections: string[] = [];
-
-  // Default section
-  sections.push(`
-    <div class="test-section">
-      <div class="test-section-title">Default</div>
-      <div class="test-row">
-        <${element} class="${baseClass}">Default</${element}>
-      </div>
-    </div>
-  `);
-
-  // Generate sections for each modifier
-  for (const [modName, modDef] of Object.entries(api.modifiers)) {
-    const sectionTitle = capitalize(modName);
-
-    if (modDef.values) {
-      const buttons: string[] = [];
-
-      if (modName === 'size') {
-        buttons.push(`<${element} class="${baseClass}">Default</${element}>`);
-      }
-      if (modName === 'variant') {
-        buttons.push(`<${element} class="${baseClass}">Primary</${element}>`);
-      }
-
-      for (const value of modDef.values) {
-        const modClass = `${baseClass}--${value}`;
-        const label = capitalize(value);
-        buttons.push(`<${element} class="${baseClass} ${modClass}">${label}</${element}>`);
-      }
-
-      sections.push(`
-    <div class="test-section">
-      <div class="test-section-title">${sectionTitle}</div>
-      <div class="test-row">
-        ${buttons.join('\n        ')}
-      </div>
-    </div>
-  `);
-    } else if (modDef.type === 'boolean') {
-      const modClass = `${baseClass}--${modName}`;
-      const content = modName === 'icon' ? '+' : 'Full Width';
-      const blockClass = modName === 'block' ? ' test-element--block' : '';
-
-      sections.push(`
-    <div class="test-section">
-      <div class="test-section-title">${sectionTitle}</div>
-      <div class="test-row">
-        <div class="${blockClass.trim()}">
-          <${element} class="${baseClass} ${modClass}">${content}</${element}>
-        </div>
-      </div>
-    </div>
-  `);
-    }
-  }
-
-  // States section
-  if (api.states && api.states.length > 0) {
-    const stateButtons: string[] = [];
-    stateButtons.push(`<${element} class="${baseClass}">Normal</${element}>`);
-
-    if (api.states.includes('hover')) {
-      stateButtons.push(`<${element} class="${baseClass} ${baseClass}--hover">Hover</${element}>`);
-    }
-    if (api.states.includes('focus')) {
-      stateButtons.push(`<${element} class="${baseClass} ${baseClass}--focus">Focus</${element}>`);
-    }
-    if (api.states.includes('active')) {
-      stateButtons.push(
-        `<${element} class="${baseClass} ${baseClass}--active">Active</${element}>`,
-      );
-    }
-    if (api.states.includes('disabled')) {
-      stateButtons.push(`<${element} class="${baseClass}" disabled>Disabled</${element}>`);
-    }
-
-    sections.push(`
-    <div class="test-section">
-      <div class="test-section-title">States</div>
-      <div class="test-row">
-        ${stateButtons.join('\n        ')}
-      </div>
-    </div>
-  `);
-  }
-
-  // Combinations section
-  const combos = generateCombinations(api);
-  if (combos.length > 0) {
-    const comboButtons = combos.map((combo) => {
-      const classes = combo.modifiers.map((m) => `${baseClass}--${m}`).join(' ');
-      const label = combo.modifiers.map((m) => capitalize(m)).join(' ');
-      const disabled = combo.disabled ? ' disabled' : '';
-      return `<${element} class="${baseClass} ${classes}"${disabled}>${label}</${element}>`;
-    });
-
-    sections.push(`
-    <div class="test-section">
-      <div class="test-section-title">Combinations</div>
-      <div class="test-grid">
-        ${comboButtons.join('\n        ')}
-      </div>
-    </div>
-  `);
-  }
-
-  return `
-    <div class="test-container">
-      <h1 class="test-title">${title}</h1>
-      ${sections.join('')}
-    </div>
-  `;
-}

package/src/testing/index.ts

@@ -1,15 +0,0 @@
-export type { ComponentAPI } from './api-types';
-export type { RhythmViolation } from './rhythm';
-export { scaffoldCss } from './scaffold';
-export { generateVariationsHtml } from './html-generator';
-export { validateGridRhythm } from './rhythm';
-export {
-  loadCss,
-  loadComponentApi,
-  loadDocsJson,
-  generateHtmlFromDocs,
-  setupVisualTest,
-  setupVisualTestFromApi,
-  setupVisualTestFromDocs,
-  saveForLostPixel,
-} from './page-setup';

package/src/testing/page-setup.ts

@@ -1,149 +0,0 @@
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import type { Page } from '@playwright/test';
-
-const LOSTPIXEL_DIR = resolve(__dirname, '../../.lostpixel');
-import type { ComponentAPI } from './api-types';
-import { generateVariationsHtml } from './html-generator';
-import { scaffoldCss } from './scaffold';
-
-interface DocsItem {
-  tag?: string;
-  class?: string;
-  text?: string;
-  attrs?: Record<string, string>;
-  style?: Record<string, string>;
-  children?: DocsItem[];
-}
-
-interface DocsExample {
-  html?: string;
-  items?: DocsItem[];
-  layout?: string;
-  title?: string;
-}
-
-interface DocsSection {
-  title: string;
-  examples: DocsExample[];
-}
-
-interface DocsJson {
-  sections: DocsSection[];
-}
-
-const DIST_PATH = resolve(__dirname, '../../dist');
-
-export function loadCss(filename = 'index.css'): string {
-  return readFileSync(resolve(DIST_PATH, filename), 'utf-8');
-}
-
-export function loadComponentApi(apiPath: string): ComponentAPI {
-  return JSON.parse(readFileSync(apiPath, 'utf-8'));
-}
-
-function renderItem(item: DocsItem): string {
-  if (!item.tag) return item.text ?? '';
-
-  const parts: string[] = [];
-
-  if (item.class) parts.push(`class="${item.class}"`);
-
-  if (item.style) {
-    const css = Object.entries(item.style)
-      .map(([k, v]) => `${k}: ${v}`)
-      .join('; ');
-    parts.push(`style="${css}"`);
-  }
-
-  if (item.attrs) {
-    for (const [k, v] of Object.entries(item.attrs)) {
-      parts.push(v === '' ? k : `${k}="${v}"`);
-    }
-  }
-
-  const attrStr = parts.length ? ` ${parts.join(' ')}` : '';
-  const content = item.children ? item.children.map(renderItem).join('\n') : (item.text ?? '');
-
-  return `<${item.tag}${attrStr}>${content}</${item.tag}>`;
-}
-
-export function loadDocsJson(docsPath: string): DocsJson {
-  return JSON.parse(readFileSync(docsPath, 'utf-8'));
-}
-
-export function generateHtmlFromDocs(docs: DocsJson): string {
-  const sections: string[] = [];
-
-  for (const section of docs.sections) {
-    const examples: string[] = [];
-
-    for (const example of section.examples) {
-      let html = '';
-
-      if (example.html) {
-        html = example.html;
-      } else if (example.items) {
-        const items = example.items.map(renderItem).join('\n');
-        html = example.layout === 'row' ? `<div class="ui-row">${items}</div>` : items;
-      }
-
-      if (html) {
-        examples.push(`<div class="test-example">${html}</div>`);
-      }
-    }
-
-    sections.push(`
-      <div class="test-section">
-        <div class="test-section-title">${section.title}</div>
-        ${examples.join('\n')}
-      </div>
-    `);
-  }
-
-  return `<div class="test-container">${sections.join('')}</div>`;
-}
-
-export async function setupVisualTest(
-  page: Page,
-  options: {
-    html: string;
-    css?: string;
-    includeTokens?: boolean;
-  },
-): Promise<void> {
-  const { html, css, includeTokens = true } = options;
-  const componentCss = includeTokens ? loadCss() : css || '';
-
-  const fullHtml = `
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <meta charset="utf-8">
-      <style>${scaffoldCss}</style>
-      <style>${componentCss}</style>
-    </head>
-    <body>${html}</body>
-    </html>
-  `;
-
-  await page.setContent(fullHtml);
-}
-
-export async function setupVisualTestFromApi(page: Page, apiPath: string): Promise<void> {
-  const api = loadComponentApi(apiPath);
-  const html = generateVariationsHtml(api);
-  await setupVisualTest(page, { html });
-}
-
-export async function setupVisualTestFromDocs(page: Page, docsPath: string): Promise<void> {
-  const docs = loadDocsJson(docsPath);
-  const html = generateHtmlFromDocs(docs);
-  await setupVisualTest(page, { html });
-}
-
-export async function saveForLostPixel(page: Page, name: string): Promise<void> {
-  mkdirSync(LOSTPIXEL_DIR, { recursive: true });
-  const screenshot = await page.screenshot({ fullPage: true });
-  writeFileSync(resolve(LOSTPIXEL_DIR, `${name}.png`), screenshot);
-}