@astryxdesign/core 0.3.0 → 0.4.0

package/dist/TreeList/TreeListBranches.js

@@ -49,7 +49,7 @@ const LEVEL_INDENT = 'var(--tree-list-indent)';
  */
 export function TreeListBranches({
   ancestorsIsLast,
-  isLast: _isLast,
+  isLast,
   nestedLevel
 }) {
   return /*#__PURE__*/_jsxs(_Fragment, {
@@ -83,9 +83,19 @@ export function TreeListBranches({
         }
       }),
       children: /*#__PURE__*/_jsx("div", {
-        ...mergeProps(themeProps('tree-list-guide'), {
-          className: "x1nj7uno x1o0tod x1bpp3o7 x10l6tqk xtijo5x x1i1rx1s x7njt3n xs02d24"
-        })
+        ...mergeProps(themeProps('tree-list-guide'), // The last item in a group has no sibling below, so its connector
+        // is clamped to the row box's bottom edge (verticalLast) instead
+        // of bridging into the inter-row gap — no overhang into empty
+        // space. Every other row bridges the gap (verticalFull) so the
+        // line stays continuous down to the next sibling.
+        {
+          0: {
+            className: "x1nj7uno x1o0tod x1bpp3o7 x10l6tqk xtijo5x x1i1rx1s x7njt3n xs02d24"
+          },
+          1: {
+            className: "x1nj7uno x1o0tod x1bpp3o7 x10l6tqk xtijo5x x1i1rx1s x7njt3n xuk38ov"
+          }
+        }[!!isLast << 0])
       })
     })]
   });

package/dist/TreeList/TreeListItem.d.ts

