@astryxdesign/lab 0.3.0-canary.fcbc342 → 0.4.0-canary.3112e99

package/dist/BottomSheet/BottomSheet.d.ts

@@ -82,9 +82,10 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
      * - `true` (default) — `showModal()`: renders in the top layer with a focus
      *   trap, a `::backdrop` scrim, body scroll lock, and tap-scrim-to-dismiss.
      *   The background is inert. Use for focused tasks (filters, forms).
-     * - `false` — `show()`: a non-modal sheet with **no scrim**. The page behind
+     * - `false`: `show()` renders a viewport-anchored overlay with **no scrim**. It is
+     *   still layered above the page, not rendered inline, but the page behind
      *   stays interactive and scrollable (like Material's *standard* bottom
-     *   sheet, or an iOS undimmed detent). Escape still closes while focus is
+     *   sheet or an iOS undimmed detent). Escape still closes while focus is
      *   inside the sheet, and drag/flick-to-dismiss still work. Use for a peek
      *   surface that coexists with the page (e.g. a panel over a live map).
      * @default true

package/dist/BottomSheet/BottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA2BlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAiL5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,QAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA0LlB;yBApMe,WAAW"}
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AA2BlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAiL5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,QAAe,EACf,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA0LlB;yBApMe,WAAW"}

package/dist/Chat/ChatEmojiPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatEmojiPicker.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,eAAe,CAiB9D,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAA4B,EAC5B,KAAuB,EACvB,WAA4B,EAC5B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,oBAAoB,+BAoFtB;yBA/Fe,eAAe"}
+{"version":3,"file":"ChatEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatEmojiPicker.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,eAAe,CAiB9D,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAA4B,EAC5B,KAAuB,EACvB,WAA4B,EAC5B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,oBAAoB,+BAuFtB;yBAlGe,eAAe"}

package/dist/Chat/ChatEmojiPicker.js

@@ -24,7 +24,7 @@ import { useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { mergeProps } from '@astryxdesign/core/utils';
+import { focusOutlineStyles, mergeProps } from '@astryxdesign/core/utils';
 import { themeProps } from '@astryxdesign/core/utils';
 import { Popover } from '@astryxdesign/core/Popover';
 import { TextInput } from '@astryxdesign/core/TextInput';
@@ -96,6 +96,25 @@ const styles = {
     kzqmXN: "x1dz1jew",
     kB7OPa: "x9f619",
     $$css: true
+  },
+  cell: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kzqmXN: "x1td3qas",
+    kZKoxP: "x10w6t97",
+    kaIpWk: "xx3sua9",
+    ksu8eU: "xng3xce",
+    kmVPX3: "x1717udv",
+    kWkggS: "xjbqb8w x1n5bzlp xe9uy6x",
+    kkrTdU: "x1ypdohk",
+    kGuDYH: "xosj86m",
+    kLWn49: "xw6l6zx",
+    kInvED: "x1wfwxd8 x1bqaal",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xuedmi6 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    $$css: true
   }
 };
 
