@astryxdesign/core 0.6.3-canary.db52d98 → 0.6.3-canary.db80a3a

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":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAMrE,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAMlB;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,cAAc,IAChD;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAC,GACtB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GACzB;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C;;;;;GAKG;AACH,MAAM,MAAM,yBAAyB,GACnC,MAAM,GAAG,iBAAiB,GAAG,gBAAgB,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,KAAK,IAAI,IAAI,CAAC;IACd,gCAAgC;IAChC,IAAI,IAAI,IAAI,CAAC;CACd;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACpE,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,gCAAgC;IAChC,KAAK,EAAE,CAAC,EAAE,CAAC;IAEX;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3D,kEAAkE;IAClE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACpC,iFAAiF;IACjF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAC3D,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;OASG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,yBAAyB,CAAC;IAClD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0DAA0D;IAC1D,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,sDAAsD;IACtD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,oDAAoD;IACpD,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CACxC;AA4MD,wBAAgB,SAAS,CAAC,CAAC,SAAS,cAAc,EAAE,EAClD,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,aAA0B,EAC1B,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,SAAS,EACT,cAAc,EACd,sBAAsB,EACtB,UAAkB,EAClB,QAAQ,EACR,eAAe,EACf,QAAgB,EAChB,UAAU,EACV,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,qBAA8B,EAC9B,UAAU,EACV,SAAiB,EACjB,aAAa,EACb,OAAO,EACP,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,SAAS,GACV,EAAE,cAAc,CAAC,CAAC,CAAC,qBA4iBnB;yBAtlBe,SAAS"}

package/dist/Tokenizer/Tokenizer.js

@@ -62,13 +62,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // How far the end lane sits from the field's inline-end border, named once
 // 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.
