@astryxdesign/core 0.7.2-canary.55d8dff → 0.7.2-canary.577a62e

package/src/reset.a11y.chromium.spec.ts

@@ -4,7 +4,8 @@
  * @file reset.a11y.chromium.spec.ts
  * @input packages/core/src/reset.css, alone on a blank Chromium page
  * @output Browser evidence that the reset reaches ::before, ::after,
- *   ::placeholder and the search field's cancel button
+ *   ::placeholder, the search field's cancel button and the dropdown marker
+ *   of a field with a list
  * @position reset.css integration proof. A pseudo-element inside :where() is
  *   invalid, and the forgiving list drops it without an error, so only a
  *   shipping engine shows which of the reset's rules still match.
@@ -13,6 +14,8 @@
 import * as fs from 'node:fs';
 import {fileURLToPath} from 'node:url';
 import {expect, test, type Page} from '@playwright/test';
+// @ts-expect-error -- pngjs ships no declarations; runtime support is pinned.
+import {PNG} from 'pngjs';
 
 const RESET_CSS = fs.readFileSync(
   fileURLToPath(new URL('./reset.css', import.meta.url)),
@@ -154,6 +157,54 @@ test('a search field has no cancel button to clear it', async ({page}) => {
   await expect(query).toHaveValue('query');
 });
 
+test('the dropdown marker of a field with a list sits in its middle', async ({
+  page,
+}) => {
+  // Chromium shows the marker while the pointer is over the field and draws
+  // it as a glyph set on the field's line-height, the 1.5 the reset inherits.
+  await page.evaluate(() => {
+    const field = document.createElement('input');
+    field.id = 'fruit';
+    field.setAttribute('list', 'fruits');
+    const options = document.createElement('datalist');
+    options.id = 'fruits';
+    options.append(new Option('Apple'));
+    document.body.append(field, options);
+  });
+  await page.addStyleTag({
+    content: `
+      #fruit {
+        display: block;
+        width: 240px;
+        padding: 7px 11px;
+        border: 1px solid;
+        line-height: 1.5;
+      }
+    `,
+  });
+  const field = page.locator('#fruit');
+  await field.hover();
+  const png = PNG.sync.read(await field.screenshot({caret: 'hide'}));
+  // The marker is the only ink in the field's last 32px, inside the border.
+  const inkRows: number[] = [];
+  for (let y = 2; y < png.height - 2; y++) {
+    for (let x = png.width - 32; x < png.width - 2; x++) {
+      const offset = (y * png.width + x) * 4;
+      const luminance =
+        (png.data[offset] + png.data[offset + 1] + png.data[offset + 2]) / 3;
+      if (luminance < 160) {
+        inkRows.push(y);
+        break;
+      }
+    }
+  }
+  expect(inkRows.length, 'the hovered field shows its marker').toBeGreaterThan(
+    0,
+  );
+  const markerMiddle = (inkRows[0] + inkRows[inkRows.length - 1] + 1) / 2;
+  expect(Math.abs(markerMiddle - png.height / 2)).toBeLessThanOrEqual(1);
+});
+
 test('a later layer and an unlayered rule still override the reset', async ({
   page,
 }) => {

package/src/reset.css

@@ -265,6 +265,15 @@
     color: var(--color-text-secondary, light-dark(#4E606F, #AAAFB5));
   }
 
+  /*
+   * Chromium draws the dropdown marker of a field with a `list` as a glyph
+   * set on the line-height the field inherits, so with any line-height above
+   * 1 the marker sits below the middle of the field.
+   */
+  :where([list])::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
   /*
    * Remove the inner padding and cancel buttons in search inputs
    * for Chrome and Safari.

package/src/reset.test.ts

@@ -172,6 +172,17 @@ describe('reset.css pseudo-element rules', () => {
     ).toBe(true);
   });
 
+  it('sets the dropdown marker of a field with a list on a single line', () => {
+    const marker = ruleBlocks.filter(({selector}) =>
+      topLevelSelectors(selector).some(entry =>
+        entry.endsWith('::-webkit-calendar-picker-indicator'),
+      ),
+    );
+    expect(marker.map(({body}) => body).join('\n')).toMatch(
+      /line-height:\s*1;/,
+    );
+  });
+
   it('falls back to the --color-text-secondary default for placeholders', () => {
     // A page that loads only the reset never defines the token. The fallback
     // repeats the token's own default, so that page shows the placeholder an

package/src/unicodePropertyEscapes.source-build.test.mjs

@@ -0,0 +1,69 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file unicodePropertyEscapes.source-build.test.mjs
+ * @input Every Core source module a bundler compiles (tests and stories
+ *   excluded)
+ * @output Fails when a module writes a Unicode property escape (`\p{…}` or
+ *   `\P{…}`) as a regular expression literal
+ * @position Guard for source builds: for targets without property escapes, or
+ *   with no browserslist, Babel rewrites such a literal, and the copy bundled
+ *   with Next.js lacks the Unicode data to do it, so the build fails with
+ *   "Unknown property". Modules build these expressions at runtime instead,
+ *   as NumberInput/numberParser.ts does.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {parseSync} from '@babel/core';
+import {describe, expect, it} from 'vitest';
+
+const SRC = path.dirname(fileURLToPath(import.meta.url));
+const SKIPPED = /\.(test|stories)\.tsx?$|\.d\.ts$/;
+
+function sourceFiles(dir) {
+  return fs.readdirSync(dir, {withFileTypes: true}).flatMap(entry => {
+    const file = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      return entry.name === '__tests__' ? [] : sourceFiles(file);
+    }
+    return /\.tsx?$/.test(entry.name) && !SKIPPED.test(entry.name)
+      ? [file]
+      : [];
+  });
+}
+
+/** Every regular expression literal in a parsed tree. */
+function regexLiterals(node, found = []) {
+  if (node == null || typeof node !== 'object') return found;
+  if (node.type === 'RegExpLiteral') found.push(node);
+  for (const [key, value] of Object.entries(node)) {
+    if (key !== 'loc' && key !== 'extra') regexLiterals(value, found);
+  }
+  return found;
+}
+
+describe('Core regular expressions in source builds', () => {
+  it('writes no Unicode property escape as a regex literal', () => {
+    const offenders = [];
+    for (const file of sourceFiles(SRC)) {
+      const source = fs.readFileSync(file, 'utf8');
+      if (!/\\[pP]\{/.test(source)) continue;
+      const ast = parseSync(source, {
+        filename: file,
+        babelrc: false,
+        configFile: false,
+        parserOpts: {plugins: ['typescript', 'jsx']},
+      });
+      for (const literal of regexLiterals(ast)) {
+        if (/\\[pP]\{/.test(literal.pattern)) {
+          offenders.push(
+            `${path.relative(SRC, file)}:${literal.loc.start.line} /${literal.pattern}/${literal.flags}`,
+          );
+        }
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
+});