@acorex/styles 22.1.0-next.3 → 22.1.0-next.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "22.1.0-next.3",
+  "version": "22.1.0-next.4",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",

package/themes/appearance.contract.mjs

@@ -1,81 +0,0 @@
-/**
- * Contract checks for the optional Depth appearance layer.
- * Run: node packages/styles/themes/appearance.contract.mjs
- */
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const root = join(__dirname, '../../..');
-
-const defaultCss = readFileSync(join(__dirname, 'default.css'), 'utf8');
-const appearanceCss = readFileSync(join(__dirname, 'appearance.css'), 'utf8');
-
-let failed = 0;
-
-function assert(condition, message) {
-  if (!condition) {
-    failed += 1;
-    console.error(`FAIL: ${message}`);
-  } else {
-    console.log(`PASS: ${message}`);
-  }
-}
-
-assert(defaultCss.includes('--ax-sys-elevation-control-rest:'), 'Flat elevation tokens exist');
-assert(defaultCss.includes('--ax-sys-effect-control-rest:'), 'Combined effect tokens exist');
-assert(!defaultCss.includes('--ax-sys-press-offset'), 'Press offset token removed from Flat defaults');
-assert(defaultCss.includes('@utility ax-effect-control'), 'ax-effect-control utility exists');
-assert(defaultCss.includes('@utility ax-effect-input'), 'ax-effect-input utility exists');
-assert(defaultCss.includes('@utility ax-focus-ring'), 'Focus ring utility preserved');
-assert(/@utility ax-effect-control-active \{[\s\S]*?transform: none/.test(defaultCss), 'Active utility keeps transform none');
-assert(
-  /@utility ax-effect-transition \{[\s\S]*?transition-property: box-shadow, background-image, border-color/.test(
-    defaultCss,
-  ),
-  'Button effect transition excludes transform',
-);
-assert(/@utility ax-solid \{[\s\S]*?ax-effect-control/.test(defaultCss), 'Solid uses control effect');
-assert(/@utility ax-outline \{[\s\S]*?ax-effect-control-subtle/.test(defaultCss), 'Outline uses subtle effect');
-assert(/@utility ax-link \{[\s\S]*?ax-effect-control/.test(defaultCss) === false, 'Link has no control elevation');
-assert(defaultCss.includes('box-shadow: var(--ax-sys-effect-input)'), 'Editors use inset effect');
-assert(!defaultCss.includes('translateY(var(--ax-sys-press-offset))'), 'No press-offset translateY remains');
-
-assert(appearanceCss.includes('.ax-appearance-depth'), 'Depth activator class exists');
-assert(appearanceCss.includes('0 1px 1px rgb(15 23 42 / 0.08)'), 'Solid rest uses tight contact shadow');
-assert(appearanceCss.includes('0 1px 2px rgb(15 23 42 / 0.1)'), 'Solid hover stays close to control');
-assert(appearanceCss.includes('0 1px 1px rgb(15 23 42 / 0.05)'), 'Subtle rest is weaker than Solid');
-assert(appearanceCss.includes('--ax-sys-elevation-control-subtle-rest:'), 'Subtle control elevation exists');
-assert(appearanceCss.includes('--ax-sys-gradient-control-subtle: none'), 'Outline/Twotone keep no gradient');
-assert(appearanceCss.includes('rgb(255 255 255 / 0.06)'), 'Solid gradient is nearly imperceptible');
-assert(!appearanceCss.includes('--ax-sys-press-offset'), 'Press offset token removed from Depth');
-assert(!appearanceCss.includes('translateY'), 'Depth sheet has no translateY');
-assert(
-  appearanceCss.includes('--ax-sys-effect-control-active: var(--ax-sys-inset-pressed)'),
-  'Active uses inset pressed',
-);
-assert(appearanceCss.includes('.ax-dark.ax-appearance-depth'), 'Dark depth selector exists');
-assert(appearanceCss.includes('.ax-dark.ax-appearance-depth .ax-light'), 'Nested light depth reset exists');
-assert(!/(^|[^a-z-])\.dark(\s|,|\{)/.test(appearanceCss), 'No non-ax .dark selector');
-assert(appearanceCss.includes('@media (forced-colors: active)'), 'Forced colors support');
-
-const entries = [
-  join(root, 'apps/showcase/src/styles.css'),
-  join(root, 'apps/documentation/src/styles.css'),
-  join(root, 'packages/components/.storybook/styles.css'),
-];
-
-for (const entry of entries) {
-  const css = readFileSync(entry, 'utf8');
-  const defaultIndex = css.indexOf('themes/default.css');
-  const appearanceIndex = css.indexOf('themes/appearance.css');
-  assert(defaultIndex >= 0 && appearanceIndex > defaultIndex, `Import order OK: ${entry}`);
-}
-
-if (failed > 0) {
-  console.error(`\n${failed} assertion(s) failed`);
-  process.exit(1);
-}
-
-console.log('\nAll appearance contract checks passed.');

package/themes/appearance.contract.test.mjs

@@ -1,910 +0,0 @@
-import assert from 'node:assert/strict';
-import { existsSync, readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import test from 'node:test';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const workspaceRoot = join(__dirname, '../../..');
-const themesDir = join(workspaceRoot, 'packages/styles/themes');
-const componentsDir = join(workspaceRoot, 'packages/styles/components');
-
-function read(path) {
-  return readFileSync(path, 'utf8');
-}
-
-function extractUtility(css, name) {
-  const marker = `@utility ${name} {`;
-  const start = css.indexOf(marker);
-  if (start < 0) {
-    return '';
-  }
-
-  let depth = 0;
-  const openBrace = css.indexOf('{', start);
-  for (let i = openBrace; i < css.length; i += 1) {
-    if (css[i] === '{') {
-      depth += 1;
-    } else if (css[i] === '}') {
-      depth -= 1;
-      if (depth === 0) {
-        return css.slice(start, i + 1);
-      }
-    }
-  }
-
-  return '';
-}
-
-const SEMANTIC_TOKENS = [
-  '--ax-sys-effect-control-rest',
-  '--ax-sys-effect-field-rest',
-  '--ax-sys-effect-floating',
-  '--ax-sys-effect-prominent-floating',
-  '--ax-sys-effect-overlay',
-  '--ax-sys-effect-modal',
-  '--ax-sys-backdrop-filter-surface',
-  '--ax-sys-surface-fill-opacity',
-  '--ax-sys-surface-overlay-control-rest',
-  '--ax-sys-surface-overlay-field-rest',
-  '--ax-sys-surface-overlay-overlay',
-  '--ax-sys-surface-overlay-modal',
-  '--ax-sys-bevel-control-rest',
-  '--ax-sys-bevel-control-hover',
-  '--ax-sys-bevel-control-active',
-  '--ax-sys-bevel-control-disabled',
-  '--ax-sys-effect-control-neutral-rest',
-  '--ax-sys-effect-control-neutral-hover',
-  '--ax-sys-effect-control-neutral-active',
-  '--ax-sys-effect-control-neutral-disabled',
-  '--ax-sys-bevel-control-neutral-rest',
-  '--ax-sys-bevel-control-neutral-hover',
-  '--ax-sys-bevel-control-neutral-active',
-  '--ax-sys-bevel-control-neutral-disabled',
-  '--ax-sys-inner-border-control-neutral-rest',
-  '--ax-sys-inner-border-control-neutral-hover',
-  '--ax-sys-inner-border-control-neutral-active',
-  '--ax-sys-gradient-control-neutral-rest',
-  '--ax-sys-gradient-control-neutral-hover',
-  '--ax-sys-gradient-control-neutral-active',
-];
-
-const COMPONENT_FILES = {
-  button: join(workspaceRoot, 'packages/components/button/src/lib/button.component.css'),
-  editor: join(componentsDir, '_editor-container.css'),
-  dialog: join(workspaceRoot, 'packages/components/dialog/src/lib/dialog.component.css'),
-  dropdown: join(componentsDir, '_drop-down.css'),
-  popup: join(workspaceRoot, 'packages/components/popup/src/lib/popup.component.css'),
-  toast: join(workspaceRoot, 'packages/components/toast/src/lib/toast.component.css'),
-  notification: join(workspaceRoot, 'packages/components/notification/src/lib/notification.component.css'),
-  menu: join(workspaceRoot, 'packages/components/menu/src/lib/menu.component.css'),
-  tooltip: join(workspaceRoot, 'packages/components/tooltip/src/lib/tooltip.component.css'),
-  drawer: join(workspaceRoot, 'packages/components/drawer/src/lib/drawer-item/drawer.component.css'),
-  actionsheet: join(componentsDir, '_actionsheet.css'),
-};
-
-const appearancesDir = join(themesDir, 'appearances');
-
-const APPEARANCE_FILES = {
-  aggregate: join(themesDir, 'appearance.css'),
-  index: join(appearancesDir, 'index.css'),
-  flat: join(appearancesDir, 'flat.css'),
-  depth: join(appearancesDir, 'depth.css'),
-  translucent: join(appearancesDir, 'translucent.css'),
-};
-
-const FORBIDDEN_IN_APPEARANCE = [
-  'ax-button',
-  '.ax-editor-container',
-  '.ax-dialog',
-  '.ax-overlay-pane',
-  'ax-toast',
-  '.ax-popup',
-  '@apply',
-];
-
-test('appearance.css is backward-compatible aggregate entry', () => {
-  const css = read(APPEARANCE_FILES.aggregate);
-  assert.ok(css.includes("@import './appearances/index.css'"));
-  for (const selector of FORBIDDEN_IN_APPEARANCE) {
-    assert.equal(css.includes(selector), false, `appearance.css must not contain ${selector}`);
-  }
-});
-
-test('appearances/index.css imports all appearance files', () => {
-  const css = read(APPEARANCE_FILES.index);
-  assert.ok(css.includes("@import './flat.css'"));
-  assert.ok(css.includes("@import './depth.css'"));
-  assert.ok(css.includes("@import './translucent.css'"));
-  assert.equal(css.includes("@import './tonal.css'"), false);
-});
-
-for (const [name, file] of Object.entries({
-  flat: APPEARANCE_FILES.flat,
-  depth: APPEARANCE_FILES.depth,
-  translucent: APPEARANCE_FILES.translucent,
-})) {
-  test(`${name}.css is self-contained and token-only`, () => {
-    const css = read(file);
-    assert.ok(css.includes(`.ax-appearance-${name}`));
-    for (const selector of FORBIDDEN_IN_APPEARANCE) {
-      assert.equal(css.includes(selector), false, `${name}.css must not contain ${selector}`);
-    }
-    assert.doesNotMatch(css, /(^|[^a-z-])\.dark(\s|,|\{)/);
-  });
-}
-
-test('depth.css defines tactile beveled control tokens and lightly recessed fields', () => {
-  const css = read(APPEARANCE_FILES.depth);
-  assert.ok(css.includes('--ax-sys-effect-control-rest: var(--ax-ref-shadow-100)'));
-  assert.ok(css.includes('--ax-sys-effect-control-hover: var(--ax-sys-effect-control-rest)'));
-  assert.ok(css.includes('--ax-sys-effect-control-active: var(--ax-ref-shadow-0)'));
-  assert.ok(css.includes('--ax-sys-effect-field-rest: var(--ax-ref-inset-low)'));
-  assert.ok(css.includes('inset 0 1px 2px rgb(15 23 42 / 0.1)'));
-  assert.ok(css.includes('--ax-sys-bevel-control-rest:'));
-  assert.ok(css.includes('inset 0 -2px 2px rgb(15 23 42 / 0.1)'));
-  assert.doesNotMatch(css, /inset 0 -4px 5px rgb\(15 23 42/);
-  assert.ok(css.includes('rgb(15 23 42 / 0.075) 100%'));
-  assert.ok(css.includes('--ax-sys-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.14)'));
-  assert.ok(css.includes('--ax-sys-gradient-control-rest: var(--ax-ref-gradient-control)'));
-  assert.ok(css.includes('--ax-sys-effect-control-neutral-rest:'));
-  assert.ok(css.includes('--ax-sys-gradient-control-neutral-rest:'));
-  assert.ok(css.includes('--ax-sys-transform-control-active: translateY(1px)'));
-  assert.ok(css.includes('--ax-sys-surface-overlay-control-rest: transparent'));
-});
-
-test('tonal appearance stylesheet is removed', () => {
-  assert.equal(read(APPEARANCE_FILES.index).includes('tonal.css'), false);
-  assert.equal(read(join(themesDir, 'appearance.css')).includes('ax-appearance-tonal'), false);
-});
-
-test('default.css defines flat semantic tokens with neutral bevel defaults', () => {
-  const css = read(join(themesDir, 'default.css'));
-  for (const token of SEMANTIC_TOKENS) {
-    assert.ok(css.includes(`${token}:`), `missing ${token}`);
-  }
-  assert.ok(css.includes('--ax-sys-effect-control-rest: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-bevel-control-rest: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-effect-control-neutral-rest: var(--ax-sys-effect-control-rest)'));
-  assert.ok(css.includes('--ax-sys-bevel-control-neutral-rest: var(--ax-sys-bevel-control-rest)'));
-  assert.ok(css.includes('--ax-sys-inner-border-control-neutral-rest: var(--ax-sys-inner-border-control)'));
-  assert.ok(css.includes('--ax-sys-gradient-control-neutral-rest: var(--ax-sys-gradient-control-rest)'));
-  assert.ok(css.includes('--ax-sys-effect-control-neutral-active: var(--ax-sys-effect-control-active)'));
-  assert.ok(css.includes('--ax-sys-gradient-control-neutral-active: var(--ax-sys-gradient-control-active)'));
-  assert.ok(css.includes('0 4px 6px -1px rgb(0 0 0 / 0.1)'));
-  assert.ok(css.includes('0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)'));
-  assert.ok(css.includes('0 10px 15px -3px rgb(0 0 0 / 0.1)'));
-  assert.ok(css.includes('.ax-editor-container.ax-solid'));
-  // Host shadow = field effect only; contrast border lives on ::after
-  assert.ok(css.includes('box-shadow: var(--ax-sys-effect-field-rest)'));
-  assert.ok(css.includes('box-shadow: var(--ax-sys-effect-field-hover)'));
-  assert.equal(
-    css.includes(
-      'box-shadow: var(--ax-sys-contrast-inner-border-field), var(--ax-sys-effect-field-rest)',
-    ),
-    false,
-  );
-  // Utilities must not wipe editor overlays owned by _editor-container.css
-  const editorUtility = css.slice(css.indexOf('.ax-editor-container.ax-solid,'));
-  assert.equal(editorUtility.includes('background-image: none'), false);
-});
-
-test('default.css look utilities are token-driven without base elevation', () => {
-  const css = read(join(themesDir, 'default.css'));
-  assert.doesNotMatch(extractUtility(css, 'ax-solid'), /ax-effect-control/);
-  assert.doesNotMatch(extractUtility(css, 'ax-outline'), /ax-effect-control/);
-  assert.doesNotMatch(extractUtility(css, 'ax-twotone'), /ax-effect-control/);
-  // Interactive looks change color only — box-shadow owned by components (Contrast-safe)
-  assert.doesNotMatch(extractUtility(css, 'ax-solid-interactive'), /ax-effect-control-hover/);
-  assert.doesNotMatch(extractUtility(css, 'ax-outline-interactive'), /ax-effect-control-subtle-hover/);
-});
-
-test('effect utilities compose contrast control border', () => {
-  const css = read(join(themesDir, 'default.css'));
-  assert.match(
-    extractUtility(css, 'ax-effect-control-hover'),
-    /--ax-sys-contrast-inner-border-control/,
-  );
-  assert.match(
-    extractUtility(css, 'ax-effect-control-active'),
-    /--ax-sys-contrast-inner-border-control/,
-  );
-  assert.match(
-    extractUtility(css, 'ax-effect-blank-hover'),
-    /--ax-sys-contrast-inner-border-control/,
-  );
-});
-
-test('translucent keeps controls and fields flat', () => {
-  const css = read(APPEARANCE_FILES.translucent);
-  assert.match(
-    css,
-    /\.ax-appearance-translucent \{[\s\S]*?--ax-sys-effect-control-rest: 0 0 #0000[\s\S]*?--ax-sys-effect-field-rest: 0 0 #0000/,
-  );
-  assert.ok(css.includes('--ax-sys-surface-overlay-control-rest: transparent'));
-  assert.ok(css.includes('--ax-sys-surface-overlay-field-rest: transparent'));
-  assert.ok(css.includes('--ax-sys-surface-fill-opacity:'));
-  assert.ok(css.includes('@supports not (backdrop-filter: blur(1px))'));
-});
-
-test('flat.css resets bevel and surface overlays to neutral', () => {
-  const css = read(APPEARANCE_FILES.flat);
-  assert.ok(css.includes('--ax-sys-bevel-control-rest: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-surface-overlay-control-rest: transparent'));
-  assert.ok(css.includes('--ax-sys-surface-overlay-field-rest: transparent'));
-});
-
-test('component tokens use rest state naming for rendered surfaces', () => {
-  const dropdown = read(COMPONENT_FILES.dropdown);
-  const toast = read(COMPONENT_FILES.toast);
-  assert.ok(dropdown.includes('--ax-comp-dropdown-shadow-rest'));
-  assert.equal(dropdown.includes('--ax-comp-dropdown-shadow-open'), false);
-  assert.ok(toast.includes('--ax-comp-toast-shadow-rest'));
-  assert.equal(toast.includes('--ax-comp-toast-shadow-open'), false);
-});
-
-test('component tokens are consumed by CSS properties', () => {
-  const checks = [
-    [COMPONENT_FILES.button, '--ax-comp-button-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.button, '--ax-comp-button-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.editor, '--ax-comp-editor-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.editor, '--ax-comp-editor-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.dialog, '--ax-comp-dialog-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.dialog, '--ax-comp-dialog-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.dropdown, '--ax-comp-dropdown-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.dropdown, '--ax-comp-dropdown-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.popup, '--ax-comp-popup-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.popup, '--ax-comp-popup-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.toast, '--ax-comp-toast-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.toast, '--ax-comp-toast-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.notification, '--ax-comp-notification-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.notification, '--ax-comp-notification-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.menu, '--ax-comp-menu-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.menu, '--ax-comp-menu-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.tooltip, '--ax-comp-tooltip-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.drawer, '--ax-comp-drawer-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.drawer, '--ax-comp-drawer-surface-overlay-rest', 'background-image:'],
-    [COMPONENT_FILES.actionsheet, '--ax-comp-action-sheet-shadow-rest', 'box-shadow:'],
-    [COMPONENT_FILES.actionsheet, '--ax-comp-action-sheet-surface-overlay-rest', 'background-image:'],
-  ];
-
-  for (const [file, token, property] of checks) {
-    const css = read(file);
-    assert.ok(css.includes(token), `${file} missing ${token}`);
-    assert.ok(css.includes(property), `${file} does not consume tokens via ${property}`);
-  }
-});
-
-test('migrated components avoid raw duplicated shadow literals', () => {
-  const rawShadow = /0 \d+px \d+px -?\d+px rgb\(/;
-  for (const [name, file] of Object.entries(COMPONENT_FILES)) {
-    const css = read(file);
-    assert.equal(rawShadow.test(css), false, `${name} contains raw shadow literal`);
-  }
-});
-
-test('button maps neutral depth tokens for default solid only', () => {
-  const css = read(COMPONENT_FILES.button);
-  const defaultBlock = css.match(/&\.ax-solid-interactive \{[\s\S]*?&\.ax-default \{([^}]+)\}/)?.[1] ?? '';
-  assert.ok(defaultBlock.includes('border-color: rgba(var(--ax-sys-color-border-surface))'));
-  assert.ok(defaultBlock.includes('--ax-comp-button-highlight-rest: 0 0 #0000'));
-  assert.match(
-    css,
-    /&\.ax-solid-interactive \{[\s\S]*?&\.ax-default \{[\s\S]*?--ax-comp-button-shadow-rest:\s*var\(--ax-sys-effect-control-neutral-rest\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-shadow-hover:\s*var\(--ax-sys-effect-control-neutral-hover\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-shadow-active:\s*var\(--ax-sys-effect-control-neutral-active\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-bevel-rest:\s*var\(--ax-sys-bevel-control-neutral-rest\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-bevel-hover:\s*var\(--ax-sys-bevel-control-neutral-hover\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-bevel-active:\s*var\(--ax-sys-bevel-control-neutral-active\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-inner-border-rest:\s*var\(--ax-sys-inner-border-control-neutral-rest\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-inner-border-hover:\s*var\(--ax-sys-inner-border-control-neutral-hover\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-inner-border-active:\s*var\(--ax-sys-inner-border-control-neutral-active\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-background-image-rest:\s*var\(--ax-sys-gradient-control-neutral-rest\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-background-image-hover:\s*var\(--ax-sys-gradient-control-neutral-hover\)/,
-  );
-  assert.match(
-    css,
-    /&\.ax-default \{[\s\S]*?--ax-comp-button-background-image-active:\s*var\(--ax-sys-gradient-control-neutral-active\)/,
-  );
-  assert.doesNotMatch(css, /&\.ax-outline-interactive \{[\s\S]*?&\.ax-default \{[\s\S]*?neutral/);
-  assert.doesNotMatch(css, /&\.ax-link-interactive \{[\s\S]*?&\.ax-default/);
-  assert.doesNotMatch(css, /0 1px 1px rgb\(15 23 42 \/ 0\.1\)/);
-});
-
-test('default solid uses same hover and active guards as colored solid', () => {
-  const css = read(COMPONENT_FILES.button);
-  const solidBlock = css.match(/&\.ax-solid-interactive \{([\s\S]*?)\n      \}/)?.[1] ?? '';
-  assert.ok(solidBlock.includes('&:not(.ax-state-disabled, .ax-state-loading):hover'));
-  assert.ok(solidBlock.includes('&:not(.ax-state-disabled, .ax-state-loading):active'));
-  assert.equal(
-    (solidBlock.match(/&:not\(\.ax-state-disabled, \.ax-state-loading\):hover/g) ?? []).length,
-    1,
-  );
-});
-
-test('depth overrides complete neutral state contract', () => {
-  const css = read(APPEARANCE_FILES.depth);
-  for (const token of [
-    '--ax-sys-effect-control-neutral-rest',
-    '--ax-sys-effect-control-neutral-hover',
-    '--ax-sys-effect-control-neutral-active',
-    '--ax-sys-effect-control-neutral-disabled',
-    '--ax-sys-bevel-control-neutral-rest',
-    '--ax-sys-bevel-control-neutral-hover',
-    '--ax-sys-bevel-control-neutral-active',
-    '--ax-sys-inner-border-control-neutral-rest',
-    '--ax-sys-inner-border-control-neutral-hover',
-    '--ax-sys-gradient-control-neutral-rest',
-    '--ax-sys-gradient-control-neutral-hover',
-    '--ax-sys-gradient-control-neutral-active',
-  ]) {
-    assert.ok(css.includes(`${token}:`), `depth.css missing ${token}`);
-  }
-  assert.doesNotMatch(css, /--ax-sys-inner-border-control-neutral:/);
-});
-
-test('depth neutral default solid matches pale reference (border + soft shadow)', () => {
-  const css = read(APPEARANCE_FILES.depth);
-  assert.ok(css.includes('0 1px 2px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.05)'));
-  assert.ok(css.includes('--ax-sys-bevel-control-neutral-rest: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-inner-border-control-neutral-rest: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-gradient-control-neutral-rest: var(--ax-ref-gradient-control-neutral)'));
-  assert.ok(css.includes('--ax-sys-effect-control-neutral-hover: var(--ax-sys-effect-control-neutral-rest)'));
-  assert.ok(css.includes('--ax-sys-bevel-control-hover: var(--ax-sys-bevel-control-rest)'));
-});
-
-test('outline default retains border utility', () => {
-  const css = read(join(themesDir, 'default.css'));
-  const outlineUtility = extractUtility(css, 'ax-outline');
-  assert.ok(outlineUtility.includes('border'));
-  const buttonCss = read(COMPONENT_FILES.button);
-  assert.doesNotMatch(buttonCss, /\.ax-outline-interactive[\s\S]*?border-color:\s*transparent/);
-});
-
-test('button defines and consumes bevel component tokens in solid stack', () => {
-  const css = read(COMPONENT_FILES.button);
-  assert.ok(css.includes('--ax-comp-button-bevel-rest: var(--ax-sys-bevel-control-rest)'));
-  assert.ok(css.includes('--ax-comp-button-bevel-hover: var(--ax-sys-bevel-control-hover)'));
-  assert.ok(css.includes('--ax-comp-button-bevel-active: var(--ax-sys-bevel-control-active)'));
-  assert.ok(css.includes('--ax-comp-button-bevel-disabled: var(--ax-sys-bevel-control-disabled)'));
-  assert.ok(css.includes('--ax-comp-button-inner-border-rest: var(--ax-sys-inner-border-control)'));
-  assert.match(css, /\.ax-solid-interactive \{[\s\S]*?var\(--ax-comp-button-bevel-rest\)/);
-  assert.match(css, /\.ax-solid-interactive \{[\s\S]*?var\(--ax-comp-button-inner-border-rest\)/);
-  assert.doesNotMatch(css, /inset 0 2px 1px rgb\(255 255 255/);
-});
-
-test('outline and twotone do not receive full rest bevel stack', () => {
-  const css = read(COMPONENT_FILES.button);
-  assert.doesNotMatch(css, /\.ax-outline-interactive \{[\s\S]*?--ax-comp-button-bevel-rest/);
-  assert.doesNotMatch(css, /\.ax-twotone-interactive \{[\s\S]*?--ax-comp-button-bevel-rest/);
-  assert.match(css, /\.ax-twotone-interactive \{[\s\S]*?--ax-comp-button-shadow-subtle-rest/);
-});
-
-test('disabled and loading suppress decorative bevel on solid', () => {
-  const css = read(COMPONENT_FILES.button);
-  const disabledBlock = css.match(/&\.ax-state-disabled,\s*&\.ax-state-loading \{([^}]+)\}/)?.[1] ?? '';
-  assert.ok(
-    disabledBlock.includes(
-      'box-shadow: var(--ax-comp-button-contrast-inner-border-rest), var(--ax-comp-button-inner-border-rest)',
-    ),
-  );
-  assert.equal(disabledBlock.includes('bevel'), false);
-  assert.ok(css.includes('--ax-comp-button-bevel-disabled: var(--ax-sys-bevel-control-disabled)'));
-});
-
-test('fab consumes control-level bevel and gradient tokens', () => {
-  const fabPath = join(workspaceRoot, 'packages/components/fab/src/lib/fab.component.css');
-  const css = read(fabPath);
-  assert.ok(css.includes('--ax-comp-fab-bevel-rest: var(--ax-sys-bevel-control-rest)'));
-  assert.ok(css.includes('--ax-comp-fab-shadow-rest: var(--ax-sys-effect-control-rest)'));
-  assert.ok(css.includes('var(--ax-comp-fab-bevel-rest)'));
-  assert.equal(css.includes('--ax-sys-effect-floating'), false);
-  assert.equal(css.includes('--ax-sys-effect-modal'), false);
-});
-
-test('link button remains explicitly shadowless', () => {
-  const css = read(COMPONENT_FILES.button);
-  assert.match(css, /\.ax-link-interactive \{[\s\S]*?box-shadow: none/);
-  assert.match(css, /\.ax-link-interactive \{[\s\S]*?background-image: none/);
-  assert.match(css, /\.ax-link-interactive \{[\s\S]*?transform: none/);
-});
-
-test('editor uses field inset tokens only', () => {
-  const css = read(COMPONENT_FILES.editor);
-  assert.ok(css.includes('--ax-comp-editor-shadow-rest: var(--ax-sys-effect-field-rest)'));
-  assert.doesNotMatch(css, /--ax-sys-effect-overlay|--ax-sys-effect-modal|--ax-sys-effect-floating/);
-});
-
-test('overlay service propagates visual context', () => {
-  const css = read(join(workspaceRoot, 'packages/cdk/overlay/src/lib/overlay.service.ts'));
-  assert.ok(css.includes('resolveVisualContext'));
-  assert.ok(css.includes('applyVisualContext'));
-  assert.ok(css.includes('contextElement'));
-});
-
-const ANCHORLESS_OVERLAY_SERVICES = [
-  join(workspaceRoot, 'packages/components/toast/src/lib/toast.service.ts'),
-  join(workspaceRoot, 'packages/components/notification/src/lib/notification.service.ts'),
-  join(workspaceRoot, 'packages/components/dialog/src/lib/dialog.service.ts'),
-  join(workspaceRoot, 'packages/components/popup/src/lib/popup.service.ts'),
-  join(workspaceRoot, 'packages/components/action-sheet/src/lib/action-sheet.service.ts'),
-];
-
-for (const servicePath of ANCHORLESS_OVERLAY_SERVICES) {
-  test(`anchorless overlay service forwards contextElement — ${servicePath.split('/').slice(-2).join('/')}`, () => {
-    const source = read(servicePath);
-    assert.match(source, /contextElement:\s*config\.contextElement/);
-  });
-}
-
-test('package exports appearance stylesheets', () => {
-  const pkg = JSON.parse(read(join(workspaceRoot, 'packages/styles/package.json')));
-  assert.equal(pkg.exports['./themes/appearance.css'], './themes/appearance.css');
-  assert.equal(pkg.exports['./themes/appearances/depth.css'], './themes/appearances/depth.css');
-  assert.equal(pkg.exports['./themes/appearances/index.css'], './themes/appearances/index.css');
-  assert.equal(pkg.exports['./themes/appearances/flat.css'], './themes/appearances/flat.css');
-});
-
-test('modified surface files avoid stale .dark selectors', () => {
-  const staleDark = /(^|[^a-z-])\.dark(\s|,|\{)/;
-  for (const file of [COMPONENT_FILES.dropdown, COMPONENT_FILES.menu]) {
-    const css = read(file);
-    assert.equal(staleDark.test(css), false, `${file} uses stale .dark selector`);
-  }
-});
-
-test('prominent-floating semantic token exists across appearances', () => {
-  const defaultCss = read(join(themesDir, 'default.css'));
-  assert.ok(defaultCss.includes('--ax-sys-effect-prominent-floating:'));
-  assert.ok(read(APPEARANCE_FILES.depth).includes('--ax-sys-effect-prominent-floating:'));
-  assert.ok(read(APPEARANCE_FILES.translucent).includes('--ax-sys-effect-prominent-floating:'));
-});
-
-test('dark and nested light mappings include prominent-floating', () => {
-  const depthCss = read(APPEARANCE_FILES.depth);
-  assert.match(depthCss, /\.ax-dark\.ax-appearance-depth[\s\S]*?--ax-ref-shadow-300:/);
-  assert.match(depthCss, /\.ax-dark \.ax-light\.ax-appearance-depth[\s\S]*?--ax-ref-shadow-300:/);
-  assert.ok(depthCss.includes('--ax-sys-effect-prominent-floating: var(--ax-ref-shadow-300)'));
-});
-
-test('notification consumes prominent-floating, not modal', () => {
-  const css = read(COMPONENT_FILES.notification);
-  assert.ok(css.includes('--ax-comp-notification-shadow-rest: var(--ax-sys-effect-prominent-floating)'));
-  assert.equal(css.includes('--ax-sys-effect-modal'), false);
-  assert.equal(css.includes('--ax-comp-notification-shadow-open'), false);
-});
-
-const CONTEXT_OPTION_FILES = [
-  ['dialog', join(workspaceRoot, 'packages/components/dialog/src/lib/dialog.class.ts')],
-  ['toast', join(workspaceRoot, 'packages/components/toast/src/lib/toast.class.ts')],
-  ['notification', join(workspaceRoot, 'packages/components/notification/src/lib/notification.class.ts')],
-  ['popup', join(workspaceRoot, 'packages/components/popup/src/lib/popup.interface.ts')],
-  ['action-sheet', join(workspaceRoot, 'packages/components/action-sheet/src/lib/action-sheet.class.ts')],
-];
-
-for (const [name, file] of CONTEXT_OPTION_FILES) {
-  test(`${name} options expose contextElement`, () => {
-    const source = read(file);
-    assert.match(source, /contextElement\?: HTMLElement \| ElementRef<HTMLElement>/);
-    assert.match(source, /outside the originating DOM subtree/);
-  });
-}
-
-test('context menu uses shared resolver utilities', () => {
-  const source = read(join(workspaceRoot, 'packages/components/menu/src/lib/context-menu.component.ts'));
-  assert.match(source, /resolveVisualContext/);
-  assert.match(source, /applyVisualContext/);
-  assert.doesNotMatch(source, /classList\.contains\('ax-dark'\)/);
-});
-
-test('popover does not manually inject ax-dark', () => {
-  const source = read(join(workspaceRoot, 'packages/components/popover/src/lib/popover.component.ts'));
-  assert.doesNotMatch(source, /classList\.add\(['"]ax-dark['"]\)/);
-  assert.doesNotMatch(source, /isDark\(\)/);
-});
-
-test('depth fields use lightly recessed inset tokens', () => {
-  const depthCss = read(APPEARANCE_FILES.depth);
-  const flatCss = read(APPEARANCE_FILES.flat);
-  const editorCss = read(COMPONENT_FILES.editor);
-  assert.ok(depthCss.includes('inset 0 1px 2px rgb(15 23 42 / 0.1)'));
-  assert.ok(depthCss.includes('inset 0 1px 3px rgb(15 23 42 / 0.13)'));
-  assert.ok(flatCss.includes('--ax-sys-effect-field-rest: 0 0 #0000'));
-  assert.ok(editorCss.includes('--ax-comp-editor-shadow-rest: var(--ax-sys-effect-field-rest)'));
-  assert.doesNotMatch(editorCss, /--ax-sys-effect-floating|--ax-sys-effect-modal|--ax-sys-effect-overlay/);
-});
-
-test('floating surfaces expose backdrop-filter consumption', () => {
-  for (const file of [COMPONENT_FILES.dropdown, COMPONENT_FILES.toast, COMPONENT_FILES.notification, COMPONENT_FILES.dialog]) {
-    const css = read(file);
-    assert.ok(css.includes('backdrop-filter:'), `${file} must consume backdrop-filter`);
-    assert.ok(css.includes('-webkit-backdrop-filter:'), `${file} must consume -webkit-backdrop-filter`);
-  }
-});
-
-const contrastDir = join(themesDir, 'contrast');
-const CONTRAST_FILES = {
-  index: join(contrastDir, 'index.css'),
-  enhanced: join(contrastDir, 'enhanced.css'),
-  high: join(contrastDir, 'high.css'),
-};
-
-const FORBIDDEN_IN_CONTRAST = ['ax-button', '.ax-editor-container', '@apply', 'ax-appearance-high-contrast', 'ax-appearance-enhanced'];
-
-test('contrast/enhanced.css exists and defines ax-contrast-enhanced', () => {
-  assert.ok(existsSync(CONTRAST_FILES.enhanced), 'enhanced.css must exist');
-  const css = read(CONTRAST_FILES.enhanced);
-  assert.ok(css.includes('.ax-contrast-enhanced'));
-  assert.equal(css.includes('.ax-appearance-enhanced'), false, 'Enhanced must not be an Appearance');
-  assert.equal(css.includes('ax-appearance-enhanced'), false);
-  for (const selector of FORBIDDEN_IN_CONTRAST) {
-    assert.equal(css.includes(selector), false, `enhanced.css must not contain ${selector}`);
-  }
-  assert.doesNotMatch(css, /(^|[^a-z-])\.dark(\s|,|\{)/);
-});
-
-test('contrast/high.css exists and defines ax-contrast-high', () => {
-  const css = read(CONTRAST_FILES.high);
-  assert.ok(css.includes('.ax-contrast-high'));
-  assert.equal(css.includes('.ax-appearance-high-contrast'), false, 'High Contrast must not be an Appearance');
-  for (const selector of FORBIDDEN_IN_CONTRAST) {
-    assert.equal(css.includes(selector), false, `high.css must not contain ${selector}`);
-  }
-  assert.doesNotMatch(css, /(^|[^a-z-])\.dark(\s|,|\{)/);
-});
-
-test('contrast/index.css aggregates enhanced and high contrast profiles', () => {
-  const css = read(CONTRAST_FILES.index);
-  assert.ok(css.includes("@import './enhanced.css'"));
-  assert.ok(css.includes("@import './high.css'"));
-});
-
-test('default.css defines contrast token defaults', () => {
-  const css = read(join(themesDir, 'default.css'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-control: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-invalid:'));
-  assert.ok(css.includes('rgba(var(--ax-sys-color-danger-600))'));
-  assert.ok(css.includes('--ax-sys-contrast-surface-overlay-control: transparent'));
-  assert.ok(css.includes('--ax-sys-contrast-disabled-opacity: 1'));
-});
-
-test('default.css resets inherited color on localized ax-dark / nested ax-light', () => {
-  const css = read(join(themesDir, 'default.css'));
-  assert.ok(css.includes('color: rgba(var(--ax-sys-color-on-darkest-surface))'));
-  assert.ok(css.includes('.ax-dark .ax-light'));
-  assert.ok(css.includes('color: rgba(var(--ax-sys-color-on-lightest-surface))'));
-});
-
-test('enhanced contrast defines control, field, and surface boundary tokens', () => {
-  const css = read(CONTRAST_FILES.enhanced);
-  assert.ok(css.includes('.ax-contrast-enhanced {'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-control:'));
-  assert.ok(css.includes('--ax-sys-contrast-border-control:'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-field:'));
-  assert.ok(css.includes('--ax-sys-contrast-border-field:'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-surface:'));
-  assert.ok(css.includes('--ax-sys-contrast-border-surface:'));
-  assert.ok(css.includes('--ax-sys-contrast-surface-overlay-field:'));
-  assert.ok(css.includes('--ax-sys-contrast-disabled-opacity:'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-invalid:'));
-  assert.ok(css.includes('--ax-sys-contrast-border-invalid:'));
-  assert.ok(css.includes('--ax-sys-contrast-focus-ring-invalid:'));
-});
-
-test('enhanced contrast light and dark values exist with nested light restoration', () => {
-  const css = read(CONTRAST_FILES.enhanced);
-  assert.ok(css.includes('inset 0 0 0 1px rgb(15 23 42 / 0.20)'));
-  assert.ok(css.includes('.ax-dark.ax-contrast-enhanced'));
-  assert.ok(css.includes('inset 0 0 0 1px rgb(255 255 255 / 0.22)'));
-  assert.ok(css.includes('.ax-dark .ax-light.ax-contrast-enhanced'));
-});
-
-test('enhanced contrast is weaker than high where reasonably testable', () => {
-  const enhanced = read(CONTRAST_FILES.enhanced);
-  const high = read(CONTRAST_FILES.high);
-  assert.ok(enhanced.includes('rgb(15 23 42 / 0.34)'));
-  assert.ok(high.includes('rgb(15 23 42 / 0.78)'));
-  assert.ok(enhanced.includes('--ax-sys-contrast-disabled-opacity: 0.72'));
-  assert.ok(high.includes('--ax-sys-contrast-disabled-opacity: 0.62'));
-});
-
-test('enhanced contrast does not override appearance-owned tokens', () => {
-  const css = read(CONTRAST_FILES.enhanced);
-  assert.equal(css.includes('--ax-sys-gradient-control-rest'), false);
-  assert.equal(css.includes('--ax-sys-gradient-control-hover'), false);
-  assert.equal(css.includes('--ax-sys-gradient-control-active'), false);
-  assert.equal(css.includes('--ax-sys-bevel-control-rest'), false);
-  assert.equal(css.includes('--ax-sys-bevel-control-hover'), false);
-  assert.equal(css.includes('--ax-sys-bevel-control-active'), false);
-  assert.equal(css.includes('--ax-sys-highlight-control'), false);
-  assert.equal(css.includes('--ax-sys-highlight-control-subtle'), false);
-  assert.equal(css.includes('--ax-sys-backdrop-filter-surface'), false);
-  assert.equal(css.includes('--ax-sys-surface-fill-opacity'), false);
-  assert.equal(css.includes('--ax-sys-filter-surface'), false);
-});
-
-test('enhanced control overlay is transparent; field overlay remains non-transparent', () => {
-  const css = read(CONTRAST_FILES.enhanced);
-  assert.match(
-    css,
-    /\.ax-contrast-enhanced \{[\s\S]*?--ax-sys-contrast-surface-overlay-control:\s*transparent;/,
-  );
-  assert.match(
-    css,
-    /\.ax-contrast-enhanced \{[\s\S]*?--ax-sys-contrast-surface-overlay-field:\s*rgb\(15 23 42 \/ 0\.028\);/,
-  );
-  assert.match(
-    css,
-    /\.ax-dark\.ax-contrast-enhanced[\s\S]*?--ax-sys-contrast-surface-overlay-control:\s*transparent;/,
-  );
-  assert.match(
-    css,
-    /\.ax-dark\.ax-contrast-enhanced[\s\S]*?--ax-sys-contrast-surface-overlay-field:\s*rgb\(255 255 255 \/ 0\.055\);/,
-  );
-  assert.match(
-    css,
-    /\.ax-dark \.ax-light\.ax-contrast-enhanced[\s\S]*?--ax-sys-contrast-surface-overlay-control:\s*transparent;/,
-  );
-});
-
-test('enhanced field boundary is stronger than control boundary', () => {
-  const css = read(CONTRAST_FILES.enhanced);
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.20)'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.34)'));
-  assert.ok(css.includes('--ax-sys-contrast-border-control: rgb(15 23 42 / 0.28)'));
-  assert.ok(css.includes('--ax-sys-contrast-border-field: rgb(15 23 42 / 0.40)'));
-});
-
-test('high contrast light and dark values exist', () => {
-  const css = read(CONTRAST_FILES.high);
-  assert.ok(css.includes('.ax-contrast-high {'));
-  assert.ok(css.includes('inset 0 0 0 1px rgb(15 23 42 / 0.75)'));
-  assert.ok(css.includes('.ax-dark.ax-contrast-high'));
-  assert.ok(css.includes('inset 0 0 0 1px rgb(255 255 255 / 0.78)'));
-  assert.ok(css.includes('.ax-dark .ax-light.ax-contrast-high'));
-});
-
-test('high control overlay is transparent; field overlay remains strong', () => {
-  const css = read(CONTRAST_FILES.high);
-  assert.match(
-    css,
-    /\.ax-contrast-high \{[\s\S]*?--ax-sys-contrast-surface-overlay-control:\s*transparent;/,
-  );
-  assert.match(
-    css,
-    /\.ax-contrast-high \{[\s\S]*?--ax-sys-contrast-surface-overlay-field:\s*rgb\(15 23 42 \/ 0\.045\);/,
-  );
-  assert.match(
-    css,
-    /\.ax-dark\.ax-contrast-high[\s\S]*?--ax-sys-contrast-surface-overlay-control:\s*transparent;/,
-  );
-  assert.ok(css.includes('--ax-sys-contrast-focus-ring:'));
-  assert.ok(css.includes('--ax-sys-contrast-focus-ring-offset:'));
-});
-
-test('high does not override appearance-owned tokens in normal mode', () => {
-  const css = read(CONTRAST_FILES.high);
-  const normalMode = css.split('@media (forced-colors: active)')[0];
-  assert.equal(normalMode.includes('--ax-sys-gradient-control-rest'), false);
-  assert.equal(normalMode.includes('--ax-sys-gradient-control-hover'), false);
-  assert.equal(normalMode.includes('--ax-sys-gradient-control-active'), false);
-  assert.equal(normalMode.includes('--ax-sys-bevel-control-rest'), false);
-  assert.equal(normalMode.includes('--ax-sys-bevel-control-hover'), false);
-  assert.equal(normalMode.includes('--ax-sys-bevel-control-active'), false);
-  assert.equal(normalMode.includes('--ax-sys-highlight-control'), false);
-  assert.equal(normalMode.includes('--ax-sys-highlight-control-subtle'), false);
-  assert.equal(normalMode.includes('--ax-sys-backdrop-filter-surface'), false);
-  assert.equal(normalMode.includes('--ax-sys-surface-fill-opacity'), false);
-  assert.equal(normalMode.includes('--ax-sys-filter-surface'), false);
-  assert.equal(normalMode.includes('--ax-sys-effect-control-rest'), false);
-  assert.equal(normalMode.includes('.ax-appearance-depth'), false);
-  assert.equal(normalMode.includes('.ax-appearance-translucent'), false);
-});
-
-test('high field boundary is stronger than enhanced field boundary', () => {
-  const enhanced = read(CONTRAST_FILES.enhanced);
-  const high = read(CONTRAST_FILES.high);
-  assert.ok(enhanced.includes('--ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.34)'));
-  assert.ok(high.includes('--ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.78)'));
-  assert.ok(enhanced.includes('--ax-sys-contrast-border-field: rgb(15 23 42 / 0.40)'));
-  assert.ok(high.includes('--ax-sys-contrast-border-field: rgb(15 23 42 / 0.78)'));
-});
-
-test('forced-colors may neutralize decorative appearance tokens', () => {
-  const high = read(CONTRAST_FILES.high);
-  const appearances = read(APPEARANCE_FILES.index);
-  assert.ok(high.includes('@media (forced-colors: active)'));
-  assert.ok(high.includes('forced-color-adjust: auto'));
-  assert.match(
-    high,
-    /@media \(forced-colors: active\)[\s\S]*?--ax-sys-gradient-control-rest:\s*none;[\s\S]*?--ax-sys-backdrop-filter-surface:\s*none;[\s\S]*?--ax-sys-surface-fill-opacity:\s*1;/,
-  );
-  assert.ok(appearances.includes('@media (forced-colors: active)'));
-  assert.ok(appearances.includes('--ax-sys-backdrop-filter-surface: none'));
-  assert.ok(appearances.includes('--ax-sys-surface-fill-opacity: 1'));
-});
-
-test('no contrast file contains @apply, component selectors, or .dark', () => {
-  for (const file of [CONTRAST_FILES.enhanced, CONTRAST_FILES.high, CONTRAST_FILES.index]) {
-    const css = read(file);
-    assert.equal(css.includes('@apply'), false, `${file} must not contain @apply`);
-    assert.equal(css.includes('ax-button'), false, `${file} must not contain component selectors`);
-    assert.doesNotMatch(css, /(^|[^a-z-])\.dark(\s|,|\{)/);
-  }
-});
-
-test('button background-image stack still includes contrast overlay via tokens', () => {
-  const css = read(COMPONENT_FILES.button);
-  assert.ok(css.includes('var(--ax-comp-button-contrast-surface-overlay-rest)'));
-  assert.ok(css.includes('var(--ax-sys-contrast-surface-overlay-control)'));
-  assert.equal(css.includes('rgb(15 23 42'), false, 'Button must not hardcode contrast colors');
-  assert.equal(css.includes('rgb(255 255 255'), false, 'Button must not hardcode contrast colors');
-  assert.doesNotMatch(css, /(^|[^a-z-])\.dark(\s|,|\{)/);
-});
-
-test('depth and translucent dark and nested light mappings exist', () => {
-  const depthCss = read(APPEARANCE_FILES.depth);
-  const translucentCss = read(APPEARANCE_FILES.translucent);
-  assert.match(depthCss, /\.ax-dark\.ax-appearance-depth[\s\S]*?--ax-sys-bevel-control-rest:/);
-  assert.match(depthCss, /\.ax-dark \.ax-light\.ax-appearance-depth[\s\S]*?--ax-sys-bevel-control-rest:/);
-  assert.match(translucentCss, /\.ax-dark\.ax-appearance-translucent/);
-});
-
-test('button consumes contrast inner-border and surface overlay tokens', () => {
-  const css = read(COMPONENT_FILES.button);
-  assert.ok(css.includes('--ax-comp-button-contrast-inner-border-rest'));
-  assert.ok(css.includes('--ax-comp-button-contrast-surface-overlay-rest'));
-  assert.ok(css.includes('var(--ax-comp-button-contrast-inner-border-rest)'));
-});
-
-test('editor invalid state uses danger contrast ring, not field border', () => {
-  const css = read(COMPONENT_FILES.editor);
-  assert.ok(css.includes('--ax-comp-editor-contrast-inner-border-invalid: var(--ax-sys-contrast-inner-border-invalid)'));
-  assert.ok(css.includes('.ax-state-error'));
-  assert.equal(css.includes('outline-danger-light'), false);
-  assert.ok(css.includes('--ax-sys-contrast-focus-ring-invalid'));
-});
-
-test('editor consumes contrast inner-border tokens via ::after ring', () => {
-  const css = read(COMPONENT_FILES.editor);
-  assert.ok(css.includes('--ax-comp-editor-contrast-inner-border-rest'));
-  assert.ok(css.includes('--ax-comp-editor-contrast-inner-border-focus'));
-  assert.ok(css.includes('--ax-comp-editor-contrast-ring'));
-  assert.ok(css.includes('var(--ax-comp-editor-contrast-ring)'));
-  assert.ok(css.includes('&::after'));
-});
-
-test('floating surfaces opt out of contrast and appearance tokens', () => {
-  const css = read(join(componentsDir, '_floating-surface.css'));
-  assert.ok(css.includes(':is(.ax-popup, ax-toast, .ax-overlay-pane, .ax-dialog)'));
-  assert.ok(css.includes('--ax-sys-contrast-inner-border-surface: 0 0 #0000'));
-  assert.ok(css.includes('--ax-sys-inner-border-surface: 0 0 #0000'));
-});
-
-test('popup, toast, and dialog overlays use theme-only visual context', () => {
-  const popup = read(join(workspaceRoot, 'packages/components/popup/src/lib/popup.service.ts'));
-  const toast = read(join(workspaceRoot, 'packages/components/toast/src/lib/toast.service.ts'));
-  const dialog = read(join(workspaceRoot, 'packages/components/dialog/src/lib/dialog.service.ts'));
-  assert.ok(popup.includes("visualContextScope: 'theme'"));
-  assert.ok(toast.includes("visualContextScope: 'theme'"));
-  assert.ok(dialog.includes("visualContextScope: 'theme'"));
-});
-
-test('dropdown popovers use theme-only visual context', () => {
-  const panel = read(join(workspaceRoot, 'packages/components/dropdown/src/lib/dropdown-panel.component.html'));
-  const box = read(join(workspaceRoot, 'packages/components/dropdown/src/lib/dropdown-box.component.html'));
-  assert.ok(panel.includes('visualContextScope="theme"'));
-  assert.ok(box.includes('visualContextScope="theme"'));
-});
-
-test('modal surface owners consume contrast boundary tokens', () => {
-  const checks = [
-    [COMPONENT_FILES.notification, '--ax-comp-notification-contrast-inner-border-rest'],
-    [COMPONENT_FILES.menu, '--ax-comp-menu-contrast-inner-border-rest'],
-    [COMPONENT_FILES.drawer, '--ax-comp-drawer-contrast-inner-border-rest'],
-    [COMPONENT_FILES.actionsheet, '--ax-comp-action-sheet-contrast-inner-border-rest'],
-  ];
-  for (const [file, token] of checks) {
-    const css = read(file);
-    assert.ok(css.includes(token), `${file} missing ${token}`);
-    assert.ok(css.includes(`var(${token})`), `${file} does not consume ${token}`);
-  }
-});
-
-test('floating shell owners still declare contrast tokens but inherit neutralized sys values', () => {
-  for (const file of [COMPONENT_FILES.dropdown, COMPONENT_FILES.popup, COMPONENT_FILES.toast, COMPONENT_FILES.dialog]) {
-    const css = read(file);
-    assert.ok(css.includes('--ax-comp-'));
-    assert.ok(css.includes('contrast-inner-border-rest'));
-    assert.ok(css.includes('var(--ax-sys-contrast-inner-border-surface)'));
-  }
-});
-
-test('focus ring utilities remain in default.css', () => {
-  const css = read(join(themesDir, 'default.css'));
-  assert.ok(css.includes('@utility ax-focus-ring'));
-  assert.ok(css.includes('@utility ax-focus-ring-editor'));
-});
-
-test('package exports contrast stylesheets including enhanced', () => {
-  const pkg = JSON.parse(read(join(workspaceRoot, 'packages/styles/package.json')));
-  assert.equal(pkg.exports['./themes/contrast'], './themes/contrast/index.css');
-  assert.equal(pkg.exports['./themes/contrast/index.css'], './themes/contrast/index.css');
-  assert.equal(pkg.exports['./themes/contrast/enhanced.css'], './themes/contrast/enhanced.css');
-  assert.equal(pkg.exports['./themes/contrast/high.css'], './themes/contrast/high.css');
-  assert.equal(pkg.exports['./themes/appearance.css'], './themes/appearance.css');
-  assert.equal(pkg.exports['./themes/appearances/depth.css'], './themes/appearances/depth.css');
-});
-
-test('showcase and documentation import contrast aggregate', () => {
-  const showcase = read(join(workspaceRoot, 'apps/showcase/src/styles.css'));
-  const documentation = read(join(workspaceRoot, 'apps/documentation/src/styles.css'));
-  const storybook = read(join(workspaceRoot, 'packages/components/.storybook/styles.css'));
-  assert.ok(showcase.includes('themes/contrast/index.css'));
-  assert.equal(showcase.includes('themes/contrast/high.css'), false, 'must not duplicate high with aggregate');
-  assert.ok(documentation.includes('themes/contrast/index.css'));
-  assert.equal(documentation.includes('themes/contrast/high.css'), false);
-  assert.ok(storybook.includes('themes/contrast/index.css'));
-});
-
-test('overlay resolver propagates and clears contrast classes including enhanced', () => {
-  const source = read(join(workspaceRoot, 'packages/cdk/overlay/src/lib/overlay-visual-context.ts'));
-  assert.ok(source.includes('CONTRAST_CLASSES'));
-  assert.ok(source.includes('ax-contrast-enhanced'));
-  assert.ok(source.includes('ax-contrast-high'));
-  assert.ok(source.includes('context.contrast'));
-});
-
-test('contrast state module validates enhanced and persisted values', () => {
-  const source = read(join(workspaceRoot, 'libs/shared/services/src/lib/contrast-document.ts'));
-  assert.ok(source.includes('acorex-showcase-contrast'));
-  assert.ok(source.includes('isValidContrast'));
-  assert.ok(source.includes("'enhanced'"));
-  assert.ok(source.includes("contrast === 'enhanced'"));
-  assert.ok(source.includes("contrast === 'high'"));
-  assert.ok(source.includes('ax-contrast-enhanced'));
-});
-
-test('header contrast options include enhanced', () => {
-  const source = read(join(workspaceRoot, 'libs/shared/components/src/lib/layout-header/layout-header.component.ts'));
-  assert.ok(source.includes("name: 'enhanced'"));
-  assert.ok(source.includes("text: 'Enhanced'"));
-});
-
-test('pre-paint initialization validates enhanced', () => {
-  const source = read(join(workspaceRoot, 'apps/showcase/src/index.html'));
-  assert.ok(source.includes('enhanced: 1'));
-  assert.ok(source.includes("contrast === 'enhanced'"));
-  assert.ok(source.includes('ax-contrast-enhanced'));
-  assert.equal(source.includes('ax-contrast-standard'), false);
-});