@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -12,6 +12,11 @@
 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';
 
@@ -53,7 +58,7 @@ describe('DateRangeInput', () => {
         hasClear={false}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range:/});
+    const trigger = getButton(/Range:/);
     expect(trigger.textContent).toMatch(/Mar/);
     expect(trigger.textContent).toMatch(/15/);
     expect(trigger.textContent).toMatch(/22/);
@@ -93,13 +98,13 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/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 = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).not.toHaveAttribute('aria-required');
   });
 
@@ -112,25 +117,25 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toBeDisabled();
   });
 
   it('is not disabled by default', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).not.toBeDisabled();
   });
 
   it('trigger has aria-haspopup="dialog"', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
   });
 
   it('trigger has aria-expanded=false by default', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
 
@@ -143,7 +148,7 @@ describe('DateRangeInput', () => {
         status={{type: 'error', message: 'Required'}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).toHaveAttribute('aria-invalid', 'true');
   });
 
@@ -156,7 +161,7 @@ describe('DateRangeInput', () => {
         status={{type: 'warning', message: 'Watch out'}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     expect(trigger).not.toHaveAttribute('aria-invalid');
   });
 
@@ -181,7 +186,7 @@ describe('DateRangeInput', () => {
         status={{type: 'error', message: 'Please select dates'}}
       />,
     );
-    const trigger = screen.getByRole('button', {name: /Range/});
+    const trigger = getButton(/Range/);
     const describedBy = trigger.getAttribute('aria-describedby')!;
     const ids = describedBy.split(' ');
     const found = ids.some(id => {
@@ -193,9 +198,7 @@ describe('DateRangeInput', () => {
 
   it('calendar icon button is present', () => {
     render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
-    expect(
-      screen.getByRole('button', {name: 'Open calendar'}),
-    ).toBeInTheDocument();
+    expect(getButton('Open calendar')).toBeInTheDocument();
   });
 
   it('calendar icon button is disabled when isDisabled', () => {
@@ -207,7 +210,7 @@ describe('DateRangeInput', () => {
         onChange={() => {}}
       />,
     );
-    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
+    expect(getButton('Open calendar')).toBeDisabled();
   });
 
   it('renders with size="lg"', () => {
@@ -236,9 +239,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      expect(
-        screen.getByRole('button', {name: 'Clear Range'}),
-      ).toBeInTheDocument();
+      expect(getButton('Clear Range')).toBeInTheDocument();
     });
 
     it('does not show clear button when value is null', () => {
@@ -250,9 +251,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Range'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Range')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
@@ -268,9 +267,7 @@ describe('DateRangeInput', () => {
           hasClear={false}
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Range'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Range')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -287,9 +284,7 @@ describe('DateRangeInput', () => {
           isDisabled
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Range'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Range')).not.toBeInTheDocument();
     });
 
     it('calls onChange with null when clear is clicked', () => {
@@ -306,7 +301,7 @@ describe('DateRangeInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(screen.getByRole('button', {name: 'Clear Range'}));
+      fireEvent.click(getButton('Clear Range'));
       expect(onChange).toHaveBeenCalledWith(null);
     });
   });
@@ -346,9 +341,7 @@ describe('DateRangeInput', () => {
       expect(
         screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
       ).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', {name: 'Last 7 days', hidden: true}),
-      ).toBeInTheDocument();
+      expect(getButton('Last 7 days')).toBeInTheDocument();
     });
 
     it('marks the applied preset with aria-current, not aria-selected', () => {
@@ -360,16 +353,10 @@ describe('DateRangeInput', () => {
           presets={presets}
         />,
       );
-      const active = screen.getByRole('button', {
-        name: 'Last 7 days',
-        hidden: true,
-      });
+      const active = getButton('Last 7 days');
       expect(active).toHaveAttribute('aria-current', 'true');
       expect(active).not.toHaveAttribute('aria-selected');
-      const inactive = screen.getByRole('button', {
-        name: 'This month',
-        hidden: true,
-      });
+      const inactive = getButton('This month');
       expect(inactive).not.toHaveAttribute('aria-current');
     });
   });
@@ -405,7 +392,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 = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       const container = trigger.parentElement as HTMLElement;
       const tooltip = screen.getByRole('tooltip', h);
       expect(tooltip).toHaveTextContent('You need the Editor role');
@@ -427,7 +414,7 @@ describe('DateRangeInput', () => {
 
       const tooltip = screen.getByRole('tooltip', h);
       await user.tab();
-      expect(screen.getByRole('button', {name: /Range:/, ...h})).toHaveFocus();
+      expect(getButton(/Range:/)).toHaveFocus();
       await waitFor(() => {
         expect(tooltip).toHaveAttribute('popover-open');
       });
@@ -452,14 +439,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 = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       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 = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       const tooltip = screen.getByRole('tooltip', h);
       expect(trigger.getAttribute('aria-describedby')).toContain(tooltip.id);
     });
@@ -468,7 +455,7 @@ describe('DateRangeInput', () => {
       const user = userEvent.setup();
       renderDisabled({disabledMessage: 'You need the Editor role'});
 
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       await user.click(trigger);
       expect(trigger).toHaveAttribute('aria-expanded', 'false');
 
@@ -478,7 +465,7 @@ describe('DateRangeInput', () => {
 
     it('remains natively disabled when disabled without a reason', () => {
       renderDisabled();
-      const trigger = screen.getByRole('button', {name: /Range:/, ...h});
+      const trigger = getButton(/Range:/);
       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: 'number',
+      type: '1 | 5 | 10 | 15 | 30',
       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: 'number',
+      type: '1 | 5 | 10 | 15 | 30',
       description: '在时间输入中按箭头键时增减的分钟数。',
       default: '1',
     },
@@ -469,6 +469,7 @@ export const docsZh = {
       description:
         '用于布局自定义的 StyleX 样式。必须是 stylex.create() 的值。',
     },
+
   ],
   theming: {
     targets: [

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -12,6 +12,7 @@
 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';
 
@@ -186,14 +187,14 @@ describe('DateTimeInput', () => {
 
   it('calendar button is focusable and clickable', () => {
     render(<DateTimeInput label="Meeting" onChange={() => {}} />);
-    const button = screen.getByRole('button', {name: 'Open calendar'});
+    const button = getButton('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 = screen.getByRole('button', {name: 'Open calendar'});
+    const button = getButton('Open calendar');
     expect(button).toBeDisabled();
   });
 
@@ -201,7 +202,7 @@ describe('DateTimeInput', () => {
     render(<DateTimeInput label="Meeting" isLoading onChange={() => {}} />);
     expect(screen.getByRole('combobox')).toBeDisabled();
     expect(screen.getByLabelText('Meeting time')).toBeDisabled();
-    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
+    expect(getButton('Open calendar')).toBeDisabled();
   });
 
   it('sets aria-busy when isLoading is true', () => {
@@ -214,6 +215,21 @@ 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
@@ -270,6 +286,61 @@ 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');
@@ -363,16 +434,12 @@ describe('DateTimeInput', () => {
           hasClear
         />,
       );
-      expect(
-        screen.getByRole('button', {name: 'Clear Meeting'}),
-      ).toBeInTheDocument();
+      expect(getButton('Clear Meeting')).toBeInTheDocument();
     });
 
     it('does not show clear button when value is undefined', () => {
       render(<DateTimeInput label="Meeting" onChange={() => {}} hasClear />);
-      expect(
-        screen.queryByRole('button', {name: 'Clear Meeting'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
@@ -383,9 +450,7 @@ describe('DateTimeInput', () => {
           onChange={() => {}}
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Meeting'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -398,9 +463,7 @@ describe('DateTimeInput', () => {
           isDisabled
         />,
       );
-      expect(
-        screen.queryByRole('button', {name: 'Clear Meeting'}),
-      ).not.toBeInTheDocument();
+      expect(queryButton('Clear Meeting')).not.toBeInTheDocument();
     });
 
     it('calls onChange with undefined when clear is clicked', () => {
@@ -413,7 +476,7 @@ describe('DateTimeInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(screen.getByRole('button', {name: 'Clear Meeting'}));
+      fireEvent.click(getButton('Clear Meeting'));
       expect(onChange).toHaveBeenCalledWith(undefined);
     });
   });
@@ -677,4 +740,43 @@ 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,6 +86,9 @@ 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,
@@ -287,10 +290,11 @@ export interface DateTimeInputProps extends Omit<
   hourFormat?: DateTimeInputHourFormat;
 
   /**
-   * Time increment in minutes when using arrow keys in the time input.
+   * Minutes added or subtracted when stepping the time field with the arrow
+   * keys. Constrained to a set of sensible increments.
    * @default 1
    */
-  timeIncrement?: number;
+  timeIncrement?: DateTimeInputTimeIncrement;
 
   /**
    * Whether to show a clear button when a value is set.
@@ -987,10 +991,12 @@ 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,6 +14,7 @@ export type {
   DateTimeInputProps,
   DateTimeInputSize,
   DateTimeInputHourFormat,
+  DateTimeInputTimeIncrement,
   DateTimeInputStatus,
   DateTimeInputStatusType,
   ISODateTimeString,

package/src/Dialog/Dialog.doc.mjs

@@ -8,6 +8,10 @@ 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,6 +65,51 @@ 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'},
+      {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
     ],
     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: bottom span-right',
+      'position-area: self-block-end span-self-inline-end',
     );
   });
 
@@ -105,7 +105,27 @@ describe('DropdownMenu', () => {
       .getByRole('menu', {hidden: true})
       .closest('[popover]');
     expect(popover?.getAttribute('style')).toContain(
-      'position-area: top span-right',
+      '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',
     );
   });