@lumx/react 4.19.1-next.0 → 4.20.0-next.1

package/_internal/{BvaFEHZn.js → CcLi-Wuu.js}

@@ -210,12 +210,15 @@ const InfiniteScroll = ({
     const {
       current: element
     } = elementRef;
-    if (!element) {
+    if (!element || !callback) {
       return undefined;
     }
     return setupInfiniteScrollObserver(element, callback, options);
+    // `options?.root` starts as `null` (before the scrollable list's ref attaches) and is
+    // then set to the real element — must be a dep, or the observer gets stuck watching
+    // the wrong root (falling back to the viewport) for the component's whole lifetime.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef.current, callback]);
+  }, [elementRef.current, callback, options?.root]);
   return InfiniteScroll$1({
     ref: elementRef
   });
@@ -259,4 +262,4 @@ const Portal = ({
 };
 
 export { ClickAwayProvider as C, DisabledStateProvider as D, InfiniteScroll as I, Portal as P, PortalProvider as a, useDisabledStateContext as u };
-//# sourceMappingURL=BvaFEHZn.js.map
+//# sourceMappingURL=CcLi-Wuu.js.map

package/_internal/CcLi-Wuu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CcLi-Wuu.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../../lumx-core/src/js/utils/InfiniteScroll/setupInfiniteScrollObserver.ts","../../../lumx-core/src/js/utils/InfiniteScroll/index.tsx","../../src/utils/InfiniteScroll/InfiniteScroll.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target].filter((t): t is HTMLElement => t instanceof Node);\n        const elements = getElements();\n        if (isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { setupClickAway } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const getElements = () => {\n            const refs = childrenRefs.current;\n            if (!refs) return [];\n            return refs.map((ref) => ref?.current).filter(Boolean) as HTMLElement[];\n        };\n        return setupClickAway(getElements, callback);\n    }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","type EventCallback = (evt?: Event) => void;\n\n/**\n * Sets up an IntersectionObserver on the given element.\n * Calls `callback` when at least one observed entry is intersecting.\n * Returns a cleanup function that unobserves the element.\n */\nexport function setupInfiniteScrollObserver(\n    element: Element,\n    callback: EventCallback,\n    options?: IntersectionObserverInit,\n): () => void {\n    const observer = new IntersectionObserver((entries = []) => {\n        const hasIntersection = entries.some((entry) => entry.isIntersecting);\n\n        if (!hasIntersection) {\n            return;\n        }\n\n        callback();\n    }, options);\n\n    observer.observe(element);\n\n    return () => {\n        observer.unobserve(element);\n    };\n}\n","import type { CommonRef } from '../../types';\n\nexport { setupInfiniteScrollObserver } from './setupInfiniteScrollObserver';\n\nexport const INFINITE_SCROLL_CLASSNAME = 'lumx-infinite-scroll-anchor';\n\nexport interface InfiniteScrollProps {\n    /**\n     * Callback when infinite scroll component is in view.\n     * Omit (e.g. while loading) to temporarily disable without changing the callback's\n     * identity when re-enabled — keeps the underlying observer stable.\n     */\n    // eslint-disable-next-line react/no-unused-prop-types\n    callback?(evt?: Event): void;\n    /** Customize intersection observer option */\n    // eslint-disable-next-line react/no-unused-prop-types\n    options?: IntersectionObserverInit;\n}\n\n/**\n * Framework-agnostic InfiniteScroll sentinel component.\n *\n * Renders a tiny invisible div that triggers a callback when it enters the viewport\n * (or intersects its root element) via IntersectionObserver.\n *\n * The div has a small height (4px) to avoid issues when a browser zoom is applied,\n * where a zero-height element might not trigger IntersectionObserver reliably.\n */\nexport const InfiniteScroll = ({ ref }: { ref?: CommonRef }) => (\n    // In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that\n    // the intersection has a higher chance of working correctly.\n    <div ref={ref} aria-hidden=\"true\" className={INFINITE_SCROLL_CLASSNAME} style={{ height: '4px' }} />\n);\n","import React, { useEffect } from 'react';\nimport {\n    InfiniteScroll as UI,\n    type InfiniteScrollProps,\n    setupInfiniteScrollObserver,\n} from '@lumx/core/js/utils/InfiniteScroll';\n\nexport type { InfiniteScrollProps };\n\n/**\n * Handles basic callback pattern by using intersection observers.\n */\nexport const InfiniteScroll: React.FC<InfiniteScrollProps> = ({ callback, options }) => {\n    const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        const { current: element } = elementRef;\n        if (!element || !callback) {\n            return undefined;\n        }\n\n        return setupInfiniteScrollObserver(element, callback, options);\n        // `options?.root` starts as `null` (before the scrollable list's ref attaches) and is\n        // then set to the real element — must be a dep, or the observer gets stuck watching\n        // the wrong root (falling back to the viewport) for the component's whole lifetime.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [elementRef.current, callback, options?.root]);\n\n    return UI({ ref: elementRef });\n};\n","import React from 'react';\nimport type { PortalInit } from '@lumx/core/js/utils/Portal';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface ReactPortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<ReactPortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\nexport interface ReactPortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<ReactPortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    const { container } = context ?? {};\n    if (!container || typeof container === 'string') {\n        return <>{children}</>;\n    }\n    return createPortal(children, container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","some","element","Node","target","contains","setupClickAway","getElements","callback","undefined","listener","evt","composedPath","filter","t","forEach","evtType","document","addEventListener","removeEventListener","useClickAway","childrenRefs","useEffect","refs","current","map","ref","Boolean","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","currentRefs","useRef","displayName","setupInfiniteScrollObserver","options","observer","IntersectionObserver","entries","hasIntersection","entry","isIntersecting","observe","unobserve","INFINITE_SCROLL_CLASSNAME","InfiniteScroll","className","style","height","elementRef","root","UI","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}

package/index.d.ts

@@ -5271,14 +5271,17 @@ interface TabListProps$1 extends HasClassName, HasTheme {
     layout?: TabListLayout;
     /** Position of the tabs in the list (requires 'clustered' layout). */
     position?: Alignment;
+    /** `role` applied to the inner `__links` container */
+    role?: 'navigation' | 'tablist';
     /** ref to the wrapper element */
     ref?: CommonRef;
 }
+type TabListPropsToOverride = 'role';
 
 /**
  * Defines the props of the component.
  */
-interface TabListProps extends GenericProps$1, ReactToJSX<TabListProps$1> {
+interface TabListProps extends GenericProps$1, ReactToJSX<TabListProps$1, TabListPropsToOverride> {
 }
 
 /**
@@ -5286,6 +5289,8 @@ interface TabListProps extends GenericProps$1, ReactToJSX<TabListProps$1> {
  *
  * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
  *
+ * Renders a `role="navigation"` landmark instead when used outside a `TabProvider` (nav-link mode).
+ *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -5293,9 +5298,14 @@ interface TabListProps extends GenericProps$1, ReactToJSX<TabListProps$1> {
 declare const TabList: Comp<TabListProps, HTMLDivElement>;
 
 /**
- * Defines the props of the component.
+ * Element a `Tab` can render as: `'button'` (default, classic tab), `'a'` (nav-link, `href`
+ * required via {@link HasRequiredLinkHref}), or any `ElementType` (nav-link, e.g. a router `Link`).
  */
-interface TabProps$1 extends HasClassName {
+type TabElement = 'a' | 'button' | ElementType;
+/**
+ * Defines the props of the component (independent of the `as` element).
+ */
+interface CommonTabProps extends HasClassName {
     /** Children are not supported. */
     children?: never;
     /** Icon (SVG path). */
@@ -5306,6 +5316,11 @@ interface TabProps$1 extends HasClassName {
     id?: string;
     /** Whether the tab is active or not. */
     isActive?: boolean;
+    /**
+     * WAI-ARIA `tab` role, resolved by the framework wrapper from `TabProvider` presence:
+     * `'tab'` inside a provider (classic tab mode), `undefined` outside (nav-link mode).
+     */
+    role?: 'tab';
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Label content. */
@@ -5326,23 +5341,38 @@ interface TabProps$1 extends HasClassName {
     tabIndexProp?: string;
     /** Name of the prop used to attach the keypress event (framework-dependent). */
     keyPressProp?: string;
-    /** ID applied to the tab button element (for aria-labelledby on the panel). */
-    tabId?: string;
     /** ID of the associated tab panel (for aria-controls). */
     tabPanelId?: string;
     /** Icon component injected by the framework wrapper. */
     Icon: any;
     /** Text component injected by the framework wrapper. */
     Text: any;
-    /** Forward ref to the underlying button element. */
+    /** Forward ref to the underlying element. */
     ref?: CommonRef;
 }
-type TabPropsToOverride = 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabId' | 'tabPanelId' | 'Icon' | 'Text';
+/**
+ * Polymorphic `as` surface for `Tab`. Not `HasPolymorphicAs<E>`: core JSX is type-checked under
+ * both the React and Vue namespaces, so spreading React DOM prop types would break the Vue
+ * cross-check. `href` is required at compile time when `as === 'a'` (via {@link HasRequiredLinkHref}).
+ */
+type TabAsProps<E extends TabElement = 'button'> = {
+    as?: E;
+} & (E extends 'a' ? HasRequiredLinkHref<'a'> : unknown);
+/**
+ * Props of the `Tab` component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element, while **mode is driven by `TabProvider` presence** (via the wrapper-resolved
+ * `role`), not by `as`. The `href` conditional's false branch is `unknown` (not a record) to avoid
+ * widening `keyof TabProps`.
+ */
+type TabProps$1<E extends TabElement = 'button'> = CommonTabProps & TabAsProps<E>;
+type TabPropsToOverride = 'as' | 'role' | 'isAnyDisabled' | 'shouldActivateOnFocus' | 'changeToTab' | 'tabIndex' | 'tabIndexProp' | 'keyPressProp' | 'tabPanelId' | 'Icon' | 'Text';
 
 /**
- * Defines the props of the component.
+ * Defines the props of the component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element (`as="a"` with required `href`, or `as={RouterLink}`), while the mode
+ * (`role="tab"` vs nav-link) is driven by `TabProvider` presence. The forwarded ref type follows `as`.
  */
-interface TabProps extends GenericProps$1, ReactToJSX<TabProps$1, TabPropsToOverride> {
+type TabProps<E extends ElementType$1 = 'button'> = GenericProps$1 & HasPolymorphicAs$1<E> & HasRequiredLinkHref$1<E> & ReactToJSX<TabProps$1, TabPropsToOverride> & {
     /** Children are not supported. */
     children?: never;
     /** Icon (SVG path). */
@@ -5357,17 +5387,44 @@ interface TabProps extends GenericProps$1, ReactToJSX<TabProps$1, TabPropsToOver
     isDisabled?: boolean;
     /** Label content. */
     label: string | ReactNode;
-}
+};
 /**
  * Tab component.
  *
  * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * when rendered inside a `TabProvider`.
+ *
+ * Outside a `TabProvider` (nav-link mode): plain link, no `role="tab"`/roving tabindex/`changeToTab`
+ * dispatch — only `aria-current` marks the active item.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
+ * @param  ref   Component ref (type follows `as`).
  * @return React element.
  */
-declare const Tab: Comp<TabProps, HTMLButtonElement>;
+declare const Tab: (<E extends ElementType$1 = "button">(props: GenericProps$1 & React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
+    as?: E | undefined;
+} & HasRequiredLinkHref$1<E> & ReactToJSX<TabProps$1, TabPropsToOverride> & {
+    /** Children are not supported. */
+    children?: never;
+    /** Icon (SVG path). */
+    icon?: IconProps["icon"];
+    /** Icon component properties. */
+    iconProps?: Omit<IconProps, "icon">;
+    /** Native id property. */
+    id?: string;
+    /** Whether the tab is active or not. */
+    isActive?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Label content. */
+    label: string | ReactNode;
+} & React$1.ComponentProps<E> & {
+    ref?: ComponentRef<E> | undefined;
+}) => React.JSX.Element) & {
+    displayName: string;
+    className: string;
+    defaultProps: Partial<TabProps$1<"button">>;
+};
 
 /**
  * Defines the props of the component.

package/index.js

@@ -9,7 +9,7 @@ import ReactDOM__default from 'react-dom';
 import { classNames, onEscapePressed, onEnterPressed as onEnterPressed$1, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last.js';
 import pull from 'lodash/pull.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/BvaFEHZn.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider, I as InfiniteScroll } from './_internal/CcLi-Wuu.js';
 import isEmpty from 'lodash/isEmpty.js';
 import get from 'lodash/get.js';
 import { getDisabledState as getDisabledState$1 } from '@lumx/core/js/utils/disabledState';
@@ -17991,6 +17991,8 @@ const SelectButton$2 = (props, {
   const isLoadingMore = listStatus === 'loadingMore';
   const isError = listStatus === 'error';
   const isMultiselectable = selectionType === 'multiple';
+  // Prevent firing during loading or error states to avoid duplicate fetches.
+  const isInfiniteScrollEnabled = !listStatus || listStatus === 'idle';
 
   /*
    * Display value: castArray normalizes single/multi value to an array, then resolve
@@ -18029,11 +18031,7 @@ const SelectButton$2 = (props, {
         }, {
           Combobox
         }), onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
-          callback: () => {
-            // Guard: prevent firing during loading or error states to avoid duplicate fetches.
-            if (listStatus && listStatus !== 'idle') return;
-            onLoadMore();
-          },
+          callback: isInfiniteScrollEnabled ? onLoadMore : undefined,
           options: infiniteScrollOptions
         }), isLoadingMore && /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
           count: 1
@@ -18177,7 +18175,13 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     as,
     ...buttonProps
   } = props;
-  const [listElement, setListElement] = useState(null);
+  // The list itself doesn't scroll — its ancestor `__scroll` wrapper does. The
+  // IntersectionObserver root must be the actual scrolling/clipping element, or the
+  // sentinel is trivially always "intersecting" its non-clipping `<ul>` parent.
+  const [scrollContainer, setScrollContainer] = useState(null);
+  const setListElement = useCallback(listElement => {
+    setScrollContainer(listElement?.closest(`.${CLASSNAME$17}__scroll`) ?? null);
+  }, []);
   const isMultiple = selectionType === 'multiple';
 
   // Inject core-computed props into the consumer's renderOption result.
@@ -18218,7 +18222,7 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
     translations,
     onLoadMore,
     infiniteScrollOptions: {
-      root: listElement,
+      root: scrollContainer,
       rootMargin: '100px'
     }
   }, {
@@ -18291,6 +18295,8 @@ const SelectTextField$2 = (props, {
   const isFullLoading = listStatus === 'loading';
   const isLoadingMore = listStatus === 'loadingMore';
   const isError = listStatus === 'error';
+  // Prevent firing during loading or error states to avoid duplicate fetches.
+  const isInfiniteScrollEnabled = !listStatus || listStatus === 'idle';
   return /*#__PURE__*/jsxs(Combobox.Provider, {
     onOpen: onOpen,
     children: [/*#__PURE__*/jsx(Combobox.Input, {
@@ -18321,11 +18327,7 @@ const SelectTextField$2 = (props, {
         }, {
           Combobox
         }), afterOptions, onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
-          callback: () => {
-            // Guard: prevent firing during loading or error states to avoid duplicate fetches.
-            if (listStatus && listStatus !== 'idle') return;
-            onLoadMore();
-          },
+          callback: isInfiniteScrollEnabled ? onLoadMore : undefined,
           options: infiniteScrollOptions
         }), isLoadingMore && /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
           count: 1
@@ -18413,7 +18415,14 @@ const SelectTextField$1 = props => {
   // Wrap the consumer's renderOption to inject core-computed props
   // (`value`, `isSelected`, `description`, `key`) into the returned <Combobox.Option>.
   const wrappedRenderOption = wrapRenderOption(renderOption);
-  const [listElement, setListElement] = useState(null);
+
+  // The list itself doesn't scroll — its ancestor `__scroll` wrapper does. The
+  // IntersectionObserver root must be the actual scrolling/clipping element, or the
+  // sentinel is trivially always "intersecting" its non-clipping `<ul>` parent.
+  const [scrollContainer, setScrollContainer] = useState(null);
+  const setListElement = useCallback(listElement => {
+    setScrollContainer(listElement?.closest(`.${CLASSNAME$17}__scroll`) ?? null);
+  }, []);
   const localInputRef = useRef(null);
   const mergedInputRef = useMergeRefs(localInputRef, externalInputRef);
 
@@ -18563,7 +18572,7 @@ const SelectTextField$1 = props => {
     beforeOptions,
     onLoadMore,
     infiniteScrollOptions: {
-      root: listElement,
+      root: scrollContainer,
       rootMargin: '100px'
     }
   }, {
@@ -20935,10 +20944,12 @@ const TabList$1 = props => {
     className,
     layout = DEFAULT_PROPS$7.layout,
     position = DEFAULT_PROPS$7.position,
+    role = 'tablist',
     theme,
     ref,
     ...forwardedProps
   } = props;
+  const LinkWrapper = role === 'navigation' ? 'nav' : 'div';
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -20947,9 +20958,9 @@ const TabList$1 = props => {
       [`position-${position}`]: Boolean(position),
       [`theme-${theme}`]: Boolean(theme)
     })),
-    children: /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsx(LinkWrapper, {
       className: element$4('links'),
-      role: "tablist",
+      role: role,
       "aria-label": ariaLabel,
       children: children
     })
@@ -20961,6 +20972,8 @@ const TabList$1 = props => {
  *
  * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
  *
+ * Renders a `role="navigation"` landmark instead when used outside a `TabProvider` (nav-link mode).
+ *
  * @param  props Component props.
  * @param  ref   Component ref.
  * @return React element.
@@ -20972,14 +20985,19 @@ const TabList = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   const tabListRef = React__default.useRef(null);
+  const role = useTabProviderContextState() === undefined ? 'navigation' : 'tablist';
+
+  // Classic roving tabindex (role="tab"). Disabled in nav-link mode: nav links keep their
+  // native per-link Tab stops, so this path is never engaged there.
   useRovingTabIndexContainer({
-    containerRef: tabListRef,
+    containerRef: role === 'navigation' ? null : tabListRef,
     itemSelector: '[role="tab"]'
   });
   return TabList$1({
+    ...forwardedProps,
     theme,
-    ref: mergeRefs(ref, tabListRef),
-    ...forwardedProps
+    role,
+    ref: mergeRefs(ref, tabListRef)
   });
 });
 TabList.displayName = COMPONENT_NAME$6;
@@ -21005,9 +21023,11 @@ const {
 } = bem(CLASSNAME$6);
 
 /**
- * Tab component.
- *
- * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * Tab component. Two modes keyed on `TabProvider` presence (via the wrapper-resolved `role`):
+ * tab mode (`role === 'tab'`, inside a provider) implements the WAI-ARIA `tab` role
+ * {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label};
+ * nav-link mode (no provider) renders plain link semantics (`aria-current`, no tab role/aria).
+ * `as` only selects the rendered element and applies in both modes.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
@@ -21015,6 +21035,7 @@ const {
  */
 const Tab$1 = props => {
   const {
+    as = 'button',
     className,
     icon,
     iconProps = {},
@@ -21022,6 +21043,7 @@ const Tab$1 = props => {
     isDisabled,
     id,
     isActive,
+    role,
     label,
     handleFocus,
     handleKeyPress,
@@ -21031,107 +21053,145 @@ const Tab$1 = props => {
     changeToTab,
     tabPanelId,
     shouldActivateOnFocus,
-    tabId,
     Icon,
     Text,
     ref,
     ...forwardedProps
   } = props;
-  const changeToCurrentTab = () => {
-    if (isAnyDisabled) {
-      return;
-    }
-    changeToTab?.();
-  };
-  const onFocus = event => {
-    handleFocus?.(event);
-    if (shouldActivateOnFocus) {
+  let rawClickableProps;
+  if (role === 'tab') {
+    // Mode: WAI-ARIA `tab` role (inside a TabProvider)
+    const changeToCurrentTab = () => {
+      if (isAnyDisabled) {
+        return;
+      }
+      changeToTab?.();
+    };
+    const onFocus = event => {
+      handleFocus?.(event);
+      if (shouldActivateOnFocus) {
+        changeToCurrentTab();
+      }
+    };
+    const onKeyPress = event => {
+      handleKeyPress?.(event);
+      if (event.key !== 'Enter' || isAnyDisabled) {
+        return;
+      }
       changeToCurrentTab();
-    }
-  };
-  const onKeyPress = event => {
-    handleKeyPress?.(event);
-    if (event.key !== 'Enter' || isAnyDisabled) {
-      return;
-    }
-    changeToCurrentTab();
-  };
-  return /*#__PURE__*/jsxs("button", {
-    ref: ref,
-    ...forwardedProps,
-    type: "button",
-    id: tabId,
+    };
+    rawClickableProps = {
+      ...forwardedProps,
+      'aria-disabled': isAnyDisabled ? 'true' : 'false',
+      handleClick: changeToCurrentTab,
+      onFocus,
+      role: 'tab',
+      'aria-selected': isActive,
+      'aria-controls': tabPanelId,
+      [keyPressProp]: onKeyPress,
+      [tabIndexProp]: isActive ? 0 : tabIndex
+    };
+  } else {
+    // Mode: nav link
+    const {
+      onClick,
+      ...rest
+    } = forwardedProps;
+    rawClickableProps = {
+      ...rest,
+      isDisabled,
+      handleClick: onClick,
+      'aria-current': isActive ? 'page' : undefined
+    };
+  }
+  return RawClickable({
+    ...rawClickableProps,
+    as,
+    id,
     className: classnames(className, block$6({
       'is-active': isActive,
       'is-disabled': isAnyDisabled
     })),
-    onClick: changeToCurrentTab,
-    [keyPressProp]: onKeyPress,
-    onFocus: onFocus,
-    role: "tab",
-    [tabIndexProp]: isActive ? 0 : tabIndex,
-    "aria-disabled": isAnyDisabled,
-    "aria-selected": isActive,
-    "aria-controls": tabPanelId,
-    children: [icon && /*#__PURE__*/jsx(Icon, {
-      icon: icon,
-      size: Size.xs,
-      ...iconProps
-    }), label && /*#__PURE__*/jsx(Text, {
-      as: "span",
-      truncate: true,
-      children: label
-    })]
+    ref: ref,
+    children: /*#__PURE__*/jsxs(Fragment, {
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        icon: icon,
+        size: Size.xs,
+        ...iconProps
+      }), label && /*#__PURE__*/jsx(Text, {
+        as: "span",
+        truncate: true,
+        children: label
+      })]
+    })
   });
 };
 
 /**
- * Defines the props of the component.
+ * Defines the props of the component. Polymorphic on `as` (element selection only): `as` picks the
+ * rendered element (`as="a"` with required `href`, or `as={RouterLink}`), while the mode
+ * (`role="tab"` vs nav-link) is driven by `TabProvider` presence. The forwarded ref type follows `as`.
  */
 
 /**
  * Tab component.
  *
  * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}
+ * when rendered inside a `TabProvider`.
+ *
+ * Outside a `TabProvider` (nav-link mode): plain link, no `role="tab"`/roving tabindex/`changeToTab`
+ * dispatch — only `aria-current` marks the active item.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
+ * @param  ref   Component ref (type follows `as`).
  * @return React element.
  */
-const Tab = forwardRef((props, ref) => {
+const Tab = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
     isAnyDisabled,
     otherProps
   } = useDisableStateProps(props);
   const {
+    as = 'button',
     isActive: propIsActive,
     id,
     onFocus,
     onKeyPress,
     ...forwardedProps
   } = otherProps;
+
+  // Register into the provider (if any) so it can track this tab's index / active state.
   const tabState = useTabProviderContext('tab', id);
+  // In a provider => tab mode (role="tab"); outside => nav-link mode. Mirrors TabList's role.
+  const inProvider = tabState !== undefined;
   const {
     isLazy: _isLazy,
+    tabId,
     ...state
   } = tabState ?? {};
+  // Without a provider there's no active index, so this collapses to the caller-provided value.
   const isActive = propIsActive || state?.isActive;
   return Tab$1({
-    id,
+    ...forwardedProps,
     ...state,
+    as,
+    role: inProvider ? 'tab' : undefined,
     Icon,
     Text,
     ref,
+    // Falls back to the caller-provided `id` when there's no TabProvider to generate one.
+    id: tabId || id,
     isActive,
     isAnyDisabled,
+    isDisabled: isAnyDisabled,
     handleFocus: onFocus,
-    handleKeyPress: onKeyPress,
-    ...forwardedProps
+    handleKeyPress: onKeyPress
   });
+}), {
+  displayName: COMPONENT_NAME$5,
+  className: CLASSNAME$6,
+  defaultProps: DEFAULT_PROPS$6
 });
-Tab.displayName = COMPONENT_NAME$5;
-Tab.className = CLASSNAME$6;
-Tab.defaultProps = DEFAULT_PROPS$6;
 
 /**
  * Component display name.