@@ -185,9 +204,7 @@ export function ChatEmojiPicker({
           "data-emoji": option.emoji,
           "aria-label": `React with ${option.name}`,
           onClick: () => handleSelect(option.emoji),
-          ...{
-            className: "x3nfvp2 x6s0dn4 xl56j7k x1td3qas x10w6t97 xx3sua9 xng3xce x1717udv xjbqb8w x1n5bzlp xe9uy6x x1ypdohk xosj86m xw6l6zx x1a2a7pz x17nn4n9 x2ssjo2 x15406qy xuedmi6 x12w9bfk xlr8y92"
-          },
+          ...stylex.props(focusOutlineStyles.focusVisible, styles.cell),
           children: /*#__PURE__*/_jsx("span", {
             "aria-hidden": "true",
             children: option.emoji

package/dist/InfoTip/InfoTip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAU5D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAmCD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAA0B,EAC1B,IAAW,GACZ,EAAE,YAAY,GAAG,SAAS,CA4C1B;yBAhDe,OAAO"}
+{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAW5D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA2BD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAA0B,EAC1B,IAAW,GACZ,EAAE,YAAY,GAAG,SAAS,CA4C1B;yBAhDe,OAAO"}

package/dist/InfoTip/InfoTip.js

@@ -19,12 +19,33 @@ import { Icon } from '@astryxdesign/core/Icon';
 import { Tooltip } from '@astryxdesign/core/Tooltip';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { focusOutlineStyles } from '@astryxdesign/core/utils';
 
 /**
  * Size of the info icon. Maps 1:1 to Icon sizes
  * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
  */
 import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  trigger: {
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kXLuUW: "xxymvpz",
+    kmVPX3: "x12nba7r",
+    kogj98: "x1ghz6dp",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kaIpWk: "xjspbzw",
+    kkrTdU: "x1ypdohk",
+    kMwMTN: "xv9yike xkxie9p",
+    k1ekBW: "xt3l3uh",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  }
+};
+
 /**
  * An inline info-icon help affordance: a small "i" button that reveals a
  * tooltip on hover and keyboard focus. Use it next to labels, values, and
@@ -78,9 +99,7 @@ export function InfoTip({
       onKeyDown: handleKeyDown,
       onBlur: handleReset,
       onMouseLeave: handleReset,
-      ...{
-        className: "x3nfvp2 x6s0dn4 xl56j7k xxymvpz x12nba7r x1ghz6dp xng3xce xjbqb8w xjspbzw x1ypdohk xv9yike xkxie9p x17nn4n9 x1wfwxd8 x7s97pk xt3l3uh xuedmi6 xlr8y92"
-      },
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.trigger),
       children: /*#__PURE__*/_jsx(Icon, {
         icon: "info",
         size: size

package/dist/LogStream/LogStream.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAclD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AA+ND;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAoNhB;yBAlOe,SAAS"}
+{"version":3,"file":"LogStream.d.ts","sourceRoot":"","sources":["../../src/LogStream/LogStream.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAkBlD,iCAAiC;AACjC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEjE,0EAA0E;AAC1E,MAAM,WAAW,QAAQ;IACvB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,6DAA6D;IAC7D,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,SAAS,CAAC;CAC9C;AA0ND;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAmB,EACnB,WAAW,EACX,cAAc,EACd,SAAS,EACT,aAAoB,EACpB,KAAoB,EACpB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAqNhB;yBAnOe,SAAS"}

package/dist/LogStream/LogStream.js

@@ -25,7 +25,7 @@
 
 import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import { mergeProps, themeProps } from '@astryxdesign/core/utils';
+import { focusOutlineStyles, mergeProps, themeProps } from '@astryxdesign/core/utils';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { borderVars, colorVars, durationVars, fontWeightVars, radiusVars, shadowVars, spacingVars, textSizeVars, typographyVars } from '@astryxdesign/core/theme/tokens.stylex';
 
@@ -186,6 +186,31 @@ const styles = {
   levelErrorTerminal: {
     kMwMTN: "xbz8ry5",
     $$css: true
+  },
+  jumpToLatest: {
+    kVAEAm: "x10l6tqk",
+    krVfgx: "x1hmuevu",
+    kt4wiu: "x1mcfs9z",
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "xrrkdod",
+    kaIpWk: "xjspbzw",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "xvy26l8",
+    kWkggS: "x10xzikg x1rlsyly",
+    kMwMTN: "x1tgivj0",
+    kMv6JI: "x9m5x89",
+    kGuDYH: "x1eqnyfr",
+    k63SB2: "x1e4wzip",
+    kkrTdU: "x1ypdohk",
+    kGVxlE: "x14hfi27",
+    $$css: true
+  },
+  jumpToLatestTerminal: {
+    kVAM5u: "x70o2i5",
+    kWkggS: "x1my5jcs xj3zyw3",
+    kMwMTN: "x1tu4bv5",
+    $$css: true
   }
 };
 const LEVEL_STYLE = {
@@ -420,14 +445,7 @@ export function LogStream({
     }), !following && !isAtBottom && entries.length > 0 && /*#__PURE__*/_jsx("button", {
       type: "button",
       onClick: handleJumpToLatest,
-      ...{
-        0: {
-          className: "x10l6tqk x1hmuevu x1mcfs9z xu0wf1k xrrkdod xjspbzw x1litavf x1y0btm7 xvy26l8 x10xzikg x1rlsyly x1tgivj0 x9m5x89 x1eqnyfr x1e4wzip x1ypdohk x14hfi27 x1a2a7pz x17nn4n9 x1hl8ikr"
-        },
-        1: {
-          className: "x10l6tqk x1hmuevu x1mcfs9z xu0wf1k xrrkdod xjspbzw x1litavf x1y0btm7 x9m5x89 x1eqnyfr x1e4wzip x1ypdohk x14hfi27 x1a2a7pz x17nn4n9 x1hl8ikr x70o2i5 x1my5jcs xj3zyw3 x1tu4bv5"
-        }
-      }[!!isTerminal << 0],
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.jumpToLatest, isTerminal && styles.jumpToLatestTerminal),
       children: "Jump to latest \u2193"
     })]
   });

package/dist/Stepper/Step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAsgBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA0nBX;yBA5oBe,IAAI"}
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../src/Stepper/Step.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,aAAa,CAAC;IACzD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC5C;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AA2fD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,UAAU,EACV,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,GAAG,IAAI,EACR,EAAE,SAAS,+BA0nBX;yBA5oBe,IAAI"}

package/dist/Stepper/Step.js

@@ -18,7 +18,7 @@
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, radiusVars, fontWeightVars, typeScaleVars, durationVars, easeVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { mergeProps } from '@astryxdesign/core/utils';
+import { focusOutlineStyles, mergeProps } from '@astryxdesign/core/utils';
 import { Icon } from '@astryxdesign/core/Icon';
 import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { useTranslator } from '@astryxdesign/core/i18n';
@@ -277,9 +277,33 @@ const styles = {
     kZCmMZ: "xchaq28",
     $$css: true
   },
-  focusRing: {
-    kI3sdo: "x1a2a7pz x17nn4n9",
-    kInvED: "x1wfwxd8 x7s97pk",
+  densityCompact: {
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "xf314gf",
+    $$css: true
+  },
+  densityBalanced: {
+    k8WAf4: "xce4md1",
+    kg3NbH: "xf314gf",
+    $$css: true
+  },
+  densitySpacious: {
+    k8WAf4: "x8o8v82",
+    kg3NbH: "xrrkdod",
+    $$css: true
+  },
+  buttonReset: {
+    k9WMMc: "x1yc453h",
+    kGNEyG: "x1qjc9v5",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kzqmXN: "xh8yej3",
+    kkrTdU: "x1ypdohk",
+    kaIpWk: "xh6dtrn",
+    k1ekBW: "x15406qy",
+    kIyJzY: "xkvfbh3 x12w9bfk",
+    kAMwcw: "xlr8y92",
+    kWkggS: "xjbqb8w xe9uy6x xyxi2l3",
     $$css: true
   },
   otVerticalRoot: {
@@ -703,7 +727,7 @@ export function Step({
           type: "button",
           onClick: handleClick,
           "aria-label": stepAriaLabel,
-          ...stylex.props(styles.otInteractive, styles.otRowWrap, styles.otRowPadV(densitySpace), styles.focusRing),
+          ...stylex.props(styles.otInteractive, styles.otRowWrap, styles.otRowPadV(densitySpace), focusOutlineStyles.focusVisible),
           children: inner
         }) : /*#__PURE__*/_jsx("div", {
           ...stylex.props(styles.otRowWrap, styles.otRowPadV(densitySpace)),
@@ -740,7 +764,7 @@ export function Step({
         type: "button",
         onClick: handleClick,
         "aria-label": stepAriaLabel,
-        ...stylex.props(styles.otInteractive, styles.otColWrap, styles.otPadBlock(densitySpace), styles.focusRing),
+        ...stylex.props(styles.otInteractive, styles.otColWrap, styles.otPadBlock(densitySpace), focusOutlineStyles.focusVisible),
         children: innerH
       }) : /*#__PURE__*/_jsx("div", {
         ...stylex.props(styles.otColWrap, styles.otPadBlock(densitySpace)),
@@ -775,32 +799,7 @@ export function Step({
           type: "button",
           onClick: handleClick,
           "aria-label": stepAriaLabel,
-          ...{
-            0: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
-            },
-            4: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
-            },
-            2: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
-            },
-            6: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
-            },
-            1: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-            },
-            5: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-            },
-            3: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-            },
-            7: {
-              className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-            }
-          }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
+          ...stylex.props(styles.buttonReset, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious),
           children: [iconLabelNode, descriptionNode]
         }) : /*#__PURE__*/_jsxs("div", {
           ...{
@@ -854,32 +853,7 @@ export function Step({
       type: "button",
       onClick: handleClick,
       "aria-label": stepAriaLabel,
-      ...{
-        0: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk"
-        },
-        4: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xu0wf1k xf314gf"
-        },
-        2: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
-        },
-        6: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk xce4md1 xf314gf"
-        },
-        1: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-        },
-        5: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-        },
-        3: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-        },
-        7: {
-          className: "x1yc453h x1qjc9v5 x78zum5 xdt5ytf xh8yej3 x1ypdohk xh6dtrn x15406qy xkvfbh3 x12w9bfk xlr8y92 xjbqb8w xe9uy6x xyxi2l3 x1a2a7pz x17nn4n9 x1wfwxd8 x7s97pk x8o8v82 xrrkdod"
-        }
-      }[!!(density === 'compact') << 2 | !!(density === 'balanced') << 1 | !!(density === 'spacious') << 0],
+      ...stylex.props(styles.buttonReset, focusOutlineStyles.focusVisible, density === 'compact' && styles.densityCompact, density === 'balanced' && styles.densityBalanced, density === 'spacious' && styles.densitySpacious),
       children: [iconLabelNode, descriptionNode]
     }) : /*#__PURE__*/_jsxs("div", {
       ...{

package/dist/TransferList/TransferList.d.ts.map

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

package/dist/TransferList/TransferList.js

@@ -27,7 +27,7 @@ import { VisuallyHidden } from '@astryxdesign/core/VisuallyHidden';
 import { useAnnounce } from '@astryxdesign/core/hooks';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { borderVars, colorVars, spacingVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
-import { mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
+import { focusOutlineStyles, mergeProps, mergeRefs, themeProps } from '@astryxdesign/core/utils';
 import { reorderStyles } from "../reorderStyles.js";
 import "./tokens.stylex.js";
 import { transferListVars } from "./tokens.stylex.js";
@@ -123,6 +123,23 @@ const styles = {
     k7Eaqz: "xeuugli",
     $$css: true
   },
+  panel: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xb3r6kr",
+    kInvED: "x1wfwxd8 x1bqaal",
+    $$css: true
+  },
+  panelDivider: {
+    k2ei4v: "xgbv0en x12eanku",
+    kVhnKS: "x1t7ytsu",
+    kGJrpR: "x1j92z86",
+    kEafiO: "x972fbf x165mbd2",
+    kPef9Z: "x13fuv20",
+    kLZC3w: "x1pc3f07",
+    $$css: true
+  },
   headerAction: {
     kZKoxP: "xt7dq6l",
     k8WAf4: "xt970qd",
@@ -775,9 +792,7 @@ export function TransferList({
         tabIndex: -1,
         ...mergeProps(themeProps('transfer-list-panel', {
           side: 'selected'
-        }), {
-          className: "x78zum5 xdt5ytf xeuugli xb3r6kr x1a2a7pz x17nn4n9 x2ssjo2"
-        }),
+        }), stylex.props(focusOutlineStyles.focusVisible, styles.panel)),
         children: [/*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 x6s0dn4 x1qughib x1txdalj xjbqb8w x101j7pr xce4md1 xrrkdod x92x3c3 x1q0q8m5 xw8gpjh"
@@ -826,9 +841,7 @@ export function TransferList({
         tabIndex: -1,
         ...mergeProps(themeProps('transfer-list-panel', {
           side: 'available'
-        }), {
-          className: "x78zum5 xdt5ytf xeuugli xb3r6kr x1a2a7pz x17nn4n9 x2ssjo2 xgbv0en x12eanku x1t7ytsu x1j92z86 x972fbf x165mbd2 x13fuv20 x1pc3f07"
-        }),
+        }), stylex.props(focusOutlineStyles.focusVisible, styles.panel, styles.panelDivider)),
         children: [/*#__PURE__*/_jsxs("div", {
           ...{
             className: "x78zum5 x6s0dn4 x1qughib x1txdalj xjbqb8w x101j7pr xce4md1 xrrkdod x92x3c3 x1q0q8m5 xw8gpjh"

package/dist/TransferList/TransferListSelector.d.ts

@@ -12,7 +12,7 @@
 import { type ReactNode } from 'react';
 import { type ComplexSelectorProps } from '@astryxdesign/core/ComplexSelector';
 import { type TransferListProps } from './TransferList';
-type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'contentXstyle' | 'xstyle' | 'className' | 'style' | 'data-testid';
+type TransferListSelectorShellProp = 'label' | 'triggerLabel' | 'isLabelHidden' | 'description' | 'isOptional' | 'isRequired' | 'isDisabled' | 'isLoading' | 'status' | 'statusVariant' | 'labelTooltip' | 'size' | 'width' | 'placement' | 'xstyle' | 'className' | 'style' | 'data-testid';
 type TransferListContentProp = 'options' | 'selectedLabel' | 'availableLabel' | 'hasSearch' | 'searchLabel' | 'searchPlaceholder' | 'isReorderable' | 'hasSelectAll' | 'hasClear' | 'renderOption' | 'selectedEmptyText' | 'availableEmptyText' | 'noResultsText';
 export type TransferListSelectorCommitBehavior = 'immediate' | 'staged';
 export type TransferListSelectorProps<T extends string = string> = Pick<ComplexSelectorProps<readonly T[]>, TransferListSelectorShellProp> & Pick<TransferListProps<T>, TransferListContentProp> & {
@@ -49,7 +49,7 @@ export type TransferListSelectorProps<T extends string = string> = Pick<ComplexS
  * />
  * ```
  */
-export declare function TransferListSelector<T extends string = string>({ label, description, options, value, onChange, changeAction, commitBehavior, triggerLabel, isDisabled, isLoading, width, contentXstyle, applyLabel, cancelLabel, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, ...selectorProps }: TransferListSelectorProps<T>): ReactNode;
+export declare function TransferListSelector<T extends string = string>({ label, description, options, value, onChange, changeAction, commitBehavior, triggerLabel, isDisabled, isLoading, width, applyLabel, cancelLabel, selectedLabel, availableLabel, hasSearch, searchLabel, searchPlaceholder, isReorderable, hasSelectAll, hasClear, renderOption, selectedEmptyText, availableEmptyText, noResultsText, ...selectorProps }: TransferListSelectorProps<T>): ReactNode;
 export declare namespace TransferListSelector {
     var displayName: string;
 }

package/dist/TransferList/TransferListSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransferListSelector.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferListSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AA0CpE,KAAK,6BAA6B,GAC9B,OAAO,GACP,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,eAAe,GACf,cAAc,GACd,MAAM,GACN,OAAO,GACP,WAAW,GACX,eAAe,GACf,QAAQ,GACR,WAAW,GACX,OAAO,GACP,aAAa,CAAC;AAElB,KAAK,uBAAuB,GACxB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,UAAU,GACV,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,CAAC;AAEpB,MAAM,MAAM,kCAAkC,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,EAClC,6BAA6B,CAC9B,GACC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IACpD,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAC;IACpD,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+BJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9D,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAA4B,EAC5B,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,aAAa,EACb,UAAoB,EACpB,WAAsB,EACtB,aAAa,EACb,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,CA+G1C;yBA3Ie,oBAAoB"}
+{"version":3,"file":"TransferListSelector.d.ts","sourceRoot":"","sources":["../../src/TransferList/TransferListSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG/E,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAC;AAG5C,OAAO,EAAe,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AA4CpE,KAAK,6BAA6B,GAC9B,OAAO,GACP,cAAc,GACd,eAAe,GACf,aAAa,GACb,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,QAAQ,GACR,eAAe,GACf,cAAc,GACd,MAAM,GACN,OAAO,GACP,WAAW,GACX,QAAQ,GACR,WAAW,GACX,OAAO,GACP,aAAa,CAAC;AAElB,KAAK,uBAAuB,GACxB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,WAAW,GACX,aAAa,GACb,mBAAmB,GACnB,eAAe,GACf,cAAc,GACd,UAAU,GACV,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,eAAe,CAAC;AAEpB,MAAM,MAAM,kCAAkC,GAAG,WAAW,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI,CACrE,oBAAoB,CAAC,SAAS,CAAC,EAAE,CAAC,EAClC,6BAA6B,CAC9B,GACC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,uBAAuB,CAAC,GAAG;IACpD,mDAAmD;IACnD,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC;IACxC,8DAA8D;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,cAAc,CAAC,EAAE,kCAAkC,CAAC;IACpD,yFAAyF;IACzF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+BJ;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC9D,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,cAA4B,EAC5B,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAoB,EACpB,WAAsB,EACtB,aAAa,EACb,cAAc,EACd,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,GAAG,aAAa,EACjB,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAAG,SAAS,CAoH1C;yBA/Ie,oBAAoB"}

package/dist/TransferList/TransferListSelector.js

@@ -23,16 +23,22 @@ import { borderVars, colorVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { TransferList } from "./TransferList.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_SELECTOR_WIDTH = 'min(41rem, calc(100vw - 32px))';
+const _temp = {
+  kskxy: "x12ajvvl",
+  kmVPX3: "x1717udv",
+  kVQacm: "xb3r6kr",
+  kaIpWk: "x1pjcqnp",
+  "$$css": true
+};
 const styles = {
-  content: {
-    kzqmXN: "x1nalo9x",
-    ks0D6T: "x1rk9ocf",
-    kskxy: "x12ajvvl",
-    kmVPX3: "x1717udv",
-    kVQacm: "xb3r6kr",
-    kaIpWk: "x1pjcqnp",
+  content: width => [_temp, {
+    kzqmXN: width != null ? "x5lhr3w" : width,
+    ks0D6T: width != null ? "xf68679" : width,
     $$css: true
-  },
+  }, {
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width),
+    "--x-maxWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(width)
+  }],
   footer: {
     kmuXW: "x2lah0s",
     kEafiO: "x11xkdxz",
@@ -88,7 +94,6 @@ export function TransferListSelector({
   isDisabled,
   isLoading,
   width,
-  contentXstyle,
   applyLabel = 'Apply',
   cancelLabel = 'Cancel',
   selectedLabel,
@@ -124,6 +129,7 @@ export function TransferListSelector({
     }
     previousCommitBehaviorRef.current = commitBehavior;
   }, [commitBehavior, resetDraft]);
+  const resolvedWidth = typeof width === 'number' ? `${width}px` : width ?? DEFAULT_SELECTOR_WIDTH;
   return /*#__PURE__*/_jsx(ComplexSelector, {
     ...selectorProps,
     label: label,
@@ -134,8 +140,8 @@ export function TransferListSelector({
     triggerLabel: triggerLabel ?? `${value.length} selected`,
     isDisabled: isDisabled,
     isLoading: isLoading,
-    width: width ?? DEFAULT_SELECTOR_WIDTH,
-    contentXstyle: [styles.content, contentXstyle],
+    width: resolvedWidth,
+    contentXstyle: styles.content(resolvedWidth),
     children: (appliedValue, commit, close, state) => {
       const isStaged = commitBehavior === 'staged';
       const transferListValue = isStaged ? draftValue : appliedValue;

package/dist/lab.css

@@ -154,7 +154,6 @@
   .x1bvjpef:not(#\#):not(#\#){text-decoration:underline}
   .xb0j27v:not(#\#):not(#\#){transition:grid-template-rows var(--duration-medium) var(--ease-standard)}
   .x1ob6yzd:not(#\#):not(#\#){transition:transform var(--duration-fast) var(--ease-standard)}
-  .x17nn4n9:focus-visible:not(#\#):not(#\#){outline:2px solid var(--color-accent)}
   .x1xfd4ba:hover:not(#\#):not(#\#){border-color:transparent}
   .xn21ew4:hover:not(#\#):not(#\#){border-color:var(--color-accent)}
   .xt0b8zv:hover:not(#\#):not(#\#){text-decoration:underline}
@@ -437,9 +436,7 @@
   .x1us6l5c:not(#\#):not(#\#):not(#\#){opacity:.8}
   .xg01cxk:not(#\#):not(#\#):not(#\#){opacity:0}
   .x1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
-  .x2ssjo2:not(#\#):not(#\#):not(#\#){outline-offset:-2px}
   .x1wfwxd8:not(#\#):not(#\#):not(#\#){outline-offset:0}
-  .x1hl8ikr:not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x1xzczws:not(#\#):not(#\#):not(#\#){overflow-anchor:none}
   .xj0a0fe:not(#\#):not(#\#):not(#\#){overflow-wrap:anywhere}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
@@ -524,7 +521,7 @@
   .xr3buco:not(#\#):not(#\#):not(#\#){z-index:var(--x-zIndex)}
   .x1rmeqbc.x1rmeqbc:where(.x1fcdk97:first-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
   .xehs70j.xehs70j:where(.x1fcdk97:last-child *):not(#\#):not(#\#):not(#\#){visibility:hidden}
-  .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
+  .x1bqaal:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:-2px}
   .x1df3fe5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(-100%)}
   .xttggg:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x1n5bzlp:hover:not(#\#):not(#\#):not(#\#){background-color:transparent}
@@ -604,7 +601,6 @@
   .x1va8c73:not(#\#):not(#\#):not(#\#):not(#\#){max-width:320px}
   .x1k2d6hx:not(#\#):not(#\#):not(#\#):not(#\#){max-width:44px}
   .x11gisft:not(#\#):not(#\#):not(#\#):not(#\#){max-width:640px}
-  .x1rk9ocf:not(#\#):not(#\#):not(#\#):not(#\#){max-width:min(41rem,calc(100vw - 32px))}
   .x1x1rfll:not(#\#):not(#\#):not(#\#):not(#\#){max-width:none}
   .xf68679:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--x-maxWidth)}
   .x2lwn1j:not(#\#):not(#\#):not(#\#):not(#\#){min-height:0}
@@ -648,7 +644,6 @@
   .x1849jeq:not(#\#):not(#\#):not(#\#):not(#\#){width:30px}
   .x1td3qas:not(#\#):not(#\#):not(#\#):not(#\#){width:32px}
   .x1ftt334:not(#\#):not(#\#):not(#\#):not(#\#){width:5px}
-  .x1nalo9x:not(#\#):not(#\#):not(#\#):not(#\#){width:min(41rem,calc(100vw - 32px))}
   .x1oai4fc:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--icon-size)}
   .x1m747yf:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--size-element-lg)}
   .xx9zwd3:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--spacing-1)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.3.0-canary.fcbc342",
+  "version": "0.4.0-canary.3112e99",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.3.0-canary.fcbc342",
+    "@astryxdesign/core": "0.4.0-canary.3112e99",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "lexical": "^0.46.0",
@@ -66,7 +66,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.3.0-canary.fcbc342",
+    "@astryxdesign/cli": "0.4.0-canary.3112e99",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",

package/src/BottomSheet/BottomSheet.doc.mjs

@@ -47,7 +47,7 @@ export const docs = {
     {
       name: 'hasScrim',
       type: 'boolean',
-      description: "Whether to render a modal scrim behind the sheet. true (default) uses showModal(): top layer, focus trap, ::backdrop scrim, body scroll lock, and tap-scrim-to-dismiss, with the background inert. false uses show(): a non-modal sheet with no scrim, leaving the page behind interactive and scrollable (like Material's standard bottom sheet or an iOS undimmed detent). Escape still closes while focus is inside, and drag/flick-to-dismiss still work.",
+      description: "Whether to render a scrim, the semi-transparent overlay that covers and blocks the background, behind the sheet. true (default) uses showModal(): top layer, focus trap, ::backdrop scrim, body scroll lock, and tap-scrim-to-dismiss, with the background inert. false still renders a viewport-anchored overlay above the page, not inline content, but uses show() with no scrim, leaving the page behind interactive and scrollable. Escape still closes while focus is inside, and drag/flick-to-dismiss still work.",
       default: 'true',
     },
   ],
@@ -57,7 +57,7 @@ export const docs = {
       { guidance: true, description: 'Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge.' },
       { guidance: true, description: 'Keep the caller as the source of truth: derive isOpen from state and clear it in onOpenChange.' },
       { guidance: true, description: "Pick the starting height that fits the content: 'hug' for short bounded content, 'capped' for lists, 'tall' for streaming/resizing content; the user can then drag between snap points." },
-      { guidance: true, description: "Use hasScrim={false} (non-modal, no scrim) for a peek surface that must coexist with a live page behind it (e.g. a panel over a map); keep the default (hasScrim) for focused tasks where the background should be inert." },
+      { guidance: true, description: "Use hasScrim={false} for a floating, no-scrim overlay that must coexist with a live page behind it (e.g. a panel over a map). It remains viewport-anchored rather than rendering inline. Keep the default for focused tasks where the background should be inert." },
       { guidance: false, description: 'Use a BottomSheet for desktop inspectors or master-detail; use Drawer (side="end", hasScrim={false}) instead.' },
     ],
   },
@@ -95,7 +95,7 @@ export const docs = {
 </BottomSheet>`,
     },
     {
-      label: 'Non-modal sheet (no scrim): page stays interactive',
+      label: 'No scrim',
       code: `const [isOpen, setIsOpen] = useState(true);
 <BottomSheet
   isOpen={isOpen}
@@ -117,7 +117,7 @@ export const docsDense = {
       { guidance: true, description: 'Use for mobile-first bottom surfaces (filters, share sheets, quick actions).' },
       { guidance: true, description: 'Derive isOpen from state; clear it in onOpenChange.' },
       { guidance: true, description: "Pick a height that fits: 'hug' for short content, 'capped' for lists, 'tall' for streaming content." },
-      { guidance: true, description: "hasScrim={false} for a non-modal peek over a live page; default (hasScrim) for focused tasks (inert background)." },
+      { guidance: true, description: "hasScrim={false} for a floating no-scrim overlay over a live page; it is not inline. Keep the default for focused tasks (inert background)." },
       { guidance: false, description: 'Use for desktop inspectors or master-detail; use Drawer instead.' },
     ],
   },

package/src/BottomSheet/BottomSheet.tsx

@@ -297,9 +297,10 @@ export interface BottomSheetProps extends BaseProps<HTMLDialogElement> {
    * - `true` (default) — `showModal()`: renders in the top layer with a focus
    *   trap, a `::backdrop` scrim, body scroll lock, and tap-scrim-to-dismiss.
    *   The background is inert. Use for focused tasks (filters, forms).
-   * - `false` — `show()`: a non-modal sheet with **no scrim**. The page behind
+   * - `false`: `show()` renders a viewport-anchored overlay with **no scrim**. It is
+   *   still layered above the page, not rendered inline, but the page behind
    *   stays interactive and scrollable (like Material's *standard* bottom
-   *   sheet, or an iOS undimmed detent). Escape still closes while focus is
+   *   sheet or an iOS undimmed detent). Escape still closes while focus is
    *   inside the sheet, and drag/flick-to-dismiss still work. Use for a peek
    *   surface that coexists with the page (e.g. a panel over a live map).
    * @default true

package/src/Chat/ChatEmojiPicker.tsx

@@ -34,7 +34,7 @@ import {
   typeScaleVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
 import type {BaseProps} from '@astryxdesign/core';
-import {mergeProps} from '@astryxdesign/core/utils';
+import {focusOutlineStyles, mergeProps} from '@astryxdesign/core/utils';
 import {themeProps} from '@astryxdesign/core/utils';
 import {Popover} from '@astryxdesign/core/Popover';
 import {TextInput} from '@astryxdesign/core/TextInput';
@@ -148,11 +148,9 @@ const styles = stylex.create({
     cursor: 'pointer',
     fontSize: 18,
     lineHeight: typeScaleVars['--text-body-leading'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: -2,
+    // Inset, not the shared offset: the cells sit in a tight 8-across grid, so
+    // an outset ring would overlap its neighbors.
+    outlineOffset: {default: '0', ':focus-visible': -2},
     transitionProperty: 'background-color',
     transitionDuration: {
       default: durationVars['--duration-fast'],
@@ -271,7 +269,10 @@ export function ChatEmojiPicker({
                   data-emoji={option.emoji}
                   aria-label={`React with ${option.name}`}
                   onClick={() => handleSelect(option.emoji)}
-                  {...stylex.props(styles.cell)}>
+                  {...stylex.props(
+                    focusOutlineStyles.focusVisible,
+                    styles.cell,
+                  )}>
                   <span aria-hidden="true">{option.emoji}</span>
                 </button>
               ))}

package/src/InfoTip/InfoTip.tsx

@@ -26,6 +26,7 @@ import {
   radiusVars,
   spacingVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
+import {focusOutlineStyles} from '@astryxdesign/core/utils';
 
 /**
  * Size of the info icon. Maps 1:1 to Icon sizes
@@ -70,14 +71,6 @@ const styles = stylex.create({
         '@media (hover: hover)': colorVars['--color-icon-primary'],
       },
     },
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
     transitionProperty: 'color',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
@@ -145,7 +138,7 @@ export function InfoTip({
         onKeyDown={handleKeyDown}
         onBlur={handleReset}
         onMouseLeave={handleReset}
-        {...stylex.props(styles.trigger)}>
+        {...stylex.props(focusOutlineStyles.focusVisible, styles.trigger)}>
         <Icon icon="info" size={size} />
       </button>
     </Tooltip>

package/src/LogStream/LogStream.tsx

@@ -34,7 +34,11 @@ import {
 import * as stylex from '@stylexjs/stylex';
 
 import type {BaseProps} from '@astryxdesign/core';
-import {mergeProps, themeProps} from '@astryxdesign/core/utils';
+import {
+  focusOutlineStyles,
+  mergeProps,
+  themeProps,
+} from '@astryxdesign/core/utils';
 import {
   borderVars,
   colorVars,
@@ -288,11 +292,6 @@ const styles = stylex.create({
     fontWeight: fontWeightVars['--font-weight-medium'],
     cursor: 'pointer',
     boxShadow: shadowVars['--shadow-med'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: 2,
   },
   jumpToLatestTerminal: {
     borderColor: TERM.border,
@@ -561,6 +560,7 @@ export function LogStream({
           type="button"
           onClick={handleJumpToLatest}
           {...stylex.props(
+            focusOutlineStyles.focusVisible,
             styles.jumpToLatest,
             isTerminal && styles.jumpToLatestTerminal,
           )}>

package/src/Stepper/Step.tsx

@@ -28,7 +28,7 @@ import {
   durationVars,
   easeVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
-import {mergeProps} from '@astryxdesign/core/utils';
+import {focusOutlineStyles, mergeProps} from '@astryxdesign/core/utils';
 import type {BaseProps} from '@astryxdesign/core';
 import {Icon} from '@astryxdesign/core/Icon';
 import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
@@ -440,17 +440,6 @@ const styles = stylex.create({
     },
   },
 
-  focusRing: {
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
-  },
-
   // ===================== ON-TRACK LAYOUT =====================
   // Indicator is slotted into the connector line as a node on the track.
   // Each step draws the connector segments that flank its own indicator; the
@@ -1109,7 +1098,7 @@ export function Step({
                 styles.otInteractive,
                 styles.otRowWrap,
                 styles.otRowPadV(densitySpace),
-                styles.focusRing,
+                focusOutlineStyles.focusVisible,
               )}>
               {inner}
             </button>
@@ -1187,7 +1176,7 @@ export function Step({
               styles.otInteractive,
               styles.otColWrap,
               styles.otPadBlock(densitySpace),
-              styles.focusRing,
+              focusOutlineStyles.focusVisible,
             )}>
             {innerH}
           </button>
@@ -1239,7 +1228,7 @@ export function Step({
               aria-label={stepAriaLabel}
               {...stylex.props(
                 styles.buttonReset,
-                styles.focusRing,
+                focusOutlineStyles.focusVisible,
                 density === 'compact' && styles.densityCompact,
                 density === 'balanced' && styles.densityBalanced,
                 density === 'spacious' && styles.densitySpacious,
@@ -1295,7 +1284,7 @@ export function Step({
           aria-label={stepAriaLabel}
           {...stylex.props(
             styles.buttonReset,
-            styles.focusRing,
+            focusOutlineStyles.focusVisible,
             density === 'compact' && styles.densityCompact,
             density === 'balanced' && styles.densityBalanced,
             density === 'spacious' && styles.densitySpacious,

package/src/TransferList/TransferList.doc.mjs

@@ -187,7 +187,7 @@ export const docs = {
       name: 'width',
       type: 'SizeValue',
       description:
-        'Width of the external field. Its default matches the responsive popup width; use contentXstyle to override the popup.',
+        'Width of the field and its popup — both track this one value.',
       default: "'min(41rem, calc(100vw - 32px))'",
     },
     {
@@ -238,12 +238,6 @@ export const docs = {
       description:
         'Optional async action run after each immediate commit or a changed staged Apply; drives optimistic and busy state.',
     },
-    {
-      name: 'contentXstyle',
-      type: 'StyleXStyles',
-      description:
-        'StyleX styles composed after the default zero-padding, clipped popover content style.',
-    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -710,7 +704,6 @@ export const docsDense = {
     labelTooltip: 'Field-label tooltip.',
     changeAction:
       'Async action after each immediate commit or changed staged Apply.',
-    contentXstyle: 'Popover-content StyleX override.',
     xstyle: 'External field StyleX override.',
     className: 'External field class name.',
     style: 'External field inline styles.',

package/src/TransferList/TransferList.tsx

@@ -44,7 +44,12 @@ import {
   spacingVars,
   typeScaleVars,
 } from '@astryxdesign/core/theme/tokens.stylex';
-import {mergeProps, mergeRefs, themeProps} from '@astryxdesign/core/utils';
+import {
+  focusOutlineStyles,
+  mergeProps,
+  mergeRefs,
+  themeProps,
+} from '@astryxdesign/core/utils';
 import {reorderStyles} from '../reorderStyles';
 import {transferListVars} from './tokens.stylex';
 
@@ -234,11 +239,9 @@ const styles = stylex.create({
     flexDirection: 'column',
     minWidth: 0,
     overflow: 'hidden',
-    outline: {
-      default: 'none',
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: -2,
+    // Inset, not the shared offset: the panel's own edge is the container
+    // boundary, so an outset ring would fall outside the component.
+    outlineOffset: {default: '0', ':focus-visible': -2},
   },
   panelDivider: {
     borderInlineStartWidth: {
@@ -1180,7 +1183,7 @@ export function TransferList<T extends string = string>({
           tabIndex={-1}
           {...mergeProps(
             themeProps('transfer-list-panel', {side: 'selected'}),
-            stylex.props(styles.panel),
+            stylex.props(focusOutlineStyles.focusVisible, styles.panel),
           )}>
           <div {...stylex.props(styles.panelHeader)}>
             <Text id={selectedHeadingId} type="label" color="secondary">
@@ -1233,7 +1236,11 @@ export function TransferList<T extends string = string>({
           tabIndex={-1}
           {...mergeProps(
             themeProps('transfer-list-panel', {side: 'available'}),
-            stylex.props(styles.panel, styles.panelDivider),
+            stylex.props(
+              focusOutlineStyles.focusVisible,
+              styles.panel,
+              styles.panelDivider,
+            ),
           )}>
           <div {...stylex.props(styles.panelHeader)}>
             <Text id={availableHeadingId} type="label" color="secondary">

package/src/TransferList/TransferListSelector.tsx

@@ -28,14 +28,16 @@ import {TransferList, type TransferListProps} from './TransferList';
 const DEFAULT_SELECTOR_WIDTH = 'min(41rem, calc(100vw - 32px))';
 
 const styles = stylex.create({
-  content: {
-    width: DEFAULT_SELECTOR_WIDTH,
-    maxWidth: DEFAULT_SELECTOR_WIDTH,
+  // Width tracks the `width` prop, so the field and its popup are one
+  // measurement rather than two that can disagree.
+  content: (width: string) => ({
+    width,
+    maxWidth: width,
     maxHeight: 'calc(100vh - 32px)',
     padding: 0,
     overflow: 'hidden',
     borderRadius: 'inherit',
-  },
+  }),
   surface: {
     display: 'flex',
     flexDirection: 'column',
@@ -80,7 +82,6 @@ type TransferListSelectorShellProp =
   | 'size'
   | 'width'
   | 'placement'
-  | 'contentXstyle'
   | 'xstyle'
   | 'className'
   | 'style'
@@ -183,7 +184,6 @@ export function TransferListSelector<T extends string = string>({
   isDisabled,
   isLoading,
   width,
-  contentXstyle,
   applyLabel = 'Apply',
   cancelLabel = 'Cancel',
   selectedLabel,
@@ -223,6 +223,11 @@ export function TransferListSelector<T extends string = string>({
     previousCommitBehaviorRef.current = commitBehavior;
   }, [commitBehavior, resetDraft]);
 
+  const resolvedWidth =
+    typeof width === 'number'
+      ? `${width}px`
+      : (width ?? DEFAULT_SELECTOR_WIDTH);
+
   return (
     <ComplexSelector
       {...selectorProps}
@@ -234,8 +239,8 @@ export function TransferListSelector<T extends string = string>({
       triggerLabel={triggerLabel ?? `${value.length} selected`}
       isDisabled={isDisabled}
       isLoading={isLoading}
-      width={width ?? DEFAULT_SELECTOR_WIDTH}
-      contentXstyle={[styles.content, contentXstyle]}>
+      width={resolvedWidth}
+      contentXstyle={styles.content(resolvedWidth)}>
       {(appliedValue, commit, close, state) => {
         const isStaged = commitBehavior === 'staged';
         const transferListValue = isStaged ? draftValue : appliedValue;