@12-apps/ui 1.4.0 → 1.5.0

package/src/components/form/ToggleGroup/ToggleGroup.test.stories.tsx

@@ -141,7 +141,7 @@ export const KeyboardNavigation: Story = {
     const firstButton = canvas.getAllByRole('button')[0];
 
     // Focus the first button
-    firstButton.focus();
+    await userEvent.click(firstButton);
     await waitFor(() => {
       expect(firstButton).toHaveFocus();
     });
@@ -206,24 +206,28 @@ export const FocusManagement: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const buttons = canvas.getAllByRole('button');
+    // Named rather than indexed: a positional lookup silently follows whatever
+    // order the options happen to render in, so it keeps passing after a
+    // reorder while no longer testing what it says it does.
+    const likeButton = canvas.getByRole('button', { name: /like/i });
+    const starButton = canvas.getByRole('button', { name: /star/i });
 
     // Test initial focus
-    buttons[0].focus();
+    await userEvent.click(likeButton);
     await waitFor(() => {
-      expect(buttons[0]).toHaveFocus();
+      expect(likeButton).toHaveFocus();
     });
 
-    // Test focus moves correctly with tab navigation  
+    // Test focus moves correctly with tab navigation
     await userEvent.tab();
     await waitFor(() => {
-      expect(buttons[1]).toHaveFocus();
+      expect(starButton).toHaveFocus();
     });
 
     // Test focus doesn't get lost after selection
-    await userEvent.click(buttons[1]);
+    await userEvent.click(starButton);
     await waitFor(() => {
-      expect(buttons[1]).toHaveFocus();
+      expect(starButton).toHaveFocus();
     });
   },
 };
@@ -390,31 +394,24 @@ export const Performance: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    const startTime = window.performance.now();
-
-    // Test rendering performance with many options
+    // All twenty options render — the assertion the wall-clock budgets that used
+    // to sit here were standing in for. A millisecond threshold measures the
+    // machine running the story, not the component, and the timings were
+    // already padded to 100ms and 600ms to survive CI.
     const buttons = canvas.getAllByRole('button');
     expect(buttons).toHaveLength(20);
 
-    const renderTime = window.performance.now() - startTime;
-
-    // Should render within reasonable time (less than 100ms for initial query)
-    expect(renderTime).toBeLessThan(100);
-
-    // Test interaction performance
-    const interactionStart = window.performance.now();
-
-    // Click multiple buttons rapidly
-    await userEvent.click(buttons[0]);
-    await userEvent.click(buttons[5]);
-    await userEvent.click(buttons[10]);
-
-    const interactionTime = window.performance.now() - interactionStart;
+    // Clicking a spread of them, by name, still exercises the multi-select path.
+    for (const label of ['Option 1', 'Option 6', 'Option 11']) {
+      await userEvent.click(canvas.getByRole('button', { name: new RegExp(label + '$') }));
+    }
 
-    // Interactions should be responsive (less than 600ms for 3 clicks)
-    // This accounts for userEvent simulation delays, React state updates,
-    // browser reflows, and Storybook rendering overhead in CI/CD environments
-    expect(interactionTime).toBeLessThan(600);
+    await waitFor(() => {
+      expect(canvas.getByRole('button', { name: /Option 11$/ })).toHaveAttribute(
+        'aria-pressed',
+        'true',
+      );
+    });
   },
 };
 

package/src/components/layout/Resizable/Resizable.test.stories.tsx

