@beydesign/storybook 0.4.4 → 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/Navigation/Drawer/Drawer.js

@@ -7,6 +7,9 @@ import { NavPanel } from '../internal';
 import { getIconComponent } from '../../../utils';
 const EXPANDED_WIDTH = '238px';
 const COLLAPSED_WIDTH = '68px';
+/** Mirrors the horizontal padding `NavPanel` applies around its content. */
+const PANEL_PADDING_X = 'var(--spacing-tokens-size-in-px-spacing-spacing-xl, 16px)';
+const contentWidth = (panelWidth) => `calc(${panelWidth} - 2 * ${PANEL_PADDING_X})`;
 /** Composed from the semantic `shadow-sm` design token. */
 const SHADOW_SM = 'var(--global-shadows-shadow-sm-offset-x) var(--global-shadows-shadow-sm-offset-y) var(--global-shadows-shadow-sm-blur) var(--global-shadows-shadow-sm-spread) var(--global-shadows-shadow-sm-color)';
 /**
@@ -21,6 +24,21 @@ const Shell = styled.aside `
   width: ${({ $collapsed }) => ($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
   transition: width 0.3s ease-in-out;
 `;
+/**
+ * Holds the body at the width its state will settle at, rather than letting it
+ * fill the shell mid-animation. Without this the expanded layout reflows inside
+ * a shell that is still collapsed — labels squeeze to an ellipsis and the
+ * credits caption wraps down the card — before snapping into place. The panel
+ * clips the overhang (`overflow-x: hidden`) and reveals it as the width catches
+ * up.
+ */
+const Content = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: ${({ $collapsed }) => contentWidth($collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH)};
+`;
 const ToggleButton = styled.button `
   appearance: none;
   position: absolute;
@@ -77,5 +95,5 @@ export const Drawer = ({ navItems, activeKey, collapsed, defaultCollapsed = fals
             setInternalCollapsed(next);
         onToggle?.(next);
     };
-    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsx(NavPanel, { children: _jsx(DrawerBody, { navItems: navItems, activeKey: activeKey, size: drawerSize, credits: credits, creditsLoading: creditsLoading, profile: profile, profileLoading: profileLoading, logo: logo }) }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
+    return (_jsxs(Shell, { "$collapsed": isCollapsed, className: className, style: style, "data-testid": testId, children: [_jsx(NavPanel, { children: _jsx(Content, { "$collapsed": isCollapsed, children: _jsx(DrawerBody, { navItems: navItems, activeKey: activeKey, size: drawerSize, credits: credits, creditsLoading: creditsLoading, profile: profile, profileLoading: profileLoading, logo: logo }) }) }), showToggle && (_jsx(ToggleButton, { type: "button", onClick: handleToggle, "aria-label": isCollapsed ? 'Expand sidebar' : 'Collapse sidebar', children: _jsx(ToggleIcon, { "$collapsed": isCollapsed, children: getIconComponent('CaretLeft', { size: 16, weight: 'bold' }) }) }))] }));
 };

package/dist/stories/Navigation/Drawer/DrawerProfile.d.ts

@@ -3,8 +3,9 @@ import { DrawerProfileProps } from './types';
 /**
  * User profile footer for the {@link Drawer}: avatar plus name and email.
  * Collapses to just the avatar. When `menuItems` are supplied, clicking the
- * profile drops an inline menu directly below the row (e.g. a "Log out"
- * action), styled like the drawer's nav items so it reads as part of the drawer
- * rather than a floating overlay. The profile row itself stays in place.
+ * profile opens a popover menu anchored to the row (e.g. a "Log out" action)
+ * rather than expanding the drawer footer, so the drawer's layout never shifts.
+ * The menu always shows its labels — including when the drawer is collapsed and
+ * the popover opens to the side of the avatar.
  */
 export declare const DrawerProfile: React.FC<DrawerProfileProps>;

package/dist/stories/Navigation/Drawer/DrawerProfile.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { DrawerSize } from './types';
-import { Avatar, AvatarSize, AvatarStyle } from '../../UI';
+import { Avatar, AvatarSize, AvatarStyle, Popover, PopoverVariant, } from '../../UI';
 import { Typography, TypographySize, TypographyWeight } from '../../Typography';
 import { getIconComponent } from '../../../utils';
 const Container = styled.div `
@@ -54,31 +54,31 @@ const Chevron = styled.span `
     transition: none;
   }
 `;
+/** The popover's border sits outside this list, on the surface around it. */
+const POPOVER_BORDER = 2;
 /**
- * Collapsible wrapper for the menu that drops below the profile row. Animates
- * height with the `grid-template-rows: 0fr -> 1fr` trick so it reveals/hides
- * smoothly without measuring the content.
+ * MUI puts a 2px margin on each side of the tooltip surface, which pushed the
+ * menu 2px right of the profile row. Drop the side margins so the two line up;
+ * the bottom margin is the gap to the row, so it stays.
  */
-const Menu = styled.div `
-  display: grid;
-  grid-template-rows: ${({ $open }) => ($open ? '1fr' : '0fr')};
-  transition: grid-template-rows 0.25s ease-in-out;
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
+const MenuPopover = styled(Popover) `
+  && {
+    margin-left: 0;
+    margin-right: 0;
   }
 `;
