@astryxdesign/core 0.7.1 → 0.7.2-canary.01eab6a

package/src/Pagination/Pagination.test.tsx

@@ -20,6 +20,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Pagination, generatePageRange} from './Pagination';
+import {InternationalizationProvider} from '../i18n';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 afterEach(() => {
@@ -119,6 +120,28 @@ describe('Pagination', () => {
       ).toBeInTheDocument();
     });
 
+    it('does not introduce Stack theme targets around navigation controls', () => {
+      const {rerender} = render(
+        <Pagination page={3} onChange={() => {}} totalPages={5} />,
+      );
+      expect(
+        screen.getByRole('navigation').querySelector('.astryx-stack'),
+      ).toBeNull();
+
+      rerender(
+        <Pagination
+          page={3}
+          onChange={() => {}}
+          totalPages={5}
+          variant="compact"
+          hasFirstLast
+        />,
+      );
+      expect(
+        screen.getByRole('navigation').querySelector('.astryx-stack'),
+      ).toBeNull();
+    });
+
     it('gives the prev/next carets a hover tooltip matching their accessible name', () => {
       // The carets are icon-only, so sighted users need a visible label on
       // hover, not just the accessible name. The tooltip reuses the same
@@ -291,6 +314,225 @@ describe('Pagination', () => {
       );
       expect(screen.getByText('Page 3 of 10')).toBeInTheDocument();
     });
+
+    describe('first/last buttons', () => {
+      function navButtonNames(): string[] {
+        return within(screen.getByRole('navigation'))
+          .getAllByRole('button')
+          .map(button => button.getAttribute('aria-label') ?? '');
+      }
+
+      it('omits first/last when hasFirstLast is unset', () => {
+        render(
+          <Pagination
+            page={5}
+            onChange={() => {}}
+            totalPages={10}
+            variant="compact"
+          />,
+        );
+        expect(navButtonNames()).toEqual([
+          'Go to previous page',
+          'Go to next page',
+        ]);
+      });
+
+      it('omits first/last when hasFirstLast is false', () => {
+        render(
+          <Pagination
+            page={5}
+            onChange={() => {}}
+            totalPages={10}
+            variant="compact"
+            hasFirstLast={false}
+          />,
+        );
+        expect(navButtonNames()).toEqual([
+          'Go to previous page',
+          'Go to next page',
+        ]);
+      });
+
+      it('flanks prev/next with first/last when hasFirstLast is true', () => {
+        render(
+          <Pagination
+            page={5}
+            onChange={() => {}}
+            totalPages={10}
+            variant="compact"
+            hasFirstLast
+          />,
+        );
+        expect(navButtonNames()).toEqual([
+          'Go to first page',
+          'Go to previous page',
+          'Go to next page',
+          'Go to last page',
+        ]);
+        // The readout stays between prev and next.
+        const readout = within(screen.getByRole('navigation')).getByText(
+          'Page 5 of 10',
+        );
+        const prev = screen.getByRole('button', {name: 'Go to previous page'});
+        const next = screen.getByRole('button', {name: 'Go to next page'});
+        expect(
+          prev.compareDocumentPosition(readout) &
+            Node.DOCUMENT_POSITION_FOLLOWING,
+        ).toBeTruthy();
+        expect(
+          next.compareDocumentPosition(readout) &
+            Node.DOCUMENT_POSITION_PRECEDING,
+        ).toBeTruthy();
+        // Compact never gains an editable box.
+        expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument();
+      });
+
+      it('jumps to the first and last page through onChange and changeAction', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const changeAction = vi.fn();
+        render(
+          <Pagination
+            page={5}
+            onChange={onChange}
+            changeAction={changeAction}
+            totalItems={95}
+            pageSize={10}
+            variant="compact"
+            hasFirstLast
+          />,
+        );
+        await user.click(
+          screen.getByRole('button', {name: 'Go to first page'}),
+        );
+        expect(onChange).toHaveBeenLastCalledWith(1);
+        expect(changeAction).toHaveBeenLastCalledWith(1);
+        await waitFor(() => {
+          expect(politeRegion()).toHaveTextContent('Page 1 of 10');
+        });
+
+        await user.click(screen.getByRole('button', {name: 'Go to last page'}));
+        // 95 items at 10 per page is 10 pages.
+        expect(onChange).toHaveBeenLastCalledWith(10);
+        expect(changeAction).toHaveBeenLastCalledWith(10);
+        await waitFor(() => {
+          expect(politeRegion()).toHaveTextContent('Page 10 of 10');
+        });
+      });
+
+      it('disables first on the first page and last on the last page', () => {
+        const {rerender} = render(
+          <Pagination
+            page={1}
+            onChange={() => {}}
+            totalPages={10}
+            variant="compact"
+            hasFirstLast
+          />,
+        );
+        expect(
+          screen.getByRole('button', {name: 'Go to first page'}),
+        ).toBeDisabled();
+        expect(
+          screen.getByRole('button', {name: 'Go to last page'}),
+        ).not.toBeDisabled();
+
+        rerender(
+          <Pagination
+            page={10}
+            onChange={() => {}}
+            totalPages={10}
+            variant="compact"
+            hasFirstLast
+          />,
+        );
+        expect(
+          screen.getByRole('button', {name: 'Go to first page'}),
+        ).not.toBeDisabled();
+        expect(
+          screen.getByRole('button', {name: 'Go to last page'}),
+        ).toBeDisabled();
+      });
+
+      it('omits first/last when the total page count is unknown', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(
+          <Pagination
+            page={2}
+            onChange={onChange}
+            hasMore
+            variant="compact"
+            hasFirstLast
+          />,
+        );
+        expect(navButtonNames()).toEqual([
+          'Go to previous page',
+          'Go to next page',
+        ]);
+        await user.click(screen.getByRole('button', {name: 'Go to next page'}));
+        expect(onChange).toHaveBeenLastCalledWith(3);
+      });
+
+      it('mirrors the first/last chevrons under RTL like prev/next', () => {
+        render(
+          <InternationalizationProvider locale="en" dir="rtl">
+            <div dir="rtl">
+              <Pagination
+                page={5}
+                onChange={() => {}}
+                totalPages={10}
+                variant="compact"
+                hasFirstLast
+              />
+            </div>
+          </InternationalizationProvider>,
+        );
+        // jsdom applies no CSS transforms, so assert the first/last icons carry
+        // every class the mirrored prev/next icons share (the mirror included).
+        const iconClasses = (name: string) =>
+          new Set(
+            screen
+              .getByRole('button', {name})
+              .querySelector('.astryx-icon')
+              ?.getAttribute('class')
+              ?.split(/\s+/) ?? [],
+          );
+        const prev = iconClasses('Go to previous page');
+        const shared = [...iconClasses('Go to next page')].filter(name =>
+          prev.has(name),
+        );
+        expect(shared.length).toBeGreaterThan(0);
+        for (const name of ['Go to first page', 'Go to last page']) {
+          const classes = iconClasses(name);
+          expect(shared.filter(c => !classes.has(c))).toEqual([]);
+        }
+      });
+    });
+  });
+
+  describe('hasFirstLast on other variants', () => {
+    it.each(['pages', 'count', 'dots', 'none'] as const)(
+      'does not add first/last to the %s variant',
+      variant => {
+        render(
+          <Pagination
+            page={3}
+            onChange={() => {}}
+            totalItems={50}
+            pageSize={10}
+            variant={variant}
+            hasFirstLast
+          />,
+        );
+        expect(
+          screen.queryByRole('button', {name: 'Go to first page'}),
+        ).not.toBeInTheDocument();
+        expect(
+          screen.queryByRole('button', {name: 'Go to last page'}),
+        ).not.toBeInTheDocument();
+      },
+    );
   });
 
   // ---------------------------------------------------------------------------

