@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/Calendar/Calendar.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When Calendar.tsx changes, update tests accordingly
  */
 
-import {describe, it, expect, vi, afterEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {act, render, screen, within, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {getButton} from '../__tests__/fastRoleQueries';
@@ -394,10 +394,10 @@ describe('Calendar', () => {
 
   it('caps the range highlight next to a disabled mid-range day (#2715)', () => {
     // Disable Jan 13. With Jan 10–15 selected, day 12 (immediately before the
-    // disabled day) should get a rounded end cap on its right edge, and day 14
-    // (immediately after) a rounded cap on its left edge — so the highlight
-    // reads as terminating at the disabled gap rather than running square-edged
-    // into it.
+    // disabled day) should get a rounded end cap on its inline-end edge, and
+    // day 14 (immediately after) a rounded cap on its inline-start edge — so
+    // the highlight reads as terminating at the disabled gap rather than
+    // running square-edged into it.
     const disableJan13 = (d: Date) =>
       !(d.getFullYear() === 2026 && d.getMonth() === 0 && d.getDate() === 13);
     render(
@@ -422,10 +422,11 @@ describe('Calendar', () => {
     const day14Bg = rangeBgFor(14);
 
     // Capped edges have a border radius; the un-capped edge stays square.
-    expect(getComputedStyle(day12Bg).borderTopRightRadius).not.toBe('');
-    expect(getComputedStyle(day12Bg).borderTopRightRadius).not.toBe('0px');
-    expect(getComputedStyle(day14Bg).borderTopLeftRadius).not.toBe('');
-    expect(getComputedStyle(day14Bg).borderTopLeftRadius).not.toBe('0px');
+    // Radii are logical (inline start/end), so they follow reading direction.
+    expect(getComputedStyle(day12Bg).borderStartEndRadius).not.toBe('');
+    expect(getComputedStyle(day12Bg).borderStartEndRadius).not.toBe('0px');
+    expect(getComputedStyle(day14Bg).borderStartStartRadius).not.toBe('');
+    expect(getComputedStyle(day14Bg).borderStartStartRadius).not.toBe('0px');
   });
 
   it('does not range-highlight adjacent-month spillover days in two-month view', () => {
@@ -649,6 +650,150 @@ describe('Calendar', () => {
     });
   });
 
+  // ─── Selection Semantics for AT (WCAG 4.1.2 / 1.3.1) ────────
+
+  describe('selection state in day accessible names', () => {
+    it("appends 'selected' to the selected day's button name in single mode", () => {
+      render(<Calendar value="2026-01-15" focusDate="2026-01-01" />);
+
+      // Roving focus lands on the day <button>, which cannot carry
+      // aria-selected (invalid on role="button") — the selection state must
+      // be encoded in the button's accessible name instead.
+      expect(getDayButton(15).getAttribute('aria-label')).toBe(
+        'Thursday, January 15, 2026, selected',
+      );
+      // Unselected days carry the plain date name.
+      expect(getDayButton(20).getAttribute('aria-label')).toBe(
+        'Tuesday, January 20, 2026',
+      );
+    });
+
+    it('marks range start, end, and in-range days in their accessible names', () => {
+      render(
+        <Calendar
+          mode="range"
+          value={{start: '2026-01-10', end: '2026-01-15'}}
+          focusDate="2026-01-01"
+        />,
+      );
+
+      expect(getDayButton(10).getAttribute('aria-label')).toBe(
+        'Saturday, January 10, 2026, range start',
+      );
+      expect(getDayButton(15).getAttribute('aria-label')).toBe(
+        'Thursday, January 15, 2026, range end',
+      );
+      expect(getDayButton(12).getAttribute('aria-label')).toBe(
+        'Monday, January 12, 2026, in range',
+      );
+      // Days outside the range keep the plain date name.
+      expect(getDayButton(20).getAttribute('aria-label')).toBe(
+        'Tuesday, January 20, 2026',
+      );
+    });
+
+    it('labels a one-day range as both range start and range end', () => {
+      render(
+        <Calendar
+          mode="range"
+          value={{start: '2026-01-10', end: '2026-01-10'}}
+          focusDate="2026-01-01"
+        />,
+      );
+
+      expect(getDayButton(10).getAttribute('aria-label')).toBe(
+        'Saturday, January 10, 2026, range start and range end',
+      );
+    });
+
+    it("labels the in-progress first pick as 'range start' only", async () => {
+      const user = userEvent.setup();
+      render(<Calendar mode="range" focusDate="2026-01-01" />);
+
+      await user.click(getDayButton(10));
+
+      // While the range is in progress the picked day is only the start —
+      // not a completed one-day range.
+      expect(getDayButton(10).getAttribute('aria-label')).toBe(
+        'Saturday, January 10, 2026, range start',
+      );
+    });
+  });
+
+  describe('range selection announcements', () => {
+    it('announces the start pick and prompts for an end date', async () => {
+      const user = userEvent.setup();
+      render(<Calendar mode="range" focusDate="2026-01-01" />);
+
+      await user.click(getDayButton(10));
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent(
+          'Start date Saturday, January 10, 2026. Select an end date.',
+        );
+      });
+    });
+
+    it('announces the completed range after the second pick', async () => {
+      const user = userEvent.setup();
+      render(<Calendar mode="range" focusDate="2026-01-01" />);
+
+      await user.click(getDayButton(10));
+      await user.click(getDayButton(15));
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent(
+          'Selected range: Saturday, January 10, 2026 to Thursday, January 15, 2026.',
+        );
+      });
+    });
+
+    it('announces the completed range in chronological order for a reverse pick', async () => {
+      const user = userEvent.setup();
+      render(<Calendar mode="range" focusDate="2026-01-01" />);
+
+      await user.click(getDayButton(20));
+      await user.click(getDayButton(10));
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent(
+          'Selected range: Saturday, January 10, 2026 to Tuesday, January 20, 2026.',
+        );
+      });
+    });
+  });
+
+  describe('aria-multiselectable', () => {
+    it('sets aria-multiselectable="true" on the grid in range mode', () => {
+      render(<Calendar mode="range" focusDate="2026-01-01" />);
+
+      expect(screen.getByRole('grid')).toHaveAttribute(
+        'aria-multiselectable',
+        'true',
+      );
+    });
+
+    it('does not set aria-multiselectable in single mode', () => {
+      render(<Calendar focusDate="2026-01-01" />);
+
+      expect(screen.getByRole('grid')).not.toHaveAttribute(
+        'aria-multiselectable',
+      );
+    });
+
+    it('sets aria-multiselectable on both grids in a two-month range view', () => {
+      render(
+        <Calendar mode="range" numberOfMonths={2} focusDate="2026-01-01" />,
+      );
+
+      const grids = screen.getAllByRole('grid');
+      expect(grids.length).toBe(2);
+      for (const grid of grids) {
+        expect(grid).toHaveAttribute('aria-multiselectable', 'true');
+      }
+    });
+  });
+
   // ─── Bug Regression Tests ───────────────────────────────────
 
   it('day buttons have data-date attribute with ISO string', () => {
@@ -844,21 +989,22 @@ describe('Calendar', () => {
   // ─── RTL (#3388) ─────────────────────────────────────────────
 
   describe('RTL month navigation', () => {
-    // jsdom does not apply compiled StyleX CSS, so the scaleX(-1) mirror
-    // itself is only observable in a browser (see the dir="rtl" Storybook
-    // story). These tests pin the structure the fix depends on: both nav
-    // chevrons render inside the navIcon wrapper that carries the
-    // ':is([dir="rtl"] *)' conditional transform.
-    it('wraps both nav chevrons in the RTL-mirroring navIcon wrapper', () => {
+    // jsdom does not apply compiled StyleX CSS, so the RTL scaleX mirror is
+    // only observable in a browser (see the dir="rtl" Storybook story). These
+    // tests pin the structure the mirror relies on: both nav chevrons render
+    // inside the navIcon wrapper (which composes the shared rtlStyles.mirror
+    // transform), and navigation semantics stay identical under dir="rtl".
+    it('wraps both nav chevrons in the navIcon wrapper', () => {
       render(<Calendar focusDate="2026-01-01" />);
 
       const {className: navIconClass} = stylex.props(calendarStyles.navIcon);
       expect(navIconClass).toBeTruthy();
+      const navIconAtoms = navIconClass!.split(' ');
 
       for (const name of ['Previous month', 'Next month']) {
         const button = getButton(name);
         const wrappers = Array.from(button.querySelectorAll('span')).filter(
-          span => span.className === navIconClass,
+          span => navIconAtoms.every(atom => span.classList.contains(atom)),
         );
         expect(wrappers.length).toBe(1);
       }
@@ -867,29 +1013,45 @@ describe('Calendar', () => {
     it('keeps navigation semantics unchanged under dir="rtl"', async () => {
       const user = userEvent.setup();
 
-      render(
+      // Scope month-label queries to the rendered tree: month navigation also
+      // announces the month name through the body-level polite live region,
+      // and whether that text has landed by assertion time depends on jsdom's
+      // 16ms rAF frame phase — an unscoped getByText intermittently finds two
+      // matches ("February 2026" in both the header and the live region).
+      const {container} = render(
         <div dir="rtl">
           <Calendar focusDate="2026-02-01" />
         </div>,
       );
 
-      expect(screen.getByText('February 2026')).toBeInTheDocument();
+      expect(within(container).getByText('February 2026')).toBeInTheDocument();
 
       // DOM order and handlers must not change in RTL: flexbox already
       // places "Previous month" at the visual right; only the glyph mirrors.
       await user.click(getButton('Previous month'));
-      expect(screen.getByText('January 2026')).toBeInTheDocument();
+      expect(within(container).getByText('January 2026')).toBeInTheDocument();
 
       await user.click(getButton('Next month'));
-      expect(screen.getByText('February 2026')).toBeInTheDocument();
+      expect(within(container).getByText('February 2026')).toBeInTheDocument();
     });
   });
 
-
   // ─── Day-cell marker theming (#4286) ─────────────────────────
   describe('day-cell marker theme state', () => {
-    // Tests use the real "today" (as the existing aria-current tests do) since
-    // Calendar derives it internally. Helpers pin the exact ISO strings.
+    // Pin "today" to a mid-month date so the ±2-day range helpers below stay
+    // within a single rendered month. With the real clock, running near a month
+    // boundary (e.g. the 1st) pushed today-2 into the previous month, so the
+    // rendered grid didn't contain today's cell and the marker assertions
+    // flaked. Fake only Date (timers stay real; these tests are synchronous).
+    beforeEach(() => {
+      vi.useFakeTimers({toFake: ['Date']});
+      vi.setSystemTime(new Date(2026, 5, 15, 12, 0, 0));
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+    // Tests use the (now-pinned) "today" since Calendar derives it internally.
+    // Helpers pin the exact ISO strings.
     function todayISO(): ISODateString {
       const n = new Date();
       return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, '0')}-${String(n.getDate()).padStart(2, '0')}` as ISODateString;

package/src/Calendar/Calendar.tsx

@@ -14,7 +14,7 @@
  * - /packages/core/src/Calendar/Calendar.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Calendar/index.ts (exports if types change)
  * - /apps/storybook/stories/Calendar.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Calendar/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Calendar/ (showcase blocks)
  */
 
 import {
@@ -57,7 +57,7 @@ import {
   DATE_FORMAT_WITH_WEEKDAY,
   DATE_FORMAT_MONTH_YEAR,
 } from '../utils/plainDate';
-import {mergeProps, composeEventHandlers} from '../utils';
+import {mergeProps, composeEventHandlers, rtlStyles} from '../utils';
 import {
   computeDayCellState,
   computeRangeRounding,
@@ -411,8 +411,16 @@ export function Calendar({ref, ...props}: CalendarProps) {
       } else {
         // Range mode
         if (rangeSelectionStart === null) {
-          // First click - start the range
+          // First click - start the range. Nothing else about this pick is
+          // perceivable non-visually (WCAG 1.3.1) — the grid doesn't move, so
+          // the month-change announcement stays silent — so speak the range
+          // progress through the same polite live region.
           setRangeSelectionStart(iso);
+          announce(
+            t('@astryx.calendar.rangeStartAnnounce', {
+              date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
+            }),
+          );
         } else {
           // Second click - complete the range
           const startPd = plainDateFromISO(rangeSelectionStart);
@@ -432,10 +440,24 @@ export function Calendar({ref, ...props}: CalendarProps) {
           setInternalValue(range);
           setRangeSelectionStart(null);
           (onChange as CalendarRangeProps['onChange'])?.(range);
+          // Completed-range announcement, in chronological order (matches the
+          // swapped {start, end} above even for a reverse pick).
+          announce(
+            t('@astryx.calendar.rangeCompleteAnnounce', {
+              start: plainDateFormat(
+                plainDateFromISO(start),
+                DATE_FORMAT_WITH_WEEKDAY,
+              ),
+              end: plainDateFormat(
+                plainDateFromISO(end),
+                DATE_FORMAT_WITH_WEEKDAY,
+              ),
+            }),
+          );
         }
       }
     },
-    [mode, onChange, rangeSelectionStart],
+    [mode, onChange, rangeSelectionStart, announce, t],
   );
 
   return (
@@ -462,7 +484,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
             // Wrapper span (not Icon props): Icon's string mode clobbers
             // caller classNames, so the RTL mirror must live on its own
             // element.
-            <span {...stylex.props(calendarStyles.navIcon)}>
+            <span {...stylex.props(calendarStyles.navIcon, rtlStyles.mirror)}>
               <Icon icon="chevronLeft" size="sm" color="inherit" />
             </span>
           }
@@ -483,7 +505,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
           label={t('@astryx.calendar.nextMonth')}
           variant="ghost"
           icon={
-            <span {...stylex.props(calendarStyles.navIcon)}>
+            <span {...stylex.props(calendarStyles.navIcon, rtlStyles.mirror)}>
               <Icon icon="chevronRight" size="sm" color="inherit" />
             </span>
           }
@@ -790,6 +812,9 @@ function MonthGrid({
         ref={gridRef}
         role="grid"
         aria-label={monthLabel}
+        // APG grid pattern: a range selection holds multiple selected cells,
+        // so the grid must advertise multi-selectability.
+        aria-multiselectable={mode === 'range' ? true : undefined}
         onKeyDown={handleGridKeyDown}
         onFocus={handleGridFocus}
         {...stylex.props(
@@ -864,6 +889,7 @@ function MonthGrid({
                     isDisabled={isDateDisabled(day.date)}
                     neighbors={neighbors}
                     isTabbable={day.iso === seedTabbableIso}
+                    isRangeSelectionInProgress={rangeSelectionStart !== null}
                     onDayClick={onDayClick}
                     onDayHover={onDayHover}
                   />
@@ -905,6 +931,13 @@ interface DayCellProps {
    * existing `tabindex="0"` and repairs/moves it on navigation and focus.
    */
   isTabbable: boolean;
+  /**
+   * Whether a range selection is mid-flight (first pick made, awaiting the
+   * second). Disambiguates the accessible name of the picked day: mid-flight
+   * it is only the "range start", while a completed one-day range is both
+   * "range start and range end" (rangeStart === rangeEnd in both cases).
+   */
+  isRangeSelectionInProgress: boolean;
   onDayClick: (date: PlainDate) => void;
   onDayHover: (date: PlainDate | null) => void;
 }
@@ -923,9 +956,11 @@ function DayCell({
   isDisabled,
   neighbors,
   isTabbable: isTabbableDay,
+  isRangeSelectionInProgress,
   onDayClick,
   onDayHover,
 }: DayCellProps) {
+  const t = useTranslator();
   const {date, isOutside, dayNumber} = day;
 
   if (isOutside && !hasOutsideDays) {
@@ -964,6 +999,28 @@ function DayCell({
       ? 'today-in-range'
       : null;
 
+  // Accessible name for the day button. Roving focus lands on the <button>,
+  // not the role="gridcell" wrapper that carries aria-selected — and
+  // aria-selected is invalid on role="button" — so the selection/range state
+  // must be encoded into the button's name (WCAG 4.1.2). Localized via ICU
+  // params rather than string concatenation. A mid-flight first pick (where
+  // rangeStart === rangeEnd) reads as "range start" only; a completed one-day
+  // range reads as both start and end.
+  const dateLabel = plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY);
+  const dayLabel = state.isSelected
+    ? t('@astryx.calendar.daySelected', {date: dateLabel})
+    : state.isRangeStart && state.isRangeEnd
+      ? isRangeSelectionInProgress
+        ? t('@astryx.calendar.dayRangeStart', {date: dateLabel})
+        : t('@astryx.calendar.dayRangeStartAndEnd', {date: dateLabel})
+      : state.isRangeStart
+        ? t('@astryx.calendar.dayRangeStart', {date: dateLabel})
+        : state.isRangeEnd
+          ? t('@astryx.calendar.dayRangeEnd', {date: dateLabel})
+          : state.isInRange
+            ? t('@astryx.calendar.dayInRange', {date: dateLabel})
+            : dateLabel;
+
   const rangeRounding = computeRangeRounding(state, {
     prevInRange: neighbors.prevInRange,
     nextInRange: neighbors.nextInRange,
@@ -984,16 +1041,16 @@ function DayCell({
           {...stylex.props(
             dayCellStyles.rangeBg,
             dayCellTheme.rangeBg,
-            rangeRounding.roundLeft && dayCellStyles.rangeBgRadiusLeft,
-            rangeRounding.roundRight && dayCellStyles.rangeBgRadiusRight,
-            state.isRangeStart && dayCellStyles.rangeInsetLeft,
+            rangeRounding.roundStart && dayCellStyles.rangeBgRadiusStart,
+            rangeRounding.roundEnd && dayCellStyles.rangeBgRadiusEnd,
+            state.isRangeStart && dayCellStyles.rangeInsetStart,
             state.isRangeStart &&
-              rangeRounding.roundRight &&
-              dayCellStyles.rangeInsetRight,
-            state.isRangeEnd && dayCellStyles.rangeInsetRight,
+              rangeRounding.roundEnd &&
+              dayCellStyles.rangeInsetEnd,
+            state.isRangeEnd && dayCellStyles.rangeInsetEnd,
             state.isRangeStart &&
-              rangeRounding.roundLeft &&
-              dayCellStyles.rangeInsetLeft,
+              rangeRounding.roundStart &&
+              dayCellStyles.rangeInsetStart,
           )}
         />
       )}
@@ -1004,8 +1061,8 @@ function DayCell({
           {...stylex.props(
             dayCellStyles.previewBg,
             dayCellTheme.previewBg,
-            previewRounding.roundLeft && dayCellStyles.previewBgRadiusLeft,
-            previewRounding.roundRight && dayCellStyles.previewBgRadiusRight,
+            previewRounding.roundStart && dayCellStyles.previewBgRadiusStart,
+            previewRounding.roundEnd && dayCellStyles.previewBgRadiusEnd,
             state.isPreviewStart && dayCellStyles.previewStart,
             state.isPreviewEnd && dayCellStyles.previewEnd,
           )}
@@ -1016,7 +1073,7 @@ function DayCell({
       <button
         type="button"
         data-date={day.iso}
-        aria-label={plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)}
+        aria-label={dayLabel}
         aria-disabled={state.effectivelyDisabled || undefined}
         // Mark today's cell programmatically (APG date-picker pattern), not just
         // visually, so screen-reader users can identify the current date.

package/src/Calendar/dayCellUtils.test.ts

@@ -181,8 +181,8 @@ describe('computeRangeRounding', () => {
       }),
     );
     const rounding = computeRangeRounding(state);
-    expect(rounding.roundLeft).toBe(true);
-    expect(rounding.roundRight).toBe(false);
+    expect(rounding.roundStart).toBe(true);
+    expect(rounding.roundEnd).toBe(false);
   });
 
   it('rounds left at first column even without range start', () => {
@@ -196,7 +196,7 @@ describe('computeRangeRounding', () => {
       }),
     );
     const rounding = computeRangeRounding(state);
-    expect(rounding.roundLeft).toBe(true);
+    expect(rounding.roundStart).toBe(true);
   });
 
   it('rounds right at last column', () => {
@@ -210,7 +210,7 @@ describe('computeRangeRounding', () => {
       }),
     );
     const rounding = computeRangeRounding(state);
-    expect(rounding.roundRight).toBe(true);
+    expect(rounding.roundEnd).toBe(true);
   });
 
   // #2715 follow-up: cap the highlight where the range meets a disabled or
@@ -230,8 +230,8 @@ describe('computeRangeRounding', () => {
       prevInRange: true,
       nextInRange: false,
     });
-    expect(rounding.roundLeft).toBe(false);
-    expect(rounding.roundRight).toBe(true);
+    expect(rounding.roundStart).toBe(false);
+    expect(rounding.roundEnd).toBe(true);
   });
 
   it('caps the left edge when the previous day breaks the range', () => {
@@ -248,8 +248,8 @@ describe('computeRangeRounding', () => {
       prevInRange: false,
       nextInRange: true,
     });
-    expect(rounding.roundLeft).toBe(true);
-    expect(rounding.roundRight).toBe(false);
+    expect(rounding.roundStart).toBe(true);
+    expect(rounding.roundEnd).toBe(false);
   });
 
   it('does not cap a mid-range day when both neighbours continue the range', () => {
@@ -266,8 +266,8 @@ describe('computeRangeRounding', () => {
       prevInRange: true,
       nextInRange: true,
     });
-    expect(rounding.roundLeft).toBe(false);
-    expect(rounding.roundRight).toBe(false);
+    expect(rounding.roundStart).toBe(false);
+    expect(rounding.roundEnd).toBe(false);
   });
 });
 
@@ -313,8 +313,8 @@ describe('computePreviewRounding', () => {
       }),
     );
     const rounding = computePreviewRounding(state);
-    expect(rounding.roundLeft).toBe(true);
-    expect(rounding.roundRight).toBe(false);
+    expect(rounding.roundStart).toBe(true);
+    expect(rounding.roundEnd).toBe(false);
   });
 
   // #2715: the hover preview needs the same disabled/outside caps as the
@@ -332,8 +332,8 @@ describe('computePreviewRounding', () => {
       prevInPreview: true,
       nextInPreview: false,
     });
-    expect(rounding.roundLeft).toBe(false);
-    expect(rounding.roundRight).toBe(true);
+    expect(rounding.roundStart).toBe(false);
+    expect(rounding.roundEnd).toBe(true);
   });
 
   it('caps the left edge when the previous day breaks the preview run', () => {
@@ -349,8 +349,8 @@ describe('computePreviewRounding', () => {
       prevInPreview: false,
       nextInPreview: true,
     });
-    expect(rounding.roundLeft).toBe(true);
-    expect(rounding.roundRight).toBe(false);
+    expect(rounding.roundStart).toBe(true);
+    expect(rounding.roundEnd).toBe(false);
   });
 
   it('does not cap a mid-preview day when both neighbours continue', () => {
@@ -366,8 +366,8 @@ describe('computePreviewRounding', () => {
       prevInPreview: true,
       nextInPreview: true,
     });
-    expect(rounding.roundLeft).toBe(false);
-    expect(rounding.roundRight).toBe(false);
+    expect(rounding.roundStart).toBe(false);
+    expect(rounding.roundEnd).toBe(false);
   });
 });
 

package/src/Calendar/dayCellUtils.ts

@@ -123,8 +123,8 @@ function computeHighlightRounding(input: {
   const nextBreaks =
     input.nextContinues !== undefined ? !input.nextContinues : false;
   return {
-    roundLeft: input.isStart || input.isFirstColumn || prevBreaks,
-    roundRight: input.isEnd || input.isLastColumn || nextBreaks,
+    roundStart: input.isStart || input.isFirstColumn || prevBreaks,
+    roundEnd: input.isEnd || input.isLastColumn || nextBreaks,
   };
 }