@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/src/Avatar/Avatar.spec.md

@@ -122,17 +122,17 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Behavioral and layout contract
 
-| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Basis                    |
-| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| FR1 | The root is a relative, non-shrinking inline-flex box of the resolved size with the shape's radius; it carries the `avatar` target, which reflects `size` and `shape`. A clipped content area fills it with the same radius and suppresses text selection.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Current source and tests |
-| FR2 | The content area shows `src` while it has not failed, then `fallbackSrc` while it has not failed, then initials when the name yields any, then a default person icon at 60% of the box. Each image renders with empty `alt` and `object-fit: cover`. A failure is tracked per source, so a changed `src` or `fallbackSrc` is tried again.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Current source and tests |
-| FR3 | Initials are the first letter, digit, or emoji of the first and last words of the trimmed `name`, uppercased; leading punctuation in a word is skipped, words with none are dropped, one qualifying word yields one initial, and grapheme clusters are never split. A whitespace-only name counts as absent. Initials and the default icon paint on the `avatar-fallback` target (reflecting `size`) with `--color-neutral`, secondary text, body family, medium weight, and initials at 40% of the box.                                                                                                                                                                                                                                                                                                         | Current source and tests |
-| FR4 | A truthy `status` renders in an absolutely positioned slot outside the clipped content area. On a circle it centers on the circle's edge at the bottom inline-end 45° point; on other shapes it sits at the bottom inline-end corner, offset outward by a quarter of its size. Placement mirrors in right-to-left documents.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Current source and tests |
-| FR5 | The resolved name is `alt`, else `name` (blank strings count as absent), composed with the status label as the translated "{name}, {status}" when both exist; a status label alone also names the avatar. The status label comes from a string `label` on the passed element, read on every render, and from a label an AvatarStatusDot reports at any wrapper depth, which wins and updates the root before paint without a second render.                                                                                                                                                                                                                                                                                                                                                                      | Current source and tests |
-| FR6 | `href` renders the shared link component (or `as`) with `target` and `rel`; otherwise `onClick` renders a `button type="button"`; otherwise the root is a `div`. Link and button roots carry the `data-avatar-item` marker and the shared focus-visible outline; `onClick` attaches to the link or button. In development, an interactive avatar whose only name is a status label, or that has no name and no caller `aria-label`/`aria-labelledby`, logs a warning.                                                                                                                                                                                                                                                                                                                                            | Current source and tests |
-| FR7 | The tooltip shows the trimmed custom string, else the meaningful `name`, placed above, on hover and keyboard focus; `tooltip={false}` or a blank result shows none. A static avatar with a tooltip and outside a group gets `tabIndex={0}` so keyboard users can reveal it. A custom string is added to `aria-describedby` after any caller value; the default name tooltip is not, because it repeats the name. Implementation gap: a grouped link or button avatar that is not the group's tab stop stops opening its tooltip on focus after a re-render that re-attaches its root element: a new `status` element (an inline `status` prop creates one on every parent render), a changed `name`, `alt`, locale, caller ARIA, or caller `ref`, or a tooltip that turns on after mount (Current-state impact). | Current source and tests |
-| FR8 | Inside an AvatarGroup in the same layer (`spec:AST-038` FR7, FR8), the group's size and shape win over the avatar's own props; the root gains a 2px surface-colored ring outside its box and the group's negative inline-start overlap; a static avatar adds no tooltip tab stop, and link and button roots keep the `data-avatar-item` marker so they join the group's roving set. An avatar in a hover card, popover, or other layer opened from a group keeps its own size and shape, gets no ring or overlap, and keeps its tooltip tab stop; a link or button avatar there still carries the marker, so the group's roving focus, which selects marked elements in its DOM subtree, still includes it.                                                                                                      | Current source and tests |
-| FR9 | `ref` reaches the root of every variant. Supported DOM, ARIA, data, and event props reach the root after the derived ARIA, so a caller `aria-label`, `role`, or `aria-hidden` wins (`architecture:public-component-api` INV5); `data-testid` reaches the root; `xstyle`, `className`, and `style` merge in that order after component styles. Implementation gap: on the static root the component sets `tabIndex` after caller props, so a caller `tabIndex` is replaced (Current-state impact).                                                                                                                                                                                                                                                                                                                | Current source and tests |
+| ID  | Invariant                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Basis                    |
+| --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| FR1 | The root is a relative, non-shrinking inline-flex box of the resolved size with the shape's radius; it carries the `avatar` target, which reflects `size` and `shape`. A clipped content area fills it with the same radius and suppresses text selection.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Current source and tests |
+| FR2 | The content area shows `src` while it has not failed, then `fallbackSrc` while it has not failed, then initials when the name yields any, then a default person icon at 60% of the box. Each image renders with empty `alt` and `object-fit: cover`. A failure is tracked per source, so a changed `src` or `fallbackSrc` is tried again.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Current source and tests |
+| FR3 | Initials are the first letter, digit, or emoji of the first and last words of the trimmed `name`, uppercased; leading punctuation in a word is skipped, words with none are dropped, one qualifying word yields one initial, and grapheme clusters are never split. A whitespace-only name counts as absent. Initials and the default icon paint on the `avatar-fallback` target (reflecting `size`) with `--color-neutral`, secondary text, body family, medium weight, and initials at 40% of the box. In forced colors, a lone Avatar's initials and default icon take the surrounding color (`currentColor`): the forced foreground by default, and the system color of a control that paints one around it (GrayText, HighlightText); inside an AvatarGroup they keep the forced foreground on the group's ring. | Current source and tests |
+| FR4 | A truthy `status` renders in an absolutely positioned slot outside the clipped content area. On a circle it centers on the circle's edge at the bottom inline-end 45° point; on other shapes it sits at the bottom inline-end corner, offset outward by a quarter of its size. Placement mirrors in right-to-left documents.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Current source and tests |
+| FR5 | The resolved name is `alt`, else `name` (blank strings count as absent), composed with the status label as the translated "{name}, {status}" when both exist; a status label alone also names the avatar. The status label comes from a string `label` on the passed element, read on every render, and from a label an AvatarStatusDot reports at any wrapper depth, which wins and updates the root before paint without a second render.                                                                                                                                                                                                                                                                                                                                                                           | Current source and tests |
+| FR6 | `href` renders the shared link component (or `as`) with `target` and `rel`; otherwise `onClick` renders a `button type="button"`; otherwise the root is a `div`. Link and button roots carry the `data-avatar-item` marker and the shared focus-visible outline; `onClick` attaches to the link or button. In development, an interactive avatar whose only name is a status label, or that has no name and no caller `aria-label`/`aria-labelledby`, logs a warning.                                                                                                                                                                                                                                                                                                                                                 | Current source and tests |
+| FR7 | The tooltip shows the trimmed custom string, else the meaningful `name`, placed above, on hover and keyboard focus; `tooltip={false}` or a blank result shows none. A static avatar with a tooltip and outside a group gets `tabIndex={0}` so keyboard users can reveal it. A custom string is added to `aria-describedby` after any caller value; the default name tooltip is not, because it repeats the name. Implementation gap: a grouped link or button avatar that is not the group's tab stop stops opening its tooltip on focus after a re-render that re-attaches its root element: a new `status` element (an inline `status` prop creates one on every parent render), a changed `name`, `alt`, locale, caller ARIA, or caller `ref`, or a tooltip that turns on after mount (Current-state impact).      | Current source and tests |
+| FR8 | Inside an AvatarGroup in the same layer (`spec:AST-038` FR7, FR8), the group's size and shape win over the avatar's own props; the root gains a 2px surface-colored ring outside its box and the group's negative inline-start overlap; a static avatar adds no tooltip tab stop, and link and button roots keep the `data-avatar-item` marker so they join the group's roving set. An avatar in a hover card, popover, or other layer opened from a group keeps its own size and shape, gets no ring or overlap, and keeps its tooltip tab stop; a link or button avatar there still carries the marker, so the group's roving focus, which selects marked elements in its DOM subtree, still includes it.                                                                                                           | Current source and tests |
+| FR9 | `ref` reaches the root of every variant. Supported DOM, ARIA, data, and event props reach the root after the derived ARIA, so a caller `aria-label`, `role`, or `aria-hidden` wins (`architecture:public-component-api` INV5); `data-testid` reaches the root; `xstyle`, `className`, and `style` merge in that order after component styles. Implementation gap: on the static root the component sets `tabIndex` after caller props, so a caller `tabIndex` is replaced (Current-state impact).                                                                                                                                                                                                                                                                                                                     | Current source and tests |
 
 ### Allowed variation
 