-const MenuClip = styled.div `
-  overflow: hidden;
-  min-height: 0;
-`;
+/**
+ * Menu surface rendered inside the popover. Owns its own padding — the popover
+ * is handed `padding="0"` — so that pinning its width lines the menu up with
+ * the profile row exactly, with no surface padding left to widen it.
+ */
 const MenuList = styled.div `
   display: flex;
   flex-direction: column;
   gap: var(--spacing-tokens-size-in-px-spacing-spacing-xxs, 2px);
-  padding-top: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
-  margin-top: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
-  border-top: 1px solid var(--color-border-border-subtle);
+  box-sizing: border-box;
+  padding: var(--spacing-tokens-size-in-px-spacing-spacing-xs, 4px);
+  min-width: 200px;
 `;
 /** Menu rows reuse the nav-item look so they read as part of the drawer. */
 const MenuItemButton = styled.button `
@@ -90,7 +90,7 @@ const MenuItemButton = styled.button `
   gap: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
   width: 100%;
   box-sizing: border-box;
-  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'flex-start'};
+  justify-content: flex-start;
   padding: var(--spacing-tokens-size-in-px-spacing-spacing-md, 8px);
   border-radius: var(--spacing-tokens-size-in-px-radius-radius-xs);
   font: inherit;
@@ -113,58 +113,62 @@ const MenuItemButton = styled.button `
 /**
  * User profile footer for the {@link Drawer}: avatar plus name and email.
  * Collapses to just the avatar. When `menuItems` are supplied, clicking the
- * profile drops an inline menu directly below the row (e.g. a "Log out"
- * action), styled like the drawer's nav items so it reads as part of the drawer
- * rather than a floating overlay. The profile row itself stays in place.
+ * profile opens a popover menu anchored to the row (e.g. a "Log out" action)
+ * rather than expanding the drawer footer, so the drawer's layout never shifts.
+ * The menu always shows its labels — including when the drawer is collapsed and
+ * the popover opens to the side of the avatar.
  */
 export const DrawerProfile = ({ size = DrawerSize.Expanded, name, email, avatarImage, avatarText, menuItems, onClick, className, style, testId, }) => {
     const isCollapsed = size === DrawerSize.Collapsed;
     const hasMenu = Boolean(menuItems && menuItems.length > 0);
     const [open, setOpen] = useState(false);
     const containerRef = useRef(null);
-    // Close the inline menu on outside click or Escape.
+    const [menuWidth, setMenuWidth] = useState();
+    // Match the menu to the profile row so the two line up. Only when expanded —
+    // collapsed, the row is just the avatar and the menu sizes to its content.
+    useEffect(() => {
+        if (!open || isCollapsed)
+            return;
+        const width = containerRef.current?.offsetWidth;
+        if (width)
+            setMenuWidth(width - POPOVER_BORDER);
+    }, [open, isCollapsed]);
+    // Outside clicks are handled by the Popover itself; Escape is not.
     useEffect(() => {
         if (!open)
             return;
-        const handlePointer = (event) => {
-            if (!containerRef.current?.contains(event.target)) {
-                setOpen(false);
-            }
-        };
         const handleKey = (event) => {
             if (event.key === 'Escape')
                 setOpen(false);
         };
-        document.addEventListener('mousedown', handlePointer);
         document.addEventListener('keydown', handleKey);
-        return () => {
-            document.removeEventListener('mousedown', handlePointer);
-            document.removeEventListener('keydown', handleKey);
-        };
+        return () => document.removeEventListener('keydown', handleKey);
     }, [open]);
     const clickable = hasMenu || Boolean(onClick);
-    const handleRowClick = () => {
-        if (hasMenu) {
-            setOpen((prev) => !prev);
-        }
-        else {
-            onClick?.();
-        }
-    };
     const handleItemClick = (item) => {
         setOpen(false);
         item.onClick?.();
     };
-    return (_jsxs(Container, { ref: containerRef, className: className, style: style, "data-testid": testId, children: [_jsxs(Row, { "$collapsed": isCollapsed, "$clickable": clickable, "$active": hasMenu && open, onClick: handleRowClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-expanded": hasMenu ? open : undefined, onKeyDown: clickable
-                    ? (event) => {
-                        if (event.key === 'Enter' || event.key === ' ') {
-                            event.preventDefault();
-                            handleRowClick();
-                        }
-                    }
-                    : undefined, children: [_jsx(Avatar, { size: AvatarSize.sm, border: true, avatarStyle: avatarImage ? AvatarStyle.Picture : AvatarStyle.Letters, image: avatarImage, text: avatarText ?? name }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(TextColumn, { children: [_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: name }) }), email && (_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: email }) }))] }), hasMenu && (_jsx(Chevron, { "$open": open, children: getIconComponent('CaretDown', { size: 16, weight: 'bold' }) }))] }))] }), hasMenu && (_jsx(Menu, { "$open": open, "aria-hidden": !open, children: _jsx(MenuClip, { children: _jsx(MenuList, { role: "menu", children: menuItems?.map((item, index) => (_jsxs(MenuItemButton, { type: "button", role: "menuitem", tabIndex: open ? 0 : -1, "$destructive": Boolean(item.destructive), "$collapsed": isCollapsed, title: isCollapsed ? item.label : undefined, onClick: () => handleItemClick(item), children: [item.icon &&
-                                    getIconComponent(item.icon, {
-                                        size: 20,
-                                        color: 'currentColor',
-                                    }), !isCollapsed && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "inherit", children: item.label }))] }, index))) }) }) }))] }));
+    const row = (_jsxs(Row, { "$collapsed": isCollapsed, "$clickable": clickable, "$active": hasMenu && open, 
+        // With a menu the Popover owns the click; otherwise fire the row handler.
+        onClick: hasMenu ? undefined : onClick, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? open : undefined, onKeyDown: clickable
+            ? (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    if (hasMenu)
+                        setOpen((prev) => !prev);
+                    else
+                        onClick?.();
+                }
+            }
+            : undefined, children: [_jsx(Avatar, { size: AvatarSize.sm, border: true, avatarStyle: avatarImage ? AvatarStyle.Picture : AvatarStyle.Letters, image: avatarImage, text: avatarText ?? name }), !isCollapsed && (_jsxs(_Fragment, { children: [_jsxs(TextColumn, { children: [_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", children: name }) }), email && (_jsx(TextLine, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-paragraph)", children: email }) }))] }), hasMenu && (_jsx(Chevron, { "$open": open, children: getIconComponent('CaretDown', { size: 16, weight: 'bold' }) }))] }))] }));
+    const menu = (_jsx(MenuList, { role: "menu", style: isCollapsed ? undefined : { width: menuWidth, minWidth: 0 }, children: menuItems?.map((item, index) => (_jsxs(MenuItemButton, { type: "button", role: "menuitem", "$destructive": Boolean(item.destructive), onClick: () => handleItemClick(item), children: [item.icon &&
+                    getIconComponent(item.icon, {
+                        size: 20,
+                        color: 'currentColor',
+                    }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "inherit", children: item.label })] }, index))) }));
+    return (_jsx(Container, { ref: containerRef, className: className, style: style, "data-testid": testId, children: hasMenu ? (_jsx(MenuPopover, { content: menu, variant: PopoverVariant.Light, 
+            // Anchored above the row so the menu never covers the profile; to the
+            // side when collapsed, where there is no room above the avatar.
+            placement: isCollapsed ? 'right-end' : 'top-start', trigger: "click", arrow: false, maxWidth: isCollapsed ? 260 : menuWidth, padding: "0", open: open, onOpenChange: setOpen, children: row })) : (row) }));
 };

package/dist/stories/Navigation/Drawer/types.d.ts

@@ -100,8 +100,8 @@ export interface DrawerProfileProps {
     /** Overrides the initials source (defaults to `name`). */
     avatarText?: string;
     /**
-     * When provided, clicking the profile drops an inline menu with these items
-     * (e.g. a "Log out" action) directly below the profile row instead of firing
+     * When provided, clicking the profile opens a popover menu with these items
+     * (e.g. a "Log out" action) anchored to the profile row instead of firing
      * `onClick`.
      */
     menuItems?: DrawerProfileMenuItem[];

package/dist/stories/Navigation/internal/NavRow.js

@@ -37,10 +37,15 @@ const StyledNavRow = styled.button `
   background-color: ${({ $state }) => background($state)};
   opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
   cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
+  /*
+   * Padding deliberately does not transition. The icon lands on the same x in
+   * both states, so animating it gained nothing visually — but since the row is
+   * auto height once expanded, growing the padding from 0 pumped every row from
+   * the bare icon height back up to full, shifting the list as it went.
+   */
   transition:
     background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    padding 0.3s ease-in-out;
+    color 0.2s ease-in-out;
 
   &:hover {
     ${({ $state }) => $state === NavItemState.Inactive

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.4",
+  "version": "0.4.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",