@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,730 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-slider';
-
-/**
- * The Slider component provides an interactive range input with continuous and discrete modes.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **Two Modes**: Continuous (smooth) and discrete (stepped with ticks)
- * - **Track Styles**: Solid or dotted active track
- * - **Value Bubble**: Optional marker showing current value
- * - **Tick Marks**: Optional tick marks for discrete mode
- * - **Tick Labels**: Optional labels for tick positions
- * - **Disabled State**: Non-interactive state
- * - **Token-Based Styling**: Uses design system tokens
- * - **Accessible**: Proper range input semantics
- */
-const meta: Meta = {
-  title: 'Components/Slider',
-  tags: ['autodocs'],
-  component: 'rel-slider',
-  argTypes: {
-    type: {
-      control: { type: 'select' },
-      options: ['continuous', 'discrete'],
-      description: 'Slider behavior mode',
-      table: {
-        defaultValue: { summary: 'continuous' },
-        type: { summary: 'continuous | discrete' },
-      },
-    },
-    track: {
-      control: { type: 'select' },
-      options: ['solid', 'dotted'],
-      description: 'Active track style',
-      table: {
-        defaultValue: { summary: 'solid' },
-        type: { summary: 'solid | dotted' },
-      },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disabled state',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    showTickLabels: {
-      control: { type: 'boolean' },
-      description: 'Show tick labels (discrete mode only)',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    showBubble: {
-      control: { type: 'boolean' },
-      description: 'Show value bubble marker',
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default continuous slider
- */
-export const Default: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.value = 50;
-    slider.addEventListener('valueChange', (e: CustomEvent) => {
-      console.log('Value:', e.detail.value);
-    });
-
-    return slider;
-  },
-};
-
-/**
- * Continuous slider with default behavior
- */
-export const Continuous: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.value = 30;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete slider with tick marks
- */
-export const Discrete: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 10;
-    slider.value = 40;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete slider with tick labels
- */
-export const DiscreteWithLabels: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 25;
-    slider.value = 50;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Slider with dotted track style
- */
-export const DottedTrack: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.track = 'dotted';
-    slider.value = 60;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete slider with dotted track
- */
-export const DiscreteWithDottedTrack: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.track = 'dotted';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 20;
-    slider.value = 60;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Disabled slider
- */
-export const Disabled: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.value = 45;
-    slider.disabled = true;
-
-    return slider;
-  },
-};
-
-/**
- * Disabled discrete slider
- */
-export const DisabledDiscrete: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 20;
-    slider.value = 60;
-    slider.disabled = true;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Custom range (0-10)
- */
-export const CustomRange: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 10;
-    slider.step = 1;
-    slider.value = 5;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Continuous slider without bubble
- */
-export const ContinuousWithoutBubble: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.value = 35;
-    slider.showBubble = false;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete slider without bubble
- */
-export const DiscreteWithoutBubble: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 10;
-    slider.value = 40;
-    slider.showBubble = false;
-
-    return slider;
-  },
-};
-
-/**
- * Continuous slider with solid track (default)
- */
-export const ContinuousSolidTrack: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.track = 'solid';
-    slider.value = 55;
-
-    return slider;
-  },
-};
-
-/**
- * Continuous slider with dotted track
- */
-export const ContinuousDottedTrack: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.track = 'dotted';
-    slider.value = 65;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete slider with solid track
- */
-export const DiscreteSolidTrack: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.track = 'solid';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 20;
-    slider.value = 60;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete slider with tick labels but no bubble
- */
-export const DiscreteLabelsNoBubble: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 25;
-    slider.value = 75;
-    slider.showTickLabels = true;
-    slider.showBubble = false;
-
-    return slider;
-  },
-};
-
-/**
- * Range with negative values (-50 to 50)
- */
-export const NegativeRange: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = -50;
-    slider.max = 50;
-    slider.step = 10;
-    slider.value = 0;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Small range (0-10) with step 1
- */
-export const SmallRangeStep1: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 10;
-    slider.step = 1;
-    slider.value = 7;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Large range (0-100) with step 5
- */
-export const LargeRangeStep5: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 5;
-    slider.value = 45;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Decimal step (0.1) for precision control
- */
-export const DecimalStep: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.min = 0;
-    slider.max = 10;
-    slider.step = 0.1;
-    slider.value = 5.5;
-
-    return slider;
-  },
-};
-
-/**
- * Large step size (step 10)
- */
-export const LargeStep: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 10;
-    slider.value = 50;
-    slider.showTickLabels = true;
-
-    return slider;
-  },
-};
-
-/**
- * Disabled continuous slider with dotted track
- */
-export const DisabledContinuousDotted: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.track = 'dotted';
-    slider.value = 60;
-    slider.disabled = true;
-
-    return slider;
-  },
-};
-
-/**
- * Disabled discrete slider with dotted track
- */
-export const DisabledDiscreteDotted: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.track = 'dotted';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 20;
-    slider.value = 40;
-    slider.showTickLabels = true;
-    slider.disabled = true;
-
-    return slider;
-  },
-};
-
-/**
- * Discrete with all features: labels, dotted track, bubble
- */
-export const DiscreteAllFeatures: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'discrete';
-    slider.track = 'dotted';
-    slider.min = 0;
-    slider.max = 100;
-    slider.step = 20;
-    slider.value = 60;
-    slider.showTickLabels = true;
-    slider.showBubble = true;
-
-    return slider;
-  },
-};
-
-/**
- * Continuous with minimal features: no bubble, solid track
- */
-export const ContinuousMinimal: Story = {
-  render: () => {
-    const slider = document.createElement('rel-slider') as any;
-    slider.type = 'continuous';
-    slider.track = 'solid';
-    slider.value = 50;
-    slider.showBubble = false;
-
-    return slider;
-  },
-};
-
-/**
- * Volume control
- */
-export const VolumeControl: 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 24px; color: var(--rel-colors-gray-heading); font-size: 16px;">Volume</h3>
-      ${(() => {
-        const slider = document.createElement('rel-slider') as any;
-        slider.type = 'continuous';
-        slider.min = 0;
-        slider.max = 100;
-        slider.value = 75;
-        slider.addEventListener('valueChange', (e: CustomEvent) => {
-          console.log('Volume:', e.detail.value);
-        });
-
-        return slider;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Brightness control
- */
-export const BrightnessControl: 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 24px; color: var(--rel-colors-gray-heading); font-size: 16px;">Brightness</h3>
-      ${(() => {
-        const slider = document.createElement('rel-slider') as any;
-        slider.type = 'discrete';
-        slider.min = 0;
-        slider.max = 100;
-        slider.step = 10;
-        slider.value = 50;
-        slider.showTickLabels = true;
-        slider.addEventListener('valueChange', (e: CustomEvent) => {
-          console.log('Brightness:', e.detail.value);
-        });
-
-        return slider;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Rating selector
- */
-export const RatingSelector: 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 8px; color: var(--rel-colors-gray-heading); font-size: 16px;">Rate Your Experience</h3>
-      <p style="margin: 0 0 24px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Slide to select a rating from 1 to 5</p>
-      ${(() => {
-        const slider = document.createElement('rel-slider') as any;
-        slider.type = 'discrete';
-        slider.min = 1;
-        slider.max = 5;
-        slider.step = 1;
-        slider.value = 3;
-        slider.showTickLabels = true;
-        slider.addEventListener('valueChange', (e: CustomEvent) => {
-          console.log('Rating:', e.detail.value);
-        });
-
-        return slider;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Price range filter
- */
-export const PriceRange: 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;">Filter by Price</h3>
-      <p style="margin: 0 0 24px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Select maximum price</p>
-      ${(() => {
-        const slider = document.createElement('rel-slider') as any;
-        slider.type = 'discrete';
-        slider.min = 0;
-        slider.max = 500;
-        slider.step = 50;
-        slider.value = 200;
-        slider.showTickLabels = true;
-        slider.track = 'dotted';
-        slider.addEventListener('valueChange', (e: CustomEvent) => {
-          console.log('Max price:', e.detail.value);
-        });
-
-        return slider;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Temperature control
- */
-export const TemperatureControl: 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;">Temperature</h3>
-      <p style="margin: 0 0 24px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Set thermostat temperature (°F)</p>
-      ${(() => {
-        const slider = document.createElement('rel-slider') as any;
-        slider.type = 'discrete';
-        slider.min = 60;
-        slider.max = 80;
-        slider.step = 2;
-        slider.value = 72;
-        slider.showTickLabels = true;
-        slider.addEventListener('valueChange', (e: CustomEvent) => {
-          console.log('Temperature:', e.detail.value, '°F');
-        });
-
-        return slider;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Progress indicator
- */
-export const ProgressIndicator: 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;">Task Completion</h3>
-      <p style="margin: 0 0 24px; color: var(--rel-colors-gray-placeholder); font-size: 14px;">Adjust completion percentage</p>
-      ${(() => {
-        const slider = document.createElement('rel-slider') as any;
-        slider.type = 'continuous';
-        slider.min = 0;
-        slider.max = 100;
-        slider.value = 65;
-        slider.track = 'dotted';
-        slider.addEventListener('valueChange', (e: CustomEvent) => {
-          console.log('Completion:', e.detail.value, '%');
-        });
-
-        return slider;
-      })()}
-    </div>
-  `,
-};
-
-/**
- * Multiple sliders in a settings form
- */
-export const SettingsForm: 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 24px; color: var(--rel-colors-gray-heading); font-size: 18px;">Audio Settings</h3>
-
-      <div style="margin-bottom: 32px;">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 14px;">Volume</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.type = 'continuous';
-          slider.min = 0;
-          slider.max = 100;
-          slider.value = 80;
-
-          return slider;
-        })()}
-      </div>
-
-      <div style="margin-bottom: 32px;">
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 14px;">Bass</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.type = 'discrete';
-          slider.min = -10;
-          slider.max = 10;
-          slider.step = 2;
-          slider.value = 0;
-          slider.showTickLabels = true;
-
-          return slider;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 14px;">Treble</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.type = 'discrete';
-          slider.min = -10;
-          slider.max = 10;
-          slider.step = 2;
-          slider.value = 2;
-          slider.showTickLabels = true;
-
-          return slider;
-        })()}
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All states showcase
- */
-export const AllStates: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 48px;">
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Continuous</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.type = 'continuous';
-          slider.value = 40;
-
-          return slider;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Discrete</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.type = 'discrete';
-          slider.min = 0;
-          slider.max = 100;
-          slider.step = 20;
-          slider.value = 60;
-
-          return slider;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Discrete with Labels</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.type = 'discrete';
-          slider.min = 0;
-          slider.max = 100;
-          slider.step = 25;
-          slider.value = 50;
-          slider.showTickLabels = true;
-
-          return slider;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Dotted Track</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.track = 'dotted';
-          slider.value = 70;
-
-          return slider;
-        })()}
-      </div>
-
-      <div>
-        <h4 style="margin: 0 0 16px; color: var(--rel-colors-gray-heading); font-size: 16px;">Disabled</h4>
-        ${(() => {
-          const slider = document.createElement('rel-slider') as any;
-          slider.value = 45;
-          slider.disabled = true;
-
-          return slider;
-        })()}
-      </div>
-    </div>
-  `,
-};