@reliability-design/web 1.0.2 → 1.0.6

package/dist/components/rel-progress/rel-progress.stories.ts

@@ -1,817 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-progress';
-
-/**
- * The Progress component provides visual feedback for loading states and task completion.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **4 Progress Modes**: linear-determinate, linear-indeterminate, circular-determinate, circular-indeterminate
- * - **Determinate Progress**: Shows specific completion percentage (0-100)
- * - **Indeterminate Progress**: Shows ongoing activity without specific progress
- * - **Smooth Animations**: CSS-based animations for fluid motion
- * - **Token-Based Styling**: Uses design system tokens
- */
-const meta: Meta = {
-  title: 'Components/Progress',
-  tags: ['autodocs'],
-  component: 'rel-progress',
-  argTypes: {
-    mode: {
-      control: { type: 'select' },
-      options: ['linear-determinate', 'linear-indeterminate', 'circular-determinate', 'circular-indeterminate'],
-      description: 'Progress indicator mode',
-      table: {
-        defaultValue: { summary: 'linear-determinate' },
-        type: { summary: 'string' },
-      },
-    },
-    value: {
-      control: { type: 'number', min: 0, max: 100 },
-      description: 'Progress value (0-100) for determinate modes',
-      table: {
-        defaultValue: { summary: '0' },
-        type: { summary: 'number' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-progress mode="${args.mode || 'linear-determinate'}" value="${args.value || 0}"></rel-progress>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default linear determinate progress at 0%
- */
-export const Default: Story = {
-  args: {
-    mode: 'linear-determinate',
-    value: 0,
-  },
-};
-
-/**
- * Linear determinate progress bars at various percentages
- */
-export const LinearDeterminate: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 500px;">
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">0% Complete</p>
-        <rel-progress mode="linear-determinate" value="0"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">25% Complete</p>
-        <rel-progress mode="linear-determinate" value="25"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">50% Complete</p>
-        <rel-progress mode="linear-determinate" value="50"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">75% Complete</p>
-        <rel-progress mode="linear-determinate" value="75"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">100% Complete</p>
-        <rel-progress mode="linear-determinate" value="100"></rel-progress>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Linear indeterminate progress (continuous animation)
- */
-export const LinearIndeterminate: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 500px;">
-      <p style="margin: 0; color: var(--rel-colors-gray-primary); font-size: 14px;">Loading... (continuous animation)</p>
-      <rel-progress mode="linear-indeterminate"></rel-progress>
-    </div>
-  `,
-};
-
-/**
- * Circular determinate progress at various percentages
- */
-export const CircularDeterminate: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 32px; flex-wrap: wrap; align-items: center;">
-      <div style="text-align: center;">
-        <rel-progress mode="circular-determinate" value="0"></rel-progress>
-        <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">0%</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-progress mode="circular-determinate" value="25"></rel-progress>
-        <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">25%</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-progress mode="circular-determinate" value="50"></rel-progress>
-        <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">50%</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-progress mode="circular-determinate" value="75"></rel-progress>
-        <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">75%</p>
-      </div>
-
-      <div style="text-align: center;">
-        <rel-progress mode="circular-determinate" value="100"></rel-progress>
-        <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">100%</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Circular indeterminate progress (spinning animation)
- */
-export const CircularIndeterminate: Story = {
-  render: () => html`
-    <div style="text-align: center;">
-      <rel-progress mode="circular-indeterminate"></rel-progress>
-      <p style="margin: 16px 0 0; color: var(--rel-colors-gray-primary); font-size: 14px;">Loading...</p>
-    </div>
-  `,
-};
-
-/**
- * File upload simulation with linear progress
- */
-export const FileUpload: Story = {
-  render: () => html`
-    <div style="max-width: 500px;">
-      <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Uploading Files</h4>
-
-        <div style="margin-bottom: 20px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">document.pdf</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">45%</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="45"></rel-progress>
-        </div>
-
-        <div style="margin-bottom: 20px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">image.jpg</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">80%</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="80"></rel-progress>
-        </div>
-
-        <div>
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">video.mp4</span>
-            <span style="color: var(--rel-colors-green-success); font-size: 13px;">✓ Complete</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="100"></rel-progress>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Loading card with circular spinner
- */
-export const LoadingCard: Story = {
-  render: () => html`
-    <div style="max-width: 400px;">
-      <div style="background: white; padding: 40px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300); text-align: center;">
-        <rel-progress mode="circular-indeterminate"></rel-progress>
-        <h3 style="margin: 20px 0 8px; color: var(--rel-colors-gray-heading); font-size: 18px;">Loading Data</h3>
-        <p style="margin: 0; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Please wait while we fetch your information...</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Multi-step process progress
- */
-export const MultiStep: Story = {
-  render: () => html`
-    <div style="max-width: 600px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Installation Progress</h4>
-
-        <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px;">
-          <rel-progress mode="circular-determinate" value="100"></rel-progress>
-          <div style="flex: 1;">
-            <div style="font-weight: 600; color: var(--rel-colors-green-success); margin-bottom: 4px;">✓ Download Complete</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Package downloaded successfully</div>
-          </div>
-        </div>
-
-        <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px;">
-          <rel-progress mode="circular-determinate" value="65"></rel-progress>
-          <div style="flex: 1;">
-            <div style="font-weight: 600; color: var(--rel-colors-gray-heading); margin-bottom: 4px;">Installing Dependencies</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">65% complete</div>
-          </div>
-        </div>
-
-        <div style="display: flex; align-items: center; gap: 16px;">
-          <rel-progress mode="circular-determinate" value="0"></rel-progress>
-          <div style="flex: 1;">
-            <div style="font-weight: 600; color: var(--rel-colors-gray-placeholder); margin-bottom: 4px;">Finalizing Setup</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Pending</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Dashboard with loading states
- */
-export const Dashboard: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
-      <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 15px;">Analytics Loading</h4>
-        <rel-progress mode="circular-indeterminate"></rel-progress>
-        <p style="margin: 16px 0 0; color: var(--rel-colors-gray-placeholder); font-size: 13px;">Fetching data...</p>
-      </div>
-
-      <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 15px;">Report Generation</h4>
-        <div style="margin-bottom: 12px;">
-          <div style="color: var(--rel-colors-gray-primary); font-size: 13px; margin-bottom: 8px;">Progress: 68%</div>
-          <rel-progress mode="linear-determinate" value="68"></rel-progress>
-        </div>
-        <p style="margin: 0; color: var(--rel-colors-gray-placeholder); font-size: 13px;">Estimated time: 2 min</p>
-      </div>
-
-      <div style="flex: 1; min-width: 250px; background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 15px;">Sync Status</h4>
-        <rel-progress mode="linear-indeterminate"></rel-progress>
-        <p style="margin: 16px 0 0; color: var(--rel-colors-gray-placeholder); font-size: 13px;">Syncing with server...</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All progress modes showcase
- */
-export const AllModes: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px;">
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Linear Determinate</h4>
-        <div style="max-width: 400px;">
-          <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">Progress: 60%</p>
-          <rel-progress mode="linear-determinate" value="60"></rel-progress>
-        </div>
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Linear Indeterminate</h4>
-        <div style="max-width: 400px;">
-          <rel-progress mode="linear-indeterminate"></rel-progress>
-        </div>
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Circular Determinate</h4>
-        <div style="text-align: center;">
-          <rel-progress mode="circular-determinate" value="70"></rel-progress>
-          <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 14px;">70%</p>
-        </div>
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Circular Indeterminate</h4>
-        <div style="text-align: center;">
-          <rel-progress mode="circular-indeterminate"></rel-progress>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Interactive progress demonstration
- */
-export const Interactive: Story = {
-  render: () => {
-    let progress = 0;
-    const container = document.createElement('div');
-    container.style.cssText = 'max-width: 500px;';
-
-    const updateProgress = () => {
-      progress += 1;
-      if (progress > 100) progress = 0;
-
-      linearProgress.value = progress;
-      circularProgress.value = progress;
-      percentageText.textContent = `${progress}%`;
-    };
-
-    const linearProgress = document.createElement('rel-progress') as any;
-    linearProgress.mode = 'linear-determinate';
-    linearProgress.value = 0;
-
-    const circularProgress = document.createElement('rel-progress') as any;
-    circularProgress.mode = 'circular-determinate';
-    circularProgress.value = 0;
-
-    const percentageText = document.createElement('span');
-    percentageText.style.cssText = 'color: var(--rel-colors-gray-primary); font-size: 14px; font-weight: 600;';
-    percentageText.textContent = '0%';
-
-    container.innerHTML = `
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Auto-incrementing Progress</h4>
-      </div>
-    `;
-
-    const content = container.querySelector('div');
-    const linearContainer = document.createElement('div');
-    linearContainer.style.marginBottom = '24px';
-    linearContainer.appendChild(linearProgress);
-
-    const circularContainer = document.createElement('div');
-    circularContainer.style.cssText = 'display: flex; align-items: center; gap: 16px;';
-    circularContainer.appendChild(circularProgress);
-    circularContainer.appendChild(percentageText);
-
-    content?.appendChild(linearContainer);
-    content?.appendChild(circularContainer);
-
-    setInterval(updateProgress, 50);
-
-    return container;
-  },
-};
-
-/**
- * Edge cases: Very low and very high percentages
- */
-export const EdgeCases: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 500px;">
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">Just Started - 5%</p>
-        <rel-progress mode="linear-determinate" value="5"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">Almost Complete - 95%</p>
-        <rel-progress mode="linear-determinate" value="95"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">Tiny Progress - 2%</p>
-        <rel-progress mode="linear-determinate" value="2"></rel-progress>
-      </div>
-
-      <div>
-        <p style="margin: 0 0 8px; color: var(--rel-colors-gray-primary); font-size: 14px;">Nearly Done - 98%</p>
-        <rel-progress mode="linear-determinate" value="98"></rel-progress>
-      </div>
-
-      <div style="display: flex; gap: 32px; margin-top: 16px;">
-        <div style="text-align: center;">
-          <rel-progress mode="circular-determinate" value="3"></rel-progress>
-          <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">3%</p>
-        </div>
-        <div style="text-align: center;">
-          <rel-progress mode="circular-determinate" value="97"></rel-progress>
-          <p style="margin: 8px 0 0; color: var(--rel-colors-gray-primary); font-size: 13px;">97%</p>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Data download progress with file sizes
- */
-export const DataDownload: Story = {
-  render: () => html`
-    <div style="max-width: 500px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Downloading Dataset</h4>
-
-        <div style="margin-bottom: 16px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">training-data.zip</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">342 MB / 500 MB</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="68"></rel-progress>
-          <p style="margin: 8px 0 0; color: var(--rel-colors-gray-placeholder); font-size: 12px;">Download speed: 5.2 MB/s - 30 seconds remaining</p>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Battery and resource indicators
- */
-export const BatteryIndicator: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 24px; flex-wrap: wrap;">
-      <div style="flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 15px;">Battery Level</h4>
-        <div style="display: flex; align-items: center; gap: 16px;">
-          <rel-progress mode="circular-determinate" value="85"></rel-progress>
-          <div>
-            <div style="font-size: 24px; font-weight: 600; color: var(--rel-colors-gray-heading);">85%</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">2h 15m remaining</div>
-          </div>
-        </div>
-      </div>
-
-      <div style="flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 15px;">Storage Used</h4>
-        <div style="margin-bottom: 8px;">
-          <span style="color: var(--rel-colors-gray-primary); font-size: 13px;">14.2 GB / 20 GB</span>
-        </div>
-        <rel-progress mode="linear-determinate" value="71"></rel-progress>
-        <p style="margin: 12px 0 0; color: var(--rel-colors-gray-placeholder); font-size: 12px;">5.8 GB available</p>
-      </div>
-
-      <div style="flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 15px;">CPU Usage</h4>
-        <div style="margin-bottom: 8px;">
-          <span style="color: var(--rel-colors-gray-primary); font-size: 13px;">32% utilized</span>
-        </div>
-        <rel-progress mode="linear-determinate" value="32"></rel-progress>
-        <p style="margin: 12px 0 0; color: var(--rel-colors-gray-placeholder); font-size: 12px;">Normal load</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Form submission with validation progress
- */
-export const FormSubmission: Story = {
-  render: () => html`
-    <div style="max-width: 450px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Submitting Form</h4>
-
-        <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
-          <rel-progress mode="circular-determinate" value="100"></rel-progress>
-          <div style="flex: 1;">
-            <div style="font-weight: 600; color: var(--rel-colors-green-success); font-size: 14px;">Validating data</div>
-          </div>
-        </div>
-
-        <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 16px;">
-          <rel-progress mode="circular-indeterminate"></rel-progress>
-          <div style="flex: 1;">
-            <div style="font-weight: 600; color: var(--rel-colors-gray-heading); font-size: 14px;">Uploading to server</div>
-          </div>
-        </div>
-
-        <div style="display: flex; align-items: center; gap: 16px;">
-          <rel-progress mode="circular-determinate" value="0"></rel-progress>
-          <div style="flex: 1;">
-            <div style="font-weight: 600; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Processing response</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Video buffering and media loading
- */
-export const VideoBuffering: Story = {
-  render: () => html`
-    <div style="max-width: 600px;">
-      <div style="background: #1a1a1a; padding: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--rel-shadows-shadow-300);">
-        <div style="aspect-ratio: 16/9; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; position: relative;">
-          <div style="text-align: center;">
-            <rel-progress mode="circular-indeterminate"></rel-progress>
-            <p style="margin: 16px 0 0; color: white; font-size: 14px; font-weight: 500;">Buffering...</p>
-          </div>
-        </div>
-        <div style="padding: 16px;">
-          <div style="margin-bottom: 8px;">
-            <span style="color: rgba(255,255,255,0.7); font-size: 13px;">Buffer progress</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="42"></rel-progress>
-          <div style="display: flex; justify-content: space-between; margin-top: 8px;">
-            <span style="color: rgba(255,255,255,0.6); font-size: 12px;">1:23</span>
-            <span style="color: rgba(255,255,255,0.6); font-size: 12px;">3:30</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Backup and restore operations
- */
-export const BackupRestore: Story = {
-  render: () => html`
-    <div style="max-width: 550px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">System Backup</h4>
-
-        <div style="margin-bottom: 24px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px; font-weight: 500;">Backing up files</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">1,247 / 2,000 files</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="62"></rel-progress>
-          <div style="margin-top: 8px; color: var(--rel-colors-gray-placeholder); font-size: 12px;">
-            <div>Current: /users/documents/projects/...</div>
-            <div style="margin-top: 4px;">Estimated time remaining: 4 minutes</div>
-          </div>
-        </div>
-
-        <div style="background: var(--rel-colors-gray-bg); padding: 16px; border-radius: 8px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 13px;">Total progress</span>
-            <span style="color: var(--rel-colors-gray-primary); font-size: 13px; font-weight: 600;">62%</span>
-          </div>
-          <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">3.7 GB backed up</div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Model training and computation
- */
-export const ModelTraining: Story = {
-  render: () => html`
-    <div style="max-width: 600px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Training Neural Network</h4>
-
-        <div style="margin-bottom: 20px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">Epoch 47 / 100</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">47%</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="47"></rel-progress>
-        </div>
-
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; background: var(--rel-colors-gray-bg); border-radius: 8px;">
-          <div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px; margin-bottom: 4px;">Loss</div>
-            <div style="color: var(--rel-colors-gray-heading); font-size: 16px; font-weight: 600;">0.0342</div>
-          </div>
-          <div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px; margin-bottom: 4px;">Accuracy</div>
-            <div style="color: var(--rel-colors-gray-heading); font-size: 16px; font-weight: 600;">94.2%</div>
-          </div>
-          <div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px; margin-bottom: 4px;">Time Elapsed</div>
-            <div style="color: var(--rel-colors-gray-heading); font-size: 14px;">2h 15m</div>
-          </div>
-          <div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px; margin-bottom: 4px;">ETA</div>
-            <div style="color: var(--rel-colors-gray-heading); font-size: 14px;">2h 34m</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Queue processing with item count
- */
-export const QueueProcessing: Story = {
-  render: () => html`
-    <div style="max-width: 500px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Processing Queue</h4>
-
-        <div style="margin-bottom: 20px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">Email notifications</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">156 / 250 sent</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="62"></rel-progress>
-        </div>
-
-        <div style="margin-bottom: 20px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">Image optimization</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">42 / 120 processed</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="35"></rel-progress>
-        </div>
-
-        <div>
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">Data export</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Queued</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="0"></rel-progress>
-        </div>
-
-        <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rel-colors-gray-border);">
-          <div style="display: flex; justify-content: between; align-items: center; gap: 12px;">
-            <rel-progress mode="circular-determinate" value="52"></rel-progress>
-            <div style="flex: 1;">
-              <div style="color: var(--rel-colors-gray-heading); font-size: 14px; font-weight: 600;">Overall Progress: 52%</div>
-              <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">198 / 370 total tasks</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Installation wizard steps
- */
-export const InstallationWizard: Story = {
-  render: () => html`
-    <div style="max-width: 550px;">
-      <div style="background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-        <h4 style="margin: 0 0 24px; color: var(--rel-colors-gray-heading); font-size: 18px;">Software Installation</h4>
-
-        <div style="margin-bottom: 32px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 12px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">Overall Progress</span>
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px; font-weight: 600;">Step 2 of 4</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="50"></rel-progress>
-        </div>
-
-        <div style="display: flex; flex-direction: column; gap: 20px;">
-          <div style="display: flex; align-items: start; gap: 16px;">
-            <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--rel-colors-green-success); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0;">✓</div>
-            <div style="flex: 1; padding-top: 4px;">
-              <div style="font-weight: 600; color: var(--rel-colors-gray-heading); margin-bottom: 4px;">License Agreement</div>
-              <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Accepted and verified</div>
-            </div>
-          </div>
-
-          <div style="display: flex; align-items: start; gap: 16px;">
-            <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--rel-colors-black); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0;">2</div>
-            <div style="flex: 1; padding-top: 4px;">
-              <div style="font-weight: 600; color: var(--rel-colors-gray-heading); margin-bottom: 4px;">Installing Components</div>
-              <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px; margin-bottom: 8px;">Installing required packages...</div>
-              <rel-progress mode="linear-determinate" value="73"></rel-progress>
-            </div>
-          </div>
-
-          <div style="display: flex; align-items: start; gap: 16px;">
-            <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--rel-colors-gray-border); color: var(--rel-colors-gray-placeholder); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0;">3</div>
-            <div style="flex: 1; padding-top: 4px;">
-              <div style="font-weight: 600; color: var(--rel-colors-gray-placeholder); margin-bottom: 4px;">Configuration</div>
-              <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Pending</div>
-            </div>
-          </div>
-
-          <div style="display: flex; align-items: start; gap: 16px;">
-            <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--rel-colors-gray-border); color: var(--rel-colors-gray-placeholder); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0;">4</div>
-            <div style="flex: 1; padding-top: 4px;">
-              <div style="font-weight: 600; color: var(--rel-colors-gray-placeholder); margin-bottom: 4px;">Finalization</div>
-              <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Pending</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Exam or test timer progress
- */
-export const TestTimer: Story = {
-  render: () => html`
-    <div style="max-width: 500px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Assessment Progress</h4>
-
-        <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 24px;">
-          <rel-progress mode="circular-determinate" value="40"></rel-progress>
-          <div>
-            <div style="font-size: 28px; font-weight: 700; color: var(--rel-colors-gray-heading); margin-bottom: 4px;">24:00</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">Time Remaining</div>
-          </div>
-        </div>
-
-        <div style="margin-bottom: 16px;">
-          <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-            <span style="color: var(--rel-colors-gray-primary); font-size: 14px;">Questions Answered</span>
-            <span style="color: var(--rel-colors-gray-placeholder); font-size: 13px;">12 / 30</span>
-          </div>
-          <rel-progress mode="linear-determinate" value="40"></rel-progress>
-        </div>
-
-        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 20px;">
-          <div style="text-align: center; padding: 12px; background: var(--rel-colors-gray-bg); border-radius: 8px;">
-            <div style="font-size: 20px; font-weight: 600; color: var(--rel-colors-green-success); margin-bottom: 4px;">10</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">Correct</div>
-          </div>
-          <div style="text-align: center; padding: 12px; background: var(--rel-colors-gray-bg); border-radius: 8px;">
-            <div style="font-size: 20px; font-weight: 600; color: var(--rel-colors-gray-heading); margin-bottom: 4px;">2</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">Incorrect</div>
-          </div>
-          <div style="text-align: center; padding: 12px; background: var(--rel-colors-gray-bg); border-radius: 8px;">
-            <div style="font-size: 20px; font-weight: 600; color: var(--rel-colors-gray-primary); margin-bottom: 4px;">18</div>
-            <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">Remaining</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Concurrent operations dashboard
- */
-export const ConcurrentOperations: Story = {
-  render: () => html`
-    <div style="max-width: 700px;">
-      <div style="background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-        <h4 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 16px;">Active Operations</h4>
-
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
-          <div style="padding: 16px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-              <rel-progress mode="circular-determinate" value="88"></rel-progress>
-              <div>
-                <div style="font-weight: 600; color: var(--rel-colors-gray-heading); font-size: 14px;">Database Sync</div>
-                <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">88%</div>
-              </div>
-            </div>
-          </div>
-
-          <div style="padding: 16px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-              <rel-progress mode="circular-indeterminate"></rel-progress>
-              <div>
-                <div style="font-weight: 600; color: var(--rel-colors-gray-heading); font-size: 14px;">API Request</div>
-                <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">Processing...</div>
-              </div>
-            </div>
-          </div>
-
-          <div style="padding: 16px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-              <rel-progress mode="circular-determinate" value="100"></rel-progress>
-              <div>
-                <div style="font-weight: 600; color: var(--rel-colors-green-success); font-size: 14px;">File Export</div>
-                <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">Complete</div>
-              </div>
-            </div>
-          </div>
-
-          <div style="padding: 16px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-              <rel-progress mode="circular-determinate" value="34"></rel-progress>
-              <div>
-                <div style="font-weight: 600; color: var(--rel-colors-gray-heading); font-size: 14px;">Image Resize</div>
-                <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">34%</div>
-              </div>
-            </div>
-          </div>
-
-          <div style="padding: 16px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-              <rel-progress mode="circular-determinate" value="56"></rel-progress>
-              <div>
-                <div style="font-weight: 600; color: var(--rel-colors-gray-heading); font-size: 14px;">PDF Generate</div>
-                <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">56%</div>
-              </div>
-            </div>
-          </div>
-
-          <div style="padding: 16px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-              <rel-progress mode="circular-indeterminate"></rel-progress>
-              <div>
-                <div style="font-weight: 600; color: var(--rel-colors-gray-heading); font-size: 14px;">Cache Clear</div>
-                <div style="color: var(--rel-colors-gray-placeholder); font-size: 12px;">Running...</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};