@astryxdesign/core 0.4.4 → 0.4.5-canary.1fdecb1

package/src/Center/Center.test.tsx

@@ -13,6 +13,22 @@ import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {Center} from './Center';
 
+/**
+ * The functional class output, as an order-insensitive set. StyleX's dev
+ * runtime also emits readable debug classes naming the style object a
+ * declaration came from ("padding__paddingBlockStyles.2"); those record
+ * provenance rather than applied CSS and survive even when the declaration
+ * they name loses a merge, so they are dropped here.
+ */
+function classSet(el: HTMLElement): Set<string> {
+  return new Set(
+    el.className
+      .split(' ')
+      .filter(Boolean)
+      .filter(c => !c.includes('__') && !c.includes('.')),
+  );
+}
+
 describe('Center', () => {
   it('renders and centers children (both axes by default)', () => {
     render(
@@ -207,4 +223,146 @@ describe('Center', () => {
     const element = screen.getByTestId('center');
     expect(element.tagName).toBe('DIV');
   });
+
+  it('applies a class when paddingBlockStart is set on its own', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center paddingBlockStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('lets paddingBlockStart/paddingBlockEnd override only their own edge', () => {
+    // padding={4} + paddingBlockStart={2} must equal spelling every edge out:
+    // both inline edges and the block-end edge stay at 4.
+    const {rerender} = render(
+      <Center padding={4} paddingBlockStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const perEdge = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        paddingInline={4}
+        paddingBlockStart={2}
+        paddingBlockEnd={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('gives paddingBlockEnd precedence over paddingBlock', () => {
+    const {rerender} = render(
+      <Center paddingBlock={6} paddingBlockEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const overridden = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingBlockStart={6} paddingBlockEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('leaves padding/paddingBlock output unchanged when no edge prop is set', () => {
+    const {rerender} = render(
+      <Center padding={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const uniform = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingInline={3} paddingBlock={3} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(uniform).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('applies a class when paddingInlineStart is set on its own', () => {
+    const {rerender} = render(
+      <Center data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const baseline = screen.getByTestId('center').className;
+    rerender(
+      <Center paddingInlineStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(screen.getByTestId('center').className).not.toBe(baseline);
+  });
+
+  it('lets paddingInlineStart/paddingInlineEnd override only their own edge', () => {
+    const {rerender} = render(
+      <Center padding={4} paddingInlineStart={2} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const perEdge = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        paddingInlineStart={2}
+        paddingInlineEnd={4}
+        paddingBlock={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(perEdge).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('gives paddingInlineEnd precedence over paddingInline', () => {
+    const {rerender} = render(
+      <Center paddingInline={6} paddingInlineEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const overridden = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center paddingInlineStart={6} paddingInlineEnd={0} data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(overridden).toEqual(classSet(screen.getByTestId('center')));
+  });
+
+  it('resolves all four edges independently', () => {
+    // One prop per edge, each a different step: the four-edge spelling and the
+    // shorthand-plus-overrides spelling must agree.
+    const {rerender} = render(
+      <Center
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        paddingBlockEnd={4}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    const explicit = classSet(screen.getByTestId('center'));
+    rerender(
+      <Center
+        padding={4}
+        paddingInlineStart={1}
+        paddingInlineEnd={2}
+        paddingBlockStart={3}
+        data-testid="center">
+        <div>Content</div>
+      </Center>,
+    );
+    expect(explicit).toEqual(classSet(screen.getByTestId('center')));
+  });
 });

package/src/Center/Center.tsx

@@ -18,8 +18,10 @@ import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {SizeValue, SpacingStep} from '../utils/types';
 import {
-  paddingInlineStyles,
-  paddingBlockStyles,
+  paddingInlineStartStyles,
+  paddingInlineEndStyles,
+  paddingBlockStartStyles,
+  paddingBlockEndStyles,
 } from '../Layout/padding.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
@@ -106,12 +108,38 @@ export interface CenterProps extends BaseProps<HTMLDivElement> {
    */
   paddingInline?: SpacingStep;
 
+  /**
+   * Inline-start padding, using the spacing scale. Logical: the left edge in
+   * LTR, the right edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineStart?: SpacingStep;
+
+  /**
+   * Inline-end padding, using the spacing scale. Logical: the right edge in
+   * LTR, the left edge in RTL.
+   * Overrides `paddingInline` and `padding` on that edge only.
+   */
+  paddingInlineEnd?: SpacingStep;
+
   /**
    * Block (vertical) padding, using the spacing scale.
    * Overrides `padding` on the block axis when both are set.
    */
   paddingBlock?: SpacingStep;
 
+  /**
+   * Block-start (top) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockStart?: SpacingStep;
+
+  /**
+   * Block-end (bottom) padding, using the spacing scale.
+   * Overrides `paddingBlock` and `padding` on that edge only.
+   */
+  paddingBlockEnd?: SpacingStep;
+
   /**
    * Whether to make the container inline-flex (useful for text/icons).
    * @default false
@@ -145,7 +173,11 @@ export function Center({
   minHeight,
   padding,
   paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
   paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
   isInline = false,
   children,
   xstyle,
@@ -154,10 +186,14 @@ export function Center({
   ref,
   ...props
 }: CenterProps) {
-  // Resolve padding to per-axis values: `padding` sets both axes; `paddingInline`
-  // / `paddingBlock` take precedence on their own axis when provided.
-  const resolvedPaddingInline = paddingInline ?? padding;
-  const resolvedPaddingBlock = paddingBlock ?? padding;
+  // Resolve padding to per-edge values. Most specific wins, per edge:
+  // edge prop -> axis prop -> `padding`.
+  const resolvedPaddingInlineStart =
+    paddingInlineStart ?? paddingInline ?? padding;
+  const resolvedPaddingInlineEnd = paddingInlineEnd ?? paddingInline ?? padding;
+  const resolvedPaddingBlockStart =
+    paddingBlockStart ?? paddingBlock ?? padding;
+  const resolvedPaddingBlockEnd = paddingBlockEnd ?? paddingBlock ?? padding;
 
   const stylexProps = mergeProps(
     themeProps('center', {axis}),
@@ -171,9 +207,14 @@ export function Center({
         maxWidth ?? null,
         minHeight ?? null,
       ),
-      resolvedPaddingInline != null &&
-        paddingInlineStyles[resolvedPaddingInline],
-      resolvedPaddingBlock != null && paddingBlockStyles[resolvedPaddingBlock],
+      resolvedPaddingInlineStart != null &&
+        paddingInlineStartStyles[resolvedPaddingInlineStart],
+      resolvedPaddingInlineEnd != null &&
+        paddingInlineEndStyles[resolvedPaddingInlineEnd],
+      resolvedPaddingBlockStart != null &&
+        paddingBlockStartStyles[resolvedPaddingBlockStart],
+      resolvedPaddingBlockEnd != null &&
+        paddingBlockEndStyles[resolvedPaddingBlockEnd],
       xstyle,
     ),
     className,

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/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,
@@ -344,6 +345,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 +499,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.tsx

@@ -58,6 +58,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';
@@ -399,6 +400,7 @@ export function DateInput({
   ...rest
 }: DateInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -737,7 +739,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

@@ -22,6 +22,7 @@ import {
   plainDateFromISO,
   plainDateToday,
   plainDateFormat,
+  plainDateDiffDays,
   DATE_FORMAT_SHORT,
   DATE_FORMAT_SHORT_WITH_YEAR,
 } from '../utils/plainDate';
@@ -60,6 +61,7 @@ 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';
@@ -161,6 +163,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({
@@ -201,6 +208,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 +338,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 +455,8 @@ export function DateRangeInput({
   min,
   max,
   dateConstraints,
+  maxRangeSpan,
+  minRangeSpan,
   presets,
   hasClear = true,
   placeholder: placeholderFromProps,
@@ -413,6 +474,7 @@ export function DateRangeInput({
   ...rest
 }: DateRangeInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
@@ -609,7 +671,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 +704,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 +719,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 +740,8 @@ export function DateRangeInput({
             min={min}
             max={max}
             dateConstraints={dateConstraints}
+            maxRangeSpan={maxRangeSpan}
+            minRangeSpan={minRangeSpan}
             numberOfMonths={numberOfMonths}
             weekStartsOn={weekStartsOn}
           />

package/src/DateTimeInput/DateTimeInput.tsx

@@ -84,6 +84,7 @@ import {
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useAnnounce} from '../hooks/useAnnounce';
+import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
@@ -448,6 +449,7 @@ export function DateTimeInput({
   ...rest
 }: DateTimeInputProps) {
   const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   // Speaks arrow-key stepping results through the persistent live regions:
   // stepping programmatically rewrites a plain textbox's value, which screen
   // readers do not announce on their own (WCAG 4.1.2).
@@ -1009,7 +1011,7 @@ export function DateTimeInput({
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
             aria-describedby={ariaDescribedBy}
-            aria-required={isRequired === true ? 'true' : undefined}
+            aria-required={isEffectivelyRequired ? 'true' : undefined}
             aria-invalid={
               status?.type === 'error' || !isDateInputValid ? 'true' : undefined
             }
@@ -1098,7 +1100,7 @@ export function DateTimeInput({
               timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {label})
             }
             aria-describedby={ariaDescribedBy}
-            aria-required={isRequired === true ? 'true' : undefined}
+            aria-required={isEffectivelyRequired ? 'true' : undefined}
             aria-invalid={
               status?.type === 'error' || !isTimeInputValid ? 'true' : undefined
             }

package/src/Dialog/Dialog.test.tsx

@@ -461,4 +461,28 @@ describe('Dialog', () => {
       before.remove();
     });
   });
+
+  describe('container padding isolation', () => {
+    it('resets container padding custom properties on the root dialog element', () => {
+      render(
+        <Dialog isOpen={true} onOpenChange={() => {}}>
+          Content
+        </Dialog>,
+      );
+      const dialog = screen.getByRole('dialog');
+      const computed = window.getComputedStyle(dialog);
+      expect(
+        computed.getPropertyValue('--container-padding-inline-start'),
+      ).toBe('0px');
+      expect(computed.getPropertyValue('--container-padding-inline-end')).toBe(
+        '0px',
+      );
+      expect(computed.getPropertyValue('--container-padding-block-start')).toBe(
+        '0px',
+      );
+      expect(computed.getPropertyValue('--container-padding-block-end')).toBe(
+        '0px',
+      );
+    });
+  });
 });