@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,1048 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-radio';
-import type { RadioOption } from './rel-radio';
-
-/**
- * The Radio component provides a group of mutually exclusive options.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **Single Selection**: Only one option can be selected at a time
- * - **Supporting Text**: Optional helper text for each option
- * - **Error State**: Visual feedback for validation errors
- * - **Disabled State**: Individual options can be disabled
- * - **Token-Based Styling**: Uses design system tokens
- * - **Accessible**: Proper radio button semantics and keyboard navigation
- */
-const meta: Meta = {
-  title: 'Components/Radio',
-  tags: ['autodocs'],
-  component: 'rel-radio',
-  argTypes: {
-    name: {
-      control: { type: 'text' },
-      description: 'Radio group name',
-      table: {
-        defaultValue: { summary: 'radio-group' },
-        type: { summary: 'string' },
-      },
-    },
-    selectedValue: {
-      control: { type: 'text' },
-      description: 'Currently selected value',
-      table: {
-        defaultValue: { summary: 'null' },
-        type: { summary: 'string | null' },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default radio group with basic options
- */
-export const Default: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
-      { value: 'option3', label: 'Option 3' },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'default-radio';
-    radio.selectedValue = 'option1';
-
-    radio.addEventListener('changed', (e: CustomEvent) => {
-      console.log('Selected value:', e.detail.value);
-    });
-
-    return radio;
-  },
-};
-
-/**
- * Radio group with supporting text
- */
-export const WithSupportingText: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      {
-        value: 'free',
-        label: 'Free Plan',
-        supportingText: 'Best for personal use and small projects',
-      },
-      {
-        value: 'pro',
-        label: 'Pro Plan',
-        supportingText: 'Perfect for professionals and growing teams',
-      },
-      {
-        value: 'enterprise',
-        label: 'Enterprise Plan',
-        supportingText: 'Advanced features for large organizations',
-      },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'plan-radio';
-    radio.selectedValue = 'pro';
-
-    return radio;
-  },
-};
-
-/**
- * Radio group with disabled options
- */
-export const WithDisabled: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      { value: 'option1', label: 'Available Option' },
-      { value: 'option2', label: 'Disabled Option', disabled: true },
-      { value: 'option3', label: 'Another Available' },
-      { value: 'option4', label: 'Also Disabled', disabled: true },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'disabled-radio';
-    radio.selectedValue = 'option1';
-
-    return radio;
-  },
-};
-
-/**
- * Radio group with error states
- */
-export const WithErrors: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      { value: 'visa', label: 'Visa' },
-      {
-        value: 'mastercard',
-        label: 'Mastercard',
-        error: true,
-        supportingText: 'This card is expired',
-      },
-      { value: 'amex', label: 'American Express' },
-      {
-        value: 'discover',
-        label: 'Discover',
-        error: true,
-        supportingText: 'This card was declined',
-      },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'payment-radio';
-    radio.selectedValue = null;
-
-    return radio;
-  },
-};
-
-/**
- * Payment method selection
- */
-export const PaymentMethods: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      {
-        value: 'credit-card',
-        label: 'Credit Card',
-        supportingText: 'Pay with Visa, Mastercard, or American Express',
-      },
-      {
-        value: 'paypal',
-        label: 'PayPal',
-        supportingText: 'Fast and secure payment with your PayPal account',
-      },
-      {
-        value: 'bank-transfer',
-        label: 'Bank Transfer',
-        supportingText: 'Direct transfer from your bank account',
-      },
-      {
-        value: 'crypto',
-        label: 'Cryptocurrency',
-        supportingText: 'Pay with Bitcoin or Ethereum',
-        disabled: true,
-      },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'payment-method';
-    radio.selectedValue = 'credit-card';
-
-    return radio;
-  },
-};
-
-/**
- * Shipping options selection
- */
-export const ShippingOptions: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      {
-        value: 'standard',
-        label: 'Standard Shipping - Free',
-        supportingText: 'Delivery in 5-7 business days',
-      },
-      {
-        value: 'express',
-        label: 'Express Shipping - $9.99',
-        supportingText: 'Delivery in 2-3 business days',
-      },
-      {
-        value: 'overnight',
-        label: 'Overnight Shipping - $24.99',
-        supportingText: 'Next business day delivery',
-      },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'shipping';
-    radio.selectedValue = 'standard';
-
-    return radio;
-  },
-};
-
-/**
- * Notification preferences
- */
-export const NotificationPreferences: Story = {
-  render: () => {
-    const options: RadioOption[] = [
-      {
-        value: 'all',
-        label: 'All Notifications',
-        supportingText: 'Receive all updates and announcements',
-      },
-      {
-        value: 'important',
-        label: 'Important Only',
-        supportingText: 'Only critical updates and alerts',
-      },
-      {
-        value: 'none',
-        label: 'No Notifications',
-        supportingText: 'Turn off all notifications',
-      },
-    ];
-
-    const radio = document.createElement('rel-radio') as any;
-    radio.options = options;
-    radio.name = 'notifications';
-    radio.selectedValue = 'important';
-
-    return radio;
-  },
-};
-
-/**
- * Survey question example
- */
-export const SurveyQuestion: Story = {
-  render: () => html`
-    <div style="max-width: 600px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 18px;">
-        How satisfied are you with our service?
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">
-        Please select one option below
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          {
-            value: 'very-satisfied',
-            label: 'Very Satisfied',
-            supportingText: 'Exceeds my expectations',
-          },
-          {
-            value: 'satisfied',
-            label: 'Satisfied',
-            supportingText: 'Meets my expectations',
-          },
-          {
-            value: 'neutral',
-            label: 'Neutral',
-            supportingText: 'Neither satisfied nor dissatisfied',
-          },
-          {
-            value: 'dissatisfied',
-            label: 'Dissatisfied',
-            supportingText: 'Below my expectations',
-          },
-          {
-            value: 'very-dissatisfied',
-            label: 'Very Dissatisfied',
-            supportingText: 'Far below my expectations',
-          },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'satisfaction';
-        radio.selectedValue = null;
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Account type selection
- */
-export const AccountType: Story = {
-  render: () => html`
-    <div style="max-width: 500px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-        Select Account Type
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-        Choose the type of account you want to create
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          {
-            value: 'personal',
-            label: 'Personal Account',
-            supportingText: 'For individual use and personal projects',
-          },
-          {
-            value: 'business',
-            label: 'Business Account',
-            supportingText: 'For companies and organizations',
-          },
-          {
-            value: 'developer',
-            label: 'Developer Account',
-            supportingText: 'Access to APIs and advanced features',
-          },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'account-type';
-        radio.selectedValue = 'personal';
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Form with multiple radio groups
- */
-export const MultipleGroups: Story = {
-  render: () => html`
-    <div style="max-width: 600px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 20px; color: var(--rel-colors-gray-heading); font-size: 18px;">
-        Product Feedback Form
-      </h3>
-
-      <div style="margin-bottom: 28px;">
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 15px;">
-          How often do you use this product?
-        </h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: 'daily', label: 'Daily' },
-            { value: 'weekly', label: 'Weekly' },
-            { value: 'monthly', label: 'Monthly' },
-            { value: 'rarely', label: 'Rarely' },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'frequency';
-          radio.selectedValue = 'daily';
-
-          return radio;
-        })()}
-      </div>
-
-      <div style="margin-bottom: 28px;">
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 15px;">
-          Would you recommend this product?
-        </h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: 'yes', label: 'Yes, definitely' },
-            { value: 'maybe', label: 'Maybe' },
-            { value: 'no', label: 'No, not likely' },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'recommend';
-          radio.selectedValue = null;
-
-          return radio;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 15px;">
-          Rate the overall experience
-        </h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: '5', label: 'Excellent' },
-            { value: '4', label: 'Good' },
-            { value: '3', label: 'Average' },
-            { value: '2', label: 'Poor' },
-            { value: '1', label: 'Very Poor' },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'rating';
-          radio.selectedValue = '4';
-
-          return radio;
-        })()}
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All states showcase
- */
-export const AllStates: 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;">Default State</h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: '1', label: 'Option 1' },
-            { value: '2', label: 'Option 2' },
-            { value: '3', label: 'Option 3' },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'state-default';
-          radio.selectedValue = '2';
-
-          return radio;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">With Supporting Text</h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: '1', label: 'Option 1', supportingText: 'Helper text for option 1' },
-            { value: '2', label: 'Option 2', supportingText: 'Helper text for option 2' },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'state-supporting';
-          radio.selectedValue = '1';
-
-          return radio;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Disabled State</h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: '1', label: 'Enabled Option' },
-            { value: '2', label: 'Disabled Option', disabled: true },
-            { value: '3', label: 'Disabled Selected', disabled: true },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'state-disabled';
-          radio.selectedValue = '3';
-
-          return radio;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Error State</h4>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: '1', label: 'Valid Option' },
-            {
-              value: '2',
-              label: 'Error Option',
-              error: true,
-              supportingText: 'This option has an error',
-            },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'state-error';
-          radio.selectedValue = null;
-
-          return radio;
-        })()}
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Two options - Binary choice
- */
-export const TwoOptions: Story = {
-  render: () => html`
-    <div style="max-width: 500px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-        Enable Two-Factor Authentication
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-        Add an extra layer of security to your account
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          {
-            value: 'enable',
-            label: 'Enable 2FA',
-            supportingText: 'Recommended for account security',
-          },
-          {
-            value: 'disable',
-            label: 'Keep Disabled',
-            supportingText: 'Continue with password only',
-          },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'two-factor';
-        radio.selectedValue = 'enable';
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Four options - Size selection
- */
-export const FourOptions: Story = {
-  render: () => html`
-    <div style="max-width: 500px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-        Select T-Shirt Size
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-        Choose your preferred size
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          { value: 'small', label: 'Small (S)', supportingText: 'Chest: 34-36"' },
-          { value: 'medium', label: 'Medium (M)', supportingText: 'Chest: 38-40"' },
-          { value: 'large', label: 'Large (L)', supportingText: 'Chest: 42-44"' },
-          { value: 'xlarge', label: 'Extra Large (XL)', supportingText: 'Chest: 46-48"' },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'tshirt-size';
-        radio.selectedValue = 'medium';
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Six options - Priority levels
- */
-export const SixOptions: Story = {
-  render: () => html`
-    <div style="max-width: 550px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-        Issue Priority Level
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-        Set the priority for this support ticket
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          { value: 'critical', label: 'Critical', supportingText: 'System down, major impact on business' },
-          { value: 'high', label: 'High', supportingText: 'Significant feature broken, workaround available' },
-          { value: 'medium', label: 'Medium', supportingText: 'Feature issue, moderate impact' },
-          { value: 'low', label: 'Low', supportingText: 'Minor issue, limited impact' },
-          { value: 'minimal', label: 'Minimal', supportingText: 'Cosmetic issue or enhancement request' },
-          { value: 'question', label: 'Question', supportingText: 'General inquiry or how-to question' },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'priority';
-        radio.selectedValue = null;
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Pre-selected value - User preference
- */
-export const PreselectedValue: Story = {
-  render: () => html`
-    <div style="max-width: 500px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-        Default Language
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-        Your current preference is pre-selected
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          { value: 'en', label: 'English', supportingText: 'Default language' },
-          { value: 'es', label: 'Spanish', supportingText: 'Español' },
-          { value: 'fr', label: 'French', supportingText: 'Français' },
-          { value: 'de', label: 'German', supportingText: 'Deutsch' },
-          { value: 'ja', label: 'Japanese', supportingText: '日本語' },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'language';
-        radio.selectedValue = 'en'; // Pre-selected
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Mixed states - Disabled and error options
- */
-export const MixedStates: Story = {
-  render: () => html`
-    <div style="max-width: 550px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-        Select Backup Storage
-      </h3>
-      <p style="margin: 0 0 20px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-        Choose where to store your backups
-      </p>
-      ${(() => {
-        const options: RadioOption[] = [
-          {
-            value: 'local',
-            label: 'Local Storage',
-            supportingText: 'Store backups on this device',
-          },
-          {
-            value: 'cloud',
-            label: 'Cloud Storage',
-            supportingText: 'Secure cloud backup with encryption',
-          },
-          {
-            value: 'external',
-            label: 'External Drive',
-            disabled: true,
-            supportingText: 'No external drive detected',
-          },
-          {
-            value: 'network',
-            label: 'Network Storage',
-            error: true,
-            supportingText: 'Connection failed - check network settings',
-          },
-          {
-            value: 'ftp',
-            label: 'FTP Server',
-            disabled: true,
-            supportingText: 'Feature coming soon',
-          },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'backup-storage';
-        radio.selectedValue = 'cloud';
-
-        return radio;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Registration form - Complete form example
- */
-export const RegistrationForm: Story = {
-  render: () => html`
-    <div style="max-width: 650px; background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-      <h2 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 24px;">
-        Event Registration
-      </h2>
-      <p style="margin: 0 0 32px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">
-        Please complete all fields to register for the conference
-      </p>
-
-      <div style="margin-bottom: 28px;">
-        <label style="display: block; margin-bottom: 12px; color: var(--rel-colors-gray-heading); font-size: 14px; font-weight: 500;">
-          Attendance Type *
-        </label>
-        ${(() => {
-          const options: RadioOption[] = [
-            {
-              value: 'in-person',
-              label: 'In-Person Attendance',
-              supportingText: 'Join us at the venue - includes meals and materials',
-            },
-            {
-              value: 'virtual',
-              label: 'Virtual Attendance',
-              supportingText: 'Stream live from anywhere - receive digital materials',
-            },
-            {
-              value: 'hybrid',
-              label: 'Hybrid Access',
-              supportingText: 'Attend select sessions in-person, others virtually',
-              disabled: true,
-            },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'attendance-type';
-          radio.selectedValue = 'in-person';
-
-          return radio;
-        })()}
-      </div>
-
-      <div style="margin-bottom: 28px;">
-        <label style="display: block; margin-bottom: 12px; color: var(--rel-colors-gray-heading); font-size: 14px; font-weight: 500;">
-          Ticket Type *
-        </label>
-        ${(() => {
-          const options: RadioOption[] = [
-            {
-              value: 'early-bird',
-              label: 'Early Bird - $299',
-              supportingText: 'Save $100 - Limited time offer ends March 15',
-            },
-            {
-              value: 'standard',
-              label: 'Standard - $399',
-              supportingText: 'Regular admission price',
-            },
-            {
-              value: 'vip',
-              label: 'VIP Pass - $599',
-              supportingText: 'Premium seating, exclusive networking events, and swag bag',
-            },
-            {
-              value: 'student',
-              label: 'Student - $199',
-              supportingText: 'Valid student ID required at check-in',
-            },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'ticket-type';
-          radio.selectedValue = 'early-bird';
-
-          return radio;
-        })()}
-      </div>
-
-      <div style="margin-bottom: 28px;">
-        <label style="display: block; margin-bottom: 12px; color: var(--rel-colors-gray-heading); font-size: 14px; font-weight: 500;">
-          Dietary Restrictions
-        </label>
-        ${(() => {
-          const options: RadioOption[] = [
-            { value: 'none', label: 'No Restrictions' },
-            { value: 'vegetarian', label: 'Vegetarian', supportingText: 'Plant-based options' },
-            { value: 'vegan', label: 'Vegan', supportingText: 'No animal products' },
-            { value: 'gluten-free', label: 'Gluten-Free', supportingText: 'Celiac-friendly meals' },
-            { value: 'other', label: 'Other', supportingText: 'Please specify in additional notes' },
-          ];
-
-          const radio = document.createElement('rel-radio') as any;
-          radio.options = options;
-          radio.name = 'dietary';
-          radio.selectedValue = 'none';
-
-          return radio;
-        })()}
-      </div>
-
-      <button style="
-        width: 100%;
-        padding: 12px 24px;
-        background: var(--rel-colors-black);
-        color: white;
-        border: none;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 500;
-        cursor: pointer;
-        margin-top: 12px;
-      ">
-        Complete Registration
-      </button>
-    </div>
-  `,
-};
-
-/**
- * Settings panel - Multiple radio groups in context
- */
-export const SettingsPanel: Story = {
-  render: () => html`
-    <div style="max-width: 700px; background: white; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-      <div style="padding: 24px; border-bottom: 1px solid #e5e7eb;">
-        <h2 style="margin: 0; color: var(--rel-colors-gray-heading); font-size: 20px;">
-          Application Settings
-        </h2>
-      </div>
-
-      <div style="padding: 24px;">
-        <div style="margin-bottom: 32px;">
-          <h3 style="margin: 0 0 6px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-            Theme Preference
-          </h3>
-          <p style="margin: 0 0 16px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-            Choose your preferred color scheme
-          </p>
-          ${(() => {
-            const options: RadioOption[] = [
-              { value: 'light', label: 'Light Mode', supportingText: 'Classic bright interface' },
-              { value: 'dark', label: 'Dark Mode', supportingText: 'Easier on the eyes in low light' },
-              { value: 'auto', label: 'Auto', supportingText: 'Match system preference' },
-            ];
-
-            const radio = document.createElement('rel-radio') as any;
-            radio.options = options;
-            radio.name = 'theme';
-            radio.selectedValue = 'auto';
-
-            return radio;
-          })()}
-        </div>
-
-        <div style="margin-bottom: 32px;">
-          <h3 style="margin: 0 0 6px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-            Data Sync Frequency
-          </h3>
-          <p style="margin: 0 0 16px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-            How often should we sync your data?
-          </p>
-          ${(() => {
-            const options: RadioOption[] = [
-              { value: 'realtime', label: 'Real-time', supportingText: 'Instant updates (higher battery usage)' },
-              { value: '15min', label: 'Every 15 minutes', supportingText: 'Balanced performance' },
-              { value: 'hourly', label: 'Hourly', supportingText: 'Better battery life' },
-              { value: 'manual', label: 'Manual Only', supportingText: 'Sync when you choose' },
-            ];
-
-            const radio = document.createElement('rel-radio') as any;
-            radio.options = options;
-            radio.name = 'sync-frequency';
-            radio.selectedValue = '15min';
-
-            return radio;
-          })()}
-        </div>
-
-        <div style="margin-bottom: 32px;">
-          <h3 style="margin: 0 0 6px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-            Privacy Level
-          </h3>
-          <p style="margin: 0 0 16px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-            Control what data is collected
-          </p>
-          ${(() => {
-            const options: RadioOption[] = [
-              {
-                value: 'minimal',
-                label: 'Minimal',
-                supportingText: 'Only essential data for core functionality',
-              },
-              {
-                value: 'standard',
-                label: 'Standard',
-                supportingText: 'Basic analytics to improve the service',
-              },
-              {
-                value: 'full',
-                label: 'Full',
-                supportingText: 'Detailed analytics for personalized experience',
-              },
-            ];
-
-            const radio = document.createElement('rel-radio') as any;
-            radio.options = options;
-            radio.name = 'privacy';
-            radio.selectedValue = 'standard';
-
-            return radio;
-          })()}
-        </div>
-
-        <div>
-          <h3 style="margin: 0 0 6px; color: var(--rel-colors-gray-heading); font-size: 16px;">
-            Default View
-          </h3>
-          <p style="margin: 0 0 16px; color: var(--rel-colors-gray-placeholder); font-size: 13px;">
-            What should you see when opening the app?
-          </p>
-          ${(() => {
-            const options: RadioOption[] = [
-              { value: 'dashboard', label: 'Dashboard', supportingText: 'Overview of all activities' },
-              { value: 'inbox', label: 'Inbox', supportingText: 'Start with your messages' },
-              { value: 'calendar', label: 'Calendar', supportingText: 'View your schedule' },
-              { value: 'tasks', label: 'Tasks', supportingText: 'See pending to-dos' },
-              {
-                value: 'analytics',
-                label: 'Analytics',
-                supportingText: 'View reports and insights',
-                disabled: true,
-              },
-            ];
-
-            const radio = document.createElement('rel-radio') as any;
-            radio.options = options;
-            radio.name = 'default-view';
-            radio.selectedValue = 'dashboard';
-
-            return radio;
-          })()}
-        </div>
-      </div>
-
-      <div style="padding: 16px 24px; background: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 12px; border-radius: 0 0 12px 12px;">
-        <button style="
-          padding: 8px 16px;
-          background: white;
-          color: var(--rel-colors-gray-heading);
-          border: 1px solid #d1d5db;
-          border-radius: 6px;
-          font-size: 14px;
-          cursor: pointer;
-        ">
-          Cancel
-        </button>
-        <button style="
-          padding: 8px 16px;
-          background: var(--rel-colors-black);
-          color: white;
-          border: none;
-          border-radius: 6px;
-          font-size: 14px;
-          cursor: pointer;
-        ">
-          Save Settings
-        </button>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Subscription plan selector
- */
-export const SubscriptionPlans: Story = {
-  render: () => html`
-    <div style="max-width: 600px; background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-300);">
-      <h2 style="margin: 0 0 8px; color: var(--rel-colors-gray-heading); font-size: 22px; text-align: center;">
-        Choose Your Plan
-      </h2>
-      <p style="margin: 0 0 32px; color: var(--rel-colors-gray-placeholder); font-size: 14px; text-align: center;">
-        Select the subscription that best fits your needs
-      </p>
-
-      ${(() => {
-        const options: RadioOption[] = [
-          {
-            value: 'free',
-            label: 'Free - $0/month',
-            supportingText: '5 projects, 100MB storage, community support',
-          },
-          {
-            value: 'starter',
-            label: 'Starter - $9/month',
-            supportingText: '20 projects, 5GB storage, email support, basic analytics',
-          },
-          {
-            value: 'professional',
-            label: 'Professional - $29/month',
-            supportingText: 'Unlimited projects, 50GB storage, priority support, advanced analytics, API access',
-          },
-          {
-            value: 'team',
-            label: 'Team - $79/month',
-            supportingText: 'Everything in Pro + 5 team members, 200GB storage, dedicated support, SSO',
-          },
-          {
-            value: 'enterprise',
-            label: 'Enterprise - Custom Pricing',
-            supportingText: 'Custom solutions, unlimited storage, SLA, dedicated account manager',
-          },
-        ];
-
-        const radio = document.createElement('rel-radio') as any;
-        radio.options = options;
-        radio.name = 'subscription-plan';
-        radio.selectedValue = 'professional';
-
-        radio.addEventListener('changed', (e: CustomEvent) => {
-          console.log('Selected plan:', e.detail.value);
-        });
-
-        return radio;
-      })()}
-
-      <div style="margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e7eb;">
-        <button style="
-          width: 100%;
-          padding: 14px 24px;
-          background: var(--rel-colors-black);
-          color: white;
-          border: none;
-          border-radius: 8px;
-          font-size: 16px;
-          font-weight: 500;
-          cursor: pointer;
-        ">
-          Continue to Payment
-        </button>
-        <p style="margin: 12px 0 0; text-align: center; color: var(--rel-colors-gray-placeholder); font-size: 12px;">
-          You can cancel or change your plan anytime
-        </p>
-      </div>
-    </div>
-  `,
-};