@pure-ds/storybook 0.3.19 → 0.4.1

package/stories/utilities/Backdrop.stories.js

@@ -0,0 +1,197 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Utilities/Backdrop',
+  tags: ['layout', 'backdrop', 'modal', 'overlay', 'utilities'],
+  parameters: {
+    pds: {
+      tags: ['backdrop', 'modal', 'overlay', 'utilities']
+    },
+    docs: {
+      description: {
+        component: 'Backdrop utilities for modal overlays, drawers, and lightboxes. Provides consistent blur and dimming effects with light/dark variants.'
+      }
+    }
+  }
+};
+
+export const BackdropVariants = () => html`
+  <div class="card">
+    <h2>Backdrop Utilities</h2>
+    <p class="text-muted">
+      The <code>.backdrop</code> class provides a full-screen overlay for modals and dialogs.
+      Add <code>.active</code> to show the backdrop.
+    </p>
+  </div>
+
+  <div class="grid grid-auto-md gap-lg">
+    <article class="card">
+      <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;">
+            <p>Modal content</p>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <article class="card">
+      <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;">
+            <p>Light overlay</p>
+          </div>
+        </div>
+      </div>
+    </article>
+
+    <article class="card">
+      <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;">
+            <p>Dark overlay</p>
+          </div>
+        </div>
+      </div>
+    </article>
+  </div>
+`;
+
+BackdropVariants.storyName = 'Backdrop Variants';
+
+export const BlurLevels = () => html`
+  <div class="card">
+    <h2>Backdrop Blur Levels</h2>
+    <p class="text-muted">
+      Control the blur intensity with <code>.backdrop-blur-sm</code>, <code>.backdrop-blur-md</code>, 
+      and <code>.backdrop-blur-lg</code>.
+    </p>
+  </div>
+
+  <div class="grid grid-cols-3 gap-md">
+    <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;">
+          <span class="badge badge-primary">5px blur</span>
+        </div>
+      </div>
+    </article>
+
+    <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;">
+          <span class="badge badge-secondary">10px blur</span>
+        </div>
+      </div>
+    </article>
+
+    <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;">
+          <span class="badge badge-info">20px blur</span>
+        </div>
+      </div>
+    </article>
+  </div>
+`;
+
+BlurLevels.storyName = 'Blur Levels';
+
+export const BackdropReference = () => html`
+  <div class="card">
+    <h2>Backdrop Utilities Reference</h2>
+  </div>
+
+  <table class="table-bordered">
+    <thead>
+      <tr>
+        <th>Class</th>
+        <th>Description</th>
+        <th>CSS Variable Override</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>.backdrop</code></td>
+        <td>Base backdrop with fixed positioning, uses theme variables</td>
+        <td>Uses <code>--backdrop-bg</code>, <code>--backdrop-filter</code></td>
+      </tr>
+      <tr>
+        <td><code>.backdrop.active</code></td>
+        <td>Shows the backdrop with opacity transition</td>
+        <td><code>--backdrop-opacity</code></td>
+      </tr>
+      <tr>
+        <td><code>.backdrop-light</code></td>
+        <td>Light gradient overlay (white-based)</td>
+        <td>Sets <code>--backdrop-bg</code> to light gradient</td>
+      </tr>
+      <tr>
+        <td><code>.backdrop-dark</code></td>
+        <td>Dark gradient overlay (black-based)</td>
+        <td>Sets <code>--backdrop-bg</code> to dark gradient</td>
+      </tr>
+      <tr>
+        <td><code>.backdrop-blur-sm</code></td>
+        <td>Small blur effect (5px)</td>
+        <td>Sets <code>--backdrop-blur: 5px</code></td>
+      </tr>
+      <tr>
+        <td><code>.backdrop-blur-md</code></td>
+        <td>Medium blur effect (10px)</td>
+        <td>Sets <code>--backdrop-blur: 10px</code></td>
+      </tr>
+      <tr>
+        <td><code>.backdrop-blur-lg</code></td>
+        <td>Large blur effect (20px)</td>
+        <td>Sets <code>--backdrop-blur: 20px</code></td>
+      </tr>
+    </tbody>
+  </table>
+
+  <div class="card">
+    <h3>Usage with PDS Dialogs</h3>
+    <p>
+      Note: PDS dialogs (<code>&lt;dialog&gt;</code>) and <code>PDS.ask()</code> 
+      automatically use the <code>::backdrop</code> pseudo-element with proper styling.
+      These utilities are primarily for custom overlay implementations.
+    </p>
+    <pre><code>&lt;!-- Custom overlay pattern --&gt;
+&lt;div class="backdrop backdrop-blur-md" id="customOverlay"&gt;&lt;/div&gt;
+&lt;div class="modal-content"&gt;...&lt;/div&gt;
+
+&lt;script&gt;
+  // Toggle backdrop
+  customOverlay.classList.toggle('active');
+&lt;/script&gt;</code></pre>
+  </div>
+`;
+
+BackdropReference.storyName = 'Reference';

package/stories/patterns/Layout.stories.js

