@astryxdesign/core 0.7.4 → 0.7.5-canary.2a50a80

package/dist/Tokenizer/Tokenizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tokenizer.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/Tokenizer.tsx"],"names":[],"mappings":"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"}

package/dist/Tokenizer/Tokenizer.js

@@ -70,8 +70,9 @@ const TOKEN_ROW_INSET = `calc(${spacingVars['--spacing-1']} - 1px)`;
 // InputClearButton grows 2px past its visible box under `(pointer: coarse)`.
 // Keep this maximum reserve in sync with Field/InputClearButton.tsx.
 const INPUT_CLEAR_COARSE_POINTER_OUTSET = '2px';
-// Kept in sync with useEndLaneReserve: inputCompact reads the custom property
-// directly so its empty-query pseudo-class can suppress the inner reserve.
+// Kept in sync with useEndLaneReserve: wrapperWithTokens and inputCompact read
+// the custom property directly, to keep token rows and the empty-query hit
+// surface short of the lane.
 const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 const styles = {
   wrapper: {
@@ -85,12 +86,14 @@ const styles = {
   wrapperWithTokens: {
     k8WAf4: "x1x7cmac",
     kg3NbH: "xx2oswg",
+    kwRFfy: "xx0flbe",
     khm7nJ: "xajebq8",
     $$css: true
   },
   token: {
     k1xSpc: "x78zum5",
     kmuXW: "x2lah0s",
+    ks0D6T: "x193iq5w",
     kVAEAm: "x1n2onr6",
     kY2c9j: "x1vjfegm",
     $$css: true
@@ -105,6 +108,11 @@ const styles = {
     kY2c9j: "x1vjfegm",
     $$css: true
   },
+  idleSpinner: {
+    k33iCy: "xlshs6z",
+    kCygrm: "xdps06",
+    $$css: true
+  },
   inputAtMax: {
     kzqmXN: "xnalus7",
     k7Eaqz: "xeuugli",
@@ -123,7 +131,7 @@ const styles = {
     kUk6DE: "xfoc8du xf0xpto",
     kzqmXN: "xnalus7 xbuu7xz",
     kZCmMZ: "x2a0j69 xf0ofad",
-    kwRFfy: "x1p6hqjl x1wg34a1",
+    kwRFfy: "xyri2b x1wg34a1",
     k9WMMc: "x1yc453h x75j1tr",
     $$css: true
   },
@@ -271,6 +279,13 @@ const CREATABLE_ID_PREFIX = '__xds_create__';
  *
  * Renders nothing when the lane would be empty, so `useEndLaneReserve` sees no
  * element, publishes no width, and the input keeps its full content box.
+ *
+ * With `hasBusySlot` the Spinner stays mounted while idle, unrendered, not
+ * animating and out of the accessibility tree, so its box keeps the themed
+ * Spinner's own size.
+ * Token rows reserve the lane's measured width, so a Spinner that came and
+ * went with the search would re-wrap them, and widen a content-sized field,
+ * on every search.
  */
 function EndLane({
   lane,
@@ -279,6 +294,7 @@ function EndLane({
   loadingLabel,
   anchorRef,
   hasStaticContent,
+  hasBusySlot,
   children
 }) {
   const isBusy = useIsBusy(lane);
@@ -286,17 +302,22 @@ function EndLane({
   // live region; the field announces each search's busy start instead
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, loadingLabel, anchorRef);
-  if (!isBusy && !hasStaticContent) {
+  if (!isBusy && !hasStaticContent && !hasBusySlot) {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
     ref: laneRef,
     ...stylex.props(laneXStyle),
-    children: [isBusy && /*#__PURE__*/_jsx(Spinner, {
+    children: [(isBusy || hasBusySlot) && /*#__PURE__*/_jsx(Spinner
+    // Remounts when a search starts, so the ring syncs its phase on
+    // mount exactly as a newly shown Spinner did before.
+    , {
       size: "sm",
       "aria-label": loadingLabel,
-      role: "img"
-    }), children]
+      role: "img",
+      "aria-hidden": isBusy ? undefined : true,
+      xstyle: isBusy ? undefined : styles.idleSpinner
+    }, isBusy ? 'busy' : 'idle'), children]
   });
 }
 export function Tokenizer({
@@ -633,7 +654,7 @@ export function Tokenizer({
     if (renderToken) {
       return /*#__PURE__*/_jsx("span", {
         ...{
-          className: "x78zum5 x2lah0s x1n2onr6 x1vjfegm"
+          className: "x78zum5 x2lah0s x193iq5w x1n2onr6 x1vjfegm"
         },
         children: renderToken(item, onRemoveItem)
       }, item.id);
@@ -755,7 +776,12 @@ export function Tokenizer({
       laneXStyle: [styles.endSection, endSectionSizeStyles[size]],
       loadingLabel: t('@astryx.typeahead.loading'),
       anchorRef: wrapperRef,
-      hasStaticContent: hasStaticEndLane,
+      hasStaticContent: hasStaticEndLane
+      // Wherever a search can run beside tokens: enabled and below
+      // maxEntries. A collapsed overflow row keeps it too, since a search
+      // started while focused can settle after focus leaves.
+      ,
+      hasBusySlot: value.length > 0 && !isDisabled && !isAtMax,
       children: [endContent, hasClearButton && /*#__PURE__*/_jsx(InputClearButton, {
         label: t('@astryx.tokenizer.clearAll'),
         onClick: e => {

package/dist/astryx.css

@@ -928,6 +928,7 @@
   .xawy1a7:not(#\#):not(#\#):not(#\#){contain:layout style}
   .x12h1iku:not(#\#):not(#\#):not(#\#){container-type:inline-size}
   .xb5mbof:not(#\#):not(#\#):not(#\#){content-visibility:auto}
+  .xdps06:not(#\#):not(#\#):not(#\#){content-visibility:hidden}
   .xfrknyr:not(#\#):not(#\#):not(#\#){counter-increment:astryx-list}
   .xif0320:not(#\#):not(#\#):not(#\#){counter-reset:astryx-list}
   .x1khind5:not(#\#):not(#\#):not(#\#){counter-reset:var(--x-counterReset)}
@@ -1193,6 +1194,7 @@
   .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
   .xyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}
+  .xx0flbe:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(calc(var(--spacing-1) - 1px) + var(--_tokenizer-end-lane-reserve,0px))}
   .xtvv6yu:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_tab-strip-bleed,0px) + max(var(--container-padding-inline-end,0px) - var(--spacing-3),0px))}
   .x1g2apga:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_textarea-inline-padding) + var(--spacing-12))}
   .xp2dy4z:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_textarea-inline-padding) + var(--spacing-6))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.4",
+  "version": "0.7.5-canary.2a50a80",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -792,6 +792,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@astryxdesign/a11y-spec": "0.7.5-canary.2a50a80",
+    "@astryxdesign/cli": "0.7.5-canary.2a50a80",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
@@ -802,9 +804,7 @@
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/babel__core": "^7.20.5",
-    "tailwindcss": "^4.3.2",
-    "@astryxdesign/a11y-spec": "0.0.0",
-    "@astryxdesign/cli": "0.7.4"
+    "tailwindcss": "^4.3.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Icon/Icon.spec.md

@@ -27,7 +27,7 @@ architecture:
     architecture:public-component-api,
   ]
 contributing: []
-system_specs: []
+system_specs: [spec:AST-087]
 ---
 
 # Icon component contract
@@ -53,6 +53,7 @@ Consumer migration instructions belong in consumer docs and release notes.
 **Owns**
 
 - Accepting a semantic icon key or a supplied icon component as the glyph source.
+- Passing the resolved size and a variant the entry can receive to a registry entry.
 - Resolving explicit, component-owned contextual, and standalone size defaults.
 - Applying Icon's size, color, theming target, and accessibility semantics to
   the rendered glyph.
@@ -71,12 +72,13 @@ Consumer migration instructions belong in consumer docs and release notes.
 
 ## Public concepts
 
-| Concept       | Closed values or states                                   | Meaning                                                   | Availability by variant/orientation/state | Default                                         | Owner            | Stability | Invalid-value behavior                                 |
-| ------------- | --------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------- | ----------------------------------------------- | ---------------- | --------- | ------------------------------------------------------ |
-| Glyph source  | semantic key, namespaced extension key, or icon component | Selects the visual symbol.                                | Every render                              | Required                                        | `component:Icon` | Stable    | TypeScript rejects unsupported built-in string values. |
-| Size          | `xsm`, `sm`, `md`, `lg`                                   | Selects the icon box size.                                | Every rendered glyph                      | nearest component-owned default; otherwise `md` | `component:Icon` | Stable    | TypeScript rejects unsupported values.                 |
-| Color         | documented semantic and palette values                    | Selects the glyph color or inherits it from context.      | Every rendered glyph                      | `inherit`                                       | `component:Icon` | Stable    | TypeScript rejects unsupported values.                 |
-| Accessibility | decorative or meaningfully labelled                       | Controls whether assistive technology receives the glyph. | Every rendered glyph                      | Decorative                                      | `component:Icon` | Stable    | Empty labels use the decorative behavior.              |
+| Concept       | Closed values or states                                   | Meaning                                                    | Availability by variant/orientation/state        | Default                                         | Owner            | Stability | Invalid-value behavior                                                            |
+| ------------- | --------------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | ---------------- | --------- | --------------------------------------------------------------------------------- |
+| Glyph source  | semantic key, namespaced extension key, or icon component | Selects the visual symbol.                                 | Every render                                     | Required                                        | `component:Icon` | Stable    | TypeScript rejects unsupported built-in string values.                            |
+| Size          | `xsm`, `sm`, `md`, `lg`                                   | Selects the icon box size.                                 | Every rendered glyph                             | nearest component-owned default; otherwise `md` | `component:Icon` | Stable    | TypeScript rejects unsupported values.                                            |
+| Color         | documented semantic and palette values                    | Selects the glyph color or inherits it from context.       | Every rendered glyph                             | `inherit`                                       | `component:Icon` | Stable    | TypeScript rejects unsupported values.                                            |
+| Accessibility | decorative or meaningfully labelled                       | Controls whether assistive technology receives the glyph.  | Every rendered glyph                             | Decorative                                      | `component:Icon` | Stable    | Empty labels use the decorative behavior.                                         |
+| Variant       | names in `IconVariantMap`; the active theme lists its own | Requests a theme's alternate artwork for a registry glyph. | Registry glyphs only; never a supplied component | None                                            | `component:Icon` | Stable    | TypeScript rejects unknown names; an unlisted variant renders the normal artwork. |
 
 A namespaced key that does not resolve currently renders nothing. This is
 existing behavior, not an intentional fallback promise.
@@ -86,13 +88,15 @@ existing behavior, not an intentional fallback promise.
 Requirements identify their basis so observed code is not mistaken for an
 intentional decision.
 
-| ID  | Candidate invariant                                                                                                                                                                               | Basis                                                 | Draft review state                                      |
-| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------- |
-| FR1 | Icon MUST present at most one glyph from the supplied semantic key, namespaced key, or icon component.                                                                                            | Documented promise and current tests.                 | Settled intent.                                         |
-| FR2 | Every rendered glyph MUST carry the `icon` theming target with its resolved size and selected color reflected as target data.                                                                     | Current source, docs, and theming tests.              | Settled intent.                                         |
-| FR3 | Icon MUST apply the resolved size as width and height for every glyph, plus font size where needed for 1em-based icon sources. This sizing contract MUST NOT promise an HTML or SVG element type. | Human decision, current source, and tests.            | Settled intent.                                         |
-| FR4 | Supported SVG and styling escape hatches MUST retain their established merge and override behavior.                                                                                               | Current source and regression tests.                  | Current compatibility behavior; verify before changing. |
-| FR5 | An explicit Icon `size` MUST win. Without one, Icon MUST use the nearest default supplied by an owning Astryx component for its documented icon slot; without such a default, Icon MUST use `md`. | Component-size precedence and Button sizing decision. | Settled intent.                                         |
+| ID  | Candidate invariant                                                                                                                                                                                                                                                                                                                                                                                                                           | Basis                                                 | Draft review state                                      |
+| --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------- |
+| FR1 | Icon MUST present at most one glyph from the supplied semantic key, namespaced key, or icon component.                                                                                                                                                                                                                                                                                                                                        | Documented promise and current tests.                 | Settled intent.                                         |
+| FR2 | Every rendered glyph MUST carry the `icon` theming target with its resolved size and selected color reflected as target data.                                                                                                                                                                                                                                                                                                                 | Current source, docs, and theming tests.              | Settled intent.                                         |
+| FR3 | Icon MUST apply the resolved size as width and height for every glyph, plus font size where needed for 1em-based icon sources. This sizing contract MUST NOT promise an HTML or SVG element type.                                                                                                                                                                                                                                             | Human decision, current source, and tests.            | Settled intent.                                         |
+| FR4 | Supported SVG and styling escape hatches MUST retain their established merge and override behavior.                                                                                                                                                                                                                                                                                                                                           | Current source and regression tests.                  | Current compatibility behavior; verify before changing. |
+| FR5 | An explicit Icon `size` MUST win. Without one, Icon MUST use the nearest default supplied by an owning Astryx component for its documented icon slot; without such a default, Icon MUST use `md`.                                                                                                                                                                                                                                             | Component-size precedence and Button sizing decision. | Settled intent.                                         |
+| FR6 | In registry mode, Icon MUST pass `{size, variant}` to the selected entry, where `size` is the size resolved by ORD1 and `variant` is the requested variant when the active theme lists it and, for a theme-supplied entry, the theme that defined the entry lists it too, otherwise `undefined`. A supplied icon component MUST NOT receive `variant`, Icon MUST NOT forward `variant` to the DOM, and the `icon` target MUST NOT reflect it. | `spec:AST-087` FR1–FR5 and FR9.                       | Settled intent.                                         |
+| FR7 | The `icon` target MUST guarantee `width` and `height` on its `size:*` selectors as reviewed target-specific additions, so a theme sets each size's dimension. Without theme styles, sizes are 12, 16, 20, and 24px at a 16px root and scale with the root font size.                                                                                                                                                                          | `spec:AST-087` FR10.                                  | Settled intent.                                         |
 
 ### Allowed variation
 
@@ -109,15 +113,18 @@ intentional decision.
 
 ### Representative states
 
-| State                            | Required invariant                                       | Allowed variation                              |
-| -------------------------------- | -------------------------------------------------------- | ---------------------------------------------- |
-| Semantic key                     | One resolved glyph carries the `icon` target.            | Theme, registry, or built-in artwork.          |
-| Namespaced extension key         | A resolved extension glyph carries the `icon` target.    | Consumer- or library-owned artwork.            |
-| Supplied icon component          | The supplied glyph carries the `icon` target.            | Component implementation and SVG internals.    |
-| Standalone Icon without `size`   | The resolved size is `md`.                               | Glyph source and color.                        |
-| Owned icon slot without `size`   | The nearest documented component default is used.        | The owning component's declared size mapping.  |
-| Explicit Icon size in owned slot | The explicit Icon size wins over the contextual default. | Any supported Icon size.                       |
-| Unresolved namespaced key        | No glyph is currently rendered.                          | No fallback behavior is established by intent. |
+| State                            | Required invariant                                                                 | Allowed variation                              |
+| -------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------- |
+| Semantic key                     | One resolved glyph carries the `icon` target.                                      | Theme, registry, or built-in artwork.          |
+| Namespaced extension key         | A resolved extension glyph carries the `icon` target.                              | Consumer- or library-owned artwork.            |
+| Supplied icon component          | The supplied glyph carries the `icon` target.                                      | Component implementation and SVG internals.    |
+| Standalone Icon without `size`   | The resolved size is `md`.                                                         | Glyph source and color.                        |
+| Owned icon slot without `size`   | The nearest documented component default is used.                                  | The owning component's declared size mapping.  |
+| Explicit Icon size in owned slot | The explicit Icon size wins over the contextual default.                           | Any supported Icon size.                       |
+| Unresolved namespaced key        | No glyph is currently rendered.                                                    | No fallback behavior is established by intent. |
+| Listed variant                   | The entry receives the size and the variant when its defining theme also lists it. | The theme's artwork for that request.          |
+| Unlisted or omitted variant      | The entry receives `variant: undefined`.                                           | The theme's normal artwork.                    |
+| Variant on a supplied component  | The component renders as given without `variant`.                                  | Component implementation.                      |
 
 ### Transformation and precedence order
 
@@ -172,6 +179,8 @@ not promise a `span`, `svg`, or other element type.
   rules for the `icon` target.
 - `architecture:icon-resolution-and-component-slots` owns semantic-key and
   component-slot resolution before Icon renders the selected source.
+- `spec:AST-087` decides the `variant` request, theme-listed variant names, and
+  theme-set size dimensions.
 - `architecture:public-component-api` owns admission and compatibility rules for
   Icon's public props and observable defaults.
 - The owning component or family specifies each contextual Icon-size mapping.
@@ -181,12 +190,14 @@ not promise a `span`, `svg`, or other element type.
 
 ## Verification map
 
-| Contract            | Verification                                                                   | Representative states                                           | Mutation or failure expectation                                                                                                             | Audit section              |
-| ------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
-| FR1, FR3, FR5       | `Icon.test.tsx` sizing suites and `IconButton.test.tsx` contextual-size suites | standalone default; Button sizes; explicit override; both modes | Breaking source rendering, standalone fallback, contextual mapping, explicit precedence, or cross-mode sizing fails assertions.             | `audit:Icon/behavior`      |
-| FR2, FR4            | `Icon.test.tsx` target/styling suites plus source inspection                   | Both source modes; size and color variants                      | Removing the target or breaking override composition fails existing assertions; `data-color` reflection currently lacks focused assertions. | `audit:Icon/theming`       |
-| AR1, AR2, AR3       | `Icon.test.tsx` accessible-name suites                                         | Decorative, labelled, explicit ARIA override                    | Changing default or labelled semantics fails accessibility assertions.                                                                      | `audit:Icon/accessibility` |
-| Theming anatomy map | `scripts/check-knowledge.mjs`                                                  | Canonical consumer anatomy and current target                   | Missing, extra, prefixed, or stale mappings fail repository validation.                                                                     | `audit:Icon/theming`       |
+| Contract            | Verification                                                                   | Representative states                                                                                            | Mutation or failure expectation                                                                                                               | Audit section              |
+| ------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| FR1, FR3, FR5       | `Icon.test.tsx` sizing suites and `IconButton.test.tsx` contextual-size suites | standalone default; Button sizes; explicit override; both modes                                                  | Breaking source rendering, standalone fallback, contextual mapping, explicit precedence, or cross-mode sizing fails assertions.               | `audit:Icon/behavior`      |
+| FR2, FR4            | `Icon.test.tsx` target/styling suites plus source inspection                   | Both source modes; size and color variants                                                                       | Removing the target or breaking override composition fails existing assertions; `data-color` reflection currently lacks focused assertions.   | `audit:Icon/theming`       |
+| AR1, AR2, AR3       | `Icon.test.tsx` accessible-name suites                                         | Decorative, labelled, explicit ARIA override                                                                     | Changing default or labelled semantics fails accessibility assertions.                                                                        | `audit:Icon/accessibility` |
+| FR6                 | `Icon.test.tsx` variant suites (pending)                                       | listed, unlisted, and omitted variant; no active list; inherited entry under a replaced list; supplied component | An unlisted variant, or one the entry's defining theme does not list, reaches an entry, or `variant` reaches a supplied component or the DOM. | `audit:Icon/behavior`      |
+| FR7                 | Theme styling tests for each size (pending)                                    | each size with and without theme styles                                                                          | A themed size does not change the glyph dimension, or an unstyled size changes.                                                               | `audit:Icon/theming`       |
+| Theming anatomy map | `scripts/check-knowledge.mjs`                                                  | Canonical consumer anatomy and current target                                                                    | Missing, extra, prefixed, or stale mappings fail repository validation.                                                                       | `audit:Icon/theming`       |
 
 Focused coverage for `data-color` on both glyph source modes is a checkable test
 gap; source inspection is the current evidence for that part of FR2.

package/src/Tokenizer/Tokenizer.test.tsx

@@ -1692,6 +1692,27 @@ describe('Tokenizer end-lane reserve', () => {
     );
   });
 
+  it('keeps token rows, not only the input, short of the lane', () => {
+    // The lane is out of flow, so a token reaching the end of the first row
+    // ran under the clear button. The field's own inline-end padding spends
+    // the reserve, and every row of tokens wraps inside it. Real geometry is
+    // proved in TokenizerEndLane.a11y.chromium.spec.ts.
+    const {container} = render(
+      <Tokenizer
+        label="Users"
+        searchSource={userSource}
+        value={[users[0]]}
+        onChange={() => {}}
+        hasClear
+      />,
+    );
+    const field = laneHost(container);
+    expect(field).not.toBeNull();
+    expect(getComputedStyle(field!).paddingInlineEnd).toContain(
+      '--_tokenizer-end-lane-reserve',
+    );
+  });
+
   it('does not pad the input on the collapsed paths', () => {
     // Collapsed: with tokens truncated the input is given no width to pad —
     // `inputAtMax` zeroes its padding outright — so a reserve there would be
@@ -1707,16 +1728,13 @@ describe('Tokenizer end-lane reserve', () => {
         tokenOverflowBehavior="unfocusedInline"
       />,
     );
+    // The collapsed row keeps the Spinner's slot, so the lane is up and
+    // publishing; the input still must not spend the reserve.
+    expect(reserveOf(container)).toBeTruthy();
     const input = screen.getByRole('combobox');
-    expect(input.className).not.toBe('');
-    // The reserve is the only rule that reads the lane variable; the
-    // collapsed input must not carry it.
-    const reserveClasses = new Set(
-      (laneHost(container)?.className ?? '').split(' '),
+    expect(getComputedStyle(input).paddingInlineEnd).not.toContain(
+      '--_tokenizer-end-lane-reserve',
     );
-    expect(
-      [...input.classList].some(c => reserveClasses.has(c) && c !== ''),
-    ).toBe(false);
   });
 
   it('costs no commit of its own across a whole search', async () => {

package/src/Tokenizer/Tokenizer.tsx

@@ -275,8 +275,9 @@ const TOKEN_ROW_INSET = `calc(${spacingVars['--spacing-1']} - 1px)`;
 // InputClearButton grows 2px past its visible box under `(pointer: coarse)`.
 // Keep this maximum reserve in sync with Field/InputClearButton.tsx.
 const INPUT_CLEAR_COARSE_POINTER_OUTSET = '2px';
-// Kept in sync with useEndLaneReserve: inputCompact reads the custom property
-// directly so its empty-query pseudo-class can suppress the inner reserve.
+// Kept in sync with useEndLaneReserve: wrapperWithTokens and inputCompact read
+// the custom property directly, to keep token rows and the empty-query hit
+// surface short of the lane.
 const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 
 const styles = stylex.create({
@@ -297,6 +298,10 @@ const styles = stylex.create({
     // = 8 - 4 - 1 = 3px.
     paddingBlock: TOKEN_ROW_INSET,
     paddingInline: TOKEN_ROW_INSET,
+    // The end lane is out of flow, so tokens would wrap under it. Every row
+    // stops short of the measured lane instead; with no lane up the variable
+    // is absent and this is the ordinary inset.
+    paddingInlineEnd: `calc(${TOKEN_ROW_INSET} + var(${END_LANE_RESERVE_VAR}, 0px))`,
     // Row gap must match paddingBlock so wrapped rows look evenly spaced.
     rowGap: TOKEN_ROW_INSET,
   },
@@ -310,6 +315,9 @@ const styles = stylex.create({
   token: {
     display: 'flex',
     flexShrink: 0,
+    // A renderToken wrapper sizes to its content; cap it at the row so the
+    // pill inside truncates instead of running past the field.
+    maxWidth: '100%',
     position: 'relative',
     zIndex: 1,
   },
@@ -325,6 +333,14 @@ const styles = stylex.create({
     flexShrink: 0,
     zIndex: 1,
   },
+  idleSpinner: {
+    // Hides the Spinner's own box too, which a theme may paint, and covers
+    // engines without content-visibility. Both keep the box's size.
+    visibility: 'hidden',
+    // Skips the ring's rendering, and with it the infinite arc animation,
+    // while the root keeps its own explicit, themed width and height.
+    contentVisibility: 'hidden',
+  },
   inputAtMax: {
     width: 0,
     minWidth: 0,
@@ -367,7 +383,8 @@ const styles = stylex.create({
       ':placeholder-shown': 0,
     },
     paddingInlineEnd: {
-      default: `var(${END_LANE_RESERVE_VAR}, 0px)`,
+      // wrapperWithTokens already keeps the in-flow input short of the lane.
+      default: 0,
       ':placeholder-shown': spacingVars['--spacing-1'],
     },
     textAlign: {
@@ -517,6 +534,13 @@ const CREATABLE_ID_PREFIX = '__xds_create__';
  *
  * Renders nothing when the lane would be empty, so `useEndLaneReserve` sees no
  * element, publishes no width, and the input keeps its full content box.
+ *
+ * With `hasBusySlot` the Spinner stays mounted while idle, unrendered, not
+ * animating and out of the accessibility tree, so its box keeps the themed
+ * Spinner's own size.
+ * Token rows reserve the lane's measured width, so a Spinner that came and
+ * went with the search would re-wrap them, and widen a content-sized field,
+ * on every search.
  */
 function EndLane({
   lane,
@@ -525,6 +549,7 @@ function EndLane({
   loadingLabel,
   anchorRef,
   hasStaticContent,
+  hasBusySlot,
   children,
 }: {
   lane: BusyIndicatorLane;
@@ -533,6 +558,7 @@ function EndLane({
   loadingLabel: string;
   anchorRef: RefObject<Element | null>;
   hasStaticContent: boolean;
+  hasBusySlot: boolean;
   children: ReactNode;
 }) {
   const isBusy = useIsBusy(lane);
@@ -540,12 +566,23 @@ function EndLane({
   // live region; the field announces each search's busy start instead
   // (spec:AST-086 FR8).
   useBusyAnnouncement(isBusy, loadingLabel, anchorRef);
-  if (!isBusy && !hasStaticContent) {
+  if (!isBusy && !hasStaticContent && !hasBusySlot) {
     return null;
   }
   return (
     <div ref={laneRef} {...stylex.props(laneXStyle)}>
-      {isBusy && <Spinner size="sm" aria-label={loadingLabel} role="img" />}
+      {(isBusy || hasBusySlot) && (
+        <Spinner
+          // Remounts when a search starts, so the ring syncs its phase on
+          // mount exactly as a newly shown Spinner did before.
+          key={isBusy ? 'busy' : 'idle'}
+          size="sm"
+          aria-label={loadingLabel}
+          role="img"
+          aria-hidden={isBusy ? undefined : true}
+          xstyle={isBusy ? undefined : styles.idleSpinner}
+        />
+      )}
       {children}
     </div>
   );
@@ -1093,7 +1130,11 @@ export function Tokenizer<T extends SearchableItem>({
         laneXStyle={[styles.endSection, endSectionSizeStyles[size]]}
         loadingLabel={t('@astryx.typeahead.loading')}
         anchorRef={wrapperRef}
-        hasStaticContent={hasStaticEndLane}>
+        hasStaticContent={hasStaticEndLane}
+        // Wherever a search can run beside tokens: enabled and below
+        // maxEntries. A collapsed overflow row keeps it too, since a search
+        // started while focused can settle after focus leaves.
+        hasBusySlot={value.length > 0 && !isDisabled && !isAtMax}>
         {endContent}
         {hasClearButton && (
           <InputClearButton

package/src/Tokenizer/__tests__/TokenizerEndLane.a11y.chromium.spec.ts

@@ -0,0 +1,471 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file TokenizerEndLane.a11y.chromium.spec.ts
+ * @input `Core/Tokenizer` and `Core/PowerSearch` stories in a built Storybook.
+ * @output Real-engine proof that tokens, the overflow count and the input's
+ *   text box never paint under the end lane (clear-all and busy indicator),
+ *   across field widths, both writing directions and both overflow modes.
+ * @position Run with `pnpm test:a11y-contract`. The lane is absolutely
+ *   positioned, so whether a token reaches it depends on how rows wrap at a
+ *   given width, which only a shipping layout engine can show.
+ */
+
+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();
+});
+
+type Direction = 'ltr' | 'rtl';
+
+async function open(
+  page: Page,
+  id: string,
+  direction: Direction,
+  args = '',
+): Promise<void> {
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${id}&viewMode=story&globals=direction:${direction}${args ? `&args=${args}` : ''}`,
+    {waitUntil: 'load'},
+  );
+  await page
+    .locator('button[aria-label="Clear all"]')
+    .first()
+    .waitFor({state: 'attached'});
+  await page.evaluate(async () => {
+    await document.fonts.ready;
+  });
+}
+
+/**
+ * Sets the story's sizing container to `width` and, for every field with a
+ * visible clear-all lane, returns each visible box that intersects the lane:
+ * tokens, the "+N more" count, and the input's content box (where its text
+ * and caret paint).
+ */
+async function overlapsAt(page: Page, width: number): Promise<string[]> {
+  return page.evaluate(async width => {
+    // The story decorator's fixed-width box; the layer mode's popover takes
+    // its width from the in-flow field inside it.
+    const host = document.querySelector<HTMLElement>(
+      '#storybook-root [style*="width"]',
+    );
+    if (!host) {
+      throw new Error('No sizing container in the story');
+    }
+    host.style.width = `${width}px`;
+    for (let frame = 0; frame < 4; frame++) {
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+
+    const isShown = (el: Element) =>
+      el.checkVisibility({visibilityProperty: true}) &&
+      !el.closest('[aria-hidden="true"]');
+    const lanes = [
+      ...document.querySelectorAll('button[aria-label="Clear all"]'),
+    ]
+      .filter(isShown)
+      .map(clear => clear.parentElement)
+      .filter(lane => lane?.parentElement != null) as HTMLElement[];
+    if (lanes.length === 0) {
+      throw new Error('No clear-all lane is visible');
+    }
+
+    return lanes.flatMap((lane, fieldIndex) => {
+      const field = lane.parentElement as HTMLElement;
+      const boxes: {name: string; rect: DOMRect}[] = [];
+      field.querySelectorAll('.astryx-token').forEach((token, index) => {
+        if (isShown(token)) {
+          boxes.push({
+            name: `token ${index}`,
+            rect: token.getBoundingClientRect(),
+          });
+        }
+      });
+      field.querySelectorAll('span').forEach(span => {
+        if (/^\+\d+ more$/.test(span.textContent ?? '') && isShown(span)) {
+          boxes.push({
+            name: 'overflow count',
+            rect: span.getBoundingClientRect(),
+          });
+        }
+      });
+      const input = field.querySelector<HTMLInputElement>('[role="combobox"]');
+      if (input && isShown(input) && getComputedStyle(input).opacity !== '0') {
+        const style = getComputedStyle(input);
+        const rect = input.getBoundingClientRect();
+        const left = rect.left + parseFloat(style.paddingLeft);
+        const right = rect.right - parseFloat(style.paddingRight);
+        if (right > left) {
+          boxes.push({
+            name: 'input text box',
+            rect: new DOMRect(left, rect.top, right - left, rect.height),
+          });
+        }
+      }
+
+      const laneRect = lane.getBoundingClientRect();
+      return boxes.flatMap(({name, rect}) => {
+        const x =
+          Math.min(rect.right, laneRect.right) -
+          Math.max(rect.left, laneRect.left);
+        const y =
+          Math.min(rect.bottom, laneRect.bottom) -
+          Math.max(rect.top, laneRect.top);
+        return x > 0.5 && y > 0.5
+          ? [
+              `${width}px field ${fieldIndex}: ${name} overlaps the end lane by ${x.toFixed(1)}px`,
+            ]
+          : [];
+      });
+    });
+  }, width);
+}
+
+async function sweep(page: Page, from: number, to: number): Promise<string[]> {
+  const found: string[] = [];
+  for (let width = from; width <= to; width += 4) {
+    found.push(...(await overlapsAt(page, width)));
+  }
+  return found;
+}
+
+/**
+ * The same sweep with a search in flight at every width. The busy Spinner joins
+ * the lane only while a search runs, so each width is measured while the
+ * combobox reports `aria-busy`, typing again whenever the last search settled.
+ */
+async function sweepWhileBusy(
+  page: Page,
+  from: number,
+  to: number,
+): Promise<string[]> {
+  const search = page.getByRole('combobox');
+  const found: string[] = [];
+  for (let width = from; width <= to; width += 4) {
+    for (;;) {
+      if ((await search.getAttribute('aria-busy')) !== 'true') {
+        await search.press('a');
+        await expect(search).toHaveAttribute('aria-busy', 'true');
+      }
+      const overlaps = await overlapsAt(page, width);
+      if ((await search.getAttribute('aria-busy')) === 'true') {
+        found.push(...overlaps);
+        break;
+      }
+    }
+  }
+  return found;
+}
+
+/**
+ * Sizes the story container (a pixel width, or `max-content` for a
+ * content-sized field) and returns the field's border box.
+ */
+async function fieldBoxAt(
+  page: Page,
+  width: string,
+): Promise<{width: number; height: number}> {
+  return page.evaluate(async width => {
+    const host = document.querySelector<HTMLElement>(
+      '#storybook-root [style*="width"]',
+    );
+    const field = document.querySelector('button[aria-label="Clear all"]')
+      ?.parentElement?.parentElement;
+    if (!host || !field) {
+      throw new Error('Field or sizing container did not render');
+    }
+    host.style.width = width;
+    for (let frame = 0; frame < 4; frame++) {
+      await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+    const {width: w, height: h} = field.getBoundingClientRect();
+    return {
+      width: Math.round(w * 100) / 100,
+      height: Math.round(h * 100) / 100,
+    };
+  }, width);
+}
+
+/** Adds tokens through the menu, as a person would. */
+async function addTokens(page: Page, names: string[]): Promise<void> {
+  const search = page.getByRole('combobox');
+  for (const name of names) {
+    await search.fill(name.split(' ')[0]);
+    await page.getByRole('option', {name}).click();
+    await expect(search).not.toHaveAttribute('aria-busy', 'true');
+  }
+}
+
+/**
+ * The field's box with a search settled and again with one in flight. The
+ * query is non-empty both times, so only the busy state differs.
+ */
+async function settledAndBusy(
+  page: Page,
+  width: string,
+): Promise<string | null> {
+  const search = page.getByRole('combobox');
+  await search.fill('a');
+  await expect(search).not.toHaveAttribute('aria-busy', 'true');
+  const settled = await fieldBoxAt(page, width);
+  await search.press('b');
+  await expect(search).toHaveAttribute('aria-busy', 'true');
+  const busy = await fieldBoxAt(page, width);
+  const stillBusy = (await search.getAttribute('aria-busy')) === 'true';
+  if (!stillBusy) {
+    throw new Error(`The search settled before ${width} was measured`);
+  }
+  return settled.width === busy.width && settled.height === busy.height
+    ? null
+    : `${width}: settled ${settled.width}x${settled.height}, busy ${busy.width}x${busy.height}`;
+}
+
+/**
+ * With four tokens on the Loading story, every width from 200px to 400px and a
+ * content-sized container where the field's box differs settled vs busy.
+ */
+async function busyLayoutChanges(page: Page, step: number): Promise<string[]> {
+  await addTokens(page, ['Bob Smith', 'Charlie Brown', 'Diana Prince']);
+  await expect(page.locator('.astryx-token')).toHaveCount(4);
+  const changed: string[] = [];
+  for (let width = 200; width <= 400; width += step) {
+    const change = await settledAndBusy(page, `${width}px`);
+    if (change) {
+      changed.push(change);
+    }
+  }
+  // Content-sized: the field may not widen while busy (input-fields FR1).
+  const contentSized = await settledAndBusy(page, 'max-content');
+  if (contentSized) {
+    changed.push(contentSized);
+  }
+  return changed;
+}
+
+/**
+ * The blurred, collapsed field at `width`: its border box, how many tokens
+ * show, and the "+N more" count.
+ */
+async function collapsedRowAt(page: Page, width: string): Promise<string> {
+  const box = await fieldBoxAt(page, width);
+  const row = await page.evaluate(() => {
+    const field = document.querySelector('button[aria-label="Clear all"]')
+      ?.parentElement?.parentElement;
+    if (!field) {
+      throw new Error('Field did not render');
+    }
+    const shown = [...field.querySelectorAll('.astryx-token')].filter(
+      token =>
+        token.checkVisibility({visibilityProperty: true}) &&
+        !token.closest('[aria-hidden="true"]'),
+    ).length;
+    const count = [...field.querySelectorAll('span')].find(span =>
+      /^\+\d+ more$/.test(span.textContent ?? ''),
+    );
+    return `${shown} tokens, ${count?.textContent ?? 'no count'}`;
+  });
+  return `${box.width}x${box.height}, ${row}`;
+}
+
+for (const direction of ['ltr', 'rtl'] as const) {
+  test.describe(direction, () => {
+    test('PowerSearch tokens (custom renderToken) wrap before the end lane', async ({
+      page,
+    }) => {
+      await open(page, 'core-powersearch--near-full-token-row', direction);
+      expect(await sweep(page, 160, 640)).toEqual([]);
+    });
+
+    test('a token wider than the row truncates short of the end lane', async ({
+      page,
+    }) => {
+      await open(page, 'core-tokenizer--long-token-end-lane', direction);
+      expect(await sweep(page, 160, 400)).toEqual([]);
+    });
+
+    test('default Tokenizer tokens wrap before the end lane', async ({
+      page,
+    }) => {
+      await open(
+        page,
+        'core-tokenizer--with-preselected',
+        direction,
+        'hasClear:!true',
+      );
+      expect(await sweep(page, 160, 400)).toEqual([]);
+    });
+
+    test('tokens stay clear of the lane while a search is busy', async ({
+      page,
+    }) => {
+      await open(page, 'core-tokenizer--loading', direction);
+      await page.getByRole('combobox').focus();
+      expect(await sweepWhileBusy(page, 200, 400)).toEqual([]);
+    });
+
+    test('a search starting does not move the field or its token rows', async ({
+      page,
+    }) => {
+      test.setTimeout(240_000);
+      await open(page, 'core-tokenizer--loading', direction);
+      expect(await busyLayoutChanges(page, 4)).toEqual([]);
+    });
+
+    test('the reserved Spinner costs no frames and stays silent while idle', async ({
+      page,
+    }) => {
+      await open(page, 'core-tokenizer--loading', direction);
+      const search = page.getByRole('combobox');
+      const cdp = await page.context().newCDPSession(page);
+      await cdp.send('Performance.enable');
+      // Style recalculations over a short window: a ticking ring animation
+      // recalculates every frame (about 30 in 500ms), an unrendered one does
+      // not. The idle allowance absorbs a stray one-off recalculation.
+      const recalcsOver = async (ms: number) => {
+        const count = async () => {
+          const {metrics} = await cdp.send('Performance.getMetrics');
+          return metrics.find(m => m.name === 'RecalcStyleCount')?.value ?? 0;
+        };
+        const before = await count();
+        await page.waitForTimeout(ms);
+        return (await count()) - before;
+      };
+      const spinnerState = async () =>
+        page.evaluate(() => {
+          const spinner = document
+            .querySelector('button[aria-label="Clear all"]')
+            ?.parentElement?.querySelector('.astryx-spinner');
+          if (!spinner) {
+            throw new Error('The lane holds no Spinner');
+          }
+          return {
+            hidden: spinner.getAttribute('aria-hidden') === 'true',
+            width: spinner.getBoundingClientRect().width,
+          };
+        });
+      const idle = await spinnerState();
+      expect(idle.hidden).toBe(true);
+      expect(await recalcsOver(500)).toBeLessThanOrEqual(2);
+      await search.focus();
+      await search.press('a');
+      await expect(search).toHaveAttribute('aria-busy', 'true');
+      const busy = await spinnerState();
+      expect(busy.hidden).toBe(false);
+      expect(await recalcsOver(500)).toBeGreaterThanOrEqual(10);
+      expect(busy.width).toBe(idle.width);
+    });
+
+    test('the idle Spinner paints nothing, even when a theme styles its box', async ({
+      page,
+    }) => {
+      await page.goto(
+        `${storybook.origin}/iframe.html?id=core-tokenizer--loading&viewMode=story&globals=direction:${direction};astryxTheme:probe`,
+        {waitUntil: 'load'},
+      );
+      await page
+        .locator('button[aria-label="Clear all"]')
+        .waitFor({state: 'attached'});
+      const search = page.getByRole('combobox');
+      const spinnerPaint = async () =>
+        page.evaluate(() => {
+          const spinner = document
+            .querySelector('button[aria-label="Clear all"]')
+            ?.parentElement?.querySelector('.astryx-spinner');
+          if (!spinner) {
+            throw new Error('The lane holds no Spinner');
+          }
+          const style = getComputedStyle(spinner);
+          return {
+            visible: spinner.checkVisibility({visibilityProperty: true}),
+            visibility: style.visibility,
+            background: style.backgroundColor,
+          };
+        });
+      const idle = await spinnerPaint();
+      // The probe theme paints the Spinner's own box, so a box that is only
+      // content-skipped would still show beside Clear all.
+      expect(idle.background).not.toBe('rgba(0, 0, 0, 0)');
+      expect(idle.visibility).toBe('hidden');
+      expect(idle.visible).toBe(false);
+      await search.focus();
+      await search.press('a');
+      await expect(search).toHaveAttribute('aria-busy', 'true');
+      expect((await spinnerPaint()).visible).toBe(true);
+    });
+
+    test('a themed, larger Spinner keeps its space too', async ({page}) => {
+      test.setTimeout(240_000);
+      await open(page, 'core-tokenizer--loading', direction);
+      // The public size var a theme sets for a named Spinner size.
+      await page.addStyleTag({
+        content: '.astryx-spinner { --spinner-diameter: 24px !important; }',
+      });
+      expect(await busyLayoutChanges(page, 8)).toEqual([]);
+    });
+
+    test('a search settling after blur does not change the collapsed row', async ({
+      page,
+    }) => {
+      test.setTimeout(240_000);
+      await open(
+        page,
+        'core-tokenizer--loading',
+        direction,
+        'tokenOverflowBehavior:unfocusedInline',
+      );
+      const search = page.getByRole('combobox');
+      await search.focus();
+      await addTokens(page, ['Bob Smith', 'Charlie Brown', 'Diana Prince']);
+      const changed: string[] = [];
+      for (let width = 200; width <= 400; width += 8) {
+        await search.focus();
+        await search.fill('');
+        await search.press('a');
+        await expect(search).toHaveAttribute('aria-busy', 'true');
+        await search.blur();
+        const busy = await collapsedRowAt(page, `${width}px`);
+        await expect(search).not.toHaveAttribute('aria-busy', 'true');
+        const settled = await collapsedRowAt(page, `${width}px`);
+        if (busy !== settled) {
+          changed.push(`${width}px: busy ${busy}, settled ${settled}`);
+        }
+      }
+      expect(changed).toEqual([]);
+    });
+
+    for (const mode of ['overflow-inline', 'overflow-layer']) {
+      test(`${mode}: blurred and focused tokens stay clear of the end lane`, async ({
+        page,
+      }) => {
+        await open(page, `core-powersearch--${mode}`, direction);
+        // Blurred: only the inline mode keeps its lane on the page.
+        if (mode === 'overflow-inline') {
+          expect(await sweep(page, 320, 640)).toEqual([]);
+        }
+        // The field's own corner, clear of every token: the click a person
+        // makes to start typing, which expands both modes.
+        await page
+          .locator('.astryx-tokenizer')
+          .first()
+          .click({position: {x: 1, y: 1}});
+        await expect(page.getByRole('combobox')).toBeFocused();
+        expect(await sweep(page, 320, 640)).toEqual([]);
+      });
+    }
+  });
+}