@beydesign/storybook 0.4.5 → 0.4.6

package/dist/stories/Form/TextArea.js

@@ -5,6 +5,8 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
 export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
+    const showMaxLength = Boolean(showMaxLengthIndicator && allowMaxLength && maxLength);
+    const showFooter = Boolean(errorText || hintText) || showMaxLength;
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: `1px solid ${errorText
                         ? 'var(--color-border-border-error)'
                         : focused
@@ -19,5 +21,5 @@ export const TextArea = ({ label, value, onChange, placeholder, hintText, errorT
                                 : 'var(--color-text-text-title)',
                             backgroundColor: 'transparent',
                             resize: 'none',
-                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: `${maxLength - value.length}` }))] })] }) }));
+                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), showFooter && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: `${maxLength - value.length}` }))] }))] }) }));
 };

package/dist/stories/Form/TextInput.js

@@ -26,7 +26,9 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
         : 'var(--color-foreground-fg-secondary)';
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : undefined, sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: fullWidth ? '100%' : undefined, minWidth: fullWidth ? 0 : '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: '40px', bgcolor: 'var(--color-background-bg-component)', border: errorText
                         ? 'none'
-                        : '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: { boxSizing: 'border-box' }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', height: '100%', width: '100%', sx: { boxSizing: 'border-box' }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
+                        : '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', sx: { boxSizing: 'border-box' }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', height: '100%', width: '100%', sx: { boxSizing: 'border-box' }, borderRadius: trailingText
+                                ? 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)'
+                                : 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
                                 ? '1px solid var(--color-border-border-error)'
                                 : focused
                                     ? '1px solid var(--color-border-border-component-active)'

package/dist/stories/UI/ButtonCard.js

@@ -11,7 +11,10 @@ import { getIconComponent } from '../../utils';
 export const ButtonCard = ({ title, description, icon = 'UserFocus', iconColor = 'var(--color-foreground-fg-accent-yellow)', iconBackgroundColor = 'var(--color-background-bg-badge-accent-yellow)', onClick, showActionButton = false, actionButtonText = 'Contact Us', onActionClick, disabled = false, width = '294px', style, testId, }) => {
     const cardKey = title?.toLowerCase()?.replace(/\s+/g, '-');
     const isInteractive = !disabled && !!onClick;
-    return (_jsxs(Box, { width: width, display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', boxSizing: 'border-box', position: 'relative', onClick: isInteractive ? onClick : undefined, style: style, "data-testid": testId ?? `${cardKey}-button-card`, sx: {
+    return (_jsxs(Box, { width: width, display: 'flex', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: {
+            xs: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
+            sm: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)',
+        }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', boxSizing: 'border-box', position: 'relative', onClick: isInteractive ? onClick : undefined, style: style, "data-testid": testId ?? `${cardKey}-button-card`, sx: {
             opacity: disabled ? 0.5 : 1,
             cursor: isInteractive ? 'pointer' : 'default',
             pointerEvents: disabled ? 'none' : 'auto',

package/dist/stories/UI/ConversationalAvatarsBanner.js

@@ -25,7 +25,7 @@ const IMAGE_COLUMN = [
     BANNER_AVATARS.yuruo,
 ];
 export const ConversationalAvatarsBanner = ({ title, description, actions = [], background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
-    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.md, hierarchy: action.primary
+    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.xxs, hierarchy: action.primary
             ? ButtonHierarchy.Primary
             : ButtonHierarchy.SecondaryColor, onClick: action.onClick, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
     return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "40px", width: "100%", minHeight: `${BANNER_MIN_HEIGHT}px`, overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {

package/dist/stories/UI/ConversationalVoiceAgentsBanner.js

@@ -11,7 +11,7 @@ const MOBILE = '@media (max-width: 640px)';
 const PREVIEW_WIDTH = 296;
 const PREVIEW_HEIGHT = 150;
 export const ConversationalVoiceAgentsBanner = ({ title, description, actions = [], previewImage = BANNER_VIDEO_PREVIEW, onPlayClick, previewCtaText, onPreviewCtaClick, background = PINK_GRADIENT, style: customStyle, testId, }) => {
-    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.md, hierarchy: action.primary
+    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.xxs, hierarchy: action.primary
             ? ButtonHierarchy.Primary
             : ButtonHierarchy.SecondaryColor, onClick: action.onClick, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
     return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "40px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
@@ -37,5 +37,5 @@ export const ConversationalVoiceAgentsBanner = ({ title, description, actions =
                         height: 'auto',
                         aspectRatio: `${PREVIEW_WIDTH} / ${PREVIEW_HEIGHT}`,
                     },
-                }, children: [_jsx(Box, { component: "img", src: previewImage, alt: "", width: "100%", height: "100%", sx: { objectFit: 'cover', display: 'block' } }), _jsx(Box, { position: "absolute", left: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, displayIconMode: ButtonDisplayMode.Only, displayIcon: "Play", onClick: onPlayClick, style: { border: 'none' }, testId: testId ? `${testId}-play` : undefined }) }), previewCtaText && (_jsx(Box, { position: "absolute", right: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { text: previewCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, onClick: onPreviewCtaClick, style: { border: 'none' }, testId: testId ? `${testId}-preview-cta` : undefined }) }))] })] }));
+                }, children: [_jsx(Box, { component: "img", src: previewImage, alt: "", width: "100%", height: "100%", sx: { objectFit: 'cover', display: 'block' } }), _jsx(Box, { position: "absolute", left: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { size: ButtonSize.xxs, hierarchy: ButtonHierarchy.SecondaryTransparent, displayIconMode: ButtonDisplayMode.Only, displayIcon: "Play", onClick: onPlayClick, style: { border: 'none' }, testId: testId ? `${testId}-play` : undefined }) }), previewCtaText && (_jsx(Box, { position: "absolute", right: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { text: previewCtaText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.SecondaryTransparent, onClick: onPreviewCtaClick, style: { border: 'none' }, testId: testId ? `${testId}-preview-cta` : undefined }) }))] })] }));
 };

package/dist/stories/UI/Popover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Tooltip, ClickAwayListener } from '@mui/material';
 import { PopoverVariant } from './types';
 /** Composed from the semantic `shadow-sm` design token. */
@@ -21,6 +21,7 @@ const VARIANT_COLOR = {
  */
 export const Popover = ({ content, children, variant = PopoverVariant.Dark, placement = 'top', trigger = 'hover', arrow = true, maxWidth = 280, padding = 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', open, onOpenChange, disableInteractive = false, className, }) => {
     const [internalOpen, setInternalOpen] = useState(false);
+    const popperRef = useRef(null);
     const isControlled = open !== undefined;
     const isOpen = isControlled ? open : internalOpen;
     const setOpen = (next) => {
@@ -53,7 +54,17 @@ export const Popover = ({ content, children, variant = PopoverVariant.Dark, plac
                 setOpen(!isOpen);
             },
         });
-        return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsx(Tooltip, { open: isOpen, placement: placement, arrow: arrow, title: content, disableHoverListener: true, disableFocusListener: true, disableTouchListener: true, slotProps: slotProps, children: triggerEl }) }));
+        return (_jsx(ClickAwayListener, { onClickAway: (event) => {
+                // The panel renders in a portal, so it is not a descendant of the
+                // trigger that ClickAwayListener watches — without this check a tap
+                // inside the panel counts as "away". That matters on touch, where
+                // ClickAwayListener fires on touchend: the panel would unmount before
+                // the click reached the item, closing the menu without running its
+                // action. Mouse clicks are unaffected either way.
+                if (popperRef.current?.contains(event.target))
+                    return;
+                setOpen(false);
+            }, children: _jsx(Tooltip, { open: isOpen, placement: placement, arrow: arrow, title: content, disableHoverListener: true, disableFocusListener: true, disableTouchListener: true, slotProps: { ...slotProps, popper: { ref: popperRef } }, children: triggerEl }) }));
     }
     const controlledProps = isControlled
         ? {

package/dist/stories/UI/SelectAvatarCard.js

@@ -41,7 +41,7 @@ export const SelectAvatarCard = ({ state = SelectAvatarCardState.Filled, showHea
                                             opacity: 0,
                                             visibility: 'hidden',
                                             transition: 'opacity 0.15s ease-in-out',
-                                        }, children: _jsx(MainButton, { text: previewButtonText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, showLeadingIcon: true, leadingIcon: "Play", onClick: onPreview, testId: testId ? `${testId}-preview` : undefined }) })), showChangeButton && (_jsx(MainButton, { text: changeButtonText, size: ButtonSize.md, hierarchy: ButtonHierarchy.WhiteText, showLeadingIcon: true, leadingIcon: "ArrowsLeftRight", onClick: onChange, testId: testId ? `${testId}-change` : undefined }))] }), avatarName && (_jsx(Box, { position: "absolute", left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", padding: "24px 12px 12px", sx: { background: NAME_GRADIENT }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", textStyle: {
+                                        }, children: _jsx(MainButton, { text: previewButtonText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.SecondaryTransparent, showLeadingIcon: true, leadingIcon: "Play", onClick: onPreview, testId: testId ? `${testId}-preview` : undefined }) })), showChangeButton && (_jsx(MainButton, { text: changeButtonText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.WhiteText, showLeadingIcon: true, leadingIcon: "ArrowsLeftRight", onClick: onChange, testId: testId ? `${testId}-change` : undefined }))] }), avatarName && (_jsx(Box, { position: "absolute", left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", padding: "24px 12px 12px", sx: { background: NAME_GRADIENT }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", textStyle: {
                                         flex: '1 0 0',
                                         minWidth: 0,
                                         wordBreak: 'break-word',
@@ -49,7 +49,7 @@ export const SelectAvatarCard = ({ state = SelectAvatarCardState.Filled, showHea
                             top: '50%',
                             left: '50%',
                             transform: 'translate(-50%, -50%)',
-                        }, children: _jsx(MainButton, { text: selectButtonText, hierarchy: ButtonHierarchy.PrimaryLemon, size: ButtonSize.xs, shape: ButtonShape.Square, onClick: onSelect, testId: testId ? `${testId}-select` : undefined }) })), isError && (_jsx(Box, { position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", sx: {
+                        }, children: _jsx(MainButton, { text: selectButtonText, hierarchy: ButtonHierarchy.PrimaryLemon, size: ButtonSize.xxs, shape: ButtonShape.Square, onClick: onSelect, testId: testId ? `${testId}-select` : undefined }) })), isError && (_jsx(Box, { position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", sx: {
                             top: '50%',
                             left: '50%',
                             transform: 'translate(-50%, -50%)',

package/dist/stories/UI/TabMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { TabMenuSize } from './types';
@@ -17,7 +17,7 @@ const SIZE_TOKENS = {
     [TabMenuSize.sm]: {
         containerGap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
         containerPadding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xxs)',
-        tabPaddingY: '5px',
+        tabPaddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
         tabRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)',
         tabHeight: 'auto',
         dividerHeight: '20px',
@@ -50,10 +50,38 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
                 height: tab.offsetHeight,
             });
         };
-        measure();
+        // When the bar is scrolled (narrow viewports), bring the active tab into
+        // view rather than leaving it off-screen.
+        const revealActiveTab = () => {
+            const tab = tabRefs.current[activeTab];
+            if (!tab)
+                return;
+            // offsetLeft and scrollLeft share an origin — the container's padding box
+            // — so the visible window is simply [scrollLeft, scrollLeft + clientWidth].
+            const visibleStart = container.scrollLeft;
+            const visibleEnd = visibleStart + container.clientWidth;
+            // Reveal the container's padding alongside the tab, so an edge tab ends
+            // up inset from the border rather than flush against it. Overshooting is
+            // safe — the browser clamps scrollLeft to the scrollable range.
+            const { paddingLeft, paddingRight } = getComputedStyle(container);
+            const tabStart = tab.offsetLeft - (parseFloat(paddingLeft) || 0);
+            const tabEnd = tab.offsetLeft + tab.offsetWidth + (parseFloat(paddingRight) || 0);
+            const behavior = animated ? 'smooth' : 'auto';
+            if (tabStart < visibleStart) {
+                container.scrollTo({ left: tabStart, behavior });
+            }
+            else if (tabEnd > visibleEnd) {
+                container.scrollTo({ left: tabEnd - container.clientWidth, behavior });
+            }
+        };
+        const update = () => {
+            measure();
+            revealActiveTab();
+        };
+        update();
         // Re-measure whenever the container or a tab changes size (e.g. responsive
         // reflow) so the highlight tracks the active tab.
-        const resizeObserver = new ResizeObserver(measure);
+        const resizeObserver = new ResizeObserver(update);
         resizeObserver.observe(container);
         tabRefs.current.forEach((tab) => tab && resizeObserver.observe(tab));
         // Text metrics — and therefore tab widths — change when the fallback font is
@@ -61,14 +89,83 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
         let cancelled = false;
         document.fonts?.ready.then(() => {
             if (!cancelled)
-                measure();
+                update();
         });
         return () => {
             cancelled = true;
             resizeObserver.disconnect();
         };
-    }, [activeTab, size, showDividers, tabs]);
-    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: { boxSizing: 'border-box', ...style }, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
+    }, [activeTab, animated, size, showDividers, tabs]);
+    // A mouse wheel only emits deltaY, which a horizontal-only scroller ignores —
+    // and with the scrollbar hidden that leaves mouse users unable to reach tabs
+    // that are off-screen. Translate vertical wheel into horizontal scroll, but
+    // only while the bar overflows and only while it can still move that way, so
+    // the page keeps scrolling normally at the ends.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleWheel = (event) => {
+            const maxScroll = container.scrollWidth - container.clientWidth;
+            if (maxScroll <= 0)
+                return;
+            // Leave genuine horizontal gestures (trackpad swipe) to the browser.
+            if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))
+                return;
+            const atStart = container.scrollLeft <= 0;
+            const atEnd = container.scrollLeft >= maxScroll - 1;
+            if ((event.deltaY < 0 && atStart) || (event.deltaY > 0 && atEnd))
+                return;
+            event.preventDefault();
+            container.scrollLeft += event.deltaY;
+        };
+        // Not passive: we need preventDefault to stop the page scrolling with us.
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        return () => container.removeEventListener('wheel', handleWheel);
+    }, []);
+    // Arrow keys move between tabs and select as they go (automatic activation),
+    // Home/End jump to the ends. Selection wraps at both edges. Focus is moved
+    // with preventScroll so it doesn't fight the smooth scroll in the effect.
+    const handleKeyDown = (event) => {
+        if (!onTabChange)
+            return;
+        const lastIndex = tabs.length - 1;
+        let nextIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                nextIndex = activeTab >= lastIndex ? 0 : activeTab + 1;
+                break;
+            case 'ArrowLeft':
+                nextIndex = activeTab <= 0 ? lastIndex : activeTab - 1;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = lastIndex;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        onTabChange(nextIndex);
+        tabRefs.current[nextIndex]?.focus({ preventScroll: true });
+    };
+    return (_jsxs(Box, { ref: containerRef, "data-testid": testId, role: 'tablist', onKeyDown: handleKeyDown, position: 'relative', display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: tokens.containerGap, padding: tokens.containerPadding, bgcolor: 'var(--color-background-bg-navigate)', border: '1px solid var(--color-border-border-component)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-md)', sx: {
+            boxSizing: 'border-box',
+            // Tabs keep their natural width (they never shrink), so on narrow
+            // viewports the bar scrolls sideways instead of overflowing its parent.
+            maxWidth: '100%',
+            overflowX: 'auto',
+            // Don't let a horizontal swipe past the end trigger back-navigation.
+            overscrollBehaviorX: 'contain',
+            // This reads as a segmented control, not a scroll region, so the
+            // scrollbar chrome is hidden — touch, trackpad and the
+            // keep-the-active-tab-visible logic below still scroll it.
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': { display: 'none' },
+            ...style,
+        }, children: [indicator && (_jsx(Box, { "aria-hidden": true, position: 'absolute', bgcolor: 'var(--color-background-bg-brand-transparent)', borderRadius: tokens.tabRadius, sx: {
                     left: 0,
                     top: 0,
                     width: indicator.width,
@@ -84,10 +181,18 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
                 const isActive = index === activeTab;
                 return (_jsxs(React.Fragment, { children: [showDividers && index > 0 && (_jsx(Box, { width: '1px', height: tokens.dividerHeight, bgcolor: 'var(--color-border-border-divider)', flexShrink: 0, sx: { zIndex: 1 } })), _jsx(Box, { ref: (el) => {
                                 tabRefs.current[index] = el;
-                            }, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0, height: tokens.tabHeight, paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: tokens.tabPaddingY, borderRadius: tokens.tabRadius, onClick: onTabChange ? () => onTabChange(index) : undefined, sx: {
+                            }, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', flexShrink: 0, height: tokens.tabHeight, paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', paddingY: tokens.tabPaddingY, borderRadius: tokens.tabRadius, role: 'tab', "aria-selected": isActive, 
+                            // Roving tabindex: Tab reaches the active tab, arrow keys move
+                            // within the list. Non-interactive menus stay out of the tab order.
+                            tabIndex: onTabChange ? (isActive ? 0 : -1) : undefined, onClick: onTabChange ? () => onTabChange(index) : undefined, sx: {
                                 boxSizing: 'border-box',
                                 zIndex: 1,
                                 cursor: onTabChange ? 'pointer' : 'default',
+                                // Inset so the ring isn't clipped by the scroll container.
+                                '&:focus-visible': {
+                                    outline: '2px solid var(--color-border-border-component-active)',
+                                    outlineOffset: '-2px',
+                                },
                                 '&:hover': onTabChange && !isActive
                                     ? {
                                         bgcolor: 'var(--color-background-bg-brand-transparent-hover)',
@@ -97,7 +202,7 @@ export const TabMenu = ({ tabs, activeTab = 0, onTabChange, size = TabMenuSize.m
                                 ...tabStyle,
                             }, children: _jsx(Typography, { size: tokens.textSize, weight: tokens.textWeight, color: isActive
                                     ? 'var(--color-text-text-clicable)'
-                                    : 'var(--color-text-text-subtle)', textStyle: {
+                                    : 'var(--color-text-text-label)', textStyle: {
                                     transition: animated ? 'color 0.25s ease' : 'none',
                                 }, children: label }) })] }, index));
             })] }));

package/dist/stories/UI/TabMenu.stories.d.ts

@@ -7,3 +7,9 @@ export declare const Medium: Story;
 export declare const Small: Story;
 export declare const MediumStatic: Story;
 export declare const SmallStatic: Story;
+/**
+ * Five tabs need far more width than a 320px phone offers, so the bar scrolls
+ * sideways rather than overflowing its container. Selecting a tab that sits
+ * off-screen scrolls it back into view.
+ */
+export declare const MobileScrolling: Story;

package/dist/stories/UI/TabMenu.stories.js

@@ -70,7 +70,13 @@ const meta = {
     },
 };
 export default meta;
-const TABS = ['Tab name', 'Tab name', 'Tab name', 'Tab name', 'Tab name'];
+const TABS = [
+    'Tab name 1',
+    'Tab name 2',
+    'Tab name 3',
+    'Tab name 4',
+    'Tab name 5',
+];
 const InteractiveTabMenu = (args) => {
     const [activeTab, setActiveTab] = useState(args.activeTab ?? 0);
     return _jsx(TabMenu, { ...args, activeTab: activeTab, onTabChange: setActiveTab });
@@ -108,3 +114,19 @@ export const SmallStatic = {
         animated: false,
     },
 };
+/**
+ * Five tabs need far more width than a 320px phone offers, so the bar scrolls
+ * sideways rather than overflowing its container. Selecting a tab that sits
+ * off-screen scrolls it back into view.
+ */
+export const MobileScrolling = {
+    render: (args) => _jsx(InteractiveTabMenu, { ...args }),
+    args: {
+        ...Medium.args,
+        size: TabMenuSize.sm,
+    },
+    parameters: {
+        layout: 'padded',
+        viewport: { defaultViewport: 'mobile1' },
+    },
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.4.5",
+  "version": "0.4.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",