@@ -227,17 +227,17 @@ no root part, so no anatomy-theming block is declared.
 
 ## Verification map
 
-| Contract           | Verification                                                                                                                                                | Representative states                                              | Mutation or failure expectation                                                                                                                                                                                                                                                                                                                                    | Audit section           |
-| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
-| FR1–FR3            | `Avatar.test.tsx` fallback, initials, retry, and target tests                                                                                               | Photo, failure, initials, punctuation, emoji, blank name; `lg` box | A wrong initials-or-icon fallback, split grapheme, lost retry, missing target, or wrong `lg` box size fails. Gap: no test sets `src` and `fallbackSrc` together, so the `src`-first order is unchecked, and sizes other than `lg` and numeric sizes are visible only in `Avatar.stories.tsx`.                                                                      | `audit:Avatar/behavior` |
-| FR4                | `Avatar.test.tsx` shape and status tests; `Avatar.stories.tsx` status fixtures                                                                              | Every shape with a status; RTL                                     | A missing status slot fails. Gap: the tests assert presence only, so the slot's position, mirroring, and offset are visible only in the rendered fixtures.                                                                                                                                                                                                         | `audit:Avatar/layout`   |
-| FR5, AR1, AR2, PR1 | `Avatar.test.tsx` status-name and wrapper suites                                                                                                            | Direct, wrapped, changing, removed labels                          | A lost composed name, extra render, or stale label fails.                                                                                                                                                                                                                                                                                                          | `audit:Avatar/a11y`     |
-| FR6, AR3           | `Avatar.test.tsx` interactivity suite                                                                                                                       | Link, button, static, dev warnings                                 | A wrong root, a missing marker, or a missing warning fails. Gap: no test checks the focus-visible outline.                                                                                                                                                                                                                                                         | `audit:Avatar/behavior` |
-| FR7, AR4, AR5      | `Avatar.test.tsx` name-tooltip suite                                                                                                                        | Default, custom, disabled, blank                                   | A missing tab stop, a duplicated description, or a lost ref fails. Gap: no test covers a grouped avatar's tooltip after a re-render that re-attaches its root element: a new `status` element (an inline `status` prop creates one on every parent render), a changed `name`, `alt`, locale, caller ARIA, or caller `ref`, or a tooltip that turns on after mount. | `audit:Avatar/a11y`     |
-| FR8                | `Avatar.test.tsx` group shape tests; `AvatarGroup.test.tsx` size-cascade, overlap, and roving suites; `layerScopedContext.test.tsx` AvatarGroup layer tests | Inside a group; in a layer opened from a group; outside a group    | An avatar size or shape prop winning inside a group, a lost overlap, an interactive avatar missing from the roving set, or a static avatar in a layer losing its tooltip tab stop fails. Gap: no test asserts the ring, or size and shape inside a layer.                                                                                                          | `audit:Avatar/behavior` |
-| FR9, AR6           | `Avatar.test.tsx` consumer-ARIA override suite                                                                                                              | Static and interactive roots                                       | A derived value replacing a caller `aria-label`, `role`, or `aria-hidden` fails. Gap: no test covers a caller `tabIndex`.                                                                                                                                                                                                                                          | `audit:Avatar/a11y`     |
-| AR1–AR3, AR5       | Accessibility-tree evidence (`spec:AST-009` FR3)                                                                                                            | Named, decorative, status-composed, interactive                    | Gap: no accessibility-tree check proves the computed roles, names, or description; the unit tests query the DOM.                                                                                                                                                                                                                                                   | `audit:Avatar/a11y`     |
-| AR7                | `Avatar.stories.tsx` interactive and size fixtures in a browser                                                                                             | Interactive avatars at every size                                  | Gap: no automated target-size check; the undersized targets are the recorded gap.                                                                                                                                                                                                                                                                                  | `audit:Avatar/a11y`     |
+| Contract           | Verification                                                                                                                                                | Representative states                                                                                                                   | Mutation or failure expectation                                                                                                                                                                                                                                                                                                                                                                              | Audit section           |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- |
+| FR1–FR3            | `Avatar.test.tsx` fallback, initials, retry, and target tests; `AvatarForcedColors.a11y.chromium.spec.ts` in real Chromium with forced colors emulated      | Photo, failure, initials, punctuation, emoji, blank name; `lg` box; forced colors alone, inside GrayText and HighlightText, and grouped | A wrong initials-or-icon fallback, split grapheme, lost retry, missing target, wrong `lg` box size, or forced-colors initials that miss the surrounding system color (lone) or leave the forced foreground (grouped) fails. Gap: no test sets `src` and `fallbackSrc` together, so the `src`-first order is unchecked, and sizes other than `lg` and numeric sizes are visible only in `Avatar.stories.tsx`. | `audit:Avatar/behavior` |
+| FR4                | `Avatar.test.tsx` shape and status tests; `Avatar.stories.tsx` status fixtures                                                                              | Every shape with a status; RTL                                                                                                          | A missing status slot fails. Gap: the tests assert presence only, so the slot's position, mirroring, and offset are visible only in the rendered fixtures.                                                                                                                                                                                                                                                   | `audit:Avatar/layout`   |
+| FR5, AR1, AR2, PR1 | `Avatar.test.tsx` status-name and wrapper suites                                                                                                            | Direct, wrapped, changing, removed labels                                                                                               | A lost composed name, extra render, or stale label fails.                                                                                                                                                                                                                                                                                                                                                    | `audit:Avatar/a11y`     |
+| FR6, AR3           | `Avatar.test.tsx` interactivity suite                                                                                                                       | Link, button, static, dev warnings                                                                                                      | A wrong root, a missing marker, or a missing warning fails. Gap: no test checks the focus-visible outline.                                                                                                                                                                                                                                                                                                   | `audit:Avatar/behavior` |
+| FR7, AR4, AR5      | `Avatar.test.tsx` name-tooltip suite                                                                                                                        | Default, custom, disabled, blank                                                                                                        | A missing tab stop, a duplicated description, or a lost ref fails. Gap: no test covers a grouped avatar's tooltip after a re-render that re-attaches its root element: a new `status` element (an inline `status` prop creates one on every parent render), a changed `name`, `alt`, locale, caller ARIA, or caller `ref`, or a tooltip that turns on after mount.                                           | `audit:Avatar/a11y`     |
+| FR8                | `Avatar.test.tsx` group shape tests; `AvatarGroup.test.tsx` size-cascade, overlap, and roving suites; `layerScopedContext.test.tsx` AvatarGroup layer tests | Inside a group; in a layer opened from a group; outside a group                                                                         | An avatar size or shape prop winning inside a group, a lost overlap, an interactive avatar missing from the roving set, or a static avatar in a layer losing its tooltip tab stop fails. Gap: no test asserts the ring, or size and shape inside a layer.                                                                                                                                                    | `audit:Avatar/behavior` |
+| FR9, AR6           | `Avatar.test.tsx` consumer-ARIA override suite                                                                                                              | Static and interactive roots                                                                                                            | A derived value replacing a caller `aria-label`, `role`, or `aria-hidden` fails. Gap: no test covers a caller `tabIndex`.                                                                                                                                                                                                                                                                                    | `audit:Avatar/a11y`     |
+| AR1–AR3, AR5       | Accessibility-tree evidence (`spec:AST-009` FR3)                                                                                                            | Named, decorative, status-composed, interactive                                                                                         | Gap: no accessibility-tree check proves the computed roles, names, or description; the unit tests query the DOM.                                                                                                                                                                                                                                                                                             | `audit:Avatar/a11y`     |
+| AR7                | `Avatar.stories.tsx` interactive and size fixtures in a browser                                                                                             | Interactive avatars at every size                                                                                                       | Gap: no automated target-size check; the undersized targets are the recorded gap.                                                                                                                                                                                                                                                                                                                            | `audit:Avatar/a11y`     |
 
 ## Decision log
 