@@ -209,16 +209,16 @@ export const KeyboardNavigation: Story = {
 
     await step('Content is focusable', async () => {
       const focusTarget = canvas.getByTestId('focus-target');
-      focusTarget.focus();
-      await expect(focusTarget).toHaveFocus();
+      await userEvent.click(focusTarget);
+      await waitFor(() => expect(focusTarget).toHaveFocus());
     });
 
     await step('Tab navigation works', async () => {
       const focusTarget = canvas.getByTestId('focus-target');
-      focusTarget.focus();
+      await userEvent.click(focusTarget);
       await userEvent.tab();
       // Tab should move focus away from the button
-      await expect(focusTarget).not.toHaveFocus();
+      await waitFor(() => expect(focusTarget).not.toHaveFocus());
     });
 
     await step('Container has proper ARIA attributes', async () => {
@@ -324,9 +324,11 @@ export const ResponsiveDesign: Story = {
       const content = canvas.getByTestId('responsive-content');
       await expect(content).toBeInTheDocument();
 
-      // Verify the component adapts to smaller screen
+      // The container is positioned so the resize handles can sit against its
+      // edges. That holds at every width — the old `window.innerWidth <= 768`
+      // guard meant this assertion simply did not run on a normal screen.
       const container = content.closest('[data-testid]')?.parentElement;
-      if (container && window.innerWidth <= 768) {
+      if (container) {
         const computedStyle = window.getComputedStyle(container);
         await expect(computedStyle.position).toBe('relative');
       }
@@ -415,7 +417,9 @@ const PerformanceTestComponent: React.FC = () => {
   React.useEffect(() => {
     const startTime = window.performance.now();
 
-    // Use requestAnimationFrame for reliable timing after render
+    // The demo measures itself to display a number; nothing asserts on it, so a
+    // slow frame cannot fail anything.
+    // eslint-disable-next-line test-flakiness/no-animation-wait -- demo self-measurement, not an assertion
     const frameId = window.requestAnimationFrame(() => {
       const endTime = window.performance.now();
       setRenderTime(endTime - startTime);

package/src/components/layout/Spacer/Spacer.test.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect,userEvent, within } from 'storybook/test';
+import { expect,userEvent, within, waitFor } from 'storybook/test';
 
 import { Spacer } from './Spacer';
 
@@ -76,12 +76,12 @@ export const KeyboardNavigation: Story = {
       const secondButton = canvas.getByText('Second Button');
 
       // Focus first button
-      firstButton.focus();
-      await expect(document.activeElement).toBe(firstButton);
+      await userEvent.click(firstButton);
+      await waitFor(() => expect(document.activeElement).toBe(firstButton));
 
       // Tab to second button (spacer should be skipped)
       await userEvent.tab();
-      await expect(document.activeElement).toBe(secondButton);
+      await waitFor(() => expect(document.activeElement).toBe(secondButton));
     });
 
     await step('Pass Test', async () => {
@@ -149,12 +149,14 @@ export const FocusManagement: Story = {
     await step('Verify spacer is not focusable', async () => {
       const spacer = await canvas.findByTestId('spacer');
 
-      // Spacer should not have tabindex
-      await expect(spacer.getAttribute('tabindex')).toBeNull();
+      // A spacer is decoration: it carries no tabindex, so the tab order runs
+      // straight past it.
+      await expect(spacer).not.toHaveAttribute('tabindex');
 
-      // Try to focus spacer - should not work
-      spacer.focus();
-      await expect(document.activeElement).not.toBe(spacer);
+      // Clicking it is the closest a user can come to trying to focus it, and
+      // focus should stay wherever it already was.
+      await userEvent.click(spacer);
+      await waitFor(() => expect(document.activeElement).not.toBe(spacer));
     });
 
     await step('Pass Test', async () => {

package/src/components/typography/Blockquote/Blockquote.test.stories.tsx

@@ -165,16 +165,16 @@ export const FocusManagement: Story = {
     const afterBtn = canvas.getByText('After Blockquote');
 
     // Start from before button
-    beforeBtn.focus();
-    await expect(beforeBtn).toHaveFocus();
+    await userEvent.click(beforeBtn);
+    await waitFor(() => expect(beforeBtn).toHaveFocus());
 
     // Tab to blockquote
     await userEvent.tab();
-    await expect(blockquote).toHaveFocus();
+    await waitFor(() => expect(blockquote).toHaveFocus());
 
     // Tab to after button
     await userEvent.tab();
-    await expect(afterBtn).toHaveFocus();
+    await waitFor(() => expect(afterBtn).toHaveFocus());
   },
 };
 
@@ -312,10 +312,10 @@ export const Performance: Story = {
 
       // Check that all items rendered
       for (let i = 1; i <= 10; i++) {
+        // Matched on the part that identifies the instance rather than the whole
+        // sentence, which would break on any wording change.
         await expect(
-          canvas.getByText(
-            `Performance test blockquote number ${i}. This tests rendering performance with multiple instances.`,
-          ),
+          canvas.getByText(new RegExp(`Performance test blockquote number ${i}\\.`)),
         ).toBeInTheDocument();
         await expect(canvas.getByText(`— Author ${i}`)).toBeInTheDocument();
       }

package/src/components/typography/Heading/Heading.styles.ts

@@ -0,0 +1,101 @@
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { HeadingProps } from './Heading.types';
+
+type Level = NonNullable<HeadingProps['level']>;
+type Weight = NonNullable<HeadingProps['weight']>;
+
+const getColorFromTheme = (theme: Theme, color: string): string => {
+  if (color === 'neutral') {
+    return theme.palette.text.primary;
+  }
+
+  const colorMap: Record<string, string> = {
+    primary: theme.palette.primary.main,
+    secondary: theme.palette.secondary.main,
+    success: theme.palette.success.main,
+    warning: theme.palette.warning.main,
+    danger: theme.palette.error.main,
+  };
+
+  return colorMap[color] || theme.palette.text.primary;
+};
+
+const WEIGHTS: Record<Weight, number> = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+/**
+ * Each level's metrics, plus the weight it uses when the caller asks for
+ * `normal`. A heading's "normal" is not body text's 400 — it is the weight that
+ * level is meant to carry, which gets heavier as the level gets larger.
+ */
+const LEVELS: Record<Level, CSSObject & { normalWeight: number }> = {
+  display: { fontSize: '4rem', lineHeight: 0.95, letterSpacing: '-0.03em', normalWeight: 800 },
+  h1: { fontSize: '3rem', lineHeight: 1.1, letterSpacing: '-0.02em', normalWeight: 700 },
+  h2: { fontSize: '2.5rem', lineHeight: 1.2, letterSpacing: '-0.015em', normalWeight: 700 },
+  h3: { fontSize: '2rem', lineHeight: 1.25, letterSpacing: '-0.01em', normalWeight: 600 },
+  h4: { fontSize: '1.5rem', lineHeight: 1.3, letterSpacing: '-0.005em', normalWeight: 600 },
+  h5: { fontSize: '1.25rem', lineHeight: 1.4, normalWeight: 600 },
+  h6: { fontSize: '1.125rem', lineHeight: 1.4, normalWeight: 600 },
+};
+
+/** The two-stop gradient each colour paints its glyphs with. */
+const PRIMARY_STOPS = (theme: Theme): [string, string] => [
+  theme.palette.primary.main,
+  theme.palette.secondary.main,
+];
+
+const GRADIENT_STOPS: Record<string, (theme: Theme) => [string, string]> = {
+  primary: PRIMARY_STOPS,
+  secondary: (theme) => [theme.palette.secondary.main, theme.palette.primary.main],
+  success: (theme) => [theme.palette.success.light, theme.palette.success.dark],
+  warning: (theme) => [theme.palette.warning.light, theme.palette.warning.dark],
+  danger: (theme) => [theme.palette.error.light, theme.palette.error.dark],
+};
+
+const gradientFor = (theme: Theme, color: string) => {
+  const [from, to] = (GRADIENT_STOPS[color] ?? PRIMARY_STOPS)(theme);
+  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
+};
+
+export interface HeadingFlags {
+  customLevel?: string;
+  customColor?: string;
+  customWeight?: string;
+  gradient?: boolean;
+}
+
+export const headingSx = (theme: Theme, flags: HeadingFlags): CSSObject => {
+  const { customLevel = 'h2', customColor = 'neutral', customWeight = 'bold', gradient } = flags;
+  const { normalWeight, ...metrics } = LEVELS[customLevel as Level] ?? LEVELS.h2;
+
+  const base: CSSObject = {
+    fontFamily: theme.typography.h1.fontFamily,
+    margin: 0,
+    transition: 'all 0.2s ease',
+    ...metrics,
+    fontWeight:
+      customWeight === 'normal' ? normalWeight : (WEIGHTS[customWeight as Weight] ?? WEIGHTS.bold),
+  };
+
+  if (!gradient) {
+    return { ...base, color: getColorFromTheme(theme, customColor) };
+  }
+
+  // The gradient paints the glyphs themselves, so the text must draw no fill of
+  // its own for it to show through.
+  return {
+    ...base,
+    background: gradientFor(theme, customColor),
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    MozBackgroundClip: 'text',
+    MozTextFillColor: 'transparent',
+  };
+};

package/src/components/typography/Heading/Heading.tsx

@@ -1,177 +1,61 @@
-import type { Theme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
+import { headingSx } from './Heading.styles';
+import type { HeadingFlags } from './Heading.styles';
 import type { HeadingProps } from './Heading.types';
 
-const getColorFromTheme = (theme: Theme, color: string) => {
-  if (color === 'neutral') {
-    return theme.palette.text.primary;
-  }
-
-  const colorMap: Record<string, string> = {
-    primary: theme.palette.primary.main,
-    secondary: theme.palette.secondary.main,
-    success: theme.palette.success.main,
-    warning: theme.palette.warning.main,
-    danger: theme.palette.error.main,
-  };
-
-  return colorMap[color] || theme.palette.text.primary;
-};
-
-// Create styled versions of each heading element
-const createStyledHeading = () =>
+const styledHeading = () =>
   styled('h1', {
     shouldForwardProp: (prop) =>
       !['customLevel', 'customColor', 'customWeight', 'gradient'].includes(prop as string),
-  })<{
-    customLevel?: string;
-    customColor?: string;
-    customWeight?: string;
-    gradient?: boolean;
-  }>(({ theme, customLevel = 'h2', customColor = 'neutral', customWeight = 'bold', gradient }) => {
-    const textColor = getColorFromTheme(theme, customColor);
-
-    // Weight mapping
-    const weightMap = {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700,
-    };
-
-    // Level-specific styles
-    const levelStyles = {
-      h1: {
-        fontSize: '3rem',
-        lineHeight: 1.1,
-        letterSpacing: '-0.02em',
-        fontWeight:
-          customWeight === 'normal' ? 700 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h2: {
-        fontSize: '2.5rem',
-        lineHeight: 1.2,
-        letterSpacing: '-0.015em',
-        fontWeight:
-          customWeight === 'normal' ? 700 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h3: {
-        fontSize: '2rem',
-        lineHeight: 1.25,
-        letterSpacing: '-0.01em',
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h4: {
-        fontSize: '1.5rem',
-        lineHeight: 1.3,
-        letterSpacing: '-0.005em',
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h5: {
-        fontSize: '1.25rem',
-        lineHeight: 1.4,
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      h6: {
-        fontSize: '1.125rem',
-        lineHeight: 1.4,
-        fontWeight:
-          customWeight === 'normal' ? 600 : weightMap[customWeight as keyof typeof weightMap],
-      },
-      display: {
-        fontSize: '4rem',
-        lineHeight: 0.95,
-        letterSpacing: '-0.03em',
-        fontWeight:
-          customWeight === 'normal' ? 800 : weightMap[customWeight as keyof typeof weightMap],
-      },
-    };
-
-    const baseStyles = {
-      fontFamily: theme.typography.h1.fontFamily,
-      margin: 0,
-      transition: 'all 0.2s ease',
-      ...levelStyles[customLevel as keyof typeof levelStyles],
-    };
-
-    // Gradient text effect
-    if (gradient) {
-      const gradientColor =
-        customColor === 'primary'
-          ? `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`
-          : customColor === 'secondary'
-            ? `linear-gradient(135deg, ${theme.palette.secondary.main} 0%, ${theme.palette.primary.main} 100%)`
-            : customColor === 'success'
-              ? `linear-gradient(135deg, ${theme.palette.success.light} 0%, ${theme.palette.success.dark} 100%)`
-              : customColor === 'warning'
-                ? `linear-gradient(135deg, ${theme.palette.warning.light} 0%, ${theme.palette.warning.dark} 100%)`
-                : customColor === 'danger'
-                  ? `linear-gradient(135deg, ${theme.palette.error.light} 0%, ${theme.palette.error.dark} 100%)`
-                  : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.secondary.main} 100%)`;
-
-      return {
-        ...baseStyles,
-        background: gradientColor,
-        backgroundClip: 'text',
-        WebkitBackgroundClip: 'text',
-        WebkitTextFillColor: 'transparent',
-        MozBackgroundClip: 'text',
-        MozTextFillColor: 'transparent',
-      };
-    }
-
-    return {
-      ...baseStyles,
-      color: textColor,
-    };
-  });
-
-// Create styled components for each heading level
-const StyledH1 = createStyledHeading().withComponent('h1');
-const StyledH2 = createStyledHeading().withComponent('h2');
-const StyledH3 = createStyledHeading().withComponent('h3');
-const StyledH4 = createStyledHeading().withComponent('h4');
-const StyledH5 = createStyledHeading().withComponent('h5');
-const StyledH6 = createStyledHeading().withComponent('h6');
+  })<HeadingFlags>(({ theme, ...flags }) => ({ ...headingSx(theme, flags) }));
+
+/**
+ * One styled component per tag. They share a style function but must be
+ * separate components, since `withComponent` fixes the element at definition
+ * time — a single component switching tags per render would remount the text.
+ */
+const STYLED_BY_TAG = {
+  h1: styledHeading().withComponent('h1'),
+  h2: styledHeading().withComponent('h2'),
+  h3: styledHeading().withComponent('h3'),
+  h4: styledHeading().withComponent('h4'),
+  h5: styledHeading().withComponent('h5'),
+  h6: styledHeading().withComponent('h6'),
+} as const;
+
+/**
+ * Which tag each level renders. `display` is a size, not a rank, so it uses the
+ * h1 element — the document still gets one level-one heading rather than an
+ * unnamed tag outside the outline.
+ */
+const TAG_FOR_LEVEL: Record<string, keyof typeof STYLED_BY_TAG> = {
+  display: 'h1',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+};
 
 export const Heading = React.forwardRef<globalThis.HTMLHeadingElement, HeadingProps>(
-  (
-    { level = 'h2', color = 'neutral', weight = 'bold', gradient = false, children, ...props },
-    ref,
-  ) => {
-    const commonProps = {
-      ref,
-      customLevel: level,
-      customColor: color,
-      customWeight: weight,
-      gradient,
-      ...props,
-    };
-
-    // Return the appropriate styled heading component based on level
-    switch (level) {
-      case 'h1':
-      case 'display':
-        return <StyledH1 {...commonProps}>{children}</StyledH1>;
-      case 'h2':
-        return <StyledH2 {...commonProps}>{children}</StyledH2>;
-      case 'h3':
-        return <StyledH3 {...commonProps}>{children}</StyledH3>;
-      case 'h4':
-        return <StyledH4 {...commonProps}>{children}</StyledH4>;
-      case 'h5':
-        return <StyledH5 {...commonProps}>{children}</StyledH5>;
-      case 'h6':
-        return <StyledH6 {...commonProps}>{children}</StyledH6>;
-      default:
-        return <StyledH2 {...commonProps}>{children}</StyledH2>;
-    }
+  ({ level = 'h2', color = 'neutral', weight = 'bold', gradient = false, children, ...props }, ref) => {
+    const Styled = STYLED_BY_TAG[TAG_FOR_LEVEL[level] ?? 'h2'];
+
+    return (
+      <Styled
+        ref={ref}
+        customLevel={level}
+        customColor={color}
+        customWeight={weight}
+        gradient={gradient}
+        {...props}
+      >
+        {children}
+      </Styled>
+    );
   },
 );