@astryxdesign/core 0.6.2 → 0.6.3-canary.0788c49

package/src/DateInput/NativeDateField.tsx

@@ -100,10 +100,14 @@ const styles = 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'],
@@ -112,11 +116,20 @@ const styles = stylex.create({
     // A date control's intrinsic height comes from its inner edit fields, not
     // from `line-height`, so it renders ~2px taller than a text input and its
     // value sits off the shared baseline inside the same flex row. One line
-    // box is exactly what the text field occupies.
-    height: stylex.firstThatWorks(
-      '1lh',
-      `calc(max(1rem, ${typeScaleVars['--text-body-size']}) * ${typeScaleVars['--text-body-leading']})`,
-    ),
+    // box is exactly what the text field occupies. 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']})`,
+        ),
+      },
+    },
     // iOS gives date controls their own button-like chrome, with inner
     // spacing and a centred value that no reset of ours can reach.
     WebkitAppearance: 'none',
@@ -187,9 +200,12 @@ const styles = stylex.create({
     // covers — one line of that leading fills its height exactly, which puts
     // the glyphs on the input's own baseline.
     display: 'block',
+    // ...with the input's own iOS floor, so the two baselines stay shared.
     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'],
     // A tap has to reach the control underneath — that is what raises the

package/src/DateInput/TouchDateField.tsx

@@ -194,10 +194,14 @@ const styles = stylex.create({
     padding: 0,
     fontFamily: typographyVars['--font-family-body'],
     // Below 16px iOS zooms the page on focus. The field is focusable even
-    // though it is not typable, so it needs the same floor DateInput has.
+    // though it is not typable, so it needs the same floor DateInput has —
+    // keyed to iOS alone, since only iOS WebKit implements
+    // -webkit-touch-callout.
     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/DateRangeInput/DateRangeInput.tsx

@@ -92,9 +92,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/DateTimeInput.tsx

@@ -173,9 +173,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/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/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');

package/src/Dialog/DialogHeader.tsx

@@ -37,9 +37,11 @@ const styles = stylex.create({
     justifyContent: 'space-between',
     gap: spacingVars['--spacing-3'],
   },
-  // Compensate for the icon button's visual padding on the actions area
-  actionsCompensation: {
+  // Compensate for the medium icon button's visual padding on the end slot.
+  endBlockEdgeCompensation: {
     marginBlock: `calc(-1 * ${spacingVars['--spacing-2']})`,
+  },
+  endInlineEdgeCompensation: {
     marginInlineEnd: `calc(-1 * ${spacingVars['--spacing-2']})`,
   },
   titleWrapper: {
@@ -98,6 +100,14 @@ export interface DialogHeaderProps extends BaseProps<HTMLDivElement> {
    */
   endContent?: ReactNode;
 
+  /**
+   * Overrides automatic end-slot compensation. When omitted, the slot keeps its
+   * existing behavior: rendering the close action applies block and logical
+   * inline-end compensation. Use `inline`, `block`, or `all` to select the axes
+   * explicitly.
+   */
+  endContentEdgeCompensation?: 'inline' | 'block' | 'all';
+
   /**
    * Adds a themed border at the bottom edge.
    * When false, spacing collapse is applied automatically for seamless visual flow.
@@ -134,6 +144,7 @@ export function DialogHeader({
   onOpenChange,
   startContent,
   endContent,
+  endContentEdgeCompensation,
   hasDivider,
   xstyle,
   className,
@@ -146,6 +157,16 @@ export function DialogHeader({
   const dialogContext = useDialogContext();
   const shouldAutoFocus = dialogContext?.isInline !== true;
   const titleId = dialogContext?.titleId;
+  const shouldCompensateEndBlock =
+    endContentEdgeCompensation == null
+      ? onOpenChange != null
+      : endContentEdgeCompensation === 'block' ||
+        endContentEdgeCompensation === 'all';
+  const shouldCompensateEndInline =
+    endContentEdgeCompensation == null
+      ? onOpenChange != null
+      : endContentEdgeCompensation === 'inline' ||
+        endContentEdgeCompensation === 'all';
 
   // Auto-focus the title when mounted for screen reader accessibility.
   // Inline dialogs are documentation/showcase previews, so suppress focus to
@@ -172,7 +193,13 @@ export function DialogHeader({
           stylex.props(styles.container),
         )}>
         {startContent && (
-          <div {...stylex.props(styles.actions)}>{startContent}</div>
+          <div
+            {...mergeProps(
+              themeProps('dialog-header-start-content'),
+              stylex.props(styles.actions),
+            )}>
+            {startContent}
+          </div>
         )}
         <div
           {...mergeProps(
@@ -195,9 +222,13 @@ export function DialogHeader({
         </div>
         {(endContent || onOpenChange) && (
           <div
-            {...stylex.props(
-              styles.actions,
-              onOpenChange && styles.actionsCompensation,
+            {...mergeProps(
+              themeProps('dialog-header-end-content'),
+              stylex.props(
+                styles.actions,
+                shouldCompensateEndBlock && styles.endBlockEdgeCompensation,
+                shouldCompensateEndInline && styles.endInlineEdgeCompensation,
+              ),
             )}>
             {endContent}
             {onOpenChange && (