@astryxdesign/core 0.7.4 → 0.7.5-canary.1093026

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

@@ -67,11 +67,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // because the input's reserve is derived from the same value.
 const END_LANE_INSET = spacingVars['--spacing-2'];
 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 reads the custom
+// property directly, to keep token rows and the input short of the lane.
 const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 const styles = {
   wrapper: {
@@ -85,12 +82,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 +104,11 @@ const styles = {
     kY2c9j: "x1vjfegm",
     $$css: true
   },
+  idleSpinner: {
+    k33iCy: "xlshs6z",
+    kCygrm: "xdps06",
+    $$css: true
+  },
   inputAtMax: {
     kzqmXN: "xnalus7",
     k7Eaqz: "xeuugli",
@@ -115,16 +119,15 @@ const styles = {
     $$css: true
   },
   inputCompact: {
-    kVAEAm: "x1n2onr6 x1utg46d",
+    kVAEAm: "x1n2onr6",
     kB7OPa: "x9f619",
-    kLqNvP: "xhi6v0a x1cs7wtd",
     kY2c9j: "x1ja2u2z",
-    k7Eaqz: "x1fns5xo xcax4zt",
-    kUk6DE: "xfoc8du xf0xpto",
-    kzqmXN: "xnalus7 xbuu7xz",
-    kZCmMZ: "x2a0j69 xf0ofad",
-    kwRFfy: "x1p6hqjl x1wg34a1",
-    k9WMMc: "x1yc453h x75j1tr",
+    k7Eaqz: "x1fns5xo x14dcwvw",
+    kUk6DE: "xfoc8du x1q9bidn",
+    kzqmXN: "xnalus7",
+    keTefX: "x1lziwak x1rq9t4t",
+    kZCmMZ: "x2a0j69 x1jwxvv4",
+    kwRFfy: "xyri2b",
     $$css: true
   },
   truncatedWrapper: {
@@ -168,23 +171,6 @@ const endSectionSizeStyles = {
     $$css: true
   }
 };
-const compactInputSizeStyles = {
-  sm: {
-    k87sOh: "x80663w x1a21zuh",
-    k3aq6I: "x1c071of xv6p7n0",
-    $$css: true
-  },
-  md: {
-    k87sOh: "x80663w x811pv0",
-    k3aq6I: "x1c071of xv6p7n0",
-    $$css: true
-  },
-  lg: {
-    k87sOh: "x80663w x1o13q2w",
-    k3aq6I: "x1c071of xv6p7n0",
-    $$css: true
-  }
-};
 const truncatedSizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -271,6 +257,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 +272,7 @@ function EndLane({
   loadingLabel,
   anchorRef,
   hasStaticContent,
+  hasBusySlot,
   children
 }) {
   const isBusy = useIsBusy(lane);
@@ -286,17 +280,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 +632,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);
@@ -734,10 +733,10 @@ export function Tokenizer({
           onKeyDown: handleKeyDown,
           anchorRef: wrapperRef,
           size: size,
-          inputXStyle: [isAtMax || isTruncated ? styles.inputAtMax : value.length > 0 ? [styles.inputCompact, compactInputSizeStyles[size]] : undefined,
-          // The compact-token style owns the same reserve with an empty-query
-          // exception. This standalone rule is only for an empty Tokenizer;
-          // it still resolves to zero until the lane publishes a width.
+          inputXStyle: [isAtMax || isTruncated ? styles.inputAtMax : value.length > 0 ? styles.inputCompact : undefined,
+          // With tokens, wrapperWithTokens reserves the lane for every row.
+          // This rule is only for an empty Tokenizer; it still resolves to
+          // zero until the lane publishes a width.
           !(isAtMax || isTruncated || value.length > 0) && laneReserve]
         })
       })
@@ -755,7 +754,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/Tokenizer/useEndLaneReserve.d.ts

@@ -23,8 +23,9 @@ import * as stylex from '@stylexjs/stylex';
  *
  * Takes the lane's inset from the field's inline-end border, as the CSS
  * expression that positions it. Returns a ref callback for the lane, and the
- * ordinary input reserve style. Tokenizer's compact input reads the same custom
- * property directly so its empty-query hit surface can stop before the lane.
+ * ordinary input reserve style. With tokens, Tokenizer's field wrapper reads the
+ * same custom property directly so every token row, and the input after the
+ * last token, stops before the lane.
  * With no lane mounted the variable is absent and either rule resolves to its
  * no-lane fallback, so neither path needs to know whether a search is running.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"useEndLaneReserve.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/useEndLaneReserve.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA+B3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,CAAC,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAuD3D"}
+{"version":3,"file":"useEndLaneReserve.d.ts","sourceRoot":"","sources":["../../src/Tokenizer/useEndLaneReserve.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA+B3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,MAAM,GAChB,CAAC,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,EAAE,MAAM,CAAC,YAAY,CAAC,CAuD3D"}

package/dist/Tokenizer/useEndLaneReserve.js

@@ -81,8 +81,9 @@ const reserveStyles = {
  *
  * Takes the lane's inset from the field's inline-end border, as the CSS
  * expression that positions it. Returns a ref callback for the lane, and the
- * ordinary input reserve style. Tokenizer's compact input reads the same custom
- * property directly so its empty-query hit surface can stop before the lane.
+ * ordinary input reserve style. With tokens, Tokenizer's field wrapper reads the
+ * same custom property directly so every token row, and the input after the
+ * last token, stops before the lane.
  * With no lane mounted the variable is absent and either rule resolves to its
  * no-lane fallback, so neither path needs to know whether a search is running.
  */

package/dist/astryx.css

@@ -650,7 +650,7 @@
   .x2uiyk:has(input:focus):not(#\#):not(#\#){border-color:var(--color-accent)}
   .xb0m1lw:has(> div > .astryx-layout-content):not(#\#):not(#\#){margin-inline:0}
   .x16s19ga:has(:focus-visible):not(#\#):not(#\#){outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color)}
-  .xf0xpto:placeholder-shown:not(#\#):not(#\#){flex:0 0 auto}
+  .x1q9bidn:placeholder-shown:not(#\#):not(#\#){flex:1 1 0}
   .x64lkcz:focus:not(#\#):not(#\#){border-color:var(--color-error)}
   .x1lglk5v:focus:not(#\#):not(#\#){border-color:var(--color-success)}
   .x12sck4v:focus:not(#\#):not(#\#){border-color:var(--color-warning)}
@@ -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))}
@@ -1491,6 +1493,7 @@
   .x9o1np9.x9o1np9:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}
   .x16khyan:is(:disabled,[aria-disabled="true"]):not(#\#):not(#\#):not(#\#){cursor:default}
   .x1y40yee:popover-open:not(#\#):not(#\#):not(#\#){display:flex}
+  .x1rq9t4t:placeholder-shown:is(:not(:focus), :read-only):not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-1 * var(--spacing-1))}
   .x17xqekc:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to left,transparent 0%,rgba(0,0,0,.3) 2px,black var(--spacing-1))}
   .x1nwey30:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to left,transparent var(--_tab-strip-bleed),black calc(var(--_tab-strip-bleed) + var(--spacing-8)))}
   .x8ulde1:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.3) 2px,black var(--spacing-1))}
