@astryxdesign/core 0.4.7-canary.8a9c040 → 0.4.7-canary.98ea5ba

package/dist/Chat/ChatTokenizedText.d.ts

@@ -10,6 +10,8 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts
+ * - /packages/core/src/Chat/ChatComposerInput.tsx (token alignment must match,
+ *   or a token moves when the message is sent)
  * - /packages/cli/assets/templates/blocks/components/ChatTokenizedText/ (block examples)
  */
 import React from 'react';

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

@@ -1 +1 @@
-{"version":3,"file":"ChatTokenizedText.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTokenizedText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,eAAe,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC9B;AAoBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,sBAAsB,qBA+BxB;yBAvCe,iBAAiB"}
+{"version":3,"file":"ChatTokenizedText.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTokenizedText.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAuB,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqB5C,MAAM,WAAW,sBAAuB,SAAQ,SAAS,CAAC,eAAe,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;;;;OAgBG;IACH,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC9B;AAoBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,sBAAsB,qBA+BxB;yBAvCe,iBAAiB"}

package/dist/Chat/ChatTokenizedText.js

@@ -14,6 +14,8 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Chat/index.ts
+ * - /packages/core/src/Chat/ChatComposerInput.tsx (token alignment must match,
+ *   or a token moves when the message is sent)
  * - /packages/cli/assets/templates/blocks/components/ChatTokenizedText/ (block examples)
  */
 import React from 'react';
