@workday/canvas-kit-preview-react 16.2.0-0630-next.0 → 16.2.0-0634-next.0

package/dist/es6/preview-react/tabs/lib/TabsItem.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { ListRenderItemContext, isSelected, useListItemRegister, useListItemRovingFocus, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
+import { EllipsisText, composeHooks, cornerShapeStencil, createComponent, createElemPropsHook, createSubcomponent, focusRing, slugify, useModalityType, } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { base, component, system } from '@workday/canvas-tokens-web';
+import { useTabsModel } from './useTabsModel';
+const tabItemStencil = createStencil({
+    extends: cornerShapeStencil,
+    base: { name: "z5d4z", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));flex:0 0 auto;min-width:0;align-items:center;padding:0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));cursor:pointer;color:var(--cnvs-sys-color-fg-default);position:relative;transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-c9acc3:currentColor;--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));&:has(span){display:flex;gap:var(--cnvs-base-size-75, 0.375rem);}&:hover, &.hover{color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:focus-visible, &.focus{outline:0.125rem solid transparent;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));color:var(--cnvs-sys-color-fg-strong);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled, &[aria-disabled]{opacity:var(--cnvs-sys-opacity-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}&[aria-selected=true]{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover, &:focus-visible, &.focus{color:var(--cnvs-sys-color-fg-default);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}}" },
+    modifiers: {
+        variant: {
+            filled: { name: "2in5rq", styles: "border:0.0625rem solid transparent;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));border-color:var(--cnvs-sys-color-border-input-default);&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-surface-overlay-pressed-default, oklch(0.3337 0.0688 250.79 / 0.09));}&:focus-visible, &.focus{border-width:0.125rem;margin-inline:-0.0625rem;}@media (forced-colors: active){outline:0.125rem solid ButtonBorder;}}" },
+            outlined: { name: "q5arc", styles: "border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));margin-inline:0.0625rem;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-strong, var(--cnvs-sys-color-border-container, oklch(0.2442 0.0693 257.66 / 0.21)));}&:focus-visible, &.focus{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}&[aria-selected=true]{margin-inline:0rem;border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);&:hover, &.hover, &:focus-visible, &.focus{border:0.125rem solid var(--cnvs-sys-color-border-contrast-default);}&:focus-visible, &.focus{box-shadow:0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}}" }
+        }
+    }
+}, "tab-item-a5f594");
+export const StyledTabItem = createComponent('button')({
+    displayName: 'StyledTabItem',
+    Component: ({ children, variant, ...elemProps }, ref, Element) => {
+        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, tabItemStencil({ variant })), children: children }));
+    },
+});
+/**
+ * When the selected tab receives ArrowDown, move focus to its tab panel.
+ * Returning `null` is the mergeCallback sentinel that stops later-merged
+ * `onKeyDown` handlers (including roving focus) from also handling this key.
+ * This hook must be composed before `useListItemRovingFocus` so it runs after
+ * that hook and its return value can skip the roving handler.
+ * Tabs.OverflowButton does not use this hook.
+ *
+ * ArrowDown is only intercepted in horizontal orientation. In a vertical tablist,
+ * ArrowDown is the roving-navigation key and must reach `useListItemRovingFocus`.
+ */
+const useTabsItemFocusPanelOnArrowDown = createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
+    const { item } = React.useContext(ListRenderItemContext);
+    const name = elemProps['data-id'] || (item === null || item === void 0 ? void 0 : item.id) || '';
+    const selected = !!name && isSelected(name, state);
+    return {
+        onKeyDown(event) {
+            if (!selected || state.orientation !== 'horizontal' || event.key !== 'ArrowDown') {
+                return;
+            }
+            event.preventDefault();
+            const panelId = slugify(`tabpanel-${state.id}-${name}`);
+            const panel = document.getElementById(panelId);
+            if (panel) {
+                panel.focus();
+            }
+            // mergeCallback: `null` prevents the roving-focus onKeyDown from running.
+            return null;
+        },
+    };
+});
+export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
+    const name = elemProps['data-id'] || '';
+    const selected = !!elemProps['data-id'] && isSelected(name, state);
+    return {
+        type: 'button',
+        role: 'tab',
+        'aria-selected': selected,
+        'aria-controls': slugify(`tabpanel-${state.id}-${name}`),
+    };
+}), useListItemSelect, useOverflowListItemMeasure, useTabsItemFocusPanelOnArrowDown, useListItemRovingFocus, useListItemRegister);
+export const TabsItem = createSubcomponent('button')({
+    displayName: 'Tabs.Item',
+    modelHook: useTabsModel,
+    elemPropsHook: useTabsItem,
+    subComponents: {
+        Icon: SystemIcon,
+        Text: EllipsisText,
+    },
+})(({ children, ...elemProps }, Element, model) => {
+    const modality = useModalityType();
+    return (_jsx(OverflowTooltip, { children: _jsx(StyledTabItem, { as: Element, maxWidth: modality === 'touch' ? undefined : 280, ...elemProps, variant: model.state.variant, children: children }) }));
+});

