@astryxdesign/core 0.6.2 → 0.6.3-canary.039a67e

package/src/DateTimeInput/DateTimeInput.tsx

@@ -102,12 +102,22 @@ import {useHighlightedOptionScroll} from '../hooks/useHighlightedOptionScroll';
 import {NativeDateSegment} from './NativeDateSegment';
 import {NativeTimeSegment} from './NativeTimeSegment';
 import {TouchDateTimeField} from './TouchDateTimeField';
+import {
+  effectivePickerPresentation,
+  resolvePickerPresentation,
+  type PickerPresentation,
+} from '../utils/inputPresentation';
+import {useDevWarning} from '../hooks/useDevWarning';
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
 };
 
+/** @deprecated Use {@link DateTimeInputPresentation} via the `presentation` prop. */
 export type DateTimeInputNativePicker = 'touch' | 'always' | 'never';
 
+/** Which surfaces collect the date and time (`spec:AST-043` FR1; no `text-input` — TimeInput-only). */
+export type DateTimeInputPresentation = PickerPresentation;
+
 export type DateTimeInputHourFormat = '12h' | '24h';
 
 export type DateTimeInputSize = 'sm' | 'md' | 'lg';
@@ -173,9 +183,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],
@@ -496,17 +511,32 @@ export interface DateTimeInputProps extends Omit<
    * user's locale.
    *
    * @default 'touch'
-   * @example
-   * ```
-   * <DateTimeInput
-   *   label="Event time"
-   *   value={dateTime}
-   *   onChange={setDateTime}
-   *   nativePicker="never"
-   * />
-   * ```
+   * @deprecated Use `presentation` (`spec:AST-043` FR3):
+   * `'touch'` → `'adaptive-native'`, `'always'` → `'native'`,
+   * `'never'` → `'adaptive-bottom-sheet'`. Still works exactly as released;
+   * `presentation` wins when both are set.
    */
   nativePicker?: DateTimeInputNativePicker;
