@astryxdesign/core 0.1.7-canary.cecb773 → 0.1.7-canary.e24b070

package/dist/Carousel/Carousel.d.ts

@@ -3,9 +3,8 @@
  * @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
  * @output Exports Carousel component
  * @position Horizontal scroll container with fade-edge overflow indication,
- *   optional prev/next buttons on the top layer, scroll-snap, a 1px
- *   visual bleed allowance for child selection indicators, and Shift + wheel
- *   mapping so mouse users can scroll horizontally.
+ *   optional prev/next buttons on the top layer, scroll-snap, and a 1px
+ *   visual bleed allowance for child selection indicators.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)

package/dist/Carousel/Carousel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BA6Kf;yBA3Le,QAAQ"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAC;AAc/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAyJD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,QAAQ,EACR,GAAO,EACP,UAAiB,EACjB,WAAkB,EAClB,OAAe,EACf,OAAO,EACP,YAAY,EAAE,kBAAkB,EAChC,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,SAAS,EACb,EAAE,aAAa,+BAmJf;yBAjKe,QAAQ"}

package/dist/Carousel/Carousel.js

@@ -7,9 +7,8 @@
  * @input Uses React, StyleX, useScrollOverflow, useLayer, Button, Icon, theme tokens
  * @output Exports Carousel component
  * @position Horizontal scroll container with fade-edge overflow indication,
- *   optional prev/next buttons on the top layer, scroll-snap, a 1px
- *   visual bleed allowance for child selection indicators, and Shift + wheel
- *   mapping so mouse users can scroll horizontally.
+ *   optional prev/next buttons on the top layer, scroll-snap, and a 1px
+ *   visual bleed allowance for child selection indicators.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Carousel/index.ts (exports)
@@ -235,34 +234,6 @@ export function Carousel({
     scrollElRef.current = el;
     scrollRef(el);
   }, [scrollRef]);
