@astryxdesign/core 0.2.0-canary.ea693ac → 0.2.0

package/src/Token/Token.tsx

@@ -9,7 +9,6 @@
  * @position Core implementation; consumed by index.ts, tested by Token.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Token/TokenLink.tsx (interactive wrapper for href+onRemove)
  * - /packages/core/src/Token/Token.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/Token/Token.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Token/index.ts (exports if types change)
@@ -33,7 +32,6 @@ import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import {useInteractiveRole} from '../hooks/useInteractiveRole';
-import {TokenLink} from './TokenLink';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -315,9 +313,7 @@ const colorStyles = stylex.create({
  * `<span>` container with an invisible `<button>` when `onClick` is provided.
  * The invisible button pattern provides real button semantics for accessibility
  * while the container uses `:focus-within` to show focus outlines around the
- * entire token. When both `href` and `onRemove` are provided, the same
- * container pattern is used with an invisible `<a>` so the remove `<button>`
- * renders as a sibling of the link rather than nested inside it.
+ * entire token.
  *
  * @example
  * ```
@@ -354,20 +350,6 @@ export function Token({
   // if onClick was provided — the popover attaches its own handler.
   const effectiveOnClick = onClick ?? (role === 'button' ? () => {} : null);
 
-  const removeButton = onRemove != null && (
-    <button
-      type="button"
-      aria-label={t('@astryx.token.remove', {label})}
-      onClick={e => {
-        e.stopPropagation();
-        onRemove(e);
-      }}
-      disabled={isDisabled}
-      {...stylex.props(styles.removeButton)}>
-      <Icon icon="close" size="xsm" color="inherit" />
-    </button>
-  );
-
   const content = (
     <>
       {icon}
@@ -376,7 +358,19 @@ export function Token({
         {label}
       </span>
       {endContent}
-      {removeButton}
+      {onRemove != null && (
+        <button
+          type="button"
+          aria-label={t('@astryx.token.remove', {label})}
+          onClick={e => {
+            e.stopPropagation();
+            onRemove(e);
+          }}
+          disabled={isDisabled}
+          {...stylex.props(styles.removeButton)}>
+          <Icon icon="close" size="xsm" color="inherit" />
+        </button>
+      )}
     </>
   );
 
@@ -387,57 +381,11 @@ export function Token({
   };
 
   if (role === 'link') {
-    if (onRemove == null) {
-      return (
-        <LinkComponent
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          href={href as string}
-          aria-disabled={isDisabled || undefined}
-          {...sharedProps}
-          {...mergeProps(
-            themeProps('token', {color, size}),
-            stylex.props(
-              styles.base,
-              sizeStyles[size],
-              colorStyles[color],
-              styles.interactive,
-              isDisabled && styles.disabled,
-              xstyle,
-            ),
-            className,
-            style,
-          )}>
-          {content}
-        </LinkComponent>
-      );
-    }
-
-    // With a remove button, the link cannot be the root — nesting a <button>
-    // inside an <a> is invalid HTML (WCAG 4.1.2). Delegate to TokenLink, a
-    // non-presentational wrapper that renders a <span> container with the link
-    // and the remove button as siblings and wires up useClickableContainer so
-    // the whole token surface activates the link (including middle-click and
-    // cmd/ctrl-click to open in a new tab). Token itself stays presentational
-    // (no refs/effects) per the @astryx/presentational-component rule.
     return (
-      <TokenLink
-        ref={ref}
+      <LinkComponent
+        ref={ref as React.Ref<HTMLAnchorElement>}
         href={href as string}
-        isDisabled={isDisabled}
-        LinkComponent={LinkComponent}
-        icon={icon}
-        endContent={endContent}
-        removeButton={removeButton}
-        linkStyleProps={stylex.props(styles.invisibleButton)}
-        labelContent={
-          <span
-            {...stylex.props(
-              styles.label,
-              isLabelHidden && styles.labelHidden,
-            )}>
-            {label}
-          </span>
-        }
+        aria-disabled={isDisabled || undefined}
         {...sharedProps}
         {...mergeProps(
           themeProps('token', {color, size}),
@@ -446,14 +394,14 @@ export function Token({
             sizeStyles[size],
             colorStyles[color],
             styles.interactive,
-            styles.focusVisibleOutline,
             isDisabled && styles.disabled,
             xstyle,
           ),
           className,
           style,
-        )}
-      />
+        )}>
+        {content}
+      </LinkComponent>
     );
   }
 
@@ -500,7 +448,19 @@ export function Token({
           </span>
         </button>
         {endContent}
-        {removeButton}
+        {onRemove != null && (
+          <button
+            type="button"
+            aria-label={t('@astryx.token.remove', {label})}
+            onClick={e => {
+              e.stopPropagation();
+              onRemove(e);
+            }}
+            disabled={isDisabled}
+            {...stylex.props(styles.removeButton)}>
+            <Icon icon="close" size="xsm" color="inherit" />
+          </button>
+        )}
       </span>
     );
   }

package/src/Typeahead/BaseTypeahead.tsx

@@ -157,16 +157,6 @@ export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<
    */
   inputXStyle?: StyleXStyles;
 
-  /**
-   * Tab-order override for the input element. Typeahead passes `-1` while
-   * its selected-value token is shown: the input is visually collapsed
-   * (width 0 / opacity 0) but must stay programmatically focusable for
-   * token edit/clear interactions, so removing it from the Tab order is
-   * what prevents an invisible tab stop (WCAG 2.4.3 / 2.4.7). The input
-   * remains focusable via `.focus()` regardless of this value.
-   */
-  inputTabIndex?: number;
-
   /**
    * Ref to the anchor element for dropdown positioning.
    * The dropdown will be positioned relative to this element.
@@ -326,7 +316,6 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   ariaDescribedBy,
   ariaLabelledBy,
   inputXStyle,
-  inputTabIndex,
   anchorRef,
   onKeyDown: externalOnKeyDown,
   debounceMs = 150,
@@ -759,7 +748,6 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         aria-describedby={ariaDescribedBy}
         aria-labelledby={ariaLabelledBy}
         aria-disabled={isFocusableDisabled ? 'true' : undefined}
-        tabIndex={inputTabIndex}
         value={query}
         onChange={handleInputChange}
         onPointerDown={() => {

package/src/Typeahead/Typeahead.test.tsx

@@ -737,68 +737,6 @@ describe('Typeahead edit mode', () => {
   });
 });
 
-describe('Typeahead collapsed input tab order', () => {
-  it('removes the invisible input from the Tab order while a token is shown', () => {
-    render(
-      <Typeahead
-        label="Fruit"
-        searchSource={fruitSource}
-        value={fruits[0]}
-        onChange={() => {}}
-      />,
-    );
-    // While the token is shown the input is collapsed (width 0 / opacity 0);
-    // it must stay programmatically focusable for token interactions but must
-    // not be an invisible Tab stop (WCAG 2.4.3 / 2.4.7).
-    expect(screen.getByRole('combobox')).toHaveAttribute('tabindex', '-1');
-  });
-
-  it('Tab from the token skips the invisible input', async () => {
-    const user = userEvent.setup();
-    render(
-      <Typeahead
-        label="Fruit"
-        searchSource={fruitSource}
-        value={fruits[0]}
-        onChange={() => {}}
-      />,
-    );
-    // Focus the token's internal button, then Tab away — focus must not land
-    // on the visually hidden combobox input.
-    const tokenButton = screen.getByRole('button', {name: fruits[0].label});
-    tokenButton.focus();
-    await user.tab();
-    expect(screen.getByRole('combobox')).not.toHaveFocus();
-  });
-
-  it('keeps the input in the Tab order when no token is shown', () => {
-    render(
-      <Typeahead
-        label="Fruit"
-        searchSource={fruitSource}
-        value={null}
-        onChange={() => {}}
-      />,
-    );
-    expect(screen.getByRole('combobox')).not.toHaveAttribute('tabindex');
-  });
-
-  it('restores the input to the Tab order in edit mode', () => {
-    render(
-      <Typeahead
-        label="Fruit"
-        searchSource={fruitSource}
-        value={fruits[0]}
-        onChange={() => {}}
-      />,
-    );
-    // Entering edit mode removes the token and uncollapses the input
-    const tokenText = screen.getByText(fruits[0].label);
-    fireEvent.click(tokenText.closest('div')!);
-    expect(screen.getByRole('combobox')).not.toHaveAttribute('tabindex');
-  });
-});
-
 describe('BaseTypeahead paste behavior', () => {
   it('pasting text triggers search results like typing', async () => {
     const user = userEvent.setup();

package/src/Typeahead/Typeahead.tsx

@@ -467,12 +467,6 @@ export function Typeahead<T extends SearchableItem>({
           anchorRef={wrapperRef}
           onKeyDown={handleKeyDown}
           inputXStyle={showToken ? styles.inputHidden : undefined}
-          // While the token is shown the input is collapsed (width 0 /
-          // opacity 0) — take it out of the Tab order so keyboard users
-          // don't hit an invisible stop (WCAG 2.4.3 / 2.4.7). It stays
-          // programmatically focusable: entering edit mode and clearing
-          // both refocus it after it uncollapses.
-          inputTabIndex={showToken ? -1 : undefined}
           size={size}
         />
         {hasClear && value && !isDisabled && (

package/src/hooks/useKeyboardHint.test.tsx

@@ -9,7 +9,6 @@
 import {render} from '@testing-library/react';
 import {describe, expect, it} from 'vitest';
 import {useKeyboardHint, type KeyboardHintOrientation} from './useKeyboardHint';
-import {InternationalizationProvider} from '../i18n';
 
 function TestHint({orientation}: {orientation?: KeyboardHintOrientation}) {
   const {hintElement} = useKeyboardHint({orientation});
@@ -68,25 +67,4 @@ describe('useKeyboardHint', () => {
 
     expect(hint.className).toContain('useKeyboardHint__styles.hint');
   });
-
-  it('renders the "to navigate" label from the i18n catalog', () => {
-    const {container} = render(<TestHint />);
-    const hint = container.querySelector('[popover="manual"]') as HTMLElement;
-
-    expect(hint.textContent).toContain('to navigate');
-  });
-
-  it('localizes the "to navigate" label through the i18n catalog', () => {
-    const {container} = render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{fr: {'@astryx.keyboardHint.toNavigate': 'pour naviguer'}}}>
-        <TestHint />
-      </InternationalizationProvider>,
-    );
-    const hint = container.querySelector('[popover="manual"]') as HTMLElement;
-
-    expect(hint.textContent).toContain('pour naviguer');
-    expect(hint.textContent).not.toContain('to navigate');
-  });
 });

package/src/hooks/useKeyboardHint.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file useKeyboardHint.tsx
- * @input Uses React, StyleX, Kbd, useLayer, i18n (useTranslator)
+ * @input Uses React, StyleX, Kbd, useLayer
  * @output Exports useKeyboardHint hook — ephemeral arrow-key navigation hint
  * @position Core hook; shows sighted keyboard users how to navigate composite
  *   widgets that use roving tabindex (single Tab stop, arrows inside)
@@ -27,7 +27,6 @@ import {
 } from '../theme/tokens.stylex';
 import {Kbd} from '../Kbd';
 import {useLayer} from '../Layer/useLayer';
-import {useTranslator} from '../i18n';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -180,7 +179,6 @@ export function useKeyboardHint(
     isEnabled = true,
   } = options;
 
-  const t = useTranslator();
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const dismissedRef = useRef(false);
   const isVisibleRef = useRef(false);
@@ -318,9 +316,7 @@ export function useKeyboardHint(
   const hintElement = layer.render(
     <span aria-hidden="true">
       {arrowContent}
-      <span {...stylex.props(styles.label)}>
-        {t('@astryx.keyboardHint.toNavigate')}
-      </span>
+      <span {...stylex.props(styles.label)}>to navigate</span>
     </span>,
     {
       placement: 'below',

package/dist/Token/TokenLink.d.ts

@@ -1,62 +0,0 @@
-/**
- * @file TokenLink.tsx
- * @input Rendered token pieces (icon, label, endContent, remove button) plus
- *   container/link styling props and the resolved LinkComponent
- * @output Exports TokenLink, the interactive container for the href+onRemove Token variant
- * @position Internal to Token; keeps Token.tsx presentational
- *
- * Token is a presentational component (see
- * /internal/eslint-plugin-astryx/presentational-component.js) and must not use
- * refs or effects. When a Token has both `href` and `onRemove`, the remove
- * <button> must be a sibling of the link (nesting a button inside an anchor is
- * invalid HTML — WCAG 4.1.2), so the surface becomes a clickable container that
- * delegates to an inner link. That delegation needs refs, so it lives here.
- *
- * useClickableContainer gives the container middle-click and cmd/ctrl-click
- * open-in-new-tab behavior for the link, ignores clicks on nested interactive
- * elements (the remove button), and skips activation during text selection.
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Token/Token.tsx (renders TokenLink for the href+onRemove case)
- * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
- */
-import type { ReactNode, CSSProperties, Ref, HTMLAttributes } from 'react';
-import type { LinkComponentType } from '../Link/types';
-export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
-    /** Ref forwarded to the container element. */
-    ref?: Ref<HTMLElement>;
-    /** Link URL. */
-    href: string;
-    /** Whether the token is disabled. */
-    isDisabled: boolean;
-    /** Resolved link component (native `<a>` or a router link). */
-    LinkComponent: LinkComponentType;
-    /** `stylex.props()` output applied to the invisible inner link. */
-    linkStyleProps: {
-        className?: string;
-        style?: CSSProperties;
-    };
-    /** Visible (or visually hidden) label node rendered inside the link. */
-    labelContent: ReactNode;
-    /** Optional leading icon. */
-    icon?: ReactNode;
-    /** Content rendered after the label, before the remove button. */
-    endContent?: ReactNode;
-    /** The remove button node, rendered as a sibling of the link. */
-    removeButton: ReactNode;
-    /** Allow data-* attributes (e.g. data-testid, theme targets) on the container. */
-    [dataAttr: `data-${string}`]: unknown;
-}
-/**
- * Interactive container for a Token that is both a link and removable.
- *
- * Renders a `<span>` wrapping an invisible inner link and the remove button as
- * siblings. useClickableContainer delegates clicks on the surface to the link
- * (including middle-click / cmd+click to open in a new tab) while the remove
- * button keeps handling its own clicks.
- */
-export declare function TokenLink({ ref, href, isDisabled, LinkComponent, linkStyleProps, labelContent, icon, endContent, removeButton, ...containerProps }: TokenLinkProps): import("react").JSX.Element;
-export declare namespace TokenLink {
-    var displayName: string;
-}
-//# sourceMappingURL=TokenLink.d.ts.map

package/dist/Token/TokenLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenLink.d.ts","sourceRoot":"","sources":["../../src/Token/TokenLink.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAE,aAAa,EAAE,GAAG,EAAE,cAAc,EAAC,MAAM,OAAO,CAAC;AAIzE,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjE,8CAA8C;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,gBAAgB;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,UAAU,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,aAAa,EAAE,iBAAiB,CAAC;IACjC,mEAAmE;IACnE,cAAc,EAAE;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAC,CAAC;IAC5D,wEAAwE;IACxE,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iEAAiE;IACjE,YAAY,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,CAAC,QAAQ,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,IAAI,EACJ,UAAU,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,GAAG,cAAc,EAClB,EAAE,cAAc,+BA6BhB;yBAxCe,SAAS"}

package/dist/Token/TokenLink.js

@@ -1,76 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file TokenLink.tsx
- * @input Rendered token pieces (icon, label, endContent, remove button) plus
- *   container/link styling props and the resolved LinkComponent
- * @output Exports TokenLink, the interactive container for the href+onRemove Token variant
- * @position Internal to Token; keeps Token.tsx presentational
- *
- * Token is a presentational component (see
- * /internal/eslint-plugin-astryx/presentational-component.js) and must not use
- * refs or effects. When a Token has both `href` and `onRemove`, the remove
- * <button> must be a sibling of the link (nesting a button inside an anchor is
- * invalid HTML — WCAG 4.1.2), so the surface becomes a clickable container that
- * delegates to an inner link. That delegation needs refs, so it lives here.
- *
- * useClickableContainer gives the container middle-click and cmd/ctrl-click
- * open-in-new-tab behavior for the link, ignores clicks on nested interactive
- * elements (the remove button), and skips activation during text selection.
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Token/Token.tsx (renders TokenLink for the href+onRemove case)
- * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
- */
-import { useRef } from 'react';
-import { mergeRefs } from "../utils/index.js";
-import { useClickableContainer } from "../hooks/useClickableContainer.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Interactive container for a Token that is both a link and removable.
- *
- * Renders a `<span>` wrapping an invisible inner link and the remove button as
- * siblings. useClickableContainer delegates clicks on the surface to the link
- * (including middle-click / cmd+click to open in a new tab) while the remove
- * button keeps handling its own clicks.
- */
-export function TokenLink({
-  ref,
-  href,
-  isDisabled,
-  LinkComponent,
-  linkStyleProps,
-  labelContent,
-  icon,
-  endContent,
-  removeButton,
-  ...containerProps
-}) {
-  const containerRef = useRef(null);
-  const linkRef = useRef(null);
-  const {
-    onClick,
-    onMouseUp
-  } = useClickableContainer({
-    containerRef,
-    interactiveRef: linkRef,
-    href,
-    disabled: isDisabled
-  });
-  return /*#__PURE__*/_jsxs("span", {
-    ref: mergeRefs(ref, containerRef),
-    onClick: isDisabled ? undefined : onClick,
-    onMouseUp: isDisabled ? undefined : onMouseUp,
-    ...containerProps,
-    children: [icon, /*#__PURE__*/_jsx(LinkComponent, {
-      ref: linkRef,
-      href: href,
-      "aria-disabled": isDisabled || undefined,
-      ...linkStyleProps,
-      children: labelContent
-    }), endContent, removeButton]
-  });
-}
-TokenLink.displayName = 'TokenLink';

package/src/Token/TokenLink.tsx

@@ -1,107 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file TokenLink.tsx
- * @input Rendered token pieces (icon, label, endContent, remove button) plus
- *   container/link styling props and the resolved LinkComponent
- * @output Exports TokenLink, the interactive container for the href+onRemove Token variant
- * @position Internal to Token; keeps Token.tsx presentational
- *
- * Token is a presentational component (see
- * /internal/eslint-plugin-astryx/presentational-component.js) and must not use
- * refs or effects. When a Token has both `href` and `onRemove`, the remove
- * <button> must be a sibling of the link (nesting a button inside an anchor is
- * invalid HTML — WCAG 4.1.2), so the surface becomes a clickable container that
- * delegates to an inner link. That delegation needs refs, so it lives here.
- *
- * useClickableContainer gives the container middle-click and cmd/ctrl-click
- * open-in-new-tab behavior for the link, ignores clicks on nested interactive
- * elements (the remove button), and skips activation during text selection.
- *
- * SYNC: When modified, update these files to stay in sync:
- * - /packages/core/src/Token/Token.tsx (renders TokenLink for the href+onRemove case)
- * - /packages/core/src/Token/Token.test.tsx (tests for delegated behavior)
- */
-
-import type {ReactNode, CSSProperties, Ref, HTMLAttributes} from 'react';
-import {useRef} from 'react';
-import {mergeRefs} from '../utils';
-import {useClickableContainer} from '../hooks/useClickableContainer';
-import type {LinkComponentType} from '../Link/types';
-
-export interface TokenLinkProps extends HTMLAttributes<HTMLElement> {
-  /** Ref forwarded to the container element. */
-  ref?: Ref<HTMLElement>;
-  /** Link URL. */
-  href: string;
-  /** Whether the token is disabled. */
-  isDisabled: boolean;
-  /** Resolved link component (native `<a>` or a router link). */
-  LinkComponent: LinkComponentType;
-  /** `stylex.props()` output applied to the invisible inner link. */
-  linkStyleProps: {className?: string; style?: CSSProperties};
-  /** Visible (or visually hidden) label node rendered inside the link. */
-  labelContent: ReactNode;
-  /** Optional leading icon. */
-  icon?: ReactNode;
-  /** Content rendered after the label, before the remove button. */
-  endContent?: ReactNode;
-  /** The remove button node, rendered as a sibling of the link. */
-  removeButton: ReactNode;
-  /** Allow data-* attributes (e.g. data-testid, theme targets) on the container. */
-  [dataAttr: `data-${string}`]: unknown;
-}
-
-/**
- * Interactive container for a Token that is both a link and removable.
- *
- * Renders a `<span>` wrapping an invisible inner link and the remove button as
- * siblings. useClickableContainer delegates clicks on the surface to the link
- * (including middle-click / cmd+click to open in a new tab) while the remove
- * button keeps handling its own clicks.
- */
-export function TokenLink({
-  ref,
-  href,
-  isDisabled,
-  LinkComponent,
-  linkStyleProps,
-  labelContent,
-  icon,
-  endContent,
-  removeButton,
-  ...containerProps
-}: TokenLinkProps) {
-  const containerRef = useRef<HTMLElement | null>(null);
-  const linkRef = useRef<HTMLElement | null>(null);
-
-  const {onClick, onMouseUp} = useClickableContainer({
-    containerRef,
-    interactiveRef: linkRef,
-    href,
-    disabled: isDisabled,
-  });
-
-  return (
-    <span
-      ref={mergeRefs(ref, containerRef)}
-      onClick={isDisabled ? undefined : onClick}
-      onMouseUp={isDisabled ? undefined : onMouseUp}
-      {...containerProps}>
-      {icon}
-      <LinkComponent
-        ref={linkRef as Ref<HTMLAnchorElement>}
-        href={href}
-        aria-disabled={isDisabled || undefined}
-        {...linkStyleProps}>
-        {labelContent}
-      </LinkComponent>
-      {endContent}
-      {removeButton}
-    </span>
-  );
-}
-
-TokenLink.displayName = 'TokenLink';

package/src/__tests__/forcedColors.ts

@@ -1,60 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file forcedColors.ts
- * @input Uses the jsdom document (StyleX dev runtime injects rules into it)
- * @output Exports getForcedColorsRules, getAllInjectedCss test helpers
- * @position Shared test utility for asserting forced-colors style output
- *
- * jsdom cannot emulate `@media (forced-colors: active)` rendering, so
- * component tests assert the next-best thing: that the StyleX dev runtime
- * (runtimeInjection in vitest.config.ts) actually injected the forced-colors
- * rules a component relies on for Windows High Contrast support (WCAG 1.4.11).
- * Visual behavior needs manual verification in a forced-colors environment.
- */
-
-/**
- * Collects the cssText of every injected CSS rule scoped to
- * `@media (forced-colors: active)`, including rules nested in other
- * conditions. Returns one string for substring assertions.
- */
-export function getForcedColorsRules(): string {
-  const chunks: string[] = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRule[];
-    try {
-      rules = Array.from(sheet.cssRules);
-    } catch {
-      continue;
-    }
-    for (const rule of rules) {
-      if (rule.cssText.includes('forced-colors: active')) {
-        chunks.push(rule.cssText);
-      }
-    }
-  }
-  return chunks.join('\n');
-}
-
-/**
- * Collects the cssText of every injected CSS rule, regardless of condition.
- * Use to assert declarations that live OUTSIDE `@media (forced-colors: active)`
- * yet still exist for forced-colors support — e.g. `forced-color-adjust: none`
- * (an unconditional declaration) or a hover tint gated behind
- * `(forced-colors: none)` so it cannot override the forced-colors state.
- */
-export function getAllInjectedCss(): string {
-  const chunks: string[] = [];
-  for (const sheet of Array.from(document.styleSheets)) {
-    let rules: CSSRule[];
-    try {
-      rules = Array.from(sheet.cssRules);
-    } catch {
-      continue;
-    }
-    for (const rule of rules) {
-      chunks.push(rule.cssText);
-    }
-  }
-  return chunks.join('\n');
-}