@astryxdesign/core 0.1.8 → 0.1.9

package/dist/Tokenizer/Tokenizer.d.ts.map

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

package/dist/Tokenizer/Tokenizer.js

@@ -4,7 +4,7 @@
 
 /**
  * @file Tokenizer.tsx
- * @input Uses React, BaseTypeahead, Field, Token
+ * @input Uses React, BaseTypeahead, Field, Token, useAnnounce
  * @output Exports Tokenizer multi-select typeahead component
  * @position Composed component; forwards DOM ref and exposes focus control via
  *   handleRef
@@ -24,6 +24,7 @@ import { renderIconSlot } from "../Icon/index.js";
 import { OverflowList } from "../OverflowList/index.js";
 import { useLayer } from "../Layer/useLayer.js";
 import { useTooltip } from "../Tooltip/index.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
@@ -385,6 +386,12 @@ export function Tokenizer({
     bootstrap: async () => []
   }), []);
 
+  // Announce token add/remove politely via the persistent live region.
+  // Tokens previously appeared and disappeared silently — Backspace on an
+  // empty input removes the trailing token, and the per-token remove buttons
+  // gave no audible feedback either.
+  const announce = useAnnounce();
+
   // Handle adding an item — detect creatable synthetic items
   const handleAdd = useCallback(item => {
     if (!item) {
@@ -410,6 +417,7 @@ export function Tokenizer({
         item: realItem,
         type: 'create'
       });
+      announce(`Added ${createdValue}`);
       return;
     }
     if (selectedIds.has(item.id)) {
@@ -420,17 +428,21 @@ export function Tokenizer({
       item,
       type: 'add'
     });
-  }, [value, onChange, isAtMax, selectedIds, hasCreate]);
+    announce(`Added ${item.label}`);
+  }, [value, onChange, isAtMax, selectedIds, hasCreate, announce]);
 
-  // Handle removing an item
+  // Handle removing an item. Single removal path: both Backspace on an empty
+  // input and the per-token remove buttons route through here, so the
+  // announcement covers both.
   const handleRemove = useCallback(item => {
     const newItems = value.filter(v => v.id !== item.id);
     onChange(newItems, {
       item,
       type: 'remove'
     });
+    announce(`Removed ${item.label}`);
     inputRef.current?.focus();
-  }, [value, onChange]);
+  }, [value, onChange, announce]);
 
   // Handle clearing all items
   const handleClearAll = useCallback(() => {

package/dist/TopNav/TopNavHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4K5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EAAE,eAAe,EAC5B,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA4VpB;yBA/We,aAAa"}
+{"version":3,"file":"TopNavHeading.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavHeading.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAkB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAatD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4K5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAChE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,SAAS,EACT,OAAO,EACP,WAAW,EAAE,eAAe,EAC5B,IAAI,EACJ,YAAY,EACZ,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA4WpB;yBA/Xe,aAAa"}

package/dist/TopNav/TopNavHeading.js

@@ -135,6 +135,10 @@ export function TopNavHeading({
   const rootRef = useRef(null);
   const popover = usePopover({
     dialogLabel: t('@astryx.topNav.heading.dialogLabel'),
+    // The popup exposes its own role="menu" semantics; a role="dialog"
+    // aria-modal wrapper would announce "dialog, Navigation menu" around a
+    // menu (the anti-pattern removed in a478a3dcf).
+    role: 'none',
     hasCloseButton: false
   });
   const closeMenuCtx = useMemo(() => ({
@@ -304,14 +308,17 @@ export function TopNavHeading({
         })), headerEndContentElement]
       }), popover.render(/*#__PURE__*/_jsxs("div", {
         ref: menuRef,
-        role: "menu",
         ...{
           className: "x9epnlk xb3r6kr"
         },
         ...contentProps,
-        children: [popoverHeadingContent, /*#__PURE__*/_jsx(NavHeadingCloseContext, {
-          value: closeMenuCtx,
-          children: menu
+        children: [popoverHeadingContent, /*#__PURE__*/_jsx("div", {
+          role: "menu",
+          "aria-label": heading ?? t('@astryx.topNav.heading.dialogLabel'),
+          children: /*#__PURE__*/_jsx(NavHeadingCloseContext, {
+            value: closeMenuCtx,
+            children: menu
+          })
         })]
       }), {
         placement: 'below',
@@ -357,14 +364,17 @@ export function TopNavHeading({
         }) : undefined), headerEndContentElement]
       }), popover.render(/*#__PURE__*/_jsxs("div", {
         ref: menuRef,
-        role: "menu",
         ...{
           className: "x9epnlk xb3r6kr"
         },
         ...contentProps,
-        children: [popoverHeadingContent, /*#__PURE__*/_jsx(NavHeadingCloseContext, {
-          value: closeMenuCtx,
-          children: menu
+        children: [popoverHeadingContent, /*#__PURE__*/_jsx("div", {
+          role: "menu",
+          "aria-label": heading ?? t('@astryx.topNav.heading.dialogLabel'),
+          children: /*#__PURE__*/_jsx(NavHeadingCloseContext, {
+            value: closeMenuCtx,
+            children: menu
+          })
         })]
       }), {
         placement: 'below',

package/dist/TopNav/TopNavMegaMenu.js

@@ -179,7 +179,11 @@ function DefaultMegaMenu({
     onOpenChange?.(false);
   }, [onOpenChange]);
   const popover = usePopover({
-    dialogLabel: label,
+    // role: 'none' — the panel exposes its own role="group" labeled by
+    // `label`. Focus stays on the trigger while the panel is open, so a
+    // role="dialog" aria-modal="true" wrapper would announce an unnamed
+    // modal dialog around a grid of links.
+    role: 'none',
     // hasSurface: false — mega menu provides its own surface (panelContainer)
     // with border-top and custom overflow. Animation is applied via the
     // render() call's xstyle prop (panelAnimation), not the hook options.
@@ -252,8 +256,7 @@ function DefaultMegaMenu({
     children: [/*#__PURE__*/_jsxs("button", {
       ref: mergeRefs(triggerButtonRef, ref),
       type: "button",
-      "aria-haspopup": "true",
-      "aria-expanded": popover.isOpen,
+      ...popover.triggerProps,
       onClick: handleClick,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -277,7 +280,10 @@ function DefaultMegaMenu({
         children: getIcon('chevronDown')
       })]
     }), popover.render(/*#__PURE__*/_jsx("div", {
-      role: "menu",
+      // role="group" — a mega menu is a browsing grid of links, not an
+      // ARIA menu of menuitems (per the WAI-ARIA APG, the menu role is
+      // for action menus; link mega menus are the documented anti-case).
+      role: "group",
       "aria-label": label,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,

package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts

@@ -23,7 +23,15 @@ export interface TopNavMegaMenuFeaturedCardProps extends BaseProps<HTMLDivElemen
     description?: string;
     /** Optional image URL displayed above the body. */
     image?: string;
-    /** Alt text for the image. */
+    /**
+     * Alt text for the image.
+     *
+     * When omitted, the image is explicitly decorative (`alt=""` +
+     * `role="presentation"` + `aria-hidden`, matching Avatar) and hidden from
+     * assistive technology. Since the card already has a visible `title`, a
+     * decorative image is usually correct; pass `imageAlt` only when the image
+     * conveys information beyond the title and description.
+     */
     imageAlt?: string;
     /** CTA link text. */
     linkLabel?: string;

package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMegaMenuFeaturedCard.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenuFeaturedCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,MAAM,WAAW,+BAAgC,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,+BAA+B,qBA6BjC;yBA1Ce,0BAA0B"}
+{"version":3,"file":"TopNavMegaMenuFeaturedCard.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenuFeaturedCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAS5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiD5C,MAAM,WAAW,+BAAgC,SAAQ,SAAS,CAAC,cAAc,CAAC;IAChF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,GAAG,EACH,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,+BAA+B,qBAsCjC;yBAnDe,0BAA0B"}

package/dist/TopNav/TopNavMegaMenuFeaturedCard.js

@@ -89,9 +89,16 @@ export function TopNavMegaMenuFeaturedCard({
     ref: ref,
     ...mergeProps(themeProps('top-nav-mega-menu-featured-card'), stylex.props(styles.root, xstyle), className, style),
     ...rest,
-    children: [image && /*#__PURE__*/_jsx("img", {
+    children: [image &&
+    /*#__PURE__*/
+    // Without `imageAlt`, the image is explicitly decorative rather than
+    // silently empty-alt, matching Avatar's handling of unnamed images.
+    // Usually correct here: the card already has a visible title.
+    _jsx("img", {
       src: image,
       alt: imageAlt ?? '',
+      role: imageAlt ? undefined : 'presentation',
+      "aria-hidden": imageAlt ? undefined : true,
       ...{
         className: "xh8yej3 xhjk10j xl1xv1r x1lliihq"
       }

package/dist/TopNav/TopNavMenu.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file TopNavMenu.tsx
- * @input Uses React, StyleX, useHoverCard, TopNavItem tokens
+ * @input Uses React, StyleX, usePopover, useMenuHover, useListFocus,
+ *   useTypeahead, TopNavItem tokens
  * @output Exports TopNavMenu component and related types
  * @position Navigation item with hover-triggered overflow menu for TopNav
  *

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAA0B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAMrE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmM5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BA0JjB;yBAhKe,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmM5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BA+NjB;yBArOe,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -4,7 +4,8 @@
 
 /**
  * @file TopNavMenu.tsx
- * @input Uses React, StyleX, useHoverCard, TopNavItem tokens
+ * @input Uses React, StyleX, usePopover, useMenuHover, useListFocus,
+ *   useTypeahead, TopNavItem tokens
  * @output Exports TopNavMenu component and related types
  * @position Navigation item with hover-triggered overflow menu for TopNav
  *
@@ -14,10 +15,12 @@
  * - /packages/core/src/TopNav/index.ts
  * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
  */
-import React, { useId, useRef, useState } from 'react';
+import React, { useCallback, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
 import { useMenuHover } from "../hooks/useMenuHover.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useTypeahead } from "../hooks/useTypeahead.js";
 import { getIcon } from "../Icon/globalIconRegistry.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
@@ -119,7 +122,10 @@ export function TopNavMenu({
   const slot = useTopNavSlot();
   const triggerButtonRef = useRef(null);
   const popover = usePopover({
-    dialogLabel: label,
+    // The popup's own role="menu" is the exposed semantics; a modal dialog
+    // wrapper would announce an unnamed dialog around the menu and make the
+    // trigger claim aria-haspopup="dialog" for menu content (see TabMenu).
+    role: 'none',
     xstyle: styles.menuOffset
   });
   const {
@@ -137,6 +143,54 @@ export function TopNavMenu({
   });
   const setTriggerRef = mergeRefs(triggerButtonRef, popover.triggerRef, setTriggerEl, ref);
 
+  // The desktop popup is a composite menu widget per the APG menu pattern:
+  // a single roving tab stop with ArrowUp/ArrowDown traversal (wrapping),
+  // Home/End, and first-character typeahead. The hook owns item tabindex —
+  // items render tabIndex={-1} and exactly one is promoted to 0. The
+  // composition mirrors NavHeadingMenu.
+  const {
+    listRef,
+    handleKeyDown,
+    handleFocus,
+    focusItem
+  } = useListFocus({
+    itemSelector: '[role="menuitem"]',
+    hasRovingTabIndex: true,
+    onEscape: popover.hide
+  });
+
+  // First-character typeahead over the menu items (menus-11).
+  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll('[role="menuitem"]')) : [], [listRef]);
+  const typeahead = useTypeahead({
+    getItemLabels: () => getMenuItems().map(el => el.textContent),
+    onMatch: focusItem,
+    getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
+  });
+
+  // Extend useListFocus with Enter/Space activation. Items rendered without an
+  // `href` are `<div role="menuitem">` elements, which have no native keyboard
+  // activation — without this, Enter/Space on a focused onClick-only item does
+  // nothing. Anchor items (with `href`) already activate on Enter natively.
+  const menuKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      const focused = document.activeElement;
+      if (focused?.getAttribute('role') === 'menuitem') {
+        e.preventDefault();
+        focused.click();
+        return;
+      }
+    }
+    if (typeahead.onKeyDown(e)) {
+      e.preventDefault();
+      return;
+    }
+    handleKeyDown(e);
+  }, [handleKeyDown, typeahead]);
+
+  // Menu container carries both the hover hook's ref (for its open/close
+  // focus management) and the list-focus ref (for roving tabindex/typeahead).
+  const setMenuRef = mergeRefs(menuRef, listRef);
+
   // Mobile bar: hide menus entirely
   if (renderMode === 'mobile-bar') {
     return null;
@@ -235,18 +289,26 @@ export function TopNavMenu({
         children: getIcon('chevronDown')
       })]
     }), popover.render(/*#__PURE__*/_jsx("div", {
-      ref: menuRef,
+      ref: setMenuRef,
       role: "menu",
       "aria-label": label,
       ...contentProps,
+      // After the contentProps spread so the full APG composition (roving
+      // tabindex + typeahead + Enter/Space activation) replaces the hover
+      // hook's basic arrow-key handler.
+      onKeyDown: menuKeyDown,
+      onFocus: handleFocus,
       ...{
         className: "x78zum5 xdt5ytf xzye2dw x1u2d2a2 x9epnlk"
       },
       children: items.map(item => {
         const Element = item.href ? 'a' : 'div';
         return /*#__PURE__*/_jsxs(Element, {
-          role: "menuitem",
-          tabIndex: popover.isOpen ? 0 : -1,
+          role: "menuitem"
+          // Single tab stop: useListFocus owns the roving tabindex and
+          // promotes exactly one item to 0.
+          ,
+          tabIndex: -1,
           href: item.href,
           onClick: item.onClick,
           ...{

package/dist/TreeList/TreeList.d.ts

@@ -12,8 +12,8 @@
  */
 import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
-import type { TreeListItemData, TreeListDensity } from './TreeListTypes';
-export { type TreeListDensity } from './TreeListTypes';
+import type { TreeListItemData, TreeListDensity, TreeListVariant } from './TreeListTypes';
+export { type TreeListDensity, type TreeListVariant } from './TreeListTypes';
 export interface TreeListProps extends BaseProps<HTMLDivElement> {
     /** Ref forwarded to the root element */
     ref?: React.Ref<HTMLDivElement>;
@@ -30,6 +30,15 @@ export interface TreeListProps extends BaseProps<HTMLDivElement> {
      * @default 'balanced'
      */
     density?: TreeListDensity;
+    /**
+     * Visual treatment of the hierarchy guide (connector) lines.
+     * - `lineGuides`: connector lines between parent and child rows
+     * - `noGuides`: no connector lines; indentation alone conveys nesting
+     *
+     * Orthogonal to `density` (which controls spacing) — the two compose.
+     * @default 'lineGuides'
+     */
+    variant?: TreeListVariant;
     /**
      * Header content rendered above the tree list.
      * Semantically associated via aria-labelledby.
@@ -62,7 +71,7 @@ export interface TreeListProps extends BaseProps<HTMLDivElement> {
  * />
  * ```
  */
-export declare function TreeList({ items, density, header, xstyle, className, style, 'data-testid': testId, ref, }: TreeListProps): import("react").JSX.Element;
+export declare function TreeList({ items, density, variant, header, xstyle, className, style, 'data-testid': testId, ref, }: TreeListProps): import("react").JSX.Element;
 export declare namespace TreeList {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,gBAAgB,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAQvE,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAoJf;yBA7Je,QAAQ"}
+{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AAQzB,OAAO,EAAC,KAAK,eAAe,EAAE,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,OAAsB,EACtB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAqJf;yBA/Je,QAAQ"}

package/dist/TreeList/TreeList.js

@@ -114,6 +114,7 @@ function findInitialTabbableId(items) {
 export function TreeList({
   items,
   density = 'balanced',
+  variant = 'lineGuides',
   header,
   xstyle,
   className,
@@ -199,6 +200,7 @@ export function TreeList({
         isExpanded: isExpanded,
         onToggle: handleToggle,
         density: density,
+        variant: variant,
         renderedChildren: renderedChildren,
         posInSet: index + 1,
         setSize: items.length,

package/dist/TreeList/TreeListBranches.d.ts

@@ -6,6 +6,11 @@ interface TreeListBranchesProps {
 /**
  * Renders vertical lines showing parent-child relationships in the tree.
  * Positioned in a full-height container to span the entire item including children.
+ *
+ * The line element carries the stable `astryx-tree-list-guide` theme target so a
+ * theme can recolor or hide the connectors via `defineTheme` (e.g.
+ * `backgroundColor` or `display: 'none'`) instead of hiding the built-in guides
+ * and reimplementing them.
  */
 export declare function TreeListBranches({ ancestorsIsLast, isLast: _isLast, nestedLevel, }: TreeListBranchesProps): import("react").JSX.Element;
 export declare namespace TreeListBranches {

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

@@ -1 +1 @@
-{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAsDA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EAAE,OAAO,EACf,WAAW,GACZ,EAAE,qBAAqB,+BAsCvB;yBA1Ce,gBAAgB"}
+{"version":3,"file":"TreeListBranches.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListBranches.tsx"],"names":[],"mappings":"AAuDA,UAAU,qBAAqB;IAC7B,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAMD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,MAAM,EAAE,OAAO,EACf,WAAW,GACZ,EAAE,qBAAqB,+BA8CvB;yBAlDe,gBAAgB"}

package/dist/TreeList/TreeListBranches.js

@@ -16,6 +16,7 @@ import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LINE_WIDTH = 1;
 
@@ -38,6 +39,11 @@ const LEVEL_INDENT = spacingVars['--spacing-4'];
 /**
  * Renders vertical lines showing parent-child relationships in the tree.
  * Positioned in a full-height container to span the entire item including children.
+ *
+ * The line element carries the stable `astryx-tree-list-guide` theme target so a
+ * theme can recolor or hide the connectors via `defineTheme` (e.g.
+ * `backgroundColor` or `display: 'none'`) instead of hiding the built-in guides
+ * and reimplementing them.
  */
 export function TreeListBranches({
   ancestorsIsLast,
@@ -60,9 +66,9 @@ export function TreeListBranches({
             }
           }),
           children: /*#__PURE__*/_jsx("div", {
-            ...{
+            ...mergeProps(themeProps('tree-list-guide'), {
               className: "x1nj7uno xu96u03 x1bpp3o7 x10l6tqk x3m8u43 x1i1rx1s x7njt3n xs02d24"
-            }
+            })
           })
         }, level)
       );
@@ -75,9 +81,9 @@ export function TreeListBranches({
         }
       }),
       children: /*#__PURE__*/_jsx("div", {
-        ...{
+        ...mergeProps(themeProps('tree-list-guide'), {
           className: "x1nj7uno xu96u03 x1bpp3o7 x10l6tqk x3m8u43 x1i1rx1s x7njt3n xs02d24"
-        }
+        })
       })
     })]
   });

package/dist/TreeList/TreeListItem.d.ts

@@ -10,7 +10,7 @@
  * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { TreeListDensity } from './TreeListTypes';
+import type { TreeListDensity, TreeListVariant } from './TreeListTypes';
 export interface TreeListItemInternalProps {
     id: string;
     label: React.ReactNode;
@@ -29,6 +29,12 @@ export interface TreeListItemInternalProps {
     isExpanded: boolean;
     onToggle?: (id: string) => void;
     density: TreeListDensity;
+    /**
+     * Guide-line visual treatment. `noGuides` suppresses the connector lines;
+     * indentation is unaffected (it lives on the row's `marginLeft`, not the
+     * guide element).
+     */
+    variant: TreeListVariant;
     /** Pre-rendered children subtree (rendered by the parent recursion) */
     renderedChildren?: ReactNode;
     /** 1-based position of this item among its siblings (aria-posinset). */
@@ -42,7 +48,7 @@ export interface TreeListItemInternalProps {
      */
     isTabbable: boolean;
 }
-export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
+export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, variant, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
 export declare namespace TreeListItem {
     var displayName: string;
 }

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,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA8NtE,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;;;;OAIG;IACH,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,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAgO3B;yBAvPe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -134,6 +134,7 @@ export function TreeListItem({
   isExpanded,
   onToggle,
   density,
+  variant,
   renderedChildren,
   posInSet,
   setSize,
@@ -171,9 +172,18 @@ export function TreeListItem({
   const labelAndDescription = /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("span", {
       id: labelId,
-      ...{
+      ...mergeProps(
+      // Stable theme target for the item's label text. The label carries no
+      // themeable handle today, so a theme can only reach it through a
+      // fragile structural selector (a content button's first span). This
+      // adds an `astryx-tree-list-item-label` class and reflects the row's
+      // `selected` state so a theme can, e.g., bold just the selected
+      // item's label via `defineTheme`.
+      themeProps('tree-list-item-label', {
+        selected: isSelected ? 'selected' : null
+      }), {
         className: "x1tgivj0"
-      },
+      }),
       children: label
     }), description != null && /*#__PURE__*/_jsx("span", {
       id: descriptionId,
@@ -213,17 +223,27 @@ export function TreeListItem({
     ,
     tabIndex: -1,
     onClick: handleToggle,
-    ...{
+    ...mergeProps(
+    // Stable theme target for the expand/collapse control. `data-tree-toggle`
+    // stays as the functional activation hook; this adds a themeable
+    // `astryx-tree-list-chevron` class and reflects the open/closed state so
+    // a theme can restyle the toggle (and each state) without a fragile
+    // `[data-tree-toggle]` selector.
+    themeProps('tree-list-chevron', {
+      state: isExpanded ? 'expanded' : 'collapsed'
+    }), {
       className: "x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk xv9yike xx3sua9 x11g1kdw xmequkd"
-    },
+    }),
     children: chevronIcon
   }) :
   /*#__PURE__*/
   // Non-interactive chevron only when toggling is not wired up at all
   _jsx("span", {
-    ...{
+    ...mergeProps(themeProps('tree-list-chevron', {
+      state: isExpanded ? 'expanded' : 'collapsed'
+    }), {
       className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk x1717udv xv9yike xx3sua9 x11g1kdw xmequkd"
-    },
+    }),
     children: chevronIcon
   }) : null;
   const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
@@ -291,7 +311,7 @@ export function TreeListItem({
     ...{
       className: "x3ct3a4 x1ghz6dp x1717udv x1n2onr6 xh8yej3 x1a2a7pz x1hb5tod xtoutpx x1f8er9e x1aefuf3"
     },
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [variant !== 'noGuides' && /*#__PURE__*/_jsx("div", {
       ...{
         className: "x12gdq22"
       },

package/dist/TreeList/TreeListTypes.d.ts

@@ -1,7 +1,7 @@
 /**
  * @file TreeListTypes.ts
  * @input Uses React types
- * @output Exports TreeListItemData, TreeListDensity types
+ * @output Exports TreeListItemData, TreeListDensity, TreeListVariant types
  * @position Type definitions; consumed by TreeList.tsx, TreeListItem.tsx, index.ts
  *
  * SYNC: When modified, update these files to stay in sync:
@@ -11,6 +11,30 @@
 import type { ReactNode } from 'react';
 /** Spacing density for tree list items. */
 export type TreeListDensity = 'compact' | 'balanced' | 'spacious';
+/**
+ * Extensible variant map for TreeList.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/TreeList' {
+ *   interface TreeListVariantMap {
+ *     'dotted': true;
+ *   }
+ * }
+ * ```
+ */
+export interface TreeListVariantMap {
+    lineGuides: true;
+    noGuides: true;
+}
+/**
+ * Visual treatment of the hierarchy guide (connector) lines. Extensible via
+ * module augmentation of TreeListVariantMap.
+ * - `lineGuides`: connector lines between parent and child rows (default)
+ * - `noGuides`: no connector lines; indentation alone conveys nesting
+ */
+export type TreeListVariant = keyof TreeListVariantMap;
 /** Recursive item configuration for TreeList. */
 export interface TreeListItemData {
     /** Unique identifier for the item. Used as React key and for expansion tracking. */

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

@@ -1 +1 @@
-{"version":3,"file":"TreeListTypes.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAElE,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IAEX,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IAEjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"TreeListTypes.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListTypes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAElE;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,IAAI,CAAC;IACjB,QAAQ,EAAE,IAAI,CAAC;CAChB;AAED;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IAEX,uCAAuC;IACvC,KAAK,EAAE,SAAS,CAAC;IAEjB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,kEAAkE;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE9B,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,uFAAuF;IACvF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}