@@ -23,6 +23,16 @@ export interface TreeListItemInternalProps {
     isDisabled?: boolean;
     isSelected?: boolean;
     hasChildren: boolean;
+    /**
+     * Whether the tree contains at least one expandable item anywhere (i.e. a
+     * caret exists somewhere to align labels under). A leaf reserves the chevron
+     * column — the extra offset that lines its label up past an expandable
+     * ancestor/sibling's caret — whenever this is true, so it stays indented
+     * beyond its parent's label. Only a fully flat tree (no expandable items at
+     * all) has no caret to align under, so its rows sit flush (no chevron-column
+     * offset). Computed once for the whole tree by TreeList.
+     */
+    hasExpandableItems: boolean;
     nestedLevel: number;
     isLast: boolean;
     ancestorsIsLast: ReadonlyArray<boolean>;
@@ -48,7 +58,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, variant, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
+export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, hasExpandableItems, 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,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAyOtE,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,+BA4O3B;yBAnQe,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;AAerD,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAmPtE,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;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,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,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA2P3B;yBAnRe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -17,8 +17,9 @@ import { useId, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, durationVars, easeVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { useIcon } from "../Icon/index.js";
-import { mergeProps, rtlStyles } from "../utils/index.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
+import { Icon } from "../Icon/index.js";
+import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { TreeListBranches } from "./TreeListBranches.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -29,13 +30,21 @@ 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",
     kGNEyG: "x6s0dn4",
     kOIVth: "x1txdalj",
     kg3NbH: "xf314gf",
-    kI3sdo: "x1a2a7pz",
     kVQacm: "xb3r6kr",
     kVAEAm: "x1n2onr6",
     kB7OPa: "x9f619",
@@ -51,11 +60,6 @@ const styles = {
     kKwaWg: "x1ilzqfv xq8i9tn",
     $$css: true
   },
-  focusVisibleOutline: {
-    kI3sdo: "x11h0toi x1irc7jg",
-    kInvED: "x1g710d4 xdjuwb3",
-    $$css: true
-  },
   disabled: {
     kkrTdU: "x1h6gzvc",
     kSiTet: "xbyyjgo",
@@ -69,6 +73,24 @@ const styles = {
   description: {
     kMwMTN: "xv1l7n4",
     $$css: true
+  },
+  chevronSvg: {
+    k1xSpc: "x78zum5",
+    kzqmXN: "x12xnipv",
+    kZKoxP: "x6b6gus",
+    kGuDYH: "xho7bvi",
+    k1ekBW: "x11xpdln",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  chevronExpanded: {
+    k3aq6I: "x1iffjtl x1nxqau",
+    $$css: true
+  },
+  chevronCollapsed: {
+    k3aq6I: "x7p49u4 xaafvuh",
+    $$css: true
   }
 };
 const densityStyles = {
@@ -133,6 +155,7 @@ export function TreeListItem({
   isDisabled = false,
   isSelected = false,
   hasChildren,
+  hasExpandableItems,
   nestedLevel,
   isLast,
   ancestorsIsLast,
@@ -146,7 +169,6 @@ export function TreeListItem({
   isTabbable
 }) {
   const t = useTranslator();
-  const chevronRightIcon = useIcon('chevronRight');
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
@@ -177,13 +199,17 @@ export function TreeListItem({
 
   // Per-level indent distance. The per-level step is the public, themeable
   // `--tree-list-indent` lever (default `--spacing-4`, set on the tree-list
-  // root). Leaves add a fixed chevron-column offset (chevron width + gap) so
-  // their labels line up with sibling parents' labels; that offset is tied to
+  // root). A leaf adds a fixed chevron-column offset (chevron width + gap) so
+  // its label lines up past an expandable ancestor/sibling's caret — but ONLY
+  // when the tree actually contains an expandable item somewhere. In a fully
+  // flat tree there is no caret to align under, so the offset is pointless and
+  // every row sits flush, like a parent at that level. That offset is tied to
   // the chevron's own dimensions, not the indent step, so it does not scale
   // with the lever. Published as the private `--_tree-indent` and consumed by
   // `contentWrapper`'s stylesheet `margin-inline-start` (kept out of the inline
   // style so the theme layer can override it — see #4308).
-  const indentDistance = hasChildren ? `calc(${nestedLevel} * var(--tree-list-indent))` : `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})`;
+  const reservesChevronColumn = !hasChildren && hasExpandableItems;
+  const indentDistance = reservesChevronColumn ? `calc(${nestedLevel} * var(--tree-list-indent) + ${spacingVars['--spacing-4']} + ${spacingVars['--spacing-2']})` : `calc(${nestedLevel} * var(--tree-list-indent))`;
   const indentStyle = {
     '--_tree-indent': indentDistance
   };
@@ -209,19 +235,22 @@ export function TreeListItem({
       children: description
     })]
   });
-  const chevronIcon = /*#__PURE__*/_jsx("span", {
-    ...stylex.props(rtlStyles.mirror),
-    children: /*#__PURE__*/_jsx("span", {
-      ...{
-        0: {
-          className: "x78zum5 x11xpdln xuedmi6 xlr8y92 x7p49u4"
-        },
-        1: {
-          className: "x78zum5 x11xpdln xuedmi6 xlr8y92 x1iffjtl"
-        }
-      }[!!isExpanded << 0],
-      children: chevronRightIcon
-    })
+
+  // <Icon> renders the glyph's span itself — carrying the pre-existing
+  // astryx-icon target — so the rotation rides on that same element instead of
+  // an extra wrapper: a theme can still restyle the mark and its open/closed
+  // transform through one selector.
+  const chevronIcon = /*#__PURE__*/_jsx(Icon, {
+    icon: "chevronRight"
+    // Nearest size to the 16px chevron column; `chevronSvg` re-pins the exact
+    // box because the column is spacing-token-sized, not rem-sized.
+    ,
+    size: "sm"
+    // The button/container owns the chevron color (--color-icon-secondary);
+    // inheriting keeps that as the single source.
+    ,
+    color: "inherit",
+    xstyle: [styles.chevronSvg, isExpanded ? styles.chevronExpanded : styles.chevronCollapsed]
   });
   const chevron = hasChildren ? handleToggle != null ?
   /*#__PURE__*/
@@ -329,9 +358,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"
-    },
+    ...focusOutlineProps.publishFocusVisibleVars(styles.wrapper),
     children: [variant !== 'noGuides' && /*#__PURE__*/_jsx("div", {
       ...{
         className: "x12gdq22"
@@ -343,14 +370,14 @@ export function TreeListItem({
       })
     }), /*#__PURE__*/_jsx("div", {
       ...{
-        className: "x1n2onr6"
+        className: "x1n2onr6 xwo4yc8"
       },
       children: /*#__PURE__*/_jsx("div", {
         ...mergeProps(themeProps('tree-list-item', {
           density,
           selected: isSelected ? 'selected' : null,
           disabled: isDisabled ? 'disabled' : null
-        }), stylex.props(styles.contentWrapper, densityStyles[density], (isInteractive || hasChildren && onClick == null) && styles.interactive, (isInteractive || hasChildren && onClick == null) && styles.focusVisibleOutline, isDisabled && styles.disabled, isSelected && styles.selected)),
+        }), isInteractive || hasChildren && onClick == null ? focusOutlineProps.focusWithinOrPublished(styles.contentWrapper, densityStyles[density], styles.interactive, isDisabled && styles.disabled, isSelected && styles.selected) : stylex.props(styles.contentWrapper, densityStyles[density], isDisabled && styles.disabled, isSelected && styles.selected)),
         style: indentStyle,
         onClick: handleClick,
         children: innerContent

package/dist/Typeahead/BaseTypeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAcnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAQ1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAkiBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAQ1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;OAOG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAmGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAkjBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}

package/dist/Typeahead/BaseTypeahead.js

@@ -20,6 +20,7 @@ import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
+import { isImeKeyEvent } from "../hooks/useFocusTrap.js";
 import { TypeaheadItem } from "./TypeaheadItem.js";
 import { Icon } from "../Icon/index.js";
 import "../theme/tokens.stylex.js";
@@ -61,11 +62,6 @@ const styles = {
     k7Eaqz: "xrzjruh",
     $$css: true
   },
-  popoverGap: {
-    keoZOQ: "xcsaf9d",
-    k1K539: "x14cgwvg",
-    $$css: true
-  },
   item: {
     kB7OPa: "x9f619",
     k1xSpc: "x78zum5",
@@ -405,6 +401,17 @@ export const BaseTypeahead = function BaseTypeahead({
     if (e.defaultPrevented) {
       return;
     }
+
+    // An IME candidate window uses Enter to commit the composition and
+    // Escape/ArrowUp/ArrowDown/Home/End to navigate its own candidates.
+    // Without this guard, a composing Enter both fires handleSelect AND
+    // clears the input via handleSelect's setQuery(''), so the IME's
+    // subsequent compositionend then writes the still-pending syllable
+    // into the freshly-cleared field -- producing a second, spurious
+    // selection on the next real Enter.
+    if (isImeKeyEvent(e.nativeEvent)) {
+      return;
+    }
     if (!popover.isOpen) {
       if (e.key === 'ArrowDown' && (hasEntriesOnFocus || query.length > 0)) {
         e.preventDefault();
@@ -542,9 +549,9 @@ export const BaseTypeahead = function BaseTypeahead({
         className: "x9f619 xuyqlj2 x1odjw0f x9epnlk"
       }),
       children: results.length === 0 && hasSearched ? /*#__PURE__*/_jsx("div", {
-        ...{
+        ...mergeProps(themeProps('typeahead-empty-state'), {
           className: "x1b2ylru x2b8uid x141an7d xv1l7n4"
-        },
+        }),
         children: emptySearchResultsText
       }) : results.map((item, index) => {
         const itemKey = getKey(item.id, index);
@@ -574,7 +581,8 @@ export const BaseTypeahead = function BaseTypeahead({
     }), {
       placement: 'below',
       alignment: 'start',
-      xstyle: [styles.popover, styles.popoverGap]
+      offset: spacingVars['--spacing-1'],
+      xstyle: styles.popover
     })]
   });
 };