package/dist/{commonjs → es6/preview-react}/tabs/lib/TabsList.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { ExtractProps, Generic } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
+import { useTabsModel } from './useTabsModel';
 export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
     /**
      * If items are passed to a `TabsModel`, the child of `Tabs.List` should be a render prop. The
@@ -329,6 +330,327 @@ export declare const useTabOverflowScroll: import("@workday/canvas-kit-react/com
     readonly ref: (instance: HTMLDivElement | null) => void;
     readonly onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
 }>;
+/**
+ * Resets the tablist cursor on blur to the selected tab when visible, or to the first visible
+ * item (e.g. the overflow button) when the selected tab is hidden. This ensures the roving
+ * tabindex always lands on a focusable element when only the "More" button is visible.
+ */
+export declare const useTabsListResetCursorOnBlur: import("@workday/canvas-kit-react/common").BehaviorHook<{
+    state: {
+        getId: (item: any) => string;
+        orientation: import("@workday/canvas-kit-react/collection").Orientation;
+        panels: import("@workday/canvas-kit-react/collection").Item<any>[];
+        panelIndexRef: React.MutableRefObject<number>;
+        variant: "filled" | "outlined";
+        hiddenIds: string[];
+        itemSizeCache: Record<string, number>;
+        itemWidthCache: Record<string, number>;
+        containerSize: number;
+        containerWidth: number;
+        containerGap: number;
+        overflowTargetWidth: number;
+        selectedIds: string[] | "all";
+        unselectedIds: string[];
+        cursorId: string | string[];
+        columnCount: number;
+        pageSizeRef: React.MutableRefObject<number>;
+        cursorIndexRef: {
+            readonly current: number;
+        };
+        UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+        UNSTABLE_defaultItemHeight: number;
+        containerRef: React.RefObject<HTMLDivElement>;
+        id: string;
+        indexRef: React.MutableRefObject<number>;
+        nonInteractiveIds: string[];
+        isVirtualized: boolean;
+        items: import("@workday/canvas-kit-react/collection").Item<any>[];
+    };
+    events: {
+        registerPanel: (data: {
+            id: string;
+            textValue: string;
+        }) => void;
+        unregisterPanel: (data: {
+            id: string;
+        }) => void;
+        select(data: {
+            id: string;
+        }): void;
+        setContainerSize(data: {
+            width?: number | undefined;
+            height?: number | undefined;
+        }): void;
+        setContainerWidth(data: {
+            width?: number | undefined;
+        }): void;
+        setContainerGap(data: {
+            size: number;
+        }): void;
+        setOverflowTargetSize(data: {
+            width: number;
+            height: number;
+        }): void;
+        setOverflowTargetWidth(data: {
+            width: number;
+        }): void;
+        addItemWidth(data: {
+            id: string;
+            width: number;
+        }): void;
+        addItemSize(data: {
+            id: string;
+            width: number;
+            height: number;
+        }): void;
+        removeItemSize(data: {
+            id: string;
+        }): void;
+        removeItemWidth(data: {
+            id: string;
+        }): void;
+        addHiddenKey(data: {
+            id: string;
+        }): void;
+        removeHiddenKey(data: {
+            id: string;
+        }): void;
+        selectAll(): void;
+        unselectAll(): void;
+        setSelectedIds(ids: string[] | "all"): void;
+        remove(data: {
+            id: string;
+            nextId?: string | undefined;
+            event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+        }): void;
+        goTo(data: {
+            id: string;
+        }): void;
+        goToNext(): void;
+        goToPrevious(): void;
+        goToPreviousRow(): void;
+        goToNextRow(): void;
+        goToFirst(): void;
+        goToLast(): void;
+        goToFirstOfRow(): void;
+        goToLastOfRow(): void;
+        goToNextPage(): void;
+        goToPreviousPage(): void;
+        registerItem(data: {
+            id: string;
+            textValue: string;
+        }): void;
+        unregisterItem(data: {
+            id: string;
+        }): void;
+        updateItemHeight(data: {
+            value: number;
+        }): void;
+    };
+    menu: {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: "hidden" | "visible";
+            selectedIds: string[] | "all";
+            unselectedIds: string[];
+            cursorId: string | string[];
+            columnCount: number;
+            pageSizeRef: React.MutableRefObject<number>;
+            cursorIndexRef: {
+                readonly current: number;
+            };
+            UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+            UNSTABLE_defaultItemHeight: number;
+            containerRef: React.RefObject<HTMLDivElement>;
+            orientation: "horizontal" | "vertical";
+            indexRef: React.MutableRefObject<number>;
+            nonInteractiveIds: string[];
+            isVirtualized: boolean;
+            items: import("@workday/canvas-kit-react/collection").Item<any>[];
+            mode: "multiple" | "single";
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            select(data: {
+                id: string;
+            }): void;
+            selectAll(): void;
+            unselectAll(): void;
+            setSelectedIds(ids: string[] | "all"): void;
+            remove(data: {
+                id: string;
+                nextId?: string | undefined;
+                event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+            }): void;
+            goTo(data: {
+                id: string;
+            }): void;
+            goToNext(): void;
+            goToPrevious(): void;
+            goToPreviousRow(): void;
+            goToNextRow(): void;
+            goToFirst(): void;
+            goToLast(): void;
+            goToFirstOfRow(): void;
+            goToLastOfRow(): void;
+            goToNextPage(): void;
+            goToPreviousPage(): void;
+            registerItem(data: {
+                id: string;
+                textValue: string;
+            }): void;
+            unregisterItem(data: {
+                id: string;
+            }): void;
+            updateItemHeight(data: {
+                value: number;
+            }): void;
+        };
+        UNSTABLE_parentModel: {
+            state: {
+                selectedIds: string[] | "all";
+                unselectedIds: string[];
+                cursorId: string | string[];
+                columnCount: number;
+                pageSizeRef: React.MutableRefObject<number>;
+                cursorIndexRef: {
+                    readonly current: number;
+                };
+                UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+                UNSTABLE_defaultItemHeight: number;
+                containerRef: React.RefObject<HTMLDivElement>;
+                id: string;
+                orientation: "horizontal" | "vertical";
+                indexRef: React.MutableRefObject<number>;
+                nonInteractiveIds: string[];
+                isVirtualized: boolean;
+                items: import("@workday/canvas-kit-react/collection").Item<any>[];
+            };
+            events: {
+                select(data: {
+                    id: string;
+                }): void;
+                selectAll(): void;
+                unselectAll(): void;
+                setSelectedIds(ids: string[] | "all"): void;
+                remove(data: {
+                    id: string;
+                    nextId?: string | undefined;
+                    event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                }): void;
+                goTo(data: {
+                    id: string;
+                }): void;
+                goToNext(): void;
+                goToPrevious(): void;
+                goToPreviousRow(): void;
+                goToNextRow(): void;
+                goToFirst(): void;
+                goToLast(): void;
+                goToFirstOfRow(): void;
+                goToLastOfRow(): void;
+                goToNextPage(): void;
+                goToPreviousPage(): void;
+                registerItem(data: {
+                    id: string;
+                    textValue: string;
+                }): void;
+                unregisterItem(data: {
+                    id: string;
+                }): void;
+                updateItemHeight(data: {
+                    value: number;
+                }): void;
+            };
+            selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+            navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+            getId: (item: any) => string;
+            getTextValue: (item: any) => string;
+            UNSTABLE_parentModel: {
+                state: {
+                    selectedIds: string[] | "all";
+                    unselectedIds: string[];
+                    cursorId: string | string[];
+                    columnCount: number;
+                    pageSizeRef: React.MutableRefObject<number>;
+                    cursorIndexRef: {
+                        readonly current: number;
+                    };
+                    UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+                    UNSTABLE_defaultItemHeight: number;
+                    containerRef: React.RefObject<HTMLDivElement>;
+                    id: string;
+                    orientation: "horizontal" | "vertical";
+                    indexRef: React.MutableRefObject<number>;
+                    nonInteractiveIds: string[];
+                    isVirtualized: boolean;
+                    items: import("@workday/canvas-kit-react/collection").Item<any>[];
+                };
+                events: {
+                    select(data: {
+                        id: string;
+                    }): void;
+                    selectAll(): void;
+                    unselectAll(): void;
+                    setSelectedIds(ids: string[] | "all"): void;
+                    remove(data: {
+                        id: string;
+                        nextId?: string | undefined;
+                        event?: Event | React.SyntheticEvent<Element, Event> | undefined;
+                    }): void;
+                    goTo(data: {
+                        id: string;
+                    }): void;
+                    goToNext(): void;
+                    goToPrevious(): void;
+                    goToPreviousRow(): void;
+                    goToNextRow(): void;
+                    goToFirst(): void;
+                    goToLast(): void;
+                    goToFirstOfRow(): void;
+                    goToLastOfRow(): void;
+                    goToNextPage(): void;
+                    goToPreviousPage(): void;
+                    registerItem(data: {
+                        id: string;
+                        textValue: string;
+                    }): void;
+                    unregisterItem(data: {
+                        id: string;
+                    }): void;
+                    updateItemHeight(data: {
+                        value: number;
+                    }): void;
+                };
+                selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+                navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+                getId: (item: any) => string;
+                getTextValue: (item: any) => string;
+            } | undefined;
+        };
+        selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+        navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+        getId: (item: any) => string;
+        getTextValue: (item: any) => string;
+    };
+    selection: import("@workday/canvas-kit-react/collection").SelectionManager;
+    navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
+    getId: (item: any) => string;
+    getTextValue: (item: any) => string;
+}, {
+    readonly onKeyDown: (event: React.KeyboardEvent) => void;
+    readonly onFocus: () => void;
+    readonly onBlur: () => void;
+}>;
 export declare const useTabsList: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         getId: (item: any) => string;