@@ -1513,6 +1516,7 @@
   .x1vidyx5:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
   .x1n6uwha:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--spacing-4),env(safe-area-inset-left,0px))}
   .xtjjor6:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-end:var(--astryx-dialog-padding-inline-end,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-left,0px)))))}
+  .x1jwxvv4:placeholder-shown:is(:not(:focus), :read-only):not(#\#):not(#\#):not(#\#){padding-inline-start:0}
   .x19efkpl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-start:max(var(--spacing-4),env(safe-area-inset-right,0px))}
   .x1i7f2ot:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){padding-inline-start:var(--astryx-dialog-padding-inline-start,var(--astryx-dialog-padding-inline,var(--astryx-dialog-padding,max(var(--spacing-4),env(safe-area-inset-right,0px)))))}
   .xbt4iw:focus-within:not(#\#):not(#\#):not(#\#){pointer-events:auto}
@@ -1576,12 +1580,6 @@
   .x189zj9d:nth-child(even of :not([data-expansion-panel])):not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}
   .xjl7jj:empty:not(#\#):not(#\#):not(#\#){display:none}
   .x1e0d1ib:empty:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
-  .x1cs7wtd:placeholder-shown:not(#\#):not(#\#):not(#\#){inset-inline-start:calc(var(--spacing-1) - 1px)}
-  .x1wg34a1:placeholder-shown:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--spacing-1)}
-  .xf0ofad:placeholder-shown:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
-  .x1utg46d:placeholder-shown:not(#\#):not(#\#):not(#\#){position:absolute}
-  .x75j1tr:placeholder-shown:not(#\#):not(#\#):not(#\#){text-align:end}
-  .xv6p7n0:placeholder-shown:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
   .x1c52tdz:focus:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
   .x1rsz1da:focus:not(#\#):not(#\#):not(#\#){clip-path:none}
   .xodanix:focus:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-2)}
@@ -1963,7 +1961,6 @@
   .xs7f9wi:not(#\#):not(#\#):not(#\#):not(#\#){top:2px}
   .xwa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
   .x1ltwjim:not(#\#):not(#\#):not(#\#):not(#\#){top:anchor(--outline-active top,0px)}
-  .x80663w:not(#\#):not(#\#):not(#\#):not(#\#){top:auto}
   .x7rbydg:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(50% - (28px / 2))}
   .x1oysc8t:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-lg) / 2 - 1px)}
   .xkmsrut:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-md) / 2 - 1px)}