package/src/Avatar/Avatar.tsx

@@ -193,6 +193,19 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-medium'],
     textTransform: 'uppercase',
   },
+  // After `fallback` on a lone Avatar: in forced colors its initials and
+  // default icon take the color around them, which the browser forces to
+  // CanvasText, so a control that paints itself disabled (GrayText) or
+  // selected (HighlightText) carries them with it; an
+  // authored color would be forced to CanvasText whatever the control shows.
+  // A grouped face keeps it: its ring's opaque fill is forced to Canvas, so
+  // only CanvasText is sure to read on it.
+  loneFallback: {
+    color: {
+      default: colorVars['--color-text-secondary'],
+      '@media (forced-colors: active)': 'currentColor',
+    },
+  },
   status: {
     position: 'absolute',
   },
@@ -784,6 +797,7 @@ export function Avatar({
               themeProps('avatar-fallback', {size: resolvedSize}),
               stylex.props(
                 styles.fallback,
+                avatarGroup == null && styles.loneFallback,
                 dynamicStyles.fontSize(numericSize),
               ),
             )}>
@@ -794,7 +808,10 @@ export function Avatar({
           <div
             {...mergeProps(
               themeProps('avatar-fallback', {size: resolvedSize}),
-              stylex.props(styles.fallback),
+              stylex.props(
+                styles.fallback,
+                avatarGroup == null && styles.loneFallback,
+              ),
             )}>
             <DefaultIcon size={numericSize} />
           </div>

package/src/Avatar/__tests__/AvatarForcedColors.a11y.chromium.spec.ts

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y scope ^packages/core/src/Avatar/ ^apps/storybook/stories/Avatar
+
+/**
+ * @file AvatarForcedColors.a11y.chromium.spec.ts
+ * @input The built Avatar "Initials Fallback" story in real Chromium, with
+ *   forced colors emulated and without
+ * @output Browser evidence that, in forced colors, a lone Avatar's initials
+ *   take the color around them: CanvasText by default, GrayText inside a control
+ *   that paints itself disabled, HighlightText inside a
+ *   selected one, while grouped faces keep CanvasText on the group's ring;
+ *   outside forced colors they keep the theme's color
+ * @position Regression proof for Avatar's fallback color (Chromium only:
+ *   Playwright's WebKit matches the forced-colors query but forces nothing)
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+/**
+ * The initials' color, with `around` painted on `host`: the Avatar's own box
+ * for a lone Avatar, the group's for grouped ones.
+ */
+async function initialsColor(
+  page: Page,
+  forcedColors: 'active' | 'none',
+  around: string | null,
+  {
+    story = 'core-avatar--initials-fallback',
+    host = '.astryx-avatar',
+  }: {story?: string; host?: string} = {},
+): Promise<{initials: string; reference: string}> {
+  await page.emulateMedia({forcedColors});
+  await page.goto(`${storybook.origin}/iframe.html?id=${story}&viewMode=story`);
+  await page.locator('.astryx-avatar-fallback').first().waitFor();
+  if (around != null) {
+    await page.addStyleTag({content: `${host} { ${around} }`});
+  }
+  return page.evaluate(() => {
+    const initials = document.querySelector('.astryx-avatar-fallback');
+    // A probe painted with the system color the initials should show.
+    const probe = document.createElement('span');
+    document.body.append(probe);
+    const read = (color: string) => {
+      probe.style.color = color;
+      return getComputedStyle(probe).color;
+    };
+    const result = {
+      initials: initials == null ? '' : getComputedStyle(initials).color,
+      reference: JSON.stringify({
+        CanvasText: read('CanvasText'),
+        GrayText: read('GrayText'),
+        HighlightText: read('HighlightText'),
+      }),
+    };
+    probe.remove();
+    return result;
+  });
+}
+
+test('in forced colors the initials are CanvasText by default', async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(page, 'active', null);
+  expect(initials).toBe(JSON.parse(reference).CanvasText);
+});
+
+test('in forced colors the initials take GrayText inside a control that paints itself disabled', async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(
+    page,
+    'active',
+    'color: GrayText;',
+  );
+  expect(initials).toBe(JSON.parse(reference).GrayText);
+});
+
+test('in forced colors the initials take HighlightText inside a selected control', async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(
+    page,
+    'active',
+    'forced-color-adjust: none; background: Highlight; color: HighlightText;',
+  );
+  expect(initials).toBe(JSON.parse(reference).HighlightText);
+});
+
+test("outside forced colors the initials keep the theme's color, whatever is around them", async ({
+  page,
+}) => {
+  const plain = await initialsColor(page, 'none', null);
+  const around = await initialsColor(page, 'none', 'color: rgb(200, 0, 0);');
+  expect(around.initials).toBe(plain.initials);
+  expect(plain.initials).not.toBe('rgb(200, 0, 0)');
+});
+
+test("in forced colors grouped initials keep CanvasText on the group's ring", async ({
+  page,
+}) => {
+  const {initials, reference} = await initialsColor(
+    page,
+    'active',
+    'color: GrayText;',
+    {
+      story: 'core-avatargroup--initials-fallback',
+      host: '.astryx-avatar-group',
+    },
+  );
+  expect(initials).toBe(JSON.parse(reference).CanvasText);
+});

