@reliability-design/web 1.0.2

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

@@ -0,0 +1,1201 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import { html } from 'lit';
+import './rel-select';
+
+/**
+ * The Select component provides a dropdown selection interface with various states and customization options.
+ * Built with Lit web components for framework-agnostic usage with full token support.
+ *
+ * ## Features
+ * - **Multiple Sizes**: Small, medium, and large sizes
+ * - **State Management**: Default, error, and disabled states
+ * - **Icon Support**: Optional left and right icons
+ * - **Border Styles**: Rounded or sharp borders
+ * - **Supporting Text**: Helper text with error styling
+ * - **Token-Based Styling**: Uses design system tokens
+ * - **Accessible**: Proper select semantics and keyboard support
+ */
+const meta: Meta = {
+  title: 'Components/Select',
+  tags: ['autodocs'],
+  component: 'rel-select',
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the select component',
+      table: {
+        defaultValue: { summary: 'medium' },
+        type: { summary: 'small | medium | large' },
+      },
+    },
+    state: {
+      control: { type: 'select' },
+      options: ['default', 'error', 'disabled'],
+      description: 'State of the select component',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: 'default | error | disabled' },
+      },
+    },
+    border: {
+      control: { type: 'select' },
+      options: ['rounded', 'sharp'],
+      description: 'Border style',
+      table: {
+        defaultValue: { summary: 'rounded' },
+        type: { summary: 'rounded | sharp' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+/**
+ * Default select with basic options
+ */
+export const Default: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Country';
+    select.options = ['United States', 'Canada', 'United Kingdom', 'Australia', 'Germany'];
+    select.supportingText = 'Select your country';
+    select.addEventListener('changed', (e: CustomEvent) => {
+      console.log('Selected:', e.detail.value);
+    });
+
+    return select;
+  },
+};
+
+/**
+ * Small size select
+ */
+export const Small: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Size';
+    select.options = ['XS', 'S', 'M', 'L', 'XL'];
+    select.size = 'small';
+    select.selected = 'M';
+
+    return select;
+  },
+};
+
+/**
+ * Medium size select
+ */
+export const Medium: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Priority';
+    select.options = ['Low', 'Medium', 'High', 'Urgent'];
+    select.size = 'medium';
+    select.selected = 'Medium';
+
+    return select;
+  },
+};
+
+/**
+ * Large size select
+ */
+export const Large: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Category';
+    select.options = ['Technology', 'Business', 'Health', 'Education', 'Entertainment'];
+    select.size = 'large';
+
+    return select;
+  },
+};
+
+/**
+ * Select with error state
+ */
+export const ErrorState: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Payment Method';
+    select.options = ['Credit Card', 'Debit Card', 'PayPal', 'Bank Transfer'];
+    select.state = 'error';
+    select.supportingText = 'Please select a payment method';
+
+    return select;
+  },
+};
+
+/**
+ * Disabled select
+ */
+export const Disabled: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Status';
+    select.options = ['Active', 'Inactive', 'Pending'];
+    select.state = 'disabled';
+    select.selected = 'Active';
+    select.supportingText = 'This field cannot be changed';
+
+    return select;
+  },
+};
+
+/**
+ * Select with left icon
+ */
+export const WithLeftIcon: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Language';
+    select.options = ['English', 'Spanish', 'French', 'German', 'Japanese'];
+    select.leftIcon = '🌐';
+
+    return select;
+  },
+};
+
+/**
+ * Select with right icon
+ */
+export const WithRightIcon: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Currency';
+    select.options = ['USD', 'EUR', 'GBP', 'JPY', 'CAD'];
+    select.rightIcon = '💰';
+
+    return select;
+  },
+};
+
+/**
+ * Select with sharp borders
+ */
+export const SharpBorders: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Theme';
+    select.options = ['Light', 'Dark', 'Auto'];
+    select.border = 'sharp';
+    select.selected = 'Auto';
+
+    return select;
+  },
+};
+
+/**
+ * Country selector
+ */
+export const CountrySelector: Story = {
+  render: () => html`
+    <div style="max-width: 400px; background: white; padding: 24px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
+      <h3 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 18px;">Shipping Information</h3>
+      ${(() => {
+        const select = document.createElement('rel-select') as any;
+        select.label = 'Country';
+        select.options = [
+          'United States',
+          'Canada',
+          'United Kingdom',
+          'Australia',
+          'Germany',
+          'France',
+          'Japan',
+          'Brazil',
+          'India',
+          'China',
+        ];
+        select.supportingText = 'Select your shipping destination';
+        select.addEventListener('changed', (e: CustomEvent) => {
+          console.log('Shipping to:', e.detail.value);
+        });
+
+        return select;
+      })()}
+    </div>
+  `,
+};
+
+/**
+ * Form with multiple selects
+ */
+export const FormExample: 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 20px; color: var(--rel-colors-gray-heading); font-size: 18px;">User Profile</h3>
+
+      <div style="margin-bottom: 20px;">
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Country';
+          select.options = ['United States', 'Canada', 'United Kingdom', 'Australia'];
+          select.supportingText = 'Your country of residence';
+
+          return select;
+        })()}
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Language';
+          select.options = ['English', 'Spanish', 'French', 'German'];
+          select.selected = 'English';
+          select.supportingText = 'Preferred language';
+
+          return select;
+        })()}
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Timezone';
+          select.options = ['EST (UTC-5)', 'PST (UTC-8)', 'GMT (UTC+0)', 'JST (UTC+9)'];
+          select.supportingText = 'Your local timezone';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Product filter
+ */
+export const ProductFilter: 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;">Filter Products</h3>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Category';
+            select.options = ['All', 'Electronics', 'Clothing', 'Books', 'Home & Garden'];
+            select.selected = 'All';
+
+            return select;
+          })()}
+        </div>
+
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Sort By';
+            select.options = ['Newest', 'Price: Low to High', 'Price: High to Low', 'Best Rating'];
+            select.selected = 'Newest';
+
+            return select;
+          })()}
+        </div>
+
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Price Range';
+            select.options = ['All', 'Under $25', '$25 - $50', '$50 - $100', 'Over $100'];
+            select.selected = 'All';
+
+            return select;
+          })()}
+        </div>
+
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Brand';
+            select.options = ['All Brands', 'Brand A', 'Brand B', 'Brand C', 'Brand D'];
+            select.selected = 'All Brands';
+
+            return select;
+          })()}
+        </div>
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Settings page
+ */
+export const SettingsPage: 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;">Notification Settings</h3>
+
+      <div style="margin-bottom: 20px;">
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Email Frequency';
+          select.options = ['Instant', 'Daily Digest', 'Weekly Digest', 'Never'];
+          select.selected = 'Daily Digest';
+          select.supportingText = 'How often you receive email notifications';
+
+          return select;
+        })()}
+      </div>
+
+      <div style="margin-bottom: 20px;">
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Push Notifications';
+          select.options = ['All', 'Important Only', 'Mentions Only', 'Off'];
+          select.selected = 'Important Only';
+          select.supportingText = 'Control mobile push notifications';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Sound';
+          select.options = ['Enabled', 'Disabled'];
+          select.selected = 'Enabled';
+          select.supportingText = 'Play sound for notifications';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Date and time selector
+ */
+export const DateTimeSelector: 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 20px; color: var(--rel-colors-gray-heading); font-size: 18px;">Schedule Meeting</h3>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px;">
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Month';
+            select.options = ['January', 'February', 'March', 'April', 'May', 'June'];
+            select.size = 'small';
+            select.selected = 'March';
+
+            return select;
+          })()}
+        </div>
+
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Day';
+            select.options = Array.from({ length: 31 }, (_, i) => String(i + 1));
+            select.size = 'small';
+            select.selected = '15';
+
+            return select;
+          })()}
+        </div>
+
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Year';
+            select.options = ['2024', '2025', '2026'];
+            select.size = 'small';
+            select.selected = '2025';
+
+            return select;
+          })()}
+        </div>
+      </div>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Time';
+            select.options = [
+              '9:00 AM',
+              '10:00 AM',
+              '11:00 AM',
+              '12:00 PM',
+              '1:00 PM',
+              '2:00 PM',
+              '3:00 PM',
+              '4:00 PM',
+            ];
+            select.selected = '10:00 AM';
+
+            return select;
+          })()}
+        </div>
+
+        <div>
+          ${(() => {
+            const select = document.createElement('rel-select') as any;
+            select.label = 'Duration';
+            select.options = ['15 min', '30 min', '1 hour', '2 hours'];
+            select.selected = '1 hour';
+
+            return select;
+          })()}
+        </div>
+      </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 select = document.createElement('rel-select') as any;
+          select.label = 'Status';
+          select.options = ['Active', 'Inactive', 'Pending'];
+          select.supportingText = 'Select a status';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Error State</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Status';
+          select.options = ['Active', 'Inactive', 'Pending'];
+          select.state = 'error';
+          select.supportingText = 'This field is required';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Disabled State</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Status';
+          select.options = ['Active', 'Inactive', 'Pending'];
+          select.state = 'disabled';
+          select.selected = 'Active';
+          select.supportingText = 'This field is disabled';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Small Size</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Size';
+          select.options = ['XS', 'S', 'M', 'L', 'XL'];
+          select.size = 'small';
+          select.selected = 'M';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Medium Size</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Priority';
+          select.options = ['Low', 'Medium', 'High'];
+          select.size = 'medium';
+          select.selected = 'Medium';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Large Size</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Category';
+          select.options = ['Technology', 'Business', 'Health'];
+          select.size = 'large';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Default state with supporting text
+ */
+export const DefaultWithSupportingText: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Subscription Plan';
+    select.options = ['Free', 'Basic', 'Premium', 'Enterprise'];
+    select.state = 'default';
+    select.supportingText = 'Choose the plan that best fits your needs';
+
+    return select;
+  },
+};
+
+/**
+ * Error state without supporting text
+ */
+export const ErrorWithoutSupportingText: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Required Field';
+    select.options = ['Option 1', 'Option 2', 'Option 3'];
+    select.state = 'error';
+
+    return select;
+  },
+};
+
+/**
+ * Error state with supporting text
+ */
+export const ErrorWithSupportingText: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Department';
+    select.options = ['Engineering', 'Marketing', 'Sales', 'Support'];
+    select.state = 'error';
+    select.supportingText = 'Please select a department to continue';
+
+    return select;
+  },
+};
+
+/**
+ * Disabled state with supporting text
+ */
+export const DisabledWithSupportingText: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Account Type';
+    select.options = ['Personal', 'Business', 'Enterprise'];
+    select.state = 'disabled';
+    select.selected = 'Business';
+    select.supportingText = 'Account type cannot be changed after registration';
+
+    return select;
+  },
+};
+
+/**
+ * Small size with all states
+ */
+export const SmallAllStates: 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: 14px;">Small - Default</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Size';
+          select.options = ['XS', 'S', 'M', 'L', 'XL'];
+          select.size = 'small';
+          select.state = 'default';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Small - Error</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Size';
+          select.options = ['XS', 'S', 'M', 'L', 'XL'];
+          select.size = 'small';
+          select.state = 'error';
+          select.supportingText = 'Please select a size';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Small - Disabled</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Size';
+          select.options = ['XS', 'S', 'M', 'L', 'XL'];
+          select.size = 'small';
+          select.state = 'disabled';
+          select.selected = 'M';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Medium size with all states
+ */
+export const MediumAllStates: 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: 14px;">Medium - Default</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Priority';
+          select.options = ['Low', 'Medium', 'High', 'Urgent'];
+          select.size = 'medium';
+          select.state = 'default';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium - Error</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Priority';
+          select.options = ['Low', 'Medium', 'High', 'Urgent'];
+          select.size = 'medium';
+          select.state = 'error';
+          select.supportingText = 'Priority is required';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium - Disabled</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Priority';
+          select.options = ['Low', 'Medium', 'High', 'Urgent'];
+          select.size = 'medium';
+          select.state = 'disabled';
+          select.selected = 'High';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Large size with all states
+ */
+export const LargeAllStates: 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: 14px;">Large - Default</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Category';
+          select.options = ['Technology', 'Business', 'Health', 'Education'];
+          select.size = 'large';
+          select.state = 'default';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Large - Error</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Category';
+          select.options = ['Technology', 'Business', 'Health', 'Education'];
+          select.size = 'large';
+          select.state = 'error';
+          select.supportingText = 'Please select a category';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Large - Disabled</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Category';
+          select.options = ['Technology', 'Business', 'Health', 'Education'];
+          select.size = 'large';
+          select.state = 'disabled';
+          select.selected = 'Technology';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Rounded border (default)
+ */
+export const RoundedBorder: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Theme Style';
+    select.options = ['Modern', 'Classic', 'Minimalist', 'Bold'];
+    select.border = 'rounded';
+    select.supportingText = 'Rounded borders for a softer look';
+
+    return select;
+  },
+};
+
+/**
+ * Sharp border
+ */
+export const SharpBorder: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Layout Mode';
+    select.options = ['Grid', 'List', 'Compact', 'Detailed'];
+    select.border = 'sharp';
+    select.supportingText = 'Sharp borders for a more angular design';
+
+    return select;
+  },
+};
+
+/**
+ * Border styles comparison
+ */
+export const BorderStylesComparison: Story = {
+  render: () => html`
+    <div style="display: flex; gap: 24px;">
+      <div style="flex: 1;">
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Rounded</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Option';
+          select.options = ['Choice 1', 'Choice 2', 'Choice 3'];
+          select.border = 'rounded';
+
+          return select;
+        })()}
+      </div>
+
+      <div style="flex: 1;">
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Sharp</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Option';
+          select.options = ['Choice 1', 'Choice 2', 'Choice 3'];
+          select.border = 'sharp';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Left icon with small size
+ */
+export const LeftIconSmall: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Location';
+    select.options = ['New York', 'London', 'Tokyo', 'Paris'];
+    select.size = 'small';
+    select.leftIcon = '📍';
+    select.supportingText = 'Select your location';
+
+    return select;
+  },
+};
+
+/**
+ * Left icon with medium size
+ */
+export const LeftIconMedium: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Email Account';
+    select.options = ['Primary', 'Work', 'Personal', 'Other'];
+    select.size = 'medium';
+    select.leftIcon = '📧';
+
+    return select;
+  },
+};
+
+/**
+ * Left icon with large size
+ */
+export const LeftIconLarge: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Workspace';
+    select.options = ['Home Office', 'Corporate', 'Remote', 'Hybrid'];
+    select.size = 'large';
+    select.leftIcon = '🏢';
+
+    return select;
+  },
+};
+
+/**
+ * Right icon with small size
+ */
+export const RightIconSmall: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Security Level';
+    select.options = ['Low', 'Medium', 'High', 'Maximum'];
+    select.size = 'small';
+    select.rightIcon = '🔒';
+
+    return select;
+  },
+};
+
+/**
+ * Right icon with medium size
+ */
+export const RightIconMedium: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Notification Sound';
+    select.options = ['Bell', 'Chime', 'Ding', 'Silent'];
+    select.size = 'medium';
+    select.rightIcon = '🔔';
+
+    return select;
+  },
+};
+
+/**
+ * Right icon with large size
+ */
+export const RightIconLarge: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Payment Method';
+    select.options = ['Credit Card', 'Debit Card', 'PayPal', 'Bank Transfer'];
+    select.size = 'large';
+    select.rightIcon = '💳';
+
+    return select;
+  },
+};
+
+/**
+ * Both left and right icons
+ */
+export const BothIcons: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Currency Exchange';
+    select.options = ['USD', 'EUR', 'GBP', 'JPY', 'CAD', 'AUD'];
+    select.leftIcon = '💱';
+    select.rightIcon = '💰';
+    select.supportingText = 'Select currency for conversion';
+
+    return select;
+  },
+};
+
+/**
+ * Long option list
+ */
+export const LongOptionList: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Country';
+    select.options = [
+      'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola',
+      'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan',
+      'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus',
+      'Belgium', 'Belize', 'Benin', 'Bhutan', 'Bolivia',
+      'Bosnia and Herzegovina', 'Botswana', 'Brazil', 'Brunei', 'Bulgaria',
+      'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada',
+      'Cape Verde', 'Central African Republic', 'Chad', 'Chile', 'China',
+      'Colombia', 'Comoros', 'Congo', 'Costa Rica', 'Croatia',
+      'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti',
+      'Dominica', 'Dominican Republic', 'East Timor', 'Ecuador', 'Egypt'
+    ];
+    select.supportingText = 'Select your country from the list';
+
+    return select;
+  },
+};
+
+/**
+ * Long option list with left icon
+ */
+export const LongListWithIcon: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'City';
+    select.options = [
+      'New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix',
+      'Philadelphia', 'San Antonio', 'San Diego', 'Dallas', 'San Jose',
+      'Austin', 'Jacksonville', 'Fort Worth', 'Columbus', 'Charlotte',
+      'San Francisco', 'Indianapolis', 'Seattle', 'Denver', 'Boston',
+      'Nashville', 'Detroit', 'Portland', 'Las Vegas', 'Memphis',
+      'Louisville', 'Baltimore', 'Milwaukee', 'Albuquerque', 'Tucson'
+    ];
+    select.leftIcon = '🏙️';
+    select.supportingText = 'Choose your preferred city';
+
+    return select;
+  },
+};
+
+/**
+ * Small select with sharp border and left icon
+ */
+export const SmallSharpWithLeftIcon: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Icon Set';
+    select.options = ['Outlined', 'Filled', 'Rounded', 'Sharp'];
+    select.size = 'small';
+    select.border = 'sharp';
+    select.leftIcon = '🎨';
+
+    return select;
+  },
+};
+
+/**
+ * Large select with rounded border and right icon
+ */
+export const LargeRoundedWithRightIcon: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Package Size';
+    select.options = ['Small Box', 'Medium Box', 'Large Box', 'Extra Large Box'];
+    select.size = 'large';
+    select.border = 'rounded';
+    select.rightIcon = '📦';
+    select.supportingText = 'Select appropriate package size';
+
+    return select;
+  },
+};
+
+/**
+ * Error state with left icon and supporting text
+ */
+export const ErrorWithLeftIconAndText: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Shipping Method';
+    select.options = ['Standard', 'Express', 'Overnight', 'International'];
+    select.state = 'error';
+    select.leftIcon = '🚚';
+    select.supportingText = 'Please select a shipping method to proceed';
+
+    return select;
+  },
+};
+
+/**
+ * Disabled state with both icons
+ */
+export const DisabledWithBothIcons: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Transaction Type';
+    select.options = ['Purchase', 'Refund', 'Transfer', 'Withdrawal'];
+    select.state = 'disabled';
+    select.selected = 'Purchase';
+    select.leftIcon = '💰';
+    select.rightIcon = '🔒';
+    select.supportingText = 'Transaction type is locked';
+
+    return select;
+  },
+};
+
+/**
+ * All size variations with icons
+ */
+export const AllSizesWithIcons: 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: 14px;">Small with Icon</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Status';
+          select.options = ['Online', 'Away', 'Busy', 'Offline'];
+          select.size = 'small';
+          select.leftIcon = '🟢';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium with Icon</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Status';
+          select.options = ['Online', 'Away', 'Busy', 'Offline'];
+          select.size = 'medium';
+          select.leftIcon = '🟢';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Large with Icon</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Status';
+          select.options = ['Online', 'Away', 'Busy', 'Offline'];
+          select.size = 'large';
+          select.leftIcon = '🟢';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};
+
+/**
+ * Complex combination - Large, Sharp, Error, Both Icons, Supporting Text
+ */
+export const ComplexCombination: Story = {
+  render: () => {
+    const select = document.createElement('rel-select') as any;
+    select.label = 'Security Clearance';
+    select.options = ['Level 1', 'Level 2', 'Level 3', 'Level 4', 'Level 5'];
+    select.size = 'large';
+    select.border = 'sharp';
+    select.state = 'error';
+    select.leftIcon = '🔐';
+    select.rightIcon = '⚠️';
+    select.supportingText = 'Security clearance level is required for access';
+
+    return select;
+  },
+};
+
+/**
+ * All combinations showcase
+ */
+export const AllCombinations: Story = {
+  render: () => html`
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;">
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Small + Rounded + Icon</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Theme';
+          select.options = ['Light', 'Dark', 'Auto'];
+          select.size = 'small';
+          select.border = 'rounded';
+          select.leftIcon = '🎨';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Small + Sharp + Error</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Theme';
+          select.options = ['Light', 'Dark', 'Auto'];
+          select.size = 'small';
+          select.border = 'sharp';
+          select.state = 'error';
+          select.supportingText = 'Required field';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium + Rounded + Disabled</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Plan';
+          select.options = ['Free', 'Pro', 'Enterprise'];
+          select.size = 'medium';
+          select.border = 'rounded';
+          select.state = 'disabled';
+          select.selected = 'Pro';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium + Sharp + Both Icons</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Currency';
+          select.options = ['USD', 'EUR', 'GBP'];
+          select.size = 'medium';
+          select.border = 'sharp';
+          select.leftIcon = '💱';
+          select.rightIcon = '💰';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Large + Rounded + Error + Icon</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Department';
+          select.options = ['Sales', 'Engineering', 'Marketing'];
+          select.size = 'large';
+          select.border = 'rounded';
+          select.state = 'error';
+          select.leftIcon = '🏢';
+          select.supportingText = 'Department selection required';
+
+          return select;
+        })()}
+      </div>
+
+      <div>
+        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Large + Sharp + Disabled + Icon</h4>
+        ${(() => {
+          const select = document.createElement('rel-select') as any;
+          select.label = 'Role';
+          select.options = ['Admin', 'User', 'Guest'];
+          select.size = 'large';
+          select.border = 'sharp';
+          select.state = 'disabled';
+          select.selected = 'User';
+          select.rightIcon = '👤';
+          select.supportingText = 'Role cannot be changed';
+
+          return select;
+        })()}
+      </div>
+    </div>
+  `,
+};