@astryxdesign/core 0.1.2-canary.bfcbf64 → 0.1.2-canary.c395fca

package/src/Citation/Citation.test.tsx

@@ -0,0 +1,117 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Citation.test.tsx
+ * @input Uses React Testing Library, Citation, theme tokens
+ * @output Tests for Citation component
+ */
+
+import {render, screen} from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import * as stylex from '@stylexjs/stylex';
+import {colorVars} from '../theme/tokens.stylex';
+import {Citation} from './Citation';
+
+// StyleX emits one deterministic atomic class per property/value pair, so an
+// element carries a probe's class exactly when it has the same declaration.
+// The dev-mode debug class (contains "__") varies by source location and is
+// excluded from the comparison.
+const probe = stylex.create({
+  secondaryText: {color: colorVars['--color-text-secondary']},
+  accentText: {color: colorVars['--color-text-accent']},
+  badgeBackground: {backgroundColor: colorVars['--color-accent-muted']},
+});
+
+function atomicClasses(style: (typeof probe)[keyof typeof probe]): string[] {
+  const {className = ''} = stylex.props(style);
+  return className.split(' ').filter(c => c !== '' && !c.includes('__'));
+}
+
+describe('Citation', () => {
+  const source = {title: 'Example Source', url: 'https://example.com'};
+
+  it('renders the source title as a link in the label variant', () => {
+    render(<Citation source={source} number={1} data-testid="citation" />);
+    const el = screen.getByTestId('citation');
+    expect(el.tagName).toBe('A');
+    expect(el).toHaveAttribute('href', 'https://example.com');
+    expect(el).toHaveTextContent('Example Source');
+  });
+
+  it('renders the index as a badge in the number variant', () => {
+    render(
+      <Citation
+        source={source}
+        number={3}
+        variant="number"
+        data-testid="citation"
+      />,
+    );
+    const el = screen.getByTestId('citation');
+    expect(el).toHaveTextContent('3');
+    expect(el).toHaveAttribute('role', 'doc-noteref');
+    expect(el).toHaveAttribute('aria-label', 'Citation 3: Example Source');
+  });
+
+  it('renders as a span when the source has no url', () => {
+    render(
+      <Citation
+        source={{title: 'No link'}}
+        number={1}
+        data-testid="citation"
+      />,
+    );
+    expect(screen.getByTestId('citation').tagName).toBe('SPAN');
+  });
+
+  it('renders astryx-* class names for theme targeting', () => {
+    render(<Citation source={source} number={1} data-testid="citation" />);
+    expect(screen.getByTestId('citation').className).toContain(
+      'astryx-citation',
+    );
+  });
+
+  it('uses the secondary text color in the label variant', () => {
+    render(<Citation source={source} number={1} data-testid="citation" />);
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.secondaryText)) {
+      expect(el.classList.contains(cls)).toBe(true);
+    }
+  });
+
+  it('uses the secondary text color, not accent, in the number variant', () => {
+    render(
+      <Citation
+        source={source}
+        number={1}
+        variant="number"
+        data-testid="citation"
+      />,
+    );
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.secondaryText)) {
+      expect(el.classList.contains(cls)).toBe(true);
+    }
+    for (const cls of atomicClasses(probe.accentText)) {
+      expect(el.classList.contains(cls)).toBe(false);
+    }
+  });
+
+  it('keeps the accent-muted badge background when the source has a url', () => {
+    // `numberHover` must not clobber the base background: a hover-only
+    // conditional without a default replaces the whole property on merge,
+    // leaving linked badges with a transparent pill.
+    render(
+      <Citation
+        source={source}
+        number={1}
+        variant="number"
+        data-testid="citation"
+      />,
+    );
+    const el = screen.getByTestId('citation');
+    for (const cls of atomicClasses(probe.badgeBackground)) {
+      expect(el.classList.contains(cls)).toBe(true);
+    }
+  });
+});

package/src/Citation/Citation.tsx

