@telefonica/mistica 17.5.0 → 17.7.0

package/src/community/advanced-data-card.tsx

@@ -10,17 +10,19 @@ import Divider from '../divider';
 import {Text2, Text, useTextPresetSizes} from '../text';
 import {vars} from '../skins/skin-contract.css';
 import Box from '../box';
-import Touchable from '../touchable';
 import classNames from 'classnames';
+import Touchable from '../touchable';
 import {useInnerText, useTheme} from '../hooks';
 import {getPrefixedDataAttributes} from '../utils/dom';
 import Inline from '../inline';
 import {applyCssVars} from '../utils/css';
 import Tag from '../tag';
 import {isBiggerHeading} from '../utils/headings';
-import {TopActions} from '../card-internal';
+import {TopActions, useControlState, CardWithControl} from '../card-internal';
+import {useRadioContext} from '../radio-button';
+import * as cardStyles from '../card-internal.css';
 
-import type {CardAction} from '../card-internal';
+import type {CardSelectionProps, CardAction} from '../card-internal';
 import type {PressHandler} from '../touchable';
 import type {ExclusifyUnion} from '../utils/utility-types';
 import type StackingGroup from '../stacking-group';
@@ -55,7 +57,11 @@ type TouchableProps = {
       }
 >;
 type TouchableCard<T> = T & TouchableProps;