package/src/Pagination/Pagination.tsx

@@ -5,9 +5,10 @@
 /**
  * @file Pagination.tsx
  * @input Uses React, StyleX, Button, Icon, Selector, Text; page number buttons delegate to Button.
+ *   Compact first/last buttons cancel the inside control gap with logical token margins.
  *   Prev/next and first/last chevrons mirror under RTL via the shared rtlStyles.mirror
- *   (CSS scaleX), not a JS direction read. The input variant uses the chevronsLeft/chevronsRight
- *   (first/last) icons.
+ *   (CSS scaleX), not a JS direction read. The input and compact variants use the
+ *   chevronsLeft/chevronsRight (first/last) icons.
  * @output Exports Pagination component, PaginationProps, PaginationVariant, PaginationSize types
  * @position Core implementation; consumed by index.ts, tested by Pagination.test.tsx
  *
@@ -105,7 +106,8 @@ export interface PaginationProps extends Omit<
    * Visual variant controlling what appears between prev/next buttons.
    * - pages: Page number buttons with ellipsis (default)
    * - count: "X–Y of Z" text
-   * - compact: "Page X of Y" text
+   * - compact: "Page X of Y" text. First/last buttons are opt-in (see
+   *   hasFirstLast).
    * - dots: Dot indicators
    * - input: An editable number box rendering "Page [ n ] / N". The leading
    *   noun is controlled by `pageLabel`. First/last double-chevron buttons
@@ -122,9 +124,11 @@ export interface PaginationProps extends Omit<
   pageLabel?: string;
   /**
    * Whether to show first/last («/») double-chevron buttons flanking
-   * prev/next. Only applies to the `input` variant; other variants ignore it.
-   * The last button needs a known total — it is omitted when the page count is
-   * unknown (cursor/hasMore pagination). @default true
+   * prev/next. Applies to the `input` variant (shown unless false) and the
+   * `compact` variant (shown only when true); other variants ignore it.
+   * The last button needs a known total — both are omitted when the page count
+   * is unknown (cursor/hasMore pagination).
+   * @default true for `input`, false for `compact`
    */
   hasFirstLast?: boolean;
   /**
@@ -181,6 +185,12 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-1'],
   },
+  compactFirst: {
+    marginInlineEnd: `calc(-1 * ${spacingVars['--spacing-1']})`,
+  },
+  compactLast: {
+    marginInlineStart: `calc(-1 * ${spacingVars['--spacing-1']})`,
+  },
   ellipsis: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -369,7 +379,7 @@ export function Pagination({
   onPageSizeChange,
   variant = 'pages',
   pageLabel,
-  hasFirstLast = true,
+  hasFirstLast: hasFirstLastProp,
   step: stepProp = 1,
   siblingCount = 1,
   size = 'md',
@@ -572,10 +582,14 @@ export function Pagination({
   const buttonSize = size === 'sm' ? 'sm' : 'md';
   const isSm = size === 'sm';
 
-  // First/last buttons only exist in the input variant, and only when the page
-  // count is known (they'd have no target otherwise).
-  const showFirstLast =
-    hasFirstLast && variant === 'input' && computedTotalPages != null;
+  // First/last buttons are on by default in the input variant and opt-in for
+  // compact; other variants never render them. They also need a known page
+  // count (the last button would have no target otherwise).
+  const hasFirstLast =
+    variant === 'input'
+      ? (hasFirstLastProp ?? true)
+      : variant === 'compact' && hasFirstLastProp === true;
+  const showFirstLast = hasFirstLast && computedTotalPages != null;
 
   const renderIndicator = () => {
     switch (variant) {
@@ -819,6 +833,7 @@ export function Pagination({
             onClick={handleFirst}
             isDisabled={isDisabled || !hasPrevious}
             isIconOnly
+            xstyle={variant === 'compact' && styles.compactFirst}
           />
         )}
 
@@ -874,6 +889,7 @@ export function Pagination({
             onClick={handleLast}
             isDisabled={isDisabled || !hasNext}
             isIconOnly
+            xstyle={variant === 'compact' && styles.compactLast}
           />
         )}
       </div>

package/src/Popover/Popover.test.tsx

@@ -280,10 +280,10 @@ describe('Popover', () => {
       'utf8',
     );
     expect(popoverSource).toMatch(
-      /surfaceViewportFit:[\s\S]*?maxInlineSize: stylex\.firstThatWorks\(\s*layerViewportInset\.maxInlineSize/,
+      /surfaceViewportFit:[\s\S]*?maxInlineSize: stylex\.firstThatWorks\(\s*`calc\(\$\{layerViewportInset\.maxInlineSize\}\)`/,
     );
     expect(popoverSource).toMatch(
-      /surfaceViewportFit:[\s\S]*?maxBlockSize: stylex\.firstThatWorks\(\s*layerViewportInset\.maxBlockSize/,
+      /surfaceViewportFit:[\s\S]*?maxBlockSize: stylex\.firstThatWorks\(\s*`calc\(\$\{layerViewportInset\.maxBlockSize\}\)`/,
     );
     expect(popoverSource).not.toMatch(/safe-area-inset|calc\(100%/);
     expect(surface?.className).not.toContain(

package/src/Popover/Popover.tsx

@@ -272,12 +272,12 @@ const styles = stylex.create({
   surfaceViewportFit: {
     boxSizing: 'border-box',
     maxInlineSize: stylex.firstThatWorks(
-      layerViewportInset.maxInlineSize,
-      layerViewportInset.maxInlineSizeFallback,
+      `calc(${layerViewportInset.maxInlineSize})`,
+      `calc(${layerViewportInset.maxInlineSizeFallback})`,
     ),
     maxBlockSize: stylex.firstThatWorks(
-      layerViewportInset.maxBlockSize,
-      layerViewportInset.maxBlockSizeFallback,
+      `calc(${layerViewportInset.maxBlockSize})`,
+      `calc(${layerViewportInset.maxBlockSizeFallback})`,
     ),
   },
   surfaceScrollable: {

package/src/PowerSearch/PowerSearch.test.tsx

@@ -165,6 +165,91 @@ describe('PowerSearch', () => {
     expect(screen.getByRole('combobox')).toHaveFocus();
   });
 
+  it('clears all added filters when the clear button is clicked', async () => {
+    const user = userEvent.setup();
+    render(<PowerSearchWrapper config={config} />);
+    const input = screen.getByRole('combobox', {name: 'Search'});
+    await user.type(input, 'status open');
+    await user.click(
+      await screen.findByRole('option', {name: 'Status is Open', hidden: true}),
+    );
+    await user.type(input, 'title login');
+    await user.click(
+      await screen.findByRole('option', {
+        name: 'Title contains "login"',
+        hidden: true,
+      }),
+    );
+
+    await user.type(input, 'status closed');
+    await user.click(
+      await screen.findByRole('option', {
+        name: 'Status is Closed',
+        hidden: true,
+      }),
+    );
+
+    expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(3);
+
+    await user.click(screen.getByRole('button', {name: 'Clear all'}));
+
+    expect(screen.queryAllByRole('button', {name: /^Remove /})).toHaveLength(0);
+    expect(
+      screen.queryByRole('button', {name: 'Clear all'}),
+    ).not.toBeInTheDocument();
+  });
+
+  it('clicking the remove button on a filter removes only that filter', async () => {
+    const user = userEvent.setup();
+    render(<PowerSearchWrapper config={config} />);
+    const input = screen.getByRole('combobox', {name: 'Search'});
+    await user.type(input, 'status open');
+    await user.click(
+      await screen.findByRole('option', {name: 'Status is Open', hidden: true}),
+    );
+    await user.type(input, 'title login');
+    await user.click(
+      await screen.findByRole('option', {
+        name: 'Title contains "login"',
+        hidden: true,
+      }),
+    );
+
+    expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(2);
+
+    await user.click(
+      screen.getAllByRole('button', {name: 'Remove Status: is'})[0],
+    );
+
+    expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(1);
+    expect(screen.getByText('login')).toBeInTheDocument();
+  });
+
+  it('Backspace on an empty input removes only the last filter', async () => {
+    const user = userEvent.setup();
+    render(<PowerSearchWrapper config={config} />);
+    const input = screen.getByRole('combobox', {name: 'Search'});
+    await user.type(input, 'status open');
+    await user.click(
+      await screen.findByRole('option', {name: 'Status is Open', hidden: true}),
+    );
+    await user.type(input, 'title login');
+    await user.click(
+      await screen.findByRole('option', {
+        name: 'Title contains "login"',
+        hidden: true,
+      }),
+    );
+
+    expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(2);
+
+    await user.click(input);
+    await user.keyboard('{Backspace}');
+
+    expect(screen.getAllByRole('button', {name: /^Remove /})).toHaveLength(1);
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
   describe('token value truncation (#4759)', () => {
     it('truncates token values by characters, not code units', () => {
       const truncConfig: PowerSearchConfig = {

package/src/PowerSearch/PowerSearch.tsx

@@ -733,8 +733,8 @@ export function PowerSearch({
       } else if (change.type === 'remove' && change.item) {
         const auxData = change.item.auxiliaryData as PowerSearchAuxData;
         if (auxData?.filterIndex != null) {
-          const newFilters = filters.filter(
-            (_, i) => i !== auxData.filterIndex,
+          const newFilters = filters.filter((_, i) =>
+            _items.some(item => item.auxiliaryData?.filterIndex === i),
           );
           onChange(newFilters, 'remove', auxData.filterIndex);
         }

package/src/RadioList/RadioList.fr10.test.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import {describe, it} from 'vitest';
-import {screen} from '@testing-library/react';
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
 import {expectFieldInputProps} from '../Field/fieldInputFamily.testing';
 import {describeFieldInputParts} from '../Field/fieldInputFamily.render-testing';
 import {RadioList, type RadioListProps} from './RadioList';
@@ -22,3 +22,46 @@ describeFieldInputParts('RadioList', {
   getControl: () => screen.getByRole('radiogroup'),
   inGroup: false,
 });
+
+describe('RadioList FR10 details', () => {
+  it("names the radiogroup by its label and then a caller's aria-labelledby", () => {
+    render(
+      <>
+        <span id="caller-name">Billing</span>
+        <RadioList
+          label="Plan"
+          value="a"
+          onChange={() => {}}
+          aria-labelledby="caller-name">
+          <RadioListItem label="A" value="a" />
+        </RadioList>
+      </>,
+    );
+    const group = screen.getByRole('radiogroup');
+    const ids = group.getAttribute('aria-labelledby')?.split(' ');
+    expect(ids).toHaveLength(2);
+    expect(document.getElementById(ids?.[0] ?? '')?.textContent).toContain(
+      'Plan',
+    );
+    expect(ids?.[1]).toBe('caller-name');
+    expect(screen.getByRole('radiogroup', {name: 'Plan Billing'})).toBe(group);
+  });
+
+  it('puts hidden, inert, and dir on the radiogroup', () => {
+    render(
+      <RadioList
+        label="Plan"
+        value="a"
+        onChange={() => {}}
+        hidden
+        inert
+        dir="rtl">
+        <RadioListItem label="A" value="a" />
+      </RadioList>,
+    );
+    const group = document.querySelector<HTMLElement>('[role="radiogroup"]');
+    expect(group).toHaveAttribute('hidden');
+    expect(group).toHaveAttribute('inert');
+    expect(group).toHaveAttribute('dir', 'rtl');
+  });
+});

package/src/RadioList/RadioList.test.tsx

@@ -524,6 +524,28 @@ describe('RadioList', () => {
   });
 
   describe('RadioListItem rest forwarding', () => {
+    it('forwards align to its Item row unchanged', () => {
+      render(
+        <RadioList label="Preference" value="" onChange={() => {}}>
+          <RadioListItem label="Option A" value="a" data-testid="item-a" />
+          <RadioListItem
+            label="Option B"
+            value="b"
+            align="first-line"
+            data-testid="item-b"
+          />
+        </RadioList>,
+      );
+      expect(screen.getByTestId('item-a')).toHaveAttribute(
+        'data-align',
+        'center',
+      );
+      expect(screen.getByTestId('item-b')).toHaveAttribute(
+        'data-align',
+        'first-line',
+      );
+    });
+
     it('forwards data-testid, id, and aria-* to the item root element', () => {
       render(
         <RadioList label="Preference" value="" onChange={() => {}}>

package/src/RadioList/RadioList.tsx

@@ -31,6 +31,7 @@ import type {InputStatus} from '../Field/types';
 import {useTooltip} from '../Tooltip';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {composeEventHandlers, mergeProps} from '../utils';
+import {joinAriaIDs} from '../utils/inputAria';
 import {
   type FieldInputBaseProps,
   useFieldInputStyling,
@@ -216,6 +217,7 @@ export function RadioList({
   htmlName,
   children,
   onFocus,
+  'aria-labelledby': ariaLabelledByProp,
   'aria-describedby': ariaDescribedByProp,
   ...restProps
 }: RadioListProps) {
@@ -399,7 +401,8 @@ export function RadioList({
           disabledMessageTooltip.ref(el);
         }}
         role="radiogroup"
-        aria-labelledby={labelID}
+        // A caller aria-labelledby names the group together with its label.
+        aria-labelledby={joinAriaIDs(labelID, ariaLabelledByProp)}
         onFocus={composeEventHandlers(handleFocus, onFocus)}
         aria-describedby={
           [

package/src/RadioList/RadioListItem.doc.mjs

@@ -43,6 +43,13 @@ export const docs = {
       description:
         'Secondary content displayed below the label. Links and buttons keep their own click behaviour — the row only delegates clicks from its non-interactive surface to the radio.',
     },
+    {
+      name: 'align',
+      type: "'center' | 'start' | 'first-line'",
+      description:
+        'Vertical alignment of the start and end content against the label, passed through to Item unchanged. `first-line` keeps a small mark (a radio) level with the first line of a wrapped label. See Item.align.',
+      default: "'center'",
+    },
     {
       name: 'isDisabled',
       type: 'boolean',
@@ -117,6 +124,13 @@ export const docsZh = {
       description:
         '显示在标签下方的次要内容。链接和按钮保留自身的点击行为——整行仅将非交互区域的点击委派给单选框。',
     },
+    {
+      name: 'align',
+      type: "'center' | 'start' | 'first-line'",
+      description:
+        '起始和结束内容相对于标签的垂直对齐方式，原样传递给 Item。`first-line` 让小标记（单选按钮）与换行标签的第一行保持水平。参见 Item.align。',
+      default: "'center'",
+    },
     {
       name: 'isDisabled',
       type: 'boolean',
@@ -142,6 +156,8 @@ export const docsDense = {
   displayName: 'Radio List Item',
   description: 'Individual radio item w/ label, description, content slots.',
   propDescriptions: {
+    align:
+      "Start/end content alignment, passed to Item: 'center' (default), 'start', or 'first-line' (centered on the label's first line).",
     label:
       'Primary label. String or ReactNode; nested controls keep their behavior.',
     'aria-label':

package/src/RadioList/RadioListItem.tsx

@@ -29,7 +29,7 @@ import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
 import {useIndicator} from '../Indicator';
-import {Item} from '../Item';
+import {Item, type ItemAlign} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 // The touch press's paint, declared by the shared overlay styles on the
@@ -156,6 +156,13 @@ const rowStyles = stylex.create({
 
 export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Vertical alignment of the start and end content against the label,
+   * forwarded to Item. Use `first-line` to keep the radio level with the
+   * first line of a wrapped label.
+   * @default 'center'
+   */
+  align?: ItemAlign;
   /**
    * Primary label for the radio item.
    *
@@ -232,6 +239,7 @@ export function RadioListItem({
   isDisabled: isItemDisabled = false,
   startContent,
   endContent,
+  align,
   xstyle,
   className,
   style,
@@ -366,6 +374,7 @@ export function RadioListItem({
         ) : undefined
       }
       endContent={endContent}
+      align={align}
       xstyle={
         [
           // Hover reaches the radio visual through this ancestor marker rather