@astryxdesign/core 0.4.4 → 0.4.5-canary.013e728

package/src/Chat/useSpeechRecognition.ts

@@ -14,14 +14,14 @@
  */
 
 import {useState, useCallback, useEffect, useMemo, useRef} from 'react';
-import {useTranslator} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
 // =============================================================================
 
 export interface UseSpeechRecognitionOptions {
-  /** BCP-47 language tag. @default navigator.language */
+  /** BCP-47 language tag. @default InternationalizationProvider locale */
   lang?: string;
   /** Whether recognition continues until explicitly stopped. @default true */
   continuous?: boolean;
@@ -260,6 +260,7 @@ export function useSpeechRecognition(
   options: UseSpeechRecognitionOptions = {},
 ): UseSpeechRecognitionReturn {
   const t = useTranslator();
+  const providerLocale = useLocale();
   const {
     lang,
     continuous = true,
@@ -348,7 +349,7 @@ export function useSpeechRecognition(
     }
     recognitionRef.current?.abort();
     const recognition = new SR();
-    recognition.lang = lang ?? navigator.language;
+    recognition.lang = lang ?? providerLocale;
     recognition.continuous = continuous;
     recognition.interimResults = interimResults;
 
@@ -418,6 +419,7 @@ export function useSpeechRecognition(
     recognition.start();
   }, [
     lang,
+    providerLocale,
     continuous,
     interimResults,
     startVolumePolling,

package/src/CheckboxInput/CheckboxInput.tsx

@@ -47,6 +47,7 @@ import {useTooltip} from '../Tooltip';
 import {mergeProps, mergeRefs} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useIndicator} from '../Indicator';
 import {themeProps} from '../utils/themeProps';
 import {CheckboxListContext} from '../CheckboxList/CheckboxListContext';
@@ -301,6 +302,10 @@ export function CheckboxInput({
   const id = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
+  // Announce the effective required state (form default included) while the
+  // native `required` stays bound to the explicit `isRequired` so a layout
+  // default never switches on browser validation.
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
 
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
@@ -421,6 +426,7 @@ export function CheckboxInput({
             form={isFocusableDisabled ? '' : undefined}
             readOnly={isReadOnly}
             required={isRequired}
+            aria-required={isEffectivelyRequired ? 'true' : undefined}
             onChange={e => {
               if (isDisabled || isBusy || isReadOnly) {
                 return;

package/src/Citation/Citation.tsx

@@ -103,7 +103,7 @@ const styles = stylex.create({
   },
   labelHover: {
     backgroundColor: {
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -112,7 +112,7 @@ const styles = stylex.create({
       // the base secondary color from `label` (last-wins property merge),
       // leaving linked citations to inherit the surrounding text color.
       default: colorVars['--color-text-secondary'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-text-primary'],
       },
     },
@@ -145,7 +145,7 @@ const styles = stylex.create({
       // hover-only conditional replaces the base accent-muted pill from
       // `number` on merge, leaving linked badges transparent.
       default: colorVars['--color-accent-muted'],
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },

package/src/ClickableCard/ClickableCard.tsx

@@ -78,7 +78,7 @@ const styles = stylex.create({
   },
   hoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover::after': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))::after': {
         backgroundColor: colorVars['--color-overlay-hover'],
       },
     },
@@ -110,7 +110,7 @@ const styles = stylex.create({
   // @media (hover: hover) so touch devices don't get a stuck hover state.
   borderedHoverOnPointer: {
     '@media (hover: hover)': {
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         borderColor: colorVars['--color-border-emphasized'],
       },
     },

package/src/CommandPalette/CommandPaletteItem.tsx

@@ -49,7 +49,7 @@ const styles = stylex.create({
     userSelect: 'none',
   },
   itemHover: {
-    ':hover': {
+    ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
       [HOVER_HOVER]: {
         backgroundColor: colorVars['--color-overlay-hover'],
       },

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -215,6 +215,16 @@ export const docsDense = {
     description:
       'Use when a selection needs richer custom content than a Selector row. One component: it owns field, trigger, popover, focus restore, and changeAction; the render prop owns the selector-specific accessible structure.',
     bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Use variant="ghost" with a startIcon for a toolbar trigger. Use alignment="end" when a wide surface should align its end edge to the trigger.',
+      },
+      {
+        guidance: true,
+        description:
+          'For staged editors, keep draft state in the composed content and call the provided onChange helper only from Apply. Cancel or dismiss without committing.',
+      },
       {
         guidance: true,
         description:

package/src/ComplexSelector/ComplexSelector.tsx

@@ -35,6 +35,7 @@ import {useTranslator} from '../i18n';
 import {layerAnimations} from '../Layer/layerAnimations.stylex';
 import type {LayerAlignment, LayerPlacement} from '../Layer/useLayer';
 import {usePopover} from '../Popover/usePopover';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {
   colorVars,
   durationVars,
@@ -110,16 +111,17 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     backgroundImage: {
       default: null,
-      ':hover': {
+      ':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']})`,
     },
     boxShadow: {
       default: 'none',
-      ':hover:not(:focus-within)': {
-        '@media (hover: hover)': 'none',
-      },
+      ':hover:not(:focus-within):where(:not(:disabled,[aria-disabled="true"]))':
+        {
+          '@media (hover: hover)': 'none',
+        },
       ':focus-within': 'none',
     },
     fontWeight: fontWeightVars['--font-weight-medium'],
@@ -344,6 +346,7 @@ export function ComplexSelector<Value>({
   ...props
 }: ComplexSelectorProps<Value>) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
   const effectiveStatusVariant =
     variant === 'ghost' && statusVariant === 'attached'
@@ -497,7 +500,7 @@ export function ComplexSelector<Value>({
           aria-controls={contentId}
           aria-describedby={ariaDescribedBy}
           aria-labelledby={labelId}
-          aria-required={isRequired ? 'true' : undefined}
+          aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={status?.type === 'error' ? 'true' : undefined}
           aria-busy={isBusy || undefined}
           disabled={isDisabled}

package/src/DateInput/DateInput.test.tsx

@@ -917,6 +917,22 @@ describe('DateInput', () => {
       expect(screen.getByDisplayValue('Jan 25, 2026')).toBeInTheDocument();
     });
 
+    it('follows the InternationalizationProvider locale (#5074)', () => {
+      render(
+        <InternationalizationProvider locale="es-ES">
+          <DateInput
+            label="Date"
+            value="2026-01-25"
+            onChange={() => {}}
+            format="date_long"
+          />
+        </InternationalizationProvider>,
+      );
+      expect(
+        screen.getByDisplayValue('25 de enero de 2026'),
+      ).toBeInTheDocument();
+    });
+
     it('renders the ISO shape for format="system_date"', () => {
       render(
         <DateInput
@@ -1186,7 +1202,7 @@ describe('DateInput clear icon theme target', () => {
     expect(css).toContain('.astryx-date-input-clear-icon {');
     expect(css).toContain('width: 12px');
     expect(css).toContain('height: 12px');
-    expect(css).toContain('.astryx-date-input-clear-icon:hover {');
+    expect(css).toContain('.astryx-date-input-clear-icon:hover');
     expect(css).toContain('color: var(--color-icon-primary)');
   });
 });

package/src/DateInput/DateInput.tsx

@@ -17,6 +17,7 @@
  */
 
 import {
+  use,
   useId,
   useState,
   useCallback,
@@ -58,6 +59,7 @@ import {
 } from '../Calendar';
 import {useCalendarConstraints} from '../Calendar/hooks';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
 import {getInputARIA, isImeKeyEvent, parseDateInput} from '../utils';
@@ -160,7 +162,7 @@ import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
-import {useTranslator} from '../i18n';
+import {useTranslator, InternationalizationContext} from '../i18n';
 
 export interface DateInputProps extends Omit<
   BaseProps,
@@ -399,6 +401,8 @@ export function DateInput({
   ...rest
 }: DateInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+  const {locale} = use(InternationalizationContext);
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -481,8 +485,8 @@ export function DateInput({
     (iso: ISODateString): string =>
       typeof format === 'function'
         ? format(iso)
-        : formatSharedDate(plainDateFromISO(iso), format),
-    [format],
+        : formatSharedDate(plainDateFromISO(iso), format, locale),
+    [format, locale],
   );
 
   // Display value: pending input if typing, otherwise formatted value
@@ -497,7 +501,7 @@ export function DateInput({
   const isInputValid =
     pendingInput === null || !pendingInput.trim()
       ? true
-      : parseDateInput(pendingInput) !== null;
+      : parseDateInput(pendingInput, locale) !== null;
 
   const popover = usePopover({
     dialogLabel: t('@astryx.dateInput.dialogLabel'),
@@ -579,7 +583,7 @@ export function DateInput({
       setPendingInput(newValue);
 
       // If the input is valid and passes constraints, update immediately
-      const parsed = parseDateInput(newValue);
+      const parsed = parseDateInput(newValue, locale);
       if (
         parsed &&
         plainDateToISO(parsed) !== value &&
@@ -592,7 +596,7 @@ export function DateInput({
         calendarRef.current?.navigateTo(parsedISO);
       }
     },
-    [value, fireChange, isDateDisabled, isEffectivelyDisabled],
+    [value, fireChange, isDateDisabled, isEffectivelyDisabled, locale],
   );
 
   // Commit pending input (shared by blur and Enter key)
@@ -609,7 +613,7 @@ export function DateInput({
       return;
     }
 
-    const parsed = parseDateInput(pendingInput);
+    const parsed = parseDateInput(pendingInput, locale);
     if (parsed && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       if (parsedISO !== value) {
@@ -617,7 +621,7 @@ export function DateInput({
       }
     }
     setPendingInput(null);
-  }, [pendingInput, value, fireChange, isDateDisabled]);
+  }, [pendingInput, value, fireChange, isDateDisabled, locale]);
 
   // Handle blur - validate, check constraints, and clear pending input
   const handleBlur = useCallback(() => {
@@ -737,7 +741,7 @@ export function DateInput({
         readOnly={showsDisabledMessage || undefined}
         aria-labelledby={ariaLabelledBy}
         aria-describedby={ariaDescribedBy}
-        aria-required={isRequired === true ? 'true' : undefined}
+        aria-required={isEffectivelyRequired ? 'true' : undefined}
         aria-invalid={
           status?.type === 'error' || !isInputValid ? 'true' : undefined
         }

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -98,6 +98,18 @@ export const docs = {
       type: 'Array<(date: Date) => boolean>',
       description: 'Custom constraint functions to disable specific dates.',
     },
+    {
+      name: 'maxRangeSpan',
+      type: 'number',
+      description:
+        'Maximum days a selected range may span, counting both endpoints (`7` = a 7-day window, start + 6). Once a start is picked, days beyond this distance are disabled so the range cannot stretch past the cap. Rolling window relative to the start; for fixed calendar bounds use `min`/`max`. Constrains selection only; it never rewrites a `value` already wider than the cap (flag that with `status`).',
+    },
+    {
+      name: 'minRangeSpan',
+      type: 'number',
+      description:
+        'Minimum days a selected range must span, counting both endpoints (`2` forbids a single-day range). Once a start is picked, days closer than this are disabled. Defaults to 1 (same-day start and end allowed).',
+    },
     {
       name: 'presets',
       type: 'Array<DateRangePreset>',
@@ -313,6 +325,10 @@ export const docsDense = {
     min: 'min selectable date: ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
     max: 'max selectable date: ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
     dateConstraints: 'custom constraint fns to disable dates',
+    maxRangeSpan:
+      'max days a range may span, both endpoints counted (7 = a 7-day window); caps the window from the picked start. Selection-only; does not rewrite an over-wide value',
+    minRangeSpan:
+      'min days a range must span, both endpoints counted (2 forbids a single-day range); default 1',
     presets: 'preset ranges as quick-select options',
     hasClear: 'clear button when range is set (default true)',
     placeholder: 'placeholder when empty',

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When DateRangeInput.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -712,3 +712,83 @@ describe('DateRangeInput disabled theme state', () => {
     expect(root).not.toHaveAttribute('data-disabled');
   });
 });
+
+describe('DateRangeInput range-span forwarding', () => {
+  // Pin "today" so the popover opens on a known month and the day buttons we
+  // query are guaranteed to render.
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date('2026-01-05T12:00:00Z'));
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // The calendar renders in the top layer; jsdom keeps day buttons in the DOM
+  // but role queries skip them, so reach them by their machine-readable
+  // data-date (ISO) attribute — the same approach Calendar's own tests use.
+  const dayButton = (iso: string): HTMLButtonElement | null =>
+    document.querySelector<HTMLButtonElement>(`button[data-date="${iso}"]`);
+
+  it('forwards maxRangeSpan so the window caps after a start is picked', () => {
+    render(
+      <DateRangeInput
+        label="Reporting period"
+        value={null}
+        onChange={() => {}}
+        maxRangeSpan={7}
+      />,
+    );
+
+    fireEvent.click(getButton('Open calendar'));
+
+    // Before a start is picked, a far-off day is selectable.
+    expect(dayButton('2026-01-20')).not.toBeDisabled();
+
+    fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
+
+    // A 7-day window spans start ± 6 days: Jan 16 is the edge, Jan 17 is out.
+    expect(dayButton('2026-01-16')).not.toBeDisabled();
+    expect(dayButton('2026-01-17')).toBeDisabled();
+  });
+
+  it('disables a preset whose range violates the span cap', () => {
+    const presets = [
+      {
+        label: 'Last 3 days',
+        getRange: (): DateRange => ({
+          start: '2026-01-08',
+          end: '2026-01-10',
+        }),
+      },
+      {
+        label: 'Last 30 days',
+        getRange: (): DateRange => ({
+          start: '2025-12-12',
+          end: '2026-01-10',
+        }),
+      },
+    ];
+    const handleChange = vi.fn();
+    render(
+      <DateRangeInput
+        label="Reporting period"
+        value={null}
+        onChange={handleChange}
+        maxRangeSpan={7}
+        presets={presets}
+      />,
+    );
+
+    fireEvent.click(getButton('Open calendar'));
+
+    // The 3-day preset fits the 7-day cap; the 30-day preset can't be committed.
+    const withinCap = getButton('Last 3 days');
+    const overCap = getButton('Last 30 days');
+    expect(withinCap).not.toBeDisabled();
+    expect(overCap).toBeDisabled();
+
+    fireEvent.click(overCap);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+});

package/src/DateRangeInput/DateRangeInput.tsx

@@ -16,12 +16,20 @@
  * - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
  */
 
-import {useId, useCallback, useMemo, useOptimistic, useTransition} from 'react';
+import {
+  use,
+  useId,
+  useCallback,
+  useMemo,
+  useOptimistic,
+  useTransition,
+} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   plainDateFromISO,
   plainDateToday,
   plainDateFormat,
+  plainDateDiffDays,
   DATE_FORMAT_SHORT,
   DATE_FORMAT_SHORT_WITH_YEAR,
 } from '../utils/plainDate';
@@ -60,10 +68,12 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
-import {useTranslator} from '../i18n';
+import {useTranslator, InternationalizationContext} from '../i18n';
+import type {Locale} from '../i18n/types';
 
 export type {DateRange} from '../Calendar';
 
@@ -146,7 +156,7 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-element'],
     backgroundColor: {
       default: 'transparent',
-      ':hover': {
+      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
     },
@@ -161,6 +171,11 @@ const styles = stylex.create({
     backgroundColor: colorVars['--color-accent-muted'],
     color: colorVars['--color-accent'],
   },
+  presetButtonDisabled: {
+    color: colorVars['--color-text-disabled'],
+    cursor: 'not-allowed',
+    backgroundColor: 'transparent',
+  },
 });
 
 const sizeStyles = stylex.create({
@@ -178,7 +193,7 @@ const sizeStyles = stylex.create({
   },
 });
 
-function formatRangeDisplay(range: DateRange | null): string {
+function formatRangeDisplay(range: DateRange | null, locale?: Locale): string {
   if (!range) {
     return '';
   }
@@ -188,7 +203,7 @@ function formatRangeDisplay(range: DateRange | null): string {
   const sameYear = start.year === end.year && start.year === currentYear;
 
   const fmt = sameYear ? DATE_FORMAT_SHORT : DATE_FORMAT_SHORT_WITH_YEAR;
-  return `${plainDateFormat(start, fmt)} – ${plainDateFormat(end, fmt)}`;
+  return `${plainDateFormat(start, fmt, locale)} – ${plainDateFormat(end, fmt, locale)}`;
 }
 
 function isRangeEqual(a: DateRange | null, b: DateRange | null): boolean {
@@ -201,6 +216,34 @@ function isRangeEqual(a: DateRange | null, b: DateRange | null): boolean {
   return a.start === b.start && a.end === b.end;
 }
 
+// A preset that would land outside the span bounds is disabled rather than
+// allowed to override them: the cap is authoritative, so an out-of-window
+// preset stays visible (discoverable) but non-committable, mirroring how the
+// calendar disables out-of-window days. Spans count both endpoints.
+function isRangeWithinSpan(
+  range: DateRange,
+  maxRangeSpan: number | undefined,
+  minRangeSpan: number | undefined,
+): boolean {
+  if (maxRangeSpan == null && minRangeSpan == null) {
+    return true;
+  }
+  const span =
+    Math.abs(
+      plainDateDiffDays(
+        plainDateFromISO(range.start),
+        plainDateFromISO(range.end),
+      ),
+    ) + 1;
+  if (maxRangeSpan != null && span > maxRangeSpan) {
+    return false;
+  }
+  if (minRangeSpan != null && span < minRangeSpan) {
+    return false;
+  }
+  return true;
+}
+
 export interface DateRangeInputProps extends Omit<
   BaseProps,
   'onChange' | 'defaultValue'
@@ -303,6 +346,30 @@ export interface DateRangeInputProps extends Omit<
    */
   dateConstraints?: ReadonlyArray<(date: Date) => boolean>;
 
+  /**
+   * Maximum number of days the selected range may span, counting both
+   * endpoints — `maxRangeSpan={7}` allows a 7-day window (start + 6 days).
+   * Once a start date is picked, days beyond this distance from it are
+   * disabled, so the user can't stretch the range past the cap. Use for
+   * rolling windows like "at most a week from the chosen day"; for fixed
+   * calendar bounds use `min`/`max`.
+   *
+   * This constrains selection only — it never rewrites a `value` that is
+   * already wider than the cap. Surface such a value with `status` if you
+   * need to flag it. A `preset` whose range violates the cap is disabled
+   * (shown but not committable) rather than allowed to override it.
+   */
+  maxRangeSpan?: number;
+
+  /**
+   * Minimum number of days the 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).
+   */
+  minRangeSpan?: number;
+
   /**
    * Preset date ranges shown as quick-select options beside the calendar.
    */
@@ -396,6 +463,8 @@ export function DateRangeInput({
   min,
   max,
   dateConstraints,
+  maxRangeSpan,
+  minRangeSpan,
   presets,
   hasClear = true,
   placeholder: placeholderFromProps,
@@ -413,6 +482,8 @@ export function DateRangeInput({
   ...rest
 }: DateRangeInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
+  const {locale} = use(InternationalizationContext);
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -459,8 +530,8 @@ export function DateRangeInput({
       .join(' ') || undefined;
 
   const displayValue = useMemo(
-    () => formatRangeDisplay(optimisticValue),
-    [optimisticValue],
+    () => formatRangeDisplay(optimisticValue, locale),
+    [optimisticValue, locale],
   );
 
   const popover = usePopover({
@@ -609,7 +680,7 @@ export function DateRangeInput({
           aria-disabled={showsDisabledMessage ? 'true' : undefined}
           aria-label={triggerAriaLabel}
           aria-describedby={ariaDescribedBy}
-          aria-required={isRequired === true ? 'true' : undefined}
+          aria-required={isEffectivelyRequired ? 'true' : undefined}
           aria-invalid={status?.type === 'error' ? 'true' : undefined}
           aria-busy={isBusy || undefined}
           aria-expanded={popover.isOpen}
@@ -642,6 +713,11 @@ export function DateRangeInput({
               {presets.map(preset => {
                 const presetRange = preset.getRange();
                 const isActive = isRangeEqual(value, presetRange);
+                const isPresetDisabled = !isRangeWithinSpan(
+                  presetRange,
+                  maxRangeSpan,
+                  minRangeSpan,
+                );
                 return (
                   <button
                     key={preset.label}
@@ -652,11 +728,13 @@ export function DateRangeInput({
                     // marked with aria-current (not aria-selected, a listbox
                     // concept that contradicted the Tab interaction) (forms-5).
                     aria-current={isActive ? 'true' : undefined}
+                    disabled={isPresetDisabled}
                     onClick={() => handlePresetClick(preset)}
                     {...stylex.props(
                       focusOutlineStyles.focusVisible,
                       styles.presetButton,
                       isActive && styles.presetButtonActive,
+                      isPresetDisabled && styles.presetButtonDisabled,
                     )}>
                     {preset.label}
                   </button>
@@ -671,6 +749,8 @@ export function DateRangeInput({
             min={min}
             max={max}
             dateConstraints={dateConstraints}
+            maxRangeSpan={maxRangeSpan}
+            minRangeSpan={minRangeSpan}
             numberOfMonths={numberOfMonths}
             weekStartsOn={weekStartsOn}
           />