-type MaybeTouchableCard<T> = ExclusifyUnion<TouchableCard<T> | T>;
+type CardInteractionProps<T> = ExclusifyUnion<
+    | (TouchableCard<T> & {selected?: boolean})
+    | (T & {selected?: boolean})
+    | (Omit<T, 'actions' | 'onClose'> & CardSelectionProps)
+>;
 
 type CardContentProps = {
     headline?: string | RendersNullableElement<typeof Tag>;
@@ -265,7 +271,7 @@ type AllowedSlot =
     | typeof SimpleBlock
     | typeof ValueBlock;
 
-type AdvancedDataCardProps = MaybeTouchableCard<{
+type AdvancedDataCardProps = CardInteractionProps<{
     stackingGroup?: RendersNullableElement<typeof StackingGroup>;
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
@@ -295,6 +301,10 @@ type AdvancedDataCardProps = MaybeTouchableCard<{
 export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCardProps>(
     (
         {
+            selected,
+            checkbox,
+            switch: switchProps,
+            radioValue,
             stackingGroup,
             headline,
             pretitle,
@@ -326,14 +336,24 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
         },
         ref
     ) => {
-        const isTouchable = !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
-
+        const {isChecked, toggleChecked} = useControlState(switchProps || checkbox);
+        const radioContext = useRadioContext();
+        const isSelectable = !!switchProps || !!checkbox || radioValue !== undefined;
+        const isSelected =
+            switchProps || checkbox
+                ? isChecked
+                : radioValue !== undefined
+                  ? radioContext.selectedValue === radioValue
+                  : selected;
+        const {isIos} = useTheme();
+        const isTouchable =
+            isSelectable || !!touchableProps.href || !!touchableProps.onPress || !!touchableProps.to;
         const footerProps = {button, footerImage, footerText, footerTextLinesMax, buttonLink};
 
         const hasFooter = !!button || !!footerImage || !!footerText || !!buttonLink;
         const hasSlots = !!slot?.length;
 
-        const topActionsCount = (actions?.length || 0) + (onClose ? 1 : 0);
+        const topActionsCount = isSelectable ? 1 : (actions?.length || 0) + (onClose ? 1 : 0);
 
         const {text: headlineText, ref: headlineRef} = useInnerText();
         const {text: slotText, ref: slotRef} = useInnerText();
@@ -347,79 +367,109 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
                 .filter(Boolean)
                 .join(' ');
 
+        const content = (
+            <>
+                {isTouchable && <div className={styles.touchableCardHoverOverlay} />}
+
+                <div
+                    className={classNames(
+                        styles.cardContentStyle,
+                        !hasFooter && !hasSlots ? styles.minHeight : ''
+                    )}
+                    aria-hidden={isTouchable && !isSelectable}
+                >
+                    <Box paddingTop={8}>
+                        <Inline space={0}>
+                            <Stack space={8}>
+                                {stackingGroup}
+                                <CardContent
+                                    headline={headline}
+                                    headlineRef={headlineRef}
+                                    pretitle={pretitle}
+                                    pretitleAs={pretitleAs}
+                                    pretitleLinesMax={pretitleLinesMax}
+                                    title={title}
+                                    titleAs={titleAs}
+                                    titleLinesMax={titleLinesMax}
+                                    subtitle={subtitle}
+                                    subtitleLinesMax={subtitleLinesMax}
+                                    description={description}
+                                    descriptionLinesMax={descriptionLinesMax}
+                                />
+                            </Stack>
+                            {/** Hack to avoid content from rendering on top of the top action buttons */}
+                            {!stackingGroup && (
+                                <div
+                                    style={applyCssVars({
+                                        [styles.vars.topActionsCount]: String(topActionsCount),
+                                    })}
+                                    className={classNames(
+                                        styles.topActionsWithoutIcon,
+                                        switchProps && styles.switchSpace[isIos ? 'ios' : 'default']
+                                    )}
+                                />
+                            )}
+                        </Inline>
+                    </Box>
+                </div>
+                <div style={{flexGrow: 1}} />
+                {hasSlots && (
+                    <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable && !isSelectable}>
+                        {slot.map((item, index) => {
+                            return (
+                                <div key={index}>
+                                    <div className={styles.paddingX}>{item}</div>
+
+                                    {index + 1 !== slot.length && (
+                                        <Box paddingY={slotDividerPadding}>
+                                            {!noSlotDivider && <Divider />}
+                                        </Box>
+                                    )}
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </>
+        );
+
         return (
             <section
-                className={styles.container}
+                className={classNames(
+                    styles.container,
+                    isSelected && cardStyles.selectionOutline,
+                    isSelected && cardStyles.selectionOutlineColor.default
+                )}
                 {...getPrefixedDataAttributes({testid: 'AdvancedDataCard', ...dataAttributes})}
                 ref={ref}
                 aria-label={isTouchable ? undefined : ariaLabel}
             >
                 <Boxed className={styles.dataCard} width="100%" height="100%" minHeight={styles.MIN_HEIGHT}>
-                    <Touchable
-                        maybe
-                        {...touchableProps}
-                        aria-label={isTouchable ? ariaLabel : undefined}
-                        className={styles.touchable}
-                    >
-                        {isTouchable && <div className={styles.touchableCardHoverOverlay} />}
-
-                        <div
-                            className={classNames(
-                                styles.cardContentStyle,
-                                !hasFooter && !hasSlots ? styles.minHeight : ''
-                            )}
-                            aria-hidden={isTouchable}
+                    {isSelectable ? (
+                        <CardWithControl
+                            maybe
+                            {...(checkbox
+                                ? {checkbox}
+                                : switchProps
+                                  ? {switch: switchProps}
+                                  : {radioValue: radioValue ?? ''})}
+                            checked={isChecked}
+                            onChange={toggleChecked}
+                            aria-label={ariaLabel}
+                            className={classNames(styles.touchable, styles.selectionTouchable)}
                         >
-                            <Box paddingTop={8}>
-                                <Inline space={0}>
-                                    <Stack space={8}>
-                                        {stackingGroup}
-                                        <CardContent
-                                            headline={headline}
-                                            headlineRef={headlineRef}
-                                            pretitle={pretitle}
-                                            pretitleAs={pretitleAs}
-                                            pretitleLinesMax={pretitleLinesMax}
-                                            title={title}
-                                            titleAs={titleAs}
-                                            titleLinesMax={titleLinesMax}
-                                            subtitle={subtitle}
-                                            subtitleLinesMax={subtitleLinesMax}
-                                            description={description}
-                                            descriptionLinesMax={descriptionLinesMax}
-                                        />
-                                    </Stack>
-                                    {/** Hack to avoid content from rendering on top of the top action buttons */}
-                                    {!stackingGroup && (
-                                        <div
-                                            style={applyCssVars({
-                                                [styles.vars.topActionsCount]: String(topActionsCount),
-                                            })}
-                                            className={styles.topActionsWithoutIcon}
-                                        />
-                                    )}
-                                </Inline>
-                            </Box>
-                        </div>
-                        <div style={{flexGrow: 1}} />
-                        {hasSlots && (
-                            <div className={styles.slot} ref={slotRef} aria-hidden={isTouchable}>
-                                {slot.map((item, index) => {
-                                    return (
-                                        <div key={index}>
-                                            <div className={styles.paddingX}>{item}</div>
-
-                                            {index + 1 !== slot.length && (
-                                                <Box paddingY={slotDividerPadding}>
-                                                    {!noSlotDivider && <Divider />}
-                                                </Box>
-                                            )}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        )}
-                    </Touchable>
+                            {content}
+                        </CardWithControl>
+                    ) : (
+                        <Touchable
+                            maybe
+                            {...touchableProps}
+                            aria-label={isTouchable ? ariaLabel : undefined}
+                            className={styles.touchable}
+                        >
+                            {content}
+                        </Touchable>
+                    )}
                     {hasFooter && <CardFooter {...footerProps} />}
                 </Boxed>
                 <TopActions actions={actions} onClose={onClose} />

package/src/community/ai-card.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import {BaseTouchable} from '../touchable';
-import {Text3} from '../text';
+import {Text2} from '../text';
 import {vars} from '../skins/skin-contract.css';
 import {useIsInViewport} from '../hooks';
 import {isClientSide} from '../utils/environment';
@@ -201,7 +201,7 @@ const AiCard = ({
                 </span>
             )}
             <div ref={textLineRef} className={styles.textLine} aria-hidden="true" style={textLineStyle}>
-                <Text3 regular color={vars.colors.textPrimary} as="span">
+                <Text2 regular color={vars.colors.textPrimary} as="span">
                     <span className={styles.textWrapper}>
                         <span className={styles.ghost}>
                             {text}
@@ -222,7 +222,7 @@ const AiCard = ({
                             )}
                         </span>
                     </span>
-                </Text3>
+                </Text2>
             </div>
         </BaseTouchable>
     );

package/src/index.tsx

@@ -972,6 +972,9 @@ export {default as IconDisturbRegular} from './generated/mistica-icons/icon-dist
 export {default as IconDnaFilled} from './generated/mistica-icons/icon-dna-filled';
 export {default as IconDnaLight} from './generated/mistica-icons/icon-dna-light';
 export {default as IconDnaRegular} from './generated/mistica-icons/icon-dna-regular';
+export {default as IconDocumentInformationFilled} from './generated/mistica-icons/icon-document-information-filled';
+export {default as IconDocumentInformationLight} from './generated/mistica-icons/icon-document-information-light';
+export {default as IconDocumentInformationRegular} from './generated/mistica-icons/icon-document-information-regular';
 export {default as IconDocumentOtherFilled} from './generated/mistica-icons/icon-document-other-filled';
 export {default as IconDocumentOtherLight} from './generated/mistica-icons/icon-document-other-light';
 export {default as IconDocumentOtherRegular} from './generated/mistica-icons/icon-document-other-regular';
@@ -1393,6 +1396,9 @@ export {default as IconInternetPendriveFilled} from './generated/mistica-icons/i
 export {default as IconInternetPendriveLight} from './generated/mistica-icons/icon-internet-pendrive-light';
 export {default as IconInternetPendriveRegular} from './generated/mistica-icons/icon-internet-pendrive-regular';
 export {default as IconInternetRegular} from './generated/mistica-icons/icon-internet-regular';
+export {default as IconInternetRoamingFilled} from './generated/mistica-icons/icon-internet-roaming-filled';
+export {default as IconInternetRoamingLight} from './generated/mistica-icons/icon-internet-roaming-light';
+export {default as IconInternetRoamingRegular} from './generated/mistica-icons/icon-internet-roaming-regular';
 export {default as IconIntranetFilled} from './generated/mistica-icons/icon-intranet-filled';
 export {default as IconIntranetLight} from './generated/mistica-icons/icon-intranet-light';
 export {default as IconIntranetRegular} from './generated/mistica-icons/icon-intranet-regular';
@@ -1585,6 +1591,9 @@ export {default as IconMobileDeviceRegular} from './generated/mistica-icons/icon
 export {default as IconMobileEuroFilled} from './generated/mistica-icons/icon-mobile-euro-filled';
 export {default as IconMobileEuroLight} from './generated/mistica-icons/icon-mobile-euro-light';
 export {default as IconMobileEuroRegular} from './generated/mistica-icons/icon-mobile-euro-regular';
+export {default as IconMobileInformationFilled} from './generated/mistica-icons/icon-mobile-information-filled';
+export {default as IconMobileInformationLight} from './generated/mistica-icons/icon-mobile-information-light';
+export {default as IconMobileInformationRegular} from './generated/mistica-icons/icon-mobile-information-regular';
 export {default as IconMobilePauseFilled} from './generated/mistica-icons/icon-mobile-pause-filled';
 export {default as IconMobilePauseLight} from './generated/mistica-icons/icon-mobile-pause-light';
 export {default as IconMobilePauseRegular} from './generated/mistica-icons/icon-mobile-pause-regular';
@@ -1967,6 +1976,9 @@ export {default as IconSdFilled} from './generated/mistica-icons/icon-sd-filled'
 export {default as IconSdLight} from './generated/mistica-icons/icon-sd-light';
 export {default as IconSdRegular} from './generated/mistica-icons/icon-sd-regular';
 export {default as IconSeaLight} from './generated/mistica-icons/icon-sea-light';
+export {default as IconSearchAiFilled} from './generated/mistica-icons/icon-search-ai-filled';
+export {default as IconSearchAiLight} from './generated/mistica-icons/icon-search-ai-light';
+export {default as IconSearchAiRegular} from './generated/mistica-icons/icon-search-ai-regular';
 export {default as IconSearchCloudFilled} from './generated/mistica-icons/icon-search-cloud-filled';
 export {default as IconSearchCloudLight} from './generated/mistica-icons/icon-search-cloud-light';
 export {default as IconSearchCloudRegular} from './generated/mistica-icons/icon-search-cloud-regular';

package/src/menu.css.ts

@@ -4,23 +4,21 @@ import {vars as skinVars} from './skins/skin-contract.css';
 import * as mq from './media-queries.css';
 
 const top = createVar();
-const bottom = createVar();
 const left = createVar();
 const width = createVar();
-const right = createVar();
 const maxHeight = createVar();
+const maxWidth = createVar();
 const transformOrigin = createVar();
 
 const MENU_MIN_WIDTH = 136;
-const MENU_MAX_WIDTH = 280;
+export const MENU_MAX_WIDTH = 280;
 
 export const vars = {
     top,
-    bottom,
     left,
-    right,
     width,
     maxHeight,
+    maxWidth,
     transformOrigin,
 };
 
@@ -35,12 +33,10 @@ export const menuContainer = style([
     }),
     {
         top,
-        bottom,
         left,
-        right,
         width,
-        minWidth: MENU_MIN_WIDTH,
-        maxWidth: MENU_MAX_WIDTH,
+        minWidth: `min(${MENU_MIN_WIDTH}px, ${maxWidth})`,
+        maxWidth: `min(${MENU_MAX_WIDTH}px, ${maxWidth})`,
         maxHeight,
         transformOrigin,
         listStyleType: 'none',

package/src/menu.tsx

@@ -270,8 +270,14 @@ export const MenuSection = ({children}: MenuSectionProps): JSX.Element => {
     );
 };
 
-const MARGIN_THRESHOLD = 12;
 const MENU_OFFSET_FROM_TARGET = 8;
+const REFLECTED_PLACEMENT = {top: 'bottom', bottom: 'top', left: 'right', right: 'left'} as const;
+const TRANSFORM_ORIGINS = {
+    top: 'center bottom',
+    bottom: 'center top',
+    left: 'right center',
+    right: 'left center',
+} as const;
 
 type MenuRenderProps = {
     ref: (element: HTMLElement | null) => void;
@@ -286,19 +292,36 @@ type TargetRenderProps = {
 };
 
 export type MenuProps = {
+    /**
+     * Width in pixels. Values are clamped to the range 136–280.
+     * The final width never exceeds the viewport width, even if that
+     * means going below the 136px minimum.
+     *
+     * Examples: 100 → 136, 200 → 200, 500 → 280.
+     */
     width?: number;
     renderTarget: (props: TargetRenderProps) => React.ReactNode;
     renderMenu: (props: MenuRenderProps) => React.ReactNode;
     children?: void;
-    position?: 'left' | 'right';
     dataAttributes?: DataAttributes;
-};
+} & ExclusifyUnion<
+    | {
+          /** @deprecated Use placement and alignment instead. */
+          position?: 'left' | 'right';
+      }
+    | {
+          placement?: 'top' | 'bottom' | 'left' | 'right';
+          alignment?: 'start' | 'middle' | 'end';
+      }
+>;
 
 export const Menu = ({
     renderTarget,
     renderMenu,
     width,
     position = 'left',
+    placement = 'bottom',
+    alignment = position === 'left' ? 'start' : 'end',
     dataAttributes,
 }: MenuProps): JSX.Element => {
     const [isMenuOpen, setIsMenuOpen] = React.useState(false);
@@ -309,11 +332,9 @@ export const Menu = ({
     const menuRef = React.useRef<HTMLDivElement | null>(null);
 
     const [itemsComputedProps, setItemsComputedProps] = React.useState<{
-        left?: number;
-        right?: number;
-        top: string;
-        bottom: string;
-        maxHeight?: number;
+        left: number;
+        top: number;
+        maxHeight: number;
         transformOrigin: string;
     } | null>(null);
 
@@ -326,44 +347,52 @@ export const Menu = ({
             return;
         }
 
-        const {top: topTarget, right: rightTarget, left: leftTarget, bottom: bottomTarget} = targetRect;
-
-        const heightMenu = menu.scrollHeight;
-
-        const leftDirection = position === 'left' ? leftTarget : undefined;
-        const rightDirection = position === 'right' ? windowSize.width - rightTarget : undefined;
-
-        const topTargetWithOffset = topTarget - MENU_OFFSET_FROM_TARGET;
-        const bottomTargetWithOffset = bottomTarget + MENU_OFFSET_FROM_TARGET;
-
-        const availableSpaceOnBottom = windowSize.height - bottomTargetWithOffset - MARGIN_THRESHOLD;
-        const availableSpaceOnTop = topTargetWithOffset - MARGIN_THRESHOLD;
-        const menuFitsOnBottom = availableSpaceOnBottom > heightMenu;
-        const menuFitsOnTop = availableSpaceOnTop > heightMenu;
-
-        const isMenuOnBottom =
-            menuFitsOnBottom || (!menuFitsOnTop && availableSpaceOnBottom > availableSpaceOnTop);
-
-        if (isMenuOnBottom) {
-            setItemsComputedProps({
-                left: leftDirection,
-                right: rightDirection,
-                top: `${bottomTargetWithOffset}px`,
-                bottom: 'auto',
-                maxHeight: menuFitsOnBottom ? undefined : availableSpaceOnBottom,
-                transformOrigin: 'center top',
-            });
-        } else {
-            setItemsComputedProps({
-                left: leftDirection,
-                right: rightDirection,
-                top: 'auto',
-                bottom: `${windowSize.height - topTargetWithOffset}px`,
-                maxHeight: menuFitsOnTop ? undefined : availableSpaceOnTop,
-                transformOrigin: 'center bottom',
-            });
+        const availableSpace = {
+            top: targetRect.top - MENU_OFFSET_FROM_TARGET,
+            bottom: windowSize.height - targetRect.bottom - MENU_OFFSET_FROM_TARGET,
+            left: targetRect.left - MENU_OFFSET_FROM_TARGET,
+            right: windowSize.width - targetRect.right - MENU_OFFSET_FROM_TARGET,
+        };
+        const menuSize = placement === 'top' || placement === 'bottom' ? menu.scrollHeight : menu.offsetWidth;
+        const candidateReflectedPlacement = REFLECTED_PLACEMENT[placement];
+        let finalPlacement =
+            availableSpace[placement] < menuSize &&
+            availableSpace[candidateReflectedPlacement] > availableSpace[placement]
+                ? candidateReflectedPlacement
+                : placement;
+        if (
+            (finalPlacement === 'left' || finalPlacement === 'right') &&
+            availableSpace[finalPlacement] < menu.offsetWidth
+        ) {
+            finalPlacement = availableSpace.bottom >= availableSpace.top ? 'bottom' : 'top';
         }
-    }, [position, isMenuOpen, menu, target, width, windowSize]);
+
+        const isVertical = finalPlacement === 'top' || finalPlacement === 'bottom';
+        const maxHeight = Math.max(0, isVertical ? availableSpace[finalPlacement] : windowSize.height);
+        const heightMenu = Math.min(menu.scrollHeight, maxHeight);
+        const widthMenu = menu.offsetWidth;
+        const targetStart = isVertical ? targetRect.left : targetRect.top;
+        const targetSize = isVertical ? targetRect.width : targetRect.height;
+        const alignmentSize = isVertical ? widthMenu : heightMenu;
+        const alignmentOffset = alignment === 'start' ? 0 : alignment === 'end' ? 1 : 0.5;
+        const alignedPosition = targetStart + (targetSize - alignmentSize) * alignmentOffset;
+        const shiftedPosition = Math.max(
+            0,
+            Math.min(alignedPosition, (isVertical ? windowSize.width : windowSize.height) - alignmentSize)
+        );
+        const positions = {
+            top: {left: shiftedPosition, top: targetRect.top - MENU_OFFSET_FROM_TARGET - heightMenu},
+            bottom: {left: shiftedPosition, top: targetRect.bottom + MENU_OFFSET_FROM_TARGET},
+            left: {left: targetRect.left - MENU_OFFSET_FROM_TARGET - widthMenu, top: shiftedPosition},
+            right: {left: targetRect.right + MENU_OFFSET_FROM_TARGET, top: shiftedPosition},
+        };
+
+        setItemsComputedProps({
+            ...positions[finalPlacement],
+            maxHeight,
+            transformOrigin: TRANSFORM_ORIGINS[finalPlacement],
+        });
+    }, [placement, alignment, isMenuOpen, menu, target, width, windowSize]);
 
     const targetProps = React.useMemo(
         () => ({
@@ -504,29 +533,18 @@ export const Menu = ({
                         <div
                             style={{
                                 ...applyCssVars({
+                                    [styles.vars.maxWidth]:
+                                        `${Math.min(styles.MENU_MAX_WIDTH, Math.max(0, windowSize.width))}px`,
+                                    ...(width && {
+                                        [styles.vars.width]: `${width}px`,
+                                    }),
                                     ...(itemsComputedProps
                                         ? {
-                                              [styles.vars.top]: itemsComputedProps.top,
-                                              [styles.vars.bottom]: itemsComputedProps.bottom,
+                                              [styles.vars.top]: `${itemsComputedProps.top}px`,
+                                              [styles.vars.left]: `${itemsComputedProps.left}px`,
+                                              [styles.vars.maxHeight]: `${itemsComputedProps.maxHeight}px`,
                                               [styles.vars.transformOrigin]:
                                                   itemsComputedProps.transformOrigin,
-
-                                              ...(itemsComputedProps.left !== undefined && {
-                                                  [styles.vars.left]: `${itemsComputedProps.left}px`,
-                                              }),
-
-                                              ...(itemsComputedProps.right !== undefined && {
-                                                  [styles.vars.right]: `${itemsComputedProps.right}px`,
-                                              }),
-
-                                              ...(itemsComputedProps.maxHeight !== undefined && {
-                                                  [styles.vars.maxHeight]:
-                                                      `${itemsComputedProps.maxHeight}px`,
-                                              }),
-
-                                              ...(width !== undefined && {
-                                                  [styles.vars.width]: width ? `${width}px` : '',
-                                              }),
                                           }
                                         : {}),
                                 }),

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.5.0' as string;
+export const PACKAGE_VERSION = '17.7.0' as string;

package/src/popover.tsx

@@ -21,6 +21,7 @@ type Props = {
     onClose?: () => void;
     closeButtonLabel?: string;
     position?: Position;
+    alignment?: 'start' | 'middle' | 'end';
     width?: number;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     open?: boolean;

package/src/radio-button.tsx

@@ -44,6 +44,7 @@ type PropsRender = {
     }) => React.ReactNode;
     children?: undefined;
     dataAttributes?: DataAttributes;
+    className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
@@ -54,6 +55,7 @@ type PropsChildren = {
     children?: React.ReactNode;
     render?: undefined;
     dataAttributes?: DataAttributes;
+    className?: string;
     'aria-label'?: string;
     'aria-labelledby'?: string;
 };
@@ -62,6 +64,7 @@ const RadioButton = ({
     value,
     id,
     dataAttributes,
+    className,
     'aria-labelledby': ariaLabelledby,
     'aria-label': ariaLabel,
     ...rest
@@ -171,7 +174,10 @@ const RadioButton = ({
                 }
             }}
             onKeyDown={disabled ? undefined : handleKeyDown}
-            className={disabled ? styles.radioButtonContainerDisabled : styles.radioButton}
+            className={classnames(
+                disabled ? styles.radioButtonContainerDisabled : styles.radioButton,
+                className
+            )}
             {...getPrefixedDataAttributes({testid: 'RadioButton', ...dataAttributes})}
         >
             {rest.render ? (

package/src/sidenav-bar.tsx

@@ -446,8 +446,15 @@ const SidenavBar = ({
     const footerDividerSentinelRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
 
+    // The mobile treatment replaces the whole rail, so a trip to a narrow screen unmounts the body and
+    // its sentinels. Both dividers go back to their rest state, and the observers of the new body decide
+    // again: a divider earned by a scroll before the trip does not belong to the body that comes back.
     React.useEffect(() => {
-        if (!bodyRef.current) return;
+        if (!bodyRef.current) {
+            setShowHeaderDivider(false);
+            setShowFooterDivider(false);
+            return;
+        }
 
         // The sentinels have no height, and at rest they sit exactly on the edge of the scrollport. A
         // fractional layout (a boxed sidenav measures 100vh minus its margins) can leave them half a
@@ -478,7 +485,7 @@ const SidenavBar = ({
             headerObserver.disconnect();
             footerObserver.disconnect();
         };
-    }, []);
+    }, [isTabletOrSmaller]);
 
     // The rail is travelling between its two widths. See `columnsWhileMoving`.
     const isMoving = isSidenavMoving(collapseState);