@@ -1,99 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Patterns/Layout',
-  tags: ['grouping'],
-  parameters: {
-    pds: {
-      tags: ['layout', 'grid', 'flex', 'grouping']
-    },
-    docs: {
-      description: {
-        component: 'Layout patterns using grid, flex, and container utilities'
-      }
-    }
-  }
-};
-
-const layoutStoryStyles = html`
-  <style>
-    .layout-auto-grid {
-      grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
-      gap: var(--spacing-4);
-    }
-    .layout-flex-item {
-      flex: 1;
-      min-width: 12.5rem;
-    }
-    .layout-container {
-      max-width: 75rem;
-      margin: 0 auto;
-      padding: var(--spacing-4);
-    }
-    .layout-section-spacing {
-      margin-top: var(--spacing-4);
-    }
-    .layout-grid-card {
-      padding: var(--spacing-4);
-      text-align: center;
-    }
-  </style>
-`;
-
-export const GridLayout = () => html`
-  ${layoutStoryStyles}
-  <div class="grid layout-auto-grid">
-    ${Array.from({ length: 6 }, (_, i) => html`
-      <div class="card">
-        <h4>Grid Item ${i + 1}</h4>
-        <p>Content in grid cell</p>
-      </div>
-    `)}
-  </div>
-`;
-
-export const FlexLayout = () => html`
-  ${layoutStoryStyles}
-  <div class="flex gap-sm flex-wrap">
-    <div class="card layout-flex-item">
-      <h4>Flexible Box 1</h4>
-      <p>Grows to fill space</p>
-    </div>
-    <div class="card layout-flex-item">
-      <h4>Flexible Box 2</h4>
-      <p>Equal flex basis</p>
-    </div>
-    <div class="card layout-flex-item">
-      <h4>Flexible Box 3</h4>
-      <p>Responsive wrapping</p>
-    </div>
-  </div>
-`;
-
-export const ContainerLayout = () => html`
-  ${layoutStoryStyles}
-  <div class="layout-container">
-    <h2>Centered Container</h2>
-    <p>Content is constrained to a maximum width and centered.</p>
-    <div class="grid grid-cols-3 gap-md layout-section-spacing">
-      ${Array.from({ length: 3 }, (_, i) => html`
-        <div class="card">
-          <h4>Column ${i + 1}</h4>
-          <p>Three equal columns</p>
-        </div>
-      `)}
-    </div>
-  </div>
-`;
-
-export const ResponsiveGrid = () => html`
-  ${layoutStoryStyles}
-  <div class="grid grid-auto-md gap-md">
-    ${Array.from({ length: 12 }, (_, i) => html`
-      <div class="card layout-grid-card">
-        <h4>Item ${i + 1}</h4>
-        <p>Auto-responsive grid cell</p>
-      </div>
-    `)}
-  </div>
-`;

package/stories/utilities/GridSystem.stories.js

