@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -12,11 +12,6 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-// getButton/queryButton instead of getByRole('button', {name}): the closed
-// popover keeps a two-month Calendar (~85 role=button nodes) mounted, which
-// made every role+name query compute ~85 accessible names through jsdom's
-// slow getComputedStyle (~450ms per query). See fastRoleQueries.ts.
-import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateRangeInput} from './DateRangeInput';
 import type {DateRange} from './DateRangeInput';
 
@@ -58,7 +53,7 @@ describe('DateRangeInput', () => {
         hasClear={false}
       />,
     );
-    const trigger = getButton(/Range:/);
+    const trigger = screen.getByRole('button', {name: /Range:/});
     expect(trigger.textContent).toMatch(/Mar/);
     expect(trigger.textContent).toMatch(/15/);
     expect(trigger.textContent).toMatch(/22/);
@@ -98,13 +93,13 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toHaveAttribute('aria-required', 'true');
   });
 
   it('does not set aria-required when isRequired is false', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).not.toHaveAttribute('aria-required');
   });
 
@@ -117,25 +112,25 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toBeDisabled();
   });
 
   it('is not disabled by default', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).not.toBeDisabled();
   });
 
   it('trigger has aria-haspopup="dialog"', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
   });
 
   it('trigger has aria-expanded=false by default', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
 
@@ -148,7 +143,7 @@ describe('DateRangeInput', () => {
         status={{type: 'error', message: 'Required'}}
       />,
     );
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).toHaveAttribute('aria-invalid', 'true');
   });
 
@@ -161,7 +156,7 @@ describe('DateRangeInput', () => {
         status={{type: 'warning', message: 'Watch out'}}
       />,
     );
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     expect(trigger).not.toHaveAttribute('aria-invalid');
   });
 
