@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7

package/src/Field/Field.test.tsx

@@ -9,10 +9,22 @@
  * SYNC: When Field.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
 import {Field} from './Field';
 import {FormLayoutContext} from '../FormLayout/FormLayoutContext';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
+function assertiveRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="assertive"]');
+}
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
 
 describe('Field', () => {
   it('renders with label', () => {
@@ -228,7 +240,11 @@ describe('Field', () => {
     expect(document.querySelector('svg')).not.toBeInTheDocument();
   });
 
-  it('status has role="alert" and aria-live="assertive" for error type', () => {
+  // The status message is announced through the persistent useAnnounce live
+  // regions rather than role/aria-live on the (conditionally mounted)
+  // FieldStatus element itself — regions born with their content are not
+  // reliably announced by assistive technology.
+  it('announces error status assertively via the persistent live region', async () => {
     render(
       <Field
         label="Email"
@@ -237,12 +253,13 @@ describe('Field', () => {
         <input id="email-input" />
       </Field>,
     );
-    const status = screen.getByRole('alert');
-    expect(status).toHaveTextContent('Invalid email');
-    expect(status).toHaveAttribute('aria-live', 'assertive');
+    expect(screen.getByText('Invalid email')).not.toHaveAttribute('role');
+    await waitFor(() => {
+      expect(assertiveRegion()).toHaveTextContent('Invalid email');
+    });
   });
 
-  it('status has role="status" and aria-live="polite" for warning type', () => {
+  it('announces warning status politely via the persistent live region', async () => {
     render(
       <Field
         label="Email"
@@ -251,9 +268,34 @@ describe('Field', () => {
         <input id="email-input" />
       </Field>,
     );
-    const status = screen.getByRole('status');
-    expect(status).toHaveTextContent('Check this');
-    expect(status).toHaveAttribute('aria-live', 'polite');
+    expect(screen.getByText('Check this')).not.toHaveAttribute('aria-live');
+    await waitFor(() => {
+      expect(politeRegion()).toHaveTextContent('Check this');
+    });
+  });
+
+  // Regression: the status live region must NOT be born together with its
+  // content. A message that appears after mount (the common validation flow)
+  // has to land in the persistent announce region.
+  it('announces a status message that appears after mount', async () => {
+    const {rerender} = render(
+      <Field label="Email" inputID="email-input">
+        <input id="email-input" />
+      </Field>,
+    );
+    expect(assertiveRegion()).toBeNull();
+
+    rerender(
+      <Field
+        label="Email"
+        inputID="email-input"
+        status={{type: 'error', message: 'Email is required'}}>
+        <input id="email-input" />
+      </Field>,
+    );
+    await waitFor(() => {
+      expect(assertiveRegion()).toHaveTextContent('Email is required');
+    });
   });
 
   it('auto-generates description ID as {inputID}-desc when descriptionID is not provided', () => {
@@ -277,7 +319,10 @@ describe('Field', () => {
         <input id="my-input" />
       </Field>,
     );
-    expect(screen.getByRole('alert')).toHaveAttribute('id', 'my-input-status');
+    expect(screen.getByText('Required')).toHaveAttribute(
+      'id',
+      'my-input-status',
+    );
   });
 
   it('warns when isOptional and isRequired are both set', () => {
@@ -421,7 +466,7 @@ describe('Field', () => {
         </Field>,
         {wrapper: horizontalLabelsWrapper},
       );
-      const statusEl = screen.getByRole('alert');
+      const statusEl = screen.getByText('Required');
       const inputEl = screen.getByTestId('email');
       // Both status and input should be inside the same wrapper div (column 2)
       expect(statusEl.parentElement).toBe(inputEl.parentElement);

package/src/Field/FieldLabel.doc.mjs

@@ -48,7 +48,7 @@ export const docs = {
     {
       name: 'labelIcon',
       type: 'IconType',
-      description: 'Icon before the label text. See `npx astryx docs icons` for valid semantic names.',
+      description: 'Icon before the label text. See `astryx docs icons` for valid semantic names.',
     },
     {
       name: 'labelTooltip',

package/src/FieldStatus/FieldStatus.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   category: 'Data Input',
   isHiddenFromOverview: true,
   description:
-    'Status message component for form field validation feedback.',
+    'Status message component for form field validation feedback. Messages are announced to screen readers through persistent live regions (assertive for errors, polite otherwise), so conditional mounting is safe.',
   theming: {
     targets: [
       {className: 'astryx-field-status', visualProps: ['type', 'variant']},
@@ -66,12 +66,24 @@ export const docs = {
 /** @type {import('../docs-types').TranslationDoc} */
 export const docsDense = {
   description:
-    'Validation feedback message for fields/custom controls. Supports error, warning, success and attached/detached variants.',
+    'Validation feedback message for fields/custom controls. Supports error, warning, success and attached/detached variants. Announced via persistent live regions (assertive for errors, polite otherwise).',
   usage: {
     bestPractices: [
-      {guidance: true, description: 'Use attached status below bordered inputs when message belongs to that input.'},
-      {guidance: true, description: 'Use detached status for checkboxes, switches, and custom controls where overlap is visually awkward.'},
-      {guidance: false, description: 'Use FieldStatus for general alerts or page-level notices; use Banner or Toast instead.'},
+      {
+        guidance: true,
+        description:
+          'Use attached status below bordered inputs when message belongs to that input.',
+      },
+      {
+        guidance: true,
+        description:
+          'Use detached status for checkboxes, switches, and custom controls where overlap is visually awkward.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use FieldStatus for general alerts or page-level notices; use Banner or Toast instead.',
+      },
     ],
   },
   propDescriptions: {

package/src/FieldStatus/FieldStatus.test.tsx

@@ -9,15 +9,27 @@
  * SYNC: When FieldStatus.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi} from 'vitest';
-import {render, screen} from '@testing-library/react';
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {render, screen, waitFor} from '@testing-library/react';
 import * as stylex from '@stylexjs/stylex';
 import {FieldStatus} from './FieldStatus';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 const testStyles = stylex.create({
   custom: {color: 'rebeccapurple'},
 });
 
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
+function assertiveRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="assertive"]');
+}
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
+
 describe('FieldStatus', () => {
   it('renders the message text', () => {
     render(<FieldStatus type="error" message="This field is required" />);
@@ -29,47 +41,75 @@ describe('FieldStatus', () => {
     expect(screen.getByTestId('fs').tagName).toBe('DIV');
   });
 
-  describe('role semantics', () => {
-    // Errors are urgent — they get role="alert" so assistive tech interrupts.
-    it('uses role="alert" for error status', () => {
-      render(<FieldStatus type="error" message="msg" />);
-      expect(screen.getByRole('alert')).toHaveTextContent('msg');
+  describe('screen-reader announcements', () => {
+    // The rendered element is NOT itself a live region: FieldStatus is
+    // conditionally mounted by every caller, and live regions born together
+    // with their content are not reliably announced. Announcements go through
+    // the persistent useAnnounce singletons instead.
+    it('does not carry role or aria-live on the rendered element', () => {
+      render(<FieldStatus type="error" message="msg" data-testid="fs" />);
+      const el = screen.getByTestId('fs');
+      expect(el).not.toHaveAttribute('role');
+      expect(el).not.toHaveAttribute('aria-live');
     });
 
-    // Non-error statuses are advisory — role="status" is a polite live region.
-    it('uses role="status" for warning status', () => {
-      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('role', 'status');
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    // Errors are urgent — they interrupt via the assertive channel.
+    it('announces error messages assertively, including on first mount', async () => {
+      render(<FieldStatus type="error" message="This field is required" />);
+      await waitFor(() => {
+        expect(assertiveRegion()).toHaveTextContent('This field is required');
+      });
+      expect(politeRegion()).toHaveTextContent('');
     });
 
-    it('uses role="status" for success status', () => {
-      render(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('role', 'status');
+    it('announces warning messages politely', async () => {
+      render(<FieldStatus type="warning" message="Check this value" />);
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('Check this value');
+      });
+      expect(assertiveRegion()).toHaveTextContent('');
     });
-  });
 
-  describe('aria-live politeness', () => {
-    // Error → assertive so screen readers announce immediately.
-    it('sets aria-live="assertive" for error', () => {
-      render(<FieldStatus type="error" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute(
-        'aria-live',
-        'assertive',
-      );
+    it('announces success messages politely', async () => {
+      render(<FieldStatus type="success" message="Looks good" />);
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('Looks good');
+      });
     });
 
-    it('sets aria-live="polite" for warning', () => {
-      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('aria-live', 'polite');
+    it('announces message changes', async () => {
+      const {rerender} = render(<FieldStatus type="error" message="First" />);
+      await waitFor(() => {
+        expect(assertiveRegion()).toHaveTextContent('First');
+      });
+      rerender(<FieldStatus type="error" message="Second" />);
+      await waitFor(() => {
+        expect(assertiveRegion()).toHaveTextContent('Second');
+      });
     });
 
-    it('sets aria-live="polite" for success', () => {
-      render(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      expect(screen.getByTestId('fs')).toHaveAttribute('aria-live', 'polite');
+    // Severity changes re-route the announcement to the matching channel.
+    it('re-routes to the polite channel when type changes from error', async () => {
+      const {rerender} = render(<FieldStatus type="error" message="msg" />);
+      await waitFor(() => {
+        expect(assertiveRegion()).toHaveTextContent('msg');
+      });
+      rerender(<FieldStatus type="success" message="msg" />);
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('msg');
+      });
     });
 
-    // The element is a live region, never hidden from assistive tech.
+    it('does not announce an empty message', () => {
+      render(<FieldStatus type="error" message="" />);
+      // The live regions are created lazily on first announce; an empty
+      // message must not trigger one.
+      expect(assertiveRegion()).toBeNull();
+      expect(politeRegion()).toBeNull();
+    });
+
+    // The visible message stays perceivable by assistive tech (it is the
+    // aria-describedby target for the input).
     it('does not mark itself aria-hidden', () => {
       render(<FieldStatus type="error" message="msg" data-testid="fs" />);
       expect(screen.getByTestId('fs')).not.toHaveAttribute('aria-hidden');
@@ -245,20 +285,18 @@ describe('FieldStatus', () => {
       expect(screen.getByTestId('fs')).toHaveTextContent('Second');
     });
 
-    // Switching from error to a non-error type must relax both the role and
-    // the live-region politeness in lockstep.
-    it('relaxes role and aria-live when type changes from error', () => {
+    // The element must never regain live-region semantics when the type
+    // changes — announcements always flow through the persistent regions.
+    it('keeps the element role-free when type changes from error', () => {
       const {rerender} = render(
         <FieldStatus type="error" message="msg" data-testid="fs" />,
       );
-      let el = screen.getByTestId('fs');
-      expect(el).toHaveAttribute('role', 'alert');
-      expect(el).toHaveAttribute('aria-live', 'assertive');
+      expect(screen.getByTestId('fs')).not.toHaveAttribute('role');
 
       rerender(<FieldStatus type="success" message="msg" data-testid="fs" />);
-      el = screen.getByTestId('fs');
-      expect(el).toHaveAttribute('role', 'status');
-      expect(el).toHaveAttribute('aria-live', 'polite');
+      const el = screen.getByTestId('fs');
+      expect(el).not.toHaveAttribute('role');
+      expect(el).not.toHaveAttribute('aria-live');
     });
   });
 

package/src/FieldStatus/FieldStatus.tsx

@@ -2,7 +2,7 @@
 
 /**
  * @file FieldStatus.tsx
- * @input Uses React, stylex, theme tokens
+ * @input Uses React, stylex, theme tokens, useAnnounce
  * @output Exports FieldStatus component, FieldStatusProps
  * @position Core implementation; consumed by Field, Switch, CheckboxInput, and the FieldStatus entrypoint
  *
@@ -16,9 +16,10 @@
 
 'use client';
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
+import {useAnnounce} from '../hooks/useAnnounce';
 import {mergeProps} from '../utils';
 import {
   colorVars,
@@ -113,6 +114,14 @@ export interface FieldStatusProps extends BaseProps<HTMLDivElement> {
 /**
  * A status message component for form fields.
  *
+ * Screen-reader announcements go through the persistent `useAnnounce` live
+ * regions (assertive for errors, polite otherwise) rather than `role`/
+ * `aria-live` on the rendered element. Live regions that mount together with
+ * their content are not reliably announced by assistive technology, and
+ * FieldStatus is almost always conditionally rendered by its callers. The
+ * message is announced whenever it appears — including on first mount — and
+ * whenever it changes.
+ *
  * @example
  * ```
  * <FieldStatus
@@ -138,13 +147,22 @@ export function FieldStatus({
   ...rest
 }: FieldStatusProps) {
   const entryStyle = useEntryAnimation('slideDown');
+  const announce = useAnnounce();
+
+  // Announce the message through the persistently-mounted live regions.
+  // Announce-on-mount is intentional: callers conditionally mount FieldStatus
+  // when a status appears (and whole forms can mount with a server-side
+  // validation error already present), and both cases must be heard.
+  useEffect(() => {
+    if (message) {
+      announce(message, type === 'error' ? 'assertive' : 'polite');
+    }
+  }, [announce, message, type]);
 
   return (
     <div
       ref={ref}
       id={id}
-      role={type === 'error' ? 'alert' : 'status'}
-      aria-live={type === 'error' ? 'assertive' : 'polite'}
       {...rest}
       {...mergeProps(
         themeProps('field-status', {type, variant}),

package/src/FileInput/FileInput.test.tsx

@@ -348,9 +348,10 @@ describe('FileInput', () => {
       fireEvent.change(fileInputEl(), {
         target: {files: [createFile('note.txt', 100)]},
       });
-      // A rejected selection creates no polite region (only the error goes to
-      // the existing role="status" region).
-      expect(politeRegion()).toBeNull();
+      // A rejected selection announces nothing politely. (The region pair may
+      // exist because the validation error itself is announced assertively via
+      // FieldStatus, but the polite channel must stay empty.)
+      expect(politeRegion()?.textContent ?? '').toBe('');
     });
   });
 
@@ -641,6 +642,54 @@ describe('FileInput', () => {
     });
   });
 
+  describe('trigger accessible name', () => {
+    it('includes the selected file name in the trigger name', () => {
+      const file = createFile('report.pdf', 1024, 'application/pdf');
+      render(<FileInput label="Document" value={file} onChange={() => {}} />);
+      expect(
+        screen.getByRole('button', {name: 'Document, report.pdf'}),
+      ).toBeInTheDocument();
+    });
+
+    it('includes all selected file names when multiple files are selected', () => {
+      const files = [createFile('a.txt', 100), createFile('b.txt', 200)];
+      render(
+        <FileInput
+          label="Files"
+          value={files}
+          onChange={() => {}}
+          isMultiple
+        />,
+      );
+      expect(
+        screen.getByRole('button', {name: 'Files, a.txt, b.txt'}),
+      ).toBeInTheDocument();
+    });
+
+    it('uses exactly the label when no files are selected', () => {
+      render(<FileInput label="Document" value={null} onChange={() => {}} />);
+      expect(screen.getByRole('button', {name: 'Document'})).toHaveAttribute(
+        'aria-label',
+        'Document',
+      );
+    });
+
+    it('includes the selected file name in dropzone mode', () => {
+      const file = createFile('doc.pdf', 100, 'application/pdf');
+      render(
+        <FileInput
+          label="Upload"
+          value={file}
+          onChange={() => {}}
+          mode="dropzone"
+        />,
+      );
+      expect(
+        screen.getByRole('button', {name: 'Upload, doc.pdf'}),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe('data-testid', () => {
     it('passes data-testid to native input', () => {
       render(

package/src/FileInput/FileInput.tsx

@@ -745,7 +745,15 @@ export function FileInput({
         aria-disabled={showsDisabledMessage ? 'true' : undefined}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
-        aria-label={label}
+        // aria-label suppresses child content from the accessible name, so
+        // compose the selected filenames into it — otherwise a screen-reader
+        // user refocusing the control hears only the field label and cannot
+        // tell what (if anything) is attached.
+        aria-label={
+          hasFiles && fileNames
+            ? t('@astryx.fileInput.triggerWithFiles', {label, fileNames})
+            : label
+        }
         aria-busy={isLoading || undefined}
         // These describe the operable control, so they belong on the focusable
         // role="button" wrapper — not the hidden tabIndex={-1} file input the
@@ -785,7 +793,10 @@ export function FileInput({
         />
         {isDropzone ? renderDropzoneContent() : renderCompactContent()}
         {hasFiles && !isDisabled && !isLoading && (
-          <InputClearButton label={t('@astryx.fileInput.clearLabel', {label})} onClick={handleClear} />
+          <InputClearButton
+            label={t('@astryx.fileInput.clearLabel', {label})}
+            onClick={handleClear}
+          />
         )}
       </div>
       <div

package/src/HoverCard/HoverCard.doc.mjs

@@ -79,6 +79,12 @@ export const docs = {
           description: 'Enables or disables the hover and focus triggers.',
           default: 'true',
         },
+        {
+          name: 'label',
+          type: 'string',
+          description:
+            'Accessible name for the hover card popup. When provided, the popup is exposed as a named role="dialog"; when omitted, it falls back to role="group" (a group may validly be unnamed).',
+        },
         {
           name: 'onOpenChange',
           type: '(isOpen: boolean) => void',
@@ -188,6 +194,12 @@ export const docsZh = {
           description: '启用或禁用悬停和聚焦触发器。',
           default: 'true',
         },
+        {
+          name: 'label',
+          type: 'string',
+          description:
+            '悬浮卡片弹出层的无障碍名称。提供时，弹出层以具名的 role="dialog" 暴露；省略时，回退为 role="group"（group 可以合法地没有名称）。',
+        },
         {
           name: 'onOpenChange',
           type: '(isOpen: boolean) => void',
@@ -252,6 +264,7 @@ export const docsDense = {
         hideDelay: 'Hide delay in ms.',
         focusTrigger: 'Controls when focus events trigger hover card.',
         isEnabled: 'Enable/disable hover + focus triggers.',
+        label: 'Accessible name for the popup. With label: named role="dialog"; without: role="group".',
         onOpenChange: 'Callback when visibility changes; true=shown, false=hidden.',
         hasHoverIndication: 'Dashed underline on trigger element.',
         isDefaultOpen: 'Show hover card on mount. Still dismissible.',

package/src/HoverCard/HoverCard.test.tsx

@@ -58,15 +58,34 @@ describe('HoverCard', () => {
     expect(screen.getByRole('button', {name: 'Trigger'})).toBeInTheDocument();
   });
 
-  it('gives the floating layer role="dialog"', () => {
+  it('exposes the floating layer as role="group" when no label is provided', () => {
     render(
       <HoverCard content={<span>Card content</span>}>
         <button type="button">Trigger</button>
       </HoverCard>,
     );
-    expect(screen.getByRole('dialog', {hidden: true})).toHaveTextContent(
+    // A group may validly be unnamed; an unnamed dialog may not. Without a
+    // label the layer must not claim the dialog role.
+    expect(screen.getByRole('group', {hidden: true})).toHaveTextContent(
       'Card content',
     );
+    expect(screen.queryByRole('dialog', {hidden: true})).toBeNull();
+  });
+
+  it('exposes the floating layer as a named dialog when label is provided', () => {
+    render(
+      <HoverCard content={<span>Card content</span>} label="Profile preview">
+        <button type="button">Trigger</button>
+      </HoverCard>,
+    );
+    // The layer is hidden while closed, so assert the accessible name via the
+    // aria-label attribute on the role-carrying element (same pattern as the
+    // Popover dialogLabel test) — accname computation returns '' for hidden
+    // elements.
+    const dialog = screen.getByRole('dialog', {hidden: true});
+    expect(dialog).toHaveAttribute('aria-label', 'Profile preview');
+    expect(dialog).toHaveTextContent('Card content');
+    expect(screen.queryByRole('group', {hidden: true})).toBeNull();
   });
 
   it('wraps element children in an inline-safe span', () => {

package/src/HoverCard/HoverCard.tsx

@@ -96,6 +96,15 @@ export interface HoverCardProps extends Pick<
    */
   isEnabled?: boolean;
 
+  /**
+   * Accessible name for the hover card popup.
+   *
+   * When provided, the popup is exposed to assistive technology as a named
+   * `role="dialog"`. When omitted, the popup falls back to `role="group"` —
+   * a group may validly be unnamed, an unnamed dialog may not.
+   */
+  label?: string;
+
   /**
    * Callback fired when hover card visibility changes.
    * Called with `true` when shown and `false` when hidden.
@@ -166,6 +175,7 @@ export function HoverCard({
   hideDelay = 200,
   focusTrigger = 'auto',
   isEnabled = true,
+  label,
   onOpenChange,
   hasHoverIndication = 'auto',
   isOpen,
@@ -197,6 +207,7 @@ export function HoverCard({
     hideDelay,
     focusTrigger,
     isEnabled,
+    label,
     isOpen,
     isDefaultOpen,
     onShow: handleShow,

package/src/HoverCard/useHoverCard.doc.mjs

@@ -13,6 +13,7 @@ export const docs = {
     {name: 'hideDelay', type: 'number', description: 'Delay before hiding after mouse or focus leaves, in milliseconds.', default: '200'},
     {name: 'focusTrigger', type: "'auto' | 'always' | 'never'", description: 'When focus should open the hover card. auto only attaches focus listeners to naturally focusable elements.', default: "'auto'"},
     {name: 'isEnabled', type: 'boolean', description: 'Whether hover and focus triggers are enabled.', default: 'true'},
+    {name: 'label', type: 'string', description: 'Accessible name for the hover card popup. When provided, the popup is exposed as a named role="dialog"; when omitted, it falls back to role="group" (a group may validly be unnamed).'},
     {name: 'isOpen', type: 'boolean', description: 'Controlled open state. true force-shows, false force-hides, undefined lets hover/focus manage visibility.'},
     {name: 'isDefaultOpen', type: 'boolean', description: 'Whether the hover card should be shown on mount.', default: 'false'},
     {name: 'onShow', type: '() => void', description: 'Callback fired when the hover card becomes visible.'},
@@ -52,6 +53,7 @@ export const docsDense = {
     hideDelay: 'hide delay after mouse/focus leave in ms.',
     focusTrigger: 'when focus opens hover card; auto = naturally focusable elements only.',
     isEnabled: 'whether hover/focus triggers are enabled.',
+    label: 'accessible name for popup. with label: named role="dialog"; without: role="group".',
     isOpen: 'controlled open state: true force-show, false force-hide, undefined unmanaged.',
     isDefaultOpen: 'show on mount.',
     onShow: 'fires when hover card becomes visible.',