@@ -1,208 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Utilities/Grid System',
-  tags: ['layout', 'grid', 'spacing', 'utilities', 'gap'],
-  parameters: {
-    pds: {
-      tags: ['grid', 'layout', 'utilities', 'spacing', 'gap']
-    },
-    docs: {
-      description: {
-        component: 'Modern, config-driven grid system with fixed column grids and auto-fit responsive layouts. All utilities are generated from layout.gridSystem configuration.'
-      }
-    }
-  }
-};
-
-const gridSystemStoryStyles = html`
-  <style>
-    .grid-system-card-title {
-      margin-top: var(--spacing-3);
-    }
-  </style>
-`;
-
-export const FixedColumnGrids = () => html`
-  <div class="card">
-    <h3>Two Column Grid (.grid-cols-2)</h3>
-    <div class="grid grid-cols-2 gap-md">
-      <div class="card text-center">
-        <pds-icon icon="square" size="lg" class="icon-primary"></pds-icon>
-        <h4>Column 1</h4>
-        <p>Equal width columns</p>
-      </div>
-      <div class="card text-center">
-        <pds-icon icon="square" size="lg" class="icon-secondary"></pds-icon>
-        <h4>Column 2</h4>
-        <p>Auto responsive</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card">
-    <h3>Three Column Grid (.grid-cols-3)</h3>
-    <div class="grid grid-cols-3 gap-sm">
-      <div class="card text-center">
-        <pds-icon icon="circle" size="md" class="icon-success"></pds-icon>
-        <p>Column 1</p>
-      </div>
-      <div class="card text-center">
-        <pds-icon icon="circle" size="md" class="icon-warning"></pds-icon>
-        <p>Column 2</p>
-      </div>
-      <div class="card text-center">
-        <pds-icon icon="circle" size="md" class="icon-danger"></pds-icon>
-        <p>Column 3</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card">
-    <h3>Four Column Grid (.grid-cols-4)</h3>
-    <div class="grid grid-cols-4 gap-xs">
-      ${Array.from({ length: 4 }, (_, i) => html`
-        <div class="card text-center">
-          <strong>${i + 1}</strong>
-        </div>
-      `)}
-    </div>
-  </div>
-`;
-
-FixedColumnGrids.storyName = 'Fixed Column Grids';
-
-export const AutoFitGrids = () => html`
-  <div class="card">
-    <h3>.grid-auto-sm (min 150px)</h3>
-    <p class="text-muted">
-      <em>Resize the window to see columns automatically adjust</em>
-    </p>
-    <div class="grid grid-auto-sm gap-md">
-      <div class="card text-center">
-        <pds-icon icon="desktop" size="lg" class="icon-info"></pds-icon>
-        <h5>Responsive</h5>
-        <p>Automatically wraps</p>
-      </div>
-      <div class="card text-center">
-        <pds-icon icon="device-mobile" size="lg" class="icon-info"></pds-icon>
-        <h5>Adaptive</h5>
-        <p>Based on space</p>
-      </div>
-      <div class="card text-center">
-        <pds-icon icon="globe" size="lg" class="icon-info"></pds-icon>
-        <h5>Flexible</h5>
-        <p>Resize the window</p>
-      </div>
-      <div class="card text-center">
-        <pds-icon icon="feather" size="lg" class="icon-info"></pds-icon>
-        <h5>Dynamic</h5>
-        <p>No breakpoints needed</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card">
-    <h3>.grid-auto-md (min 250px)</h3>
-    <div class="grid grid-auto-md gap-lg">
-      <div class="card surface-elevated text-center">
-        <pds-icon icon="rocket" size="xl" class="icon-accent"></pds-icon>
-        <h5>Card 1</h5>
-        <p>Larger minimum width means fewer columns on small screens</p>
-      </div>
-      <div class="card surface-elevated text-center">
-        <pds-icon icon="palette" size="xl" class="icon-accent"></pds-icon>
-        <h5>Card 2</h5>
-        <p>Smart surface tokens apply automatically</p>
-      </div>
-      <div class="card surface-elevated text-center">
-        <pds-icon icon="heart" size="xl" class="icon-accent"></pds-icon>
-        <h5>Card 3</h5>
-        <p>Consistent spacing with gap utilities</p>
-      </div>
-    </div>
-  </div>
-`;
-
-AutoFitGrids.storyName = 'Auto-Fit Responsive Grids';
-
-export const GapUtilities = () => html`
-  <div class="card">
-    <h2>Gap Utilities</h2>
-    <p>Control spacing between grid items with <code>.gap-{size}</code> classes</p>
-  </div>
-
-  <h3>.gap-xs (spacing-1)</h3>
-  <div class="card">
-    <div class="grid grid-cols-3 gap-xs">
-      ${Array.from({ length: 3 }, (_, i) => html`
-        <div class="card text-center">
-          <strong>${String.fromCharCode(65 + i)}</strong>
-        </div>
-      `)}
-    </div>
-  </div>
-
-  <h3>.gap-sm (spacing-2)</h3>
-  <div class="card">
-    <div class="grid grid-cols-3 gap-sm">
-      ${Array.from({ length: 3 }, (_, i) => html`
-        <div class="card text-center">
-          <strong>${String.fromCharCode(65 + i)}</strong>
-        </div>
-      `)}
-    </div>
-  </div>
-
-  <h3>.gap-md (spacing-4)</h3>
-  <div class="card">
-    <div class="grid grid-cols-3 gap-md">
-      ${Array.from({ length: 3 }, (_, i) => html`
-        <div class="card text-center">
-          <strong>${String.fromCharCode(65 + i)}</strong>
-        </div>
-      `)}
-    </div>
-  </div>
-
-  <h3>.gap-lg (spacing-6)</h3>
-  <div class="card">
-    <div class="grid grid-cols-3 gap-lg">
-      ${Array.from({ length: 3 }, (_, i) => html`
-        <div class="card text-center">
-          <strong>${String.fromCharCode(65 + i)}</strong>
-        </div>
-      `)}
-    </div>
-  </div>
-`;
-
-GapUtilities.storyName = 'Gap Utilities';
-
-export const CardGridLayouts = () => html`
-  ${gridSystemStoryStyles}
-  <div class="card">
-    <h2>Card Grid Layouts</h2>
-    <p>Practical examples using grid utilities for card-based layouts</p>
-    
-    <div class="grid grid-cols-3 gap-md">
-      <div class="card">
-        <pds-icon icon="palette" size="xl" class="icon-primary"></pds-icon>
-        <h5 class="grid-system-card-title">Design</h5>
-        <p>Smart surfaces handle theming automatically</p>
-      </div>
-      <div class="card">
-        <pds-icon icon="code" size="xl" class="icon-success"></pds-icon>
-        <h5 class="grid-system-card-title">Development</h5>
-        <p>Zero manual color overrides needed</p>
-      </div>
-      <div class="card">
-        <pds-icon icon="rocket" size="xl" class="icon-info"></pds-icon>
-        <h5 class="grid-system-card-title">Performance</h5>
-        <p>CSS custom properties are fast</p>
-      </div>
-    </div>
-  </div>
-`;
-
-CardGridLayouts.storyName = 'Card Grid Layouts';