@astryxdesign/core 0.5.2-canary.d7c6772 → 0.5.2-canary.dc5565e

package/dist/Field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAEnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAqCtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BAwGZ;yBA9He,KAAK"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/Field/Field.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAM,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAC;AAEnE,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAmDtC,YAAY,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,OAAO,EACP,OAAO,EACP,YAAoB,EACpB,aAAa,EACb,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,MAAM,EACN,YAAY,EACZ,aAA0B,EAC1B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,UAAU,+BA2GZ;yBAjIe,KAAK"}

package/dist/Field/Field.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import { FieldLabel } from "./FieldLabel.js";
 import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import "../theme/tokens.stylex.js";
-import { spacingVars, borderVars } from "../theme/tokens.stylex.js";
+import { spacingVars, borderVars, sizeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
@@ -40,6 +40,11 @@ const styles = {
   horizontalLabels: {
     k1xSpc: "xjp7ctv",
     $$css: true
+  },
+  attachedStatusLayer: {
+    kVAEAm: "x1n2onr6",
+    kY2c9j: "x8knxv4",
+    $$css: true
   }
 };
 
@@ -116,7 +121,8 @@ export function Field({
     type: status.type,
     message: status.message,
     id: resolvedMessageID,
-    variant: statusVariant
+    variant: statusVariant,
+    xstyle: statusVariant === 'attached' ? styles.attachedStatusLayer : undefined
   }) : null;
 
   // ─── Horizontal-labels mode ───────────────────────────────────────────
@@ -138,7 +144,7 @@ export function Field({
         children: labelNode
       }), /*#__PURE__*/_jsxs("div", {
         ...{
-          className: "x78zum5 xdt5ytf xc8icb0"
+          className: "x78zum5 xdt5ytf xc8icb0 x19nvjgn xlumz0n x1qs65gq"
         },
         children: [description && /*#__PURE__*/_jsx(Text, {
           type: "supporting",
@@ -157,7 +163,7 @@ export function Field({
     ...props,
     children: [labelNode, statusVariant === 'attached' ? /*#__PURE__*/_jsxs("div", {
       ...{
-        className: "x78zum5 xdt5ytf xc8icb0"
+        className: "x78zum5 xdt5ytf xc8icb0 x19nvjgn xlumz0n x1qs65gq"
       },
       children: [children, statusNode]
     }) : /*#__PURE__*/_jsxs(_Fragment, {

package/dist/FieldStatus/FieldStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAKpD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAgEnD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAsDlB;yBAhEe,WAAW"}
+{"version":3,"file":"FieldStatus.d.ts","sourceRoot":"","sources":["../../src/FieldStatus/FieldStatus.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC;AAKpD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AAqEnD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,MAAM,qBAAqB,CAAC;AAE7D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,eAAe,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAI,EACJ,OAAO,EACP,EAAE,EACF,OAAoB,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAsDlB;yBAhEe,WAAW"}

package/dist/FieldStatus/FieldStatus.js

@@ -36,6 +36,7 @@ const statusIconMap = {
   error: 'error',
   success: 'success'
 };
+const ATTACHED_OVERLAP = `var(--_field-status-overlap, ${spacingVars['--spacing-1-5']})`;
 const styles = {
   base: {
     kMv6JI: "x9ynric",
@@ -44,12 +45,13 @@ const styles = {
     $$css: true
   },
   attached: {
-    keoZOQ: "x1c40v9y",
-    kLKAdn: "x1ak3mig",
+    keoZOQ: "x3dbumh",
+    kLKAdn: "xdgtoc0",
     kGO01o: "x1wesfrj",
     kg3NbH: "xf314gf",
     kVL7Gh: "xquck67",
     kT0f0o: "x14i3lts",
+    kfzvcC: "x47corl",
     $$css: true
   },
   detached: {

package/dist/astryx.css

@@ -114,6 +114,7 @@
   .x1fcsqxe{--_dropdown-menu-radius:var(--radius-container)}
   .x13l1x9d{--_fade-delay:0s}
   .x1832zxr{--_field-radius:var(--radius-element)}
+  .x19nvjgn{--_field-status-overlap:calc(var(--size-element-md) / 2)}
   .xgzxwq1{--_focus-outline-offset:0}
   .x17wzz1v{--_focus-outline:none}
   .xhg274n{--_hover-delay:0s}
@@ -352,6 +353,8 @@
   .xoa21yc:focus-within{--_reveal-position:static}
   .x11woleg:focus-visible{--indicator-color:var(--color-accent)}
   .x1my2cv6.x1my2cv6:hover:where(:not(:disabled,[aria-disabled="true"])){--indicator-color:var(--color-accent)}
+  .x1qs65gq:has(> [data-size="lg"]){--_field-status-overlap:calc(var(--size-element-lg) / 2)}
+  .xlumz0n:has(> [data-size="sm"]){--_field-status-overlap:calc(var(--size-element-sm) / 2)}
   .x158n88w:has(:focus-visible){--_tab-strip-bleed:calc(var(--focus-outline-width) + var(--focus-outline-offset))}
   .x1ibt0lz:first-child{--separator-display:none}
   .x1rht92:nth-child(even){--table-row-overlay:var(--color-background-muted)}
@@ -1295,6 +1298,7 @@
   .x1yn0g08:not(#\#):not(#\#):not(#\#){word-break:break-all}
   .x13faqbe:not(#\#):not(#\#):not(#\#){word-break:break-word}
   .x1lldw8n:not(#\#):not(#\#):not(#\#){word-break:normal}
+  .x8knxv4:not(#\#):not(#\#):not(#\#){z-index:-1}
   .x1ja2u2z:not(#\#):not(#\#):not(#\#){z-index:0}
   .x1vjfegm:not(#\#):not(#\#):not(#\#){z-index:1}
   .xfo81ep:not(#\#):not(#\#):not(#\#){z-index:1000}
@@ -1589,6 +1593,7 @@
   .xmqyaqf:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * (var(--_tab-strip-bleed)))}
   .xvyqdj1:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * anchor-size(height) - 8px)}
   .xckg3cf:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--_chat-composer-radius))}
+  .x3dbumh:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--_field-status-overlap,var(--spacing-1-5)))}
   .x5j3pgv:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--astryx-number-input-padding-block-start,var(--astryx-number-input-padding,var(--spacing-1))))}
   .x1sa9bsh:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--container-padding-block-start,0px))}
   .x1c40v9y:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--spacing-1-5))}
@@ -1715,9 +1720,9 @@
   .x2oz4g1:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-8)}
   .xexx8yu:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:0}
   .x1htvmrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}
