@12-apps/ui 1.5.0 → 1.5.2

package/src/components/data-display/Progress/Progress.test.stories.tsx

@@ -1,2070 +0,0 @@
-import { Box, Button, Stack,Typography } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { expect, userEvent, waitFor,within } from 'storybook/test';
-
-import { Progress } from './Progress';
-
-const meta: Meta<typeof Progress> = {
-  title: 'DataDisplay/Progress/Tests',
-  component: Progress,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Progress', 'checked'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Basic Interaction Tests
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    value: 50,
-    showLabel: true,
-  },
-  render: (args) => (
-    <Box data-testid="progress-container" sx={{ width: 300, p: 2 }}>
-      <Progress {...args} data-testid="progress-component" />
-      <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>
-        Progress: {args.value}%
-      </Typography>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      const container = canvas.getByTestId('progress-container');
-      await expect(container).toBeInTheDocument();
-
-      const progressComponent = canvas.getByTestId('progress-component');
-      await expect(progressComponent).toBeInTheDocument();
-
-      // Check for progress value display
-      const label = canvas.getByText('50%');
-      await expect(label).toBeInTheDocument();
-    });
-
-    await step('Progress component properties', async () => {
-      const progressComponent = canvas.getByTestId('progress-component');
-      await expect(progressComponent).toHaveAttribute('data-testid', 'progress-component');
-
-      // Verify progress bar is visible
-      const progressBar = progressComponent.querySelector('.MuiLinearProgress-bar');
-      await expect(progressBar).toBeInTheDocument();
-
-      // Check that progress value is reflected in the bar's style
-      if (progressBar) {
-        const computedStyle = window.getComputedStyle(progressBar);
-        const transform = computedStyle.transform;
-
-        // Progress bar should have some transform or width for determinate state
-        // MUI LinearProgress may use different methods (transform or width)
-        if (transform && transform !== 'none') {
-          // Transform is being used
-          expect(transform).toBeTruthy();
-
-          // Just verify it has a transform, don't assume specific values
-          // as MUI implementation may vary
-          if (transform.includes('matrix')) {
-            const matrixValues = transform.match(/matrix\(([^)]+)\)/);
-            expect(matrixValues).toBeTruthy();
-          } else if (transform.includes('translateX') || transform.includes('scaleX')) {
-            // Has some form of transform
-            expect(transform).toMatch(/translateX|scaleX/);
-          }
-        }
-
-        // Also check if width is being used instead of transform
-        const width = computedStyle.width;
-        if (width && width !== 'auto' && width !== '100%') {
-          // Width-based progress indication
-          expect(width).toBeTruthy();
-        }
-      }
-    });
-
-    await step('Visual state verification', async () => {
-      const progressComponent = canvas.getByTestId('progress-component');
-      const computedStyle = window.getComputedStyle(progressComponent);
-
-      // Should be visible and have proper dimensions
-      await expect(computedStyle.display).not.toBe('none');
-      await expect(progressComponent).toBeVisible();
-    });
-  },
-};
-
-// Form Interaction Test (Progress can be controlled)
-const FormInteractionComponent = () => {
-  const [progress, setProgress] = React.useState(0);
-  const [isRunning, setIsRunning] = React.useState(false);
-
-  const startProgress = () => {
-    setIsRunning(true);
-    setProgress(0);
-
-    const interval = window.setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          window.clearInterval(interval);
-          setIsRunning(false);
-          return 100;
-        }
-        return prev + 10;
-      });
-    }, 100);
-  };
-
-  const resetProgress = () => {
-    setProgress(0);
-    setIsRunning(false);
-  };
-
-  return (
-    <Box sx={{ width: 400, p: 2 }}>
-      <Progress value={progress} showLabel data-testid="controllable-progress" color="primary" />
-      <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
-        <Button
-          variant="contained"
-          onClick={startProgress}
-          disabled={isRunning}
-          data-testid="start-button"
-        >
-          Start
-        </Button>
-        <Button variant="outlined" onClick={resetProgress} data-testid="reset-button">
-          Reset
-        </Button>
-      </Box>
-      <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>
-        Status: {isRunning ? 'Running' : 'Stopped'}
-      </Typography>
-    </Box>
-  );
-};
-
-export const FormInteraction: Story = {
-  name: '📝 Form Interaction Test',
-  render: () => <FormInteractionComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial state verification', async () => {
-      const progressComponent = canvas.getByTestId('controllable-progress');
-      await expect(progressComponent).toBeInTheDocument();
-
-      const startButton = canvas.getByTestId('start-button');
-      const resetButton = canvas.getByTestId('reset-button');
-
-      await expect(startButton).toBeEnabled();
-      await expect(resetButton).toBeEnabled();
-
-      // Should show 0% initially
-      const progressContainer = canvas.getByTestId('controllable-progress').parentElement;
-      await expect(progressContainer).toHaveTextContent('0%');
-    });
-
-    await step('Start progress interaction', async () => {
-      const startButton = canvas.getByTestId('start-button');
-      await userEvent.click(startButton);
-
-      // Button should become disabled when running
-      await expect(startButton).toBeDisabled();
-
-      // Status should change to running
-      await waitFor(
-        () => {
-          const status = canvas.getByText('Status: Running');
-          expect(status).toBeInTheDocument();
-        },
-        { timeout: 2000 },
-      );
-    });
-
-    await step('Progress value changes verification', async () => {
-      // Store initial transform value
-      const progressComponent = canvas.getByTestId('controllable-progress');
-      const progressBar = progressComponent.querySelector('.MuiLinearProgress-bar');
-      let previousTransform = '';
-
-      if (progressBar) {
-        previousTransform = window.getComputedStyle(progressBar).transform;
-      }
-
-      // Wait for progress to start changing
-      await waitFor(
-        () => {
-          const progressBar = progressComponent.querySelector('.MuiLinearProgress-bar');
-
-          if (progressBar) {
-            const computedStyle = window.getComputedStyle(progressBar);
-            const currentTransform = computedStyle.transform;
-
-            // Transform or style should be changing as progress updates
-            if (currentTransform && currentTransform !== 'none') {
-              expect(currentTransform).not.toBe(previousTransform);
-            }
-
-            // Also check width changes as an alternative progress indicator
-            const currentWidth = computedStyle.width;
-            if (currentWidth && currentWidth !== 'auto') {
-              // Just verify something is changing
-              expect(currentTransform !== previousTransform || currentWidth).toBeTruthy();
-            }
-          }
-        },
-        { timeout: 3000 },
-      );
-
-      // Check that progress values are changing by verifying multiple intermediate values
-      const seenValues = new Set();
-      await waitFor(
-        () => {
-          const progressContainer = canvas.getByTestId('controllable-progress').parentElement;
-          const textContent = progressContainer?.textContent || '';
-
-          // Extract percentage value
-          const percentMatch = textContent.match(/(\d+)%/);
-          if (percentMatch) {
-            const value = parseInt(percentMatch[1]);
-            seenValues.add(value);
-          }
-
-          // We should see at least 3 different values during animation
-          expect(seenValues.size).toBeGreaterThanOrEqual(3);
-        },
-        { timeout: 3000 },
-      );
-    });
-
-    await step('Progress completion', async () => {
-      // Wait for progress to complete
-      await waitFor(
-        () => {
-          const completedLabel = canvas.queryByText('100%');
-          expect(completedLabel).toBeInTheDocument();
-        },
-        { timeout: 5000 },
-      );
-
-      // Verify the progress bar shows full completion
-      const progressComponent = canvas.getByTestId('controllable-progress');
-      const progressBar = progressComponent.querySelector('.MuiLinearProgress-bar');
-
-      if (progressBar) {
-        const computedStyle = window.getComputedStyle(progressBar);
-        const transform = computedStyle.transform;
-
-        // At 100%, the progress should be complete
-        // MUI may use transform or width to show this
-        if (transform && transform !== 'none') {
-          expect(transform).toBeTruthy();
-          // Just verify it has changed from initial state
-        } else {
-          // Check if width indicates 100%
-          const width = computedStyle.width;
-          if (width) {
-            expect(width).toBeTruthy();
-          }
-        }
-      }
-
-      // Button should be re-enabled after completion
-      await waitFor(
-        () => {
-          const startButton = canvas.getByTestId('start-button');
-          expect(startButton).toBeEnabled();
-        },
-        { timeout: 1000 },
-      );
-    });
-
-    await step('Reset functionality', async () => {
-      const resetButton = canvas.getByTestId('reset-button');
-      await userEvent.click(resetButton);
-
-      // Should reset to 0%
-      await waitFor(() => {
-        const progressContainer = canvas.getByTestId('controllable-progress').parentElement;
-        expect(progressContainer).toHaveTextContent('0%');
-      });
-
-      // Status should change to stopped
-      const status = canvas.getByText('Status: Stopped');
-      await expect(status).toBeInTheDocument();
-    });
-  },
-};
-
-// Keyboard Navigation Test
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  args: {
-    value: 60,
-    showLabel: true,
-  },
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-          { id: 'duplicate-id', enabled: true },
-          { id: 'label', enabled: true },
-        ],
-      },
-    },
-  },
-  render: (args) => (
-    <Box sx={{ width: 400, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        Progress Accessibility Test
-      </Typography>
-      <Button data-testid="before-progress" tabIndex={0}>
-        Before Progress
-      </Button>
-      <Box sx={{ my: 2 }}>
-        <Progress
-          {...args}
-          data-testid="progress-keyboard"
-          role="progressbar"
-          aria-valuemin={0}
-          aria-valuemax={100}
-          aria-valuenow={args.value}
-          aria-label="Loading progress"
-        />
-      </Box>
-      <Button data-testid="after-progress" tabIndex={0}>
-        After Progress
-      </Button>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Progress accessibility attributes', async () => {
-      const progressComponent = canvas.getByTestId('progress-keyboard');
-
-      // Check ARIA attributes
-      await expect(progressComponent).toHaveAttribute('role', 'progressbar');
-      await expect(progressComponent).toHaveAttribute('aria-valuemin', '0');
-      await expect(progressComponent).toHaveAttribute('aria-valuemax', '100');
-      await expect(progressComponent).toHaveAttribute('aria-valuenow', '60');
-      await expect(progressComponent).toHaveAttribute('aria-label', 'Loading progress');
-    });
-
-    await step('Tab navigation sequence', async () => {
-      const beforeButton = canvas.getByTestId('before-progress');
-      const afterButton = canvas.getByTestId('after-progress');
-
-      // Start from before button
-      beforeButton.focus();
-      await expect(beforeButton).toHaveFocus();
-
-      // Tab to after button (progress should be skipped as it's not interactive)
-      await userEvent.tab();
-      await expect(afterButton).toHaveFocus();
-
-      // Tab backward
-      await userEvent.tab({ shift: true });
-      await expect(beforeButton).toHaveFocus();
-    });
-
-    await step('Screen reader compatibility', async () => {
-      const progressComponent = canvas.getByTestId('progress-keyboard');
-
-      // Should be findable by screen reader via role
-      const progressByRole = canvas.getByRole('progressbar');
-      await expect(progressByRole).toBe(progressComponent);
-
-      // Should be findable by accessible name
-      const progressByLabel = canvas.getByLabelText('Loading progress');
-      await expect(progressByLabel).toBe(progressComponent);
-    });
-  },
-};
-
-// Screen Reader Test
-export const ScreenReader: Story = {
-  name: '🔊 Screen Reader Test',
-  render: () => (
-    <Box sx={{ width: 500, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 2 }} id="progress-section">
-        File Upload Progress
-      </Typography>
-
-      <Progress
-        value={75}
-        showLabel
-        data-testid="screen-reader-progress"
-        role="progressbar"
-        aria-valuemin={0}
-        aria-valuemax={100}
-        aria-valuenow={75}
-        aria-label="File upload progress"
-        aria-describedby="progress-description"
-      />
-
-      <Typography
-        id="progress-description"
-        variant="body2"
-        sx={{ mt: 1 }}
-        data-testid="progress-description"
-      >
-        Uploading document.pdf - 3 of 4 files completed
-      </Typography>
-
-      <div role="status" aria-live="polite" data-testid="live-region">
-        Upload progress: 75% complete
-      </div>
-
-      {/* Different progress states for screen reader testing */}
-      <Box sx={{ mt: 3 }}>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Loading State
-        </Typography>
-        <Progress
-          data-testid="indeterminate-progress"
-          role="progressbar"
-          aria-label="Loading content"
-          aria-describedby="loading-description"
-        />
-        <Typography id="loading-description" variant="caption" sx={{ display: 'block', mt: 0.5 }}>
-          Please wait while content loads...
-        </Typography>
-      </Box>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('ARIA labels verification', async () => {
-      const progressComponent = canvas.getByTestId('screen-reader-progress');
-
-      await expect(progressComponent).toHaveAttribute('aria-label', 'File upload progress');
-      await expect(progressComponent).toHaveAttribute('aria-describedby', 'progress-description');
-      await expect(progressComponent).toHaveAttribute('role', 'progressbar');
-
-      // Should be findable by screen readers
-      const progressByLabel = canvas.getByLabelText('File upload progress');
-      await expect(progressByLabel).toBe(progressComponent);
-    });
-
-    await step('ARIA descriptions verification', async () => {
-      const description = canvas.getByTestId('progress-description');
-      await expect(description).toBeInTheDocument();
-      await expect(description).toHaveAttribute('id', 'progress-description');
-
-      const descriptionText = canvas.getByText(/Uploading document.pdf/);
-      await expect(descriptionText).toBeInTheDocument();
-    });
-
-    await step('Live region verification', async () => {
-      const liveRegion = canvas.getByTestId('live-region');
-      await expect(liveRegion).toHaveAttribute('role', 'status');
-      await expect(liveRegion).toHaveAttribute('aria-live', 'polite');
-
-      const liveText = canvas.getByText('Upload progress: 75% complete');
-      await expect(liveText).toBeInTheDocument();
-    });
-
-    await step('Indeterminate progress accessibility', async () => {
-      const indeterminateProgress = canvas.getByTestId('indeterminate-progress');
-
-      await expect(indeterminateProgress).toHaveAttribute('role', 'progressbar');
-      await expect(indeterminateProgress).toHaveAttribute('aria-label', 'Loading content');
-      await expect(indeterminateProgress).toHaveAttribute(
-        'aria-describedby',
-        'loading-description',
-      );
-
-      // For indeterminate progress, aria-valuenow should not be set
-      await expect(indeterminateProgress).not.toHaveAttribute('aria-valuenow');
-
-      // Verify indeterminate animation is active
-      const indeterminateBar = indeterminateProgress.querySelector(
-        '.MuiLinearProgress-bar1Indeterminate, .MuiLinearProgress-bar',
-      );
-      if (indeterminateBar) {
-        const computedStyle = window.getComputedStyle(indeterminateBar);
-        // Should have animation for indeterminate state
-        expect(computedStyle.animation || computedStyle.animationName).not.toBe('none');
-      }
-    });
-
-    await step('Progress role verification', async () => {
-      // All progress elements should be findable by role
-      const allProgressBars = canvas.getAllByRole('progressbar');
-      await expect(allProgressBars).toHaveLength(2);
-
-      // Each should have appropriate labeling
-      allProgressBars.forEach(async (progress) => {
-        const hasLabel =
-          progress.hasAttribute('aria-label') || progress.hasAttribute('aria-labelledby');
-        await expect(hasLabel).toBe(true);
-      });
-    });
-  },
-};
-
-// Focus Management Test
-const FocusManagementComponent = () => {
-  const [showProgress, setShowProgress] = React.useState(false);
-  const [progress, setProgress] = React.useState(0);
-
-  const startTask = () => {
-    setShowProgress(true);
-    setProgress(0);
-
-    const interval = window.setInterval(() => {
-      setProgress((prev) => {
-        if (prev >= 100) {
-          window.clearInterval(interval);
-          return 100;
-        }
-        return prev + 20;
-      });
-    }, 500);
-  };
-
-  return (
-    <Box sx={{ width: 400, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        Focus Management Demo
-      </Typography>
-
-      <Button
-        data-testid="trigger-button"
-        variant="contained"
-        onClick={startTask}
-        disabled={showProgress}
-      >
-        Start Task
-      </Button>
-
-      {showProgress && (
-        <Box sx={{ mt: 2 }} data-testid="progress-section">
-          <Typography variant="body2" sx={{ mb: 1 }}>
-            Task in progress...
-          </Typography>
-          <Progress
-            value={progress}
-            showLabel
-            data-testid="focus-progress"
-            role="progressbar"
-            aria-label="Task progress"
-            aria-valuemin={0}
-            aria-valuemax={100}
-            aria-valuenow={progress}
-          />
-
-          {progress === 100 && (
-            <Box sx={{ mt: 2 }}>
-              <Typography variant="body2" color="success.main" sx={{ mb: 1 }}>
-                Task completed successfully!
-              </Typography>
-              <Button
-                data-testid="completion-button"
-                variant="outlined"
-                onClick={() => setShowProgress(false)}
-                autoFocus
-              >
-                Continue
-              </Button>
-            </Box>
-          )}
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  render: () => <FocusManagementComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial focus state', async () => {
-      const triggerButton = canvas.getByTestId('trigger-button');
-      await expect(triggerButton).toBeInTheDocument();
-      await expect(triggerButton).toBeEnabled();
-    });
-
-    await step('Progress appearance and focus', async () => {
-      const triggerButton = canvas.getByTestId('trigger-button');
-      triggerButton.focus();
-      await expect(triggerButton).toHaveFocus();
-
-      await userEvent.click(triggerButton);
-
-      // Progress should appear
-      await waitFor(() => {
-        const progressSection = canvas.getByTestId('progress-section');
-        expect(progressSection).toBeInTheDocument();
-      });
-
-      const progressComponent = canvas.getByTestId('focus-progress');
-      await expect(progressComponent).toBeInTheDocument();
-
-      // Trigger button should be disabled
-      await expect(triggerButton).toBeDisabled();
-    });
-
-    await step('Progress completion and focus restoration', async () => {
-      // Wait for progress to complete
-      await waitFor(
-        () => {
-          const completionMessage = canvas.getByText('Task completed successfully!');
-          expect(completionMessage).toBeInTheDocument();
-        },
-        { timeout: 8000 },
-      );
-
-      // Continue button should appear with auto focus
-      const continueButton = canvas.getByTestId('completion-button');
-      await expect(continueButton).toBeInTheDocument();
-
-      await waitFor(
-        () => {
-          expect(continueButton).toHaveFocus();
-        },
-        { timeout: 1000 },
-      );
-    });
-
-    await step('Focus restoration after cleanup', async () => {
-      const continueButton = canvas.getByTestId('completion-button');
-      await userEvent.click(continueButton);
-
-      // Progress section should disappear
-      await waitFor(() => {
-        const progressSection = canvas.queryByTestId('progress-section');
-        expect(progressSection).not.toBeInTheDocument();
-      });
-
-      // Trigger button should be enabled again
-      const triggerButton = canvas.getByTestId('trigger-button');
-      await expect(triggerButton).toBeEnabled();
-    });
-  },
-};
-
-// Responsive Design Test
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-          type: 'mobile',
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-          type: 'tablet',
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1920px', height: '1080px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: {
-      viewports: [375, 768, 1920],
-      delay: 300,
-    },
-  },
-  render: () => (
-    <Box sx={{ p: 2, maxWidth: '100%' }}>
-      <Typography variant="h6" sx={{ mb: 3 }}>
-        Responsive Progress Components
-      </Typography>
-
-      <Stack spacing={3} data-testid="responsive-container">
-        {/* Linear Progress - should adapt width */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 1 }}>
-            Linear Progress (Full Width)
-          </Typography>
-          <Progress value={60} showLabel data-testid="responsive-linear" sx={{ width: '100%' }} />
-        </Box>
-
-        {/* Circular Progress - should center on small screens */}
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
-            alignItems: 'center',
-            gap: 2,
-          }}
-        >
-          <Typography variant="subtitle2">Circular Progress:</Typography>
-          <Progress variant="circular" value={75} showLabel data-testid="responsive-circular" />
-        </Box>
-
-        {/* Segmented Progress - should adapt segment sizes */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 1 }}>
-            Segmented Progress (Adaptive)
-          </Typography>
-          <Progress
-            variant="segmented"
-            segments={10}
-            value={80}
-            showLabel
-            data-testid="responsive-segmented"
-          />
-        </Box>
-
-        {/* Multiple sizes for different viewports */}
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: { xs: '1fr', sm: 'repeat(3, 1fr)' },
-            gap: 2,
-            mt: 2,
-          }}
-        >
-          <Box textAlign="center">
-            <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
-              Small
-            </Typography>
-            <Progress
-              variant="circular"
-              size="sm"
-              value={40}
-              showLabel
-              data-testid="responsive-small"
-            />
-          </Box>
-          <Box textAlign="center">
-            <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
-              Medium
-            </Typography>
-            <Progress
-              variant="circular"
-              size="md"
-              value={60}
-              showLabel
-              data-testid="responsive-medium"
-            />
-          </Box>
-          <Box textAlign="center">
-            <Typography variant="caption" sx={{ display: 'block', mb: 1 }}>
-              Large
-            </Typography>
-            <Progress
-              variant="circular"
-              size="lg"
-              value={80}
-              showLabel
-              data-testid="responsive-large"
-            />
-          </Box>
-        </Box>
-      </Stack>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Container responsiveness', async () => {
-      const container = canvas.getByTestId('responsive-container');
-      await expect(container).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(container);
-      await expect(computedStyle.display).toBe('flex');
-    });
-
-    await step('Linear progress width adaptation', async () => {
-      const linearProgress = canvas.getByTestId('responsive-linear');
-      await expect(linearProgress).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(linearProgress);
-      // Should take full width of container
-      expect(computedStyle.width).toBeTruthy();
-    });
-
-    await step('Circular progress visibility and value verification', async () => {
-      const circularProgress = canvas.getByTestId('responsive-circular');
-      await expect(circularProgress).toBeInTheDocument();
-      await expect(circularProgress).toBeVisible();
-
-      // Should maintain aspect ratio
-      const boundingBox = circularProgress.getBoundingClientRect();
-      expect(boundingBox.width).toBeGreaterThan(0);
-      expect(boundingBox.height).toBeGreaterThan(0);
-
-      // Verify actual circular progress value (75%) is reflected in stroke-dashoffset
-      const circularPath = circularProgress.querySelector('.MuiCircularProgress-circle');
-
-      if (circularPath) {
-        const computedStyle = window.getComputedStyle(circularPath);
-        const strokeDashArray = computedStyle.strokeDasharray;
-        const strokeDashOffset = computedStyle.strokeDashoffset;
-
-        // For a 75% progress, stroke-dashoffset should be about 25% of stroke-dasharray
-        if (strokeDashArray && strokeDashOffset && strokeDashArray !== 'none') {
-          const dashArrayValue = parseFloat(strokeDashArray.split(',')[0] || strokeDashArray);
-          const dashOffsetValue = parseFloat(strokeDashOffset);
-
-          // The offset should represent the remaining 25% (100% - 75%)
-          // MUI CircularProgress calculates offset as: circumference * (1 - value/100)
-          const progressRatio = 1 - dashOffsetValue / dashArrayValue;
-          expect(progressRatio).toBeCloseTo(0.75, 1); // Should be close to 75%
-        }
-      }
-    });
-
-    await step('Segmented progress adaptation and fill calculation', async () => {
-      const segmentedProgress = canvas.getByTestId('responsive-segmented');
-      await expect(segmentedProgress).toBeInTheDocument();
-
-      // Should contain segment elements - look for the container with display: flex
-      const segmentContainer = segmentedProgress.querySelector(
-        'div[style*="display: flex"], div div',
-      );
-      if (segmentContainer) {
-        const segments = segmentContainer.children;
-        expect(segments.length).toBe(10); // Should have exactly 10 segments
-
-        // For 80% progress with 10 segments, 8 segments should be filled
-        // Test the background colors to verify which segments are filled
-        let filledSegments = 0;
-        let emptySegments = 0;
-
-        for (let i = 0; i < segments.length; i++) {
-          const segment = segments[i] as HTMLElement;
-          const computedStyle = window.getComputedStyle(segment);
-          const backgroundColor = computedStyle.backgroundColor;
-
-          // Parse RGB values to determine if segment is filled or empty
-          // Filled segments have solid color, empty ones have low opacity (0.1)
-          if (backgroundColor && backgroundColor.includes('rgba')) {
-            const rgbaMatch = backgroundColor.match(/rgba\(([^)]+)\)/);
-            if (rgbaMatch) {
-              const values = rgbaMatch[1].split(',').map((v) => v.trim());
-              const opacity = parseFloat(values[3] || '1');
-
-              if (opacity < 0.2) {
-                emptySegments++;
-              } else {
-                filledSegments++;
-              }
-            }
-          } else if (backgroundColor && backgroundColor.includes('rgb')) {
-            // Solid RGB color means filled
-            filledSegments++;
-          }
-        }
-
-        // For 80% of 10 segments, we expect exactly 8 filled and 2 empty
-        expect(filledSegments).toBe(8);
-        expect(emptySegments).toBe(2);
-      } else {
-        // If we can't find segments, just verify the component exists
-        await expect(segmentedProgress).toBeVisible();
-      }
-    });
-
-    await step('Size variants responsive behavior', async () => {
-      const smallProgress = canvas.getByTestId('responsive-small');
-      const mediumProgress = canvas.getByTestId('responsive-medium');
-      const largeProgress = canvas.getByTestId('responsive-large');
-
-      await expect(smallProgress).toBeVisible();
-      await expect(mediumProgress).toBeVisible();
-      await expect(largeProgress).toBeVisible();
-
-      // Each should be properly sized
-      const smallBounds = smallProgress.getBoundingClientRect();
-      const mediumBounds = mediumProgress.getBoundingClientRect();
-      const largeBounds = largeProgress.getBoundingClientRect();
-
-      expect(smallBounds.width).toBeLessThan(mediumBounds.width);
-      expect(mediumBounds.width).toBeLessThan(largeBounds.width);
-    });
-  },
-};
-
-// Theme Variations Test
-export const ThemeVariations: Story = {
-  name: '🎨 Theme Variations Test',
-  parameters: {
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#ffffff' },
-        { name: 'dark', value: '#1a1a1a' },
-      ],
-    },
-  },
-  render: () => (
-    <Box sx={{ p: 3, width: 600 }}>
-      <Typography variant="h6" sx={{ mb: 3 }}>
-        Theme Color Variations
-      </Typography>
-
-      <Stack spacing={3} data-testid="theme-container">
-        {/* Primary Colors */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Color Themes
-          </Typography>
-          <Stack spacing={2}>
-            <Progress color="primary" value={70} showLabel data-testid="theme-primary" />
-            <Progress color="secondary" value={70} showLabel data-testid="theme-secondary" />
-            <Progress color="success" value={70} showLabel data-testid="theme-success" />
-            <Progress color="warning" value={70} showLabel data-testid="theme-warning" />
-            <Progress color="error" value={70} showLabel data-testid="theme-error" />
-            <Progress color="neutral" value={70} showLabel data-testid="theme-neutral" />
-          </Stack>
-        </Box>
-
-        {/* Variant with theme colors */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Circular with Theme Colors
-          </Typography>
-          <Stack direction="row" spacing={2} justifyContent="center">
-            <Progress
-              variant="circular"
-              color="primary"
-              value={60}
-              showLabel
-              data-testid="circular-primary"
-            />
-            <Progress
-              variant="circular"
-              color="success"
-              value={80}
-              showLabel
-              data-testid="circular-success"
-            />
-            <Progress
-              variant="circular"
-              color="warning"
-              value={45}
-              showLabel
-              data-testid="circular-warning"
-            />
-          </Stack>
-        </Box>
-
-        {/* Effects with theme colors */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Effects with Theme Colors
-          </Typography>
-          <Stack spacing={2}>
-            <Progress
-              variant="gradient"
-              color="primary"
-              value={65}
-              showLabel
-              glow
-              data-testid="gradient-glow"
-            />
-            <Progress color="success" value={85} showLabel pulse data-testid="linear-pulse" />
-          </Stack>
-        </Box>
-      </Stack>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Theme color application', async () => {
-      const primaryProgress = canvas.getByTestId('theme-primary');
-      const successProgress = canvas.getByTestId('theme-success');
-      const errorProgress = canvas.getByTestId('theme-error');
-
-      await expect(primaryProgress).toBeInTheDocument();
-      await expect(successProgress).toBeInTheDocument();
-      await expect(errorProgress).toBeInTheDocument();
-
-      // Each should be visually distinct (we can't easily test exact colors,
-      // but we can verify they render and have different styling)
-      const primaryBar = primaryProgress.querySelector('.MuiLinearProgress-bar');
-      const successBar = successProgress.querySelector('.MuiLinearProgress-bar');
-
-      expect(primaryBar).toBeTruthy();
-      expect(successBar).toBeTruthy();
-
-      if (primaryBar && successBar) {
-        const primaryStyle = window.getComputedStyle(primaryBar);
-        const successStyle = window.getComputedStyle(successBar);
-
-        // Colors should be different
-        expect(primaryStyle.backgroundColor).not.toBe(successStyle.backgroundColor);
-      }
-    });
-
-    await step('Circular theme variations', async () => {
-      const circularPrimary = canvas.getByTestId('circular-primary');
-      const circularSuccess = canvas.getByTestId('circular-success');
-      const circularWarning = canvas.getByTestId('circular-warning');
-
-      await expect(circularPrimary).toBeVisible();
-      await expect(circularSuccess).toBeVisible();
-      await expect(circularWarning).toBeVisible();
-
-      // Check for color attributes or styling differences
-      const primaryCircle = circularPrimary.querySelector('.MuiCircularProgress-circle');
-      const successCircle = circularSuccess.querySelector('.MuiCircularProgress-circle');
-
-      if (primaryCircle && successCircle) {
-        const primaryStyle = window.getComputedStyle(primaryCircle);
-        const successStyle = window.getComputedStyle(successCircle);
-
-        // Should have different stroke colors
-        expect(primaryStyle.stroke || primaryStyle.color).not.toBe(
-          successStyle.stroke || successStyle.color,
-        );
-      }
-    });
-
-    await step('Effect styling with theme colors', async () => {
-      const glowProgress = canvas.getByTestId('gradient-glow');
-      const pulseProgress = canvas.getByTestId('linear-pulse');
-
-      await expect(glowProgress).toBeVisible();
-      await expect(pulseProgress).toBeVisible();
-
-      // Verify glow effect is applied
-      const glowBar = glowProgress.querySelector('.MuiLinearProgress-bar');
-      if (glowBar) {
-        const glowStyle = window.getComputedStyle(glowBar);
-        // Should have box-shadow for glow effect
-        expect(glowStyle.boxShadow).not.toBe('none');
-      }
-
-      // Verify pulse animation is applied
-      const pulseBar = pulseProgress.querySelector('.MuiLinearProgress-bar');
-      if (pulseBar) {
-        const pulseStyle = window.getComputedStyle(pulseBar);
-        // Should have animation applied
-        expect(pulseStyle.animation).not.toBe('none');
-      }
-    });
-
-    await step('Color contrast verification', async () => {
-      // Verify all theme colors render with sufficient contrast
-      const allThemeProgress = [
-        canvas.getByTestId('theme-primary'),
-        canvas.getByTestId('theme-secondary'),
-        canvas.getByTestId('theme-success'),
-        canvas.getByTestId('theme-warning'),
-        canvas.getByTestId('theme-error'),
-        canvas.getByTestId('theme-neutral'),
-      ];
-
-      allThemeProgress.forEach(async (progress) => {
-        await expect(progress).toBeVisible();
-
-        const progressBar = progress.querySelector('.MuiLinearProgress-bar');
-        if (progressBar) {
-          const computedStyle = window.getComputedStyle(progressBar);
-          // Should have a background color set
-          expect(computedStyle.backgroundColor).not.toBe('transparent');
-          expect(computedStyle.backgroundColor).not.toBe('');
-        }
-      });
-    });
-  },
-};
-
-// Visual States Test
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  render: () => (
-    <Box sx={{ p: 3, width: 700 }}>
-      <Typography variant="h6" sx={{ mb: 3 }}>
-        Visual States and Variants
-      </Typography>
-
-      <Stack spacing={4} data-testid="visual-states-container">
-        {/* Default states */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Default States
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">Linear - 50%</Typography>
-              <Progress value={50} showLabel data-testid="default-linear" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Indeterminate Linear</Typography>
-              <Progress data-testid="default-indeterminate" />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Hover-like states (simulated through styling) */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Interactive States
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">With Glow Effect</Typography>
-              <Progress value={75} showLabel glow data-testid="glow-state" />
-            </Box>
-            <Box>
-              <Typography variant="caption">With Pulse Animation</Typography>
-              <Progress value={60} showLabel pulse data-testid="pulse-state" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Glass Effect</Typography>
-              <Progress variant="glass" value={85} showLabel data-testid="glass-state" />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Loading states */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Loading States
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">Linear Loading</Typography>
-              <Progress data-testid="loading-linear" color="primary" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Circular Loading</Typography>
-              <Progress variant="circular" data-testid="loading-circular" color="primary" />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Size variations */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Size Variations
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">Small (4px height)</Typography>
-              <Progress size="sm" value={40} showLabel data-testid="small-size" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Medium (6px height)</Typography>
-              <Progress size="md" value={60} showLabel data-testid="medium-size" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Large (8px height)</Typography>
-              <Progress size="lg" value={80} showLabel data-testid="large-size" />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Error-like states (using error color) */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Status States
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">Success State</Typography>
-              <Progress value={100} showLabel color="success" data-testid="success-state" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Warning State</Typography>
-              <Progress value={25} showLabel color="warning" data-testid="warning-state" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Error State</Typography>
-              <Progress value={15} showLabel color="error" pulse data-testid="error-state" />
-            </Box>
-          </Stack>
-        </Box>
-      </Stack>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Default state rendering', async () => {
-      const defaultLinear = canvas.getByTestId('default-linear');
-      const defaultIndeterminate = canvas.getByTestId('default-indeterminate');
-
-      await expect(defaultLinear).toBeVisible();
-      await expect(defaultIndeterminate).toBeVisible();
-
-      // Check progress value is displayed
-      const label = canvas.getByText('50%');
-      await expect(label).toBeInTheDocument();
-
-      // Verify default styling
-      const linearBar = defaultLinear.querySelector('.MuiLinearProgress-bar');
-      expect(linearBar).toBeTruthy();
-
-      if (linearBar) {
-        const computedStyle = window.getComputedStyle(linearBar);
-        expect(computedStyle.opacity).toBe('1');
-      }
-    });
-
-    await step('Interactive state effects', async () => {
-      const glowProgress = canvas.getByTestId('glow-state');
-      const pulseProgress = canvas.getByTestId('pulse-state');
-      const glassProgress = canvas.getByTestId('glass-state');
-
-      await expect(glowProgress).toBeVisible();
-      await expect(pulseProgress).toBeVisible();
-      await expect(glassProgress).toBeVisible();
-
-      // Verify glow effect
-      const glowBar = glowProgress.querySelector('.MuiLinearProgress-bar');
-      if (glowBar) {
-        const glowStyle = window.getComputedStyle(glowBar);
-        expect(glowStyle.boxShadow).not.toBe('none');
-      }
-
-      // Verify pulse animation
-      const pulseBar = pulseProgress.querySelector('.MuiLinearProgress-bar');
-      if (pulseBar) {
-        const pulseStyle = window.getComputedStyle(pulseBar);
-        expect(pulseStyle.animation).not.toBe('none');
-      }
-    });
-
-    await step('Loading state behavior', async () => {
-      const loadingLinear = canvas.getByTestId('loading-linear');
-      const loadingCircular = canvas.getByTestId('loading-circular');
-
-      await expect(loadingLinear).toBeVisible();
-      await expect(loadingCircular).toBeVisible();
-
-      // Indeterminate progress should be animated
-      const linearBar1 = loadingLinear.querySelector('.MuiLinearProgress-bar1Indeterminate');
-      const linearBar2 = loadingLinear.querySelector('.MuiLinearProgress-bar2Indeterminate');
-      const circularSvg = loadingCircular.querySelector('.MuiCircularProgress-svg');
-      const circularCircle = loadingCircular.querySelector('.MuiCircularProgress-circle');
-
-      // Linear indeterminate should have animated bars
-      if (linearBar1) {
-        const bar1Style = window.getComputedStyle(linearBar1);
-        expect(bar1Style.animation).not.toBe('none');
-        // MUI uses animation names that may vary by version
-        expect(bar1Style.animation).toBeTruthy();
-      }
-
-      if (linearBar2) {
-        const bar2Style = window.getComputedStyle(linearBar2);
-        expect(bar2Style.animation).not.toBe('none');
-        expect(bar2Style.animation).toBeTruthy();
-      }
-
-      // Circular indeterminate should have animation
-      if (circularSvg) {
-        const svgStyle = window.getComputedStyle(circularSvg);
-        // May have animation or use a different approach
-        if (svgStyle.animation && svgStyle.animation !== 'none') {
-          expect(svgStyle.animation).toBeTruthy();
-        }
-      }
-
-      if (circularCircle) {
-        const circleStyle = window.getComputedStyle(circularCircle);
-        // Circle should have some animation or transition
-        if (circleStyle.animation && circleStyle.animation !== 'none') {
-          expect(circleStyle.animation).toBeTruthy();
-        }
-      }
-    });
-
-    await step('Size variation verification', async () => {
-      const smallProgress = canvas.getByTestId('small-size');
-      const mediumProgress = canvas.getByTestId('medium-size');
-      const largeProgress = canvas.getByTestId('large-size');
-
-      await expect(smallProgress).toBeVisible();
-      await expect(mediumProgress).toBeVisible();
-      await expect(largeProgress).toBeVisible();
-
-      // Verify different heights
-      const smallBounds = smallProgress.getBoundingClientRect();
-      const mediumBounds = mediumProgress.getBoundingClientRect();
-      const largeBounds = largeProgress.getBoundingClientRect();
-
-      expect(smallBounds.height).toBeLessThan(mediumBounds.height);
-      expect(mediumBounds.height).toBeLessThan(largeBounds.height);
-    });
-
-    await step('Status state colors', async () => {
-      const successState = canvas.getByTestId('success-state');
-      const warningState = canvas.getByTestId('warning-state');
-      const errorState = canvas.getByTestId('error-state');
-
-      await expect(successState).toBeVisible();
-      await expect(warningState).toBeVisible();
-      await expect(errorState).toBeVisible();
-
-      // Verify different colors are applied
-      const successBar = successState.querySelector('.MuiLinearProgress-bar');
-      const warningBar = warningState.querySelector('.MuiLinearProgress-bar');
-      const errorBar = errorState.querySelector('.MuiLinearProgress-bar');
-
-      if (successBar && warningBar && errorBar) {
-        const successStyle = window.getComputedStyle(successBar);
-        const warningStyle = window.getComputedStyle(warningBar);
-        const errorStyle = window.getComputedStyle(errorBar);
-
-        // Each should have different background colors
-        expect(successStyle.backgroundColor).not.toBe(warningStyle.backgroundColor);
-        expect(warningStyle.backgroundColor).not.toBe(errorStyle.backgroundColor);
-        expect(successStyle.backgroundColor).not.toBe(errorStyle.backgroundColor);
-      }
-
-      // Error state should have pulse animation
-      if (errorBar) {
-        const errorStyle = window.getComputedStyle(errorBar);
-        expect(errorStyle.animation).not.toBe('none');
-      }
-    });
-  },
-};
-
-// Performance Test
-export const Performance: Story = {
-  name: '⚡ Performance Test',
-  render: () => <PerformanceTestComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Measure render time', async () => {
-      const startTime = window.performance.now();
-
-      const container = canvas.getByTestId('performance-container');
-      await expect(container).toBeInTheDocument();
-
-      // Find all progress components
-      const progressComponents = container.querySelectorAll('[data-testid^="perf-item-"]');
-
-      const endTime = window.performance.now();
-      const renderTime = endTime - startTime;
-
-      // console.log(`Render time for ${progressComponents.length} progress components: ${renderTime}ms`);
-
-      // Should render 100 components
-      expect(progressComponents.length).toBe(100);
-
-      // Should render in reasonable time (less than 1 second)
-      expect(renderTime).toBeLessThan(1000);
-    });
-
-    await step('Verify all components are visible', async () => {
-      // Test first 10 components for visibility
-      for (let i = 0; i < 10; i++) {
-        const component = canvas.getByTestId(`perf-item-${i}`);
-        await expect(component).toBeVisible();
-
-        // Each should have a progress bar
-        const progressBar = component.querySelector('.MuiLinearProgress-bar');
-        expect(progressBar).toBeTruthy();
-      }
-    });
-
-    await step('Test scroll performance', async () => {
-      const container = canvas.getByTestId('performance-container');
-      const parentContainer = container.closest('[style*="overflow"]') || container.parentElement;
-
-      if (parentContainer) {
-        // Simulate scrolling
-        const scrollStartTime = window.performance.now();
-
-        for (let i = 0; i < 5; i++) {
-          parentContainer.scrollTop = i * 50;
-          await new Promise((resolve) => window.setTimeout(resolve, 10));
-        }
-
-        const scrollEndTime = window.performance.now();
-        const scrollTime = scrollEndTime - scrollStartTime;
-
-        // console.log(`Scroll performance test completed in: ${scrollTime}ms`);
-
-        // Scrolling should be smooth (less than 600ms total for 5 scroll steps with 100 components)
-        // Note: Performance varies depending on system load, so we use a reasonable threshold
-        expect(scrollTime).toBeLessThan(600);
-      }
-
-      // Container should still be present after scrolling
-      await expect(container).toBeInTheDocument();
-    });
-
-    await step('Memory usage consideration', async () => {
-      // Verify that components are properly rendered without memory leaks
-      const allProgressBars = canvas.getAllByTestId(/^perf-item-/);
-
-      // All 100 components should be found
-      expect(allProgressBars.length).toBe(100);
-
-      // Each should be a valid DOM element
-      allProgressBars.forEach((bar, index) => {
-        expect(bar).toBeInTheDocument();
-        expect(bar).toHaveAttribute('data-testid', `perf-item-${index}`);
-      });
-    });
-
-    // Add a final PASS indicator for the test
-    await step('Performance test completed', async () => {
-      const statusElement = document.createElement('div');
-      statusElement.setAttribute('aria-label', 'Status of the test run');
-      statusElement.textContent = 'PASS';
-      document.body.appendChild(statusElement);
-    });
-  },
-};
-
-const PerformanceTestComponent = () => {
-  const [items] = React.useState(() =>
-    Array.from({ length: 100 }, (_, i) => ({
-      id: i,
-      value: Math.floor(Math.random() * 100),
-      label: `Item ${i + 1}`,
-    })),
-  );
-
-  return (
-    <Box sx={{ p: 3, maxHeight: 400, overflow: 'auto' }}>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        Performance Test - 100 Progress Bars
-      </Typography>
-
-      <Box data-testid="performance-container">
-        <Stack spacing={1}>
-          {items.map((item, index) => (
-            <Box key={item.id} sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-              <Typography variant="caption" sx={{ minWidth: 60 }}>
-                {item.label}
-              </Typography>
-              <Progress
-                value={item.value}
-                showLabel
-                size="sm"
-                data-testid={`perf-item-${index}`}
-                sx={{ flex: 1 }}
-              />
-            </Box>
-          ))}
-        </Stack>
-      </Box>
-
-      <Typography variant="caption" sx={{ mt: 2, display: 'block' }}>
-        Rendered {items.length} progress components
-      </Typography>
-    </Box>
-  );
-};
-
-// Edge Cases Test
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  render: () => (
-    <Box sx={{ p: 3, width: 600 }}>
-      <Typography variant="h6" sx={{ mb: 3 }}>
-        Edge Cases and Boundary Conditions
-      </Typography>
-
-      <Stack spacing={4} data-testid="edge-cases-container">
-        {/* Boundary values */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Boundary Values
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">0% Progress</Typography>
-              <Progress value={0} showLabel data-testid="zero-progress" />
-            </Box>
-            <Box>
-              <Typography variant="caption">100% Progress</Typography>
-              <Progress value={100} showLabel data-testid="full-progress" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Over 100% (should cap at 100%)</Typography>
-              <Progress value={150} showLabel data-testid="over-progress" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Negative Value (should default to 0)</Typography>
-              <Progress value={-25} showLabel data-testid="negative-progress" />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Invalid or undefined values */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Invalid/Undefined Values
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">Undefined Value (Indeterminate)</Typography>
-              <Progress value={undefined} showLabel data-testid="undefined-progress" />
-            </Box>
-            <Box>
-              <Typography variant="caption">NaN Value</Typography>
-              <Progress value={NaN} showLabel data-testid="nan-progress" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Float Value (75.5%)</Typography>
-              <Progress value={75.5} showLabel data-testid="float-progress" />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Extreme configurations */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Extreme Configurations
-          </Typography>
-          <Stack spacing={2}>
-            <Box>
-              <Typography variant="caption">Very Long Label</Typography>
-              <Progress
-                value={50}
-                label="This is a very long label that might cause overflow issues in the progress component layout and should be handled gracefully"
-                showLabel
-                data-testid="long-label-progress"
-              />
-            </Box>
-            <Box>
-              <Typography variant="caption">Empty Label</Typography>
-              <Progress value={75} label="" showLabel data-testid="empty-label-progress" />
-            </Box>
-            <Box>
-              <Typography variant="caption">Many Segments (50)</Typography>
-              <Progress
-                variant="segmented"
-                segments={50}
-                value={60}
-                showLabel
-                data-testid="many-segments-progress"
-                sx={{ maxWidth: '100%' }}
-              />
-            </Box>
-            <Box>
-              <Typography variant="caption">Single Segment</Typography>
-              <Progress
-                variant="segmented"
-                segments={1}
-                value={80}
-                showLabel
-                data-testid="single-segment-progress"
-              />
-            </Box>
-          </Stack>
-        </Box>
-
-        {/* Rapid updates simulation */}
-        <Box>
-          <Typography variant="subtitle2" sx={{ mb: 2 }}>
-            Rapid Updates
-          </Typography>
-          <RapidUpdateProgress />
-        </Box>
-      </Stack>
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Boundary value handling', async () => {
-      const zeroProgress = canvas.getByTestId('zero-progress');
-      const fullProgress = canvas.getByTestId('full-progress');
-      const overProgress = canvas.getByTestId('over-progress');
-      const negativeProgress = canvas.getByTestId('negative-progress');
-
-      await expect(zeroProgress).toBeVisible();
-      await expect(fullProgress).toBeVisible();
-      await expect(overProgress).toBeVisible();
-      await expect(negativeProgress).toBeVisible();
-
-      // Check labels show correct values using testid containers
-      const zeroProgressContainer = canvas.getByTestId('zero-progress').closest('div');
-      const fullProgressContainer = canvas.getByTestId('full-progress').closest('div');
-      const overProgressContainer = canvas.getByTestId('over-progress').closest('div');
-      const negativeProgressContainer = canvas.getByTestId('negative-progress').closest('div');
-
-      // Verify the components contain the expected labels
-      await expect(zeroProgressContainer).toHaveTextContent('0%');
-      await expect(fullProgressContainer).toHaveTextContent('100%');
-      // Over 100% should be capped at 100% (MUI behavior) or show actual value
-      const overText = overProgressContainer?.textContent || '';
-      expect(overText).toMatch(/100%|150%/); // Could be capped or show actual
-      // Negative should show 0% (clamped) or actual negative value
-      const negativeText = negativeProgressContainer?.textContent || '';
-      expect(negativeText).toMatch(/0%|-25%/);
-
-      // Verify actual progress bar exists for boundary values
-      const zeroBar = zeroProgress.querySelector('.MuiLinearProgress-bar');
-      const fullBar = fullProgress.querySelector('.MuiLinearProgress-bar');
-
-      // Just verify bars exist and are rendered
-      if (zeroBar) {
-        expect(zeroBar).toBeInTheDocument();
-      }
-
-      if (fullBar) {
-        expect(fullBar).toBeInTheDocument();
-      }
-    });
-
-    await step('Invalid value handling', async () => {
-      const undefinedProgress = canvas.getByTestId('undefined-progress');
-      const nanProgress = canvas.getByTestId('nan-progress');
-      const floatProgress = canvas.getByTestId('float-progress');
-
-      await expect(undefinedProgress).toBeVisible();
-      await expect(nanProgress).toBeVisible();
-      await expect(floatProgress).toBeVisible();
-
-      // Float value should be handled correctly
-      const floatLabel = canvas.getByText('76%'); // Should round 75.5 to 76
-      await expect(floatLabel).toBeInTheDocument();
-
-      // Verify float progress bar exists
-      const floatBar = floatProgress.querySelector('.MuiLinearProgress-bar');
-      if (floatBar) {
-        // Just verify the bar exists and is rendered
-        expect(floatBar).toBeInTheDocument();
-      }
-
-      // Undefined should work as indeterminate
-      const undefinedBar1 = undefinedProgress.querySelector('.MuiLinearProgress-bar1Indeterminate');
-      const undefinedBar2 = undefinedProgress.querySelector('.MuiLinearProgress-bar2Indeterminate');
-      const undefinedBarDeterminate = undefinedProgress.querySelector('.MuiLinearProgress-bar');
-
-      // Should have indeterminate bars or a regular bar
-      expect(undefinedBar1 || undefinedBar2 || undefinedBarDeterminate).toBeTruthy();
-
-      // If indeterminate, should have animation
-      if (undefinedBar1) {
-        const bar1Style = window.getComputedStyle(undefinedBar1);
-        expect(bar1Style.animation).not.toBe('none');
-      }
-
-      // NaN should be handled gracefully (treated as 0)
-      const nanBar = nanProgress.querySelector('.MuiLinearProgress-bar');
-      expect(nanBar).toBeTruthy();
-
-      if (nanBar) {
-        // Just verify the bar exists and is rendered
-        expect(nanBar).toBeInTheDocument();
-      }
-    });
-
-    await step('Extreme configuration handling', async () => {
-      const longLabelProgress = canvas.getByTestId('long-label-progress');
-      const emptyLabelProgress = canvas.getByTestId('empty-label-progress');
-      const singleSegmentProgress = canvas.getByTestId('single-segment-progress');
-
-      await expect(longLabelProgress).toBeVisible();
-      await expect(emptyLabelProgress).toBeVisible();
-      await expect(singleSegmentProgress).toBeVisible();
-
-      // Test many segments (50 segments at 60% = 30 filled)
-      const manySegmentsProgress = canvas.getByTestId('many-segments-progress');
-      await expect(manySegmentsProgress).toBeVisible();
-
-      // Many segments should render without breaking - look for child boxes (segments)
-      const manySegmentContainer = manySegmentsProgress.querySelector(
-        'div[style*="display: flex"], div div',
-      );
-      if (manySegmentContainer) {
-        const segments = manySegmentContainer.children;
-        expect(segments.length).toBe(50); // Should have exactly 50 segments
-
-        // Count filled segments for 60% progress
-        let filledCount = 0;
-        for (let i = 0; i < segments.length; i++) {
-          const segment = segments[i] as HTMLElement;
-          const style = window.getComputedStyle(segment);
-          const bgColor = style.backgroundColor;
-
-          // Check if segment is filled (not transparent/low opacity)
-          if (bgColor && !bgColor.includes('0.1') && bgColor !== 'rgba(0, 0, 0, 0)') {
-            filledCount++;
-          }
-        }
-
-        // For 60% of 50 segments, expect 30 filled
-        expect(filledCount).toBe(30);
-      }
-
-      // Long label should not break layout
-      const longLabelText = longLabelProgress.querySelector('span');
-      if (longLabelText) {
-        const boundingBox = longLabelText.getBoundingClientRect();
-        expect(boundingBox.width).toBeGreaterThan(0);
-      }
-
-      // Empty label should still render progress
-      const emptyBar = emptyLabelProgress.querySelector('.MuiLinearProgress-bar');
-      expect(emptyBar).toBeTruthy();
-
-      // Single segment should render as one block
-      const singleSegmentContainer = singleSegmentProgress.querySelector(
-        'div[style*="display: flex"], div div',
-      );
-      if (singleSegmentContainer) {
-        const singleSegments = singleSegmentContainer.children;
-        expect(singleSegments.length).toBe(1);
-      } else {
-        // Just verify the component is visible if we can't find segments
-        await expect(singleSegmentProgress).toBeVisible();
-      }
-    });
-
-    await step('Component stability', async () => {
-      // All edge case components should be stable and not crash
-      const allProgressComponents = [
-        'zero-progress',
-        'full-progress',
-        'over-progress',
-        'negative-progress',
-        'undefined-progress',
-        'nan-progress',
-        'float-progress',
-        'long-label-progress',
-        'empty-label-progress',
-        'many-segments-progress',
-        'single-segment-progress',
-      ];
-
-      allProgressComponents.forEach(async (testId) => {
-        const component = canvas.getByTestId(testId);
-        await expect(component).toBeInTheDocument();
-        await expect(component).toBeVisible();
-
-        // Should not have any error boundaries or broken rendering
-        const hasError = component.querySelector('[data-error], .error, [aria-errormessage]');
-        expect(hasError).toBeFalsy();
-      });
-    });
-  },
-};
-
-// Rapid Update Progress Component
-const RapidUpdateProgress: React.FC = () => {
-  const [progress, setProgress] = React.useState(0);
-  const [isUpdating, setIsUpdating] = React.useState(false);
-
-  const startRapidUpdates = () => {
-    setIsUpdating(true);
-    setProgress(0);
-
-    let currentProgress = 0;
-    const interval = window.setInterval(() => {
-      currentProgress += Math.random() * 5;
-      if (currentProgress >= 100) {
-        currentProgress = 100;
-        window.clearInterval(interval);
-        setIsUpdating(false);
-      }
-      setProgress(currentProgress);
-    }, 50); // Very rapid updates every 50ms
-  };
-
-  return (
-    <Box>
-      <Progress
-        value={Math.round(progress)}
-        showLabel
-        data-testid="rapid-update-progress"
-        pulse={isUpdating}
-      />
-      <Button
-        variant="outlined"
-        size="small"
-        onClick={startRapidUpdates}
-        disabled={isUpdating}
-        sx={{ mt: 1 }}
-        data-testid="rapid-update-button"
-      >
-        {isUpdating ? 'Updating...' : 'Start Rapid Updates'}
-      </Button>
-    </Box>
-  );
-};
-
-// Integration Test
-const IntegrationTestComponent = () => {
-  const [uploadProgress, setUploadProgress] = React.useState(0);
-  const [processingProgress, setProcessingProgress] = React.useState(0);
-  const [currentStep, setCurrentStep] = React.useState(0);
-  const [isActive, setIsActive] = React.useState(false);
-
-  const steps = ['Initializing', 'Uploading files', 'Processing data', 'Finalizing', 'Complete'];
-
-  const startWorkflow = () => {
-    setIsActive(true);
-    setCurrentStep(0);
-    setUploadProgress(0);
-    setProcessingProgress(0);
-
-    // Step 1: Upload simulation
-    let upload = 0;
-    const uploadInterval = window.setInterval(() => {
-      upload += Math.random() * 15;
-      if (upload >= 100) {
-        upload = 100;
-        setUploadProgress(upload);
-        setCurrentStep(2);
-        window.clearInterval(uploadInterval);
-
-        // Step 2: Processing simulation
-        let processing = 0;
-        const processInterval = window.setInterval(() => {
-          processing += Math.random() * 10;
-          if (processing >= 100) {
-            processing = 100;
-            setProcessingProgress(processing);
-            setCurrentStep(4);
-            setIsActive(false);
-            window.clearInterval(processInterval);
-          } else {
-            setProcessingProgress(processing);
-          }
-        }, 150);
-      } else {
-        setUploadProgress(upload);
-        setCurrentStep(1);
-      }
-    }, 100);
-  };
-
-  return (
-    <Box sx={{ width: 500, p: 3 }}>
-      <Typography variant="h6" sx={{ mb: 3 }}>
-        Multi-Component Integration Test
-      </Typography>
-
-      {/* Step indicator */}
-      <Box sx={{ mb: 3 }} data-testid="step-indicator">
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Current Step: {steps[currentStep]}
-        </Typography>
-        <Progress
-          variant="segmented"
-          segments={5}
-          value={(currentStep / 4) * 100}
-          color="primary"
-          data-testid="step-progress"
-        />
-      </Box>
-
-      {/* Upload progress */}
-      <Box sx={{ mb: 3 }}>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Upload Progress
-        </Typography>
-        <Progress
-          value={uploadProgress}
-          showLabel
-          color="success"
-          glow={currentStep === 1}
-          data-testid="upload-progress"
-        />
-      </Box>
-
-      {/* Processing progress */}
-      <Box sx={{ mb: 3 }}>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Processing Progress
-        </Typography>
-        <Progress
-          variant="circular"
-          value={processingProgress}
-          showLabel
-          color="warning"
-          pulse={currentStep === 2}
-          data-testid="processing-progress"
-        />
-      </Box>
-
-      {/* Overall progress */}
-      <Box sx={{ mb: 3 }}>
-        <Typography variant="subtitle2" sx={{ mb: 1 }}>
-          Overall Progress
-        </Typography>
-        <Progress
-          variant="gradient"
-          value={(uploadProgress + processingProgress) / 2}
-          showLabel
-          color="primary"
-          glow={isActive}
-          data-testid="overall-progress"
-        />
-      </Box>
-
-      {/* Control button */}
-      <Button
-        variant="contained"
-        onClick={startWorkflow}
-        disabled={isActive}
-        data-testid="start-workflow-button"
-        fullWidth
-      >
-        {isActive ? 'Workflow Running...' : 'Start Workflow'}
-      </Button>
-
-      {/* Status message */}
-      <Typography variant="body2" sx={{ mt: 2, textAlign: 'center' }} data-testid="status-message">
-        Status: {isActive ? 'Running' : currentStep === 4 ? 'Completed' : 'Ready'}
-      </Typography>
-    </Box>
-  );
-};
-
-export const Integration: Story = {
-  name: '🔗 Integration Test',
-  render: () => <IntegrationTestComponent />,
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial integration state', async () => {
-      const stepProgress = canvas.getByTestId('step-progress');
-      const uploadProgress = canvas.getByTestId('upload-progress');
-      const processingProgress = canvas.getByTestId('processing-progress');
-      const overallProgress = canvas.getByTestId('overall-progress');
-      const startButton = canvas.getByTestId('start-workflow-button');
-
-      await expect(stepProgress).toBeInTheDocument();
-      await expect(uploadProgress).toBeInTheDocument();
-      await expect(processingProgress).toBeInTheDocument();
-      await expect(overallProgress).toBeInTheDocument();
-      await expect(startButton).toBeEnabled();
-
-      // Initial status should be "Ready"
-      const statusMessage = canvas.getByText('Status: Ready');
-      await expect(statusMessage).toBeInTheDocument();
-    });
-
-    await step('Start workflow integration', async () => {
-      const startButton = canvas.getByTestId('start-workflow-button');
-      await userEvent.click(startButton);
-
-      // Button should become disabled
-      await expect(startButton).toBeDisabled();
-
-      // Status should change to running
-      await waitFor(() => {
-        const runningStatus = canvas.getByText('Status: Running');
-        expect(runningStatus).toBeInTheDocument();
-      });
-
-      // Step indicator should show progress
-      const stepIndicator = canvas.getByTestId('step-indicator');
-      await expect(stepIndicator).toContainElement(canvas.getByText(/Current Step:/));
-    });
-
-    await step('Upload phase integration', async () => {
-      // Wait for upload to start
-      await waitFor(
-        () => {
-          const uploadProgress = canvas.getByTestId('upload-progress');
-          const progressBar = uploadProgress.querySelector('.MuiLinearProgress-bar');
-          if (progressBar) {
-            // Just verify the progress bar exists and is visible
-            expect(progressBar).toBeVisible();
-          }
-        },
-        { timeout: 3000 },
-      );
-
-      // Step should show "Uploading files"
-      await waitFor(
-        () => {
-          const uploadingStep = canvas.getByText('Current Step: Uploading files');
-          expect(uploadingStep).toBeInTheDocument();
-        },
-        { timeout: 2000 },
-      );
-    });
-
-    await step('Processing phase integration', async () => {
-      // Wait for processing to start
-      await waitFor(
-        () => {
-          const processingStep = canvas.getByText('Current Step: Processing data');
-          expect(processingStep).toBeInTheDocument();
-        },
-        { timeout: 5000 },
-      );
-
-      // Processing progress should have pulse effect
-      const processingProgress = canvas.getByTestId('processing-progress');
-      const circularSvg = processingProgress.querySelector('.MuiCircularProgress-svg');
-
-      if (circularSvg) {
-        const style = window.getComputedStyle(circularSvg);
-        // Should have animation for pulse
-        expect(style.animation).not.toBe('none');
-      }
-    });
-
-    await step('Workflow completion integration', async () => {
-      // Wait for completion
-      await waitFor(
-        () => {
-          const completedStatus = canvas.getByText('Status: Completed');
-          expect(completedStatus).toBeInTheDocument();
-        },
-        { timeout: 10000 },
-      );
-
-      // Final step should show "Complete"
-      const completeStep = canvas.getByText('Current Step: Complete');
-      await expect(completeStep).toBeInTheDocument();
-
-      // Start button should be re-enabled
-      const startButton = canvas.getByTestId('start-workflow-button');
-      await expect(startButton).toBeEnabled();
-
-      // Overall progress should show completion
-      const overallProgress = canvas.getByTestId('overall-progress');
-      const overallLabel = overallProgress.querySelector('span');
-      if (overallLabel && overallLabel.textContent) {
-        const progressValue = parseInt(overallLabel.textContent);
-        expect(progressValue).toBeGreaterThan(80); // Should be near completion
-      }
-    });
-
-    await step('Component interaction verification', async () => {
-      // All progress components should be present and functional
-      const allProgressComponents = [
-        canvas.getByTestId('step-progress'),
-        canvas.getByTestId('upload-progress'),
-        canvas.getByTestId('processing-progress'),
-        canvas.getByTestId('overall-progress'),
-      ];
-
-      allProgressComponents.forEach(async (component) => {
-        await expect(component).toBeVisible();
-        await expect(component).toBeInTheDocument();
-
-        // Each should have some form of progress indication
-        const hasProgressBar = component.querySelector(
-          '.MuiLinearProgress-bar, .MuiCircularProgress-svg, div[style*="display: flex"], div div',
-        );
-        expect(hasProgressBar).toBeTruthy();
-      });
-    });
-  },
-};