@lumx/react 3.19.1-alpha.7 → 3.19.1-alpha.9

package/src/components/icon/Icon.test.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
-import Tests from '@lumx/core/js/components/Icon/Tests';
 import { Icon, IconProps } from './Icon';
 
 const CLASSNAME = Icon.className as string;
@@ -28,7 +29,89 @@ const setup = (propsOverride: SetupProps = {}, { wrapper }: SetupRenderOptions =
 };
 
 describe(`<${Icon.displayName}>`, () => {
-    Tests((props: IconProps, { wrapper }: any) => render(<Icon {...props} />, { wrapper }));
+    describe('Props', () => {
+        it('should render default', () => {
+            const { i, svg, path, props } = setup();
+
+            expect(i).toBeInTheDocument();
+            expect(i).toHaveClass(CLASSNAME);
+            expect(i?.className).toMatchInlineSnapshot('"lumx-icon lumx-icon--no-shape lumx-icon--path"');
+
+            expect(svg).toBeInTheDocument();
+            expect(svg).toHaveAttribute('aria-hidden', 'true');
+            expect(svg).not.toHaveAttribute('role');
+
+            expect(path).toBeInTheDocument();
+            expect(path).toHaveAttribute('d', props.icon);
+        });
+
+        it('should adapt svg with alternate text', () => {
+            const { svg, props } = setup({ alt: 'Alternate text' });
+            expect(svg).toHaveAttribute('aria-label', props.alt);
+            expect(svg).not.toHaveAttribute('aria-hidden');
+            expect(svg).toHaveAttribute('role');
+        });
+
+        describe('size', () => {
+            it('should render size', () => {
+                const { i } = setup({ size: Size.s });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
+
+            it('should adapt xxs size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xxs });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
+
+            it('should adapt xs size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xs });
+                expect(i).toHaveClass('lumx-icon--size-s');
+            });
+
+            it('should adapt xxl size with hasShape', () => {
+                const { i } = setup({ hasShape: true, size: Size.xxl });
+                expect(i).toHaveClass('lumx-icon--size-xl');
+            });
+
+            it('should add default size with hasShape', () => {
+                const { i } = setup({ hasShape: true });
+                expect(i).toHaveClass('lumx-icon--size-m');
+            });
+        });
+
+        describe('color', () => {
+            it('should render color and color variant', () => {
+                const { i } = setup({
+                    color: ColorPalette.primary,
+                    colorVariant: ColorVariant.D1,
+                });
+                expect(i).toHaveClass('lumx-icon--color-primary lumx-icon--color-variant-D1');
+            });
+
+            it('should improve yellow icon color contrast with alert circle icon', () => {
+                const { i } = setup({
+                    color: ColorPalette.yellow,
+                    icon: mdiAlertCircle,
+                });
+                expect(i).toHaveClass('lumx-icon--color-yellow lumx-icon--has-dark-layer');
+            });
+
+            it('should set a default color on dark theme', () => {
+                const { i } = setup({ theme: Theme.dark });
+                expect(i).toHaveClass('lumx-icon--color-light lumx-icon--theme-dark');
+            });
+
+            it('should set a default color on has shape', () => {
+                const { i } = setup({ hasShape: true });
+                expect(i).toHaveClass('lumx-icon--color-dark lumx-icon--has-shape');
+            });
+
+            it('should set a default color variant on has shape & dark color', () => {
+                const { i } = setup({ color: ColorPalette.dark, hasShape: true });
+                expect(i).toHaveClass('lumx-icon--color-variant-L2 lumx-icon--color-dark lumx-icon--has-shape');
+            });
+        });
+    });
 
     // Common tests suite.
     commonTestsSuiteRTL(setup, {

package/src/components/icon/Icon.tsx

@@ -1,11 +1,52 @@
 import React from 'react';
 
-import { Icon as UI, IconProps, IconSizes } from '@lumx/core/js/components/Icon';
+import classNames from 'classnames';
 
+import { mdiAlertCircle } from '@lumx/icons';
+import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';
+import { GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 
-export type { IconProps, IconSizes };
+export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface IconProps extends GenericProps, HasTheme {
+    /** Color variant. */
+    color?: ColorWithVariants;
+    /** Lightened or darkened variant of the selected icon color. */
+    colorVariant?: ColorVariant;
+    /** Whether the icon has a shape. */
+    hasShape?: boolean;
+    /**
+     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
+     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+     */
+    icon: string;
+    /** Size variant. */
+    size?: IconSizes;
+    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
+    alt?: string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Icon';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<IconProps> = {};
+
 /**
  * Icon component.
  *
@@ -15,10 +56,80 @@ export type { IconProps, IconSizes };
  */
 export const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {
     const defaultTheme = useTheme();
+    const {
+        className,
+        color: propColor,
+        colorVariant: propColorVariant,
+        hasShape,
+        icon,
+        size,
+        theme = defaultTheme,
+        alt,
+        ...forwardedProps
+    } = props;
+    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
-    return <UI ref={ref} {...props} theme={props.theme || defaultTheme} />;
-});
+    // Color
+    let iconColor = color;
+    if (!iconColor && (hasShape || theme)) {
+        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+    }
+
+    // Color variant
+    let iconColorVariant = colorVariant;
+    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+        iconColorVariant = 'L2';
+    }
 
-Icon.displayName = UI.displayName;
-Icon.className = UI.className;
-Icon.defaultProps = UI.defaultProps;
+    // Size
+    let iconSize = size;
+    if (size && hasShape) {
+        if (size === Size.xxs || size === Size.xs) {
+            iconSize = Size.s;
+        } else if (size === Size.xxl) {
+            iconSize = Size.xl;
+        }
+    } else if (hasShape) {
+        iconSize = Size.m;
+    }
+
+    return (
+        <i
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    color: iconColor,
+                    colorVariant: iconColorVariant,
+                    hasShape,
+                    prefix: CLASSNAME,
+                    theme,
+                    size: iconSize,
+                }),
+                !hasShape && `${CLASSNAME}--no-shape`,
+                !hasShape &&
+                    iconColor === ColorPalette.yellow &&
+                    icon === mdiAlertCircle &&
+                    `${CLASSNAME}--has-dark-layer`,
+                `${CLASSNAME}--path`,
+            )}
+        >
+            <svg
+                aria-hidden={alt ? undefined : 'true'}
+                role={alt ? 'img' : undefined}
+                aria-label={alt}
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                style={{ verticalAlign: '-0.125em' }}
+                viewBox="0 0 24 24"
+                width="1em"
+            >
+                <path d={icon} fill="currentColor" />
+            </svg>
+        </i>
+    );
+});
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;