@@ -106,12 +108,15 @@ function renderTokens(text, tokens) {
     const matched = match[0];
     const token = tokenMap.get(matched);
     if (token) {
-      parts.push(isCustomToken(token) ? /*#__PURE__*/_jsx("span", {
-        children: token.render()
-      }, `${matched}-${match.index}`) : /*#__PURE__*/_jsx(Badge, {
-        label: token.label,
-        variant: token.variant,
-        icon: token.icon
+      parts.push(/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x3nfvp2 xxymvpz"
+        },
+        children: isCustomToken(token) ? token.render() : /*#__PURE__*/_jsx(Badge, {
+          label: token.label,
+          variant: token.variant,
+          icon: token.icon
+        })
       }, `${matched}-${match.index}`));
     }
     lastIndex = match.index + matched.length;

package/dist/PowerSearch/PowerSearch.d.ts.map

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

package/dist/PowerSearch/PowerSearch.js

@@ -64,7 +64,7 @@ const OPERATOR_VALUE_TYPE_TO_ICON = {
 const popoverLayerStyles = {
   layer: {
     kzqmXN: "x1xgy17j",
-    k7Eaqz: "x13o0s5z",
+    k7Eaqz: "x15mybvi",
     $$css: true
   }
 };

package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchEditPopover.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchEditPopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAC;AAY/E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EAGd,MAAM,SAAS,CAAC;AAgDjB,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,cAAc,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,6EAA6E;IAC7E,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA8eD,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,MAAM,EAAE,aAAa,EACrB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,eAAe,EAAE,wBAAwB,EACzC,UAAkB,GACnB,EAAE,2BAA2B,qBAwR7B"}
+{"version":3,"file":"PowerSearchEditPopover.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchEditPopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAA0D,MAAM,OAAO,CAAC;AAY/E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EAGd,MAAM,SAAS,CAAC;AA+DjB,MAAM,WAAW,2BAA2B;IAC1C,MAAM,EAAE,cAAc,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,aAAa,CAAC;IACtB,qDAAqD;IACrD,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,6EAA6E;IAC7E,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnD,wDAAwD;IACxD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA8eD,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,MAAM,EAAE,aAAa,EACrB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,eAAe,EAAE,wBAAwB,EACzC,UAAkB,GACnB,EAAE,2BAA2B,qBAwR7B"}

package/dist/PowerSearch/PowerSearchEditPopover.js

@@ -25,6 +25,18 @@ import { spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { PowerSearchValueEditor } from "./PowerSearchValueEditor.js";
 import { resolveOperatorLabel } from "./resolveOperatorLabel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Below the popover layer's 400px floor (see popoverLayerStyles in
+// PowerSearch.tsx) the chip rows collapse from one line to wrapped lines.
+// A container query, not a viewport one, so the rows track the width the
+// popover actually got (#4761).
+const CHIP_ROW_COLLAPSE = '@container (max-width: 399px)';
+const styles = {
+  chipRow: {
+    kwnvtZ: "xozqiw3 x1alyx8p",
+    $$css: true
+  }
+};
+
 // =============================================================================
 // Editable filter state for recursive nesting
 // =============================================================================
@@ -178,9 +190,10 @@ function NestedSubFilterRow({
   return /*#__PURE__*/_jsxs(HStack, {
     gap: 2,
     vAlign: "center",
+    xstyle: styles.chipRow,
     children: [/*#__PURE__*/_jsx("div", {
       ...{
-        className: "x2lah0s x1oysuqx"
+        className: "x2lah0s x1oysuqx x193iq5w"
       },
       children: /*#__PURE__*/_jsx(Selector, {
         label: t('@astryx.powersearch.editor.field'),
@@ -193,7 +206,7 @@ function NestedSubFilterRow({
       })
     }), operatorOptions.length > 0 && /*#__PURE__*/_jsx("div", {
       ...{
-        className: "x2lah0s xzjbwwf"
+        className: "x2lah0s xzjbwwf x193iq5w"
       },
       children: /*#__PURE__*/_jsx(Selector, {
         label: t('@astryx.powersearch.editor.operator'),
@@ -371,7 +384,7 @@ function NestedEditor({
     },
     children: operatorOptions.length > 1 ? /*#__PURE__*/_jsx("div", {
       ...{
-        className: "x1iyjqo2 x2lah0s"
+        className: "x1iyjqo2 x2lah0s x193iq5w"
       },
       children: /*#__PURE__*/_jsx(Selector, {
         label: t('@astryx.powersearch.editor.groupOperator'),
@@ -528,7 +541,7 @@ export function PowerSearchEditPopover({
   if (isNestedType) {
     return /*#__PURE__*/_jsxs("div", {
       ...{
-        className: "xb3r6kr"
+        className: "xb3r6kr x12h1iku"
       },
       onKeyDown: handleKeyDown,
       children: [/*#__PURE__*/_jsx("div", {
@@ -595,7 +608,7 @@ export function PowerSearchEditPopover({
   }
   return /*#__PURE__*/_jsxs("div", {
     ...{
-      className: "xb3r6kr"
+      className: "xb3r6kr x12h1iku"
     },
     onKeyDown: handleKeyDown,
     children: [/*#__PURE__*/_jsx("div", {
@@ -604,6 +617,7 @@ export function PowerSearchEditPopover({
       },
       children: /*#__PURE__*/_jsxs(HStack, {
         gap: 2,
+        xstyle: styles.chipRow,
         children: [/*#__PURE__*/_jsx("div", {
           ...{
             className: "x1iyjqo2 xs83m0k xeuugli"
@@ -619,7 +633,7 @@ export function PowerSearchEditPopover({
           })
         }), showOperatorSelector && operatorOptions.length > 0 && /*#__PURE__*/_jsx("div", {
           ...{
-            className: "x1iyjqo2 x2lah0s"
+            className: "x1iyjqo2 x2lah0s x193iq5w"
           },
           children: /*#__PURE__*/_jsx(Selector, {
             label: t('@astryx.powersearch.editor.operator'),

package/dist/TabList/TabList.d.ts

@@ -1,10 +1,12 @@
 /**
  * @file TabList.tsx
- * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint
- * @output Exports TabList component and TabListProps type
+ * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint,
+ *   useScrollOverflow, Icon
+ * @output Exports TabList component, TabListProps and TabListOverflow types
  * @position Nav wrapper; provides TabListContext to Tab and TabMenu children.
  *   Owns roving-tabindex keyboard navigation (Arrow/Home/End) across the tab
- *   strip via the shared useListFocus hook so it is a single Tab stop.
+ *   strip via the shared useListFocus hook so it is a single Tab stop, and
+ *   owns horizontal scrolling when the tabs are wider than the strip.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TabList/TabList.doc.mjs
@@ -16,6 +18,16 @@ import React, { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps';
 import type { TabListSize } from './TabListContext';
 import { EDGE_COMP_ATTR } from '../Layout/edgeCompensation.stylex';
+/**
+ * How a strip narrower than its tabs behaves.
+ *
+ * - `'auto'` — the component picks the strategy. Today that is always
+ *   `'scroll'`.
+ * - `'scroll'` — the tabs scroll horizontally. Every tab stays a tab.
+ * - `'visible'` — no overflow handling: tabs keep their intrinsic widths and
+ *   spill out of the strip, as they did before overflow existed.
+ */
+export type TabListOverflow = 'auto' | 'scroll' | 'visible';
 export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
     ref?: React.Ref<HTMLElement>;
     /**
@@ -44,6 +56,18 @@ export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
      * @default false
      */
     hasDivider?: boolean;
+    /**
+     * What happens when the tabs are wider than the strip.
+     *
+     * `'auto'` lets the component choose; today it always scrolls. `'scroll'`
+     * scrolls the tabs horizontally, with edge fades and — for pointers that
+     * can hover — arrow affordances. `'visible'` turns overflow handling off and
+     * lets the tabs spill out of the strip.
+     *
+     * The selected tab is always scrolled back into view.
+     * @default 'auto'
+     */
+    overflow?: TabListOverflow;
     /**
      * Tab and TabMenu children.
      */
@@ -65,7 +89,7 @@ export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
  * </TabList>
  * ```
  */
-export declare function TabList({ ref, value, onChange, size: sizeProp, layout, hasDivider, xstyle, className, style, children, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, 'aria-label': ariaLabelFromProps, 'aria-orientation': _ariaOrientation, [EDGE_COMP_ATTR]: _edgeCompAttr, ...restProps }: TabListProps): React.JSX.Element;
+export declare function TabList({ ref, value, onChange, size: sizeProp, layout, hasDivider, overflow, xstyle, className, style, children, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, 'aria-label': ariaLabelFromProps, 'aria-orientation': _ariaOrientation, [EDGE_COMP_ATTR]: _edgeCompAttr, ...restProps }: TabListProps): React.JSX.Element;
 export declare namespace TabList {
     var displayName: string;
 }

package/dist/TabList/TabList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../src/TabList/TabList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGlE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAKlD,OAAO,EAAC,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAYjE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA4BD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,gBAAgB,EACpC,CAAC,cAAc,CAAC,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,YAAY,qBAkGd;yBApHe,OAAO"}
+{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../src/TabList/TabList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAQlD,OAAO,EAAC,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAqBjE;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC5E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAyLD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,QAAiB,EACjB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,kBAAkB,EAChC,kBAAkB,EAAE,gBAAgB,EACpC,CAAC,cAAc,CAAC,EAAE,aAAa,EAC/B,GAAG,SAAS,EACb,EAAE,YAAY,qBA0Rd;yBA7Se,OAAO"}

package/dist/TabList/TabList.js

@@ -4,11 +4,13 @@
 
 /**
  * @file TabList.tsx
- * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint
- * @output Exports TabList component and TabListProps type
+ * @input Uses React, StyleX, TabListContext, useListFocus, useKeyboardHint,
+ *   useScrollOverflow, Icon
+ * @output Exports TabList component, TabListProps and TabListOverflow types
  * @position Nav wrapper; provides TabListContext to Tab and TabMenu children.
  *   Owns roving-tabindex keyboard navigation (Arrow/Home/End) across the tab
- *   strip via the shared useListFocus hook so it is a single Tab stop.
+ *   strip via the shared useListFocus hook so it is a single Tab stop, and
+ *   owns horizontal scrolling when the tabs are wider than the strip.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TabList/TabList.doc.mjs
@@ -16,17 +18,22 @@
  * - /packages/core/src/TabList/TabList.test.tsx
  * - /packages/cli/assets/templates/blocks/components/TabList/ (showcase blocks)
  */
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { borderVars, colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { borderVars, colorVars, durationVars, easeVars, focusVars, radiusVars, shadowVars, sizeVars, spacingVars } from "../theme/tokens.stylex.js";
 import { TabListContext } from "./TabListContext.js";
 import { useSize } from "../SizeContext/SizeContext.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, rtlStyles } from "../utils/index.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useKeyboardHint } from "../hooks/useKeyboardHint.js";
+import { useScrollOverflow } from "../hooks/useScrollOverflow.js";
+import { isRtlElement } from "../hooks/isRtlElement.js";
+import { Icon } from "../Icon/index.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
+import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
+import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { useTranslator } from "../i18n/index.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 /**
@@ -34,8 +41,72 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
  * (`[data-tab-value]`) and every TabMenu trigger (`[data-tab-menu]`),
  * in DOM order. Disabled stops are filtered out by the handler.
  */
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TAB_STOP_SELECTOR = '[data-tab-value],[data-tab-menu]';
+function preventFocus(e) {
+  e.preventDefault();
+}
+
+/** Fraction of the visible strip an arrow press scrolls. */
+const SCROLL_PAGE_RATIO = 0.8;
+
+/**
+ * How a strip narrower than its tabs behaves.
+ *
+ * - `'auto'` — the component picks the strategy. Today that is always
+ *   `'scroll'`.
+ * - `'scroll'` — the tabs scroll horizontally. Every tab stays a tab.
+ * - `'visible'` — no overflow handling: tabs keep their intrinsic widths and
+ *   spill out of the strip, as they did before overflow existed.
+ */
+
+/**
+ * A scroll container clips at its padding box, and two things a tab paints sit
+ * outside its own box: the focus ring (offset + width) and the selected
+ * indicator, which `--_tab-indicator-bottom` pushes further down when a
+ * divider rail is reserved. The strip pads by that much and takes the padding
+ * straight back off with a negative margin, so nothing is clipped and the tabs
+ * stay exactly where they were.
+ *
+ * A bleed is not free, though. The padding is real geometry: the strip's
+ * border box sticks out of the TabList's, and any ancestor that scrolls counts
+ * that as something to scroll to. So the ring's share of the bleed is taken
+ * only while a ring is actually drawn inside the strip -- the same
+ * `:has(:focus-visible)` condition that draws it -- and at rest the strip is
+ * exactly as wide and as tall as the TabList, as it was before the strip could
+ * scroll. The indicator's share is always taken, because the indicator is
+ * always drawn.
+ *
+ * Turning the bleed on moves nothing: padding and negative margin cancel, so
+ * the border box grows outwards and the content stays put.
+ */
+const RING_BLEED = `calc(${focusVars['--focus-outline-width']} + ${focusVars['--focus-outline-offset']})`;
+const BLEED_VAR = '--_tab-strip-bleed';
+const BLEED = `var(${BLEED_VAR})`;
+const INDICATOR_BLEED = 'calc(-1 * var(--_tab-indicator-bottom, -1px))';
+const BLOCK_END_BLEED = `max(${BLEED}, ${INDICATOR_BLEED})`;
+
+/** How far the edge fade runs; wide enough to sit under an arrow. */
+const FADE_WIDTH = spacingVars['--spacing-8'];
+
+/**
+ * Where the fade turns fully opaque, and — the same distance, for the same
+ * reason — how far a revealed stop is kept clear of the edge. Declared as
+ * scroll-padding so the browser's own focus scrolling uses it too, and read
+ * back from the computed style so the arithmetic below has one source of
+ * truth with the CSS.
+ */
+const SCROLL_EDGE_INSET = `calc(${BLEED} + ${FADE_WIDTH})`;
+
+/**
+ * The fade reaches transparent at the strip's *own* edge, not at the bleed
+ * edge — otherwise the scroll container paints tabs past the TabList's box,
+ * past a divider rail, and past the scroll arrow that caps that edge. Masking
+ * the bleed costs nothing: only a faded edge is masked, and a stop at a faded
+ * edge never holds focus, so the bleed is still there when the ring needs it.
+ */
+const FADE_FROM_START = `linear-gradient(to right, transparent ${BLEED}, black ${SCROLL_EDGE_INSET})`;
+const FADE_FROM_END = `linear-gradient(to left, transparent ${BLEED}, black ${SCROLL_EDGE_INSET})`;
 const styles = {
   nav: {
     k1xSpc: "x78zum5",
@@ -43,6 +114,7 @@ const styles = {
     kOIVth: "x1lsbc85",
     ks0D6T: "x193iq5w",
     k7Eaqz: "xeuugli",
+    kVAEAm: "x1n2onr6",
     $$css: true
   },
   fill: {
@@ -56,6 +128,89 @@ const styles = {
     kGO01o: "xy143xn",
     "--_tab-indicator-bottom": "xficto1",
     $$css: true
+  },
+  strip: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x1qjc9v5",
+    kOIVth: "x14kbac9",
+    kzQI83: "x1iyjqo2",
+    kmuXW: "xs83m0k",
+    k7Eaqz: "xeuugli",
+    kSGwAc: "xqcrz7y",
+    $$css: true
+  },
+  stripScroll: {
+    kXHlph: "xw2csxc",
+    kORKVm: "x10wlt62",
+    kvh3hx: "x7p5m3t",
+    katHQp: "x1xif8ns",
+    k5wCbM: "x1rohswg",
+    khEr5k: "xkcv6ua xg83hb1",
+    "--_tab-strip-bleed": "x78b515 x158n88w",
+    kLKAdn: "xlr2r7p",
+    keoZOQ: "xmqyaqf",
+    kGO01o: "xwhchk8",
+    k1K539: "xlgak1e",
+    kg3NbH: "x1kpkw9v",
+    kUOVxO: "xi5l473",
+    kX1K2I: "xw4ya9i",
+    k1ekBW: "x157bb6t",
+    kIyJzY: "x80gvsz x12w9bfk",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  fadeStart: {
+    kX1K2I: "x1hua2o0 x1nwey30",
+    $$css: true
+  },
+  fadeEnd: {
+    kX1K2I: "xoj6v2h x1rxa4r8",
+    $$css: true
+  },
+  fadeBoth: {
+    kX1K2I: "xq05pg6",
+    $$css: true
+  },
+  arrow: {
+    kVAEAm: "x10l6tqk",
+    k87sOh: "x13vifvy",
+    k1xSpc: "x1s85apg xqwu39o",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kaIpWk: "xjspbzw",
+    kWkggS: "x1prclbq",
+    kGVxlE: "x1i5ehqx",
+    kMwMTN: "xv1l7n4 x9o1np9",
+    kkrTdU: "x1ypdohk x16khyan",
+    $$css: true
+  },
+  arrowStart: {
+    kLqNvP: "x1o0tod",
+    $$css: true
+  },
+  arrowEnd: {
+    kt4wiu: "xtijo5x",
+    $$css: true
+  }
+};
+const arrowSizeStyles = {
+  sm: {
+    kzqmXN: "x1fvqzum",
+    kZKoxP: "x6k0iem",
+    $$css: true
+  },
+  md: {
+    kzqmXN: "x805d0l",
+    kZKoxP: "x1ueg155",
+    $$css: true
+  },
+  lg: {
+    kzqmXN: "x1m747yf",
+    kZKoxP: "xssyfek",
+    $$css: true
   }
 };
 
@@ -82,6 +237,7 @@ export function TabList({
   size: sizeProp,
   layout = 'hug',
   hasDivider = false,
+  overflow = 'auto',
   xstyle,
   className,
   style,
@@ -97,6 +253,7 @@ export function TabList({
   const t = useTranslator();
   const ariaLabel = ariaLabelFromProps ?? t('@astryx.tabList.label');
   const size = useSize(sizeProp, 'md');
+  const hasScroll = overflow !== 'visible';
 
   // Roving-tabindex keyboard navigation across the tab strip via the shared
   // hook. `orientation: 'both'` accepts both arrow axes per the WAI-ARIA APG
@@ -127,6 +284,99 @@ export function TabList({
     onFocus: onHintFocus,
     onBlur: onHintBlur
   } = useKeyboardHint();
+  const {
+    scrollRef,
+    overflowStart,
+    overflowEnd
+  } = useScrollOverflow();
+  const stripRef = useRef(null);
+  const attachStrip = useCallback(el => {
+    stripRef.current = el;
+    scrollRef(hasScroll ? el : null);
+  }, [hasScroll, scrollRef]);
+  const revealStop = useCallback(stop => {
+    const strip = stripRef.current;
+    if (!hasScroll || !strip || !stop) {
+      return;
+    }
+    const stripBox = strip.getBoundingClientRect();
+    const stopBox = stop.getBoundingClientRect();
+    const inset = parseFloat(getComputedStyle(strip).scrollPaddingLeft) || 0;
+    const pastEnd = stopBox.right - (stripBox.right - inset);
+    const pastStart = stopBox.left - (stripBox.left + inset);
+    // A stop wider than the space kept clear cannot be shown whole, so show
+    // its reading start, the way `scrollIntoView({inline: 'nearest'})` does.
+    const tooWide = stopBox.width > stripBox.width - 2 * inset;
+    const delta = tooWide ? isRtlElement(strip) ? pastEnd : pastStart : pastEnd > 0 ? pastEnd : pastStart < 0 ? pastStart : 0;
+    if (delta !== 0) {
+      // Not an animation: the strip has to arrive already showing the right
+      // tab, so this overrides the CSS smooth behaviour arrow presses use.
+      strip.scrollBy({
+        left: delta,
+        behavior: 'instant'
+      });
+    }
+  }, [hasScroll]);
+  const revealSelectedTab = useCallback(() => {
+    const strip = stripRef.current;
+    if (!strip) {
+      return;
+    }
+    revealStop(Array.from(strip.querySelectorAll('[data-tab-value]')).find(el => el.dataset.tabValue === value) ?? null);
+  }, [revealStop, value]);
+
+  // Both reveals below reach the callback through a ref instead of depending
+  // on it: its identity also changes with `overflow`, and that is not a reason
+  // to scroll anything.
+  const revealSelectedTabRef = useRef(revealSelectedTab);
+  useEffect(() => {
+    revealSelectedTabRef.current = revealSelectedTab;
+  }, [revealSelectedTab]);
+
+  // The tab you are on has to be visible. Selection can move without focus —
+  // on mount, or when the host sets `value` itself — and neither scrolls the
+  // strip the way clicking or arrowing to a tab does. The check is what makes
+  // a selection change the trigger, rather than the effect happening to run.
+  const revealedValueRef = useRef(null);
+  useEffect(() => {
+    if (revealedValueRef.current === value) {
+      return;
+    }
+    revealedValueRef.current = value;
+    revealSelectedTabRef.current();
+  }, [value]);
+
+  // ...and it has to stay visible when the strip is what moved. A strip that
+  // fitted at one width can hide the selected tab at a narrower one, and no
+  // prop changes when that happens. This one re-reveals the same selection by
+  // design, which is why the check above sits in the effect rather than in
+  // `revealSelectedTab`.
+  //
+  // The wrapper is observed rather than the strip because the shared observer
+  // keeps one callback per element and `useScrollOverflow` already holds the
+  // strip's.
+  useEffect(() => {
+    const root = listRef.current;
+    if (!hasScroll || !root) {
+      return;
+    }
+    const onResize = () => revealSelectedTabRef.current();
+    observeResize(root, onResize);
+    return () => unobserveResize(root);
+  }, [hasScroll, listRef]);
+  const scrollByPage = useCallback(direction => {
+    const strip = stripRef.current;
+    if (!strip) {
+      return;
+    }
+    // Under RTL the scroll axis is inverted, so flip the physical delta.
+    const rtlSign = isRtlElement(strip) ? -1 : 1;
+    strip.scrollBy({
+      left: rtlSign * direction * strip.clientWidth * SCROLL_PAGE_RATIO
+    });
+  }, []);
+  const scrollToStart = useCallback(() => scrollByPage(-1), [scrollByPage]);
+  const scrollToEnd = useCallback(() => scrollByPage(1), [scrollByPage]);
   const contextValue = useMemo(() => ({
     value,
     onChange,
@@ -148,7 +398,11 @@ export function TabList({
     }
     onHintFocus(e);
     handleFocus(e);
-  }, [onFocusProp, onHintFocus, handleFocus]);
+    // The browser scrolls a focused element into view only when it is
+    // entirely outside the scrollport, so arrowing onto a half-visible stop
+    // leaves it cut off under the fade. Finish the job it started.
+    revealStop(e.target.closest(TAB_STOP_SELECTOR));
+  }, [onFocusProp, onHintFocus, handleFocus, revealStop]);
   const handleRootBlur = useCallback(e => {
     onBlurProp?.(e);
     if (e.defaultPrevented) {
@@ -156,6 +410,7 @@ export function TabList({
     }
     onHintBlur(e);
   }, [onBlurProp, onHintBlur]);
+  const fadeStyle = !hasScroll ? null : overflowStart && overflowEnd ? styles.fadeBoth : overflowStart ? styles.fadeStart : overflowEnd ? styles.fadeEnd : null;
   return /*#__PURE__*/_jsx(TabListContext, {
     value: contextValue,
     children: /*#__PURE__*/_jsxs("nav", {
@@ -169,7 +424,40 @@ export function TabList({
       ...mergeProps(themeProps('tab-list', {
         size
       }), stylex.props(styles.nav, layout === 'fill' && styles.fill, hasDivider && styles.divider, xstyle), className, style),
-      children: [children, hintElement]
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: attachStrip,
+        ...mergeProps(themeProps('tab-strip'), stylex.props(styles.strip, hasScroll && styles.stripScroll, fadeStyle)),
+        children: children
+      }), hasScroll && overflowStart && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-hidden": "true",
+        tabIndex: -1
+        // Nothing hidden from assistive technology should end up holding
+        // focus, and a click would put it here.
+        ,
+        onMouseDown: preventFocus,
+        onClick: scrollToStart,
+        ...mergeProps(themeProps('tab-scroll-button'), focusOutlineProps.focusVisible(styles.arrow, styles.arrowStart, arrowSizeStyles[size])),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronLeft",
+          size: "sm",
+          color: "inherit",
+          xstyle: rtlStyles.mirror
+        })
+      }), hasScroll && overflowEnd && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        onMouseDown: preventFocus,
+        onClick: scrollToEnd,
+        ...mergeProps(themeProps('tab-scroll-button'), focusOutlineProps.focusVisible(styles.arrow, styles.arrowEnd, arrowSizeStyles[size])),
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "chevronRight",
+          size: "sm",
+          color: "inherit",
+          xstyle: rtlStyles.mirror
+        })
+      }), hintElement]
     })
   });
 }

package/dist/TabList/index.d.ts

@@ -7,7 +7,7 @@
  * SYNC: When modified, update this header and /packages/core/src/TabList/TabList.doc.mjs
  */
 export { TabList } from './TabList';
-export type { TabListProps } from './TabList';
+export type { TabListProps, TabListOverflow } from './TabList';
 export { Tab } from './Tab';
 export type { TabProps } from './Tab';
 export { TabMenu } from './TabMenu';

package/dist/TabList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TabList/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAE5C,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,YAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,WAAW,CAAC;AAE3D,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AACnD,YAAY,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TabList/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,eAAe,EAAC,MAAM,WAAW,CAAC;AAE7D,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAC1B,YAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,aAAa,EAAC,MAAM,WAAW,CAAC;AAE3D,OAAO,EAAC,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AACnD,YAAY,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,kBAAkB,CAAC"}

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;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAS1D,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;AAsGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAyjBrB,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;AAS1D,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;AAsGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAikBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}

package/dist/Typeahead/BaseTypeahead.js

@@ -449,6 +449,14 @@ export const BaseTypeahead = function BaseTypeahead({
         e.preventDefault();
         popover.hide();
         break;
+      case 'Tab':
+        // Dismiss here rather than from the blur this press produces:
+        // hiding a top-layer popover during the focusout makes Chrome
+        // abandon the in-flight focus move and drop focus to <body>, so the
+        // user's Tab appears to do nothing. Selector and MultiSelector
+        // already dismiss on this keydown.
+        popover.hide();
+        break;
       case 'Home':
         if (popover.isOpen) {
           e.preventDefault();