@@ -83,6 +83,10 @@ const styles = stylex.create({
       },
     },
     color: {
+      // Explicit default: without it, this hover-only conditional replaces
+      // the base secondary color from `label` (last-wins property merge),
+      // leaving linked citations to inherit the surrounding text color.
+      default: colorVars['--color-text-secondary'],
       ':hover': {
         '@media (hover: hover)': colorVars['--color-text-primary'],
       },
@@ -96,7 +100,7 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-supporting-size'],
     fontWeight: fontWeightVars['--font-weight-semibold'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
-    color: colorVars['--color-text-accent'],
+    color: colorVars['--color-text-secondary'],
     backgroundColor: colorVars['--color-accent-muted'],
     borderRadius: radiusVars['--radius-full'],
     minWidth: spacingVars['--spacing-5'],
@@ -110,6 +114,10 @@ const styles = stylex.create({
   },
   numberHover: {
     backgroundColor: {
+      // Explicit default for the same reason as labelHover's color: a
+      // hover-only conditional replaces the base accent-muted pill from
+      // `number` on merge, leaving linked badges transparent.
+      default: colorVars['--color-accent-muted'],
       ':hover': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -58,12 +58,6 @@ export const docs = {
       description: 'Accessible name for the menu surface, announced when it opens.',
       default: "'Context menu'",
     },
-    {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: 'Whether to auto-focus the first menu item when the menu opens. Set to false for inline showcases.',
-      default: 'true',
-    },
     {
       name: 'isDisabled',
       type: 'boolean',

package/src/ContextMenu/ContextMenu.test.tsx

@@ -62,9 +62,7 @@ describe('ContextMenu', () => {
 
   it('typeahead focuses the matching menu item (menus-11)', () => {
     render(
-      <ContextMenu
-        items={[{label: 'Cut'}, {label: 'Copy'}, {label: 'Paste'}]}
-        hasAutoFocus={false}>
+      <ContextMenu items={[{label: 'Cut'}, {label: 'Copy'}, {label: 'Paste'}]}>
         <div>Right-click me</div>
       </ContextMenu>,
     );
@@ -121,7 +119,7 @@ describe('ContextMenu', () => {
 
   it('closes on Escape even when opened without auto-focus', () => {
     render(
-      <ContextMenu items={[{label: 'Item 1'}]} hasAutoFocus={false}>
+      <ContextMenu items={[{label: 'Item 1'}]}>
         <div>Right-click me</div>
       </ContextMenu>,
     );
@@ -135,7 +133,7 @@ describe('ContextMenu', () => {
 
   it('ignores Escape during IME composition', () => {
     render(
-      <ContextMenu items={[{label: 'Item 1'}]} hasAutoFocus={false}>
+      <ContextMenu items={[{label: 'Item 1'}]}>
         <div>Right-click me</div>
       </ContextMenu>,
     );
@@ -147,7 +145,7 @@ describe('ContextMenu', () => {
 
   it('restores focus to the trigger on close', () => {
     render(
-      <ContextMenu items={[{label: 'Item 1'}]} hasAutoFocus={false}>
+      <ContextMenu items={[{label: 'Item 1'}]}>
         <button type="button">Right-click me</button>
       </ContextMenu>,
     );

package/src/ContextMenu/ContextMenu.tsx

@@ -125,12 +125,6 @@ interface ContextMenuBaseProps extends BaseProps {
    * @default 'Context menu'
    */
   label?: string;
-  /**
-   * Whether to auto-focus the first menu item when the menu opens.
-   * Set to `false` for inline showcases or documentation previews.
-   * @default true
-   */
-  hasAutoFocus?: boolean;
   /** When true, right-click shows the native browser context menu instead. */
   isDisabled?: boolean;
   /** Called when the menu opens or closes. */
@@ -184,7 +178,6 @@ export function ContextMenu({
   menuWidth,
   size = 'md',
   label = 'Context menu',
-  hasAutoFocus = true,
   isDisabled = false,
   onOpenChange,
   ref,
@@ -282,10 +275,9 @@ export function ContextMenu({
   }, [isOpen, closeMenu, listRef]);
 
   // Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
-  // only fires when focus is inside the menu, which never happens when the
-  // menu is opened with hasAutoFocus={false} (e.g. table context menus), so a
-  // document-level listener is required for a reliable Escape path. Guards
-  // against IME composition-cancel.
+  // only fires when focus is inside the menu; a document-level listener is
+  // kept as a reliable fallback Escape path (e.g. if focus has moved out of
+  // the menu). Guards against IME composition-cancel.
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -350,11 +342,9 @@ export function ContextMenu({
           ? document.activeElement
           : (e.currentTarget as HTMLElement);
       layer.show();
-      if (hasAutoFocus) {
-        requestAnimationFrame(() => focusFirst());
-      }
+      requestAnimationFrame(() => focusFirst());
     },
-    [isDisabled, layer, hasAutoFocus, focusFirst],
+    [isDisabled, layer, focusFirst],
   );
 
   // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
@@ -367,11 +357,9 @@ export function ContextMenu({
       (point: {x: number; y: number}) => {
         positionRef.current = {x: point.x, y: point.y};
         layer.show();
-        if (hasAutoFocus) {
-          requestAnimationFrame(() => focusFirst());
-        }
+        requestAnimationFrame(() => focusFirst());
       },
-      [layer, hasAutoFocus, focusFirst],
+      [layer, focusFirst],
     ),
   });
 

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -61,14 +61,7 @@ export const docs = {
       type: 'boolean',
       description: 'Whether to show a chevron icon on the trigger button. Set to false for icon-only triggers.',
       default: 'true',
-    },
-    {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: 'Whether to auto-focus the first menu item when the menu opens. Set to false for inline showcases or documentation previews.',
-      default: 'true',
-    },
-    {
+    },    {
       name: 'children',
       type: '(item: DropdownMenuItemData) => ReactNode',
       description: 'Custom render function for each item in the list.',

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -249,29 +249,6 @@ describe('DropdownMenu controlled mode', () => {
   });
 });
 
-describe('DropdownMenu hasAutoFocus', () => {
-  it('does not focus menu items when hasAutoFocus is false and isMenuOpen is true', () => {
-    const focusSpy = vi.spyOn(HTMLElement.prototype, 'focus');
-    render(
-      <DropdownMenu
-        button={{label: 'Actions'}}
-        items={[{label: 'Edit'}, {label: 'Delete'}]}
-        isMenuOpen={true}
-        hasAutoFocus={false}
-        onOpenChange={() => {}}
-      />,
-    );
-
-    const menuItems = screen.getAllByRole('menuitem', {hidden: true});
-    const menuItemFocusCalls = focusSpy.mock.calls.filter((_, i) => {
-      const ctx = focusSpy.mock.contexts[i];
-      return menuItems.includes(ctx as HTMLElement);
-    });
-    expect(menuItemFocusCalls).toHaveLength(0);
-    focusSpy.mockRestore();
-  });
-});
-
 describe('DropdownMenu items', () => {
   it('renders items with labels', () => {
     render(

package/src/DropdownMenu/DropdownMenu.tsx

@@ -135,13 +135,6 @@ interface DropdownMenuBaseProps extends BaseProps {
    */
   placement?: LayerPlacement;
 
-  /**
-   * Whether to auto-focus the first menu item when the menu opens.
-   * Set to `false` for inline showcases or documentation previews
-   * where stealing focus is undesirable.
-   * @default true
-   */
-  hasAutoFocus?: boolean;
   'data-testid'?: string;
 }
 
@@ -193,7 +186,6 @@ export function DropdownMenu({
   onClick,
   hasChevron = true,
   placement = 'below',
-  hasAutoFocus = true,
   className,
   style,
   xstyle,
@@ -299,14 +291,12 @@ export function DropdownMenu({
     if (isControlled) {
       if (controlledIsOpen && !popover.isOpen) {
         popover.show();
-        if (hasAutoFocus) {
-          requestAnimationFrame(() => focusFirst());
-        }
+        requestAnimationFrame(() => focusFirst());
       } else if (!controlledIsOpen && popover.isOpen) {
         popover.hide();
       }
     }
-  }, [controlledIsOpen, isControlled, popover, hasAutoFocus, focusFirst]);
+  }, [controlledIsOpen, isControlled, popover, focusFirst]);
 
   // Extend useListFocus with Enter/Space activation + typeahead
   const listKeyDown = useCallback(
@@ -340,10 +330,8 @@ export function DropdownMenu({
 
   const openAndFocus = useCallback(() => {
     popover.show();
-    if (hasAutoFocus) {
-      requestAnimationFrame(() => focusFirst());
-    }
-  }, [popover, hasAutoFocus, focusFirst]);
+    requestAnimationFrame(() => focusFirst());
+  }, [popover, focusFirst]);
 
   const handleButtonClick = useCallback(() => {
     // If the menu was just closed by light dismiss (e.g. iOS Safari fires

package/src/Field/Field.test.tsx

@@ -109,7 +109,7 @@ describe('Field', () => {
       <Field
         label="Plan"
         inputID="plan-group"
-        labelElementID="plan-label"
+        labelID="plan-label"
         isGroupLabel>
         <div role="radiogroup" aria-labelledby="plan-label" />
       </Field>,
@@ -119,7 +119,7 @@ describe('Field', () => {
     expect(labelEl.tagName).toBe('SPAN');
     expect(labelEl.closest('label')).toBeNull();
     expect(labelEl).not.toHaveAttribute('for');
-    // labelElementID is applied to the label element and referenced by the group.
+    // labelID is applied to the label element and referenced by the group.
     expect(labelEl).toHaveAttribute('id', 'plan-label');
     const group = screen.getByRole('radiogroup', {name: 'Plan'});
     expect(group.getAttribute('aria-labelledby')).toBe(labelEl.id);

package/src/Field/Field.tsx

@@ -101,7 +101,7 @@ export interface FieldProps extends Omit<
   /**
    * ID of the input element this label points AT (used as the label's
    * `htmlFor`). This is the id of the *control*, not of the label element —
-   * see `labelElementID` for the latter.
+   * see `labelID` for the latter.
    */
   inputID: string;
   /**
@@ -110,12 +110,12 @@ export interface FieldProps extends Omit<
    * (radiogroup, checkbox group) references this via `aria-labelledby` to take
    * the label as its accessible name. Pair with `isGroupLabel`.
    */
-  labelElementID?: string;
+  labelID?: string;
   /**
    * When the field wraps a group of controls rather than a single input, set
    * this so the label renders as a non-`<label>` element (a `<span>`): a
    * `<label>` semantically names one control and can't be associated with a
-   * group. Pair with `labelElementID` + `aria-labelledby` on the group.
+   * group. Pair with `labelID` + `aria-labelledby` on the group.
    * @default false
    */
   isGroupLabel?: boolean;
@@ -189,7 +189,7 @@ export function Field({
   isLabelHidden = false,
   description,
   inputID,
-  labelElementID,
+  labelID,
   isGroupLabel = false,
   descriptionID,
   isOptional = false,
@@ -225,7 +225,7 @@ export function Field({
     <FieldLabel
       label={label}
       inputID={inputID}
-      labelElementID={labelElementID}
+      labelID={labelID}
       isGroupLabel={isGroupLabel}
       isLabelHidden={isLabelHidden}
       isDisabled={isDisabled}

package/src/Field/FieldLabel.tsx

@@ -84,7 +84,7 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
   /**
    * ID of the input element this label points AT (rendered as `htmlFor` on the
    * label). This is *not* the id of the label element itself — see
-   * `labelElementID` for that.
+   * `labelID` for that.
    */
   inputID: string;
   /**
@@ -93,14 +93,14 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
    * reference this via `aria-labelledby` to take the label as its accessible
    * name.
    */
-  labelElementID?: string;
+  labelID?: string;
   /**
    * When true, the field wraps a *group* of controls (e.g. a radiogroup)
    * rather than a single input. In that case the label is rendered as a
    * `<span>` instead of a `<label>` — a `<label>` semantically names one form
    * control and can't be associated with a group, so it must not be a literal
    * label element. The group takes the label as its name via
-   * `labelElementID` + `aria-labelledby`.
+   * `labelID` + `aria-labelledby`.
    * @default false
    */
   isGroupLabel?: boolean;
@@ -161,7 +161,7 @@ export interface FieldLabelProps extends BaseProps<HTMLLabelElement> {
 export function FieldLabel({
   label,
   inputID,
-  labelElementID,
+  labelID,
   isGroupLabel = false,
   isLabelHidden = false,
   isDisabled = false,
@@ -203,7 +203,7 @@ export function FieldLabel({
     <>
       <LabelElement
         ref={ref}
-        id={labelElementID}
+        id={labelID}
         // `htmlFor` only applies to a real `<label>` associating with a single
         // control; a group label (span) has no `htmlFor`.
         htmlFor={isGroupLabel ? undefined : inputID}

package/src/InputGroup/InputGroup.tsx

@@ -156,7 +156,7 @@ export function InputGroup({
 }: InputGroupProps) {
   const size = useSize(sizeProp, 'md');
   const inputId = useId();
-  const labelElementId = useId();
+  const labelID = useId();
   const statusMessageId = useId();
 
   const contextValue = useMemo(() => ({isInGroup: true as const}), []);
@@ -169,7 +169,7 @@ export function InputGroup({
           isLabelHidden={isLabelHidden}
           description={description}
           inputID={inputId}
-          labelElementID={labelElementId}
+          labelID={labelID}
           isGroupLabel
           isOptional={isOptional}
           isRequired={isRequired}
@@ -188,7 +188,7 @@ export function InputGroup({
           <div
             ref={ref}
             role="group"
-            aria-labelledby={labelElementId}
+            aria-labelledby={labelID}
             data-testid={testId}
             {...rest}
             {...mergeProps(

package/src/Link/Link.tsx

@@ -30,6 +30,7 @@ import {
 import {Icon} from '../Icon';
 import {Tooltip} from '../Tooltip';
 import {Text} from '../Text';
+import {VisuallyHidden} from '../VisuallyHidden';
 import type {
   TextType,
   TextSize,
@@ -98,18 +99,6 @@ const styles = stylex.create({
     fontSize: typeScaleVars['--text-body-size'],
     lineHeight: typeScaleVars['--text-body-leading'],
   },
-  // Screen-reader-only text (announces the new-tab context change).
-  visuallyHidden: {
-    position: 'absolute',
-    width: 1,
-    height: 1,
-    margin: -1,
-    padding: 0,
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    whiteSpace: 'nowrap',
-    borderStyle: 'none',
-  },
 });
 
 /**
@@ -345,7 +334,7 @@ export function Link({
       {isExternalLink && !renderAsButton && (
         <>
           <Icon icon="externalLink" size="xsm" color="inherit" />
-          <span {...stylex.props(styles.visuallyHidden)}>{newTabLabel}</span>
+          <VisuallyHidden>{newTabLabel}</VisuallyHidden>
         </>
       )}
     </>

package/src/MoreMenu/MoreMenu.doc.mjs

@@ -46,14 +46,7 @@ export const docs = {
       type: 'boolean',
       description: 'Whether the menu trigger is disabled.',
       default: 'false',
-    },
-    {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: 'Whether to auto-focus the first menu item when the menu opens. Set to false for inline showcases or documentation previews.',
-      default: 'true',
-    },
-    {
+    },    {
       name: 'xstyle',
       type: 'StyleXStyles',
       description:
@@ -126,14 +119,7 @@ export const docsZh = {
       type: 'boolean',
       description: '菜单触发器是否禁用。',
       default: 'false',
-    },
-    {
-      name: 'hasAutoFocus',
-      type: 'boolean',
-      description: '菜单打开时是否自动聚焦第一个菜单项。内联展示或文档预览设为 false。',
-      default: 'true',
-    },
-    {
+    },    {
       name: 'xstyle',
       type: 'StyleXStyles',
       description:
@@ -176,7 +162,6 @@ export const docsDense = {
     size: 'Trigger button size.',
     icon: 'Override default three-dot icon. Accepts any ReactNode.',
     isDisabled: 'Whether menu trigger disabled.',
-    hasAutoFocus: 'Auto-focus first item on open; false for showcases.',
     xstyle:
       'StyleX styles for layout customization (margins, positioning, sizing). Must be stylex.create() value.',
   },

package/src/MoreMenu/MoreMenu.tsx

@@ -81,13 +81,6 @@ export interface MoreMenuProps extends Pick<
    */
   onOpenChange?: (isOpen: boolean) => void;
 
-  /**
-   * Whether to auto-focus the first menu item when the menu opens.
-   * Set to `false` for inline showcases or documentation previews.
-   * @default true
-   */
-  hasAutoFocus?: boolean;
-
   /** Test ID for testing frameworks. */
   'data-testid'?: string;
 }
@@ -116,7 +109,6 @@ export function MoreMenu({
   isDisabled = false,
   isMenuOpen,
   onOpenChange,
-  hasAutoFocus,
   xstyle,
   className: classNameProp,
   style,
@@ -149,7 +141,6 @@ export function MoreMenu({
       }}
       items={items}
       hasChevron={false}
-      hasAutoFocus={hasAutoFocus}
       data-testid={testId}
     />
   );

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -112,6 +112,12 @@ export const docs = {
           type: 'boolean',
           description: 'Disables the selector.',
         },
+        {
+          name: 'disabledMessage',
+          type: 'string',
+          description:
+            'Explains why the selector is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled MultiSelector in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        },
         {
           name: 'isLabelHidden',
           type: 'boolean',
@@ -189,6 +195,11 @@ export const docs = {
         guidance: false,
         description: 'Show more than ~20 options without enabling search.',
       },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -217,6 +228,8 @@ export const docsZh = {
         hasSearch: '是否显示用于过滤选项的搜索输入。',
         searchPlaceholder: '搜索输入的占位文本。',
         isDisabled: '禁用选择器。',
+        disabledMessage:
+          '解释选择器被禁用的原因。与 isDisabled 一起使用时，悬停/键盘聚焦时显示工具提示，并通过 aria-disabled 保持触发器可聚焦（仍无法激活）。请使用此属性，而不是用 Tooltip 包裹被禁用的选择器。',
         isLabelHidden: '视觉上隐藏标签同时保持其可访问性。',
         description: '标签下方显示的辅助文本。',
         isOptional: '将字段标记为可选。',
@@ -261,6 +274,11 @@ export const docsZh = {
         guidance: false,
         description: 'Show more than ~20 options without enabling search.',
       },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -301,6 +319,11 @@ export const docsDense = {
         guidance: false,
         description: 'Show more than ~20 options without enabling search.',
       },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled MultiSelector in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
   components: [
@@ -324,6 +347,8 @@ export const docsDense = {
         hasSearch: 'show search input',
         searchPlaceholder: 'search placeholder',
         isDisabled: 'disables selector',
+        disabledMessage:
+          'why disabled; w/ isDisabled shows tooltip on hover/focus, trigger stays focusable via aria-disabled; use instead of Tooltip wrapper',
         isLabelHidden: 'visually hides label',
         description: 'helper text below label',
         isOptional: 'marks optional',