package/src/components/image-lightbox/ImageLightbox.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, within, screen } from '@testing-library/react';
+import { render, within, screen, waitFor } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { useImageSize } from '@lumx/react/hooks/useImageSize';
@@ -18,8 +18,8 @@ import Meta, {
     WithMosaicTrigger,
 } from './ImageLightbox.stories';
 
-jest.mock('@lumx/react/hooks/useImageSize');
-jest.mock('@lumx/react/hooks/useSizeOnWindowResize');
+vi.mock('@lumx/react/hooks/useImageSize');
+vi.mock('@lumx/react/hooks/useSizeOnWindowResize');
 
 const CLASSNAME = ImageLightbox.className as string;
 const baseProps = Meta.args;
@@ -56,7 +56,7 @@ const queries = {
 describe(`<${ImageLightbox.displayName}>`, () => {
     beforeEach(() => {
         (useImageSize as any).mockReturnValue(null);
-        (useSizeOnWindowResize as any).mockReturnValue([null, jest.fn()]);
+        (useSizeOnWindowResize as any).mockReturnValue([null, vi.fn()]);
     });
 
     describe('render', () => {
@@ -159,7 +159,9 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            expect(imageLightbox).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(imageLightbox).not.toBeInTheDocument();
+            });
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -185,7 +187,9 @@ describe(`<${ImageLightbox.displayName}>`, () => {
 
             // Close on escape
             await userEvent.keyboard('{escape}');
-            expect(imageLightbox).not.toBeInTheDocument();
+            await waitFor(() => {
+                expect(imageLightbox).not.toBeInTheDocument();
+            });
 
             // Focus moved back to the trigger button
             expect(buttonTrigger).toHaveFocus();
@@ -196,7 +200,7 @@ describe(`<${ImageLightbox.displayName}>`, () => {
         const scrollAreaSize = { width: 600, height: 600 };
         beforeEach(() => {
             (useImageSize as any).mockImplementation((_: any, getInitialSize: any) => getInitialSize?.() || null);
-            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, jest.fn()]);
+            (useSizeOnWindowResize as any).mockReturnValue([scrollAreaSize, vi.fn()]);
         });
 
         it('should use the image initial size', () => {

package/src/components/link/Link.test.tsx

@@ -51,7 +51,7 @@ describe(`<${Link.displayName}>`, () => {
 
         it('should render a button', () => {
             const name = 'Link';
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ onClick, children: name });
             expect(link).toBe(screen.queryByRole('button', { name }));
         });
@@ -75,7 +75,7 @@ describe(`<${Link.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(link).toHaveAttribute('disabled');
             await userEvent.click(link);
@@ -83,25 +83,28 @@ describe(`<${Link.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(link).toHaveAttribute('disabled');
+            expect(screen.queryByRole('link')).toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled');
+            // Simulate standard disabled state (not focusable)
+            expect(link).toHaveAttribute('tabindex', '-1');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onClick });
-            expect(link).toHaveAttribute('aria-disabled');
+            expect(screen.queryByRole('button')).toBeInTheDocument();
+            expect(link).toHaveAttribute('aria-disabled', 'true');
+            expect(link).not.toHaveAttribute('tabindex');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,
@@ -109,8 +112,7 @@ describe(`<${Link.displayName}>`, () => {
                 onClick,
             });
             expect(link).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(link).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(link);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/link/Link.tsx

@@ -12,8 +12,9 @@ import {
 } from '@lumx/core/js/utils/className';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 import { wrapChildrenIconWithSpaces } from '@lumx/react/utils/react/wrapChildrenIconWithSpaces';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
 
@@ -67,38 +68,26 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  * @return React element.
  */
 export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+    const { disabledStateProps, otherProps } = useDisableStateProps(props);
     const {
         children,
         className,
         color: propColor,
         colorVariant: propColorVariant,
-        href,
         leftIcon,
-        linkAs,
         rightIcon,
-        target,
         typography,
+        linkAs,
         ...forwardedProps
     } = otherProps;
     const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
-    const isLink = linkAs || href;
-    const Component = isLink && !isAnyDisabled ? linkAs || 'a' : 'button';
-    const baseProps: React.ComponentProps<typeof Component> = {};
-    if (Component === 'button') {
-        baseProps.type = 'button';
-        Object.assign(baseProps, disabledStateProps);
-    } else if (isLink) {
-        baseProps.href = href;
-        baseProps.target = target;
-    }
-
     return (
-        <Component
-            ref={ref}
+        <RawClickable
+            ref={ref as any}
+            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
             {...forwardedProps}
-            {...baseProps}
+            {...disabledStateProps}
             className={classNames(
                 className,
                 handleBasicClasses({ prefix: CLASSNAME, color, colorVariant, hasTypography: !!typography }),
@@ -112,7 +101,7 @@ export const Link = forwardRef<LinkProps, HTMLAnchorElement | HTMLButtonElement>
                     {rightIcon && <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} />}
                 </>,
             )}
-        </Component>
+        </RawClickable>
     );
 });
 Link.displayName = COMPONENT_NAME;

package/src/components/list/ListItem.test.tsx

@@ -29,7 +29,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render as a button', () => {
-            setup({ children: 'Label', onItemSelected: jest.fn() });
+            setup({ children: 'Label', onItemSelected: vi.fn() });
             expect(screen.getByRole('button', { name: 'Label' })).toBeInTheDocument();
         });
 
@@ -41,7 +41,7 @@ describe(`<${ListItem.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled list item button', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({ children: 'Label', isDisabled: true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             // The `renderLink` util removes the onClick handler but `user-event` will also not fire events on disabled elements.
@@ -50,7 +50,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render disabled list item link', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 isDisabled: true,
@@ -64,7 +64,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item button', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({ children: 'Label', 'aria-disabled': true, onItemSelected });
             expect(link).toHaveAttribute('aria-disabled', 'true');
             if (link) await userEvent.click(link);
@@ -72,7 +72,7 @@ describe(`<${ListItem.displayName}>`, () => {
         });
 
         it('should render aria-disabled list item link', async () => {
-            const onItemSelected = jest.fn();
+            const onItemSelected = vi.fn();
             const { link } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/message/Message.test.tsx

@@ -54,7 +54,7 @@ describe(`<${Message.displayName}>`, () => {
         });
 
         it('should render close button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { closeButton } = setup({
                 hasBackground: true,
                 kind: 'info',

package/src/components/mosaic/Mosaic.test.tsx

@@ -32,7 +32,7 @@ describe(`<${Mosaic.displayName}>`, () => {
         expect(mosaic).toHaveClass(`${CLASSNAME}--has-${count}-thumbnail${count > 1 ? 's' : ''}`);
         expect(thumbnails.length).toBe(count);
         for (const thumbnail of thumbnails) {
-            expect(within(thumbnail).queryByRole('img')).toBeInTheDocument();
+            expect(within(thumbnail).queryByAltText('')).toBeInTheDocument();
         }
     });
 
@@ -47,8 +47,8 @@ describe(`<${Mosaic.displayName}>`, () => {
     });
 
     it('should render clickable', async () => {
-        const onClick = jest.fn();
-        const onImageClick = jest.fn();
+        const onClick = vi.fn();
+        const onImageClick = vi.fn();
         const { thumbnails } = setup({
             thumbnails: generateThumbnails(6),
             onImageClick,

package/src/components/navigation/NavigationItem.tsx

@@ -1,11 +1,12 @@
 import React, { ElementType, ReactNode } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
+import { ComponentRef, HasClassName, HasPolymorphicAs, HasRequiredLinkHref, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/react/forwardRefPolymorphic';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -16,9 +17,6 @@ type BaseNavigationItemProps = {
     isCurrentPage?: boolean;
 };
 
-/** Make `href` required when `as` is `a` */
-type RequiredLinkHref<E> = E extends 'a' ? { href: string } : Record<string, unknown>;
-
 /**
  * Navigation item props
  */
@@ -26,7 +24,7 @@ export type NavigationItemProps<E extends ElementType = 'a'> = HasPolymorphicAs<
     HasTheme &
     HasClassName &
     BaseNavigationItemProps &
-    RequiredLinkHref<E>;
+    HasRequiredLinkHref<E>;
 
 /**
  * Component display name.
@@ -44,8 +42,6 @@ export const NavigationItem = Object.assign(
         const theme = useTheme();
         const { tooltipLabel, labelRef } = useOverflowTooltipLabel(label);
 
-        const buttonProps = Element === 'button' ? { type: 'button' } : {};
-
         return (
             <li
                 className={classNames(
@@ -57,14 +53,14 @@ export const NavigationItem = Object.assign(
                 )}
             >
                 <Tooltip label={tooltipLabel} placement={Placement.TOP}>
-                    <Element
+                    <RawClickable
+                        as={Element}
                         className={handleBasicClasses({
                             prefix: `${CLASSNAME}__link`,
                             isSelected: isCurrentPage,
                         })}
                         ref={ref as React.Ref<any>}
                         aria-current={isCurrentPage ? 'page' : undefined}
-                        {...buttonProps}
                         {...forwardedProps}
                     >
                         {icon ? (
@@ -74,7 +70,7 @@ export const NavigationItem = Object.assign(
                         <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
-                    </Element>
+                    </RawClickable>
                 </Tooltip>
             </li>
         );

package/src/components/navigation/NavigationSection.tsx

@@ -9,6 +9,7 @@ import { ThemeProvider, useTheme } from '@lumx/react/utils/theme/ThemeContext';
 import { useId } from '@lumx/react/hooks/useId';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
 import { CLASSNAME as ITEM_CLASSNAME } from './NavigationItem';
 import { NavigationContext } from './context';
 
@@ -52,7 +53,8 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
             )}
             ref={ref}
         >
-            <button
+            <RawClickable<'button'>
+                as="button"
                 {...forwardedProps}
                 aria-controls={sectionId}
                 aria-expanded={isOpen}
@@ -62,7 +64,6 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     setIsOpen(!isOpen);
                     event.stopPropagation();
                 }}
-                type="button"
             >
                 {icon ? <Icon className={`${ITEM_CLASSNAME}__icon`} icon={icon} size={Size.xs} /> : null}
 
@@ -73,7 +74,7 @@ export const NavigationSection = forwardRef<NavigationSectionProps, HTMLLIElemen
                     className={classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME}__chevron`)}
                     icon={isOpen ? mdiChevronUp : mdiChevronDown}
                 />
-            </button>
+            </RawClickable>
             {isOpen &&
                 (isDropdown ? (
                     <Popover

package/src/components/notification/Notification.test.tsx

@@ -44,8 +44,8 @@ describe(`<${Notification.displayName}>`, () => {
     });
 
     it('should render content & action', async () => {
-        const onClick = jest.fn();
-        const onActionClick = jest.fn();
+        const onClick = vi.fn();
+        const onActionClick = vi.fn();
         const content = 'Content';
         const actionLabel = 'actionLabel';
         const { notification, action, actionButton } = setup({ content, actionLabel, onClick, onActionClick });
@@ -81,8 +81,9 @@ describe(`<${Notification.displayName}>`, () => {
 
     it('should forward styles', () => {
         const { notification } = setup({ style: { color: 'red' } });
+
         expect(notification).toBeInTheDocument();
-        expect(notification).toHaveStyle('color: red');
+        expect(notification).toHaveStyle('color: rgb(255, 0, 0)');
     });
 
     // Common tests suite.

package/src/components/popover-dialog/PopoverDialog.test.tsx

@@ -6,7 +6,7 @@ import { Heading, HeadingLevelProvider } from '@lumx/react';
 import { WithButtonTrigger, WithIconButtonTrigger } from './PopoverDialog.stories';
 import { PopoverDialog } from './PopoverDialog';
 
-jest.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
 
 describe(`<${PopoverDialog.displayName}>`, () => {
     it('should open and init focus', async () => {

package/src/components/radio-button/RadioButton.test.tsx

@@ -86,7 +86,7 @@ describe(`<${RadioButton.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when radioButton is clicked', async () => {
             const value = 'value';
@@ -102,7 +102,7 @@ describe(`<${RadioButton.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { radioButton, input } = setup({ isDisabled: true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');
@@ -115,7 +115,7 @@ describe(`<${RadioButton.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { radioButton, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(radioButton).toHaveClass('lumx-radio-button--is-disabled');