@teseor/css 1.2.0 → 1.2.1

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

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

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

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

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Pagination - page navigation
 // Navigation through paginated content

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.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.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.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.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.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.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.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.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.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/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');
+  });
+});