@astryxdesign/core 0.1.3 → 0.1.4-canary.02643db

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -392,4 +392,40 @@ describe('CheckboxInput', () => {
       expect(screen.getByRole('checkbox')).toBeDisabled();
     });
   });
+  describe('form participation', () => {
+    it('submits under htmlName when checked', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput label="Terms" htmlName="terms" value={true} onChange={() => {}} />
+        </form>,
+      );
+      const data = new FormData(container.querySelector('form')!);
+      expect(data.get('terms')).toBe('on');
+    });
+
+    it('is excluded from form data when disabled, even with a disabledMessage', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput
+            label="Terms"
+            htmlName="terms"
+            value={true}
+            onChange={() => {}}
+            isDisabled
+            disabledMessage="Locked"
+          />
+        </form>,
+      );
+      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+    });
+
+    it('submits nothing when unchecked', () => {
+      const {container} = render(
+        <form>
+          <CheckboxInput label="Terms" htmlName="terms" value={false} onChange={() => {}} />
+        </form>,
+      );
+      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+    });
+  });
 });

package/src/CheckboxInput/CheckboxInput.tsx

@@ -272,6 +272,12 @@ export interface CheckboxInputProps extends Omit<BaseProps, 'onChange'> {
    * @default false
    */
   isDisabled?: boolean;
+
+  /**
+   * The HTML name attribute for the underlying checkbox input.
+   * Useful for form submissions.
+   */
+  htmlName?: string;
   /**
    * Explains why the checkbox is disabled. When set together with
    * `isDisabled`, the checkbox shows a tooltip with this text on hover and
@@ -374,6 +380,7 @@ export function CheckboxInput({
   isLoading = false,
   value,
   isDisabled = false,
+  htmlName,
   disabledMessage,
   isReadOnly = false,
   isOptional = false,
@@ -484,6 +491,10 @@ export function CheckboxInput({
             )}
             id={id}
             type="checkbox"
+            // Withhold the name while disabled: with a disabledMessage the
+            // input stays focusable (not natively disabled), and a disabled
+            // control must not submit.
+            name={isDisabled ? undefined : htmlName}
             checked={isChecked}
             // With a disabledMessage the checkbox keeps focusability via
             // aria-disabled so the reason is focus-discoverable; toggling is

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -81,7 +81,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the group is disabled. Applies to the whole-group disabled state (isDisabled), not per item. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkboxes focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxList in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the group is disabled. Applies to the whole-group disabled state (isDisabled), not per item. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkboxes focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxList in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'status',

package/src/Code/Code.test.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Code.test.tsx
+ * @input Uses vitest, @testing-library/react, Code component
+ * @output Unit tests for Code component behavior
+ * @position Testing; validates Code.tsx implementation
+ *
+ * SYNC: When Code.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {Code} from './Code';
+
+describe('Code', () => {
+  it('renders children inside a <code> element', () => {
+    render(<Code>const x = 1</Code>);
+    const el = screen.getByText('const x = 1');
+    expect(el.tagName).toBe('CODE');
+  });
+
+  it('forwards ref to the root element', () => {
+    const ref = vi.fn();
+    render(<Code ref={ref}>code</Code>);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLElement));
+  });
+
+  it('defaults color to primary', () => {
+    render(<Code>code</Code>);
+    expect(screen.getByText('code')).toHaveClass('astryx-code', 'primary');
+  });
+
+  it('applies the secondary color', () => {
+    render(<Code color="secondary">code</Code>);
+    expect(screen.getByText('code')).toHaveClass('astryx-code', 'secondary');
+  });
+
+  it('applies the inherit color', () => {
+    render(<Code color="inherit">code</Code>);
+    expect(screen.getByText('code')).toHaveClass('astryx-code', 'inherit');
+  });
+
+  it('adds a size class when size="inherit" (font-size + line-height inherit)', () => {
+    const {rerender} = render(<Code>code</Code>);
+    const defaultClass = screen.getByText('code').getAttribute('class');
+
+    rerender(<Code size="inherit">code</Code>);
+    const inheritClass = screen.getByText('code').getAttribute('class');
+
+    // size="inherit" adds an extra StyleX class beyond the default rendering.
+    expect(inheritClass).not.toEqual(defaultClass);
+  });
+});

package/src/Code/Code.tsx

@@ -42,9 +42,46 @@ const styles = stylex.create({
   },
 });
 
+const colorStyles = stylex.create({
+  primary: {
+    color: colorVars['--color-text-primary'],
+  },
+  secondary: {
+    color: colorVars['--color-text-secondary'],
+  },
+  inherit: {
+    color: 'inherit',
+  },
+});
+
+const sizeStyles = stylex.create({
+  // Adopt the surrounding text's font-size and line-height, for inline code
+  // that should match differently-sized text around it.
+  inherit: {
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+  },
+});
+
+/** Text color for {@link Code}, mirroring the primary/secondary/inherit subset of Text. */
+export type CodeColor = 'primary' | 'secondary' | 'inherit';
+
+/** Font size for {@link Code}. `'inherit'` adopts the surrounding text size. */
+export type CodeSize = 'inherit';
+
 export interface CodeProps extends BaseProps<HTMLElement> {
   /** Ref forwarded to the root element */
   ref?: React.Ref<HTMLElement>;
+  /**
+   * Text color. Mirrors the Text color subset.
+   * @default 'primary'
+   */
+  color?: CodeColor;
+  /**
+   * Font size. Set to `'inherit'` to adopt the surrounding text's font-size
+   * and line-height (useful for inline code inside larger/smaller text).
+   */
+  size?: CodeSize;
   /** Code content */
   children: ReactNode;
 }
@@ -64,6 +101,8 @@ export interface CodeProps extends BaseProps<HTMLElement> {
  */
 export function Code({
   children,
+  color = 'primary',
+  size,
   xstyle,
   className,
   style,
@@ -73,13 +112,18 @@ export function Code({
   return (
     <code
       ref={ref}
+      {...props}
       {...mergeProps(
-        themeProps('code'),
-        stylex.props(styles.base, xstyle),
+        themeProps('code', {color}),
+        stylex.props(
+          styles.base,
+          colorStyles[color],
+          size && sizeStyles[size],
+          xstyle,
+        ),
         className,
         style,
-      )}
-      data-testid={props['data-testid']}>
+      )}>
       {children}
     </code>
   );

package/src/Code/index.ts

@@ -7,4 +7,4 @@
  * @position Entry point for @astryxdesign/core/Code subpath export
  */
 
-export {Code, type CodeProps} from './Code';
+export {Code, type CodeProps, type CodeColor, type CodeSize} from './Code';

package/src/CodeBlock/index.ts

@@ -15,7 +15,7 @@ export {CodeBlock} from './CodeBlock';
 export type {CodeBlockProps} from './CodeBlock';
 
 export {Code} from '../Code';
-export type {CodeProps} from '../Code';
+export type {CodeProps, CodeColor, CodeSize} from '../Code';
 
 export {
   tokenize,

package/src/CommandPalette/CommandPaletteEmpty.tsx

@@ -20,7 +20,9 @@ import {
   typeScaleVars,
   typographyVars,
 } from '../theme/tokens.stylex';
+import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import {themeProps} from '../utils/themeProps';
 
 const styles = stylex.create({
   empty: {
@@ -64,9 +66,21 @@ export interface CommandPaletteEmptyProps extends BaseProps<HTMLDivElement> {
 export function CommandPaletteEmpty({
   ref,
   children,
+  xstyle,
+  className,
+  style,
+  ...props
 }: CommandPaletteEmptyProps) {
   return (
-    <div ref={ref} {...stylex.props(styles.empty)}>
+    <div
+      ref={ref}
+      {...mergeProps(
+        themeProps('command-palette-empty'),
+        stylex.props(styles.empty, xstyle),
+        className,
+        style,
+      )}
+      {...props}>
       {children}
     </div>
   );

package/src/ContextMenu/ContextMenu.tsx

@@ -55,6 +55,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
 import type {
   DropdownMenuOption,
@@ -114,6 +115,13 @@ export type ContextMenuOption = DropdownMenuOption;
 interface ContextMenuBaseProps extends BaseProps {
   /** Ref forwarded to the trigger wrapper element. */
   ref?: React.Ref<HTMLDivElement>;
+  /**
+   * Styles applied to the trigger wrapper element (the right-click target).
+   * By default the trigger is a plain block that hugs its content — pass a
+   * fill style (e.g. `width/height: 100%`) when the whole parent area should
+   * be right-clickable (as the Table does for full-cell context menus).
+   */
+  triggerXstyle?: StyleXStyles | StyleXStyles[];
   /** The trigger area — right-click on this to open the menu. */
   children: ReactNode;
   /** Custom menu width. @default '160px' */
@@ -184,6 +192,7 @@ export function ContextMenu({
   className,
   style,
   xstyle,
+  triggerXstyle,
   'data-testid': testId,
   ...props
 }: ContextMenuProps) {
@@ -382,7 +391,14 @@ export function ContextMenu({
         onContextMenu={handleContextMenu}
         {...longPressHandlers}
         data-testid={testId}
-        {...stylex.props(styles.trigger)}>
+        {...stylex.props(
+          styles.trigger,
+          ...(triggerXstyle
+            ? Array.isArray(triggerXstyle)
+              ? triggerXstyle
+              : [triggerXstyle]
+            : []),
+        )}>
         {children}
       </div>
 

package/src/DateInput/DateInput.doc.mjs

@@ -56,7 +56,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'value',
@@ -432,6 +432,11 @@ export const docsDense = {
         description:
           'Show a loading state with changeAction when the date triggers a server-side save.',
       },
+      {
+        guidance: true,
+        description:
+          'Use inside InputGroup for a short static prefix or suffix, such as a due-date hint.',
+      },
       {
         guidance: false,
         description:

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -52,7 +52,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateRangeInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateRangeInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'value',

package/src/DateRangeInput/DateRangeInput.tsx

@@ -146,8 +146,8 @@ const styles = stylex.create({
       },
     },
     fontFamily: typographyVars['--font-family-body'],
-    fontSize: typeScaleVars['--text-body-size'],
-    lineHeight: typeScaleVars['--text-body-leading'],
+    fontSize: typeScaleVars['--text-label-size'],
+    lineHeight: typeScaleVars['--text-label-leading'],
     color: colorVars['--color-text-primary'],
     cursor: 'pointer',
     textAlign: 'start',

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -58,7 +58,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateTimeInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateTimeInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'value',

package/src/DateTimeInput/DateTimeInput.tsx

@@ -72,7 +72,7 @@ import {
   plainDateFormat,
   DATE_FORMAT_LONG,
 } from '../utils/plainDate';
-import type {StyleXStyles} from '@stylexjs/stylex';
+
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
@@ -344,11 +344,6 @@ export interface DateTimeInputProps extends Omit<
    * @default 1
    */
   numberOfMonths?: 1 | 2;
-
-  /**
-   * Style overrides applied to the outer row container.
-   */
-  xstyle?: StyleXStyles;
 }
 
 function splitDateTime(dt: ISODateTimeString | undefined): {

package/src/Divider/Divider.tsx

@@ -18,7 +18,7 @@
 import type {ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
-import type {StyleXStyles} from '@stylexjs/stylex';
+
 import {
   colorVars,
   spacingVars,
@@ -80,28 +80,6 @@ export interface DividerProps extends BaseProps<HTMLDivElement> {
    * @default false
    */
   isFullBleed?: boolean;
-
-  /**
-   * StyleX styles created via `stylex.create()`. Merged with the component's
-   * base styles inside a single `stylex.props()` call for optimal deduplication.
-   *
-   * @example
-   * ```
-   * const overrides = stylex.create({ root: { marginBottom: 8 } });
-   * <Component xstyle={overrides.root} />
-   * ```
-   */
-  xstyle?: StyleXStyles;
-  /**
-   * CSS class name(s) appended to the root element.
-   * If you're using StyleX, prefer `xstyle` for optimal style deduplication.
-   */
-  className?: string;
-  /**
-   * Inline styles to apply to the root element. Spread after StyleX
-   * inline styles, so these values take priority.
-   */
-  style?: React.CSSProperties;
 }
 
 const baseStyles = stylex.create({

package/src/DropdownMenu/DropdownMenu.test.tsx

@@ -73,7 +73,9 @@ describe('DropdownMenu', () => {
     // The popup exposes its own role="menu"; it must not be nested inside a
     // modal dialog, which would announce an unnamed dialog around the menu
     // while focus stays on the trigger.
-    expect(screen.queryByRole('dialog', {hidden: true})).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('dialog', {hidden: true}),
+    ).not.toBeInTheDocument();
     expect(
       document.querySelector('[aria-modal="true"]'),
     ).not.toBeInTheDocument();
@@ -192,11 +194,11 @@ describe('DropdownMenu light-dismiss race', () => {
       <DropdownMenu
         button={{label: 'Actions'}}
         items={[{label: 'Edit'}]}
-        data-testid="xds-dropdown-menu"
+        data-testid="astryx-dropdown-menu"
       />,
     );
 
-    const trigger = screen.getByTestId('xds-dropdown-menu');
+    const trigger = screen.getByTestId('astryx-dropdown-menu');
     fireEvent.click(trigger); // open
     fireEvent.click(trigger); // close (stamps guard)
     fireEvent.click(trigger); // would re-open without guard

package/src/EmptyState/EmptyState.doc.mjs

@@ -65,7 +65,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-empty-state'},
+      {className: 'astryx-empty-state', visualProps: ['variant']},
     ],
   },
   usage: {

package/src/Field/Field.doc.mjs

@@ -27,7 +27,7 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-field'},
+      {className: 'astryx-field', visualProps: ['layout']},
       {className: 'astryx-field-label'},
       {className: 'astryx-field-status', visualProps: ['type', 'variant']},
     ],

package/src/FileInput/FileInput.doc.mjs

@@ -92,7 +92,7 @@ export const docs = {
       name: 'disabledMessage',
       type: 'string',
       description:
-        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (opening the file picker stays blocked). Use this instead of wrapping a disabled FileInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.',
+        'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the trigger focusable via aria-disabled (opening the file picker stays blocked). Use this instead of wrapping a disabled FileInput in Tooltip; disabled controls swallow the hover events an external Tooltip needs.',
     },
     {
       name: 'isLoading',

package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`FormLayout > matches snapshot for horizontal direction 1`] = `
 <div
   class="astryx-form-layout horizontal FormLayout__styles.base xdt5ytf x18g69wz FormLayout__styles.horizontal xrvj5dj x1mt1orb xu6a5m6"
   data-direction="horizontal"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:45"
   data-testid="layout"
 >
   <input
@@ -20,7 +19,6 @@ exports[`FormLayout > matches snapshot for horizontal-labels direction 1`] = `
 <div
   class="astryx-form-layout horizontal-labels FormLayout__styles.base xdt5ytf FormLayout__styles.horizontalLabels xrvj5dj x1pmbctz xlaq8a2 x7a106z xedohl4 x1rpgqan x1a1jff"
   data-direction="horizontal-labels"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40; @astryxdesign/core:src/FormLayout/FormLayout.tsx:50"
   data-testid="layout"
 >
   <label>
@@ -36,7 +34,6 @@ exports[`FormLayout > matches snapshot for vertical direction 1`] = `
 <div
   class="astryx-form-layout vertical FormLayout__styles.base x78zum5 xdt5ytf x18g69wz"
   data-direction="vertical"
-  data-style-src="@astryxdesign/core:src/FormLayout/FormLayout.tsx:40"
   data-testid="layout"
 >
   <input

package/src/Grid/Grid.doc.mjs

@@ -17,7 +17,7 @@ export const docs = {
       { guidance: true, description: 'Use `repeat: \'fill\'` (the default) for consistent item widths. Use `\'fit\'` when items should stretch to fill leftover space.' },
       { guidance: false, description: 'Write manual CSS grid; Grid handles spacing and responsive behavior for you.' },
       { guidance: false, description: 'Use `HStack` with wrapping for grids; use Grid instead.' },
-      { guidance: true, description: 'Track templates use CSS-variable indirection (not raw inline styles), so `xstyle` overrides of `gridTemplateColumns` — including inside `@media` queries — take effect.' },
+      { guidance: true, description: 'Track templates use CSS-variable indirection (not raw inline styles), so `xstyle` overrides of `gridTemplateColumns` (including inside `@media` queries) take effect.' },
     ],
   },
   theming: {
@@ -112,7 +112,7 @@ export const docsZh = {
       { guidance: true, description: 'Use `repeat: \'fill\'` (the default) for consistent item widths. Use `\'fit\'` when items should stretch to fill leftover space.' },
       { guidance: false, description: 'Write manual CSS grid; Grid handles spacing and responsive behavior for you.' },
       { guidance: false, description: 'Use `HStack` with wrapping for grids; use Grid instead.' },
-      { guidance: true, description: 'Track templates use CSS-variable indirection (not raw inline styles), so `xstyle` overrides of `gridTemplateColumns` — including inside `@media` queries — take effect.' },
+      { guidance: true, description: 'Track templates use CSS-variable indirection (not raw inline styles), so `xstyle` overrides of `gridTemplateColumns` (including inside `@media` queries) take effect.' },
     ],
   },
 };
@@ -128,7 +128,7 @@ export const docsDense = {
       { guidance: true, description: 'Use repeat: \'fill\' (the default) for consistent item widths. Use \'fit\' when items should stretch to fill leftover space.' },
       { guidance: false, description: 'Write manual CSS grid; Grid handles spacing and responsive behavior for you.' },
       { guidance: false, description: 'Use HStack with wrapping for grids; use Grid instead.' },
-      { guidance: true, description: 'track templates use CSS-var indirection, not inline styles — xstyle/@media overrides of gridTemplateColumns work.' },
+      { guidance: true, description: 'track templates use CSS-var indirection, not inline styles, so xstyle/@media overrides of gridTemplateColumns work.' },
     ],
   },
 };

package/src/Layout/__tests__/edgeCompensation.test.tsx

@@ -116,4 +116,76 @@ describe('Edge Compensation', () => {
       expect(dismissButton).toHaveAttribute(EDGE_COMP_ATTR);
     });
   });
+
+  // The container's compensation selector is a direct-child combinator:
+  //   :has(> [data-astryx-edge-comp]:last-child)
+  // so an edge-comp marker only counts when it sits on a *direct* child of the
+  // slot. Attaching a tooltip must not bury the marker one level deeper — the
+  // Button uses the tooltip hook (no wrapper element) so the marker stays on the
+  // button itself (#2578).
+  describe('Tooltip attachment preserves marker discoverability', () => {
+    // Resolve the toolbar slot (the flex wrapper that carries the negative
+    // margin) — it is the direct child of the [role="toolbar"] row.
+    const findSlot = (
+      button: HTMLElement,
+      toolbar: HTMLElement,
+    ): HTMLElement => {
+      let node = button;
+      while (node.parentElement && node.parentElement !== toolbar) {
+        node = node.parentElement;
+      }
+      return node;
+    };
+
+    it('keeps the marker on a direct child of the slot without a tooltip', () => {
+      const {container} = render(
+        <Toolbar
+          label="Actions"
+          endContent={
+            <Button
+              label="Close"
+              variant="ghost"
+              isIconOnly
+              icon={<span>x</span>}
+            />
+          }
+        />,
+      );
+      const button = screen.getByRole('button', {name: 'Close'});
+      const toolbar = container.querySelector(
+        '[role="toolbar"]',
+      ) as HTMLElement;
+      const slot = findSlot(button, toolbar);
+      const directMarked = slot.querySelector(`:scope > [${EDGE_COMP_ATTR}]`);
+      expect(directMarked).not.toBeNull();
+    });
+
+    it('keeps the marker on a direct child of the slot when tooltip is set', () => {
+      const {container} = render(
+        <Toolbar
+          label="Actions"
+          endContent={
+            <Button
+              label="Close"
+              variant="ghost"
+              isIconOnly
+              icon={<span>x</span>}
+              tooltip="Close panel"
+            />
+          }
+        />,
+      );
+      const button = screen.getByRole('button', {name: 'Close'});
+      const toolbar = container.querySelector(
+        '[role="toolbar"]',
+      ) as HTMLElement;
+      const slot = findSlot(button, toolbar);
+      // The tooltip is attached via the hook (no wrapper element), so the
+      // marker stays on the button — a direct child of the container's slot —
+      // and the container's direct-child `:has(> [marker]:last-child)` selector
+      // still matches.
+      const directMarked = slot.querySelector(`:scope > [${EDGE_COMP_ATTR}]`);
+      expect(directMarked).not.toBeNull();
+    });
+  });
 });

package/src/Markdown/Markdown.test.tsx

@@ -95,6 +95,29 @@ describe('Markdown', () => {
     expect(link.getAttribute('rel')).toBe('noopener noreferrer');
   });
 
+  it('renders a footer reference-style link as an anchor', () => {
+    // The XDS parser previously had no reference-definition support, so this
+    // rendered as literal `[the docs][docs]` text with the definition leaking
+    // as a paragraph. It now resolves to a real anchor.
+    render(
+      <Markdown>
+        {'See [the docs][docs] here.\n\n[docs]: https://example.com/docs\n'}
+      </Markdown>,
+    );
+    const link = screen.getByText('the docs');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('https://example.com/docs');
+    // The definition line must not leak into the rendered output.
+    expect(screen.queryByText(/\[docs\]:/)).toBeNull();
+  });
+
+  it('renders a shortcut reference-style link as an anchor', () => {
+    render(<Markdown>{'See [the docs].\n\n[the docs]: /docs'}</Markdown>);
+    const link = screen.getByText('the docs');
+    expect(link.tagName).toBe('A');
+    expect(link.getAttribute('href')).toBe('/docs');
+  });
+
   it('does not add target="_blank" to relative links', () => {
     render(<Markdown>{'[internal](/page)'}</Markdown>);
     const link = screen.getByText('internal');