@reliability-design/web 1.0.2 → 1.0.3

package/dist/components/rel-segmented-button/rel-segmented-button.stories.ts

@@ -1,1079 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-segmented-button';
-import type { SegmentOption } from './rel-segmented-button';
-
-/**
- * The Segmented Button component provides mutually exclusive options in a compact button group.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **Single Selection**: Only one segment can be active at a time
- * - **Multiple Sizes**: Small and medium sizes available
- * - **Alignment Options**: Left, middle, or right alignment
- * - **Disabled State**: Individual segments can be disabled
- * - **Token-Based Styling**: Uses design system tokens
- * - **Accessible**: Proper button semantics and keyboard support
- */
-const meta: Meta = {
-  title: 'Components/Segmented Button',
-  tags: ['autodocs'],
-  component: 'rel-segmented-button',
-  argTypes: {
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium'],
-      description: 'Size of the segmented button group',
-      table: {
-        defaultValue: { summary: 'medium' },
-        type: { summary: 'small | medium' },
-      },
-    },
-    align: {
-      control: { type: 'select' },
-      options: ['left', 'middle', 'right'],
-      description: 'Alignment of the button group',
-      table: {
-        defaultValue: { summary: 'left' },
-        type: { summary: 'left | middle | right' },
-      },
-    },
-    active: {
-      control: { type: 'text' },
-      description: 'Currently active segment value',
-      table: {
-        defaultValue: { summary: '' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default segmented button with basic options
- */
-export const Default: Story = {
-  render: () => {
-    const options: SegmentOption[] = [
-      { value: 'day', label: 'Day' },
-      { value: 'week', label: 'Week' },
-      { value: 'month', label: 'Month' },
-    ];
-
-    const button = document.createElement('rel-segmented-button') as any;
-    button.options = options;
-    button.active = 'week';
-    button.addEventListener('changed', (e: CustomEvent) => {
-      console.log('Active segment:', e.detail.value);
-    });
-
-    return button;
-  },
-};
-
-/**
- * Small size segmented button
- */
-export const Small: Story = {
-  render: () => {
-    const options: SegmentOption[] = [
-      { value: 'xs', label: 'XS' },
-      { value: 's', label: 'S' },
-      { value: 'm', label: 'M' },
-      { value: 'l', label: 'L' },
-      { value: 'xl', label: 'XL' },
-    ];
-
-    const button = document.createElement('rel-segmented-button') as any;
-    button.options = options;
-    button.active = 'm';
-    button.size = 'small';
-
-    return button;
-  },
-};
-
-/**
- * Medium size segmented button
- */
-export const Medium: Story = {
-  render: () => {
-    const options: SegmentOption[] = [
-      { value: 'list', label: 'List' },
-      { value: 'grid', label: 'Grid' },
-      { value: 'table', label: 'Table' },
-    ];
-
-    const button = document.createElement('rel-segmented-button') as any;
-    button.options = options;
-    button.active = 'grid';
-    button.size = 'medium';
-
-    return button;
-  },
-};
-
-/**
- * Segmented button with disabled options
- */
-export const WithDisabled: Story = {
-  render: () => {
-    const options: SegmentOption[] = [
-      { value: 'public', label: 'Public' },
-      { value: 'unlisted', label: 'Unlisted' },
-      { value: 'private', label: 'Private', disabled: true },
-    ];
-
-    const button = document.createElement('rel-segmented-button') as any;
-    button.options = options;
-    button.active = 'public';
-
-    return button;
-  },
-};
-
-/**
- * Left aligned segmented button
- */
-export const AlignLeft: Story = {
-  render: () => html`
-    <div style="width: 100%; background: var(--rel-colors-gray-bg); padding: 24px; border-radius: 8px;">
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'left', label: 'Left' },
-          { value: 'center', label: 'Center' },
-          { value: 'right', label: 'Right' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'left';
-        button.align = 'left';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Middle aligned segmented button
- */
-export const AlignMiddle: Story = {
-  render: () => html`
-    <div style="width: 100%; background: var(--rel-colors-gray-bg); padding: 24px; border-radius: 8px;">
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'left', label: 'Left' },
-          { value: 'center', label: 'Center' },
-          { value: 'right', label: 'Right' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'center';
-        button.align = 'middle';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Right aligned segmented button
- */
-export const AlignRight: Story = {
-  render: () => html`
-    <div style="width: 100%; background: var(--rel-colors-gray-bg); padding: 24px; border-radius: 8px;">
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'left', label: 'Left' },
-          { value: 'center', label: 'Center' },
-          { value: 'right', label: 'Right' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'right';
-        button.align = 'right';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * View mode selector
- */
-export const ViewMode: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Select View Mode</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'list', label: 'List View' },
-          { value: 'grid', label: 'Grid View' },
-          { value: 'compact', label: 'Compact View' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'grid';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Time range selector
- */
-export const TimeRange: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Select Time Range</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: '7d', label: '7 Days' },
-          { value: '30d', label: '30 Days' },
-          { value: '90d', label: '90 Days' },
-          { value: '1y', label: '1 Year' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = '30d';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Chart type selector
- */
-export const ChartType: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Chart Type</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'line', label: 'Line' },
-          { value: 'bar', label: 'Bar' },
-          { value: 'area', label: 'Area' },
-          { value: 'pie', label: 'Pie' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'line';
-        button.size = 'small';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Status filter
- */
-export const StatusFilter: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Filter by Status</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'all', label: 'All' },
-          { value: 'active', label: 'Active' },
-          { value: 'pending', label: 'Pending' },
-          { value: 'completed', label: 'Completed' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'all';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Priority selector
- */
-export const Priority: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Set Priority</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'low', label: 'Low' },
-          { value: 'medium', label: 'Medium' },
-          { value: 'high', label: 'High' },
-          { value: 'urgent', label: 'Urgent' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'medium';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Typography alignment
- */
-export const TextAlignment: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Text Alignment</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'left', label: 'Left' },
-          { value: 'center', label: 'Center' },
-          { value: 'right', label: 'Right' },
-          { value: 'justify', label: 'Justify' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'left';
-        button.size = 'small';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Multiple segmented buttons in a form
- */
-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;">Report Settings</h3>
-
-      <div style="margin-bottom: 24px;">
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Report Type</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'summary', label: 'Summary' },
-            { value: 'detailed', label: 'Detailed' },
-            { value: 'custom', label: 'Custom' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'detailed';
-
-          return button;
-        })()}
-      </div>
-
-      <div style="margin-bottom: 24px;">
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Time Period</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'week', label: 'Week' },
-            { value: 'month', label: 'Month' },
-            { value: 'quarter', label: 'Quarter' },
-            { value: 'year', label: 'Year' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'month';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Format</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'pdf', label: 'PDF' },
-            { value: 'excel', label: 'Excel' },
-            { value: 'csv', label: 'CSV' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'pdf';
-          button.size = 'small';
-
-          return button;
-        })()}
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Two segments - Binary choice
- */
-export const TwoSegments: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Sign Up / Sign In</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'signup', label: 'Sign Up' },
-          { value: 'signin', label: 'Sign In' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'signup';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Three segments - Common choice
- */
-export const ThreeSegments: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Subscription Plan</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'basic', label: 'Basic' },
-          { value: 'pro', label: 'Pro' },
-          { value: 'enterprise', label: 'Enterprise' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'pro';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Four segments
- */
-export const FourSegments: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Dashboard Layout</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'single', label: 'Single' },
-          { value: 'side-by-side', label: 'Side by Side' },
-          { value: 'grid', label: 'Grid' },
-          { value: 'custom', label: 'Custom' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'grid';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Five or more segments
- */
-export const FivePlusSegments: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Rating Scale</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: '1', label: '1' },
-          { value: '2', label: '2' },
-          { value: '3', label: '3' },
-          { value: '4', label: '4' },
-          { value: '5', label: '5' },
-          { value: '6', label: '6' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = '4';
-        button.size = 'small';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Multiple disabled segments
- */
-export const MultipleDisabled: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Access Levels (Limited Permissions)</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'viewer', label: 'Viewer' },
-          { value: 'editor', label: 'Editor' },
-          { value: 'admin', label: 'Admin', disabled: true },
-          { value: 'owner', label: 'Owner', disabled: true },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'viewer';
-
-        return button;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Disabled segment in the middle
- */
-export const DisabledMiddleSegment: 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 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Feature Availability</h3>
-      ${(() => {
-        const options: SegmentOption[] = [
-          { value: 'free', label: 'Free Tier' },
-          { value: 'standard', label: 'Standard', disabled: true },
-          { value: 'premium', label: 'Premium' },
-        ];
-
-        const button = document.createElement('rel-segmented-button') as any;
-        button.options = options;
-        button.active = 'free';
-
-        return button;
-      })()}
-      <p style="margin: 12px 0 0; color: var(--rel-colors-gray-subheading); font-size: 14px;">Standard tier is temporarily unavailable</p>
-    </div>
-  `,
-};
-
-/**
- * Small size with different segment counts
- */
-export const SmallSizeVariations: 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 - 2 Segments</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'yes', label: 'Yes' },
-            { value: 'no', label: 'No' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'yes';
-          button.size = 'small';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Small - 3 Segments</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'low', label: 'Low' },
-            { value: 'med', label: 'Med' },
-            { value: 'high', label: 'High' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'med';
-          button.size = 'small';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Small - 5 Segments</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'xs', label: 'XS' },
-            { value: 's', label: 'S' },
-            { value: 'm', label: 'M' },
-            { value: 'l', label: 'L' },
-            { value: 'xl', label: 'XL' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'm';
-          button.size = 'small';
-
-          return button;
-        })()}
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Medium size with different segment counts
- */
-export const MediumSizeVariations: 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 - 2 Segments</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'manual', label: 'Manual' },
-            { value: 'auto', label: 'Automatic' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'auto';
-          button.size = 'medium';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium - 3 Segments</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'morning', label: 'Morning' },
-            { value: 'afternoon', label: 'Afternoon' },
-            { value: 'evening', label: 'Evening' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'afternoon';
-          button.size = 'medium';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Medium - 4 Segments</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'q1', label: 'Q1' },
-            { value: 'q2', label: 'Q2' },
-            { value: 'q3', label: 'Q3' },
-            { value: 'q4', label: 'Q4' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'q2';
-          button.size = 'medium';
-
-          return button;
-        })()}
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Data visualization controls
- */
-export const DataVisualizationControls: Story = {
-  render: () => html`
-    <div style="max-width: 800px; background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 24px; color: var(--rel-colors-gray-heading); font-size: 20px;">Analytics Dashboard Controls</h3>
-
-      <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;">Time Range</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: '24h', label: '24h' },
-              { value: '7d', label: '7d' },
-              { value: '30d', label: '30d' },
-              { value: '90d', label: '90d' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = '7d';
-            button.size = 'small';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Metric</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'users', label: 'Users' },
-              { value: 'revenue', label: 'Revenue' },
-              { value: 'sessions', label: 'Sessions' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'users';
-            button.size = 'small';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Granularity</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'hourly', label: 'Hourly' },
-              { value: 'daily', label: 'Daily' },
-              { value: 'weekly', label: 'Weekly' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'daily';
-            button.size = 'small';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Chart Type</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'line', label: 'Line' },
-              { value: 'bar', label: 'Bar' },
-              { value: 'area', label: 'Area' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'line';
-            button.size = 'small';
-
-            return button;
-          })()}
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * E-commerce product filters
- */
-export const EcommerceFilters: Story = {
-  render: () => html`
-    <div style="max-width: 800px; background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 24px; color: var(--rel-colors-gray-heading); font-size: 20px;">Product Filters</h3>
-
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Availability</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'all', label: 'All Products' },
-              { value: 'instock', label: 'In Stock' },
-              { value: 'outofstock', label: 'Out of Stock' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'instock';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Price Range</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'budget', label: 'Under $50' },
-              { value: 'mid', label: '$50-$100' },
-              { value: 'premium', label: '$100-$200' },
-              { value: 'luxury', label: '$200+' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'mid';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Sort By</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'newest', label: 'Newest' },
-              { value: 'popular', label: 'Most Popular' },
-              { value: 'price-low', label: 'Price: Low to High' },
-              { value: 'price-high', label: 'Price: High to Low' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'popular';
-            button.size = 'small';
-
-            return button;
-          })()}
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Content management system
- */
-export const CMSControls: Story = {
-  render: () => html`
-    <div style="max-width: 800px; background: white; padding: 32px; border-radius: 12px; box-shadow: var(--rel-shadows-shadow-200);">
-      <h3 style="margin: 0 0 24px; color: var(--rel-colors-gray-heading); font-size: 20px;">Content Editor</h3>
-
-      <div style="display: flex; flex-direction: column; gap: 20px;">
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Editor Mode</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'visual', label: 'Visual' },
-              { value: 'markdown', label: 'Markdown' },
-              { value: 'html', label: 'HTML' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'visual';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Content Status</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'draft', label: 'Draft' },
-              { value: 'review', label: 'In Review' },
-              { value: 'published', label: 'Published' },
-              { value: 'archived', label: 'Archived' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'draft';
-
-            return button;
-          })()}
-        </div>
-
-        <div>
-          <h4 style="margin: 0 0 12px; color: var(--rel-colors-gray-heading); font-size: 14px;">Visibility</h4>
-          ${(() => {
-            const options: SegmentOption[] = [
-              { value: 'public', label: 'Public' },
-              { value: 'private', label: 'Private' },
-              { value: 'password', label: 'Password Protected' },
-            ];
-
-            const button = document.createElement('rel-segmented-button') as any;
-            button.options = options;
-            button.active = 'public';
-            button.size = 'small';
-
-            return button;
-          })()}
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All alignment options showcase
- */
-export const AllAlignments: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px;">
-      <div style="width: 100%; background: var(--rel-colors-gray-bg); padding: 24px; border-radius: 8px;">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Left Alignment</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: '1', label: 'Option 1' },
-            { value: '2', label: 'Option 2' },
-            { value: '3', label: 'Option 3' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = '1';
-          button.align = 'left';
-
-          return button;
-        })()}
-      </div>
-
-      <div style="width: 100%; background: var(--rel-colors-gray-bg); padding: 24px; border-radius: 8px;">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Middle Alignment</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: '1', label: 'Option 1' },
-            { value: '2', label: 'Option 2' },
-            { value: '3', label: 'Option 3' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = '2';
-          button.align = 'middle';
-
-          return button;
-        })()}
-      </div>
-
-      <div style="width: 100%; background: var(--rel-colors-gray-bg); padding: 24px; border-radius: 8px;">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Right Alignment</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: '1', label: 'Option 1' },
-            { value: '2', label: 'Option 2' },
-            { value: '3', label: 'Option 3' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = '3';
-          button.align = 'right';
-
-          return button;
-        })()}
-      </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;">Small Size</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'option1', label: 'Option 1' },
-            { value: 'option2', label: 'Option 2' },
-            { value: 'option3', label: 'Option 3' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'option2';
-          button.size = 'small';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Medium Size</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'option1', label: 'Option 1' },
-            { value: 'option2', label: 'Option 2' },
-            { value: 'option3', label: 'Option 3' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'option2';
-          button.size = 'medium';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">With Disabled Option</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'option1', label: 'Enabled' },
-            { value: 'option2', label: 'Disabled', disabled: true },
-            { value: 'option3', label: 'Enabled' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'option1';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Two Options</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: 'on', label: 'On' },
-            { value: 'off', label: 'Off' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = 'on';
-
-          return button;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Five Options</h4>
-        ${(() => {
-          const options: SegmentOption[] = [
-            { value: '1', label: 'One' },
-            { value: '2', label: 'Two' },
-            { value: '3', label: 'Three' },
-            { value: '4', label: 'Four' },
-            { value: '5', label: 'Five' },
-          ];
-
-          const button = document.createElement('rel-segmented-button') as any;
-          button.options = options;
-          button.active = '3';
-
-          return button;
-        })()}
-      </div>
-    </div>
-  `,
-};