@reliability-design/web 1.0.2 → 1.0.6

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

@@ -1,808 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-snackbar';
-
-/**
- * The Snackbar component provides brief messages about app processes at the bottom of the screen.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **Auto-dismiss**: Automatically disappears after specified duration
- * - **Action Button**: Optional action button with custom text
- * - **Close Icon**: Optional close button
- * - **Layout Modes**: Single or double line layouts
- * - **Longer Action**: Doubles the duration for actions requiring more time
- * - **Token-Based Styling**: Uses design system tokens
- * - **Animated Entry**: Slides up with fade-in animation
- */
-const meta: Meta = {
-  title: 'Components/Snackbar',
-  tags: ['autodocs'],
-  component: 'rel-snackbar',
-  argTypes: {
-    lines: {
-      control: { type: 'select' },
-      options: ['single', 'double'],
-      description: 'Layout style',
-      table: {
-        defaultValue: { summary: 'single' },
-        type: { summary: 'single | double' },
-      },
-    },
-    duration: {
-      control: { type: 'number' },
-      description: 'Auto-dismiss duration in milliseconds (0 to disable)',
-      table: {
-        defaultValue: { summary: '4000' },
-      },
-    },
-    longerAction: {
-      control: { type: 'boolean' },
-      description: 'Doubles the duration for longer actions',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    iconClose: {
-      control: { type: 'boolean' },
-      description: 'Show close button',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default snackbar with message and close icon
- */
-export const Default: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'This is a snackbar message';
-    snackbar.duration = 0; // Disable auto-dismiss for demo
-    snackbar.addEventListener('close', () => {
-      console.log('Snackbar closed');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Snackbar with action button
- */
-export const WithAction: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Connection lost';
-    snackbar.action = 'Retry';
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Action clicked');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Snackbar without close icon
- */
-export const WithoutCloseIcon: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Message sent successfully';
-    snackbar.iconClose = false;
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Snackbar with action and no close icon
- */
-export const ActionOnly: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Your changes have been saved';
-    snackbar.action = 'Undo';
-    snackbar.iconClose = false;
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Undo clicked');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Double line layout
- */
-export const DoubleLine: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'This is a longer snackbar message that needs more space';
-    snackbar.action = 'View Details';
-    snackbar.lines = 'double';
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Double line with longer action
- */
-export const DoubleLineWithLongerAction: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Please review the details before continuing with this action';
-    snackbar.action = 'Review';
-    snackbar.lines = 'double';
-    snackbar.longerAction = true;
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Success message
- */
-export const SuccessMessage: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'File uploaded successfully';
-    snackbar.iconClose = false;
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Error message with retry
- */
-export const ErrorWithRetry: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Failed to save changes';
-    snackbar.action = 'Retry';
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Retrying...');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Network status
- */
-export const NetworkStatus: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'No internet connection';
-    snackbar.action = 'Retry';
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Download complete
- */
-export const DownloadComplete: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Download complete';
-    snackbar.action = 'Open';
-    snackbar.iconClose = false;
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Opening file...');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Undo action
- */
-export const UndoAction: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Item deleted';
-    snackbar.action = 'Undo';
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Undo delete');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Long message
- */
-export const LongMessage: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Your request is being processed. This may take a few moments to complete.';
-    snackbar.action = 'View Status';
-    snackbar.lines = 'double';
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Update available
- */
-export const UpdateAvailable: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'A new version is available';
-    snackbar.action = 'Update';
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Updating...');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Multiple snackbars stacked
- */
-export const StackedSnackbars: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; align-items: flex-start;">
-      ${(() => {
-        const snackbar1 = document.createElement('rel-snackbar') as any;
-        snackbar1.message = 'First notification';
-        snackbar1.action = 'Action';
-        snackbar1.duration = 0;
-
-        return snackbar1;
-      })()}
-      ${(() => {
-        const snackbar2 = document.createElement('rel-snackbar') as any;
-        snackbar2.message = 'Second notification';
-        snackbar2.duration = 0;
-
-        return snackbar2;
-      })()}
-      ${(() => {
-        const snackbar3 = document.createElement('rel-snackbar') as any;
-        snackbar3.message = 'Third notification';
-        snackbar3.action = 'View';
-        snackbar3.duration = 0;
-
-        return snackbar3;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Interactive demo with auto-dismiss
- */
-export const InteractiveDemo: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <button
-        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-        @click=${(e: Event) => {
-          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'This will auto-dismiss in 4 seconds';
-          snackbar.action = 'Dismiss';
-          snackbar.duration = 4000;
-          snackbar.addEventListener('close', () => {
-            snackbar.remove();
-          });
-          snackbar.addEventListener('actionClick', () => {
-            console.log('Action clicked');
-          });
-          container!.appendChild(snackbar);
-        }}>
-        Show Snackbar
-      </button>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Single line - basic message only
- */
-export const SingleLineBasic: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Operation completed';
-    snackbar.lines = 'single';
-    snackbar.iconClose = false;
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Single line - with action and close
- */
-export const SingleLineComplete: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Email sent to john@example.com';
-    snackbar.action = 'View';
-    snackbar.lines = 'single';
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('View email');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Double line - no action
- */
-export const DoubleLineNoAction: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'Your data has been synchronized across all devices successfully';
-    snackbar.lines = 'double';
-    snackbar.duration = 0;
-
-    return snackbar;
-  },
-};
-
-/**
- * Double line - action only (no close)
- */
-export const DoubleLineActionOnly: Story = {
-  render: () => {
-    const snackbar = document.createElement('rel-snackbar') as any;
-    snackbar.message = 'New features are available in this release. Check them out!';
-    snackbar.action = 'Learn More';
-    snackbar.lines = 'double';
-    snackbar.iconClose = false;
-    snackbar.duration = 0;
-    snackbar.addEventListener('actionClick', () => {
-      console.log('Navigate to features page');
-    });
-
-    return snackbar;
-  },
-};
-
-/**
- * Duration - 2 seconds (short)
- */
-export const ShortDuration: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <button
-        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-        @click=${(e: Event) => {
-          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Quick notification (2s)';
-          snackbar.duration = 2000;
-          snackbar.addEventListener('close', () => {
-            snackbar.remove();
-          });
-          container!.appendChild(snackbar);
-        }}>
-        Show 2-Second Snackbar
-      </button>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Duration - 6 seconds (long)
- */
-export const LongDuration: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <button
-        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-        @click=${(e: Event) => {
-          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Important message (6s)';
-          snackbar.action = 'Acknowledge';
-          snackbar.duration = 6000;
-          snackbar.addEventListener('close', () => {
-            snackbar.remove();
-          });
-          snackbar.addEventListener('actionClick', () => {
-            console.log('Acknowledged');
-          });
-          container!.appendChild(snackbar);
-        }}>
-        Show 6-Second Snackbar
-      </button>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Longer action demonstration - duration doubles
- */
-export const LongerActionDemo: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div style="margin-bottom: 12px;">
-        <p style="margin: 0; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm); color: var(--rel-colors-gray-heading);">
-          The longerAction property doubles the auto-dismiss duration (4s → 8s)
-        </p>
-      </div>
-      <button
-        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-        @click=${(e: Event) => {
-          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Review this carefully before deciding';
-          snackbar.action = 'Review & Approve';
-          snackbar.lines = 'double';
-          snackbar.longerAction = true;
-          snackbar.duration = 4000; // Will become 8000ms due to longerAction
-          snackbar.addEventListener('close', () => {
-            snackbar.remove();
-          });
-          snackbar.addEventListener('actionClick', () => {
-            console.log('Review action clicked');
-          });
-          container!.appendChild(snackbar);
-        }}>
-        Show Longer Action Snackbar (8s)
-      </button>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Interactive - Form submission success
- */
-export const FormSubmissionSuccess: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div style="padding: 24px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-        <h4 style="margin: 0 0 16px; font-family: var(--rel-fontFamilies-primary); color: var(--rel-colors-gray-heading);">Contact Form</h4>
-        <input type="text" placeholder="Name" style="width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid var(--rel-colors-gray-border); border-radius: 4px; font-family: var(--rel-fontFamilies-primary);" />
-        <input type="email" placeholder="Email" style="width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid var(--rel-colors-gray-border); border-radius: 4px; font-family: var(--rel-fontFamilies-primary);" />
-        <button
-          style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-          @click=${(e: Event) => {
-            const container = (e.target as HTMLElement).closest('div')!.parentElement!.querySelector('.snackbar-container');
-            const snackbar = document.createElement('rel-snackbar') as any;
-            snackbar.message = 'Form submitted successfully';
-            snackbar.action = 'View';
-            snackbar.iconClose = false;
-            snackbar.duration = 3000;
-            snackbar.addEventListener('close', () => {
-              snackbar.remove();
-            });
-            snackbar.addEventListener('actionClick', () => {
-              console.log('View submission');
-            });
-            container!.appendChild(snackbar);
-          }}>
-          Submit
-        </button>
-      </div>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Interactive - Delete with undo
- */
-export const DeleteWithUndo: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div style="padding: 24px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-        <h4 style="margin: 0 0 16px; font-family: var(--rel-fontFamilies-primary); color: var(--rel-colors-gray-heading);">File Manager</h4>
-        <div style="padding: 12px; background: var(--rel-colors-gray-bg); border-radius: 4px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center;">
-          <span style="font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);">document.pdf</span>
-          <button
-            style="padding: 8px 16px; background: #dc2626; color: white; border: none; border-radius: 4px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-            @click=${(e: Event) => {
-              const container = (e.target as HTMLElement).closest('div')!.parentElement!.parentElement!.querySelector('.snackbar-container');
-              const snackbar = document.createElement('rel-snackbar') as any;
-              snackbar.message = 'document.pdf deleted';
-              snackbar.action = 'Undo';
-              snackbar.duration = 5000;
-              snackbar.addEventListener('close', () => {
-                snackbar.remove();
-              });
-              snackbar.addEventListener('actionClick', () => {
-                console.log('File restored');
-                alert('File restored!');
-              });
-              container!.appendChild(snackbar);
-            }}>
-            Delete
-          </button>
-        </div>
-      </div>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Interactive - Network error with retry
- */
-export const NetworkErrorRetry: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <button
-        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-        @click=${(e: Event) => {
-          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
-          // Clear any existing snackbars
-          container!.innerHTML = '';
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Failed to connect to server';
-          snackbar.action = 'Retry';
-          snackbar.lines = 'single';
-          snackbar.duration = 0; // Don't auto-dismiss on error
-          let retryCount = 0;
-          snackbar.addEventListener('actionClick', () => {
-            retryCount++;
-            console.log(`Retry attempt ${retryCount}`);
-
-            // Simulate retry
-            setTimeout(() => {
-              snackbar.remove();
-              if (retryCount === 1) {
-                // First retry fails
-                const retrySnackbar = document.createElement('rel-snackbar') as any;
-                retrySnackbar.message = 'Still unable to connect';
-                retrySnackbar.action = 'Retry';
-                retrySnackbar.duration = 0;
-                retrySnackbar.addEventListener('actionClick', () => {
-                  retrySnackbar.remove();
-                  // Second retry succeeds
-                  const successSnackbar = document.createElement('rel-snackbar') as any;
-                  successSnackbar.message = 'Connected successfully';
-                  successSnackbar.iconClose = false;
-                  successSnackbar.duration = 3000;
-                  successSnackbar.addEventListener('close', () => {
-                    successSnackbar.remove();
-                  });
-                  container!.appendChild(successSnackbar);
-                });
-                container!.appendChild(retrySnackbar);
-              }
-            }, 1000);
-          });
-          container!.appendChild(snackbar);
-        }}>
-        Simulate Connection Error
-      </button>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Interactive - Multiple notification queue
- */
-export const NotificationQueue: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div style="display: flex; gap: 12px;">
-        <button
-          style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-          @click=${(e: Event) => {
-            const container = (e.target as HTMLElement).parentElement!.parentElement!.querySelector('.snackbar-container');
-            const messages = [
-              { msg: 'Task 1 completed', action: 'View' },
-              { msg: 'Task 2 completed', action: 'View' },
-              { msg: 'Task 3 completed', action: 'View' },
-            ];
-
-            messages.forEach((item, index) => {
-              setTimeout(() => {
-                const snackbar = document.createElement('rel-snackbar') as any;
-                snackbar.message = item.msg;
-                snackbar.action = item.action;
-                snackbar.duration = 3000;
-                snackbar.addEventListener('close', () => {
-                  snackbar.remove();
-                });
-                snackbar.addEventListener('actionClick', () => {
-                  console.log(`View task ${index + 1}`);
-                });
-                container!.appendChild(snackbar);
-              }, index * 500);
-            });
-          }}>
-          Queue Multiple Notifications
-        </button>
-        <button
-          style="padding: 12px 24px; background: #dc2626; color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-          @click=${(e: Event) => {
-            const container = (e.target as HTMLElement).parentElement!.parentElement!.querySelector('.snackbar-container');
-            container!.innerHTML = '';
-          }}>
-          Clear All
-        </button>
-      </div>
-      <div class="snackbar-container" style="display: flex; flex-direction: column; gap: 12px; min-height: 200px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Use case - File upload progress
- */
-export const FileUploadProgress: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <button
-        style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-        @click=${(e: Event) => {
-          const container = (e.target as HTMLElement).parentElement!.querySelector('.snackbar-container');
-          container!.innerHTML = '';
-
-          // Show uploading
-          const uploadingSnackbar = document.createElement('rel-snackbar') as any;
-          uploadingSnackbar.message = 'Uploading image.jpg...';
-          uploadingSnackbar.iconClose = false;
-          uploadingSnackbar.duration = 0;
-          container!.appendChild(uploadingSnackbar);
-
-          // After 2 seconds, show success
-          setTimeout(() => {
-            uploadingSnackbar.remove();
-            const successSnackbar = document.createElement('rel-snackbar') as any;
-            successSnackbar.message = 'image.jpg uploaded successfully';
-            successSnackbar.action = 'View';
-            successSnackbar.duration = 4000;
-            successSnackbar.addEventListener('close', () => {
-              successSnackbar.remove();
-            });
-            successSnackbar.addEventListener('actionClick', () => {
-              console.log('View uploaded file');
-            });
-            container!.appendChild(successSnackbar);
-          }, 2000);
-        }}>
-        Upload File
-      </button>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * Use case - Settings saved
- */
-export const SettingsSaved: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <div style="padding: 24px; border: 1px solid var(--rel-colors-gray-border); border-radius: 8px;">
-        <h4 style="margin: 0 0 16px; font-family: var(--rel-fontFamilies-primary); color: var(--rel-colors-gray-heading);">User Preferences</h4>
-        <label style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);">
-          <input type="checkbox" />
-          Enable notifications
-        </label>
-        <label style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);">
-          <input type="checkbox" />
-          Auto-save
-        </label>
-        <button
-          style="padding: 12px 24px; background: var(--rel-colors-black); color: white; border: none; border-radius: 6px; cursor: pointer; font-family: var(--rel-fontFamilies-primary); font-size: var(--rel-fontSizes-sm);"
-          @click=${(e: Event) => {
-            const container = (e.target as HTMLElement).closest('div')!.parentElement!.parentElement!.querySelector('.snackbar-container');
-            const snackbar = document.createElement('rel-snackbar') as any;
-            snackbar.message = 'Settings saved';
-            snackbar.iconClose = false;
-            snackbar.duration = 2000;
-            snackbar.addEventListener('close', () => {
-              snackbar.remove();
-            });
-            container!.appendChild(snackbar);
-          }}>
-          Save Settings
-        </button>
-      </div>
-      <div class="snackbar-container" style="min-height: 100px;"></div>
-    </div>
-  `,
-};
-
-/**
- * All variants showcase
- */
-export const AllVariants: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px;">
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Default</h4>
-        ${(() => {
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'This is a snackbar message';
-          snackbar.duration = 0;
-
-          return snackbar;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">With Action</h4>
-        ${(() => {
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Connection lost';
-          snackbar.action = 'Retry';
-          snackbar.duration = 0;
-
-          return snackbar;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Without Close Icon</h4>
-        ${(() => {
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Message sent successfully';
-          snackbar.iconClose = false;
-          snackbar.duration = 0;
-
-          return snackbar;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Action Only</h4>
-        ${(() => {
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'Your changes have been saved';
-          snackbar.action = 'Undo';
-          snackbar.iconClose = false;
-          snackbar.duration = 0;
-
-          return snackbar;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 16px;">Double Line</h4>
-        ${(() => {
-          const snackbar = document.createElement('rel-snackbar') as any;
-          snackbar.message = 'This is a longer snackbar message that needs more space';
-          snackbar.action = 'View Details';
-          snackbar.lines = 'double';
-          snackbar.duration = 0;
-
-          return snackbar;
-        })()}
-      </div>
-    </div>
-  `,
-};