@@ -2056,11 +2053,7 @@
   .x1t1lzn6:last-child:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
   .xlayyun:last-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--container-padding-block-end,0px))}
   .xup0pd7:last-child:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
-  .xcax4zt:placeholder-shown:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1px}
-  .x1o13q2w:placeholder-shown:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-lg) / 2 - 1px)}
-  .x811pv0:placeholder-shown:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-md) / 2 - 1px)}
-  .x1a21zuh:placeholder-shown:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--size-element-sm) / 2 - 1px)}
-  .xbuu7xz:placeholder-shown:not(#\#):not(#\#):not(#\#):not(#\#){width:calc(100% - calc(var(--spacing-1) - 1px) - var(--_tokenizer-end-lane-reserve,calc(var(--spacing-1) - 1px)) - 2px - 1px)}
+  .x14dcwvw:placeholder-shown:not(#\#):not(#\#):not(#\#):not(#\#){min-width:0}
   .x15cytp8:focus:not(#\#):not(#\#):not(#\#):not(#\#){height:auto}
   .x1rw3289:focus:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-2)}
   .x1jqxupm:focus:not(#\#):not(#\#):not(#\#):not(#\#){width:auto}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.4",
+  "version": "0.7.5-canary.1093026",
   "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.1093026",
+    "@astryxdesign/cli": "0.7.5-canary.1093026",
     "@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/Badge/Badge.doc.mjs

@@ -18,6 +18,7 @@ export const docs = {
     {
       name: 'label',
       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.',
     },
@@ -93,7 +94,7 @@ export const docsZh = {
       description: '视觉样式变体。语义变体使用实色背景，非语义颜色变体使用浅色背景配彩色文字。',
       default: "'neutral'",
     },
-    {name: 'label', type: 'ReactNode', description: '徽章文本内容。'},
+    {name: 'label', type: 'ReactNode', required: true, description: '徽章文本内容。'},
     {name: 'icon', type: 'ReactNode', description: '可选的前置图标。'},
   ],
   theming: {

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

@@ -272,11 +272,8 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
 // because the input's reserve is derived from the same value.
 const END_LANE_INSET = spacingVars['--spacing-2'];
 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 reads the custom
+// property directly, to keep token rows and the input short of the lane.
 const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 
 const styles = stylex.create({
@@ -297,6 +294,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 +311,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 +329,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,
@@ -334,46 +346,36 @@ const styles = stylex.create({
     position: 'absolute',
   },
   inputCompact: {
-    position: {
-      default: 'relative',
-      ':placeholder-shown': 'absolute',
-    },
+    position: 'relative',
     boxSizing: 'border-box',
-    insetInlineStart: {
-      default: 'auto',
-      ':placeholder-shown': TOKEN_ROW_INSET,
-    },
     zIndex: 0,
+    // The input follows the last token in flow, so a focused empty input's
+    // caret sits where typed text will start. Empty, it asks only for that
+    // inset, and only while focused and editable: blurred or read-only (a
+    // disabled field with a disabledMessage stays focusable), it claims no
+    // room at all, not even the column gap, so it never grows the field a
+    // blank row. Typing restores the full editing width, which may wrap.
     minWidth: {
       default: '40px',
-      ':placeholder-shown': '1px',
+      ':placeholder-shown': 0,
     },
     flex: {
       default: '1 1 40px',
-      ':placeholder-shown': '0 0 auto',
+      ':placeholder-shown': '1 1 0px',
     },
-    width: {
+    width: 0,
+    marginInlineStart: {
       default: 0,
-      ':placeholder-shown': `calc(100% - ${TOKEN_ROW_INSET} - var(${END_LANE_RESERVE_VAR}, ${TOKEN_ROW_INSET}) - ${INPUT_CLEAR_COARSE_POINTER_OUTSET} - 1px)`,
+      ':placeholder-shown:is(:not(:focus), :read-only)': `calc(-1 * ${spacingVars['--spacing-1']})`,
     },
-    // The empty input is a first-row background hit surface. Taking it out of
-    // flex layout means it can neither become a blank final row nor compete
-    // with the pills for width. Logical insets stop it before the measured end
-    // lane plus InputClearButton's maximum invisible pointer outset; tokens and
-    // controls sit above it, leaving only genuine whitespace clickable as
-    // search. Typing restores the ordinary in-flow input.
+    // Restore normal text inset when input follows tokens, since the
+    // wrapper padding is reduced for border concentricity.
     paddingInlineStart: {
       default: `calc(${spacingVars['--spacing-2']} - ${spacingVars['--spacing-1']} + 1px)`,
-      ':placeholder-shown': 0,
-    },
-    paddingInlineEnd: {
-      default: `var(${END_LANE_RESERVE_VAR}, 0px)`,
-      ':placeholder-shown': spacingVars['--spacing-1'],
-    },
-    textAlign: {
-      default: 'start',
-      ':placeholder-shown': 'end',
+      ':placeholder-shown:is(:not(:focus), :read-only)': 0,
     },
+    // wrapperWithTokens already keeps the in-flow input short of the lane.
+    paddingInlineEnd: 0,
   },
   truncatedWrapper: {
     flexWrap: 'nowrap',
@@ -415,39 +417,6 @@ const endSectionSizeStyles = stylex.create({
   },
 });
 
-const compactInputSizeStyles = stylex.create({
-  sm: {
-    insetBlockStart: {
-      default: 'auto',
-      ':placeholder-shown': `calc(${sizeVars['--size-element-sm']} / 2 - 1px)`,
-    },
-    transform: {
-      default: 'none',
-      ':placeholder-shown': 'translateY(-50%)',
-    },
-  },
-  md: {
-    insetBlockStart: {
-      default: 'auto',
-      ':placeholder-shown': `calc(${sizeVars['--size-element-md']} / 2 - 1px)`,
-    },
-    transform: {
-      default: 'none',
-      ':placeholder-shown': 'translateY(-50%)',
-    },
-  },
-  lg: {
-    insetBlockStart: {
-      default: 'auto',
-      ':placeholder-shown': `calc(${sizeVars['--size-element-lg']} / 2 - 1px)`,
-    },
-    transform: {
-      default: 'none',
-      ':placeholder-shown': 'translateY(-50%)',
-    },
-  },
-});
-
 const truncatedSizeStyles = stylex.create({
   sm: {height: sizeVars['--size-element-sm']},
   md: {height: sizeVars['--size-element-md']},
@@ -517,6 +486,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 +501,7 @@ function EndLane({
   loadingLabel,
   anchorRef,
   hasStaticContent,
+  hasBusySlot,
   children,
 }: {
   lane: BusyIndicatorLane;
@@ -533,6 +510,7 @@ function EndLane({
   loadingLabel: string;
   anchorRef: RefObject<Element | null>;
   hasStaticContent: boolean;
+  hasBusySlot: boolean;
   children: ReactNode;
 }) {
   const isBusy = useIsBusy(lane);
@@ -540,12 +518,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>
   );
@@ -1065,11 +1054,11 @@ export function Tokenizer<T extends SearchableItem>({
               isAtMax || isTruncated
                 ? styles.inputAtMax
                 : value.length > 0
-                  ? [styles.inputCompact, compactInputSizeStyles[size]]
+                  ? styles.inputCompact
                   : undefined,
-              // The compact-token style owns the same reserve with an empty-query
-              // exception. This standalone rule is only for an empty Tokenizer;
-              // it still resolves to zero until the lane publishes a width.
+              // With tokens, wrapperWithTokens reserves the lane for every row.
+              // This rule is only for an empty Tokenizer; it still resolves to
+              // zero until the lane publishes a width.
               !(isAtMax || isTruncated || value.length > 0) && laneReserve,
             ]}
           />
@@ -1093,7 +1082,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([]);
+      });
+    }
+  });
+}

package/src/Tokenizer/useEndLaneReserve.ts

@@ -81,8 +81,9 @@ const reserveStyles = stylex.create({
  *
  * Takes the lane's inset from the field's inline-end border, as the CSS
  * expression that positions it. Returns a ref callback for the lane, and the
- * ordinary input reserve style. Tokenizer's compact input reads the same custom
- * property directly so its empty-query hit surface can stop before the lane.
+ * ordinary input reserve style. With tokens, Tokenizer's field wrapper reads the
+ * same custom property directly so every token row, and the input after the
+ * last token, stops before the lane.
  * With no lane mounted the variable is absent and either rule resolves to its
  * no-lane fallback, so neither path needs to know whether a search is running.
  */