@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/src/Token/Token.test.tsx

@@ -13,6 +13,7 @@ import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Token} from './Token';
+import type {TokenColor} from './Token';
 
 describe('Token', () => {
   it('renders with label', () => {
@@ -51,6 +52,23 @@ describe('Token', () => {
     }
   });
 
+  it('reflects a custom (theme-augmented) color as a class and data attribute', () => {
+    // Themes extend TokenColorMap via module augmentation and supply the
+    // styling through generated theme CSS; the runtime just forwards the
+    // value as the stable class + data-color reflection so the theme
+    // selector can match. Cast simulates a consumer-augmented color.
+    render(
+      <Token
+        label="Brand"
+        color={'brand' as TokenColor}
+        data-testid="token-custom"
+      />,
+    );
+    const token = screen.getByTestId('token-custom');
+    expect(token).toHaveClass('astryx-token', 'brand');
+    expect(token).toHaveAttribute('data-color', 'brand');
+  });
+
   it('renders as a span with invisible button when onClick is provided', () => {
     const handleClick = vi.fn();
     render(
@@ -135,10 +153,7 @@ describe('Token', () => {
 
   it('renders endContent', () => {
     render(
-      <Token
-        label="Token"
-        endContent={<span data-testid="end">End</span>}
-      />,
+      <Token label="Token" endContent={<span data-testid="end">End</span>} />,
     );
     expect(screen.getByTestId('end')).toBeInTheDocument();
     expect(screen.getByText('End')).toBeInTheDocument();
@@ -241,12 +256,7 @@ describe('Token accessibility', () => {
 
   it('disables both buttons when isDisabled is true', () => {
     render(
-      <Token
-        label="Token"
-        onClick={() => {}}
-        onRemove={() => {}}
-        isDisabled
-      />,
+      <Token label="Token" onClick={() => {}} onRemove={() => {}} isDisabled />,
     );
     const buttons = screen.getAllByRole('button');
     for (const button of buttons) {
@@ -320,6 +330,151 @@ describe('Token accessibility', () => {
   });
 });
 
+describe('Token link with remove button', () => {
+  it('does not nest the remove button inside the link', () => {
+    render(<Token label="Tag" href="/test" onRemove={() => {}} />);
+    const link = screen.getByRole('link', {name: 'Tag'});
+    const removeButton = screen.getByRole('button', {name: 'Remove Tag'});
+    expect(link.contains(removeButton)).toBe(false);
+  });
+
+  it('keeps the link keyboard-focusable and fires onRemove from the sibling button', async () => {
+    const user = userEvent.setup();
+    const handleRemove = vi.fn();
+    render(<Token label="Tag" href="/test" onRemove={handleRemove} />);
+
+    const link = screen.getByRole('link', {name: 'Tag'});
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', '/test');
+
+    // Tab reaches the link first, then the remove button
+    await user.tab();
+    expect(link).toHaveFocus();
+    await user.tab();
+    const removeButton = screen.getByRole('button', {name: 'Remove Tag'});
+    expect(removeButton).toHaveFocus();
+
+    // Activating the remove button fires onRemove without involving the link
+    await user.keyboard('{Enter}');
+    expect(handleRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('wrapper structure matches the onClick branch pattern', () => {
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={() => {}}
+        data-testid="link-token"
+      />,
+    );
+    render(
+      <Token
+        label="Tag"
+        onClick={() => {}}
+        onRemove={() => {}}
+        data-testid="click-token"
+      />,
+    );
+
+    const linkRoot = screen.getByTestId('link-token');
+    const clickRoot = screen.getByTestId('click-token');
+
+    // Both render a <span> container with the same visual classes
+    expect(linkRoot.tagName).toBe('SPAN');
+    expect(linkRoot.className).toBe(clickRoot.className);
+  });
+
+  it('clicking the container activates the link', () => {
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={() => {}}
+        icon={<span data-testid="icon">★</span>}
+        data-testid="link-token"
+      />,
+    );
+    const link = screen.getByRole('link', {name: 'Tag'});
+    const handleLinkClick = vi.fn((e: MouseEvent) => e.preventDefault());
+    link.addEventListener('click', handleLinkClick);
+
+    // Clicking outside the anchor (e.g. the icon) still activates the link
+    fireEvent.click(screen.getByTestId('icon'));
+    expect(handleLinkClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('clicking the remove button does not activate the link', () => {
+    const handleRemove = vi.fn();
+    render(<Token label="Tag" href="/test" onRemove={handleRemove} />);
+    const link = screen.getByRole('link', {name: 'Tag'});
+    const handleLinkClick = vi.fn((e: MouseEvent) => e.preventDefault());
+    link.addEventListener('click', handleLinkClick);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Remove Tag'}));
+    expect(handleRemove).toHaveBeenCalledTimes(1);
+    expect(handleLinkClick).not.toHaveBeenCalled();
+  });
+
+  it('cmd/ctrl+click on the container opens the link in a new tab', () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={() => {}}
+        icon={<span data-testid="icon">★</span>}
+      />,
+    );
+
+    // Clicking the surface (not the anchor) with a modifier opens a new tab
+    // rather than navigating in place — provided by useClickableContainer.
+    fireEvent.click(screen.getByTestId('icon'), {metaKey: true});
+    expect(openSpy).toHaveBeenCalledWith('/test', '_blank', 'noopener');
+    openSpy.mockRestore();
+  });
+
+  it('middle-click on the container opens the link in a new tab', () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={() => {}}
+        icon={<span data-testid="icon">★</span>}
+      />,
+    );
+
+    fireEvent.mouseUp(screen.getByTestId('icon'), {button: 1});
+    expect(openSpy).toHaveBeenCalledWith('/test', '_blank', 'noopener');
+    openSpy.mockRestore();
+  });
+
+  it('a modified click that opens a new tab does not fire onRemove', () => {
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    const handleRemove = vi.fn();
+    render(
+      <Token
+        label="Tag"
+        href="/test"
+        onRemove={handleRemove}
+        icon={<span data-testid="icon">★</span>}
+      />,
+    );
+
+    fireEvent.click(screen.getByTestId('icon'), {metaKey: true});
+    fireEvent.mouseUp(screen.getByTestId('icon'), {button: 1});
+    expect(handleRemove).not.toHaveBeenCalled();
+    expect(openSpy).toHaveBeenCalledTimes(2);
+    openSpy.mockRestore();
+  });
+
+  it('link without onRemove still renders the anchor as the root', () => {
+    const {container} = render(<Token label="Link" href="/test" />);
+    expect(container.firstElementChild?.tagName).toBe('A');
+  });
+});
+
 describe('Token text overflow', () => {
   it('label element has overflow hidden and text-overflow ellipsis styles', () => {
     const {container} = render(<Token label="A very long label text" />);
@@ -355,11 +510,7 @@ describe('Token focus outline', () => {
   it('invisible button does not show its own focus outline', async () => {
     const user = userEvent.setup();
     render(
-      <Token
-        label="Focusable"
-        onClick={() => {}}
-        data-testid="focus-token"
-      />,
+      <Token label="Focusable" onClick={() => {}} data-testid="focus-token" />,
     );
     const button = screen.getByRole('button', {name: 'Focusable'});
     await user.tab();

package/src/Token/Token.tsx

@@ -5,10 +5,11 @@
 /**
  * @file Token.tsx
  * @input Uses React, ReactNode, StyleXStyles
- * @output Exports Token component, TokenProps, TokenColor types
+ * @output Exports Token component, TokenProps, TokenColor, TokenColorMap types
  * @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)
@@ -32,6 +33,7 @@ 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';
@@ -41,20 +43,37 @@ import {useTranslator} from '../i18n';
 // =============================================================================
 
 /**
- * Available color variants for the token.
+ * Extensible color map for Token.
+ *
+ * Theme packages can add custom colors via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Token' {
+ *   interface TokenColorMap {
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+export interface TokenColorMap {
+  default: true;
+  red: true;
+  orange: true;
+  yellow: true;
+  green: true;
+  teal: true;
+  cyan: true;
+  blue: true;
+  purple: true;
+  pink: true;
+  gray: true;
+}
+
+/**
+ * Token color type derived from TokenColorMap.
+ * Extensible via module augmentation of TokenColorMap.
  */
-export type TokenColor =
-  | 'default'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'teal'
-  | 'cyan'
-  | 'blue'
-  | 'purple'
-  | 'pink'
-  | 'gray';
+export type TokenColor = keyof TokenColorMap;
 
 export type TokenSize = 'sm' | 'md' | 'lg';
 
@@ -296,7 +315,9 @@ 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.
+ * 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.
  *
  * @example
  * ```
@@ -333,6 +354,20 @@ 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}
@@ -341,19 +376,7 @@ export function Token({
         {label}
       </span>
       {endContent}
-      {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>
-      )}
+      {removeButton}
     </>
   );
 
@@ -364,11 +387,57 @@ 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 (
-      <LinkComponent
-        ref={ref as React.Ref<HTMLAnchorElement>}
+      <TokenLink
+        ref={ref}
         href={href as string}
-        aria-disabled={isDisabled || undefined}
+        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>
+        }
         {...sharedProps}
         {...mergeProps(
           themeProps('token', {color, size}),
@@ -377,14 +446,14 @@ export function Token({
             sizeStyles[size],
             colorStyles[color],
             styles.interactive,
+            styles.focusVisibleOutline,
             isDisabled && styles.disabled,
             xstyle,
           ),
           className,
           style,
-        )}>
-        {content}
-      </LinkComponent>
+        )}
+      />
     );
   }
 
@@ -431,19 +500,7 @@ export function Token({
           </span>
         </button>
         {endContent}
-        {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>
-        )}
+        {removeButton}
       </span>
     );
   }

package/src/Token/TokenLink.tsx

@@ -0,0 +1,107 @@
+// 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/Token/index.ts

@@ -12,4 +12,4 @@
  */
 
 export {Token} from './Token';
-export type {TokenProps, TokenColor, TokenSize} from './Token';
+export type {TokenProps, TokenColor, TokenColorMap, TokenSize} from './Token';

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -88,6 +88,13 @@ export const docs = {
       description:
         'Validation status object with type and message for error/warning/success states.',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+      default: "'attached'",
+    },
     {
       name: 'isLabelHidden',
       type: 'boolean',
@@ -185,7 +192,14 @@ export const docs = {
     {
       name: 'handleRef',
       type: 'React.Ref<TokenizerHandle>',
-      description: 'Imperative handle for focus() and blur() control.',
+      description:
+        'Imperative handle exposing focusInput(), focusFirstToken(), focusLastToken(), clearInput(), and selectAll().',
+    },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
     },
     {
       name: 'xstyle',
@@ -307,6 +321,13 @@ export const docsZh = {
       description:
         '\u9a8c\u8bc1\u72b6\u6001\u5bf9\u8c61\uff0c\u5305\u542b\u7c7b\u578b\u548c\u6d88\u606f\uff0c\u7528\u4e8e\u9519\u8bef/\u8b66\u544a/\u6210\u529f\u72b6\u6001\u3002',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        '状态消息相对于输入框的放置方式。attached 直接叠加在输入框下方（带边框处理）；detached 作为独立元素浮于下方并留有间距。',
+      default: "'attached'",
+    },
     {
       name: 'isLabelHidden',
       type: 'boolean',
@@ -461,6 +482,7 @@ export const docsDense = {
     isDisabled: 'Disables input+all token interactions.',
     htmlName: 'HTML name attr; one hidden input per selected item id.',
     status: 'Validation status w/ type+message for error/warning/success.',
+    statusVariant: 'How status message is placed: attached overlaps below input; detached floats below w/ spacing.',
     isLabelHidden: 'Visually hides label; keeps a11y.',
     description: 'Helper text below label.',
     isRequired: 'Marks field required.',

package/src/Tokenizer/Tokenizer.test.tsx

@@ -1136,3 +1136,26 @@ describe('Tokenizer', () => {
     });
   });
 });
+
+
+describe('Tokenizer statusVariant forwarding', () => {
+  it('defaults to attached (status renders with data-variant="attached")', () => {
+    const {container} = render(
+      <Tokenizer label="Members" searchSource={userSource} value={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'attached',
+    );
+  });
+
+  it('forwards statusVariant="detached" to the underlying Field status', () => {
+    const {container} = render(
+      <Tokenizer label="Members" searchSource={userSource} value={[]} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+});

package/src/Tokenizer/Tokenizer.tsx

@@ -37,6 +37,7 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
+  type FieldStatusVariant,
 } from '../Field';
 import {Token} from '../Token';
 import {renderIconSlot, type IconType} from '../Icon';
@@ -111,6 +112,13 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
   isOptional?: boolean;
   /** Validation status. */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
   /**
    * Icon to display at the start of the input.
    * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
@@ -370,6 +378,7 @@ export function Tokenizer<T extends SearchableItem>({
   isRequired = false,
   isOptional = false,
   status,
+  statusVariant = 'attached',
   startIcon,
   labelTooltip,
   searchSource,
@@ -730,7 +739,7 @@ export function Tokenizer<T extends SearchableItem>({
           isTruncated && styles.truncatedWrapper,
           isDisabled && inputWrapperStyles.disabled,
           status && inputStatusBorderStyles[status.type],
-          status && inputStatusHoverShadowStyles[status.type],
+          status && !isDisabled && inputStatusHoverShadowStyles[status.type],
           status && inputStatusFocusWithinStyles[status.type],
         ),
       )}>
@@ -828,7 +837,9 @@ export function Tokenizer<T extends SearchableItem>({
               isTruncated && styles.truncatedWrapper,
               isDisabled && inputWrapperStyles.disabled,
               status && inputStatusBorderStyles[status.type],
-              status && inputStatusHoverShadowStyles[status.type],
+              status &&
+                !isDisabled &&
+                inputStatusHoverShadowStyles[status.type],
               status && inputStatusFocusWithinStyles[status.type],
             ),
           )}>
@@ -891,6 +902,7 @@ export function Tokenizer<T extends SearchableItem>({
             }
           : undefined
       }
+      statusVariant={statusVariant}
       labelTooltip={labelTooltip}
       width={width}
       xstyle={xstyle}