@@ -186,7 +181,7 @@ describe('DateRangeInput', () => {
         status={{type: 'error', message: 'Please select dates'}}
       />,
     );
-    const trigger = getButton(/Range/);
+    const trigger = screen.getByRole('button', {name: /Range/});
     const describedBy = trigger.getAttribute('aria-describedby')!;
     const ids = describedBy.split(' ');
     const found = ids.some(id => {
@@ -198,7 +193,9 @@ describe('DateRangeInput', () => {
 
   it('calendar icon button is present', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    expect(getButton('Open calendar')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Open calendar'}),
+    ).toBeInTheDocument();
   });
 
   it('calendar icon button is disabled when isDisabled', () => {
@@ -210,7 +207,7 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
   });
 
   it('renders with size="lg"', () => {
@@ -239,7 +236,9 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      expect(getButton('Clear Range')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Clear Range'}),
+      ).toBeInTheDocument();
     });
 
     it('does not show clear button when value is null', () => {
@@ -251,7 +250,9 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      expect(queryButton('Clear Range')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Range'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
@@ -267,7 +268,9 @@ describe('DateRangeInput', () => {
           hasClear={false}
         />,
       );
-      expect(queryButton('Clear Range')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Range'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -284,7 +287,9 @@ describe('DateRangeInput', () => {
           isDisabled
         />,
       );
-      expect(queryButton('Clear Range')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Range'}),
+      ).not.toBeInTheDocument();
     });
 
     it('calls onChange with null when clear is clicked', () => {
@@ -301,7 +306,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(getButton('Clear Range'));
+      fireEvent.click(screen.getByRole('button', {name: 'Clear Range'}));
       expect(onChange).toHaveBeenCalledWith(null);
     });
   });
@@ -341,7 +346,9 @@ describe('DateRangeInput', () => {
       expect(
         screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
       ).toBeInTheDocument();
-      expect(getButton('Last 7 days')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Last 7 days', hidden: true}),
+      ).toBeInTheDocument();
     });
 
     it('marks the applied preset with aria-current, not aria-selected', () => {
@@ -353,10 +360,16 @@ describe('DateRangeInput', () => {
           presets={presets}
         />,
       );
-      const active = getButton('Last 7 days');
+      const active = screen.getByRole('button', {
+        name: 'Last 7 days',
+        hidden: true,
+      });
       expect(active).toHaveAttribute('aria-current', 'true');
       expect(active).not.toHaveAttribute('aria-selected');
-      const inactive = getButton('This month');
+      const inactive = screen.getByRole('button', {
+        name: 'This month',
+        hidden: true,
+      });
       expect(inactive).not.toHaveAttribute('aria-current');
     });
   });
@@ -392,7 +405,7 @@ describe('DateRangeInput', () => {
     it('shows the reason tooltip on hover when disabled with a reason', async () => {
       renderDisabled({disabledMessage: 'You need the Editor role'});
 
-      const trigger = getButton(/Range:/);
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
       const container = trigger.parentElement as HTMLElement;
       const tooltip = screen.getByRole('tooltip', h);
       expect(tooltip).toHaveTextContent('You need the Editor role');
@@ -414,7 +427,7 @@ describe('DateRangeInput', () => {
 
       const tooltip = screen.getByRole('tooltip', h);
       await user.tab();
-      expect(getButton(/Range:/)).toHaveFocus();
+      expect(screen.getByRole('button', {name: /Range:/, ...h})).toHaveFocus();
       await waitFor(() => {
         expect(tooltip).toHaveAttribute('popover-open');
       });
@@ -439,14 +452,14 @@ describe('DateRangeInput', () => {
 
     it('keeps the trigger focusable via aria-disabled when a reason is provided', () => {
       renderDisabled({disabledMessage: 'You need the Editor role'});
-      const trigger = getButton(/Range:/);
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
       expect(trigger).not.toBeDisabled();
       expect(trigger).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('links the reason tooltip from the trigger via aria-describedby', () => {
       renderDisabled({disabledMessage: 'You need the Editor role'});
-      const trigger = getButton(/Range:/);
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
       const tooltip = screen.getByRole('tooltip', h);
       expect(trigger.getAttribute('aria-describedby')).toContain(tooltip.id);
     });
@@ -455,7 +468,7 @@ describe('DateRangeInput', () => {
       const user = userEvent.setup();
       renderDisabled({disabledMessage: 'You need the Editor role'});
 
-      const trigger = getButton(/Range:/);
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
       await user.click(trigger);
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
 
@@ -465,7 +478,7 @@ describe('DateRangeInput', () => {
 
     it('remains natively disabled when disabled without a reason', () => {
       renderDisabled();
-      const trigger = getButton(/Range:/);
+      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
       expect(trigger).toBeDisabled();
       expect(trigger).not.toHaveAttribute('aria-disabled');
     });

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -118,7 +118,7 @@ export const docs = {
     },
     {
       name: 'timeIncrement',
-      type: '1 | 5 | 10 | 15 | 30',
+      type: 'number',
       description:
         'Minutes to add or subtract when using arrow keys in the time input.',
       default: '1',
@@ -413,7 +413,7 @@ export const docsZh = {
     },
     {
       name: 'timeIncrement',
-      type: '1 | 5 | 10 | 15 | 30',
+      type: 'number',
       description: '在时间输入中按箭头键时增减的分钟数。',
       default: '1',
     },
@@ -469,7 +469,6 @@ export const docsZh = {
       description:
         '用于布局自定义的 StyleX 样式。必须是 stylex.create() 的值。',
     },
-
   ],
   theming: {
     targets: [

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -12,7 +12,6 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
 
@@ -187,14 +186,14 @@ describe('DateTimeInput', () => {
 
   it('calendar button is focusable and clickable', () => {
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     expect(button).toBeInTheDocument();
     expect(button).not.toBeDisabled();
   });
 
   it('calendar button is disabled when isDisabled is true', () => {
     render(<DateTimeInput label="Meeting" isDisabled onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     expect(button).toBeDisabled();
   });
 
@@ -202,7 +201,7 @@ describe('DateTimeInput', () => {
     render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
     expect(screen.getByRole('combobox')).toBeDisabled();
     expect(screen.getByLabelText('Meeting time')).toBeDisabled();
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
   });
 
   it('sets aria-busy when isLoading is true', () => {
@@ -215,21 +214,6 @@ describe('DateTimeInput', () => {
     expect(screen.getByRole('combobox')).not.toHaveAttribute('aria-busy');
   });
 
-  it('sets aria-busy on the time input when isLoading is true', () => {
-    render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
-    expect(screen.getByLabelText('Meeting time')).toHaveAttribute(
-      'aria-busy',
-      'true',
-    );
-  });
-
-  it('does not set aria-busy on the time input when not loading', () => {
-    render(<DateTimeInput label="Meeting" onChange={() => {}} />);
-    expect(screen.getByLabelText('Meeting time')).not.toHaveAttribute(
-      'aria-busy',
-    );
-  });
-
   it('renders status icon for error status', () => {
     render(
       <DateTimeInput
@@ -286,61 +270,6 @@ describe('DateTimeInput', () => {
     expect(found).toBe(true);
   });
 
-  it('links the description to the time input via aria-describedby', () => {
-    render(
-      <DateTimeInput
-        label="Meeting"
-        description="Pick the meeting datetime"
-        onChange={() => {}}
-      />,
-    );
-    // The description covers both halves of the field, so the time input must
-    // carry it too — a screen-reader user tabbing into the time half should
-    // not lose the field's description.
-    const timeInput = screen.getByLabelText('Meeting time');
-    const describedBy = timeInput.getAttribute('aria-describedby')!;
-    const ids = describedBy.split(' ');
-    const found = ids.some(id =>
-      document
-        .getElementById(id)
-        ?.textContent?.includes('Pick the meeting datetime'),
-    );
-    expect(found).toBe(true);
-  });
-
-  it('links the status message to the time input via aria-describedby', () => {
-    render(
-      <DateTimeInput
-        label="Meeting"
-        onChange={() => {}}
-        status={{type: 'error', message: 'Invalid datetime'}}
-      />,
-    );
-    const timeInput = screen.getByLabelText('Meeting time');
-    const describedBy = timeInput.getAttribute('aria-describedby')!;
-    const ids = describedBy.split(' ');
-    const found = ids.some(id =>
-      document.getElementById(id)?.textContent?.includes('Invalid datetime'),
-    );
-    expect(found).toBe(true);
-  });
-
-  it('links the disabled reason to the time input via aria-describedby', () => {
-    HTMLElement.prototype.showPopover = vi.fn();
-    HTMLElement.prototype.hidePopover = vi.fn();
-    render(
-      <DateTimeInput
-        label="When"
-        onChange={() => {}}
-        isDisabled
-        disabledMessage="You need the Editor role"
-      />,
-    );
-    const timeInput = screen.getByLabelText('When time');
-    const tooltip = screen.getByRole('tooltip', {hidden: true});
-    expect(timeInput.getAttribute('aria-describedby')).toContain(tooltip.id);
-  });
-
   it('handles Escape keydown on date input without error', () => {
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);
     const input = screen.getByRole('combobox');
@@ -434,12 +363,16 @@ describe('DateTimeInput', () => {
           hasClear
         />,
       );
-      expect(getButton('Clear Meeting')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Clear Meeting'}),
+      ).toBeInTheDocument();
     });
 
     it('does not show clear button when value is undefined', () => {
       render(<DateTimeInput label="Meeting" onChange={() => {}} hasClear />);
-      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Meeting'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
@@ -450,7 +383,9 @@ describe('DateTimeInput', () => {
           onChange={() => {}}
         />,
       );
-      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Meeting'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -463,7 +398,9 @@ describe('DateTimeInput', () => {
           isDisabled
         />,
       );
-      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Meeting'}),
+      ).not.toBeInTheDocument();
     });
 
     it('calls onChange with undefined when clear is clicked', () => {
@@ -476,7 +413,7 @@ describe('DateTimeInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(getButton('Clear Meeting'));
+      fireEvent.click(screen.getByRole('button', {name: 'Clear Meeting'}));
       expect(onChange).toHaveBeenCalledWith(undefined);
     });
   });
@@ -740,43 +677,4 @@ describe('DateTimeInput', () => {
       expect(timeInput).toHaveAttribute('placeholder', 'Select a time');
     });
   });
-
-  describe('timeIncrement', () => {
-    it('steps the time by timeIncrement minutes on ArrowUp', () => {
-      const onChange = vi.fn();
-      render(
-        <DateTimeInput
-          label="Meeting"
-          value={'2026-03-15T14:30' as ISODateTimeString}
-          timeIncrement={15}
-          onChange={onChange}
-        />,
-      );
-
-      const timeInput = screen.getByLabelText('Meeting time');
-      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
-
-      // 14:30 + 15min increment = 14:45
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0]).toContain('14:45');
-    });
-
-    it('defaults to a 1-minute increment', () => {
-      const onChange = vi.fn();
-      render(
-        <DateTimeInput
-          label="Meeting"
-          value={'2026-03-15T14:30' as ISODateTimeString}
-          onChange={onChange}
-        />,
-      );
-
-      const timeInput = screen.getByLabelText('Meeting time');
-      fireEvent.keyDown(timeInput, {key: 'ArrowUp'});
-
-      // 14:30 + default 1min = 14:31
-      expect(onChange).toHaveBeenCalledTimes(1);
-      expect(onChange.mock.calls[0][0]).toContain('14:31');
-    });
-  });
 });

package/src/DateTimeInput/DateTimeInput.tsx

@@ -86,9 +86,6 @@ export type DateTimeInputHourFormat = '12h' | '24h';
 
 export type DateTimeInputSize = 'sm' | 'md' | 'lg';
 
-/** Supported minute increments for arrow-key stepping of the time field. */
-export type DateTimeInputTimeIncrement = 1 | 5 | 10 | 15 | 30;
-
 export type {
   InputStatus as DateTimeInputStatus,
   InputStatusType as DateTimeInputStatusType,
@@ -290,11 +287,10 @@ export interface DateTimeInputProps extends Omit<
   hourFormat?: DateTimeInputHourFormat;
 
   /**
-   * Minutes added or subtracted when stepping the time field with the arrow
-   * keys. Constrained to a set of sensible increments.
+   * Time increment in minutes when using arrow keys in the time input.
    * @default 1
    */
-  timeIncrement?: DateTimeInputTimeIncrement;
+  timeIncrement?: number;
 
   /**
    * Whether to show a clear button when a value is set.
@@ -991,12 +987,10 @@ export function DateTimeInput({
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
             aria-label={timeLabel ?? `${label} time`}
-            aria-describedby={ariaDescribedBy}
             aria-required={isRequired === true ? 'true' : undefined}
             aria-invalid={
               status?.type === 'error' || !isTimeInputValid ? 'true' : undefined
             }
-            aria-busy={isBusy || undefined}
             {...stylex.props(
               styles.input,
               isEffectivelyDisabled && styles.inputDisabled,

package/src/DateTimeInput/index.ts

@@ -14,7 +14,6 @@ export type {
   DateTimeInputProps,
   DateTimeInputSize,
   DateTimeInputHourFormat,
-  DateTimeInputTimeIncrement,
   DateTimeInputStatus,
   DateTimeInputStatusType,
   ISODateTimeString,

package/src/Dialog/Dialog.doc.mjs

@@ -8,10 +8,6 @@ export const docs = {
   group: 'Dialog',
   category: 'Overlay',
   keywords: ["dialog","modal","popup","overlay","lightbox","alert","confirm","prompt","backdrop","focus trap","imperative"],
-  // Intentionally a contained isInline preview, not playground.overlay: the
-  // component stays visible on load and knobs stay live, whereas a real
-  // showModal() overlay makes the page inert — see PlaygroundConfig.overlay
-  // in docs-types.ts (#3657).
   playground: {
     defaults: {
       isOpen: true,

package/src/Dialog/DialogHeader.doc.mjs

@@ -65,51 +65,6 @@ export const docs = {
       default: 'true',
     },
   ],
-  playground: {
-    defaults: {
-      title: 'Delete file?',
-      subtitle: 'This action cannot be undone.',
-      hasDivider: true,
-    },
-  },
-  examples: [
-    {
-      label: 'Basic',
-      code: `
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-
-<DialogHeader title="Delete file?" subtitle="This action cannot be undone." />;
-`,
-    },
-    {
-      label: 'With close button',
-      code: `
-import {useState} from 'react';
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-
-function Header() {
-  const [, setIsOpen] = useState(true);
-
-  // Passing onOpenChange renders a close button that calls it with false.
-  return <DialogHeader title="Settings" onOpenChange={setIsOpen} />;
-}
-`,
-    },
-    {
-      label: 'With start and end content',
-      code: `
-import {DialogHeader} from '@astryxdesign/core/Dialog';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Badge} from '@astryxdesign/core/Badge';
-
-<DialogHeader
-  title="Notifications"
-  startContent={<Icon icon="chevronLeft" size="sm" />}
-  endContent={<Badge label="3" />}
-/>;
-`,
-    },
-  ],
 };
 
 export const docsZh = {

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -11,7 +11,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-dropdown-menu'},
-      {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
+      {className: 'astryx-dropdown-menu-item'},
     ],
     vars: [
       {name: '--_dropdown-menu-radius', description: 'Border radius of the menu popup', default: 'var(--radius-element)', private: true},

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -89,7 +89,7 @@ describe('DropdownMenu', () => {
       .getByRole('menu', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-end span-self-inline-end',
+      'position-area: bottom span-right',
     );
   });
 
@@ -105,27 +105,7 @@ describe('DropdownMenu', () => {
       .getByRole('menu', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-start span-self-inline-end',
-    );
-  });
-
-  it('emits the direction-independent logical mapping under an RTL ancestor (#3389)', async () => {
-    // The self-* position-area keywords resolve against the popover's own
-    // inherited direction in the browser, so RTL emits the same string as
-    // LTR and the mirroring is pure CSS. jsdom can't verify the geometry —
-    // the DropdownMenu RTL Storybook story is the visual proof surface.
-    const user = userEvent.setup();
-    const {container} = render(
-      <div style={{direction: 'rtl'}}>
-        <DropdownMenu button={{label: 'Actions'}} items={[{label: 'Item 1'}]} />
-      </div>,
-    );
-
-    await user.click(screen.getByRole('button', {name: /Actions/}));
-
-    const popover = container.querySelector('[popover]');
-    expect(popover?.getAttribute('style')).toContain(
-      'position-area: self-block-end span-self-inline-end',
+      'position-area: top span-right',
     );
   });