+  .xdgtoc0:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--_field-status-overlap,var(--spacing-1-5)) + var(--spacing-2))}
   .x1enrzb7:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--border-width) + var(--spacing-1))}
   .x1nex4ik:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--container-padding-block-start) - var(--border-width))}
-  .x1ak3mig:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--spacing-1-5) + var(--spacing-2))}
   .x1vjezoa:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:max(var(--spacing-4),env(safe-area-inset-top,0px))}
   .x2gtn7z:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_chat-composer-padding)}
   .xlr2r7p:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_tab-strip-bleed)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.5.2-canary.d7c6772",
+  "version": "0.5.2-canary.dc5565e",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -661,7 +661,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.2-canary.d7c6772",
+    "@astryxdesign/cli": "0.5.2-canary.dc5565e",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",

package/src/ComplexSelector/ComplexSelector.spec.md

@@ -18,7 +18,7 @@ verified_by:
     scripts/check-knowledge.mjs,
   ]
 modules: []
-families: [family:overlay-dismissal]
+families: [family:input-fields, family:overlay-dismissal]
 design_specs: []
 architecture:
   [architecture:component-theming-surface, architecture:layer-runtime]

package/src/Field/Field.doc.mjs

@@ -39,6 +39,7 @@ export const docs = {
     ],
     vars: [
       {name: '--_field-radius', description: 'Border radius of input fields', default: 'var(--radius-element)', private: true},
+      {name: '--_field-status-overlap', description: 'Amount an attached FieldStatus extends behind the lower half of the control. Set from the rendered control size.', default: 'calc(var(--size-element-md) / 2)', private: true},
       {name: '--_input-clear-hit-inset', description: 'Outset of the clear (\u2715) button\'s invisible hit area, applied to a ::after overlay. 0 on a fine pointer; negative on a coarse one, which grows the 20px button to the 24px touch target without changing what is drawn.', default: '0px', private: true},
       {name: '--_input-clear-hit-content', description: 'Whether the clear (\u2715) button\'s invisible hit overlay exists. `none` on a fine pointer, so no ::after is generated and hover still reaches the glyph; `""` on a coarse one, where the overlay provides the 24px touch target.', default: 'none', private: true},
     ],

package/src/Field/Field.test.tsx