@@ -649,7 +971,7 @@ export declare const useTabsList: import("@workday/canvas-kit-react/common").Beh
 }, import("@workday/canvas-kit-react/common").MergeProps<{
     readonly ref: (instance: HTMLElement | null) => void;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
-    readonly onKeyDown: (event: React.KeyboardEvent<Element>) => void;
+    readonly onKeyDown: (event: React.KeyboardEvent) => void;
     readonly onFocus: () => void;
     readonly onBlur: () => void;
 }, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>>;
@@ -681,6 +1003,12 @@ export declare const tabsListStencil: import("@workday/canvas-kit-styling").Sten
         right: {};
     };
 }, {}, {}, never, never>;
+/**
+ * Custom render function for tabs that filters out the synthetic overflow button item.
+ * This is needed because the overflow button is included in the model's items array
+ * for navigation purposes, but should not be rendered by the list or panel render function.
+ */
+export declare function useTabsCollectionRenderItems(model: ReturnType<typeof useTabsModel>, children: ((item: Generic, index: number) => React.ReactNode) | React.ReactNode): React.ReactNode;
 export declare const TabsList: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TabListProps<any> & {
     maskImage?: string | undefined;
 }, {

package/dist/es6/preview-react/tabs/lib/TabsList.d.ts.map

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

package/dist/es6/preview-react/tabs/lib/TabsList.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ListRenderItemContext, isCursor, useOverflowListMeasure, } from '@workday/canvas-kit-react/collection';
+import { composeHooks, createElemPropsHook, createSubcomponent, useLocalRef, useModalityType, useMountLayout, } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { createStencil } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { orientationKeyMap } from '../../../react/collection/lib/keyUtils';
+import { TABS_OVERFLOW_BUTTON_ID, useTabsModel } from './useTabsModel';
+function getScrollPercentage(elem, direction) {
+    if (direction === 'vertical') {
+        if (elem.scrollHeight > elem.clientHeight) {
+            const percentage = elem.scrollTop / (elem.scrollHeight - elem.clientHeight);
+            return percentage;
+        }
+        else {
+            return -1;
+        }
+    }
+    if (elem.scrollWidth > elem.clientWidth) {
+        const percentage = elem.scrollLeft / (elem.scrollWidth - elem.clientWidth);
+        return percentage;
+    }
+    else {
+        return -1;
+    }
+}
+function getScrollPosition(elem, direction) {
+    const percentage = getScrollPercentage(elem, direction);
+    return percentage <= -1
+        ? undefined
+        : percentage > 0.99
+            ? 'end'
+            : percentage > 0.01
+                ? 'middle'
+                : 'start';
+}
+function setScrollPosition(elem, scrollPosition) {
+    if (scrollPosition) {
+        elem.setAttribute('data-scroll-position', scrollPosition);
+    }
+    else {
+        elem.removeAttribute('data-scroll-position');
+    }
+}
+export const useTabOverflowScroll = createElemPropsHook(useTabsModel)((_model, ref, elemProps = {}) => {
+    const direction = elemProps['aria-orientation'] || 'vertical';
+    const { localRef, elementRef } = useLocalRef(ref);
+    React.useLayoutEffect(() => {
+        if (!localRef.current) {
+            return;
+        }
+        setScrollPosition(localRef.current, getScrollPosition(localRef.current, direction));
+    }, [localRef, direction]);
+    return {
+        ref: elementRef,
+        onScroll: (event) => {
+            const elem = event.currentTarget;
+            setScrollPosition(elem, getScrollPosition(elem, direction));
+        },
+    };
+});
+/**
+ * Resets the tablist cursor on blur to the selected tab when visible, or to the first visible
+ * item (e.g. the overflow button) when the selected tab is hidden. This ensures the roving
+ * tabindex always lands on a focusable element when only the "More" button is visible.
+ */
+export const useTabsListResetCursorOnBlur = createElemPropsHook(useTabsModel)(({ state, events }) => {
+    const programmaticFocusRef = React.useRef(false);
+    const requestAnimationFrameRef = React.useRef(0);
+    useMountLayout(() => {
+        return () => {
+            cancelAnimationFrame(requestAnimationFrameRef.current);
+        };
+    });
+    return {
+        onKeyDown(event) {
+            if (Object.keys(orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
+                programmaticFocusRef.current = true;
+            }
+        },
+        onFocus() {
+            programmaticFocusRef.current = false;
+        },
+        onBlur() {
+            if (!programmaticFocusRef.current) {
+                requestAnimationFrameRef.current = requestAnimationFrame(() => {
+                    var _a;
+                    const selectedId = state.selectedIds !== 'all' && state.selectedIds.length
+                        ? state.selectedIds[0]
+                        : undefined;
+                    const visibleItems = state.items.filter(item => !state.hiddenIds.includes(item.id));
+                    const targetId = selectedId && !state.hiddenIds.includes(selectedId) ? selectedId : (_a = visibleItems[0]) === null || _a === void 0 ? void 0 : _a.id;
+                    if (targetId && !isCursor(state, targetId)) {
+                        events.goTo({ id: targetId });
+                    }
+                });
+            }
+        },
+    };
+});
+export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHook(useTabsModel)(model => {
+    return {
+        role: 'tablist',
+        'aria-orientation': model.state.orientation,
+    };
+}), useOverflowListMeasure, useTabsListResetCursorOnBlur);
+export const tabsListStencil = createStencil({
+    base: { name: "3xtr6q", styles: "box-sizing:border-box;display:flex;position:relative;min-width:0;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
+    modifiers: {
+        modality: {
+            touch: { name: "1b89po", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
+            mouse: { name: "1bw0iv", styles: "" },
+            pen: { name: "1qiml7", styles: "" }
+        },
+        isDragging: {
+            true: { name: "3k0wxl", styles: "" },
+            false: { name: "zk4vk", styles: "" }
+        },
+        direction: {
+            left: { name: "44ne83", styles: "" },
+            right: { name: "3b5g81", styles: "" }
+        }
+    }
+}, "tabs-list-95064d");
+/**
+ * Custom render function for tabs that filters out the synthetic overflow button item.
+ * This is needed because the overflow button is included in the model's items array
+ * for navigation purposes, but should not be rendered by the list or panel render function.
+ */
+export function useTabsCollectionRenderItems(model, children) {
+    const itemsToRender = model.state.items.filter(item => item.id !== TABS_OVERFLOW_BUTTON_ID);
+    const items = typeof children === 'function' ? (itemsToRender.map(item => {
+        const child = children(item.value, item.index);
+        return (_jsx(ListRenderItemContext.Provider, { value: { item }, children: child }, item.id || item.index));
+    })) : (_jsx(ListRenderItemContext.Provider, { value: {}, children: children }));
+    return items;
+}
+export const TabsList = createSubcomponent('div')({
+    displayName: 'Tabs.List',
+    modelHook: useTabsModel,
+    elemPropsHook: useTabsList,
+})(({ children, overflowButton, ...elemProps }, Element, model) => {
+    const modality = useModalityType();
+    return (_jsxs(Element, { ...mergeStyles(elemProps, tabsListStencil({
+            modality: modality,
+        })), children: [useTabsCollectionRenderItems(model, children), overflowButton] }));
+});