@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/Table/TableHeader.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   displayName: 'Table Header',
   isHiddenFromOverview: true,
   description:
-    '<thead> wrapper for children mode. Holds the header row, whose cells are TableHeaderCell. A row must sit inside a section — <table> cannot contain a <tr> directly, because the HTML parser inserts an implied <tbody> when it parses server-rendered markup and React does not when it renders on the client, so the two trees mismatch on hydration. The data-driven data={...} mode renders this element itself whenever columns are supplied; in children mode it is yours to supply.',
+    '<thead> wrapper for children mode. Holds the header row, whose cells are TableHeaderCell. A row must sit inside a section: <table> cannot contain a <tr> directly, because the HTML parser inserts an implied <tbody> when it parses server-rendered markup and React does not when it renders on the client, so the two trees mismatch on hydration. The data-driven data={...} mode renders this element itself whenever columns are supplied; in children mode it is yours to supply.',
   props: [
     {
       name: 'children',

package/src/Table/plugins/filtering/useTableFiltering.test.tsx

@@ -142,12 +142,15 @@ function FilterTable({
   });
 
   return (
-    <Table
-      data={testData}
-      columns={columns}
-      idKey="id"
-      plugins={{filter: filterPlugin}}
-    />
+    <>
+      <Table
+        data={testData}
+        columns={columns}
+        idKey="id"
+        plugins={{filter: filterPlugin}}
+      />
+      <output data-testid="filters">{JSON.stringify(filters)}</output>
+    </>
   );
 }
 
@@ -210,6 +213,41 @@ describe('useTableFiltering', () => {
       await user.type(textInputs[0], 'Alice');
       expect(textInputs[0]).toHaveValue('Alice');
     });
+
+    it('updates a number filter while typing', async () => {
+      const user = userEvent.setup();
+      render(<FilterTable variant="inline" />);
+      const input = screen.getByRole('spinbutton', {name: 'Filter Age'});
+
+      await user.type(input, '30');
+
+      expect(screen.getByTestId('filters')).toHaveTextContent('{"age":30}');
+    });
+
+    it('restores the pre-edit number filter when an invalid draft blurs', async () => {
+      const user = userEvent.setup();
+      render(<FilterTable variant="inline" />);
+      const input = screen.getByRole('spinbutton', {name: 'Filter Age'});
+
+      await user.type(input, '3·');
+      expect(screen.getByTestId('filters')).toHaveTextContent('{"age":3}');
+      await user.tab();
+
+      expect(screen.getByTestId('filters')).toHaveTextContent('{}');
+    });
+
+    it('restores the pre-edit number filter when Enter rejects a draft', async () => {
+      const user = userEvent.setup();
+      render(<FilterTable variant="inline" />);
+      const input = screen.getByRole('spinbutton', {name: 'Filter Age'});
+
+      await user.type(input, '3·');
+      await user.keyboard('{Enter}');
+
+      expect(input).toHaveValue('3·');
+      expect(input).toHaveAttribute('aria-invalid', 'true');
+      expect(screen.getByTestId('filters')).toHaveTextContent('{}');
+    });
   });
 
   describe('field reference forms', () => {

package/src/Table/plugins/filtering/useTableFiltering.tsx

@@ -20,6 +20,9 @@ import {
   useMemo,
   useState,
   useCallback,
+  type FocusEvent,
+  type FormEvent,
+  type KeyboardEvent,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -29,6 +32,10 @@ import {Button} from '../../../Button';
 import {Popover} from '../../../Popover';
 import {TextInput} from '../../../TextInput';
 import {NumberInput} from '../../../NumberInput';
+import {
+  parseNumberInput,
+  resolveNumberInputCommit,
+} from '../../../NumberInput/numberInputCommit';
 import {DateInput} from '../../../DateInput';
 import type {ISODateString} from '../../../utils/dateTypes';
 import {TimeInput} from '../../../TimeInput';
@@ -42,7 +49,7 @@ import type {
   HeaderCellRenderProps,
 } from '../../types';
 import {proportional} from '../../columnUtils';
-import {useTranslator} from '../../../i18n';
+import {useLocale, useTranslator} from '../../../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchField,
@@ -445,6 +452,80 @@ function TextFilterControl({
   );
 }
 
+function useLiveNumberFilter({
+  value,
+  min,
+  max,
+  hasClear,
+  onChange,
+}: {
+  value: number | null;
+  min?: number | null;
+  max?: number | null;
+  hasClear: boolean;
+  onChange: (value: number | null) => void;
+}) {
+  const locale = useLocale();
+  const editStartValueRef = useRef(value);
+
+  const handleChange = useCallback(
+    (nextValue: number | null) => {
+      editStartValueRef.current = nextValue;
+      onChange(nextValue);
+    },
+    [onChange],
+  );
+  const handleFocus = useCallback(() => {
+    editStartValueRef.current = value;
+  }, [value]);
+  const handleInput = useCallback(
+    (event: FormEvent<HTMLElement>) => {
+      const nextValue = parseNumberInput(
+        (event.currentTarget as HTMLInputElement).value,
+        {
+          min,
+          max,
+          locale,
+        },
+      );
+      if (nextValue !== null && nextValue !== value) {
+        onChange(nextValue);
+      }
+    },
+    [locale, max, min, onChange, value],
+  );
+  const restoreRejectedDraft = useCallback(
+    (input: HTMLInputElement) => {
+      const decision = resolveNumberInputCommit(input.value, {
+        min,
+        max,
+        locale,
+        hasClear,
+      });
+      if (decision.type === 'revert' && value !== editStartValueRef.current) {
+        onChange(editStartValueRef.current);
+      }
+    },
+    [hasClear, locale, max, min, onChange, value],
+  );
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      restoreRejectedDraft(event.currentTarget);
+    },
+    [restoreRejectedDraft],
+  );
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        restoreRejectedDraft(event.currentTarget);
+      }
+    },
+    [restoreRejectedDraft],
+  );
+
+  return {handleBlur, handleChange, handleFocus, handleInput, handleKeyDown};
+}
+
 function NumberFilterControl({
   columnKey,
   header,
@@ -466,12 +547,19 @@ function NumberFilterControl({
 
   const step = operatorValue.type === 'integer' ? 1 : null;
 
-  const handleChange = useCallback(
+  const updateFilter = useCallback(
     (newValue: number | null) => {
       store.getConfig().onFilterChange(columnKey, newValue);
     },
     [store, columnKey],
   );
+  const liveFilter = useLiveNumberFilter({
+    value: numValue,
+    min: operatorValue.minValue,
+    max: operatorValue.maxValue,
+    hasClear: !!hasClear,
+    onChange: updateFilter,
+  });
 
   if (hasClear) {
     return (
@@ -479,7 +567,11 @@ function NumberFilterControl({
         label={t('@astryx.tableFiltering.filterByColumn', {header})}
         isLabelHidden
         value={numValue}
-        onChange={handleChange}
+        onChange={liveFilter.handleChange}
+        onFocus={liveFilter.handleFocus}
+        onInput={liveFilter.handleInput}
+        onBlur={liveFilter.handleBlur}
+        onKeyDown={liveFilter.handleKeyDown}
         placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
         min={operatorValue.minValue ?? null}
         max={operatorValue.maxValue ?? null}
@@ -495,7 +587,11 @@ function NumberFilterControl({
       label={t('@astryx.tableFiltering.filterByColumn', {header})}
       isLabelHidden
       value={numValue}
-      onChange={handleChange}
+      onChange={liveFilter.handleChange}
+      onFocus={liveFilter.handleFocus}
+      onInput={liveFilter.handleInput}
+      onBlur={liveFilter.handleBlur}
+      onKeyDown={liveFilter.handleKeyDown}
       placeholder={t('@astryx.tableFiltering.filterByColumn', {header})}
       min={operatorValue.minValue ?? null}
       max={operatorValue.maxValue ?? null}

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -126,15 +126,31 @@ const styles = stylex.create({
   },
   headerCell: {
     paddingBlock: spacingVars['--spacing-2'],
-    // No inline start padding so the chevron aligns with the table's leading
-    // edge (Ernest review #1).
-    paddingInlineStart: spacingVars['--spacing-1'],
+    // The start gutter lives on headerInner instead, so that it travels with
+    // the heading when the heading pins. Left here, the heading would sit one
+    // gutter in at rest and jump flush the moment it stuck.
+    paddingInlineStart: 0,
     paddingInlineEnd: spacingVars['--spacing-3'],
   },
+  // The cell spans every column, so on a table scrolled sideways the heading
+  // would slide out of view while the columns it names stay pinned. Sticking
+  // the inner span to the start edge keeps the chevron and the label together
+  // and on screen.
   headerInner: {
     display: 'flex',
     alignItems: 'center',
     gap: spacingVars['--spacing-1'],
+    insetInlineStart: 0,
+    position: 'sticky',
+    // No inline start padding on the cell, so the chevron aligns with the
+    // table's leading edge (Ernest review #1).
+    paddingInlineStart: spacingVars['--spacing-1'],
+  },
+  // Applied alongside headerInner when using the built-in default heading.
+  // A custom `renderGroupHeader` may need the full column width, so the
+  // shrink-wrap is opt-in rather than unconditional.
+  headerInnerFitContent: {
+    width: 'fit-content',
   },
   // Standalone chevron button with no heavy chrome (transparent, borderless,
   // zero padding) so the icon sits flush with the start of the table
@@ -222,6 +238,32 @@ const styles = stylex.create({
  *   plugins={{grouped: grouped.plugin}}
  * />;
  * ```
+ *
+ * ## Pairing with pagination
+ *
+ * Grouping runs on the rows it is handed, so the order is filter, sort, slice,
+ * then group. Sort by the group key first and the reader's own keys second —
+ * the same `ORDER BY group, sort` a backend would run. That keeps a section's
+ * rows contiguous in the result set, so pages fill sections in order and new
+ * rows always land at the bottom of the table. Slice a differently-ordered
+ * list and every page holds a scatter of sections instead, so loading more
+ * splices rows into the middle and new headings appear above the fold.
+ *
+ * @example
+ * ```
+ * const ordered = useMemo(
+ *   () => [...filtered].sort((a, b) => byTeam(a, b) || bySortKeys(a, b)),
+ *   [filtered, sortKeys],
+ * );
+ * const page = ordered.slice(0, loadedCount);
+ *
+ * const grouped = useTableGroupedRows({
+ *   data: page,
+ *   groupBy: r => r.team,
+ *   collapsedGroups,
+ *   onToggleGroup,
+ * });
+ * ```
  */
 export function useTableGroupedRows<T extends Record<string, unknown>>(
   config: UseTableGroupedRowsConfig<T>,
@@ -342,7 +384,11 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
             // to the actual number of columns, so the header always spans the
             // full width without the plugin knowing the column count.
             <td colSpan={999} {...stylex.props(styles.headerCell)}>
-              <span {...stylex.props(styles.headerInner)}>
+              <span
+                {...stylex.props(
+                  styles.headerInner,
+                  !renderGroupHeader && styles.headerInnerFitContent,
+                )}>
                 {/* Standalone chevron button, flush with the table's start
                     edge (no heavy button chrome) — the keyboard control. */}
                 <button

package/src/Table/plugins/selection/useTableSelection.test.tsx

@@ -285,6 +285,68 @@ describe('useTableSelection', () => {
         'aria-selected',
       );
     });
+
+    // A pinned cell paints over the row, then replays whatever the row
+    // published as --table-row-overlay. Without the variable the wash simply
+    // stops at the freeze line, so it has to track the background exactly.
+    describe('--table-row-overlay', () => {
+      const readOverlay = (row: HTMLElement) =>
+        row.style.getPropertyValue('--table-row-overlay');
+
+      it('publishes the wash so pinned cells can replay it', async () => {
+        const user = userEvent.setup();
+        render(<SelectionTable />);
+
+        await user.click(screen.getAllByLabelText('Select row')[0]);
+
+        expect(readOverlay(screen.getAllByRole('row')[1])).toBe(
+          selectedBgColor,
+        );
+      });
+
+      it('publishes nothing when the row is not painted', async () => {
+        const user = userEvent.setup();
+        render(<SelectionTable hasRowHighlight={false} />);
+
+        await user.click(screen.getAllByLabelText('Select row')[0]);
+
+        expect(readOverlay(screen.getAllByRole('row')[1])).toBe('');
+      });
+
+      it('withdraws the variable when a row is unchecked', async () => {
+        const user = userEvent.setup();
+        render(<SelectionTable />);
+
+        const checkbox = screen.getAllByLabelText('Select row')[0];
+        await user.click(checkbox);
+        await user.click(checkbox);
+
+        expect(readOverlay(screen.getAllByRole('row')[1])).toBe('');
+      });
+
+      it('tracks the background when the flag flips', async () => {
+        const user = userEvent.setup();
+        const {rerender} = render(<SelectionTable />);
+
+        await user.click(screen.getAllByLabelText('Select row')[0]);
+        rerender(<SelectionTable hasRowHighlight={false} />);
+        expect(readOverlay(screen.getAllByRole('row')[1])).toBe('');
+
+        rerender(<SelectionTable hasRowHighlight />);
+        expect(readOverlay(screen.getAllByRole('row')[1])).toBe(
+          selectedBgColor,
+        );
+      });
+
+      it('leaves unchecked rows without the variable', async () => {
+        const user = userEvent.setup();
+        render(<SelectionTable />);
+
+        await user.click(screen.getAllByLabelText('Select row')[0]);
+
+        expect(readOverlay(screen.getAllByRole('row')[2])).toBe('');
+      });
+    });
   });
 
   it('unsubscribes detached row refs instead of accumulating listeners', () => {

package/src/Table/plugins/selection/useTableSelection.tsx

@@ -159,8 +159,24 @@ function applyRowSelectionStyle(
   }
   // Written on every pass, not just when painting: the flag can flip while a
   // row is already selected, and the wash has to come back off.
-  el.style.backgroundColor =
-    isSelected && hasRowHighlight ? selectedBgColor : '';
+  const wash = isSelected && hasRowHighlight ? selectedBgColor : '';
+  if (el.style.backgroundColor !== wash) {
+    el.style.backgroundColor = wash;
+  }
+  // A pinned column paints its own opaque background over the row, so the
+  // wash alone stops at the freeze line. Publishing it as the row overlay is
+  // what lets useTableStickyColumns replay it on those cells — the same
+  // contract TableRow honours for striping and hover.
+  const currentOverlay = el.style.getPropertyValue(ROW_OVERLAY_VAR);
+  if (wash === '') {
+    if (currentOverlay !== '') {
+      el.style.removeProperty(ROW_OVERLAY_VAR);
+    }
+  } else {
+    if (currentOverlay !== wash) {
+      el.style.setProperty(ROW_OVERLAY_VAR, wash);
+    }
+  }
 }
 
 // =============================================================================
@@ -306,6 +322,13 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
 
 const selectedBgColor = colorVars['--color-accent-muted'];
 
+/**
+ * The row's current fill, republished for pinned cells to read. Declared as a
+ * literal rather than imported because StyleX needs the same name as a static
+ * key on the reading side, so there is no one constant both ends can share.
+ */
+const ROW_OVERLAY_VAR = '--table-row-overlay';
+
 const selectionColumnStyles = stylex.create({
   center: {
     display: 'flex',

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -210,8 +210,7 @@ const stickyStyles = stylex.create({
 // ::after gradient strip just past the pinned edge (visible thanks to the cell's
 // overflow: visible). Opacity is gated by the scroll-state variable above.
 const SHADOW_WIDTH = '6px';
-// --color-shadow is only ~10% alpha (too faint here); use a slightly stronger soft tint.
-const SHADOW_TINT = 'light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32))';
+const SHADOW_TINT = colorVars['--color-shadow'];
 const shadowStyles = stylex.create({
   // start-pinned: shadow falls toward inline-end (over scrolled content).
   // insetInlineEnd anchors the strip to the column's inline-end edge; the strip

package/src/Table/useTableGroupedRows.doc.mjs

@@ -7,7 +7,7 @@ export const docs = {
   subComponentOf: 'Table',
   displayName: 'useTableGroupedRows',
   description:
-    "Hook that groups a flat data array into collapsible section rows. Each distinct groupBy value becomes a full-width section-header row with a chevron toggle, the group label, and a member count; collapsing hides that group's data rows while keeping the header visible. Mirrors useTableTreeState: the consumer owns the collapsedGroups set and the hook returns {data, plugin, idKey}: pass them to Table as data, plugins, and idKey respectively.",
+    "Hook that groups a flat data array into collapsible section rows. Each distinct groupBy value becomes a full-width section-header row with a chevron toggle, the group label, and a member count; collapsing hides that group's data rows while keeping the header visible. Mirrors useTableTreeState: the consumer owns the collapsedGroups set and the hook returns {data, plugin, idKey}: pass them to Table as data, plugins, and idKey respectively. Grouping runs on the rows you hand it, so with pagination the order is filter, sort, slice, then group \u2014 sort by the group key first and the user's keys second, so a section's rows stay contiguous and each page appends to the bottom of the table instead of splicing rows in above the reader. A page that ends on a row count still cuts mid-section, and the heading then counts what has loaded rather than what exists \u2014 \"6\" quietly becoming \"10\". Where the full result set is in hand, carry the cut forward to the end of the section it lands in: every rendered section is then whole and its count is a total.",
   props: [
     {
       name: 'data',
@@ -58,14 +58,14 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
-    'Groups a flat data array into collapsible section rows. Each groupBy value becomes a full-width header (chevron + label + count); collapsing hides its rows. Returns {data, plugin, idKey}: pass them to Table data / plugins / idKey. Consumer owns the collapsedGroups set.',
+    'Groups a flat data array into collapsible section rows. Each groupBy value becomes a full-width header (chevron + label + count); collapsing hides its rows. Returns {data, plugin, idKey}: pass them to Table data / plugins / idKey. Consumer owns the collapsedGroups set. Under pagination the order is filter, sort, slice, group \u2014 sort by the group key first so sections stay contiguous and pages append at the bottom. A row-count cut lands mid-section and the heading counts the page, not the section; where the whole result set is in hand, carry the cut to the end of the section it lands in so every rendered section is complete.',
   propDescriptions: {
     data: 'The flat data to group.',
     groupBy: "Derive a row's group key. Same key = same section.",
     collapsedGroups: 'Set of currently-collapsed group keys.',
     onToggleGroup: 'Called with the group key when a header is toggled.',
     renderGroupHeader:
-      "Custom header content (right of chevron). Default '<key> (<count>)'.",
+      "Custom header content (right of chevron). Default '<key> (<count>)'. Args: (key, count, collapsed).",
     getRowKey: 'Stable key for a real row; positional fallback when omitted.',
     groupOrder: 'Pin these group keys first; others keep first-seen order.',
   },

package/src/Table/useTablePagination.doc.mjs

@@ -75,7 +75,7 @@ export const docs = {
     {
       name: 'label',
       type: 'string',
-      description: "Accessible name for the pagination nav landmark. With position='both' the two navs get distinct names — the label suffixed as '(top)' and '(bottom)' — so same-type landmarks stay unique (axe landmark-unique).",
+      description: "Accessible name for the pagination nav landmark. With position='both' the two navs get distinct names (the label suffixed as '(top)' and '(bottom)') so same-type landmarks stay unique (axe landmark-unique).",
       default: "'Table pagination'",
     },
   ],

package/src/Table/useTableSelection.doc.mjs

@@ -65,7 +65,7 @@ export const docs = {
       name: 'hasRowHighlight',
       type: 'boolean',
       description:
-        'Paints checked rows with the accent wash. Set false when the surrounding UI already uses row background to mean something else (a row open in a detail panel, say) — the wash is an inline style, so it cannot be overridden from userland. Only the background is dropped: aria-selected is still set on checked rows either way.',
+        'Paints checked rows with the accent wash. Set false when the surrounding UI already uses row background to mean something else (a row open in a detail panel, say). The wash is an inline style, so it cannot be overridden from userland. Only the background is dropped: aria-selected is still set on checked rows either way.',
       default: 'true',
     },
   ],

package/src/Text/Text.test.tsx

@@ -297,3 +297,47 @@ describe('Text custom colors', () => {
     expect(screen.getByText('Accent').className).toContain('accent');
   });
 });
+
+// A truncated Text rendered its own Tooltip AND set `title` with the same
+// string, so the browser drew a second, unstyled tooltip on top of ours.
+describe('truncated text shows one tooltip, not two', () => {
+  function withOverflow() {
+    const proto = window.HTMLElement.prototype;
+    const original = {
+      scrollWidth: Object.getOwnPropertyDescriptor(proto, 'scrollWidth'),
+      offsetWidth: Object.getOwnPropertyDescriptor(proto, 'offsetWidth'),
+    };
+    Object.defineProperty(proto, 'scrollWidth', {
+      configurable: true,
+      get: () => 400,
+    });
+    Object.defineProperty(proto, 'offsetWidth', {
+      configurable: true,
+      get: () => 100,
+    });
+    return () => {
+      if (original.scrollWidth) {
+        Object.defineProperty(proto, 'scrollWidth', original.scrollWidth);
+      }
+      if (original.offsetWidth) {
+        Object.defineProperty(proto, 'offsetWidth', original.offsetWidth);
+      }
+    };
+  }
+
+  it('leaves the native title to the tooltip it already renders', () => {
+    const restore = withOverflow();
+    try {
+      render(
+        <Text type="body" maxLines={1}>
+          A label far wider than the space it has been given
+        </Text>,
+      );
+      expect(
+        screen.getByText('A label far wider than the space it has been given'),
+      ).not.toHaveAttribute('title');
+    } finally {
+      restore();
+    }
+  });
+});

package/src/Text/Text.tsx

@@ -313,7 +313,6 @@ export function Text({
           className,
           {...style, ...inlineStyle},
         )}
-        title={tooltipEnabled ? truncation.fullText : undefined}
         {...props}>
         {children}
       </Component>

package/src/TextArea/TextArea.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextArea',
   displayName: 'Text Area',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textarea","textfield","multiline","comment","message","autoresize","autosize","charlimit"],
   props: [
     {
@@ -186,7 +186,12 @@ export const docs = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-textarea', visualProps: ['size', 'status'], states: ['disabled', 'readonly']},
+      {className: 'astryx-text-area', visualProps: ['size', 'status'], states: ['disabled', 'readonly']},
+      {className: 'astryx-text-area-control'},
+      {className: 'astryx-text-area-counter'},
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {className: 'astryx-textarea', visualProps: ['size', 'status'], states: ['disabled', 'readonly'], deprecatedFor: 'text-area'},
     ],
     vars: [
       {
@@ -381,7 +386,12 @@ export const docsZh = {
   ],
   theming: {
     targets: [
-      {className: 'astryx-textarea', visualProps: ['size', 'status'], states: ['disabled', 'readonly']},
+      {className: 'astryx-text-area', visualProps: ['size', 'status'], states: ['disabled', 'readonly']},
+      {className: 'astryx-text-area-control'},
+      {className: 'astryx-text-area-counter'},
+      // Still emitted beside the names above, so themes written against
+      // them keep working. Drop in the next major.
+      {className: 'astryx-textarea', visualProps: ['size', 'status'], states: ['disabled', 'readonly'], deprecatedFor: 'text-area'},
     ],
     vars: [
       {

package/src/TextArea/TextArea.test.tsx

@@ -1155,3 +1155,14 @@ describe('TextArea readonly theme state', () => {
     expect(root).not.toHaveAttribute('data-readonly');
   });
 });
+
+describe('TextArea theme target names', () => {
+  it('renders the deprecated class beside the current one', () => {
+    const {container} = render(
+      <TextArea label="Notes" value="" onChange={() => {}} />,
+    );
+    const root = container.querySelector('.astryx-text-area');
+    expect(root).not.toBeNull();
+    expect(root).toHaveClass('astryx-textarea');
+  });
+});