@pure-ds/storybook 0.4.16 → 0.4.17

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

@@ -1,6 +1,13 @@
 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',
   tags: ['buttons', 'forms'],
@@ -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/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;

package/stories/utilities/Backdrop.stories.js

@@ -1,5 +1,44 @@
 import { html } from 'lit';
 
+// Story-specific styles for backdrop demos
+const backdropStoryStyles = html`
+  <style>
+    .story-demo-container {
+      position: relative;
+      height: 200px;
+      margin-top: var(--spacing-4);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+    .story-demo-container-sm {
+      position: relative;
+      height: 150px;
+      margin-top: var(--spacing-3);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+    }
+    .story-demo-bg {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .story-backdrop-positioned {
+      position: absolute;
+    }
+    .story-content-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+    }
+    .story-text-center {
+      text-align: center;
+    }
+  </style>
+`;
+
 export default {
   title: 'Utilities/Backdrop',
   tags: ['layout', 'backdrop', 'modal', 'overlay', 'utilities'],
@@ -16,6 +55,7 @@ export default {
 };
 
 export const BackdropVariants = () => html`
+  ${backdropStoryStyles}
   <header class="card">
     <h2>Backdrop Utilities</h2>
     <p class="text-muted">
@@ -29,11 +69,11 @@ export const BackdropVariants = () => html`
       <h3>Default Backdrop</h3>
       <p>Uses theme backdrop variables with subtle blur and gradient.</p>
       <code>.backdrop.active</code>
-      <div style="position: relative; height: 200px; margin-top: var(--spacing-4); border-radius: var(--radius-md); overflow: hidden;">
-        <img src="https://picsum.photos/400/200?random=1" alt="Background" style="width: 100%; height: 100%; object-fit: cover;" />
-        <div class="backdrop active" style="position: absolute;"></div>
-        <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;">
-          <div class="card surface-overlay" style="text-align: center;">
+      <div class="story-demo-container">
+        <img src="https://picsum.photos/400/200?random=1" alt="Background" class="story-demo-bg" />
+        <div class="backdrop active story-backdrop-positioned"></div>
+        <div class="story-content-overlay">
+          <div class="card surface-overlay story-text-center">
             <p>Modal content</p>
           </div>
         </div>
@@ -44,11 +84,11 @@ export const BackdropVariants = () => html`
       <h3>Light Backdrop</h3>
       <p>For light-themed overlays or subtle dimming.</p>
       <code>.backdrop.backdrop-light.active</code>
-      <div style="position: relative; height: 200px; margin-top: var(--spacing-4); border-radius: var(--radius-md); overflow: hidden;">
-        <img src="https://picsum.photos/400/200?random=2" alt="Background" style="width: 100%; height: 100%; object-fit: cover;" />
-        <div class="backdrop backdrop-light active" style="position: absolute;"></div>
-        <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;">
-          <div class="card" style="text-align: center;">
+      <div class="story-demo-container">
+        <img src="https://picsum.photos/400/200?random=2" alt="Background" class="story-demo-bg" />
+        <div class="backdrop backdrop-light active story-backdrop-positioned"></div>
+        <div class="story-content-overlay">
+          <div class="card story-text-center">
             <p>Light overlay</p>
           </div>
         </div>
@@ -59,11 +99,11 @@ export const BackdropVariants = () => html`
       <h3>Dark Backdrop</h3>
       <p>For dramatic dimming and focus on content.</p>
       <code>.backdrop.backdrop-dark.active</code>
-      <div style="position: relative; height: 200px; margin-top: var(--spacing-4); border-radius: var(--radius-md); overflow: hidden;">
-        <img src="https://picsum.photos/400/200?random=3" alt="Background" style="width: 100%; height: 100%; object-fit: cover;" />
-        <div class="backdrop backdrop-dark active" style="position: absolute;"></div>
-        <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;">
-          <div class="card surface-overlay" style="text-align: center; color: white;">
+      <div class="story-demo-container">
+        <img src="https://picsum.photos/400/200?random=3" alt="Background" class="story-demo-bg" />
+        <div class="backdrop backdrop-dark active story-backdrop-positioned"></div>
+        <div class="story-content-overlay">
+          <div class="card surface-overlay story-text-center text-inverse">
             <p>Dark overlay</p>
           </div>
         </div>
@@ -75,6 +115,7 @@ export const BackdropVariants = () => html`
 BackdropVariants.storyName = 'Backdrop Variants';
 
 export const BlurLevels = () => html`
+  ${backdropStoryStyles}
   <header class="card">
     <h2>Backdrop Blur Levels</h2>
     <p class="text-muted">
@@ -87,10 +128,10 @@ export const BlurLevels = () => html`
     <article class="card">
       <h4>Small Blur</h4>
       <code>.backdrop-blur-sm</code>
-      <div style="position: relative; height: 150px; margin-top: var(--spacing-3); border-radius: var(--radius-md); overflow: hidden;">
-        <img src="https://picsum.photos/300/150?random=4" alt="Background" style="width: 100%; height: 100%; object-fit: cover;" />
-        <div class="backdrop backdrop-blur-sm active" style="position: absolute;"></div>
-        <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;">
+      <div class="story-demo-container-sm">
+        <img src="https://picsum.photos/300/150?random=4" alt="Background" class="story-demo-bg" />
+        <div class="backdrop backdrop-blur-sm active story-backdrop-positioned"></div>
+        <div class="story-content-overlay">
           <span class="badge badge-primary">5px blur</span>
         </div>
       </div>
@@ -99,10 +140,10 @@ export const BlurLevels = () => html`
     <article class="card">
       <h4>Medium Blur</h4>
       <code>.backdrop-blur-md</code>
-      <div style="position: relative; height: 150px; margin-top: var(--spacing-3); border-radius: var(--radius-md); overflow: hidden;">
-        <img src="https://picsum.photos/300/150?random=5" alt="Background" style="width: 100%; height: 100%; object-fit: cover;" />
-        <div class="backdrop backdrop-blur-md active" style="position: absolute;"></div>
-        <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;">
+      <div class="story-demo-container-sm">
+        <img src="https://picsum.photos/300/150?random=5" alt="Background" class="story-demo-bg" />
+        <div class="backdrop backdrop-blur-md active story-backdrop-positioned"></div>
+        <div class="story-content-overlay">
           <span class="badge badge-secondary">10px blur</span>
         </div>
       </div>
@@ -111,10 +152,10 @@ export const BlurLevels = () => html`
     <article class="card">
       <h4>Large Blur</h4>
       <code>.backdrop-blur-lg</code>
-      <div style="position: relative; height: 150px; margin-top: var(--spacing-3); border-radius: var(--radius-md); overflow: hidden;">
-        <img src="https://picsum.photos/300/150?random=6" alt="Background" style="width: 100%; height: 100%; object-fit: cover;" />
-        <div class="backdrop backdrop-blur-lg active" style="position: absolute;"></div>
-        <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1;">
+      <div class="story-demo-container-sm">
+        <img src="https://picsum.photos/300/150?random=6" alt="Background" class="story-demo-bg" />
+        <div class="backdrop backdrop-blur-lg active story-backdrop-positioned"></div>
+        <div class="story-content-overlay">
           <span class="badge badge-info">20px blur</span>
         </div>
       </div>

package/stories/utils/PdsAsk.stories.js

@@ -215,7 +215,7 @@ export const QuickConfirm = {
 
       const decision = await ask(
         html`
-          <div class="flex flex-col gap-sm">
+          <div class="stack-sm">
             <p>This dialog comes from <code>PDS.ask()</code> and resolves with a simple boolean.</p>
             <ul class="ask-card-list list-disc">
               <li>Handles focus trapping and ESC cancel automatically.</li>