@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/Banner/Banner.test.tsx

@@ -15,6 +15,7 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Banner} from './Banner';
 import {registerIcons, resetIcons} from '../Icon';
+import {InternationalizationProvider} from '../i18n';
 
 describe('Banner', () => {
   afterEach(() => {
@@ -97,7 +98,9 @@ describe('Banner', () => {
 
   it('renders dismiss button when isDismissable', () => {
     render(<Banner status="info" title="Dismissable" isDismissable />);
-    expect(screen.getByRole('button', {name: 'Dismiss'})).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {name: 'Dismiss Dismissable'}),
+    ).toBeInTheDocument();
   });
 
   it('calls onDismiss when dismiss button is clicked', async () => {
@@ -111,7 +114,7 @@ describe('Banner', () => {
         onDismiss={onDismiss}
       />,
     );
-    await user.click(screen.getByRole('button', {name: 'Dismiss'}));
+    await user.click(screen.getByRole('button', {name: 'Dismiss Dismissable'}));
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
@@ -126,7 +129,9 @@ describe('Banner', () => {
       />,
     );
     expect(screen.getByTestId('banner')).toBeInTheDocument();
-    await user.click(screen.getByRole('button', {name: 'Dismiss'}));
+    await user.click(
+      screen.getByRole('button', {name: 'Dismiss Self Dismissing'}),
+    );
     expect(screen.queryByTestId('banner')).not.toBeInTheDocument();
   });
 
@@ -142,16 +147,14 @@ describe('Banner', () => {
         data-testid="banner"
       />,
     );
-    await user.click(screen.getByRole('button', {name: 'Dismiss'}));
+    await user.click(screen.getByRole('button', {name: 'Dismiss Dismissable'}));
     expect(screen.queryByTestId('banner')).not.toBeInTheDocument();
     expect(onDismiss).toHaveBeenCalledTimes(1);
   });
 
   it('does not render dismiss button when isDismissable is false', () => {
     render(<Banner status="info" title="Not Dismissable" />);
-    expect(
-      screen.queryByRole('button', {name: 'Dismiss'}),
-    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', {name: /^Dismiss/})).toBeNull();
   });
 
   it('renders endContent', () => {
@@ -235,7 +238,9 @@ describe('Banner', () => {
     );
     // No toggle exists, so nothing should carry disclosure state, and the
     // region needs no id for a button to point at.
-    const dismiss = screen.getByRole('button', {name: 'Dismiss'});
+    const dismiss = screen.getByRole('button', {
+      name: 'Dismiss Plain content',
+    });
     expect(dismiss).not.toHaveAttribute('aria-expanded');
     expect(dismiss).not.toHaveAttribute('aria-controls');
     expect(
@@ -343,7 +348,7 @@ describe('Banner', () => {
       b => b.getAttribute('aria-label') || b.textContent,
     );
     const expandIndex = buttonNames.indexOf('Expand');
-    const dismissIndex = buttonNames.indexOf('Dismiss');
+    const dismissIndex = buttonNames.indexOf('Dismiss Order Test');
     expect(expandIndex).toBeLessThan(dismissIndex);
   });
 
@@ -548,7 +553,9 @@ describe('Banner', () => {
       before.focus();
 
       await user.tab();
-      expect(screen.getByRole('button', {name: 'Dismiss'})).toHaveFocus();
+      expect(
+        screen.getByRole('button', {name: 'Dismiss Heads up'}),
+      ).toHaveFocus();
 
       await user.keyboard('{Enter}');
 
@@ -565,7 +572,7 @@ describe('Banner', () => {
           <Banner status="info" title="Heads up" isDismissable />
         </>,
       );
-      await user.click(screen.getByRole('button', {name: 'Dismiss'}));
+      await user.click(screen.getByRole('button', {name: 'Dismiss Heads up'}));
       expect(screen.queryByRole('status')).not.toBeInTheDocument();
     });
   });
@@ -650,4 +657,62 @@ describe('Banner', () => {
       expect(getComputedStyle(textColumn).flexBasis).not.toBe('8rem');
     });
   });
+
+  describe('dismiss control naming', () => {
+    it('names stacked string-title banners distinctly', () => {
+      render(
+        <>
+          <Banner status="error" title="Upload invoice failed" isDismissable />
+          <Banner status="error" title="Delete report failed" isDismissable />
+        </>,
+      );
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.map(button => button.getAttribute('aria-label'))).toEqual([
+        'Dismiss Upload invoice failed',
+        'Dismiss Delete report failed',
+      ]);
+      for (const button of buttons) {
+        expect(button).toHaveAccessibleDescription('Dismiss');
+      }
+    });
+
+    it('keeps the bare name and tooltip for a rich title', () => {
+      render(
+        <Banner status="info" title={<span>Rich title</span>} isDismissable />,
+      );
+      const button = screen.getByRole('button', {name: 'Dismiss'});
+      expect(button).toHaveAccessibleDescription('Dismiss');
+    });
+
+    it('uses a translated dismissLabel for a rich title and its tooltip', () => {
+      render(
+        <Banner
+          status="info"
+          title={<span>Wartungshinweis</span>}
+          isDismissable
+          dismissLabel="Wartungshinweis schließen"
+        />,
+      );
+      const button = screen.getByRole('button', {
+        name: 'Wartungshinweis schließen',
+      });
+      expect(button).toHaveAccessibleDescription('Wartungshinweis schließen');
+    });
+
+    it('keeps a translated verb when the titled message falls back to English', () => {
+      render(
+        <InternationalizationProvider
+          locale="de-DE"
+          overrides={{
+            'de-DE': {'@astryx.banner.dismiss': 'Schließen'},
+          }}>
+          <Banner status="info" title="Wartungshinweis" isDismissable />
+        </InternationalizationProvider>,
+      );
+      const button = screen.getByRole('button', {
+        name: 'Schließen Wartungshinweis',
+      });
+      expect(button).toHaveAccessibleDescription('Schließen');
+    });
+  });
 });

package/src/Banner/Banner.tsx

@@ -118,6 +118,15 @@ export interface BannerProps extends BaseProps<HTMLDivElement> {
    * The banner will hide itself regardless of whether this callback is provided.
    */
   onDismiss?: () => void;
+  /**
+   * Accessible name and visible tooltip for the dismiss button, replacing the default.
+   * Pass an already-translated string.
+   *
+   * The default is "Dismiss {title}" when `title` is a string, so stacked
+   * banners are told apart by a screen reader; a non-string `title` falls back
+   * to "Dismiss" and should set this.
+   */
+  dismissLabel?: string;
   /**
    * Action button rendered in the header area (end-aligned).
    * Typically an Button with a secondary or ghost variant.
@@ -440,6 +449,7 @@ export function Banner({
   icon,
   isDismissable = false,
   onDismiss,
+  dismissLabel,
   endContent,
   container = 'card',
   elevation = 'none',
@@ -490,6 +500,15 @@ export function Banner({
   const role = statusRole[status] ?? FALLBACK_ROLE;
   const iconColor = statusIconColor[status];
   const hasChildren = isRenderable(children);
+  // Keep the default tooltip concise while the accessible name identifies
+  // the banner; an explicit translated override names both surfaces.
+  const dismiss = t('@astryx.banner.dismiss');
+  const dismissTooltip = dismissLabel ?? dismiss;
+  const dismissName =
+    dismissLabel ??
+    (typeof title === 'string'
+      ? t('@astryx.banner.dismissTitled', {dismiss, title})
+      : dismiss);
 
   if (isDismissed) {
     return null;
@@ -657,8 +676,8 @@ export function Banner({
               <Button
                 variant="ghost"
                 size="sm"
-                label={t('@astryx.banner.dismiss')}
-                tooltip={t('@astryx.banner.dismiss')}
+                label={dismissName}
+                tooltip={dismissTooltip}
                 icon={<Icon icon="close" size="sm" color="inherit" />}
                 onClick={handleDismiss}
                 isIconOnly

package/src/Button/Button.doc.mjs

@@ -181,7 +181,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-button', visualProps: ['size', 'variant']},
+      {className: 'astryx-button', visualProps: ['size', 'variant', 'elevation']},
     ],
     vars: [
       {name: '--_button-radius', description: 'Border radius', default: 'var(--radius-element)', private: true},
@@ -262,6 +262,7 @@ export const docsZh = {
         visualProps: [
           'size',
           'variant',
+          'elevation',
         ],
       },
     ],

package/src/Button/Button.test.tsx

@@ -476,6 +476,21 @@ describe('Button', () => {
   });
 
   describe('elevation', () => {
+    it('reflects each elevation level as a theme attribute', () => {
+      const attrFor = (elevation: 'none' | 'low' | 'med' | 'high') => {
+        const {container} = render(
+          <Button label="Save" elevation={elevation} />,
+        );
+        return container
+          .querySelector('button')!
+          .getAttribute('data-elevation');
+      };
+      expect(attrFor('none')).toBe('none');
+      expect(attrFor('low')).toBe('low');
+      expect(attrFor('med')).toBe('med');
+      expect(attrFor('high')).toBe('high');
+    });
+
     it('renders a distinct class for each elevation level', () => {
       const classFor = (elevation: 'none' | 'low' | 'med' | 'high') => {
         const {container} = render(
@@ -493,13 +508,13 @@ describe('Button', () => {
     });
 
     it('defaults to flat (elevation none)', () => {
-      const {container: def} = render(<Button label="Save" />);
+      const {container} = render(<Button label="Save" />);
+      const button = container.querySelector('button')!;
+      expect(button).toHaveAttribute('data-elevation', 'none');
       const {container: none} = render(
         <Button label="Save" elevation="none" />,
       );
-      expect(def.querySelector('button')!.className).toBe(
-        none.querySelector('button')!.className,
-      );
+      expect(button.className).toBe(none.querySelector('button')!.className);
     });
   });
 

package/src/Button/Button.tsx

@@ -48,6 +48,7 @@ import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useTranslator} from '../i18n';
 import type {ButtonVariantMap} from './index';
 
@@ -200,35 +201,14 @@ const variants = stylex.create({
   primary: {
     backgroundColor: colorVars['--color-accent'],
     color: colorVars['--color-on-accent'],
-    backgroundImage: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
-    },
   },
   secondary: {
     backgroundColor: colorVars['--color-neutral'],
     color: colorVars['--color-text-primary'],
-    backgroundImage: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
-    },
   },
   ghost: {
     backgroundColor: 'transparent',
     color: colorVars['--color-text-primary'],
-    backgroundImage: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
-    },
   },
   destructive: {
     backgroundColor: colorVars['--color-error'],
@@ -237,13 +217,6 @@ const variants = stylex.create({
     // red button reads as another control's focus. Only the color differs —
     // width, style and offset come from the shared outline.
     outlineColor: {default: null, ':focus-visible': colorVars['--color-error']},
-    backgroundImage: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
-    },
   },
 });
 
@@ -665,6 +638,7 @@ export function Button({
     styles.base,
     sizeStyles[size],
     isIconOnly && styles.iconOnly,
+    interactionOverlayStyles.backgroundImage,
     buttonDisabled && styles.disabled,
     useAriaDisabled && styles.ariaDisabled,
     renderAsLink && styles.link,
@@ -689,7 +663,13 @@ export function Button({
   );
 
   const sharedMergedProps = mergeProps(
-    themeProps('button', {variant, size}),
+    // Inside a group the group owns the surface's elevation, so the button
+    // reflects the tier it actually paints rather than the prop it was handed.
+    themeProps('button', {
+      variant,
+      size,
+      elevation: buttonGroup ? 'none' : elevation,
+    }),
     sharedStylexProps,
     className,
     style,

package/src/ButtonGroup/ButtonGroup.doc.mjs

@@ -46,8 +46,8 @@ export const docs = {
       {guidance: false, description: "Don't mix wildly different actions. A Save button next to a Delete button in the same group is confusing."},
       {guidance: false, description: "Don't use ButtonGroup for navigation. Use SegmentedControl or TabList for switching between views."},
       {guidance: false, description: "Don't nest ButtonGroups. If you need multiple groups, place them side by side with a gap."},
-      {guidance: true, description: 'Name the group for what its buttons act on. The label is the group\u2019s accessible name and a screen reader reads it before each member.'},
-      {guidance: true, description: 'Keep the group a single Tab stop. Arrow keys move between members along the orientation, Home/End jump to the ends, and disabled members are skipped — the WAI-ARIA APG roving tabindex technique: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex'},
+      {guidance: true, description: 'Name the group for what its buttons act on. The label is the group\'s accessible name and a screen reader reads it before each member.'},
+      {guidance: true, description: 'Keep the group a single Tab stop. Arrow keys move between members along the orientation, Home/End jump to the ends, and disabled members are skipped. This is the WAI-ARIA APG roving tabindex technique: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex'},
       {guidance: false, description: "Don't disable the group to show that an action is in flight. A disabled member drops focus, so a keyboard user loses their place; leave the group enabled and show progress on the button that started the work."},
     ],
     anatomy: [

package/src/ButtonGroup/ButtonGroup.test.tsx

@@ -626,6 +626,19 @@ describe('ButtonGroup', () => {
         'high',
       );
     });
+
+    it('reports flat on a member, since the group owns the surface', () => {
+      render(
+        <ButtonGroup label="Actions" elevation="high">
+          <Button label="One" elevation="high" />
+        </ButtonGroup>,
+      );
+
+      expect(screen.getByRole('button', {name: 'One'})).toHaveAttribute(
+        'data-elevation',
+        'none',
+      );
+    });
   });
 
   // ===========================================================================

package/src/Calendar/Calendar.doc.mjs

@@ -78,7 +78,7 @@ export const docs = {
       name: 'minRangeSpan',
       type: 'number',
       description:
-        'Range mode: min days a range must span, both endpoints counted (2 forbids a single-day range). Default 1.',
+        'Range mode: min days a range must span, both endpoints counted (2 forbids a single-day range). Clicking the start again commits a one-day range when allowed, or cancels the in-progress selection when the minimum is longer. Default 1.',
     },
     {
       name: 'focusDate',
@@ -156,7 +156,7 @@ export const docsZh = {
     {name: 'max', type: 'ISODateString', description: '可选择的最晚日期。'},
     {name: 'dateConstraints', type: 'Array<(date: Date) => boolean>', description: '自定义约束函数。'},
     {name: 'maxRangeSpan', type: 'number', description: '范围模式：范围最多可跨越的天数，含首尾两端（7 = 7 天窗口）。选定起始日后限制窗口大小。'},
-    {name: 'minRangeSpan', type: 'number', description: '范围模式：范围最少需跨越的天数，含首尾两端（2 表示禁止单日范围）。默认为 1。'},
+    {name: 'minRangeSpan', type: 'number', description: '范围模式：范围最少需跨越的天数，含首尾两端（2 表示禁止单日范围）。再次点击开始日期时，若最小范围允许则提交单日范围；否则取消进行中的选择。默认为 1。'},
     {name: 'focusDate', type: 'ISODateString', description: '受控可见月份。未设置时，日历打开时显示已选日期所在月份；若无选中值，则显示今天，并将其限制在 min/max 范围内。'},
     {name: 'onFocusDateChange', type: '(focusDate: ISODateString) => void', description: '导航回调函数。'},
     {name: 'handleRef', type: 'React.Ref<CalendarHandle>', description: '日历导航的命令式句柄，包括 navigateTo()。'},
@@ -221,7 +221,7 @@ export const docsDense = {
     max: 'maximum selectable date',
     dateConstraints: 'custom constraint fns',
     maxRangeSpan: 'range mode: max days a range may span, both ends counted (7 = 7-day window)',
-    minRangeSpan: 'range mode: min days a range must span, both ends counted (default 1)',
+    minRangeSpan: 'range mode: min days a range must span, both ends counted; repeated start click commits one day when allowed, otherwise cancels (default 1)',
     focusDate: 'controlled visible month (default: selected date, else today clamped into min/max)',
     onFocusDateChange: 'navigation callback',
     handleRef: 'imperative navigation handle',

package/src/Calendar/Calendar.test.tsx

@@ -13,6 +13,10 @@ 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';
+import {
+  getForcedColorsRules,
+  getAllInjectedCss,
+} from '../__tests__/forcedColors';
 import * as stylex from '@stylexjs/stylex';
 import {Calendar} from './Calendar';
 import type {CalendarHandle} from './Calendar';
@@ -161,6 +165,27 @@ describe('Calendar', () => {
     ).toEqual([...localizedNames.slice(1), localizedNames[0]]);
   });
 
+  it('updates the month header and subsequent navigation with provider locale', async () => {
+    const user = userEvent.setup();
+    const renderCalendar = (locale: 'en-US' | 'es-ES') => (
+      <InternationalizationProvider locale={locale}>
+        <Calendar focusDate="2026-01-01" />
+      </InternationalizationProvider>
+    );
+    const {rerender} = render(renderCalendar('en-US'));
+
+    expect(screen.getByText('January 2026')).toBeInTheDocument();
+
+    rerender(renderCalendar('es-ES'));
+    expect(screen.getByText('enero de 2026')).toBeInTheDocument();
+
+    const nextButton =
+      document.querySelector<HTMLButtonElement>('[data-nav="next"]');
+    expect(nextButton).not.toBeNull();
+    await user.click(nextButton!);
+    expect(screen.getByText('febrero de 2026')).toBeInTheDocument();
+  });
+
   it('displays correct number of day cells', () => {
     render(<Calendar />);
 
@@ -363,6 +388,46 @@ describe('Calendar', () => {
     expect(getDayButton(9)).toBeDisabled(); // 2-day span — too short
   });
 
+  it('commits a same-day range with the default minimum', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <Calendar mode="range" focusDate="2026-01-01" onChange={handleChange} />,
+    );
+
+    await user.click(getDayButton(10));
+    await user.click(getDayButton(10));
+
+    expect(handleChange).toHaveBeenCalledWith({
+      start: '2026-01-10',
+      end: '2026-01-10',
+    });
+  });
+
+  it('commits a same-day range when the minimum permits it, including with a maximum', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(
+      <Calendar
+        mode="range"
+        focusDate="2026-01-01"
+        onChange={handleChange}
+        minRangeSpan={1}
+        maxRangeSpan={7}
+      />,
+    );
+
+    await user.click(getDayButton(10));
+    await user.click(getDayButton(10));
+
+    expect(handleChange).toHaveBeenCalledWith({
+      start: '2026-01-10',
+      end: '2026-01-10',
+    });
+  });
+
   it('clears the in-progress start when the anchor is clicked again', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();
@@ -389,6 +454,33 @@ describe('Calendar', () => {
     expect(getDayButton(9)).not.toBeDisabled();
   });
 
+  it('announces the cleared range in the provider locale', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <InternationalizationProvider locale="ja-JP">
+        <Calendar mode="range" focusDate="2026-01-01" />
+      </InternationalizationProvider>,
+    );
+
+    // The day button's own accessible name is already localized through the
+    // provider. The announcement has to use the same date string: formatting
+    // it without the locale silently falls back to the host locale, so a
+    // Japanese user hears an English date.
+    const anchor = document.querySelector<HTMLButtonElement>(
+      'button[data-date="2026-01-10"]',
+    );
+    const localizedDate = anchor?.getAttribute('aria-label');
+    expect(localizedDate).toBeTruthy();
+
+    await user.click(anchor as HTMLButtonElement);
+    await user.click(anchor as HTMLButtonElement);
+
+    await waitFor(() => {
+      expect(politeRegion()?.textContent).toContain(localizedDate);
+    });
+  });
+
   it('does not apply range-span constraints in single mode', async () => {
     const user = userEvent.setup();
 
@@ -1430,3 +1522,23 @@ describe('Calendar', () => {
     });
   });
 });
+
+// jsdom cannot emulate forced-colors rendering, so this asserts that the
+// compiled output includes the forced-colors rules; visual behavior needs
+// manual verification under Windows High Contrast.
+describe('forced colors (WCAG 1.4.11)', () => {
+  it('compiles a forced-colors fill so the selected date survives Windows High Contrast', () => {
+    render(
+      <Calendar mode="single" value="2026-01-15" focusDate="2026-01-01" />,
+    );
+
+    const css = getForcedColorsRules();
+    // Without these the accent fill is stripped and the selected date renders
+    // identically to every other day in the month.
+    expect(css).toContain('background-color: highlight;');
+    expect(css).toContain('color: highlighttext;');
+    // A <button> keeps the native ButtonFace surface and ignores the authored
+    // Highlight fill unless it opts out of UA remapping.
+    expect(getAllInjectedCss()).toContain('forced-color-adjust: none;');
+  });
+});

package/src/Calendar/Calendar.tsx

@@ -19,7 +19,6 @@
  */
 
 import {
-  use,
   useState,
   useMemo,
   useCallback,
@@ -61,6 +60,7 @@ import {
 } from '../utils/plainDate';
 import {mergeProps, composeEventHandlers, rtlStyles} from '../utils';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {getInitialFocusDate} from './getInitialFocusDate';
 import {
   computeDayCellState,
@@ -89,7 +89,7 @@ import type {
 } from '../utils/dateTypes';
 import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator, InternationalizationContext} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 
 /** Imperative handle for Calendar handleRef */
 
@@ -137,8 +137,10 @@ interface CalendarBaseProps extends Omit<
    * Range mode only. Minimum number of days a selected range must span,
    * counting both endpoints — `minRangeSpan={2}` forbids a single-day range.
    * Once a start date is picked, days closer than this to it are disabled —
-   * except the start itself, which stays selectable as the active anchor.
-   * Defaults to 1 (a same-day start and end is allowed).
+   * except the start itself, which stays selectable. Clicking the start again
+   * commits a one-day range when the minimum allows it; otherwise it cancels
+   * the in-progress selection so the start can be moved. Defaults to 1 (a
+   * same-day start and end is allowed).
    */
   minRangeSpan?: number;
 
@@ -225,7 +227,7 @@ export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
  */
 export function Calendar({ref, ...props}: CalendarProps) {
   const t = useTranslator();
-  const {locale} = use(InternationalizationContext);
+  const locale = useLocale();
   const {
     handleRef,
     mode = 'single',
@@ -452,17 +454,16 @@ export function Calendar({ref, ...props}: CalendarProps) {
           // Second click - complete the range
           const startPd = plainDateFromISO(rangeSelectionStart);
 
-          // Clicking the anchor again clears the in-progress start rather than
-          // committing a zero-length range. This is also the escape hatch when
-          // `minRangeSpan` disables the days around the anchor: without it the
-          // anchor would be the only clickable day left and the start could
-          // never be moved. `minRangeSpan` leaves the anchor itself enabled
-          // precisely so this toggle stays reachable.
-          if (plainDateIsEqual(date, startPd)) {
+          // Clicking the anchor again commits a one-day range when the minimum
+          // span allows it. For longer minimum spans, the repeated click clears
+          // the in-progress start instead: the anchor is the only nearby day
+          // that remains enabled, so this preserves an escape hatch for moving
+          // the start without violating the configured minimum.
+          if (plainDateIsEqual(date, startPd) && (minRangeSpan ?? 1) > 1) {
             setRangeSelectionStart(null);
             announce(
               t('@astryx.calendar.rangeClearedAnnounce', {
-                date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY),
+                date: plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY, locale),
               }),
             );
             return;
@@ -503,7 +504,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
         }
       }
     },
-    [mode, onChange, rangeSelectionStart, announce, t, locale],
+    [mode, onChange, rangeSelectionStart, minRangeSpan, announce, t, locale],
   );
 
   return (
@@ -652,7 +653,7 @@ function MonthGrid({
   pendingFocus,
   onPendingFocusHandled,
 }: MonthGridProps) {
-  const {locale} = use(InternationalizationContext);
+  const locale = useLocale();
   const year = month.year;
 
   // Use hooks for days generation and constraints
@@ -1033,7 +1034,7 @@ function DayCell({
   onDayHover,
 }: DayCellProps) {
   const t = useTranslator();
-  const {locale} = use(InternationalizationContext);
+  const locale = useLocale();
   const {date, isOutside, dayNumber} = day;
 
   if (isOutside && !hasOutsideDays) {
@@ -1178,6 +1179,7 @@ function DayCell({
           focusOutlineProps.focusVisible(
             dayCellStyles.day,
             dayCellTheme.day,
+            interactionOverlayStyles.backgroundImage,
             isOutside && dayCellStyles.dayOutside,
             isOutside && dayCellTheme.dayOutside,
             showsTodayRing && dayCellStyles.dayToday,