@teseor/css 1.1.0 → 1.2.1

package/src/04-components/{pagination → navigation/pagination}/pagination.api.json

@@ -1,7 +1,28 @@
 {
   "name": "pagination",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    }
+  },
+  "elements": {
+    "prev": {},
+    "next": {},
+    "list": {},
+    "item": {},
+    "ellipsis": {},
+    "link": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-pagination-gap",

package/src/04-components/{pagination → navigation/pagination}/pagination.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'pagination.docs.json');
 

package/src/04-components/{tabs → navigation/tabs}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Token definitions
 @layer components.tokens {

package/src/04-components/{tabs → navigation/tabs}/tabs.api.json

@@ -2,6 +2,23 @@
   "name": "tabs",
   "element": "div",
   "modifiers": {},
+  "elements": {
+    "list": {},
+    "tab": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        }
+      }
+    },
+    "panel": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-tabs-border-color",

package/src/04-components/{tabs → navigation/tabs}/tabs.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'tabs.docs.json');
 

package/src/04-components/{dialog → overlays/dialog}/dialog.api.json

@@ -1,7 +1,18 @@
 {
   "name": "dialog",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "borderless": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "header": {},
+    "title": {},
+    "close": {},
+    "body": {},
+    "footer": {}
+  },
   "cssVars": [
     {
       "name": "--ui-dialog-header-padding",

package/src/04-components/{dialog → overlays/dialog}/dialog.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'dialog.docs.json');
 

package/src/04-components/{dialog → overlays/dialog}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Dialog - structured modal with header, body, footer
 // Extends modal with semantic sections

package/src/04-components/{drawer → overlays/drawer}/drawer.api.json

@@ -1,7 +1,23 @@
 {
   "name": "drawer",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "position": {
+      "values": ["start", "end", "top", "bottom"]
+    },
+    "size": {
+      "values": ["sm", "lg"]
+    }
+  },
+  "elements": {
+    "header": {},
+    "title": {},
+    "description": {},
+    "close": {},
+    "body": {},
+    "footer": {}
+  },
+  "relatedComponents": ["drawer-overlay"],
   "cssVars": [
     {
       "name": "--ui-drawer-size",

package/src/04-components/{drawer → overlays/drawer}/drawer.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'drawer.docs.json');
 

package/src/04-components/{drawer → overlays/drawer}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Drawer - slide-out panel
 // Side panel that slides in from edge

package/src/04-components/{modal → overlays/modal}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Modal - container for modal dialogs
 // Centered container with backdrop that appears over page content

package/src/04-components/{modal → overlays/modal}/modal.api.json

@@ -1,7 +1,18 @@
 {
   "name": "modal",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "visible": {
+      "type": "boolean"
+    },
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "elements": {
+    "content": {},
+    "body": {}
+  },
   "cssVars": [
     {
       "name": "--ui-modal-bg",

package/src/04-components/{modal → overlays/modal}/modal.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'modal.docs.json');
 

package/src/04-components/{overlay → overlays/overlay}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Overlay - backdrop for modals, dialogs, drawers
 // Full viewport coverage with semi-transparent background

package/src/04-components/{overlay → overlays/overlay}/overlay.api.json

@@ -1,7 +1,20 @@
 {
   "name": "overlay",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "light": {
+      "type": "boolean"
+    },
+    "blur": {
+      "type": "boolean"
+    },
+    "animate": {
+      "type": "boolean"
+    },
+    "visible": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-overlay-bg",

package/src/04-components/{overlay → overlays/overlay}/overlay.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'overlay.docs.json');
 

package/src/04-components/{popover → overlays/popover}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Popover - floating panel for additional content
 // Larger than tooltip, can contain structured content

package/src/04-components/{popover → overlays/popover}/popover.api.json

@@ -1,7 +1,15 @@
 {
   "name": "popover",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "position": {
+      "values": ["top"]
+    }
+  },
+  "elements": {
+    "header": {},
+    "title": {}
+  },
   "cssVars": [
     {
       "name": "--ui-popover-bg",

package/src/04-components/{popover → overlays/popover}/popover.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'popover.docs.json');
 

package/src/04-components/{tooltip → overlays/tooltip}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Tooltip - small informational popup
 // Appears on hover/focus to provide additional context

package/src/04-components/{tooltip → overlays/tooltip}/tooltip.api.json

@@ -1,7 +1,17 @@
 {
   "name": "tooltip",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "position": {
+      "values": ["top", "bottom", "start", "end"]
+    },
+    "animate": {
+      "type": "boolean"
+    },
+    "visible": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-tooltip-bg",

package/src/04-components/{tooltip → overlays/tooltip}/tooltip.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'tooltip.docs.json');
 

package/src/04-components/{code → typography/code}/code.api.json

@@ -1,7 +1,12 @@
 {
   "name": "code",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "relatedComponents": ["code-block"],
   "cssVars": [
     {
       "name": "--ui-code-font-size",

package/src/04-components/{code → typography/code}/code.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'code.docs.json');
 

package/src/04-components/{code → typography/code}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Token definitions
 @layer components.tokens {

package/src/04-components/{heading → typography/heading}/heading.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'heading.docs.json');
 

package/src/04-components/{heading → typography/heading}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // @component heading
 // @element h2

package/src/04-components/{link → typography/link}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // @component link
 // @element a

package/src/04-components/{link → typography/link}/link.api.json

@@ -4,6 +4,12 @@
   "modifiers": {
     "variant": {
       "values": ["muted", "subtle"]
+    },
+    "external": {
+      "type": "boolean"
+    },
+    "disabled": {
+      "type": "boolean"
     }
   },
   "cssVars": [

package/src/04-components/{link → typography/link}/link.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 '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'link.docs.json');
 

package/src/99-debug/grid-overlay.scss

@@ -1,4 +1,4 @@
-/* Debug grid overlay - add class="debug-grid" to body or any container */
+// Debug grid overlay - add class="debug-grid" to body or any container
 .debug-grid,
 .debug-grid-rows,
 .debug-baseline {
@@ -6,7 +6,8 @@
 }
 
 .debug-grid {
-  --debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.15);
+  // Fallback hue 220 (blue) when --ui-hue-primary not set
+  --debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15);
 }
 
 .debug-grid::after {
@@ -27,10 +28,10 @@
   background-position: 0 0;
 }
 
-/* Stronger grid at row intervals (16px) */
+// Stronger grid at row intervals
 .debug-grid-rows {
-  --debug-color: hsl(var(--ui-hue-primary) 80% 50% / 0.1);
-  --debug-color-strong: hsl(var(--ui-hue-primary) 80% 50% / 0.25);
+  --debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);
+  --debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25);
 }
 
 .debug-grid-rows::after {
@@ -52,9 +53,9 @@
   background-position: 0 0;
 }
 
-/* Baseline grid only (horizontal lines) */
+// Baseline grid only (horizontal lines)
 .debug-baseline {
-  --debug-color: hsl(var(--ui-hue-danger) 80% 50% / 0.2);
+  --debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
 }
 
 .debug-baseline::after {
@@ -73,7 +74,7 @@
   background-size: 100% var(--unit);
 }
 
-/* Element boundaries outline */
+// Element boundaries outline
 .debug-outline * {
   outline: 1px solid hsl(0 100% 50% / 0.5);
 }

package/src/testing/page-setup.ts

@@ -9,9 +9,11 @@ import { scaffoldCss } from './scaffold';
 
 interface DocsItem {
   tag: string;
-  class: string;
-  text: string;
+  class?: string;
+  text?: string;
   attrs?: Record<string, string>;
+  style?: Record<string, string>;
+  children?: DocsItem[];
 }
 
 interface DocsExample {
@@ -41,13 +43,27 @@ export function loadComponentApi(apiPath: string): ComponentAPI {
 }
 
 function renderItem(item: DocsItem): string {
-  const attrs = item.attrs
-    ? Object.entries(item.attrs)
-        .map(([k, v]) => (v === '' ? k : `${k}="${v}"`))
-        .join(' ')
-    : '';
-  const attrStr = attrs ? ` ${attrs}` : '';
-  return `<${item.tag} class="${item.class}"${attrStr}>${item.text}</${item.tag}>`;
+  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 {

package/src/testing/sidebar-toggles.spec.ts

@@ -0,0 +1,103 @@
+import { expect, test } from '@playwright/test';
+
+// Needs docs server running at localhost:3000
+test.skip(!!process.env.CI, 'Sidebar toggle test requires docs server');
+
+test.describe('sidebar toggle buttons', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    // Clear sessionStorage/localStorage to start fresh
+    await page.evaluate(() => {
+      sessionStorage.clear();
+      localStorage.clear();
+    });
+    await page.reload();
+  });
+
+  test('all buttons start with aria-pressed=false', async ({ page }) => {
+    const buttons = page.locator('.ui-sidebar-nav__footer button[aria-pressed]');
+    const count = await buttons.count();
+    expect(count).toBe(5);
+    for (let i = 0; i < count; i++) {
+      await expect(buttons.nth(i)).toHaveAttribute('aria-pressed', 'false');
+    }
+  });
+
+  test('debug grid toggle adds class and sets aria-pressed', async ({ page }) => {
+    const btn = page.locator('button', { hasText: 'Toggle Grid' }).first();
+    await btn.click();
+    await expect(btn).toHaveAttribute('aria-pressed', 'true');
+    const hasClass = await page.evaluate(() => document.body.classList.contains('ui-debug-grid'));
+    expect(hasClass).toBe(true);
+
+    // Toggle off
+    await btn.click();
+    await expect(btn).toHaveAttribute('aria-pressed', 'false');
+    const removed = await page.evaluate(() => !document.body.classList.contains('ui-debug-grid'));
+    expect(removed).toBe(true);
+  });
+
+  test('debug grid overlay renders background-image', async ({ page }) => {
+    const btn = page.locator('button', { hasText: 'Toggle Grid' }).first();
+    await btn.click();
+
+    const bg = await page.evaluate(() => {
+      return window.getComputedStyle(document.body, '::after').backgroundImage;
+    });
+    expect(bg).not.toBe('none');
+  });
+
+  test('debug baseline toggle works', async ({ page }) => {
+    const btn = page.locator('button', { hasText: 'Toggle Baseline' });
+    await btn.click();
+    await expect(btn).toHaveAttribute('aria-pressed', 'true');
+    const hasClass = await page.evaluate(() =>
+      document.body.classList.contains('ui-debug-baseline'),
+    );
+    expect(hasClass).toBe(true);
+  });
+
+  test('debug outline toggle adds outlines to children', async ({ page }) => {
+    const btn = page.locator('button', { hasText: 'Toggle Outlines' });
+    await btn.click();
+    await expect(btn).toHaveAttribute('aria-pressed', 'true');
+    const outlineStyle = await page.evaluate(() => {
+      const el = document.querySelector('.ui-main');
+      return el ? window.getComputedStyle(el).outlineStyle : '';
+    });
+    expect(outlineStyle).toBe('solid');
+  });
+
+  test('dark mode toggle sets data-theme and aria-pressed', async ({ page }) => {
+    const btn = page.locator('#theme-toggle');
+    await expect(btn).toHaveAttribute('aria-pressed', 'false');
+
+    await btn.click();
+    await expect(btn).toHaveAttribute('aria-pressed', 'true');
+    await expect(btn).toHaveText('Light Mode');
+    const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+    expect(theme).toBe('dark');
+
+    await btn.click();
+    await expect(btn).toHaveAttribute('aria-pressed', 'false');
+    await expect(btn).toHaveText('Dark Mode');
+  });
+
+  test('debug state persists across page loads', async ({ page }) => {
+    // Enable grid
+    const gridBtn = page.locator('button', { hasText: 'Toggle Grid' }).first();
+    await gridBtn.click();
+    await expect(gridBtn).toHaveAttribute('aria-pressed', 'true');
+
+    // Reload page
+    await page.reload();
+
+    // Body should still have the class
+    const hasClass = await page.evaluate(() => document.body.classList.contains('ui-debug-grid'));
+    expect(hasClass).toBe(true);
+
+    // Button should reflect the restored state
+    const restoredBtn = page.locator('button', { hasText: 'Toggle Grid' }).first();
+    await expect(restoredBtn).toHaveAttribute('aria-pressed', 'true');
+  });
+});

package/src/04-components/field/field.api.json

@@ -1,11 +0,0 @@
-{
-  "name": "field",
-  "element": "div",
-  "modifiers": {},
-  "cssVars": [
-    {
-      "name": "--ui-field-gap",
-      "default": "0"
-    }
-  ]
-}