-
-  // Map Shift + vertical wheel to horizontal scroll. Trackpads emit
-  // horizontal deltas natively, but a standard mouse only produces deltaY —
-  // so mouse users can't wheel-scroll a horizontal container. Shift + wheel
-  // is the long-established convention for horizontal scroll containers; we
-  // honor it by translating the vertical delta into a horizontal scroll.
-  //
-  // Only kicks in when Shift is held and the wheel is purely vertical
-  // (deltaX === 0), so native trackpad horizontal scrolling is untouched.
-  const handleWheel = useCallback(event => {
-    if (!event.shiftKey || event.deltaY === 0 || event.deltaX !== 0) {
-      return;
-    }
-    const el = scrollElRef.current;
-    if (!el) {
-      return;
-    }
-    // Nothing to scroll horizontally — let the event fall through so the page
-    // can scroll as it normally would.
-    if (el.scrollWidth <= el.clientWidth) {
-      return;
-    }
-    event.preventDefault();
-    el.scrollBy({
-      left: event.deltaY,
-      behavior: 'auto'
-    });
-  }, []);
   const scrollBy = useCallback(direction => {
     const el = scrollElRef.current;
     if (!el) {
@@ -300,7 +271,6 @@ export function Carousel({
     children: [/*#__PURE__*/_jsx("div", {
       ref: composedRef,
       tabIndex: 0,
-      onWheel: handleWheel,
       ...stylex.props(styles.scroller, gapStyles[gap], padding != null && paddingStyles[padding], hasSnap && styles.snap, fadeStyle),
       children: Children.map(children, child => /*#__PURE__*/_jsx("div", {
         ...{

package/dist/Icon/Icon.d.ts

@@ -140,31 +140,6 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
      * @default 'md'
      */
     size?: IconSize;
-    /**
-     * Accessible name for the icon. Set this only when the icon is MEANINGFUL on
-     * its own — a standalone status glyph or an icon-only indicator with no
-     * adjacent text conveying the same information. Providing it exposes the icon
-     * to assistive tech as `role="img"` with this string as the accessible name
-     * (via `aria-label`) and drops the default `aria-hidden="true"`.
-     *
-     * Omit it (the default) for decorative icons — the common case, e.g. an icon
-     * beside a text label — and the icon stays hidden from assistive tech
-     * (`aria-hidden="true"`). An empty string (`''`) is treated the same as
-     * omitting it (decorative), since an empty accessible name is meaningless.
-     *
-     * Don't set `label` when an interactive parent (Button, IconButton, link)
-     * already names the control — that produces a duplicate announcement.
-     *
-     * @example
-     * ```
-     * // Meaningful, standalone icon
-     * <Icon icon="success" label="Completed" />
-     *
-     * // Decorative icon (default) — omit label
-     * <Icon icon="search" />
-     * ```
-     */
-    label?: string;
 }
 /**
  * Renders an icon from the icon registry or a custom SVG component.
@@ -174,7 +149,7 @@ export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'
  * <Icon icon="close" size="md" color="primary" />
  * ```
  */
-export declare function Icon({ icon, color, size, label, ref, ...props }: IconProps): React.JSX.Element;
+export declare function Icon({ icon, color, size, ref, ...props }: IconProps): React.JSX.Element;
 export declare namespace Icon {
     var displayName: string;
 }

package/dist/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBAkCX;yBAzCe,IAAI;;;AA4FpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,sBAAsB,CAAC;AAqBnD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2Df,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;EAiBd,CAAC;AAyCH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACjD,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAC;AAE/C;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAMD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAW,EACX,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,qBA0BX;yBAhCe,IAAI;;;AAiFpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}

package/dist/Icon/Icon.js

@@ -205,26 +205,6 @@ const spanSizeStyles = {
  * Extends SVGProps to allow passing additional SVG attributes (used when icon is a component).
  */
 
-/**
- * Derives the ARIA attributes for an icon from its `label` prop.
- *
- * - Non-empty `label` → meaningful image: `role="img"` + `aria-label`, and no
- *   `aria-hidden` (an `aria-hidden` element is removed from the accessibility
- *   tree, so its accessible name would be ignored).
- * - Omitted or empty `label` → decorative default: `aria-hidden="true"`.
- *
- * The result is spread BEFORE `{...props}` in both render modes so an explicit
- * `aria-hidden` / `role` / `aria-label` from the consumer always wins.
- */
-function getIconA11yProps(label) {
-  return label != null && label !== '' ? {
-    role: 'img',
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  };
-}
-
 // =============================================================================
 // Component
 // =============================================================================
@@ -241,21 +221,15 @@ export function Icon({
   icon,
   color = 'inherit',
   size = 'md',
-  label,
   ref,
   ...props
 }) {
-  // Derive ARIA from `label`: decorative (aria-hidden) by default, or a
-  // meaningful image (role="img" + aria-label) when `label` is non-empty.
-  const a11yProps = getIconA11yProps(label);
-
   // String mode: resolve from icon registry, wrap in styled span
   if (typeof icon === 'string') {
     return /*#__PURE__*/_jsx(IconFromRegistry, {
       name: icon,
       color: color,
       size: size,
-      a11yProps: a11yProps,
       spanProps: props
     });
   }
@@ -263,12 +237,8 @@ export function Icon({
   // Component mode: render SVG component directly with ref forwarding
   const IconComponent = icon;
   return /*#__PURE__*/_jsx(IconComponent, {
-    ref: ref
-    // Derived a11y (decorative default or meaningful `label`) is spread
-    // BEFORE {...props} so an explicit aria-hidden/role/aria-label from the
-    // consumer still wins as an escape hatch.
-    ,
-    ...a11yProps,
+    ref: ref,
+    "aria-hidden": "true",
     ...mergeProps(themeProps('icon', {
       size,
       color
@@ -293,7 +263,6 @@ function IconFromRegistry({
   name,
   color,
   size,
-  a11yProps,
   spanProps
 }) {
   const resolvedIcon = getIcon(name);
@@ -301,7 +270,11 @@ function IconFromRegistry({
     return null;
   }
   return /*#__PURE__*/_jsx("span", {
-    ...a11yProps,
+    // Decorative by default, but placed BEFORE the prop spread so consumers
+    // can override it (e.g. `aria-hidden={false}` + `role="img"` +
+    // `aria-label`) to expose a meaningful standalone icon. This matches
+    // component-mode Icon, which already sets aria-hidden before its spread.
+    "aria-hidden": "true",
     ...spanProps,
     ...mergeProps(themeProps('icon', {
       size,

package/dist/TreeList/TreeListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA8NrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA+L3B;yBArNe,YAAY"}
+{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAqNrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA+L3B;yBArNe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -21,6 +21,8 @@ import { getIcon } from "../Icon/globalIconRegistry.js";
 import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { TreeListBranches } from "./TreeListBranches.js";
+import "./treeListItem.markers.stylex.js";
+import { treeItemScope } from "./treeListItem.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -29,6 +31,15 @@ import { useTranslator } from "../i18n/index.js";
 // =============================================================================
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
+  wrapper: {
+    kH6xsr: "x3ct3a4",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    kVAEAm: "x1n2onr6",
+    kzqmXN: "xh8yej3",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
   contentWrapper: {
     kaIpWk: "xh6dtrn",
     k1xSpc: "x78zum5",
@@ -51,8 +62,8 @@ const styles = {
     $$css: true
   },
   focusVisibleOutline: {
-    kI3sdo: "x11h0toi x1irc7jg",
-    kInvED: "x1g710d4 xdjuwb3",
+    kI3sdo: "x1a2a7pz xr21g96 x1irc7jg",
+    kInvED: "x1wfwxd8 xs4y3kv xdjuwb3",
     $$css: true
   },
   disabled: {
@@ -288,9 +299,7 @@ export function TreeListItem({
     "data-tree-id": id,
     "data-tree-level": nestedLevel + 1,
     "data-tree-disabled": isDisabled || undefined,
-    ...{
-      className: "x3ct3a4 x1ghz6dp x1717udv x1n2onr6 xh8yej3 x1a2a7pz x1hb5tod xtoutpx x1f8er9e x1aefuf3"
-    },
+    ...stylex.props(styles.wrapper, treeItemScope),
     children: [/*#__PURE__*/_jsx("div", {
       ...{
         className: "x12gdq22"

package/dist/TreeList/treeListItem.markers.stylex.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file treeListItem.markers.stylex.ts
+ * @input Uses StyleX defineMarker
+ * @output Exports treeItemScope marker
+ * @position Scoped marker; consumed by TreeListItem.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
+ * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
+ * a parent treeitem does not leak the focus ring onto descendant rows.
+ */
+export declare const treeItemScope: ReturnType<typeof stylex.defineMarker>;
+//# sourceMappingURL=treeListItem.markers.stylex.d.ts.map

package/dist/TreeList/treeListItem.markers.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeListItem.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/TreeList/treeListItem.markers.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC1C,CAAC"}

package/dist/TreeList/treeListItem.markers.stylex.js

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file treeListItem.markers.stylex.ts
+ * @input Uses StyleX defineMarker
+ * @output Exports treeItemScope marker
+ * @position Scoped marker; consumed by TreeListItem.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
+ * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
+ * a parent treeitem does not leak the focus ring onto descendant rows.
+ */
+export const treeItemScope = {
+  x1g2q90y: "x1g2q90y",
+  $$css: true
+};

package/dist/astryx.css

@@ -75,8 +75,6 @@
   .x9icjy1{--_segmented-control-radius:var(--radius-element)}
   .xficto1{--_tab-indicator-bottom:calc(-1 * (var(--spacing-1) + var(--border-width)))}
   .xbrl7fg{--_tab-indicator-bottom:var(--x---_tab-indicator-bottom)}
-  .x1f8er9e{--_tree-focus-outline-offset:0}
-  .x1hb5tod{--_tree-focus-outline:none}
   .xnvcwyz{--astryx-section-padding:var(--spacing-0-5)}
   .xvdw317{--astryx-section-padding:var(--spacing-0)}
   .x1rj2uvf{--astryx-section-padding:var(--spacing-1-5)}
@@ -254,8 +252,6 @@
   .x1t5kicu{--layout-padding-outer-y:var(--spacing-9)}
   .xnpej1e{--radius-element:var(--radius-full)}
   .xkce8z9{--separator-display:flex}
-  .x1aefuf3:focus-visible{--_tree-focus-outline-offset:2px}
-  .xtoutpx:focus-visible{--_tree-focus-outline:2px solid var(--color-accent)}
   .x11woleg:focus-visible{--indicator-color:var(--color-accent)}
   .x1ibt0lz:first-child{--separator-display:none}
   .x1rht92:nth-child(even){--table-row-overlay:var(--color-background-muted)}
@@ -371,7 +367,6 @@
   .xhrcg97:not(#\#):not(#\#){margin-inline:var(--spacing-1)}
   .xvlecxo:not(#\#):not(#\#){margin-inline:var(--x-marginInline)}
   .x1a2a7pz:not(#\#):not(#\#){outline:none}
-  .x11h0toi:not(#\#):not(#\#){outline:var(--_tree-focus-outline,none)}
   .xysyzu8:not(#\#):not(#\#){overflow:auto}
   .x7giv3:not(#\#):not(#\#){overflow:clip}
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
@@ -422,6 +417,7 @@
   .xq2gx43:not(#\#):not(#\#){transition:none}
   .x1ey1afo:not(#\#):not(#\#){transition:opacity var(--duration-fast)}
   .x1ob6yzd:not(#\#):not(#\#){transition:transform var(--duration-fast) var(--ease-standard)}
+  .xr21g96.xr21g96:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#){outline:2px solid var(--color-accent)}
   .x6q1khz:focus-within:not(#\#):not(#\#){border-color:var(--color-accent)}
   .xk2sxw7:focus-within:not(#\#):not(#\#){border-color:var(--color-error)}
   .xyq33ac:focus-within:not(#\#):not(#\#){border-color:var(--color-success)}
@@ -856,7 +852,6 @@
   .x1wfwxd8:not(#\#):not(#\#):not(#\#){outline-offset:0}
   .x1y3gkto:not(#\#):not(#\#):not(#\#){outline-offset:1px}
   .x1hl8ikr:not(#\#):not(#\#):not(#\#){outline-offset:2px}
-  .x1g710d4:not(#\#):not(#\#):not(#\#){outline-offset:var(--_tree-focus-outline-offset,0)}
   .x9y5y3v:not(#\#):not(#\#):not(#\#){overflow-clip-margin:1px}
   .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
@@ -1045,6 +1040,7 @@
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
+  .xs4y3kv.xs4y3kv:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x3730vf.x3730vf:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .xuqivmr.xuqivmr:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x7v6acp.x7v6acp:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){visibility:visible}