-const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 const styles = {
   wrapper: {
     kVAEAm: "x1n2onr6",
@@ -87,8 +80,6 @@ const styles = {
   token: {
     k1xSpc: "x78zum5",
     kmuXW: "x2lah0s",
-    kVAEAm: "x1n2onr6",
-    kY2c9j: "x1vjfegm",
     $$css: true
   },
   endSection: {
@@ -98,7 +89,6 @@ const styles = {
     kGNEyG: "x6s0dn4",
     kOIVth: "x1txdalj",
     kmuXW: "x2lah0s",
-    kY2c9j: "x1vjfegm",
     $$css: true
   },
   inputAtMax: {
@@ -111,16 +101,10 @@ const styles = {
     $$css: true
   },
   inputCompact: {
-    kVAEAm: "x1n2onr6 x1utg46d",
-    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",
+    kUk6DE: "xfoc8du",
+    kzqmXN: "xnalus7",
+    kZCmMZ: "x2a0j69",
     $$css: true
   },
   truncatedWrapper: {
@@ -164,23 +148,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",
@@ -377,8 +344,7 @@ export function Tokenizer({
   // is the leaf's own business — folding it in here would mean reading the
   // busy state during this render, which is exactly the re-render the store
   // exists to avoid.
-  const hasClearButton = hasClear && value.length > 0 && !isDisabled;
-  const hasStaticEndLane = Boolean(endContent || hasClearButton);
+  const hasStaticEndLane = Boolean(endContent || hasClear && value.length > 0 && !isDisabled);
   const [isFocusedWithin, setIsFocusedWithin] = useState(false);
   const isTruncated = !isFocusedWithin && tokenOverflowBehavior !== 'none' && value.length > 0;
 
@@ -596,7 +562,7 @@ export function Tokenizer({
     if (renderToken) {
       return /*#__PURE__*/_jsx("span", {
         ...{
-          className: "x78zum5 x2lah0s x1n2onr6 x1vjfegm"
+          className: "x78zum5 x2lah0s"
         },
         children: renderToken(item, onRemoveItem)
       }, item.id);
@@ -641,7 +607,7 @@ export function Tokenizer({
       ...{
         0: {},
         1: {
-          className: "x1xrm450 x1n2onr6 x1vjfegm"
+          className: "x1xrm450"
         }
       }[!!(value.length > 0) << 0],
       children: renderIconSlot(startIcon, {
@@ -665,11 +631,8 @@ export function Tokenizer({
         searchSource: isAtMax ? emptySource : filteredSource,
         value: null,
         onChange: handleAdd,
-        renderItem: renderItem
-        // A space keeps :placeholder-shown available as the CSS-only empty
-        // query signal without painting placeholder text beside tokens.
-        ,
-        placeholder: value.length === 0 ? placeholder : ' ',
+        renderItem: renderItem,
+        placeholder: value.length === 0 ? placeholder : '',
         hasEntriesOnFocus: isAtMax ? false : hasEntriesOnFocus,
         maxMenuItems: maxMenuItems,
         menuWidth: menuWidth,
@@ -686,11 +649,13 @@ 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.
-        !(isAtMax || isTruncated || value.length > 0) && laneReserve]
+        inputXStyle: [isAtMax || isTruncated ? styles.inputAtMax : value.length > 0 ? styles.inputCompact : undefined,
+        // Not for the collapsed states above: those give the input no width
+        // to pad, and `inputAtMax` zeroes its padding outright.
+        // Applied whether or not a lane is up: the reserve resolves to
+        // zero until the lane publishes a width, so this does not need to
+        // know about the busy state.
+        !(isAtMax || isTruncated) && laneReserve]
       })
     }), htmlName != null && value.map(item => /*#__PURE__*/_jsx("input", {
       type: "hidden",
@@ -706,7 +671,7 @@ export function Tokenizer({
       laneXStyle: [styles.endSection, endSectionSizeStyles[size]],
       loadingLabel: t('@astryx.typeahead.loading'),
       hasStaticContent: hasStaticEndLane,
-      children: [endContent, hasClearButton && /*#__PURE__*/_jsx(InputClearButton, {
+      children: [endContent, hasClear && value.length > 0 && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
         label: t('@astryx.tokenizer.clearAll'),
         onClick: e => {
           e.stopPropagation();

package/dist/Tokenizer/useEndLaneReserve.d.ts

@@ -23,10 +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.
- * 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.
+ * style for the input — which the caller applies unconditionally: with no lane
+ * mounted the variable is absent and the padding resolves to zero, so the
+ * caller never has to know whether a search is running.
  */
 export declare function useEndLaneReserve(laneInset: string): [(node: HTMLElement | null) => void, stylex.StyleXStyles];
 //# sourceMappingURL=useEndLaneReserve.d.ts.map

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;AAgC3C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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

@@ -47,8 +47,9 @@ const LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 // The variable carries the WHOLE reserve, not just the width, so its absence
 // means "no lane" rather than "a lane of zero width": with no lane up, the
 // fallback resolves the padding to 0 and the input keeps its full content box.
-// That is what lets every input state read the property without knowing whether
-// a search is running. The rule stays static either way — it is never
+// That is what lets the caller apply this style unconditionally, which in turn
+// is what keeps the field from having to know whether a search is running.
+// The rule stays static either way — one class, generated once, never
 // regenerated as the lane changes.
 const reserveStyles = {
   reserve: {
@@ -81,10 +82,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.
- * 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.
+ * style for the input — which the caller applies unconditionally: with no lane
+ * mounted the variable is absent and the padding resolves to zero, so the
+ * caller never has to know whether a search is running.
  */
 export function useEndLaneReserve(laneInset) {
   const laneRef = useCallback(node => {

package/dist/astryx.css

@@ -584,7 +584,6 @@
   .x1dordxg:focus-within:not(#\#):not(#\#){overflow:visible}
   .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}
   .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)}
@@ -992,7 +991,6 @@
   .x9p6ekw:not(#\#):not(#\#):not(#\#){inset-inline-start:14px}
   .xaoy8p5:not(#\#):not(#\#):not(#\#){inset-inline-start:2px}
   .xbudbmw:not(#\#):not(#\#):not(#\#){inset-inline-start:50%}
-  .xhi6v0a:not(#\#):not(#\#):not(#\#){inset-inline-start:auto}
   .xmt1zuk:not(#\#):not(#\#):not(#\#){inset-inline-start:calc(-1 * (var(--spacing-1) - 1px))}
   .x1kiyvbf:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--_textarea-inline-padding)}
   .x1ybfrjj:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-3)}
@@ -1442,12 +1440,6 @@
   .x1dnou9g:nth-child(even):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)}
@@ -1806,7 +1798,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)}
@@ -1891,11 +1882,6 @@
   .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)}
   .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.6.3-canary.db52d98",
+  "version": "0.6.3-canary.db80a3a",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -692,8 +692,8 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.6.3-canary.db52d98",
-    "@astryxdesign/cli": "0.6.3-canary.db52d98",
+    "@astryxdesign/a11y-spec": "0.6.3-canary.db80a3a",
+    "@astryxdesign/cli": "0.6.3-canary.db80a3a",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Tokenizer/Tokenizer.test.tsx

@@ -416,29 +416,6 @@ describe('Tokenizer', () => {
     expect(input).not.toHaveAttribute('placeholder', 'Search people...');
   });
 
-  it('uses a non-painting placeholder to collapse only an empty trailing input', () => {
-    const onChangeQuery = vi.fn();
-    render(
-      <Tokenizer
-        label="Members"
-        searchSource={userSource}
-        value={[users[0]]}
-        onChange={() => {}}
-        onChangeQuery={onChangeQuery}
-        hasClear
-      />,
-    );
-    const input = screen.getByRole('combobox');
-    expect(input).toHaveAttribute('placeholder', ' ');
-
-    fireEvent.change(input, {target: {value: 'Al'}});
-    expect(input).toHaveValue('Al');
-    expect(onChangeQuery).toHaveBeenLastCalledWith('Al');
-
-    fireEvent.change(input, {target: {value: ''}});
-    expect(onChangeQuery).toHaveBeenLastCalledWith('');
-  });
-
   it('shows placeholder when no tokens are present', () => {
     render(
       <Tokenizer

package/src/Tokenizer/Tokenizer.tsx

@@ -243,13 +243,6 @@ export interface TokenizerProps<T extends SearchableItem> extends Omit<
 // How far the end lane sits from the field's inline-end border, named once
 // 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.
-const END_LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 
 const styles = stylex.create({
   wrapper: {
@@ -267,23 +260,19 @@ const styles = stylex.create({
     // (radius-1: 4px) sits concentric with wrapper border-radius
     // (radius-2: 8px) when inset = radius-2 - radius-1 - border
     // = 8 - 4 - 1 = 3px.
-    paddingBlock: TOKEN_ROW_INSET,
-    paddingInline: TOKEN_ROW_INSET,
+    paddingBlock: `calc(${spacingVars['--spacing-1']} - 1px)`,
+    paddingInline: `calc(${spacingVars['--spacing-1']} - 1px)`,
     // Row gap must match paddingBlock so wrapped rows look evenly spaced.
-    rowGap: TOKEN_ROW_INSET,
+    rowGap: `calc(${spacingVars['--spacing-1']} - 1px)`,
   },
   startIconWithTokens: {
     // Restore the default 8px inline-start inset when tokens are present,
     // since wrapperWithTokens reduces padding to 3px for border concentricity.
     marginInlineStart: `calc(${spacingVars['--spacing-2']} - ${spacingVars['--spacing-1']} + 1px)`,
-    position: 'relative',
-    zIndex: 1,
   },
   token: {
     display: 'flex',
     flexShrink: 0,
-    position: 'relative',
-    zIndex: 1,
   },
   endSection: {
     position: 'absolute',
@@ -295,7 +284,6 @@ const styles = stylex.create({
     alignItems: 'center',
     gap: spacingVars['--spacing-2'],
     flexShrink: 0,
-    zIndex: 1,
   },
   inputAtMax: {
     width: 0,
@@ -306,46 +294,12 @@ const styles = stylex.create({
     position: 'absolute',
   },
   inputCompact: {
-    position: {
-      default: 'relative',
-      ':placeholder-shown': 'absolute',
-    },
-    boxSizing: 'border-box',
-    insetInlineStart: {
-      default: 'auto',
-      ':placeholder-shown': TOKEN_ROW_INSET,
-    },
-    zIndex: 0,
-    minWidth: {
-      default: '40px',
-      ':placeholder-shown': '1px',
-    },
-    flex: {
-      default: '1 1 40px',
-      ':placeholder-shown': '0 0 auto',
-    },
-    width: {
-      default: 0,
-      ':placeholder-shown': `calc(100% - ${TOKEN_ROW_INSET} - var(${END_LANE_RESERVE_VAR}, ${TOKEN_ROW_INSET}) - ${INPUT_CLEAR_COARSE_POINTER_OUTSET} - 1px)`,
-    },
-    // 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.
-    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',
-    },
+    minWidth: '40px',
+    flex: '1 1 40px',
+    width: 0,
+    // Restore normal text inset when input follows tokens, since the
+    // wrapper padding is reduced for border concentricity.
+    paddingInlineStart: `calc(${spacingVars['--spacing-2']} - ${spacingVars['--spacing-1']} + 1px)`,
   },
   truncatedWrapper: {
     flexWrap: 'nowrap',
@@ -387,39 +341,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']},
@@ -606,8 +527,9 @@ export function Tokenizer<T extends SearchableItem>({
   // is the leaf's own business — folding it in here would mean reading the
   // busy state during this render, which is exactly the re-render the store
   // exists to avoid.
-  const hasClearButton = hasClear && value.length > 0 && !isDisabled;
-  const hasStaticEndLane = Boolean(endContent || hasClearButton);
+  const hasStaticEndLane = Boolean(
+    endContent || (hasClear && value.length > 0 && !isDisabled),
+  );
   const [isFocusedWithin, setIsFocusedWithin] = useState(false);
   const isTruncated =
     !isFocusedWithin && tokenOverflowBehavior !== 'none' && value.length > 0;
@@ -952,9 +874,7 @@ export function Tokenizer<T extends SearchableItem>({
           value={null}
           onChange={handleAdd}
           renderItem={renderItem}
-          // A space keeps :placeholder-shown available as the CSS-only empty
-          // query signal without painting placeholder text beside tokens.
-          placeholder={value.length === 0 ? placeholder : ' '}
+          placeholder={value.length === 0 ? placeholder : ''}
           hasEntriesOnFocus={isAtMax ? false : hasEntriesOnFocus}
           maxMenuItems={maxMenuItems}
           menuWidth={menuWidth}
@@ -975,12 +895,14 @@ 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.
-            !(isAtMax || isTruncated || value.length > 0) && laneReserve,
+            // Not for the collapsed states above: those give the input no width
+            // to pad, and `inputAtMax` zeroes its padding outright.
+            // Applied whether or not a lane is up: the reserve resolves to
+            // zero until the lane publishes a width, so this does not need to
+            // know about the busy state.
+            !(isAtMax || isTruncated) && laneReserve,
           ]}
         />
       </BusyIndicatorLaneProvider>
@@ -1003,7 +925,7 @@ export function Tokenizer<T extends SearchableItem>({
         loadingLabel={t('@astryx.typeahead.loading')}
         hasStaticContent={hasStaticEndLane}>
         {endContent}
-        {hasClearButton && (
+        {hasClear && value.length > 0 && !isDisabled && (
           <InputClearButton
             label={t('@astryx.tokenizer.clearAll')}
             onClick={e => {

package/src/Tokenizer/useEndLaneReserve.ts

@@ -48,8 +48,9 @@ const LANE_RESERVE_VAR = '--_tokenizer-end-lane-reserve';
 // The variable carries the WHOLE reserve, not just the width, so its absence
 // means "no lane" rather than "a lane of zero width": with no lane up, the
 // fallback resolves the padding to 0 and the input keeps its full content box.
-// That is what lets every input state read the property without knowing whether
-// a search is running. The rule stays static either way — it is never
+// That is what lets the caller apply this style unconditionally, which in turn
+// is what keeps the field from having to know whether a search is running.
+// The rule stays static either way — one class, generated once, never
 // regenerated as the lane changes.
 const reserveStyles = stylex.create({
   reserve: {
@@ -81,10 +82,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.
- * 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.
+ * style for the input — which the caller applies unconditionally: with no lane
+ * mounted the variable is absent and the padding resolves to zero, so the
+ * caller never has to know whether a search is running.
  */
 export function useEndLaneReserve(
   laneInset: string,