@astryxdesign/core 0.1.9 → 0.2.0-canary.0e01213

package/src/DateRangeInput/DateRangeInput.tsx

@@ -25,7 +25,6 @@ import {
   DATE_FORMAT_SHORT,
   DATE_FORMAT_SHORT_WITH_YEAR,
 } from '../utils/plainDate';
-import type {IconName} from '../Icon';
 import {
   colorVars,
   sizeVars,
@@ -38,11 +37,11 @@ import {
 import {
   Field,
   type InputStatus,
-  type InputStatusType,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
+  type FieldStatusVariant,
 } from '../Field';
 import {Icon} from '../Icon';
 import {Spinner} from '../Spinner';
@@ -53,6 +52,7 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
+import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
@@ -127,9 +127,9 @@ const styles = stylex.create({
     flexDirection: 'column',
     gap: spacingVars['--spacing-1'],
     padding: spacingVars['--spacing-3'],
-    borderRightWidth: borderVars['--border-width'],
-    borderRightStyle: 'solid',
-    borderRightColor: colorVars['--color-border-emphasized'],
+    borderInlineEndWidth: borderVars['--border-width'],
+    borderInlineEndStyle: 'solid',
+    borderInlineEndColor: colorVars['--color-border-emphasized'],
     minWidth: 140,
   },
   presetButton: {
@@ -330,6 +330,14 @@ export interface DateRangeInputProps extends Omit<
    * Status indicator for the input.
    */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
 
   /**
    * Width of the field. Numbers are treated as pixels, strings are used as-is
@@ -385,6 +393,7 @@ export function DateRangeInput({
   placeholder: placeholderFromProps,
   size: sizeProp,
   status,
+  statusVariant = 'attached',
   labelTooltip,
   numberOfMonths = 2,
   width,
@@ -422,25 +431,19 @@ export function DateRangeInput({
     isEnabled: showsDisabledMessage,
   });
 
-  const statusIconMap: Record<InputStatusType, IconName> = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
-
-  const statusIconColorMap: Record<
-    InputStatusType,
-    'warning' | 'error' | 'success'
-  > = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
+  const {statusIcon, describedBy: statusTooltipDescribedBy} =
+    useInputStatusIcon({
+      status,
+      statusVariant,
+    });
 
   const ariaDescribedBy =
     [
       description ? descriptionID : null,
-      status?.message ? statusMessageID : null,
+      statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+      // The tooltip variant renders no message box; describe the input by the
+      // tooltip's content instead so the status is still announced.
+      statusTooltipDescribedBy,
       showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
     ]
       .filter(Boolean)
@@ -529,6 +532,7 @@ export function DateRangeInput({
             }
           : undefined
       }
+      statusVariant={statusVariant}
       labelTooltip={labelTooltip}
       width={width}>
       <div
@@ -550,7 +554,9 @@ export function DateRangeInput({
             sizeStyles[size],
             isEffectivelyDisabled && inputWrapperStyles.disabled,
             status && inputStatusBorderStyles[status.type],
-            status && inputStatusHoverShadowStyles[status.type],
+            status &&
+              !isEffectivelyDisabled &&
+              inputStatusHoverShadowStyles[status.type],
             status && inputStatusFocusWithinStyles[status.type],
             xstyle,
           ),
@@ -571,7 +577,14 @@ export function DateRangeInput({
             styles.iconButton,
             isEffectivelyDisabled && styles.iconButtonDisabled,
           )}>
-          <Icon icon="calendar" size="sm" color="secondary" />
+          <Icon
+            icon="calendar"
+            size="sm"
+            color="secondary"
+            {...themeProps('date-range-input-toggle-icon', {
+              state: popover.isOpen ? 'expanded' : 'collapsed',
+            })}
+          />
         </button>
         <button
           ref={ref}
@@ -604,17 +617,16 @@ export function DateRangeInput({
             onClick={handleClear}
             aria-label={t('@astryx.dateInput.clear', {label})}
             {...stylex.props(styles.iconButton)}>
-            <Icon icon="close" size="sm" color="secondary" />
+            <Icon
+              icon="close"
+              size="sm"
+              color="secondary"
+              {...themeProps('date-range-input-clear-icon')}
+            />
           </button>
         )}
         {isBusy && <Spinner size="sm" />}
-        {status && (
-          <Icon
-            icon={statusIconMap[status.type]}
-            size="md"
-            color={statusIconColorMap[status.type]}
-          />
-        )}
+        {statusIcon}
       </div>
       {popover.render(
         <div {...stylex.props(styles.popoverLayout)}>

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -173,6 +173,12 @@ export const docs = {
       description: 'Number of months displayed simultaneously in the calendar.',
       default: '1',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -183,6 +189,14 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-date-time-input', visualProps: ['size', 'status']},
+      {
+        className: 'astryx-date-time-input-date-segment',
+        visualProps: ['size', 'status'],
+      },
+      {
+        className: 'astryx-date-time-input-time-segment',
+        visualProps: ['size', 'status'],
+      },
     ],
   },
   usage: {
@@ -469,11 +483,18 @@ export const docsZh = {
       description:
         '用于布局自定义的 StyleX 样式。必须是 stylex.create() 的值。',
     },
-
   ],
   theming: {
     targets: [
       {className: 'astryx-date-time-input', visualProps: ['size', 'status']},
+      {
+        className: 'astryx-date-time-input-date-segment',
+        visualProps: ['size', 'status'],
+      },
+      {
+        className: 'astryx-date-time-input-time-segment',
+        visualProps: ['size', 'status'],
+      },
     ],
   },
 };

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
+import {defineTheme} from '../theme/defineTheme';
+import {generateThemeCSSFlat} from '../theme/generateThemeRules';
 
 describe('DateTimeInput', () => {
   it('renders with label', () => {
@@ -814,4 +816,114 @@ describe('DateTimeInput', () => {
       expect(onChange.mock.calls[0][0]).toContain('14:31');
     });
   });
+  // ===========================================================================
+  // Segment theme targets (#4075)
+  // ===========================================================================
+
+  describe('segment theme targets', () => {
+    // The root only publishes `astryx-date-time-input`; the date and time
+    // wrappers were anonymous nodes carrying hashed atomic classes only, so a
+    // theme that restyles input geometry through the text-input/date-input/
+    // time-input targets could not reach them and DateTimeInput rendered
+    // shorter than every other input under that theme.
+
+    it('renders the date segment target on the date wrapper', () => {
+      render(<DateTimeInput label="Meeting" onChange={() => {}} />);
+      const wrapper = screen
+        .getByLabelText('Meeting')
+        .closest('.astryx-date-time-input-date-segment');
+
+      expect(wrapper).not.toBeNull();
+      // The wrapper is the input's own container, not an ancestor further up.
+      expect(wrapper).toBe(screen.getByLabelText('Meeting').parentElement);
+    });
+
+    it('renders the time segment target on the time wrapper', () => {
+      render(<DateTimeInput label="Meeting" onChange={() => {}} />);
+      const wrapper = screen
+        .getByLabelText('Meeting time')
+        .closest('.astryx-date-time-input-time-segment');
+
+      expect(wrapper).not.toBeNull();
+      expect(wrapper).toBe(screen.getByLabelText('Meeting time').parentElement);
+    });
+
+    it('reflects size on both segments so themes can restyle geometry', () => {
+      render(<DateTimeInput label="Meeting" size="lg" onChange={() => {}} />);
+
+      const date = screen
+        .getByLabelText('Meeting')
+        .closest('.astryx-date-time-input-date-segment');
+      const time = screen
+        .getByLabelText('Meeting time')
+        .closest('.astryx-date-time-input-time-segment');
+
+      expect(date).toHaveAttribute('data-size', 'lg');
+      expect(date).toHaveClass('lg');
+      expect(time).toHaveAttribute('data-size', 'lg');
+      expect(time).toHaveClass('lg');
+    });
+
+    it('reflects status on both segments, mirroring the root', () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          status={{type: 'error', message: 'Required'}}
+          onChange={() => {}}
+        />,
+      );
+
+      const date = screen
+        .getByLabelText('Meeting')
+        .closest('.astryx-date-time-input-date-segment');
+      const time = screen
+        .getByLabelText('Meeting time')
+        .closest('.astryx-date-time-input-time-segment');
+
+      expect(date).toHaveAttribute('data-status', 'error');
+      expect(time).toHaveAttribute('data-status', 'error');
+    });
+
+    it('omits data-status when there is no status, like the root does', () => {
+      render(<DateTimeInput label="Meeting" onChange={() => {}} />);
+
+      const date = screen
+        .getByLabelText('Meeting')
+        .closest('.astryx-date-time-input-date-segment');
+
+      expect(date).not.toHaveAttribute('data-status');
+    });
+
+    it('keeps the root target intact', () => {
+      const {container} = render(
+        <DateTimeInput label="Meeting" onChange={() => {}} />,
+      );
+      // Additive change — the existing root target still renders.
+      expect(container.querySelector('.astryx-date-time-input')).not.toBeNull();
+    });
+
+    it('exposes both segments as themeable defineTheme targets', () => {
+      // jsdom cannot resolve the @layer cascade, so the generated CSS is what
+      // proves a theme can actually reach these nodes.
+      const theme = defineTheme({
+        name: 'date-time-input-segments-test',
+        components: {
+          'date-time-input-date-segment': {
+            base: {blockSize: 'var(--size-element-lg)'},
+            lg: {paddingInline: 'var(--spacing-4)'},
+          },
+          'date-time-input-time-segment': {
+            base: {blockSize: 'var(--size-element-lg)'},
+          },
+        },
+      });
+      const css = generateThemeCSSFlat(theme);
+
+      expect(css).toContain('.astryx-date-time-input-date-segment {');
+      expect(css).toContain('.astryx-date-time-input-date-segment.lg');
+      expect(css).toContain('.astryx-date-time-input-time-segment {');
+      expect(css).toContain('block-size: var(--size-element-lg)');
+      expect(css).toContain('padding-inline: var(--spacing-4)');
+    });
+  });
 });

package/src/DateTimeInput/DateTimeInput.tsx

@@ -27,7 +27,6 @@ import {
   type KeyboardEvent,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import type {IconName} from '../Icon';
 import {
   colorVars,
   sizeVars,
@@ -40,7 +39,6 @@ import {
 import {
   Field,
   type InputStatus,
-  type InputStatusType,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
@@ -54,6 +52,7 @@ import {useCalendarConstraints} from '../Calendar/hooks';
 import {usePopover} from '../Popover';
 import {useTooltip} from '../Tooltip';
 import {useInputContainer} from '../hooks/useInputContainer';
+import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {
   type ISOTimeString,
   parseDateInput,
@@ -470,25 +469,21 @@ export function DateTimeInput({
     isEnabled: showsDisabledMessage,
   });
 
-  const statusIconMap: Record<InputStatusType, IconName> = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
-
-  const statusIconColorMap: Record<
-    InputStatusType,
-    'warning' | 'error' | 'success'
-  > = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success',
-  };
+  // DateTimeInput fixes its status presentation to the detached message box,
+  // so the shared helper suppresses the on-field icon (the message box carries
+  // its own leading glyph). Routed through the helper for consistency with the
+  // rest of the bordered input family.
+  const {statusIcon, describedBy: statusTooltipDescribedBy} =
+    useInputStatusIcon({
+      status,
+      statusVariant: 'detached',
+    });
 
   const ariaDescribedBy =
     [
       description ? descriptionID : null,
       status?.message ? statusMessageID : null,
+      statusTooltipDescribedBy,
       showsDisabledMessage ? disabledMessageTooltip.describedBy : null,
     ]
       .filter(Boolean)
@@ -890,14 +885,22 @@ export function DateTimeInput({
         {/* Date input */}
         <div
           ref={popover.triggerRef}
-          {...stylex.props(
-            inputWrapperStyles.base,
-            sizeStyles[size],
-            styles.dateWrapper,
-            isEffectivelyDisabled && inputWrapperStyles.disabled,
-            status && inputStatusBorderStyles[status.type],
-            status && inputStatusHoverShadowStyles[status.type],
-            status && inputStatusFocusWithinStyles[status.type],
+          {...mergeProps(
+            themeProps('date-time-input-date-segment', {
+              size,
+              status: status?.type ?? null,
+            }),
+            stylex.props(
+              inputWrapperStyles.base,
+              sizeStyles[size],
+              styles.dateWrapper,
+              isEffectivelyDisabled && inputWrapperStyles.disabled,
+              status && inputStatusBorderStyles[status.type],
+              status &&
+                !isEffectivelyDisabled &&
+                inputStatusHoverShadowStyles[status.type],
+              status && inputStatusFocusWithinStyles[status.type],
+            ),
           )}>
           <button
             type="button"
@@ -968,13 +971,7 @@ export function DateTimeInput({
             </button>
           )}
           {isBusy && <Spinner size="sm" />}
-          {status && (
-            <Icon
-              icon={statusIconMap[status.type]}
-              size="md"
-              color={statusIconColorMap[status.type]}
-            />
-          )}
+          {statusIcon}
         </div>
 
         {/* Time input */}
@@ -982,14 +979,22 @@ export function DateTimeInput({
           ref={timeContainerRef}
           onClick={handleTimeWrapperClick}
           onMouseUp={handleTimeWrapperMouseUp}
-          {...stylex.props(
-            inputWrapperStyles.base,
-            sizeStyles[size],
-            styles.timeWrapper,
-            isEffectivelyDisabled && inputWrapperStyles.disabled,
-            status && inputStatusBorderStyles[status.type],
-            status && inputStatusHoverShadowStyles[status.type],
-            status && inputStatusFocusWithinStyles[status.type],
+          {...mergeProps(
+            themeProps('date-time-input-time-segment', {
+              size,
+              status: status?.type ?? null,
+            }),
+            stylex.props(
+              inputWrapperStyles.base,
+              sizeStyles[size],
+              styles.timeWrapper,
+              isEffectivelyDisabled && inputWrapperStyles.disabled,
+              status && inputStatusBorderStyles[status.type],
+              status &&
+                !isEffectivelyDisabled &&
+                inputStatusHoverShadowStyles[status.type],
+              status && inputStatusFocusWithinStyles[status.type],
+            ),
           )}>
           <div {...stylex.props(styles.icon)}>
             <Icon icon="clock" size="sm" color="secondary" />

package/src/Divider/Divider.test.tsx

@@ -89,25 +89,49 @@ describe('Divider', () => {
 
   it('renders vertical divider with label', () => {
     render(
-      <Divider
-        orientation="vertical"
-        label="Vertical"
-        data-testid="divider"
-      />,
+      <Divider orientation="vertical" label="Vertical" data-testid="divider" />,
     );
     const divider = screen.getByTestId('divider');
     expect(divider).toHaveAttribute('aria-orientation', 'vertical');
     expect(screen.getByText('Vertical')).toBeInTheDocument();
   });
 
-  it('renders astryx-* class names for theme targeting', () => {
+  it('exposes the label as the accessible name of the separator', () => {
+    render(<Divider label="Section" data-testid="divider" />);
+    const divider = screen.getByTestId('divider');
+    expect(divider).toHaveAttribute('aria-labelledby');
+    expect(divider).toHaveAccessibleName('Section');
+  });
+
+  it('names the separator from a ReactNode label via aria-labelledby', () => {
+    render(<Divider label={<span>Custom</span>} data-testid="divider" />);
+    expect(screen.getByTestId('divider')).toHaveAccessibleName('Custom');
+  });
+
+  it('does not set aria-labelledby without a label', () => {
+    render(<Divider data-testid="divider" />);
+    expect(screen.getByTestId('divider')).not.toHaveAttribute(
+      'aria-labelledby',
+    );
+  });
+
+  it('prefers an explicit aria-label over the rendered label', () => {
     render(
       <Divider
-        variant="strong"
-        orientation="vertical"
+        label="Section"
+        aria-label="Custom name"
         data-testid="divider"
       />,
     );
+    const divider = screen.getByTestId('divider');
+    expect(divider).toHaveAccessibleName('Custom name');
+    expect(divider).not.toHaveAttribute('aria-labelledby');
+  });
+
+  it('renders astryx-* class names for theme targeting', () => {
+    render(
+      <Divider variant="strong" orientation="vertical" data-testid="divider" />,
+    );
     const root = screen.getByTestId('divider');
     expect(root.className).toContain('astryx-divider');
     expect(root.className).toContain('strong');

package/src/Divider/Divider.tsx

@@ -15,7 +15,7 @@
  * - /packages/cli/templates/blocks/components/Divider/ (showcase blocks)
  */
 
-import type {ReactNode} from 'react';
+import {useId, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 
@@ -165,9 +165,19 @@ export function Divider({
   className,
   style,
   ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   ...props
 }: DividerProps) {
   const isHorizontal = orientation === 'horizontal';
+  const labelId = useId();
+
+  // A separator does not derive its accessible name from its content, so the
+  // rendered label must be referenced explicitly via aria-labelledby to be
+  // exposed as the separator's name (WCAG 1.3.1). An explicit aria-label or
+  // aria-labelledby from the consumer takes precedence.
+  const resolvedLabelledBy =
+    ariaLabelledBy ?? (label && ariaLabel == null ? labelId : undefined);
 
   return (
     <div
@@ -175,6 +185,8 @@ export function Divider({
       {...props}
       role="separator"
       aria-orientation={orientation}
+      aria-label={ariaLabel}
+      aria-labelledby={resolvedLabelledBy}
       {...mergeProps(
         themeProps('divider', {variant, orientation}),
         stylex.props(
@@ -196,6 +208,7 @@ export function Divider({
       />
       {label && (
         <div
+          id={labelId}
           {...stylex.props(
             labelStyles.label,
             !isHorizontal && labelStyles.verticalLabel,

package/src/DropdownMenu/DropdownMenu.doc.mjs

@@ -26,15 +26,18 @@ export const docs = {
       {className: 'astryx-dropdown-menu'},
       {className: 'astryx-dropdown-menu-item', visualProps: ['size']},
       {
-        className: 'astryx-dropdown-menu-checkbox',
+        className: 'astryx-dropdown-menu-radio',
         visualProps: ['size'],
         states: ['checked', 'disabled'],
       },
       {
-        className: 'astryx-dropdown-menu-radio',
+        className: 'astryx-dropdown-menu-radio-dot',
         visualProps: ['size'],
         states: ['checked', 'disabled'],
       },
+      {className: 'astryx-dropdown-menu-section-heading'},
+      {className: 'astryx-dropdown-menu-divider'},
+      {className: 'astryx-dropdown-menu-indicator-icon'},
     ],
     vars: [
       {name: '--_dropdown-menu-radius', description: 'Border radius of the menu popup', default: 'var(--radius-element)', private: true},