+
+  /**
+   * Which surfaces collect the date and time (`spec:AST-043` FR1). Every
+   * value opens pickers; the typed-fields-only `'text-input'` belongs to
+   * `TimeInput`.
+   *
+   * - `'popover'`: Astryx's typed fields + popovers on every pointer
+   * - `'bottom-sheet'`: Astryx's bottom-sheet date/time wheels on every pointer
+   * - `'native'`: browser/OS date and time pickers on every pointer, with no
+   *   Astryx fallback (FR2)
+   * - `'adaptive-bottom-sheet'`: popovers on a fine pointer, bottom sheet on
+   *   a coarse pointer
+   * - `'adaptive-native'` (default): popovers on a fine pointer, browser/OS
+   *   pickers on a coarse pointer, keeping the released per-segment Astryx
+   *   fallbacks (seconds, non-default `timeIncrement`, `timeOptionInterval`)
+   *   where a native control cannot express the value (FR2)
+   *
+   * @default 'adaptive-native'
+   */
+  presentation?: DateTimeInputPresentation;
 }
 
 function splitDateTime(dt: ISODateTimeString | undefined): {
@@ -588,27 +618,30 @@ function PointerDateTimeField({
   labelTooltip,
   numberOfMonths = 1,
   weekStartsOn,
-  nativePicker = 'touch',
   width,
   xstyle,
   className,
   style,
   ref,
+  nativeMode = 'off',
   ...rest
-}: DateTimeInputProps) {
+}: DateTimeInputProps & {
+  nativeMode?: 'off' | 'adaptive' | 'forced' | 'legacy';
+}) {
   const t = useTranslator();
   const locale = useLocale();
-  const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
-  const usesNativePicker =
-    nativePicker === 'always' || (nativePicker === 'touch' && isTouch);
+  const usesNativePicker = nativeMode !== 'off';
+  // `forced` (`presentation="native"`, FR2): no Astryx fallback. `adaptive`
+  // (`adaptive-native` coarse) and `legacy` (deprecated `always`):
   // iOS's native time picker has no seconds wheel, treats step as validation
-  // rather than picker cadence, and cannot express our preset-time list. Keep
-  // the Astryx time field for those explicit contracts instead of losing them.
+  // rather than picker cadence, and cannot express our preset-time list, so
+  // those keep the Astryx time field — exactly as released.
   const usesNativeTimePicker =
-    usesNativePicker &&
-    !hasSeconds &&
-    timeIncrement === 1 &&
-    timeOptionInterval === undefined;
+    nativeMode === 'forced' ||
+    ((nativeMode === 'adaptive' || nativeMode === 'legacy') &&
+      !hasSeconds &&
+      timeIncrement === 1 &&
+      timeOptionInterval === undefined);
   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
@@ -1915,25 +1948,48 @@ function PointerDateTimeField({
 PointerDateTimeField.displayName = 'PointerDateTimeField';
 
 /**
- * A combined date and time picker whose `nativePicker` prop chooses both
- * surfaces. Native modes use OS-owned date and time controls in Astryx field
- * chrome. With `nativePicker="never"`, fine pointers keep the typed fields and
- * popovers while coarse pointers get Astryx's coordinated Date/Time bottom
- * sheet.
+ * A combined date and time picker whose `presentation` prop chooses both
+ * surfaces (`spec:AST-043`). Native modes use OS-owned date and time controls
+ * in Astryx field chrome; the deprecated `nativePicker` maps to the same
+ * surfaces (FR3).
  */
-export function DateTimeInput({
-  nativePicker = 'touch',
-  ...props
-}: DateTimeInputProps) {
+export function DateTimeInput(props: DateTimeInputProps) {
   const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
-  const usesNativePicker =
-    nativePicker === 'always' || (nativePicker === 'touch' && isTouch);
-
-  return usesNativePicker || !isTouch ? (
-    <PointerDateTimeField {...props} nativePicker={nativePicker} />
-  ) : (
-    <TouchDateTimeField {...props} />
+  useDevWarning(
+    'DateTimeInput',
+    '`nativePicker` is deprecated; use `presentation` instead (`touch` → `adaptive-native`, `always` → `native`, `never` → `adaptive-bottom-sheet`). `presentation` wins when both are set.',
+    props.nativePicker !== undefined,
+  );
+  const effective = effectivePickerPresentation(
+    props.presentation,
+    props.nativePicker,
   );
+  const {
+    presentation: _presentation,
+    nativePicker: _nativePicker,
+    ...rest
+  } = props;
+  if (effective === 'native') {
+    return (
+      <PointerDateTimeField
+        {...rest}
+        nativeMode={
+          props.presentation === undefined && props.nativePicker === 'always'
+            ? 'legacy'
+            : 'forced'
+        }
+      />
+    );
+  }
+  switch (resolvePickerPresentation(effective, isTouch)) {
+    case 'native':
+      // Only `adaptive-native` on a coarse pointer resolves here (FR2).
+      return <PointerDateTimeField {...rest} nativeMode="adaptive" />;
+    case 'sheet':
+      return <TouchDateTimeField {...rest} />;
+    case 'desktop':
+      return <PointerDateTimeField {...rest} />;
+  }
 }
 
 DateTimeInput.displayName = 'DateTimeInput';

package/src/DateTimeInput/Presentation.test.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Presentation.test.tsx
+ * @input Uses vitest, Testing Library, and DateTimeInput
+ * @output Tests for the `presentation` prop (`spec:AST-043` FR1–FR4)
+ * @position Testing; covers surface resolution and precedence
+ */
+
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {render} from '@testing-library/react';
+import {DateTimeInput} from './DateTimeInput';
+import {resetDateSegmentProbe} from '../DateInput/nativeDateSegments';
+
+const HOVER_CAPABLE = /\(\s*hover\s*:\s*hover\s*\)/;
+
+class MockResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function stubPointer(isCoarse: boolean): void {
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: /pointer:\s*coarse/.test(query)
+      ? isCoarse
+      : /pointer:\s*fine/.test(query)
+        ? !isCoarse
+        : HOVER_CAPABLE.test(query),
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }));
+  vi.stubGlobal('ResizeObserver', MockResizeObserver);
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+  resetDateSegmentProbe();
+});
+
+describe('DateTimeInput presentation', () => {
+  it('native forces native date and time segments on a fine pointer', () => {
+    stubPointer(false);
+    render(
+      <DateTimeInput label="Event" presentation="native" onChange={() => {}} />,
+    );
+    expect(document.querySelector('input[type="date"]')).not.toBeNull();
+    expect(document.querySelector('input[type="time"]')).not.toBeNull();
+  });
+
+  it('bottom-sheet forces the sheet field on a fine pointer', () => {
+    stubPointer(false);
+    render(
+      <DateTimeInput
+        label="Event"
+        presentation="bottom-sheet"
+        onChange={() => {}}
+      />,
+    );
+    for (const input of document.querySelectorAll('input[readonly]')) {
+      expect(input).toBeInTheDocument();
+    }
+    expect(document.querySelector('input[type="date"]')).toBeNull();
+    expect(document.querySelectorAll('input[readonly]').length).toBe(2);
+  });
+
+  it('presentation wins over nativePicker (FR4)', () => {
+    stubPointer(false);
+    render(
+      <DateTimeInput
+        label="Event"
+        presentation="bottom-sheet"
+        nativePicker="always"
+        onChange={() => {}}
+      />,
+    );
+    // A sheet on a fine pointer can only come from `presentation`: the
+    // deprecated `always` alone would have rendered both native controls.
+    expect(document.querySelector('input[type="date"]')).toBeNull();
+    expect(document.querySelector('input[type="time"]')).toBeNull();
+    expect(document.querySelectorAll('input[readonly]').length).toBe(2);
+  });
+});

package/src/DateTimeInput/TouchDateTimeField.tsx

@@ -182,9 +182,14 @@ const styles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
+    // The 16px floor is iOS-only: iOS Safari zooms the page when a focused
+    // control sits under 16px, and only iOS WebKit implements
+    // -webkit-touch-callout to key the coarse-pointer floor to it.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],

package/src/DateTimeInput/index.ts

@@ -15,6 +15,7 @@ export type {
   DateTimeInputSize,
   DateTimeInputHourFormat,
   DateTimeInputNativePicker,
+  DateTimeInputPresentation,
   DateTimeInputTimeIncrement,
   DateTimeInputTimeOptionInterval,
   DateTimeInputStatus,

package/src/DateTimeInput/nativePickerSegmentStyles.ts

@@ -42,21 +42,34 @@ export const nativePickerSegmentStyles = stylex.create({
     borderStyle: 'none',
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
-    // Below 16px iOS zooms the page when the field takes focus.
+    // Below 16px iOS zooms the page when the field takes focus. Only iOS
+    // WebKit implements -webkit-touch-callout, so the coarse-pointer floor is
+    // keyed to iOS alone.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     color: colorVars['--color-text-primary'],
     backgroundColor: 'transparent',
     outline: 'none',
     // Native date/time controls size from their internal edit fields. Pin the
-    // box to one text line so both segments stay aligned.
-    height: stylex.firstThatWorks(
-      '1lh',
-      `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
-    ),
+    // box to one text line so both segments stay aligned. The calc fallback
+    // mirrors the iOS-only floor above; browsers with `1lh` track it for free.
+    height: {
+      default: stylex.firstThatWorks(
+        '1lh',
+        `calc(${typeScaleVars['--text-body-size']} * ${typeScaleVars['--text-body-leading']})`,
+      ),
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': stylex.firstThatWorks(
+          '1lh',
+          `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
+        ),
+      },
+    },
     WebkitAppearance: 'none',
     appearance: 'none',
     // DateTimeInput renders its own calendar/clock affordances.
@@ -101,9 +114,12 @@ export const nativePickerSegmentStyles = stylex.create({
     insetInlineEnd: 0,
     insetBlock: 0,
     display: 'block',
+    // The same iOS-only floor as the input it covers, shared baselines.
     fontSize: {
       default: typeScaleVars['--text-body-size'],
-      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      '@media (pointer: coarse)': {
+        '@supports (-webkit-touch-callout: none)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
+      },
     },
     lineHeight: typeScaleVars['--text-body-leading'],
     pointerEvents: 'none',

package/src/Dialog/Dialog.doc.mjs

@@ -31,7 +31,9 @@ export const docs = {
     targets: [
       {className: 'astryx-dialog', visualProps: ['variant']},
       {className: 'astryx-dialog-header'},
+      {className: 'astryx-dialog-header-start-content'},
       {className: 'astryx-dialog-header-title-block'},
+      {className: 'astryx-dialog-header-end-content'},
       {className: 'astryx-dialog-header-close-icon'},
     ],
     vars: [

package/src/Dialog/DialogHeader.doc.mjs

@@ -12,7 +12,9 @@ export const docs = {
     description: 'Use DialogHeader to give a dialog a labelled title area and optional close control.',
     anatomy: [
       {name: 'Header row', required: true, description: 'Arranges the title block, optional start/end content, and close control.'},
+      {name: 'Start content', required: false, description: 'Wraps optional leading content.'},
       {name: 'Title block', required: true, description: 'Groups the title and optional subtitle.'},
+      {name: 'End content', required: false, description: 'Groups optional trailing content with the optional close control.'},
       {name: 'Close icon', required: false, description: 'Visual close glyph inside the close button.'},
     ],
   },
@@ -66,6 +68,11 @@ export const docs = {
         },
       ],
     },
+    {
+      name: 'endContentEdgeCompensation',
+      type: "'inline' | 'block' | 'all'",
+      description: 'Selects compensation axes for the end-content slot. Omit to preserve automatic close-action compensation.',
+    },
     {
       name: 'hasDivider',
       type: 'boolean',
@@ -83,7 +90,9 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-dialog-header'},
+      {className: 'astryx-dialog-header-start-content'},
       {className: 'astryx-dialog-header-title-block'},
+      {className: 'astryx-dialog-header-end-content'},
       {className: 'astryx-dialog-header-close-icon'},
     ],
   },
@@ -136,7 +145,9 @@ export const docsZh = {
     description: '使用 DialogHeader 为对话框提供带标签的标题区和可选的关闭控件。',
     anatomy: [
       {name: 'Header row', required: true, description: '排列标题区、可选的首尾内容和关闭控件。'},
+      {name: 'Start content', required: false, description: '包装可选的首部内容。'},
       {name: 'Title block', required: true, description: '组合标题和可选副标题。'},
+      {name: 'End content', required: false, description: '组合可选尾部内容和可选关闭控件。'},
       {name: 'Close icon', required: false, description: '关闭按钮内的关闭图标。'},
     ],
   },
@@ -166,6 +177,11 @@ export const docsZh = {
       type: 'ReactNode',
       description: '标题之后、关闭按钮之前的内容。',
     },
+    {
+      name: 'endContentEdgeCompensation',
+      type: "'inline' | 'block' | 'all'",
+      description: '选择尾部内容插槽的补偿轴；省略时保留关闭操作的自动补偿。',
+    },
     {
       name: 'hasDivider',
       type: 'boolean',
@@ -176,7 +192,9 @@ export const docsZh = {
   theming: {
     targets: [
       {className: 'astryx-dialog-header'},
+      {className: 'astryx-dialog-header-start-content'},
       {className: 'astryx-dialog-header-title-block'},
+      {className: 'astryx-dialog-header-end-content'},
       {className: 'astryx-dialog-header-close-icon'},
     ],
   },
@@ -191,7 +209,9 @@ export const docsDense = {
     description: 'labelled dialog title area + optional close control',
     anatomy: [
       {name: 'Header row', required: true, description: 'arranges title block, optional start/end content, close control'},
+      {name: 'Start content', required: false, description: 'wraps optional leading content'},
       {name: 'Title block', required: true, description: 'groups title + optional subtitle'},
+      {name: 'End content', required: false, description: 'groups optional trailing content + optional close control'},
       {name: 'Close icon', required: false, description: 'close glyph inside close button'},
     ],
   },
@@ -201,6 +221,8 @@ export const docsDense = {
     onOpenChange: 'close button callback (omit=no button)',
     startContent: 'content before title (e.g. back button)',
     endContent: 'content after title, before close button',
+    endContentEdgeCompensation:
+      'end-content slot axes: inline | block | all; omit=automatic close-action compensation',
     hasDivider: 'bottom border',
   },
 };

package/src/Dialog/DialogHeader.test.tsx

@@ -22,6 +22,17 @@ function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   return [prose, component].filter(Boolean).join('\n\n');
 }
 
+function getEndSlot(): HTMLElement {
+  const child =
+    screen.queryByRole('button', {name: 'Action'}) ??
+    screen.getByRole('button', {name: /close/i});
+  const slot = child.parentElement;
+  if (slot == null) {
+    throw new Error('Expected DialogHeader end slot');
+  }
+  return slot;
+}
+
 describe('DialogHeader', () => {
   it('renders the title', () => {
     render(<DialogHeader title="My Dialog Title" />);
@@ -60,35 +71,184 @@ describe('DialogHeader', () => {
 
   it('renders close button when onOpenChange is provided', () => {
     render(<DialogHeader title="Title" onOpenChange={() => {}} />);
-    expect(screen.getByRole('button', {name: /close/i})).toBeInTheDocument();
+    const closeButton = screen.getByRole('button', {name: /close/i});
+
+    expect(closeButton).toBeInTheDocument();
+    expect(closeButton.parentElement).toHaveClass(
+      'astryx-dialog-header-end-content',
+    );
+  });
+
+  it('preserves automatic end-slot compensation when the close action renders', () => {
+    const {rerender} = render(
+      <DialogHeader title="Title" onOpenChange={() => {}} />,
+    );
+    const automaticClassName = getEndSlot().className;
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+        onOpenChange={() => {}}
+      />,
+    );
+    expect(getEndSlot().className).toBe(automaticClassName);
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+      />,
+    );
+    expect(getEndSlot().className).not.toBe(automaticClassName);
   });
 
-  it('exposes theme targets for the header row, title block, and close icon', () => {
+  it('lets endContentEdgeCompensation select inline, block, or all', () => {
+    const {rerender} = render(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+      />,
+    );
+    const noCompensationClassName = getEndSlot().className;
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+        endContentEdgeCompensation="inline"
+      />,
+    );
+    const inlineClassName = getEndSlot().className;
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+        endContentEdgeCompensation="block"
+      />,
+    );
+    const blockClassName = getEndSlot().className;
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+        endContentEdgeCompensation="all"
+      />,
+    );
+    const allClassName = getEndSlot().className;
+
+    expect(inlineClassName).not.toBe(noCompensationClassName);
+    expect(blockClassName).not.toBe(noCompensationClassName);
+    expect(inlineClassName).not.toBe(blockClassName);
+    expect(allClassName).not.toBe(inlineClassName);
+    expect(allClassName).not.toBe(blockClassName);
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+        onOpenChange={() => {}}
+      />,
+    );
+    expect(getEndSlot().className).toBe(allClassName);
+
+    rerender(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Action</button>}
+        endContentEdgeCompensation="inline"
+        onOpenChange={() => {}}
+      />,
+    );
+    expect(getEndSlot().className).toBe(inlineClassName);
+  });
+
+  it('exposes theme targets for the header row, title block, both content slots, and close icon', () => {
     const {container} = render(
       <DialogHeader
         title="Title"
         subtitle="Subtitle"
+        startContent={<button type="button">Back</button>}
+        endContent={<button type="button">Custom Action</button>}
         onOpenChange={() => {}}
       />,
     );
 
     expect(container.querySelector('.astryx-dialog-header')).not.toBeNull();
+    expect(
+      screen.getByRole('button', {name: 'Back'}).parentElement,
+    ).toHaveClass('astryx-dialog-header-start-content');
     expect(screen.getByRole('heading', {level: 2}).parentElement).toHaveClass(
       'astryx-dialog-header-title-block',
     );
 
+    const endContent = screen.getByRole('button', {
+      name: 'Custom Action',
+    }).parentElement;
+    expect(endContent).toHaveClass('astryx-dialog-header-end-content');
+    expect(screen.getByRole('button', {name: /close/i}).parentElement).toBe(
+      endContent,
+    );
+
     const closeIcon = screen
       .getByRole('button', {name: /close/i})
       .querySelector('.astryx-dialog-header-close-icon');
     expect(closeIcon).toHaveClass('astryx-icon');
   });
 
-  it('lets themes set the two internal gaps and close-icon size', () => {
+  it('exposes the start-content target when startContent renders', () => {
+    const {container} = render(
+      <DialogHeader
+        title="Title"
+        startContent={<button type="button">Back</button>}
+      />,
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'Back'}).parentElement,
+    ).toHaveClass('astryx-dialog-header-start-content');
+    expect(
+      container.querySelectorAll('.astryx-dialog-header-start-content'),
+    ).toHaveLength(1);
+  });
+
+  it('exposes the end-content target when endContent renders without a close button', () => {
+    const {container} = render(
+      <DialogHeader
+        title="Title"
+        endContent={<button type="button">Custom Action</button>}
+      />,
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'Custom Action'}).parentElement,
+    ).toHaveClass('astryx-dialog-header-end-content');
+    expect(
+      container.querySelectorAll('.astryx-dialog-header-end-content'),
+    ).toHaveLength(1);
+  });
+
+  it('omits the content-slot targets when their content does not render', () => {
+    const {container} = render(<DialogHeader title="Title" />);
+
+    expect(
+      container.querySelector('.astryx-dialog-header-start-content'),
+    ).toBeNull();
+    expect(
+      container.querySelector('.astryx-dialog-header-end-content'),
+    ).toBeNull();
+  });
+
+  it('lets themes set the internal gaps and close-icon size', () => {
     const theme = defineTheme({
       name: 'dialog-header-targets-test',
       components: {
         'dialog-header': {base: {gap: '8px'}},
+        'dialog-header-start-content': {base: {gap: '5px'}},
         'dialog-header-title-block': {base: {gap: '4px'}},
+        'dialog-header-end-content': {base: {gap: '6px'}},
         'dialog-header-close-icon': {
           base: {width: '16px', height: '16px', fontSize: '16px'},
         },
@@ -98,8 +258,12 @@ describe('DialogHeader', () => {
 
     expect(css).toContain('.astryx-dialog-header {');
     expect(css).toContain('gap: 8px');
+    expect(css).toContain('.astryx-dialog-header-start-content {');
+    expect(css).toContain('gap: 5px');
     expect(css).toContain('.astryx-dialog-header-title-block {');
     expect(css).toContain('gap: 4px');
+    expect(css).toContain('.astryx-dialog-header-end-content {');
+    expect(css).toContain('gap: 6px');
     expect(css).toContain('.astryx-dialog-header-close-icon {');
     expect(css).toContain('width: 16px');
     expect(css).toContain('height: 16px');