package/src/Badge/Badge.doc.mjs

@@ -20,7 +20,7 @@ export const docs = {
       type: 'ReactNode',
       required: true,
       description:
-        'Badge text content. A badge is one line, so a label wider than the space available is cut with an ellipsis rather than escaping its container; a string or number label is also set as the badge\'s title so the full text stays reachable on hover.',
+        'Badge text content. A badge is one line and at least as tall as that line of its label, so it grows with its text (a larger text size); a label wider than the space available is cut with an ellipsis rather than escaping its container; a string or number label is also set as the badge\'s title so the full text stays reachable on hover.',
     },
     {
       name: 'icon',

package/src/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-supporting-leading'],
     fontWeight: fontWeightVars['--font-weight-medium'],
     whiteSpace: 'nowrap',
-    // A badge is one line by construction — fixed height, `nowrap` — so a
+    // A badge is one line by construction — one line tall, `nowrap` — so a
     // label wider than the space available has to go somewhere. Without these
     // it went *outside* its container: `nowrap` with nothing to clip it
     // neither wraps nor truncates, it just escapes, and lands on whatever sits
@@ -56,6 +56,16 @@ const styles = stylex.create({
     maxWidth: '100%',
     minWidth: 0,
   },
+  // Never shorter than one line of its label: when the text grows (a larger
+  // text size), the pill grows with the label instead of the label spilling
+  // out of it. A minimum rather than a new height, so
+  // the theme's height (`--spacing-5`, or a theme's own, such as Butter's
+  // 30px) holds at the default size, where the line fits. Only with a label:
+  // a color-only badge has no text to hold and keeps the component:Badge FR1
+  // geometry at every text size.
+  grows: {
+    minHeight: '1lh',
+  },
   // The ellipsis goes on the label rather than the badge itself, because
   // `text-overflow` needs a block container and taking the root off
   // `inline-flex` to get one would cost the icon its centring. The label is a
@@ -238,13 +248,20 @@ export function Badge({
       : typeof label === 'string' && label.length > 0
         ? label
         : undefined;
+  // Whether the label renders anything, which is when the badge grows with it.
+  const hasLabel = label !== '' && label != null && typeof label !== 'boolean';
 
   return (
     <span
       ref={ref}
       {...mergeProps(
         themeProps('badge', {variant}),
-        stylex.props(styles.base, variants[variant], xstyle),
+        stylex.props(
+          styles.base,
+          hasLabel && styles.grows,
+          variants[variant],
+          xstyle,
+        ),
         className,
         style,
       )}

package/src/Badge/__tests__/BadgeLargerText.a11y.chromium.spec.ts

@@ -0,0 +1,260 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file BadgeLargerText.a11y.chromium.spec.ts
+ * @input The `Core/Badge` Larger Text story in a built Storybook, in Chromium
+ *   at an iPhone's page size (402 x 714), under the neutral theme and under
+ *   Butter (whose badges set their own height).
+ * @output Real-layout proof that a badge with a label is never shorter than one
+ *   line of it, and that nothing else about its size changes: at the default
+ *   size its geometry is exactly what it is without that minimum (the theme's
+ *   height, Butter's own 30px included); when its text grows (here by raising
+ *   the supporting text size on a wrapper) the pill grows with the label,
+ *   contains it and shows all
+ *   of it, with no width floor; a color-only badge keeps its size at every
+ *   text size; and where there is too little room (a crowded row, a cell
+ *   narrower than one line) the badge shrinks and stays inside
+ *   (component:Badge FR3).
+ * @position Run with `pnpm test:a11y-contract`. Line boxes and box sizes need
+ *   a real layout engine; jsdom has neither.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+// A phone's page size (an iPhone 17 Pro's): at a desktop width every row fits
+// on one line and a squeezed, truncated label would go unseen.
+test.use({viewport: {width: 402, height: 714}});
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+interface BadgeBox {
+  label: string;
+  /** The label is cut with an ellipsis: wider than the room it has. */
+  truncated: boolean;
+  width: number;
+  height: number;
+  lineHeight: number;
+  labelTop: number;
+  labelBottom: number;
+  top: number;
+  bottom: number;
+}
+
+async function badgesIn(page: Page, size: string): Promise<BadgeBox[]> {
+  return page.getByTestId(`badge-row-${size}`).evaluate(row =>
+    [...row.querySelectorAll<HTMLElement>('.astryx-badge')].map(badge => {
+      const box = badge.getBoundingClientRect();
+      const label = badge.lastElementChild as HTMLElement;
+      const labelBox = label.getBoundingClientRect();
+      return {
+        label: label.textContent ?? '',
+        truncated: label.scrollWidth > label.clientWidth,
+        width: box.width,
+        height: box.height,
+        lineHeight: Number.parseFloat(getComputedStyle(badge).lineHeight),
+        labelTop: labelBox.top,
+        labelBottom: labelBox.bottom,
+        top: box.top,
+        bottom: box.bottom,
+      };
+    }),
+  );
+}
+
+/**
+ * Each badge's size in the row, with and without the minimum this change adds:
+ * the "without" pass sets `min-height` back to what it was before (`auto`) on
+ * the element itself.
+ */
+async function withAndWithoutMinimums(page: Page, size: string) {
+  return page.getByTestId(`badge-row-${size}`).evaluate(row =>
+    [...row.querySelectorAll<HTMLElement>('.astryx-badge')].map(badge => {
+      const measure = () => {
+        const box = badge.getBoundingClientRect();
+        return {width: box.width, height: box.height};
+      };
+      const withMinimums = measure();
+      badge.style.minHeight = 'auto';
+      const without = measure();
+      badge.style.removeProperty('min-height');
+      return {label: badge.textContent ?? '', withMinimums, without};
+    }),
+  );
+}
+
+/**
+ * Each badge's natural width in the row: its content's width plus its own
+ * inline padding, measured with no minimum or maximum width and sized to its
+ * content (`max-content`). A badge with room is exactly this wide, so a width
+ * floor (or a stretch) shows up as a difference.
+ */
+async function naturalWidths(page: Page, size: string): Promise<number[]> {
+  return page.getByTestId(`badge-row-${size}`).evaluate(row =>
+    [...row.querySelectorAll<HTMLElement>('.astryx-badge')].map(badge => {
+      const {style} = badge;
+      style.setProperty('width', 'max-content');
+      style.setProperty('min-width', '0px');
+      style.setProperty('max-width', 'none');
+      const width = badge.getBoundingClientRect().width;
+      style.removeProperty('width');
+      style.removeProperty('min-width');
+      style.removeProperty('max-width');
+      return width;
+    }),
+  );
+}
+
+/** The neutral theme's badge height: its `--spacing-5`. */
+async function spacing5(page: Page): Promise<number> {
+  return page.evaluate(() => {
+    const probe = document.createElement('div');
+    probe.style.height = 'var(--spacing-5)';
+    document.body.append(probe);
+    const height = probe.getBoundingClientRect().height;
+    probe.remove();
+    return height;
+  });
+}
+
+const THEMES = [
+  {name: 'neutral', badgeHeight: spacing5},
+  // Butter's own badge height (themes/butter/src/butterTheme.ts,
+  // `components.badge.base.height`).
+  {name: 'butter', badgeHeight: async () => 30},
+];
+
+for (const {name, badgeHeight} of THEMES) {
+  test.describe(`a badge and its text, ${name} theme`, () => {
+    test.beforeEach(async ({page}) => {
+      await page.goto(
+        `${storybook.origin}/iframe.html?id=core-badge--larger-text&viewMode=story&globals=astryxTheme:${name}`,
+      );
+      await expect(page.getByTestId('badge-row-default')).toBeVisible();
+    });
+
+    test('keeps its exact geometry and the theme height at the default text size', async ({
+      page,
+    }) => {
+      const height = await badgeHeight(page);
+      const natural = await naturalWidths(page, 'default');
+      for (const [index, badge] of (
+        await withAndWithoutMinimums(page, 'default')
+      ).entries()) {
+        // The new minimum does not bind at the default size …
+        expect(badge.withMinimums.width, badge.label).toBeCloseTo(
+          badge.without.width,
+          2,
+        );
+        expect(badge.withMinimums.height, badge.label).toBeCloseTo(
+          badge.without.height,
+          2,
+        );
+        // … so the badge is as tall as its theme says, and as wide as its
+        // content and padding: a color-only badge is its padding alone
+        // (component:Badge FR1).
+        expect(badge.withMinimums.height, badge.label).toBeCloseTo(height, 1);
+        expect(badge.withMinimums.width, badge.label).toBeCloseTo(
+          natural[index],
+          1,
+        );
+      }
+      for (const badge of await badgesIn(page, 'default')) {
+        expect(badge.truncated, badge.label).toBe(false);
+      }
+    });
+
+    test('stays inside a cell narrower than one line of its text', async ({
+      page,
+    }) => {
+      const boxes = await page.getByTestId('narrow-cell').evaluateAll(cells =>
+        cells.map(cell => {
+          const badge = cell.querySelector('.astryx-badge');
+          const own = cell.getBoundingClientRect();
+          const box = badge?.getBoundingClientRect();
+          return {
+            label: cell.textContent ?? '',
+            cell: [own.left, own.right],
+            badge: box == null ? null : [box.left, box.right],
+          };
+        }),
+      );
+      expect(boxes).toHaveLength(1);
+      for (const {label, cell, badge} of boxes) {
+        expect(badge, label).not.toBeNull();
+        if (badge != null) {
+          expect(badge[0], label).toBeGreaterThanOrEqual(cell[0] - 0.5);
+          expect(badge[1], label).toBeLessThanOrEqual(cell[1] + 0.5);
+        }
+      }
+    });
+
+    test('stays inside a crowded row at 2.5rem text', async ({page}) => {
+      // A title that cannot shrink leaves the count less room than one line of
+      // its text is tall: the badge keeps its own width there, where a
+      // one-line minimum width would push it out of the row.
+      const box = await page.getByTestId('badge-row-crowded').evaluate(row => {
+        const badge = row.querySelector('.astryx-badge');
+        const own = row.getBoundingClientRect();
+        const rect = badge?.getBoundingClientRect();
+        return {
+          row: [own.left, own.right],
+          badge: rect == null ? null : [rect.left, rect.right],
+        };
+      });
+      expect(box.badge).not.toBeNull();
+      if (box.badge != null) {
+        expect(box.badge[1]).toBeLessThanOrEqual(box.row[1] + 0.5);
+      }
+    });
+
+    for (const size of ['1.25rem', '2.5rem']) {
+      test(`grows with its label at ${size} text, shows all of it, and has no width floor`, async ({
+        page,
+      }) => {
+        const height = await badgeHeight(page);
+        const badges = await badgesIn(page, size);
+        const natural = await naturalWidths(page, size);
+        expect(natural).toHaveLength(badges.length);
+        for (const [index, badge] of badges.entries()) {
+          if (badge.label === '') {
+            // A color-only badge has no text to hold: it keeps its theme
+            // height and its padding-only width (component:Badge FR1).
+            expect(badge.height).toBeCloseTo(height, 1);
+            expect(badge.width).toBeCloseTo(natural[index], 1);
+            continue;
+          }
+          // At least one line of its own text tall …
+          expect(badge.height, badge.label).toBeGreaterThanOrEqual(
+            badge.lineHeight - 0.5,
+          );
+          // … so the label stays inside the pill …
+          expect(badge.labelTop, badge.label).toBeGreaterThanOrEqual(
+            badge.top - 0.5,
+          );
+          expect(badge.labelBottom, badge.label).toBeLessThanOrEqual(
+            badge.bottom + 0.5,
+          );
+          // … whole rather than cut to an ellipsis, in rows that wrap as a
+          // layout must at these sizes …
+          expect(badge.truncated, badge.label).toBe(false);
+          // … and with no width floor: as wide as its own content and padding,
+          // a one-character count included.
+          expect(badge.width, badge.label).toBeCloseTo(natural[index], 1);
+        }
+      });
+    }
+  });
+}

package/src/BottomSheet/BottomSheet.test.tsx

@@ -1045,6 +1045,52 @@ describe('BottomSheet', () => {
   });
 
   describe('swipe to dismiss', () => {
+    it("a sheet opened from inside another sheet's content drags to dismiss by its own handle, and the covered host neither drags nor takes the pointer (FR6, FR7)", () => {
+      const onInnerOpenChange = vi.fn();
+      const onOuterOpenChange = vi.fn();
+      render(
+        <BottomSheet isOpen onOpenChange={onOuterOpenChange} label="Outer">
+          Outer content
+          <BottomSheet isOpen onOpenChange={onInnerOpenChange} label="Inner">
+            Inner content
+          </BottomSheet>
+        </BottomSheet>,
+      );
+      const dialogs = screen.getAllByRole('dialog', {hidden: true});
+      expect(dialogs).toHaveLength(2);
+      const [outerDialog, innerDialog] = dialogs;
+      // The inner sheet's dialog is rendered inside the outer sheet's body,
+      // so its events bubble through the outer body's gesture listeners.
+      expect(outerDialog.contains(innerDialog)).toBe(true);
+      const outerPanel = outerDialog.querySelector<HTMLElement>(
+        ':scope > .astryx-bottom-sheet',
+      )!;
+      const outerBody = outerPanel.querySelector<HTMLElement>(
+        ':scope > :not([aria-hidden])',
+      )!;
+      const innerHandle = innerDialog.querySelector<HTMLElement>(
+        '.astryx-bottom-sheet > [aria-hidden="true"]',
+      )!;
+      // `setPointerCapture` is a prototype stub here, so record who captures.
+      const captured: Element[] = [];
+      const capture = vi
+        .spyOn(Element.prototype, 'setPointerCapture')
+        .mockImplementation(function (this: Element) {
+          captured.push(this);
+        });
+      drag(innerHandle, [{y: 0}, {y: 40}, {y: 120}], 'touch');
+      capture.mockRestore();
+      // The inner sheet's own drag ran to its dismissal.
+      expect(onInnerOpenChange).toHaveBeenCalledWith(false);
+      // The covered host saw the same pointer bubble up and did nothing with
+      // it: no drag of its own (its panel keeps its resting transform) and no
+      // pointer capture, which would have cancelled the inner handle's drag.
+      expect(onOuterOpenChange).not.toHaveBeenCalled();
+      expect(captured).toContain(innerHandle);
+      expect(captured).not.toContain(outerBody);
+      expect(outerPanel.style.transform).toBe('');
+    });
+
     it('requests close when dragged past the dismiss threshold', () => {
       const onOpenChange = vi.fn();
       render(