@astryxdesign/lab 0.4.0-canary.833edcb → 0.4.0-canary.e144ea7

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/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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.4.0-canary.833edcb",
+  "version": "0.4.0-canary.e144ea7",
   "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.4.0-canary.833edcb",
+    "@astryxdesign/core": "0.4.0-canary.e144ea7",
     "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.4.0-canary.833edcb",
+    "@astryxdesign/cli": "0.4.0-canary.e144ea7",
     "@lexical/code": "^0.46.0",
     "@lexical/headless": "^0.46.0",
     "@lexical/html": "^0.46.0",

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.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">