@@ -27,6 +27,45 @@ afterEach(() => {
 });
 
 describe('Field', () => {
+  it.each(['sm', 'md', 'lg'] as const)(
+    'provides a half-height overlap for an attached %s control',
+    size => {
+      render(
+        <Field
+          label="Username"
+          inputID="username"
+          status={{type: 'warning', message: 'This username may be taken'}}>
+          <div data-size={size}>Control</div>
+        </Field>,
+      );
+
+      const status = screen.getByText('This username may be taken');
+      expect(
+        getComputedStyle(status.parentElement!).getPropertyValue(
+          '--_field-status-overlap',
+        ),
+      ).toBe(`calc(var(--size-element-${size}) / 2)`);
+    },
+  );
+
+  it('layers an attached status behind a custom control', () => {
+    render(
+      <Field
+        label="Username"
+        inputID="username"
+        status={{type: 'warning', message: 'This username may be taken'}}>
+        <input id="username" />
+      </Field>,
+    );
+
+    const status = screen.getByText('This username may be taken');
+    const wrapper = status.parentElement!;
+
+    expect(getComputedStyle(wrapper).isolation).toBe('isolate');
+    expect(getComputedStyle(status).position).toBe('relative');
+    expect(getComputedStyle(status).zIndex).toBe('-1');
+  });
+
   it('renders with label', () => {
     render(
       <Field label="Email" inputID="email-input">

package/src/Field/Field.tsx

@@ -23,7 +23,7 @@ import type {SizeValue} from '../utils/types';
 import {FieldLabel} from './FieldLabel';
 import {FieldStatus} from '../FieldStatus/FieldStatus';
 import type {FieldStatusVariant} from '../FieldStatus/FieldStatus';
-import {spacingVars, borderVars} from '../theme/tokens.stylex';
+import {spacingVars, borderVars, sizeVars} from '../theme/tokens.stylex';
 import type {IconType} from '../Icon';
 import {mergeProps} from '../utils';
 import {useDevWarning} from '../hooks/useDevWarning';
@@ -52,6 +52,20 @@ const styles = stylex.create({
     display: 'flex',
     flexDirection: 'column',
     isolation: 'isolate',
+    // Extend an attached FieldStatus behind the lower half of the control.
+    // Half-height is the maximum effective corner radius CSS can render, even
+    // when a theme uses a pill value such as --radius-full (9999px).
+    '--_field-status-overlap': {
+      default: `calc(${sizeVars['--size-element-md']} / 2)`,
+      ':has(> [data-size="sm"])': `calc(${sizeVars['--size-element-sm']} / 2)`,
+      ':has(> [data-size="lg"])': `calc(${sizeVars['--size-element-lg']} / 2)`,
+    },
+  },
+  attachedStatusLayer: {
+    // Keep the overlapping background below both Astryx inputs and custom
+    // controls. The isolated wrapper contains this negative stacking layer.
+    position: 'relative',
+    zIndex: -1,
   },
 });
 
@@ -250,6 +264,9 @@ export function Field({
         message={status.message}
         id={resolvedMessageID}
         variant={statusVariant}
+        xstyle={
+          statusVariant === 'attached' ? styles.attachedStatusLayer : undefined
+        }
       />
     ) : null;
 

package/src/FieldStatus/FieldStatus.test.tsx

@@ -149,6 +149,23 @@ describe('FieldStatus', () => {
       expect(el).toHaveAttribute('data-variant', 'attached');
       expect(el).toHaveClass('attached');
     });
+
+    it('extends the attached background by the field-provided overlap', () => {
+      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
+      const styles = getComputedStyle(screen.getByTestId('fs'));
+
+      expect(styles.marginTop).toBe(
+        'calc(-1 * var(--_field-status-overlap,var(--spacing-1-5)))',
+      );
+    });
+
+    it('does not intercept pointer input over the attached control', () => {
+      render(<FieldStatus type="warning" message="msg" data-testid="fs" />);
+
+      expect(getComputedStyle(screen.getByTestId('fs')).pointerEvents).toBe(
+        'none',
+      );
+    });
   });
 
   describe('color styling per status type', () => {

package/src/FieldStatus/FieldStatus.tsx

@@ -46,6 +46,8 @@ const statusIconMap: Record<InputStatusType, IconName> = {
   success: 'success',
 };
 
+const ATTACHED_OVERLAP = `var(--_field-status-overlap, ${spacingVars['--spacing-1-5']})`;
+
 const styles = stylex.create({
   base: {
     fontFamily: typographyVars['--font-family-body'],
@@ -53,12 +55,15 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-supporting-leading'],
   },
   attached: {
-    marginTop: `calc(-1 * ${spacingVars['--spacing-1-5']})`,
-    paddingBlockStart: `calc(${spacingVars['--spacing-1-5']} + ${spacingVars['--spacing-2']})`,
+    marginTop: `calc(-1 * ${ATTACHED_OVERLAP})`,
+    paddingBlockStart: `calc(${ATTACHED_OVERLAP} + ${spacingVars['--spacing-2']})`,
     paddingBlockEnd: spacingVars['--spacing-2'],
     paddingInline: spacingVars['--spacing-2'],
     borderEndStartRadius: radiusVars['--radius-element'],
     borderEndEndRadius: radiusVars['--radius-element'],
+    // The overlap is visual only. Let pointer input reach the control beneath
+    // it instead of allowing the later-painted status box to steal the click.
+    pointerEvents: 'none',
   },
   detached: {
     marginTop: spacingVars['--spacing-1'],

package/src/Layout/LayoutHeader.doc.mjs

@@ -8,6 +8,15 @@ export const docs = {
   displayName: 'Layout Header',
   isHiddenFromOverview: true,
   description: 'Top bar for page titles, app bars, and toolbars.',
+  playground: {
+    defaults: {
+      children: 'Page Title',
+      hasDivider: true,
+    },
+    wrapper: {
+      component: 'Layout',
+    },
+  },
   props: [
     {
       name: 'children',

package/src/MultiSelector/MultiSelector.spec.md

@@ -22,7 +22,7 @@ verified_by:
     scripts/check-knowledge.mjs,
   ]
 modules: []
-families: [family:overlay-dismissal]
+families: [family:input-fields, family:overlay-dismissal]
 design_specs: []
 architecture:
   [

package/src/Selector/Selector.spec.md

@@ -16,7 +16,7 @@ verified_by:
     packages/core/src/Selector/Selector.source-build.test.mjs,
   ]
 modules: []
-families: []
+families: [family:input-fields]
 design_specs: []
 architecture:
   [
@@ -71,8 +71,9 @@ connection between the closed trigger and its selection surface.
 - Multi-value selection; MultiSelector owns it.
 - Product-specific option content or filtering performed outside the supplied
   option list.
-- Family-wide input sizing, loading, end-lane, or disabled-reason policy. The
-  draft `family:input-fields` record is non-authoritative context only.
+- Family-wide input state display, behavior, appearance, size, end-control,
+  status-placement, and disabled-reason policy — owned by current
+  `family:input-fields`.
 
 ## Public concepts
 
@@ -266,9 +267,10 @@ in `spec:AST-004` as current runtime behavior.
   has changed.
 - `spec:AST-011/DEC-1` owns the additive read-only state: caller-owned policy can
   preserve a focusable, submittable value without exposing selection controls.
-- `family:input-fields` remains a draft. It may inform future reconciliation, but
-  this current component contract neither backlinks to it in frontmatter nor
-  depends on it for present policy.
+- `family:input-fields` owns family-wide state display, behavior, appearance,
+  size, end-control, disabled-reason, and status-placement policy. Selector
+  keeps its DEC-1 standalone inline-size exception; this component contract
+  owns selection behavior inside that boundary.
 
 ## Verification map
 

package/src/TextArea/TextArea.spec.md

@@ -17,7 +17,7 @@ verified_by:
     scripts/check-knowledge.mjs,
   ]
 modules: []
-families: []
+families: [family:input-fields]
 design_specs: []
 architecture: [architecture:component-theming-surface]
 contributing: []

package/src/Tokenizer/Tokenizer.spec.md

@@ -18,7 +18,7 @@ verified_by:
     scripts/check-knowledge.mjs,
   ]
 modules: []
-families: [family:overlay-dismissal]
+families: [family:input-fields, family:overlay-dismissal]
 design_specs: []
 architecture:
   [
@@ -222,10 +222,10 @@ This contract adds no target, state, or visual styling contract.
   geometry and package-peer identity out of Tokenizer's public API.
 - The current Typeahead draft records BaseTypeahead's layer delegation but does
   not own Tokenizer's token/input identity or the approved descriptor.
-- The input-field contract at
-  [#5778](https://github.com/facebook/astryx/pull/5778) is unlanded draft evidence
-  that Tokenizer owns its component-local DOM/CSS mechanism. It is not authority
-  for this branch and is intentionally absent from frontmatter.
+- `family:input-fields` owns family-wide state display, behavior, appearance,
+  size, end-control, disabled-reason, and status-placement policy. Tokenizer
+  keeps its component-local token/input and source-loading behavior inside that
+  boundary.
 - The PowerSearch contract at
   [#5804](https://github.com/facebook/astryx/pull/5804) depends on the approved
   descriptor and owns its own editor width policy. It is dependent draft evidence,

package/src/Typeahead/Typeahead.spec.md

@@ -20,7 +20,7 @@ verified_by:
     scripts/check-knowledge.mjs,
   ]
 modules: []
-families: [family:overlay-dismissal]
+families: [family:input-fields, family:overlay-dismissal]
 design_specs: []
 architecture:
   [architecture:component-theming-surface, architecture:layer-runtime]

package/src/theme/derivedVarRegistry.test.ts

@@ -272,6 +272,7 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   '--button-focus-offset',
   '--button-icon-only-aspect',
   '--_avatar-group-overlap',
+  '--_field-status-overlap',
   '--_codeblock-gutter-width',
   '--_tab-indicator-bottom',
   // Hit-area outset on a ::after overlay, and whether that overlay is