npm - @teseor/css - Versions diffs - 1.14.2 → 1.15.0 - Mend

@teseor/css 1.14.2 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

package/src/layout/topbar/topbar.docs.json DELETED Viewed

@@ -1,110 +0,0 @@
-{
-  "id": "topbar",
-  "type": "primitive",
-  "title": "Topbar",
-  "description": "Fixed or sticky header bar for app layouts with start, center, and end sections.",
-  "api": "./topbar.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Basic topbar with three sections: start (brand), center (search/nav), and end (actions).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-topbar ui-topbar--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__start",
-                  "children": [{ "tag": "strong", "text": "Brand" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__center",
-                  "children": [{ "tag": "span", "text": "Center content" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__end",
-                  "children": [{ "tag": "span", "text": "Actions" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sticky",
-      "description": "Stays at the top of the viewport on scroll.",
-      "examples": [
-        {
-          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">\n  <div class=\"ui-topbar__start\"><strong>Brand</strong></div>\n  <div class=\"ui-topbar__center\">Nav</div>\n  <div class=\"ui-topbar__end\">Actions</div>\n</header>"
-        }
-      ]
-    },
-    {
-      "title": "Bordered",
-      "description": "Bottom border via inset box-shadow to preserve grid rhythm.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-topbar ui-topbar--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__start",
-                  "children": [{ "tag": "strong", "text": "Bordered" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__end",
-                  "children": [{ "tag": "span", "text": "Actions" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Raised",
-      "description": "Subtle drop shadow below the topbar.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-topbar ui-topbar--raised",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__start",
-                  "children": [{ "tag": "strong", "text": "Raised" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__end",
-                  "children": [{ "tag": "span", "text": "Actions" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Integration with Sidebar",
-      "description": "Set --topbar-height on .app-shell so sidebar and main offset correctly. The topbar itself uses --fixed, and sidebar/main read --topbar-height.",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\" style=\"--topbar-height: var(--ui-row-3)\">\n  <header class=\"ui-topbar ui-topbar--fixed ui-topbar--bordered\">\n    <div class=\"ui-topbar__start\"><strong>App</strong></div>\n    <div class=\"ui-topbar__end\">User</div>\n  </header>\n  <aside class=\"ui-sidebar\">Sidebar</aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">Content</div>\n  </main>\n</body>"
-        }
-      ]
-    }
-  ]
-}

package/src/testing/api-types.ts DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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);
-}

package/src/testing/rhythm.ts DELETED Viewed

@@ -1,146 +0,0 @@
-import type { Page } from '@playwright/test';
-// Elements that are fluid containers (viewport-dependent)
-const SKIP_SELECTORS = [
-  'html',
-  'body',
-  'main',
-  'aside',
-  '.ui-sidebar',
-  '.ui-main',
-  '.ui-app-shell',
-  '.ui-drawer', // Fluid panel - adapts to container/viewport
-];
-// Inline elements that don't follow grid
-const INLINE_TAGS = [
-  'STRONG',
-  'B',
-  'EM',
-  'I',
-  'SMALL',
-  'SPAN',
-  'A',
-  'CODE',
-  'ABBR',
-  'CITE',
-  'Q',
-  'SUB',
-  'SUP',
-  'MARK',
-  'BR',
-  'WBR',
-];
-export interface RhythmViolation {
-  selector: string;
-  height: number;
-  expected: number;
-  offBy: number;
-}
-/**
- * Validates that all elements in a component follow the 8px grid rhythm
- * Throws an error if violations are found
- */
-export async function validateGridRhythm(
-  page: Page,
-  componentName: string,
-): Promise<RhythmViolation[]> {
-  const violations = await page.evaluate(
-    ({ skipSelectors, inlineTags, component }) => {
-      // Get unit from CSS custom property (default 8px)
-      // Note: PostCSS prefixes --unit to --ui-unit in compiled CSS
-      const temp = document.createElement('div');
-      temp.style.cssText = 'position:absolute;visibility:hidden;width:var(--ui-unit, 8px)';
-      document.body.appendChild(temp);
-      const unit = temp.getBoundingClientRect().width || 8;
-      document.body.removeChild(temp);
-      const results: Array<{ selector: string; height: number; expected: number; offBy: number }> =
-        [];
-      // Target component elements
-      const selector = `.ui-${component}, .ui-${component} *`;
-      const elements = document.querySelectorAll(selector);
-      for (const el of elements) {
-        const tagName = el.tagName;
-        // Skip script, style, SVG internals, etc.
-        const upperTag = tagName.toUpperCase();
-        if (
-          [
-            'SCRIPT',
-            'STYLE',
-            'LINK',
-            'META',
-            'TITLE',
-            'HEAD',
-            'SVG',
-            'PATH',
-            'CIRCLE',
-            'RECT',
-            'LINE',
-            'POLYGON',
-            'POLYLINE',
-            'ELLIPSE',
-            'G',
-            'DEFS',
-            'USE',
-            'SYMBOL',
-            'CLIPPATH',
-            'MASK',
-            'PATTERN',
-            'IMAGE',
-            'TEXT',
-            'TSPAN',
-            'TEXTPATH',
-            'FOREIGNOBJECT',
-          ].includes(upperTag)
-        )
-          continue;
-        // Skip inline elements
-        if (inlineTags.includes(tagName)) continue;
-        // Skip BEM element children (__element) - only check blocks and modifiers
-        const classes = el.className?.toString?.() || '';
-        if (classes.includes('__')) continue;
-        // Skip fluid containers
-        if (skipSelectors.some((sel) => el.matches(sel))) continue;
-        const height = el.getBoundingClientRect().height;
-        // Skip zero-height and decorative lines (borders, dividers < half unit)
-        if (height === 0 || height < unit / 2) continue;
-        const remainder = height % unit;
-        const isAligned = remainder < 0.5 || remainder > unit - 0.5;
-        if (!isAligned) {
-          const firstClass = classes.split(' ')[0];
-          results.push({
-            selector: `${tagName.toLowerCase()}${firstClass ? `.${firstClass}` : ''}`,
-            height: Math.round(height * 10) / 10,
-            expected: Math.round(height / unit) * unit,
-            offBy: Math.round(remainder * 10) / 10,
-          });
-        }
-      }
-      return results;
-    },
-    { skipSelectors: SKIP_SELECTORS, inlineTags: INLINE_TAGS, component: componentName },
-  );
-  if (violations.length > 0) {
-    console.log(`Grid rhythm violations in ${componentName}:`);
-    console.table(violations);
-    throw new Error(
-      `Grid rhythm violations in ${componentName}:\n${JSON.stringify(violations, null, 2)}`,
-    );
-  }
-  return violations;
-}

package/src/testing/scaffold.ts DELETED Viewed

@@ -1,50 +0,0 @@
-export const scaffoldCss = `
-  html {
-    font-size: 16px;
-  }
-  body {
-    background-image:
-      linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
-      linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
-      linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
-    background-size: 12px 12px;
-    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
-    background-color: #fafafa;
-  }
-  .test-container {
-    padding: 1.5rem;
-  }
-  .test-title {
-    font-family: var(--ui-font-sans, system-ui, sans-serif);
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-block-end: 1.5rem;
-  }
-  .test-section {
-    margin-block-end: 1.5rem;
-  }
-  .test-section-title {
-    font-family: var(--ui-font-sans, system-ui, sans-serif);
-    font-size: 0.75rem;
-    color: #666;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-block-end: 0.5rem;
-  }
-  .test-row {
-    display: flex;
-    gap: 1rem;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-  .test-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, max-content));
-    gap: 1rem;
-    align-items: start;
-  }
-  .test-element--block {
-    width: 200px;
-  }
-`;