@pure-ds/storybook 0.4.16 → 0.4.19

package/stories/primitives/Cards.stories.js

@@ -19,31 +19,42 @@ export default {
 const cardsStoryStyles = html`
   <style>
     /* Demo-specific gradient backgrounds */
-    .cards-gradient-one {
+    .story-cards-gradient-one {
       background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
     }
-    .cards-gradient-two {
+    .story-cards-gradient-two {
       background: linear-gradient(135deg, var(--color-secondary-500), var(--color-primary-500));
     }
-    .cards-gradient-three {
+    .story-cards-gradient-three {
       background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500));
     }
     /* Demo placeholder dimensions */
-    .cards-placeholder {
+    .story-cards-placeholder {
       height: 100px;
       border-radius: var(--radius-sm);
     }
-    .cards-avatar-placeholder {
+    .story-cards-avatar-placeholder {
       width: 48px;
       height: 48px;
       border-radius: var(--radius-full);
     }
-    .cards-media-placeholder {
+    .story-cards-media-placeholder {
       flex-shrink: 0;
       width: 7.5rem;
       height: 7.5rem;
       border-radius: var(--radius-md);
     }
+    /* Stats card */
+    .story-stat-number {
+      font-size: var(--font-size-2xl);
+      font-weight: var(--font-weight-bold);
+    }
+    .story-stat-primary {
+      color: var(--color-primary-600);
+    }
+    .story-stat-secondary {
+      color: var(--color-secondary-600);
+    }
   </style>
 `;
 
@@ -167,17 +178,17 @@ export const CardLayouts = () => html`
       <h3>Card Grid</h3>
       <div class="grid grid-auto-sm gap-sm">
         <article class="card stack-md">
-          <div class="cards-gradient-one cards-placeholder"></div>
+          <div class="story-cards-gradient-one cards-placeholder"></div>
           <h4>Card 1</h4>
           <small>Grid layout with cards.</small>
         </article>
         <article class="card stack-md">
-          <div class="cards-gradient-two cards-placeholder"></div>
+          <div class="story-cards-gradient-two cards-placeholder"></div>
           <h4>Card 2</h4>
           <small>Responsive and flexible.</small>
         </article>
         <article class="card stack-md">
-          <div class="cards-gradient-three cards-placeholder"></div>
+          <div class="story-cards-gradient-three cards-placeholder"></div>
           <h4>Card 3</h4>
           <small>Auto-fits to space.</small>
         </article>
@@ -232,11 +243,11 @@ export const ComplexCards = () => html`
         <h4>Stats Card</h4>
         <div class="grid grid-cols-2 gap-md">
           <div>
-            <div class="text-2xl font-bold text-primary">1.2K</div>
+            <div class="story-stat-number story-stat-primary">1.2K</div>
             <small class="text-muted">Followers</small>
           </div>
           <div>
-            <div class="text-2xl font-bold text-secondary">847</div>
+            <div class="story-stat-number story-stat-secondary">847</div>
             <small class="text-muted">Following</small>
           </div>
         </div>

package/stories/primitives/{Forms.stories.js → FormElements.stories.js}

@@ -1,8 +1,15 @@
-import { html } from 'lit';
+import { html } from 'lit';
 import { toastFormData } from '../utils/toast-utils.js';
 
+// Story-specific styles (not PDS classes - demo only)
+const formsStoryStyles = html`
+  <style>
+    .story-form-max { max-width: 24rem; }
+  </style>
+`;
+
 export default {
-  title: 'Primitives/Forms',
+  title: 'Primitives/Form Elements',
   tags: ['buttons', 'forms'],
   parameters: {
     pds: {
@@ -12,7 +19,7 @@ export default {
       description: {
         component: `Standard HTML form controls styled by PDS. 
 
-**💡 For modern apps, consider using [pds-jsonform](/story/components-pds-jsonform--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.
+**💡 For modern apps, consider using [pds-form](/story/components-pds-form--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.
 
 These primitive form controls provide the foundation for manual form building when you need full control over the markup.`
       }
@@ -44,21 +51,22 @@ export const Default = {
     };
     
     return html`
+      ${formsStoryStyles}
       <div class="card">
-        <form class="max-w-sm" @submit=${handleSubmit}>
+        <form class="story-form-max" @submit=${handleSubmit}>
           <label>
-            <span>Text Input</span>
+            <span data-label>Text Input</span>
             <input type="text" name="text" placeholder="Enter text...">
           </label>
           <label>
-            <span>Email</span>
+            <span data-label>Email</span>
             <div class="input-icon">
               <pds-icon icon="envelope"></pds-icon>
               <input type="email" name="email" required placeholder="email@example.com">
             </div>
           </label>
           <label>
-            <span>Select</span>
+            <span data-label>Select</span>
             <select name="select">
               <option>Option 1</option>
               <option>Option 2</option>
@@ -66,7 +74,7 @@ export const Default = {
             </select>
           </label>
           <label>
-            <span>Textarea</span>
+            <span data-label>Textarea</span>
             <textarea name="textarea" rows="4" placeholder="Enter longer text..."></textarea>
           </label>
           <button type="submit" class="btn-primary">Submit</button>
@@ -82,13 +90,14 @@ export const Default = {
 export const InputsWithIcons = {
   render: (args) => {
     return html`
+      ${formsStoryStyles}
       <div class="card stack-md">
         <h3>Inputs with Icons</h3>
         <p>Enhance inputs with icons for better UX. Icons can be positioned at the start or end of the input.</p>
         
-        <div class="flex flex-col gap-lg max-w-sm">
+        <div class="stack-lg story-form-max">
           <label>
-            <span>Search (Icon Start)</span>
+            <span data-label>Search (Icon Start)</span>
             <div class="input-icon">
               <pds-icon icon="magnifying-glass"></pds-icon>
               <input type="search" placeholder="Search..." />
@@ -96,7 +105,7 @@ export const InputsWithIcons = {
           </label>
           
           <label>
-            <span>Username (Icon End)</span>
+            <span data-label>Username (Icon End)</span>
             <div class="input-icon input-icon-end">
               <input type="text" placeholder="Username" />
               <pds-icon icon="user"></pds-icon>

package/stories/primitives/HtmlFormElements.stories.js

@@ -0,0 +1,128 @@
+import { html } from 'lit';
+import { toastFormData } from '../utils/toast-utils.js';
+
+// Story-specific styles (not PDS classes - demo only)
+const formsStoryStyles = html`
+  <style>
+    .story-form-max { max-width: 24rem; }
+  </style>
+`;
+
+export default {
+  title: 'Primitives/HTML Form Elements',
+  tags: ['buttons', 'forms'],
+  parameters: {
+    pds: {
+      tags: ['buttons', 'forms']
+    },
+    docs: {
+      description: {
+        component: `Standard HTML form controls styled by PDS. 
+
+**💡 For modern apps, consider using [pds-form](/story/components-pds-form--simple-form)** - a powerful web component that automatically generates forms from JSON Schema with built-in validation, conditional logic, and data binding.
+
+These primitive form controls provide the foundation for manual form building when you need full control over the markup.`
+      }
+    }
+  },
+  argTypes: {
+  preset: {
+    control: 'select',
+    options: ['default', 'ocean-breeze', 'midnight-steel', 'sunset-vibes', 'forest-calm', 'lavender-dream'],
+    description: 'Choose a design preset'
+  },
+  primaryColor: {
+    control: 'color',
+    description: 'Override primary color'
+  },
+  secondaryColor: {
+    control: 'color',
+    description: 'Override secondary color'
+  }
+  }
+};
+
+export const Default = {
+  render: (args) => {
+    // Preset changes are handled by toolbar in preview.js
+    const handleSubmit = (event) => {
+      event.preventDefault();
+      toastFormData(new FormData(event.target));
+    };
+    
+    return html`
+      ${formsStoryStyles}
+      <div class="card">
+        <form class="story-form-max" @submit=${handleSubmit}>
+          <label>
+            <span data-label>Text Input</span>
+            <input type="text" name="text" placeholder="Enter text...">
+          </label>
+          <label>
+            <span data-label>Email</span>
+            <div class="input-icon">
+              <pds-icon icon="envelope"></pds-icon>
+              <input type="email" name="email" required placeholder="email@example.com">
+            </div>
+          </label>
+          <label>
+            <span data-label>Select</span>
+            <select name="select">
+              <option>Option 1</option>
+              <option>Option 2</option>
+              <option>Option 3</option>
+            </select>
+          </label>
+          <label>
+            <span data-label>Textarea</span>
+            <textarea name="textarea" rows="4" placeholder="Enter longer text..."></textarea>
+          </label>
+          <button type="submit" class="btn-primary">Submit</button>
+        </form>
+      </div>
+    `;
+  },
+  args: {
+    preset: 'default'
+  }
+};
+
+export const InputsWithIcons = {
+  render: (args) => {
+    return html`
+      ${formsStoryStyles}
+      <div class="card stack-md">
+        <h3>Inputs with Icons</h3>
+        <p>Enhance inputs with icons for better UX. Icons can be positioned at the start or end of the input.</p>
+        
+        <div class="stack-lg story-form-max">
+          <label>
+            <span data-label>Search (Icon Start)</span>
+            <div class="input-icon">
+              <pds-icon icon="magnifying-glass"></pds-icon>
+              <input type="search" placeholder="Search..." />
+            </div>
+          </label>
+          
+          <label>
+            <span data-label>Username (Icon End)</span>
+            <div class="input-icon input-icon-end">
+              <input type="text" placeholder="Username" />
+              <pds-icon icon="user"></pds-icon>
+            </div>
+          </label>
+        </div>
+      </div>
+    `;
+  },
+  args: {
+    preset: 'default'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Input fields can be enhanced with icons to provide visual context. Use the `input-icon` class wrapper and position icons at the start (default) or end (`input-icon-end`) of the input.'
+      }
+    }
+  }
+};

package/stories/primitives/{FormGroups.stories.js → HtmlFormGroups.stories.js}

@@ -1,12 +1,20 @@
-import { html } from 'lit';
-import { toastFormData } from '../utils/toast-utils.js';
-
+import { html } from "lit";
+import { toastFormData } from "../utils/toast-utils.js";
+
+const styles = html`
+  <style>
+    /* Story-specific styles for form group demos */
+    .card:has(fieldset) {
+      max-width: 28rem;
+    }
+  </style>
+`;
 export default {
-  title: "Primitives/Form Groups",
-  tags: ['grouping'],
+  title: 'Primitives/HTML Form Groups',
+  tags: ["grouping"],
   parameters: {
     pds: {
-      tags: ['forms', 'grouping']
+      tags: ["forms", "radio", "checkbox", "grouping"],
     },
     docs: {
       description: {
@@ -38,10 +46,13 @@ Add the \`.buttons\` class to either type for outlined button-style controls:
 };
 
 export const RadioGroupDefault = () => html`
+  ${styles}
   <div class="card stack-md">
     <header>
       <h3>Radio Group - Default Style</h3>
-      <small class="text-muted">Default radio group with visible radio buttons, vertical layout</small>
+      <small class="text-muted"
+        >Default radio group with visible radio buttons, vertical layout</small
+      >
     </header>
     <fieldset role="radiogroup">
       <legend>Select your plan</legend>
@@ -64,10 +75,14 @@ export const RadioGroupDefault = () => html`
 RadioGroupDefault.storyName = "Radio Group - Default";
 
 export const RadioGroupButtons = () => html`
+  ${styles}
   <div class="card stack-md">
     <header>
       <h3>Radio Group - Button Style</h3>
-      <small class="text-muted">Add <code>class="buttons"</code> for outlined button-style radio controls</small>
+      <small class="text-muted"
+        >Add <code>class="buttons"</code> for outlined button-style radio
+        controls</small
+      >
     </header>
     <fieldset role="radiogroup" class="buttons">
       <legend>Select your plan</legend>
@@ -90,10 +105,13 @@ export const RadioGroupButtons = () => html`
 RadioGroupButtons.storyName = "Radio Group - Buttons";
 
 export const CheckboxGroupDefault = () => html`
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Checkbox Group - Default Style</h3>
-      <small class="text-muted">Default checkbox group with visible checkboxes, vertical layout</small>
+      <small class="text-muted"
+        >Default checkbox group with visible checkboxes, vertical layout</small
+      >
     </header>
     <fieldset role="group">
       <legend>Select features</legend>
@@ -125,10 +143,14 @@ export const CheckboxGroupDefault = () => html`
 CheckboxGroupDefault.storyName = "Checkbox Group - Default";
 
 export const CheckboxGroupButtons = () => html`
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Checkbox Group - Button Style</h3>
-      <small class="text-muted">Add <code>class="buttons"</code> for outlined button-style checkboxes</small>
+      <small class="text-muted"
+        >Add <code>class="buttons"</code> for outlined button-style
+        checkboxes</small
+      >
     </header>
     <fieldset role="group" class="buttons">
       <legend>Select features</legend>
@@ -160,10 +182,15 @@ export const CheckboxGroupButtons = () => html`
 CheckboxGroupButtons.storyName = "Checkbox Group - Buttons";
 
 export const StyleComparison = () => html`
+
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Side-by-Side Comparison</h3>
-      <small class="text-muted">Compare default vs button styles for both radio and checkbox groups</small>
+      <small class="text-muted"
+        >Compare default vs button styles for both radio and checkbox
+        groups</small
+      >
     </header>
     <div class="grid grid-cols-2 gap-lg">
       <div class="stack-md">
@@ -256,10 +283,14 @@ export const StyleComparison = () => html`
 StyleComparison.storyName = "Style Comparison";
 
 export const ToggleSwitches = () => html`
+${styles}
   <div class="card stack-md gap-lg">
     <header>
       <h3>Toggle Switches</h3>
-      <small class="text-muted">Uses <code>data-toggle</code> attribute for enhanced toggle switch styling</small>
+      <small class="text-muted"
+        >Uses <code>data-toggle</code> attribute for enhanced toggle switch
+        styling</small
+      >
     </header>
 
     <section class="card">
@@ -298,11 +329,14 @@ export const ToggleSwitches = () => html`
 ToggleSwitches.storyName = "Toggle Switches";
 
 export const CustomLayout = () => html`
+${styles}
   <div class="card stack-md">
     <h3>Custom Layout with Flex Utilities</h3>
-    <div class="alert alert-info">Override default column layout using standard CSS flex properties</div>
+    <div class="alert alert-info">
+      Override default column layout using standard CSS flex properties
+    </div>
 
-    <fieldset role="radiogroup" class="flex flex-wrap gap-sm">
+    <fieldset role="radiogroup" class="flex-row flex-wrap gap-sm">
       <legend>Horizontal Radio Group (flex-direction: row)</legend>
       <label>
         <input type="radio" name="horizontal-radio" value="1" checked />
@@ -318,7 +352,7 @@ export const CustomLayout = () => html`
       </label>
     </fieldset>
 
-    <fieldset role="group" class="flex flex-wrap gap-sm">
+    <fieldset role="group" class="flex-row flex-wrap gap-sm">
       <legend>Horizontal Checkbox Group (flex-direction: row)</legend>
       <label>
         <input type="checkbox" name="horizontal-check" value="1" checked />
@@ -339,10 +373,13 @@ export const CustomLayout = () => html`
 CustomLayout.storyName = "Custom Layout";
 
 export const ButtonStyleVariants = () => html`
+${styles}
   <div class="card stack-md">
     <header>
       <h3>Button Style Variants</h3>
-      <small class="text-muted">Examples of button-style groups in different contexts</small>
+      <small class="text-muted"
+        >Examples of button-style groups in different contexts</small
+      >
     </header>
     <div class="stack-md gap-lg max-w-lg">
       <fieldset role="radiogroup" class="buttons">
@@ -421,7 +458,10 @@ export const AccessibleFormGroups = {
       <div class="card stack-md">
         <header>
           <h2>Accessibility Features</h2>
-          <small class="text-muted">Form groups include proper ARIA attributes, semantic HTML, and keyboard navigation support.</small>
+          <small class="text-muted"
+            >Form groups include proper ARIA attributes, semantic HTML, and
+            keyboard navigation support.</small
+          >
         </header>
         <div class="card max-w-md">
           <form class="stack-md gap-lg" @submit=${handleSubmit}>
@@ -436,7 +476,12 @@ export const AccessibleFormGroups = {
 
               <fieldset role="group" class="flex flex-row">
                 <label>
-                  <input type="radio" name="notification" value="email" checked />
+                  <input
+                    type="radio"
+                    name="notification"
+                    value="email"
+                    checked
+                  />
                   <span>Email only</span>
                 </label>
                 <label>
@@ -456,7 +501,9 @@ export const AccessibleFormGroups = {
 
             <fieldset role="group" aria-describedby="topics-help">
               <legend>Topics to Follow</legend>
-              <small id="topics-help" class="text-muted">Select all topics you're interested in</small>
+              <small id="topics-help" class="text-muted"
+                >Select all topics you're interested in</small
+              >
               <label data-toggle>
                 <input type="checkbox" name="topics" value="product" checked />
                 <span>Product Updates</span>
@@ -472,14 +519,16 @@ export const AccessibleFormGroups = {
             </fieldset>
 
             <nav class="flex gap-sm">
-              <button type="submit" class="btn-primary">Save Preferences</button>
+              <button type="submit" class="btn-primary">
+                Save Preferences
+              </button>
               <button type="reset" class="btn-secondary">Reset</button>
             </nav>
           </form>
         </div>
       </div>
     `;
-  }
+  },
 };
 
 AccessibleFormGroups.storyName = "Accessible Form Groups";

package/stories/primitives/Media.stories.js

@@ -15,13 +15,21 @@ export default {
   }
 };
 
-// Minimal story-specific styles - only for demo-specific visuals not covered by PDS
+// Story-specific styles - only for demo-specific visuals not covered by PDS
 const mediaStoryStyles = html`
   <style>
     /* Video shell max-width constraint */
-    .media-video-shell {
+    .story-media-video-shell {
       max-width: 56.25rem;
     }
+    /* Violations fixed */
+    .story-img-full-width {
+      width: 100%;
+    }
+    .story-img-circle {
+      width: 200px;
+      aspect-ratio: 1;
+    }
   </style>
 `;
 
@@ -112,8 +120,7 @@ export const ImageRoundedUtilities = () => html`
       <img 
         src="https://picsum.photos/300/200?random=40" 
         alt="Small radius" 
-        class="img-rounded-sm"
-        style="width: 100%;"
+        class="img-rounded-sm story-img-full-width"
       />
       <figcaption><code>.img-rounded-sm</code></figcaption>
     </figure>
@@ -122,8 +129,7 @@ export const ImageRoundedUtilities = () => html`
       <img 
         src="https://picsum.photos/300/200?random=41" 
         alt="Medium radius" 
-        class="img-rounded-md"
-        style="width: 100%;"
+        class="img-rounded-md story-img-full-width"
       />
       <figcaption><code>.img-rounded-md</code></figcaption>
     </figure>
@@ -132,8 +138,7 @@ export const ImageRoundedUtilities = () => html`
       <img 
         src="https://picsum.photos/300/200?random=42" 
         alt="Large radius" 
-        class="img-rounded-lg"
-        style="width: 100%;"
+        class="img-rounded-lg story-img-full-width"
       />
       <figcaption><code>.img-rounded-lg</code></figcaption>
     </figure>
@@ -142,8 +147,7 @@ export const ImageRoundedUtilities = () => html`
       <img 
         src="https://picsum.photos/300/200?random=43" 
         alt="Extra large radius" 
-        class="img-rounded-xl"
-        style="width: 100%;"
+        class="img-rounded-xl story-img-full-width"
       />
       <figcaption><code>.img-rounded-xl</code></figcaption>
     </figure>
@@ -152,8 +156,7 @@ export const ImageRoundedUtilities = () => html`
       <img 
         src="https://picsum.photos/200/200?random=44" 
         alt="Full radius (circle)" 
-        class="img-rounded-full"
-        style="width: 200px; aspect-ratio: 1;"
+        class="img-rounded-full story-img-circle"
       />
       <figcaption><code>.img-rounded-full</code></figcaption>
     </figure>
@@ -195,26 +198,26 @@ export const InlineImages = () => html`
   <div class="card stack-md">
     <p>
       The team includes 
-      <img src="https://i.pravatar.cc/60?img=1" alt="Alice" class="img-inline" />
+      <img src="https://i.pravatar.cc/60?img=1" alt="Alice" class="story-img-inline" />
       Alice, 
-      <img src="https://i.pravatar.cc/60?img=2" alt="Bob" class="img-inline" />
+      <img src="https://i.pravatar.cc/60?img=2" alt="Bob" class="story-img-inline" />
       Bob, and 
-      <img src="https://i.pravatar.cc/60?img=3" alt="Carol" class="img-inline" />
+      <img src="https://i.pravatar.cc/60?img=3" alt="Carol" class="story-img-inline" />
       Carol who have been working on this project.
     </p>
     
     <p>
       Click the 
-      <img src="https://picsum.photos/60/60?random=60" alt="Settings icon" class="img-inline" />
+      <img src="https://picsum.photos/60/60?random=60" alt="Settings icon" class="story-img-inline" />
       icon to access settings, or the 
-      <img src="https://picsum.photos/60/60?random=61" alt="Help icon" class="img-inline" />
+      <img src="https://picsum.photos/60/60?random=61" alt="Help icon" class="story-img-inline" />
       icon for help.
     </p>
   </div>
   
   <div class="card">
     <h3>CSS Properties</h3>
-    <pre><code>.img-inline {
+    <pre><code>.story-img-inline {
   display: inline;
   vertical-align: middle;
   border-radius: var(--radius-xs);
@@ -236,7 +239,7 @@ export const VideoResponsive = () => html`
   </div>
   
   <video 
-    class="video-responsive" 
+    class="story-video-responsive" 
     controls 
     poster="https://picsum.photos/600/338?random=70"
   >
@@ -249,7 +252,7 @@ export const VideoResponsive = () => html`
   
   <div class="card">
     <h3>CSS Properties</h3>
-    <pre><code>.video-responsive {
+    <pre><code>.story-video-responsive {
   width: 100%;
   max-width: 600px;
   height: auto;