@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/src/Chat/ChatMessage.test.tsx

@@ -1,9 +1,34 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+import {createElement, createRef, Fragment, type ReactNode} from 'react';
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {ChatMessage} from './ChatMessage';
 import {ChatMessageBubble} from './ChatMessageBubble';
+import {ChatMessageList} from './ChatMessageList';
+
+// Content that renders nothing but is not a skipped scalar: its wrapper
+// renders and collapses through CSS instead of the content being inspected.
+const contentThatRendersNothing: [string, () => ReactNode][] = [
+  ['an empty array', () => []],
+  ['an array of non-rendering values', () => [null, false, '']],
+  ['an empty Fragment', () => createElement(Fragment)],
+  ['a component that returns null', () => <RendersNothing />],
+];
+
+function RendersNothing() {
+  return null;
+}
+
+function OpaqueName() {
+  return <span>Navi</span>;
+}
+
+/** The name wrapper the article's aria-labelledby points at. */
+function labelTarget(article: HTMLElement): HTMLElement | null {
+  const id = article.getAttribute('aria-labelledby');
+  return id == null ? null : article.ownerDocument.getElementById(id);
+}
 
 describe('ChatMessage', () => {
   it('renders children', () => {
@@ -33,6 +58,60 @@ describe('ChatMessage', () => {
     expect(screen.queryByText('System')).toBeNull();
   });
 
+  it.each([false, true, ''])('does not render a name wrapper for %j', name => {
+    render(
+      <ChatMessage sender="assistant" name={name}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    const article = screen.getByRole('article');
+    expect(article).toHaveAccessibleName('Message from assistant');
+    expect(article).not.toHaveAttribute('aria-labelledby');
+    expect(article.querySelector('div:empty')).toBeNull();
+  });
+
+  it('preserves a numeric name', () => {
+    render(
+      <ChatMessage sender="assistant" name={0}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    expect(screen.getByRole('article')).toHaveAccessibleName('0');
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it.each(contentThatRendersNothing)(
+    'collapses the name wrapper and keeps the fallback label for %s',
+    (_label, createName) => {
+      render(
+        <ChatMessage sender="assistant" name={createName()}>
+          <span>Summary</span>
+        </ChatMessage>,
+      );
+      const article = screen.getByRole('article');
+      const target = labelTarget(article);
+      // The label reference resolves to no text, so the accessible name falls
+      // back to aria-label; real Chromium computes "Message from assistant".
+      expect(target).not.toBeNull();
+      expect(target).toBeEmptyDOMElement();
+      expect(getComputedStyle(target as HTMLElement).display).toBe('none');
+      expect(article).toHaveAttribute('aria-label', 'Message from assistant');
+    },
+  );
+
+  it('labels the article by a name that renders text', () => {
+    render(
+      <ChatMessage sender="assistant" name={<OpaqueName />}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    const article = screen.getByRole('article');
+    expect(article).toHaveAccessibleName('Navi');
+    expect(
+      getComputedStyle(labelTarget(article) as HTMLElement).display,
+    ).not.toBe('none');
+  });
+
   it('renders avatar for assistant', () => {
     render(
       <ChatMessage
@@ -53,6 +132,53 @@ describe('ChatMessage', () => {
     expect(screen.queryByTestId('avatar')).toBeNull();
   });
 
+  it.each([false, true, ''])(
+    'does not render an avatar wrapper for %j',
+    avatar => {
+      render(
+        <ChatMessage sender="assistant" avatar={avatar}>
+          <span>Summary</span>
+        </ChatMessage>,
+      );
+      expect(screen.getByRole('article').querySelector('div:empty')).toBeNull();
+    },
+  );
+
+  it('preserves a numeric avatar', () => {
+    render(
+      <ChatMessage sender="assistant" avatar={0}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it.each(contentThatRendersNothing)(
+    'collapses the avatar wrapper for %s',
+    (_label, createAvatar) => {
+      render(
+        <ChatMessage sender="assistant" avatar={createAvatar()}>
+          <span>Summary</span>
+        </ChatMessage>,
+      );
+      const wrapper = screen.getByRole('article').firstElementChild;
+      expect(wrapper).toBeEmptyDOMElement();
+      expect(getComputedStyle(wrapper as HTMLElement).display).toBe('none');
+    },
+  );
+
+  it('keeps an avatar wrapper that renders content visible', () => {
+    render(
+      <ChatMessage
+        sender="assistant"
+        avatar={<span data-testid="avatar">N</span>}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    const wrapper = screen.getByTestId('avatar').parentElement;
+    expect(getComputedStyle(wrapper as HTMLElement).display).not.toBe('none');
+  });
+
   it('applies sender class', () => {
     render(
       <ChatMessage sender="user" data-testid="msg">
@@ -95,4 +221,124 @@ describe('ChatMessage', () => {
     );
     expect(screen.getByTestId('custom-content')).toBeTruthy();
   });
+
+  it('renders metadata for a non-system sender', () => {
+    render(
+      <ChatMessage sender="assistant" metadata={<span>Updated just now</span>}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    expect(screen.getByText('Updated just now')).toBeInTheDocument();
+  });
+
+  it('hides metadata for a system sender', () => {
+    render(
+      <ChatMessage sender="system" metadata={<span>Hidden metadata</span>}>
+        <span>Maintenance complete</span>
+      </ChatMessage>,
+    );
+    expect(screen.queryByText('Hidden metadata')).not.toBeInTheDocument();
+  });
+
+  it.each([false, true, ''])(
+    'does not render an empty metadata wrapper for %j',
+    metadata => {
+      render(
+        <ChatMessage sender="assistant" metadata={metadata}>
+          <span>Summary</span>
+        </ChatMessage>,
+      );
+      expect(screen.getByRole('article').querySelector('div:empty')).toBeNull();
+    },
+  );
+
+  it('preserves numeric metadata', () => {
+    render(
+      <ChatMessage sender="assistant" metadata={0}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it.each(contentThatRendersNothing)(
+    'collapses the metadata wrapper for %s',
+    (_label, createMetadata) => {
+      render(
+        <ChatMessage sender="assistant" metadata={createMetadata()}>
+          <span>Summary</span>
+        </ChatMessage>,
+      );
+      const column = screen.getByText('Summary').parentElement?.parentElement;
+      const wrapper = column?.lastElementChild;
+      expect(wrapper).toBeEmptyDOMElement();
+      expect(getComputedStyle(wrapper as HTMLElement).display).toBe('none');
+    },
+  );
+
+  it('keeps metadata that renders content visible', () => {
+    render(
+      <ChatMessage sender="assistant" metadata={<span>Updated</span>}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    const wrapper = screen.getByText('Updated').parentElement;
+    expect(getComputedStyle(wrapper as HTMLElement).display).not.toBe('none');
+  });
+
+  it('uses balanced density without list context', () => {
+    render(
+      <ChatMessage sender="assistant" data-testid="message">
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    expect(screen.getByTestId('message')).toHaveAttribute(
+      'data-density',
+      'balanced',
+    );
+  });
+
+  it('inherits list density and lets an explicit prop override it', () => {
+    render(
+      <ChatMessageList density="spacious">
+        <ChatMessage sender="assistant" data-testid="inherited">
+          <span>Inherited</span>
+        </ChatMessage>
+        <ChatMessage
+          sender="assistant"
+          density="compact"
+          data-testid="explicit">
+          <span>Explicit</span>
+        </ChatMessage>
+      </ChatMessageList>,
+    );
+    expect(screen.getByTestId('inherited')).toHaveAttribute(
+      'data-density',
+      'spacious',
+    );
+    expect(screen.getByTestId('explicit')).toHaveAttribute(
+      'data-density',
+      'compact',
+    );
+  });
+
+  it('forwards root props and ref while preserving the theme target', () => {
+    const ref = createRef<HTMLElement>();
+    render(
+      <ChatMessage
+        ref={ref}
+        sender="assistant"
+        data-testid="message"
+        data-purpose="summary"
+        className="consumer-message"
+        style={{order: 2}}>
+        <span>Summary</span>
+      </ChatMessage>,
+    );
+    const message = screen.getByTestId('message');
+    expect(ref.current).toBe(message);
+    expect(message).toHaveAttribute('data-purpose', 'summary');
+    expect(message).toHaveClass('astryx-chat-message', 'consumer-message');
+    expect(message.style.order).toBe('2');
+  });
 });

package/src/Chat/ChatMessage.tsx

@@ -16,6 +16,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Chat/index.ts (exports)
  * - /apps/storybook/stories/Chat.stories.tsx
+ * - /apps/storybook/stories/ChatMessage.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/ChatMessage/ (block examples)
  */
 
@@ -33,7 +34,7 @@ import {
   type ChatMessageSender,
   type ChatDensity,
 } from './ChatContext';
-import {mergeProps} from '../utils';
+import {isRenderable, mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
@@ -49,9 +50,17 @@ export interface ChatMessageProps extends BaseProps<HTMLElement> {
    * should span the full message column.
    */
   children: ReactNode;
+  /**
+   * Avatar content rendered beside a non-system message.
+   * `null`, booleans, and empty strings create no slot; any other content that
+   * renders nothing collapses its slot.
+   */
   avatar?: ReactNode;
   /**
    * Sender name rendered above the message body.
+   * `null`, booleans, and empty strings create no slot, and the message is
+   * labelled by the translated sender fallback; any other content that renders
+   * nothing collapses its slot and falls back to the same label.
    * Use when the first child is raw content (not a bubble).
    * If the first child is a ChatMessageBubble, put the name on the
    * bubble's `name` prop instead — it aligns with the bubble's padding.
@@ -59,6 +68,8 @@ export interface ChatMessageProps extends BaseProps<HTMLElement> {
   name?: ReactNode;
   /**
    * Metadata rendered below the message body.
+   * `null`, booleans, and empty strings create no slot; any other content that
+   * renders nothing collapses its slot.
    * Use when the last child is raw content (not a bubble).
    * If the last child is a ChatMessageBubble, put metadata on the
    * bubble's `metadata` prop instead — it aligns with the bubble's padding.
@@ -94,7 +105,11 @@ const styles = stylex.create({
     flexDirection: 'row',
     justifyContent: 'center',
   },
+  // Slot wrappers collapse when the caller's content renders nothing, so an
+  // empty Fragment or a component that returns null leaves no gap. Content is
+  // never inspected to decide this.
   avatarWrap: {
+    display: {default: null, ':empty': 'none'},
     flexShrink: 0,
     ':has(~ * [data-chat-name])': {
       marginBlockStart: spacingVars['--spacing-5'],
@@ -117,12 +132,16 @@ const styles = stylex.create({
     alignItems: 'flex-end',
   },
   name: {
+    display: {default: null, ':empty': 'none'},
     fontSize: typeScaleVars['--text-supporting-size'],
     fontWeight: fontWeightVars['--font-weight-semibold'],
     color: colorVars['--color-text-secondary'],
     lineHeight: typeScaleVars['--text-supporting-leading'],
     marginBlockEnd: spacingVars['--spacing-1'],
   },
+  metadata: {
+    display: {default: null, ':empty': 'none'},
+  },
   childrenWrap: {
     display: 'flex',
     flexDirection: 'column',
@@ -219,8 +238,9 @@ export function ChatMessage({
         : styles.childrenAssistant;
 
   const isSystem = sender === 'system';
-  const hasAvatar = avatar != null && !isSystem;
-  const hasName = name != null && !isSystem;
+  const hasAvatar = !isSystem && isRenderable(avatar);
+  const hasName = !isSystem && isRenderable(name);
+  const hasMetadata = !isSystem && isRenderable(metadata);
   const nameId = useId();
 
   return (
@@ -229,9 +249,10 @@ export function ChatMessage({
         {...rest}
         ref={ref}
         data-testid={testId}
-        aria-label={
-          !hasName ? t('@astryx.chatMessage.messageFrom', {sender}) : undefined
-        }
+        // The visible name labels the article. When it renders no text, the
+        // label reference resolves to nothing and the accessible name falls
+        // back to aria-label (accessible name computation 1.2, step 2B).
+        aria-label={t('@astryx.chatMessage.messageFrom', {sender})}
         aria-labelledby={hasName ? nameId : undefined}
         {...mergeProps(
           themeProps('chat-message', {sender, density}),
@@ -262,7 +283,9 @@ export function ChatMessage({
             {children}
           </div>
 
-          {metadata != null && !isSystem && <div>{metadata}</div>}
+          {hasMetadata && (
+            <div {...stylex.props(styles.metadata)}>{metadata}</div>
+          )}
         </div>
       </article>
     </ChatMessageContext>

package/src/Chat/ChatSystemMessage.spec.md

@@ -80,7 +80,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 - Sender identity, avatar, bubble, transcript ordering, or scrolling.
 - Divider rule paint, label placement, separator role, or separator naming, which are delegated to `component:Divider`.
 - Long Divider-label overflow and forced-colors rule paint, which remain shared `component:Divider` advisories rather than ChatSystemMessage-owned defects.
-- Divider's falsey-label rendering. Empty string and empty Fragment content leave the separator without a visible label or accessible name; numeric zero renders stray `00` text with no accessible name. This is a shared `spec:AST-002/FR15` advisory routed to `component:Divider`.
+- Divider's skipped-label rendering. Empty strings and empty Fragments leave the separator without a visible label or accessible name; numeric zero renders one visible `0` and names the separator `0`. These partitions remain owned by `component:Divider`.
 - The semantic or directional meaning of caller-provided content or icon artwork.
 - Announcement timing or spoken output; claims at that layer require `spec:AST-009` evidence.
 
@@ -99,14 +99,14 @@ observable public surface without deciding the unresolved divider/icon contract.
 
 ## Behavioral and layout contract
 
-| ID  | Candidate invariant                                                                                                                                                                                                       | Basis                                                                                                       | Draft review state                                      |
-| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| FR1 | The default branch MUST render the required content in a centered, noninteractive status row, allow long content to wrap within the available inline space, and preserve optional icon geometry.                          | Current source, released docs, tests, and examples                                                          | Verified current behavior                               |
-| FR2 | For truthy content, the divider branch MUST render the content through Divider as a labelled horizontal separator inside the component's status root. Falsey content follows the shared Divider advisory recorded in AV1. | Current source, released docs, Divider implementation, tests, and examples                                  | Verified current behavior; shared Divider advisory      |
-| FR3 | The divider branch currently ignores `icon`; this draft MUST NOT convert that observation into a stable restriction, a requirement to render the icon, or a warning policy.                                               | `architecture:public-component-api/INV3`, `architecture:public-component-api/INV5`, and `spec:AST-002/FR15` | Human API decision required; see OQ1                    |
-| FR4 | Supported root DOM, data, ARIA, className, style, xstyle, and ref inputs MUST reach or compose on the root while component-owned `role="status"` and reflected `variant` remain intact.                                   | Current source plus `architecture:public-component-api/INV5-INV8`                                           | Verified current behavior and existing focused evidence |
-| FR5 | The component MUST use semantic color, spacing, and typography tokens and logical layout; the `variant` state remains reflected on the single `chat-system-message` target.                                               | Current source, `architecture:theme-tokens`, and theming architecture                                       | Verified current behavior                               |
-| FR6 | The component remains render-only: props determine output without Effects, state mirrors, observers, listeners, timers, or owned async resources.                                                                         | Current source and `architecture:react-component-runtime/INV1-INV8`                                         | Verified current behavior                               |
+| ID  | Candidate invariant                                                                                                                                                                                  | Basis                                                                                                       | Draft review state                                      |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
+| FR1 | The default branch MUST render the required content in a centered, noninteractive status row, allow long content to wrap within the available inline space, and preserve optional icon geometry.     | Current source, released docs, tests, and examples                                                          | Verified current behavior                               |
+| FR2 | The divider branch MUST render renderable content through Divider as a labelled horizontal separator inside the component's status root. Skipped content follows Divider's delegated label contract. | Current source, released docs, Divider implementation, tests, and examples                                  | Verified current behavior; delegated Divider partitions |
+| FR3 | The divider branch currently ignores `icon`; this draft MUST NOT convert that observation into a stable restriction, a requirement to render the icon, or a warning policy.                          | `architecture:public-component-api/INV3`, `architecture:public-component-api/INV5`, and `spec:AST-002/FR15` | Human API decision required; see OQ1                    |
+| FR4 | Supported root DOM, data, ARIA, className, style, xstyle, and ref inputs MUST reach or compose on the root while component-owned `role="status"` and reflected `variant` remain intact.              | Current source plus `architecture:public-component-api/INV5-INV8`                                           | Verified current behavior and existing focused evidence |
+| FR5 | The component MUST use semantic color, spacing, and typography tokens and logical layout; the `variant` state remains reflected on the single `chat-system-message` target.                          | Current source, `architecture:theme-tokens`, and theming architecture                                       | Verified current behavior                               |
+| FR6 | The component remains render-only: props determine output without Effects, state mirrors, observers, listeners, timers, or owned async resources.                                                    | Current source and `architecture:react-component-runtime/INV1-INV8`                                         | Verified current behavior                               |
 
 ### Allowed variation
 
@@ -116,9 +116,8 @@ observable public surface without deciding the unresolved divider/icon contract.
   content unchanged: empty string and empty Fragment content remain empty, while
   numeric zero renders one `0`. In the divider variant, the status root and separator
   remain; empty string and empty Fragment content produce no visible label or
-  accessible name, while numeric zero paints stray `00` text with no accessible name.
-  The divider's falsey-label behavior is a shared `spec:AST-002/FR15` advisory routed
-  to `component:Divider`.
+  accessible name, while numeric zero renders one visible `0` and names the
+  separator `0`. Divider owns those label partitions.
 - **AV2 - Caller styling.** Supported root styling inputs may extend the component
   without replacing owned status semantics or variant reflection.
 - **AV3 - Delegated Divider paint.** Divider owns its rule and label paint and may
@@ -126,15 +125,15 @@ observable public surface without deciding the unresolved divider/icon contract.
 
 ### Representative states
 
-| State                 | Required invariant                                                                                                                                                                                                                              | Allowed variation                           |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
-| Default               | Centered status content is present.                                                                                                                                                                                                             | Content, theme, and root styling.           |
-| Default with icon     | Optional icon content and visible content render together.                                                                                                                                                                                      | Caller-provided artwork and content.        |
-| Default long content  | Content wraps without crossing either inline edge or creating page overflow.                                                                                                                                                                    | Theme and localized content.                |
-| Divider               | A labelled horizontal separator presents the supplied content.                                                                                                                                                                                  | Label content, theme, and root styling.     |
-| Divider with icon     | Current output is measured without deciding the ignored-input contract.                                                                                                                                                                         | No behavior change until OQ1 is resolved.   |
-| Empty ReactNode       | The default variant keeps `role="status"` and renders content unchanged (empty or one `0`). In the divider variant, the status root and separator remain; empty content has no label/name, while numeric zero paints stray `00` without a name. | Empty string, numeric zero, empty Fragment. |
-| Narrow/coarse pointer | The noninteractive row remains visible without horizontal page overflow.                                                                                                                                                                        | Theme and supported content.                |
+| State                 | Required invariant                                                                                                                                                                                                                       | Allowed variation                           |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
+| Default               | Centered status content is present.                                                                                                                                                                                                      | Content, theme, and root styling.           |
+| Default with icon     | Optional icon content and visible content render together.                                                                                                                                                                               | Caller-provided artwork and content.        |
+| Default long content  | Content wraps without crossing either inline edge or creating page overflow.                                                                                                                                                             | Theme and localized content.                |
+| Divider               | A labelled horizontal separator presents the supplied content.                                                                                                                                                                           | Label content, theme, and root styling.     |
+| Divider with icon     | Current output is measured without deciding the ignored-input contract.                                                                                                                                                                  | No behavior change until OQ1 is resolved.   |
+| Empty ReactNode       | The default variant keeps `role="status"` and renders content unchanged (empty or one `0`). In the divider variant, the status root and separator remain; empty content has no label/name, while numeric zero renders and names one `0`. | Empty string, numeric zero, empty Fragment. |
+| Narrow/coarse pointer | The noninteractive row remains visible without horizontal page overflow.                                                                                                                                                                 | Theme and supported content.                |
 
 ### Transformation and precedence order
 
@@ -156,10 +155,10 @@ observable public surface without deciding the unresolved divider/icon contract.
 - **AR1 - Status exposure.** The root currently exposes `role="status"` for both
   variants. Browser evidence may prove role exposure; spoken announcement timing is
   outside this draft and requires `spec:AST-009` evidence.
-- **AR2 - Divider relationship.** For truthy content, the divider branch delegates a
+- **AR2 - Divider relationship.** Renderable content in the divider branch delegates a
   horizontal `separator` whose labelled target contains the visible label; focused DOM
-  tests verify the computed accessible name. Falsey content follows the shared Divider
-  advisory in AV1.
+  tests verify the computed accessible name. Skipped content follows Divider's
+  delegated label contract.
 - **AR3 - Caller content.** Visible content remains the self-contained message.
   Caller-provided icon content does not replace that text.
 - **AR4 - Noninteractive surface.** The component introduces no focus target,
@@ -180,8 +179,8 @@ icon artwork, live-region timing, or divider/icon behavior.
 ## Family and system relationships
 
 - `component:Divider` owns the delegated separator structure, role, name,
-  paint, long-label overflow, and falsey-label behavior. The numeric-zero `00`
-  output with no accessible name is a shared `spec:AST-002/FR15` advisory.
+  paint, long-label overflow, and label partitions. Numeric zero renders as one
+  visible label and names the separator `0`; skipped content remains unlabelled.
 - `architecture:public-component-api` owns released exports, BaseProps reachability,
   styling composition, and the ref contract.
 - `architecture:component-theming-surface` owns the target/anatomy mapping and
@@ -197,17 +196,17 @@ icon artwork, live-region timing, or divider/icon behavior.
 
 ## Verification map
 
-| Contract                  | Verification                                                                                                    | Representative states                                                                                                              | Mutation or failure expectation                                                                                                                           | Audit section                           |
-| ------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| FR1, AR1, AR3             | `ChatSystemMessage.test.tsx`, scoped axe, and exact-head Chromium receipts                                      | Default, default with icon, long content, nested live log, neutral light/dark                                                      | Missing content, status role, icon content, wrapping, or browser-visible subject fails focused or browser evidence.                                       | `audit:ChatSystemMessage/accessibility` |
-| FR2, AR2                  | `ChatSystemMessage.test.tsx`, Divider tests, scoped axe, and exact-head Chromium receipts                       | Truthy divider labels plus empty string, numeric zero, and empty Fragment observations                                             | Lost separator role, truthy label association, orientation, content, or paint fails focused or browser evidence; falsey anomalies stay routed to Divider. | `audit:ChatSystemMessage/behavior`      |
-| FR3                       | Closed audit inventory and exact-head observation of the divider/icon partition                                 | Divider with supplied icon                                                                                                         | The audit must expose, not silently omit, the unresolved branch; implementation remains unchanged until owner decision.                                   | `audit:ChatSystemMessage/public-api`    |
-| FR4                       | Mutation-sensitive root-passthrough tests, source inspection, type checks, and target reflection                | Default and divider roots                                                                                                          | Removing ref, className, style, xstyle, ARIA forwarding, or owned role precedence fails focused tests.                                                    | `audit:ChatSystemMessage/public-api`    |
-| FR5                       | `themingTargets.test.ts`, source inspection, generated build, and exact-head computed paint                     | Both variants and color modes                                                                                                      | Target/state metadata drift, raw styling, physical layout, or unresolved mode paint fails checks or browser evidence.                                     | `audit:ChatSystemMessage/theming`       |
-| FR6                       | Source inspection, strict lint, and component test suite                                                        | Every render                                                                                                                       | Adding hidden state or an owned external resource triggers runtime review and corresponding evidence.                                                     | `audit:ChatSystemMessage/code-health`   |
-| RTL relation              | Source-hashed verified-N/A record                                                                               | Both variants and caller-owned icon content                                                                                        | Directional component-owned content, physical positioning, ordering, scroll/drag, overlay, or horizontal keyboard behavior invalidates the record.        | `audit:ChatSystemMessage/i18n-rtl`      |
-| Browser matrix            | `ChatSystemMessage.a11y.chromium.spec.ts` exact-head 10-sensor receipts                                         | Default, icon, wrapped long content, divider, unresolved divider/icon, nested live log, 320px/coarse pointer, light/dark, D7 pairs | Stale build, wrong story, incorrect mode, missing semantics, default overflow, failed contrast, blank crop, or page error fails closed.                   | `audit:ChatSystemMessage/visual`        |
-| Documentation and surface | Consumer docs, published declarations, block metadata, explicit story ownership, exports, and `check:knowledge` | Props, `./Chat` subpath, four blocks, draft record                                                                                 | Missing or stale public docs, export, owner route, target map, or knowledge shape fails validation or review.                                             | `audit:ChatSystemMessage/docs`          |
+| Contract                  | Verification                                                                                                    | Representative states                                                                                                              | Mutation or failure expectation                                                                                                                         | Audit section                           |
+| ------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| FR1, AR1, AR3             | `ChatSystemMessage.test.tsx`, scoped axe, and exact-head Chromium receipts                                      | Default, default with icon, long content, nested live log, neutral light/dark                                                      | Missing content, status role, icon content, wrapping, or browser-visible subject fails focused or browser evidence.                                     | `audit:ChatSystemMessage/accessibility` |
+| FR2, AR2                  | `ChatSystemMessage.test.tsx`, Divider tests, scoped axe, and exact-head Chromium receipts                       | Labelled divider content plus empty string, numeric zero, and empty Fragment observations                                          | Lost separator role, label association, orientation, content, or paint fails focused or browser evidence; skipped partitions stay delegated to Divider. | `audit:ChatSystemMessage/behavior`      |
+| FR3                       | Closed audit inventory and exact-head observation of the divider/icon partition                                 | Divider with supplied icon                                                                                                         | The audit must expose, not silently omit, the unresolved branch; implementation remains unchanged until owner decision.                                 | `audit:ChatSystemMessage/public-api`    |
+| FR4                       | Mutation-sensitive root-passthrough tests, source inspection, type checks, and target reflection                | Default and divider roots                                                                                                          | Removing ref, className, style, xstyle, ARIA forwarding, or owned role precedence fails focused tests.                                                  | `audit:ChatSystemMessage/public-api`    |
+| FR5                       | `themingTargets.test.ts`, source inspection, generated build, and exact-head computed paint                     | Both variants and color modes                                                                                                      | Target/state metadata drift, raw styling, physical layout, or unresolved mode paint fails checks or browser evidence.                                   | `audit:ChatSystemMessage/theming`       |
+| FR6                       | Source inspection, strict lint, and component test suite                                                        | Every render                                                                                                                       | Adding hidden state or an owned external resource triggers runtime review and corresponding evidence.                                                   | `audit:ChatSystemMessage/code-health`   |
+| RTL relation              | Source-hashed verified-N/A record                                                                               | Both variants and caller-owned icon content                                                                                        | Directional component-owned content, physical positioning, ordering, scroll/drag, overlay, or horizontal keyboard behavior invalidates the record.      | `audit:ChatSystemMessage/i18n-rtl`      |
+| Browser matrix            | `ChatSystemMessage.a11y.chromium.spec.ts` exact-head 10-sensor receipts                                         | Default, icon, wrapped long content, divider, unresolved divider/icon, nested live log, 320px/coarse pointer, light/dark, D7 pairs | Stale build, wrong story, incorrect mode, missing semantics, default overflow, failed contrast, blank crop, or page error fails closed.                 | `audit:ChatSystemMessage/visual`        |
+| Documentation and surface | Consumer docs, published declarations, block metadata, explicit story ownership, exports, and `check:knowledge` | Props, `./Chat` subpath, four blocks, draft record                                                                                 | Missing or stale public docs, export, owner route, target map, or knowledge shape fails validation or review.                                           | `audit:ChatSystemMessage/docs`          |
 
 ## Decision log
 

package/src/Chat/ChatSystemMessage.test.tsx

@@ -152,7 +152,7 @@ describe('ChatSystemMessage', () => {
     expect(root).toContainElement(screen.getByRole('separator'));
   });
 
-  it('records Divider numeric-zero output for the shared FR15 advisory', () => {
+  it('keeps the numeric-zero label visible and names the shared divider', () => {
     render(
       <ChatSystemMessage variant="divider" data-testid="divider-zero">
         {0}
@@ -160,8 +160,8 @@ describe('ChatSystemMessage', () => {
     );
     const root = screen.getByTestId('divider-zero');
     const separator = screen.getByRole('separator');
-    expect(root).toHaveTextContent('00');
-    expect(separator).not.toHaveAccessibleName();
-    expect(separator).not.toHaveAttribute('aria-labelledby');
+    expect(root).toHaveTextContent(/^0$/);
+    expect(separator).toHaveAccessibleName('0');
+    expect(separator).toHaveAttribute('aria-labelledby');
   });
 });