@pure-ds/storybook 0.3.19 → 0.4.0

package/stories/enhancements/RangeSliders.stories.js

@@ -1,232 +1,232 @@
-import { html } from 'lit';
-
-const rangeSliderStoryStyles = html`
-  <style>
-    .range-slider-section {
-      max-width: 400px;
-      display: grid;
-      gap: var(--spacing-4);
-    }
-
-    .range-slider-section--wide {
-      max-width: 500px;
-    }
-
-    .range-slider-section--comparison {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: var(--spacing-6);
-      max-width: 1000px;
-    }
-
-    .range-slider-description {
-      color: var(--color-text-secondary);
-      font-size: 0.875rem;
-      margin: 0 0 var(--spacing-4);
-    }
-
-    .range-slider-form {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-4);
-    }
-
-    .range-slider-actions {
-      margin-top: var(--spacing-2);
-      align-self: flex-start;
-    }
-
-    .range-slider-card {
-      display: grid;
-      gap: var(--spacing-4);
-    }
-  </style>
-`;
-
-export default {
-  title: 'Enhancements/Range Sliders',
-  tags: ['forms', 'interaction'],
-  parameters: {
-    pds: {
-      tags: ['forms', 'interaction']
-    },
-    docs: {
-      description: {
-        component: `Enhanced range inputs with two display modes:
-
-**Standard Mode** (default): Floating bubble that appears on interaction.
-
-**Inline Output Mode**: Add \`range-output\` class to the label for persistent inline value display using semantic \`<output>\` element.
-
-Both modes automatically generate proper ARIA attributes and use the \`<output>\` tag for accessibility.`
-      }
-    }
-  }
-};
-
-export const StandardFloatingBubble = () => html`
-  ${rangeSliderStoryStyles}
-  <section class="range-slider-section">
-    <p class="range-slider-description">
-      Default behavior: A floating bubble appears when you interact with the slider.
-    </p>
-    <label>
-      <span>Volume</span>
-      <input type="range" min="0" max="100" value="50">
-    </label>
-  </section>
-`;
-
-StandardFloatingBubble.storyName = 'Standard (Floating Bubble)';
-
-export const MultipleRanges = () => html`
-  ${rangeSliderStoryStyles}
-  <form
-    class="range-slider-section range-slider-form"
-    @submit="${(event) => {
-      event.preventDefault();
-      toastFormData(new FormData(event.target));
-    }}"
-  >
-    <label>
-      <span>Brightness</span>
-      <input type="range" name="brightness" min="0" max="100" value="75">
-    </label>
-    <label>
-      <span>Contrast</span>
-      <input type="range" name="contrast" min="0" max="100" value="50">
-    </label>
-    <label>
-      <span>Saturation</span>
-      <input type="range" name="saturation" min="0" max="100" value="60">
-    </label>
-    <label>
-      <span>Temperature</span>
-      <input type="range" name="temperature" min="-100" max="100" value="0">
-    </label>
-    <button type="submit" class="btn-primary range-slider-actions">Apply Settings</button>
-  </form>
-`;
-
-export const CustomSteps = () => html`
-  ${rangeSliderStoryStyles}
-  <form
-    class="range-slider-section range-slider-form"
-    @submit="${(event) => {
-      event.preventDefault();
-      toastFormData(new FormData(event.target));
-    }}"
-  >
-    <label>
-      <span>Opacity (10% steps)</span>
-      <input type="range" name="opacity" min="0" max="100" value="100" step="10">
-    </label>
-    <label>
-      <span>Font Size (0.25rem steps)</span>
-      <input type="range" name="fontSize" min="0.5" max="3" value="1" step="0.25">
-    </label>
-    <button type="submit" class="btn-primary range-slider-actions">Apply Settings</button>
-  </form>
-`;
-
-export const InlineOutputMode = () => html`
-  ${rangeSliderStoryStyles}
-  <section class="range-slider-section range-slider-section--wide">
-    <p class="range-slider-description">
-      Add the <code>range-output</code> class to automatically create an inline output display.
-    </p>
-    <div class="range-slider-form">
-      <label class="range-output">
-        <span>Master Volume</span>
-        <input type="range" min="0" max="100" value="75">
-      </label>
-      <label class="range-output">
-        <span>Bass</span>
-        <input type="range" min="0" max="100" value="50">
-      </label>
-      <label class="range-output">
-        <span>Treble</span>
-        <input type="range" min="0" max="100" value="60">
-      </label>
-    </div>
-  </section>
-`;
-
-InlineOutputMode.storyName = 'Inline Output (range-output class)';
-
-export const AudioControlsExample = () => html`
-  ${rangeSliderStoryStyles}
-  <article class="card range-slider-section range-slider-section--wide range-slider-card">
-    <div>
-      <h3>Audio Controls</h3>
-      <p class="range-slider-description">
-        Complete example using <code>range-output</code> class for a real-world audio control interface.
-      </p>
-    </div>
-    <div class="range-slider-form">
-      <label class="range-output">
-        <span>Master Volume</span>
-        <input type="range" min="0" max="100" value="75">
-      </label>
-      <label class="range-output">
-        <span>Bass</span>
-        <input type="range" min="0" max="100" value="50">
-      </label>
-      <label class="range-output">
-        <span>Treble</span>
-        <input type="range" min="0" max="100" value="60">
-      </label>
-      <label class="range-output">
-        <span>Balance</span>
-        <input type="range" min="-50" max="50" value="0">
-      </label>
-    </div>
-  </article>
-`;
-
-AudioControlsExample.storyName = 'Real-world Example (Audio Controls)';
-
-export const ComparisonView = () => html`
-  ${rangeSliderStoryStyles}
-  <div class="range-slider-section range-slider-section--comparison">
-    <article class="card range-slider-card">
-      <div>
-        <h3>Standard Mode</h3>
-        <p class="range-slider-description">
-          Floating bubble appears on hover/focus. Best for simple forms.
-        </p>
-      </div>
-      <div class="range-slider-form">
-        <label>
-          <span>Volume</span>
-          <input type="range" min="0" max="100" value="75">
-        </label>
-        <label>
-          <span>Brightness</span>
-          <input type="range" min="0" max="100" value="50">
-        </label>
-      </div>
-    </article>
-
-    <article class="card range-slider-card">
-      <div>
-        <h3>Inline Output Mode</h3>
-        <p class="range-slider-description">
-          Persistent value display. Best for settings and controls.
-        </p>
-      </div>
-      <div class="range-slider-form">
-        <label class="range-output">
-          <span>Volume</span>
-          <input type="range" min="0" max="100" value="75">
-        </label>
-        <label class="range-output">
-          <span>Brightness</span>
-          <input type="range" min="0" max="100" value="50">
-        </label>
-      </div>
-    </article>
-  </div>
-`;
-
-ComparisonView.storyName = 'Side-by-side Comparison';
+import { html } from 'lit';
+
+const rangeSliderStoryStyles = html`
+  <style>
+    .range-slider-section {
+      max-width: 400px;
+      display: grid;
+      gap: var(--spacing-4);
+    }
+
+    .range-slider-section--wide {
+      max-width: 500px;
+    }
+
+    .range-slider-section--comparison {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: var(--spacing-6);
+      max-width: 1000px;
+    }
+
+    .range-slider-description {
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+      margin: 0 0 var(--spacing-4);
+    }
+
+    .range-slider-form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-4);
+    }
+
+    .range-slider-actions {
+      margin-top: var(--spacing-2);
+      align-self: flex-start;
+    }
+
+    .range-slider-card {
+      display: grid;
+      gap: var(--spacing-4);
+    }
+  </style>
+`;
+
+export default {
+  title: 'Enhancements/Range Sliders',
+  tags: ['range', 'slider', 'input', 'forms', 'interaction'],
+  parameters: {
+    pds: {
+      tags: ['range', 'slider', 'input', 'forms', 'interaction', 'enhancement']
+    },
+    docs: {
+      description: {
+        component: `Enhanced range inputs with two display modes:
+
+**Standard Mode** (default): Floating bubble that appears on interaction.
+
+**Inline Output Mode**: Add \`range-output\` class to the label for persistent inline value display using semantic \`<output>\` element.
+
+Both modes automatically generate proper ARIA attributes and use the \`<output>\` tag for accessibility.`
+      }
+    }
+  }
+};
+
+export const StandardFloatingBubble = () => html`
+  ${rangeSliderStoryStyles}
+  <section class="range-slider-section">
+    <p class="range-slider-description">
+      Default behavior: A floating bubble appears when you interact with the slider.
+    </p>
+    <label>
+      <span>Volume</span>
+      <input type="range" min="0" max="100" value="50">
+    </label>
+  </section>
+`;
+
+StandardFloatingBubble.storyName = 'Standard (Floating Bubble)';
+
+export const MultipleRanges = () => html`
+  ${rangeSliderStoryStyles}
+  <form
+    class="range-slider-section range-slider-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label>
+      <span>Brightness</span>
+      <input type="range" name="brightness" min="0" max="100" value="75">
+    </label>
+    <label>
+      <span>Contrast</span>
+      <input type="range" name="contrast" min="0" max="100" value="50">
+    </label>
+    <label>
+      <span>Saturation</span>
+      <input type="range" name="saturation" min="0" max="100" value="60">
+    </label>
+    <label>
+      <span>Temperature</span>
+      <input type="range" name="temperature" min="-100" max="100" value="0">
+    </label>
+    <button type="submit" class="btn-primary range-slider-actions">Apply Settings</button>
+  </form>
+`;
+
+export const CustomSteps = () => html`
+  ${rangeSliderStoryStyles}
+  <form
+    class="range-slider-section range-slider-form"
+    @submit="${(event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    }}"
+  >
+    <label>
+      <span>Opacity (10% steps)</span>
+      <input type="range" name="opacity" min="0" max="100" value="100" step="10">
+    </label>
+    <label>
+      <span>Font Size (0.25rem steps)</span>
+      <input type="range" name="fontSize" min="0.5" max="3" value="1" step="0.25">
+    </label>
+    <button type="submit" class="btn-primary range-slider-actions">Apply Settings</button>
+  </form>
+`;
+
+export const InlineOutputMode = () => html`
+  ${rangeSliderStoryStyles}
+  <section class="range-slider-section range-slider-section--wide">
+    <p class="range-slider-description">
+      Add the <code>range-output</code> class to automatically create an inline output display.
+    </p>
+    <div class="range-slider-form">
+      <label class="range-output">
+        <span>Master Volume</span>
+        <input type="range" min="0" max="100" value="75">
+      </label>
+      <label class="range-output">
+        <span>Bass</span>
+        <input type="range" min="0" max="100" value="50">
+      </label>
+      <label class="range-output">
+        <span>Treble</span>
+        <input type="range" min="0" max="100" value="60">
+      </label>
+    </div>
+  </section>
+`;
+
+InlineOutputMode.storyName = 'Inline Output (range-output class)';
+
+export const AudioControlsExample = () => html`
+  ${rangeSliderStoryStyles}
+  <article class="card range-slider-section range-slider-section--wide range-slider-card">
+    <div>
+      <h3>Audio Controls</h3>
+      <p class="range-slider-description">
+        Complete example using <code>range-output</code> class for a real-world audio control interface.
+      </p>
+    </div>
+    <div class="range-slider-form">
+      <label class="range-output">
+        <span>Master Volume</span>
+        <input type="range" min="0" max="100" value="75">
+      </label>
+      <label class="range-output">
+        <span>Bass</span>
+        <input type="range" min="0" max="100" value="50">
+      </label>
+      <label class="range-output">
+        <span>Treble</span>
+        <input type="range" min="0" max="100" value="60">
+      </label>
+      <label class="range-output">
+        <span>Balance</span>
+        <input type="range" min="-50" max="50" value="0">
+      </label>
+    </div>
+  </article>
+`;
+
+AudioControlsExample.storyName = 'Real-world Example (Audio Controls)';
+
+export const ComparisonView = () => html`
+  ${rangeSliderStoryStyles}
+  <div class="range-slider-section range-slider-section--comparison">
+    <article class="card range-slider-card">
+      <div>
+        <h3>Standard Mode</h3>
+        <p class="range-slider-description">
+          Floating bubble appears on hover/focus. Best for simple forms.
+        </p>
+      </div>
+      <div class="range-slider-form">
+        <label>
+          <span>Volume</span>
+          <input type="range" min="0" max="100" value="75">
+        </label>
+        <label>
+          <span>Brightness</span>
+          <input type="range" min="0" max="100" value="50">
+        </label>
+      </div>
+    </article>
+
+    <article class="card range-slider-card">
+      <div>
+        <h3>Inline Output Mode</h3>
+        <p class="range-slider-description">
+          Persistent value display. Best for settings and controls.
+        </p>
+      </div>
+      <div class="range-slider-form">
+        <label class="range-output">
+          <span>Volume</span>
+          <input type="range" min="0" max="100" value="75">
+        </label>
+        <label class="range-output">
+          <span>Brightness</span>
+          <input type="range" min="0" max="100" value="50">
+        </label>
+      </div>
+    </article>
+  </div>
+`;
+
+ComparisonView.storyName = 'Side-by-side Comparison';