@astryxdesign/core 0.7.4 → 0.7.5-canary.04434e7

package/src/VisuallyHidden/VisuallyHidden.test.tsx

@@ -12,6 +12,7 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {createRef} from 'react';
+import * as stylex from '@stylexjs/stylex';
 import {VisuallyHidden} from './VisuallyHidden';
 
 describe('VisuallyHidden', () => {
@@ -64,6 +65,44 @@ describe('VisuallyHidden', () => {
     expect(el).toHaveAttribute('role', 'status');
   });
 
+  it('does not forward the styling props its own contract omits', () => {
+    // `className` and `style` are off the interface, and they are reached here
+    // through an untyped spread, which is how they get past the `Omit` in
+    // practice: a cast, a `{...consumerProps}` object, or plain JavaScript. The
+    // type is only the first line of defence here.
+    const stylingProps: Record<string, unknown> = {
+      xstyle: {color: 'red'},
+      className: 'consumer-track',
+      style: {position: 'static'},
+    };
+    render(<VisuallyHidden {...stylingProps}>Hidden</VisuallyHidden>);
+    const el = screen.getByText('Hidden');
+
+    // VisuallyHidden documents itself as styling-free and its clip block as
+    // non-overridable, but the implementation spreads leftover props onto the
+    // element: `xstyle` reaches the DOM as the literal string "[object Object]",
+    // and a cast `style` wins the last-word race for `position`, un-hiding the
+    // node (or clipping real content) while keeping the a11y semantics.
+    expect(el).not.toHaveAttribute('xstyle');
+    expect(el.getAttribute('class') ?? '').not.toContain('consumer-track');
+    expect(el.getAttribute('style') ?? '').not.toContain('static');
+  });
+
+  it('still accepts a typed xstyle, and ignores it', () => {
+    // Released 0.7.2 accepted `xstyle` through `BaseProps`, so narrowing it out
+    // of `VisuallyHiddenProps` would make code that compiles today stop
+    // compiling. It stays declared and documented as ignored, and the runtime
+    // drop is what keeps the stray attribute off the element. Written as a typed
+    // prop on purpose: this line is the tripwire if the interface is ever
+    // narrowed early.
+    const overrides = stylex.create({tint: {color: 'red'}});
+    render(<VisuallyHidden xstyle={overrides.tint}>Hidden</VisuallyHidden>);
+    const el = screen.getByText('Hidden');
+
+    expect(el).not.toHaveAttribute('xstyle');
+    expect(el.getAttribute('style') ?? '').not.toContain('color');
+  });
+
   it('gives an icon-only control an accessible name', () => {
     render(
       <button type="button">

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -16,14 +16,23 @@
 
 import {createElement, type ElementType, type ReactNode, type Ref} from 'react';
 import type {BaseProps} from '../BaseProps';
+import type {StyleXStyles} from '@stylexjs/stylex';
 import * as stylex from '@stylexjs/stylex';
 
 /**
  * VisuallyHidden is deliberately styling-free: it exists to *not* be seen, so it
- * intentionally omits `xstyle`/`className`/`style`. The clip block is fixed and
- * non-overridable — styling a visually-hidden node is always a mistake. The
- * accessibility pass-throughs from `BaseProps` (`aria-*`, `role`, `id`,
- * `data-*`, event handlers) remain, since the live-region use case needs them.
+ * omits `className`/`style` and applies a fixed, non-overridable clip block —
+ * styling a visually-hidden node is always a mistake. The accessibility
+ * pass-throughs from `BaseProps` (`aria-*`, `role`, `id`, `data-*`, event
+ * handlers) remain, since the live-region use case needs them.
+ *
+ * `xstyle` stays declared and documented as ignored, because released 0.7.2
+ * accepted it through `BaseProps`: narrowing the interface would force every
+ * consumer to edit code, which is a `[breaking]` change for a planned minor
+ * (`spec:AST-017/FR53`). It carries no `@deprecated` marker either — under
+ * `spec:AST-017/FR28` a patch may only deprecate a surface it ships an exact
+ * migration for, and this fix ships none. Dropping the prop from the interface,
+ * with the migration being to delete it, belongs to a planned minor.
  */
 export interface VisuallyHiddenProps extends Omit<
   BaseProps<HTMLElement>,
@@ -44,6 +53,16 @@ export interface VisuallyHiddenProps extends Omit<
    * @default 'span'
    */
   as?: ElementType;
+
+  /**
+   * Ignored: VisuallyHidden has no styling surface. The clip block is the only
+   * style applied, and nothing a caller passes can displace it.
+   *
+   * Accepted only so that code written against 0.7.2 keeps compiling. It is not
+   * applied to the element, and a planned minor removes it — the migration is to
+   * delete the prop.
+   */
+  xstyle?: StyleXStyles;
 }
 
 const styles = stylex.create({
@@ -90,8 +109,22 @@ export function VisuallyHidden({
   children,
   as: element = 'span',
   ref,
-  ...props
+  ...rest
 }: VisuallyHiddenProps) {
+  // `className` and `style` are off the interface, and the ignored `xstyle`
+  // is off by intent. Take all three back off at runtime so a cast cannot reach
+  // the element either: `xstyle` is not a valid attribute, so spreading it writes
+  // xstyle="[object Object]" into the DOM, and a cast `style` keeps the last word
+  // on `position` and un-hides the node.
+  const {
+    xstyle: _xstyle,
+    className: _className,
+    style: _style,
+    ...props
+  } = rest as typeof rest & {
+    className?: unknown;
+    style?: unknown;
+  };
   return createElement(
     element,
     {

package/src/theme/tokens.test.ts

@@ -8,6 +8,8 @@ import {
   tokenVar,
   tokenVars,
 } from './tokens';
+import {colorDefaults} from './tokens.stylex';
+import {domainTokenDefaults} from './domainTokens';
 
 const testTheme = defineTheme({
   name: 'test',
@@ -329,3 +331,61 @@ describe('focus outline tokens', () => {
     expect(tokens['--focus-outline-offset']).toBe('0px');
   });
 });
+
+// INV10 governs only the colour tokens Astryx defines. The check reads Astryx's
+// own defaults, never consumer, application, or theme-author variables.
+describe('colour token name grammar (architecture:theme-tokens INV10)', () => {
+  const property = '(?:text|icon|background|border)';
+  const intent = '(?:accent|neutral|info|success|warning|error)';
+  const hue = '(?:blue|cyan|gray|green|orange|pink|purple|red|teal|yellow)';
+  const emphasis = '(?:primary|secondary|disabled|emphasized)';
+  const surface = '(?:surface|body|card|popover|muted|inverted)';
+  const variant = '(?:-(?:muted|emphasized|hover|pressed|inverted))?';
+  const shapes = [
+    // 1 and 3: property first, then role, then an optional variant.
+    `^--color-${property}-(?:${emphasis}|${intent}|${surface}|${hue})${variant}$`,
+    // 2 and 3: the intent's own colour, then an optional variant.
+    `^--color-${intent}${variant}$`,
+    // 4: content on a fill.
+    `^--color-on-(?:${intent}${variant}|dark|light)$`,
+    // 5: domain layers.
+    '^--color-(?:data|syntax)-[a-z0-9-]+$',
+  ].map(source => new RegExp(source));
+  const utilityNames = new Set([
+    '--color-border',
+    '--color-overlay',
+    '--color-overlay-hover',
+    '--color-overlay-pressed',
+    '--color-shadow',
+    '--color-skeleton',
+    '--color-track',
+    '--color-tint-hover',
+  ]);
+  const colourNames = [
+    ...Object.keys(colorDefaults),
+    ...Object.keys(domainTokenDefaults),
+  ].filter(name => name.startsWith('--color-'));
+
+  it('checks a non-empty colour vocabulary', () => {
+    expect(colourNames.length).toBeGreaterThan(50);
+  });
+
+  it('gives every colour token Astryx defines one of the five shapes', () => {
+    const misfits = colourNames.filter(
+      name =>
+        !utilityNames.has(name) && !shapes.some(shape => shape.test(name)),
+    );
+    expect(misfits).toEqual([]);
+  });
+
+  it('rejects names outside the grammar', () => {
+    for (const name of [
+      '--color-status-foreground-success',
+      '--color-success-text',
+      '--color-foreground-error',
+      '--color-success-on',
+    ]) {
+      expect(shapes.some(shape => shape.test(name))).toBe(false);
+    }
+  });
+});