@pure-ds/storybook 0.4.16 → 0.4.17

package/stories/components/PdsScrollrow.stories.js

@@ -1,86 +1,128 @@
-import { html } from 'lit';
+import { html } from "lit";
 
 const docsParameters = {
   description: {
-    component: 'Horizontal scrolling container with navigation buttons'
-  }
+    component: "Horizontal scrolling container with navigation buttons",
+  },
 };
 
-if (typeof window !== 'undefined') {
-  import('../reference/reference-docs.js')
+if (typeof window !== "undefined") {
+  import("../reference/reference-docs.js")
     .then(({ createComponentDocsPage }) => {
-      docsParameters.page = createComponentDocsPage('pds-scrollrow');
+      docsParameters.page = createComponentDocsPage("pds-scrollrow");
     })
     .catch((error) => {
-      console.warn('storybook: docs page failed to load for pds-scrollrow', error);
+      console.warn(
+        "storybook: docs page failed to load for pds-scrollrow",
+        error
+      );
     });
 }
 
 // Demo-specific styles for scrollrow cards (min-width required for scroll behavior)
 const scrollrowStoryStyles = html`
   <style>
-    .scrollrow-card { min-width: 18.75rem; }
-    .scrollrow-card--sm { min-width: 12.5rem; }
-    .scrollrow-card--product { min-width: 17.5rem; }
-    .scrollrow-image { 
-      min-width: 18.75rem; 
-      height: 12.5rem; 
-      object-fit: cover; 
-      border-radius: var(--radius-md); 
+    .story-scrollrow-card {
+      min-width: 18.75rem;
     }
-    .scrollrow-avatar {
+    .story-scrollrow-card--sm {
+      min-width: 12.5rem;
+    }
+    .story-scrollrow-image {
+      min-width: 18.75rem;
+      height: 12.5rem;
+      object-fit: cover;
+      border-radius: var(--radius-md);
+    }
+    .story-scrollrow-avatar {
       width: 100px;
       height: 100px;
       border-radius: var(--radius-full);
       margin: 0 auto;
     }
-    .scrollrow-product-image {
+    .story-product-gallery {
+      article.card {
+        min-width: 250px;
+        display: flex;
+        flex-direction: column;
+      }
+      .story-product-content {
+        flex: 1;
+      }
+      .story-product-footer {
+        margin-top: auto;
+        padding-top: var(--spacing-3);
+      }
+    }
+    .story-product-image {
       width: 100%;
-      height: 200px;
+      aspect-ratio: 4/3;
       object-fit: cover;
       border-radius: var(--radius-md);
     }
-    .scrollrow-price {
+    .story-product-price {
       font-size: var(--font-size-xl);
       font-weight: var(--font-weight-bold);
-      color: var(--color-primary);
+      color: var(--color-primary-600);
     }
   </style>
 `;
 
 export default {
-  title: 'Components/Pds Scrollrow',
-  tags: ['autodocs', 'scrollrow', 'scroll', 'carousel', 'horizontal', 'overflow'],
+  title: "Components/Pds Scrollrow",
+  tags: [
+    "autodocs",
+    "scrollrow",
+    "scroll",
+    "carousel",
+    "horizontal",
+    "overflow",
+  ],
   parameters: {
     pds: {
-      tags: ['scrollrow', 'scroll', 'carousel', 'horizontal', 'overflow', 'pds-scrollrow', 'layout']
+      tags: [
+        "scrollrow",
+        "scroll",
+        "carousel",
+        "horizontal",
+        "overflow",
+        "pds-scrollrow",
+        "layout",
+      ],
     },
-    docs: docsParameters
-  }
+    docs: docsParameters,
+  },
 };
 
 export const Default = () => html`
   ${scrollrowStoryStyles}
   <pds-scrollrow>
-    ${Array.from({ length: 10 }, (_, i) => html`
-      <article class="card scrollrow-card stack-sm">
-        <h4>Card ${i + 1}</h4>
-        <p>This is card content that scrolls horizontally.</p>
-        <button class="btn-primary">Action</button>
-      </article>
-    `)}
+    ${Array.from(
+      { length: 10 },
+      (_, i) => html`
+        <article class="card story-scrollrow-card stack-sm">
+          <h4>Card ${i + 1}</h4>
+          <p>This is card content that scrolls horizontally.</p>
+          <button class="btn-primary">Action</button>
+        </article>
+      `
+    )}
   </pds-scrollrow>
 `;
 
 export const WithImages = () => html`
   ${scrollrowStoryStyles}
   <pds-scrollrow>
-    ${Array.from({ length: 10 }, (_, i) => html`
-      <img 
-        src="https://picsum.photos/300/200?random=${i}" 
-        alt="Gallery image ${i + 1}"
-        class="scrollrow-image">
-    `)}
+    ${Array.from(
+      { length: 10 },
+      (_, i) => html`
+        <img
+          src="https://picsum.photos/300/200?random=${i}"
+          alt="Gallery image ${i + 1}"
+          class="story-scrollrow-image"
+        />
+      `
+    )}
   </pds-scrollrow>
 `;
 
@@ -88,51 +130,161 @@ export const ProductGallery = () => html`
   ${scrollrowStoryStyles}
   <div class="stack-md">
     <h3>Featured Products</h3>
-    <pds-scrollrow snap="start">
-      ${Array.from({ length: 8 }, (_, i) => html`
-        <article class="card scrollrow-card--product stack-sm">
-          <img 
-            src="https://picsum.photos/280/200?random=${100 + i}" 
-            alt="Product ${i + 1}"
-            class="scrollrow-product-image">
-          <h4>Product ${i + 1}</h4>
-          <small class="text-muted">Premium quality product with amazing features.</small>
-          <div class="flex justify-between items-center">
-            <span class="scrollrow-price">$${(i + 1) * 10 + 29}</span>
-            <button class="btn-primary btn-sm">
-              <pds-icon icon="shopping-cart" size="sm"></pds-icon>
-              Add
-            </button>
-          </div>
-        </article>
-      `)}
+    <pds-scrollrow snap="start" class="story-product-gallery">
+      ${Array.from(
+        { length: 8 },
+        (_, i) => html`
+          <article class="card stack-sm">
+            <img
+              src="https://picsum.photos/280/200?random=${100 + i}"
+              alt="Product ${i + 1}"
+              class="story-product-image"
+            />
+            <div class="story-product-content">
+              <h4>Product ${i + 1}</h4>
+              <small class="text-muted"
+                >Premium quality product with amazing features.</small
+              >
+            </div>
+            <div class="story-product-footer flex justify-between items-center">
+              <span class="story-product-price">$${(i + 1) * 10 + 29}</span>
+              <button class="btn-primary btn-sm">
+                <pds-icon icon="shopping-cart" size="sm"></pds-icon>
+                Add
+              </button>
+            </div>
+          </article>
+        `
+      )}
     </pds-scrollrow>
   </div>
 `;
 
-ProductGallery.storyName = 'Product Gallery';
+ProductGallery.storyName = "Product Gallery";
 
 export const UserProfiles = () => html`
   ${scrollrowStoryStyles}
   <div class="stack-md">
     <h3>Team Members</h3>
     <pds-scrollrow>
-      ${Array.from({ length: 12 }, (_, i) => html`
-        <article class="card surface-elevated scrollrow-card--sm stack-sm text-center">
-          <img 
-            src="https://i.pravatar.cc/150?img=${i + 1}" 
-            alt="Team member ${i + 1}"
-            class="scrollrow-avatar">
-          <h4>Team Member ${i + 1}</h4>
-          <p><small class="text-muted">Role Title</small></p>
-          <button class="btn-outline btn-sm">
-            <pds-icon icon="chat-circle" size="sm"></pds-icon>
-            Message
-          </button>
-        </article>
-      `)}
+      ${Array.from(
+        { length: 12 },
+        (_, i) => html`
+          <article
+            class="card surface-elevated story-scrollrow-card--sm stack-sm text-center"
+          >
+            <img
+              src="https://i.pravatar.cc/150?img=${i + 1}"
+              alt="Team member ${i + 1}"
+              class="story-scrollrow-avatar"
+            />
+            <h4>Team Member ${i + 1}</h4>
+            <p><small class="text-muted">Role Title</small></p>
+            <button class="btn-outline btn-sm">
+              <pds-icon icon="chat-circle" size="sm"></pds-icon>
+              Message
+            </button>
+          </article>
+        `
+      )}
+    </pds-scrollrow>
+  </div>
+`;
+
+UserProfiles.storyName = "User Profiles";
+
+export const CustomStyledButtons = () => html`
+  ${scrollrowStoryStyles}
+  <style>
+    .story-scrollrow-custom-buttons::part(prev),
+    .story-scrollrow-custom-buttons::part(next) {
+      background: rgba(var(--color-primary-rgb), 0.15);
+      border: 2px solid var(--color-primary);
+      color: var(--color-primary);
+      border-radius: var(--radius-full);
+      backdrop-filter: blur(4px);
+    }
+    .story-scrollrow-custom-buttons::part(prev):hover,
+    .story-scrollrow-custom-buttons::part(next):hover {
+      background: rgba(var(--color-primary-rgb), 0.3);
+    }
+  </style>
+  <div class="stack-md">
+    <h3>Outlined Semitransparent Buttons</h3>
+    <pds-scrollrow class="story-scrollrow-custom-buttons">
+      ${Array.from(
+        { length: 10 },
+        (_, i) => html`
+          <article class="card story-scrollrow-card stack-sm">
+            <h4>Card ${i + 1}</h4>
+            <p>
+              Custom styled navigation buttons with outline and transparency.
+            </p>
+            <button class="btn-primary">Action</button>
+          </article>
+        `
+      )}
+    </pds-scrollrow>
+  </div>
+`;
+
+CustomStyledButtons.storyName = "Custom Styled Buttons";
+
+export const ExternalButtons = () => html`
+  ${scrollrowStoryStyles}
+  <style>
+    .story-scrollrow-external::part(prev),
+    .story-scrollrow-external::part(next) {
+      display: none;
+    }
+    .story-external-nav-btn {
+      background: rgba(var(--color-surface-rgb), 0.8);
+      border: 2px solid var(--color-border);
+      color: var(--color-text);
+      width: 3rem;
+      height: 3rem;
+      border-radius: var(--radius-full);
+      backdrop-filter: blur(4px);
+      cursor: pointer;
+      transition: all 0.2s ease;
+    }
+    .story-external-nav-btn:hover {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+      color: var(--color-on-primary);
+    }
+  </style>
+  <div class="stack-sm">
+    <h3>External Navigation Buttons</h3>
+    <pds-scrollrow class="story-scrollrow-external">
+      ${Array.from(
+        { length: 10 },
+        (_, i) => html`
+          <article class="card story-scrollrow-card stack-sm">
+            <h4>Card ${i + 1}</h4>
+            <p>Navigation buttons are below the scroll area.</p>
+            <button class="btn-secondary">Details</button>
+          </article>
+        `
+      )}
     </pds-scrollrow>
+    <div class="flex justify-center gap-md">
+      <button
+        class="story-external-nav-btn"
+        part="prev"
+        onclick="this.closest('.stack-sm').querySelector('pds-scrollrow').doPage({currentTarget: this})"
+      >
+        <pds-icon icon="caret-left"></pds-icon>
+      </button>
+      <button
+        class="story-external-nav-btn"
+        part="next"
+        onclick="this.closest('.stack-sm').querySelector('pds-scrollrow').doPage({currentTarget: this})"
+      >
+        <pds-icon icon="caret-right"></pds-icon>
+      </button>
+    </div>
   </div>
 `;
 
-UserProfiles.storyName = 'User Profiles';
+ExternalButtons.storyName = "External Buttons";

package/stories/components/PdsSplitpanel.stories.js

@@ -16,24 +16,59 @@ if (typeof window !== 'undefined') {
     });
 }
 
-// Minimal styles for split panel demos
+// Story-specific styles for split panel demos
 const splitpanelStoryStyles = html`
   <style>
     pds-splitpanel.card {
       padding: 0;
     }
     [slot="left"], [slot="right"] { padding: var(--spacing-2); }
-    .splitpanel-console { 
+    .story-splitpanel-console { 
       background: #1e1e1e; 
       color: #d4d4d4;
-      & .cmd { color: #4ec9b0; }
-      & .meta { color: #6a9955; }
+      & .story-cmd { color: #4ec9b0; }
+      & .story-meta { color: #6a9955; }
     }
-    .splitpanel-stat { 
+    .story-splitpanel-stat { 
       font-size: 2.5rem; 
       font-weight: 700; 
       margin: var(--spacing-2) 0;
     }
+    /* Violations fixed */
+    .story-label-uppercase {
+      font-size: var(--font-size-xs);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .story-label-sm {
+      font-size: var(--font-size-sm);
+    }
+    .story-code-block {
+      padding: var(--spacing-3);
+      border-radius: var(--radius-md);
+      font-family: var(--font-family-mono);
+      font-size: 0.875rem;
+      overflow: auto;
+      background: var(--surface-bg-secondary);
+    }
+    .story-console {
+      padding: var(--spacing-3);
+      border-radius: var(--radius-md);
+      font-family: var(--font-family-mono);
+    }
+    .story-nav-btn {
+      justify-content: flex-start;
+    }
+    .story-activity-item {
+      padding: var(--spacing-2);
+      border-radius: var(--radius-sm);
+    }
+    .story-alert-list {
+      margin-top: var(--spacing-2);
+    }
+    .story-alert-margin {
+      margin-bottom: var(--spacing-4);
+    }
   </style>
 `;
 
@@ -54,7 +89,7 @@ export const Default = () => html`
     <div slot="left" class="stack-md">
       <div class="stack-sm">
         <div>
-          <p class="text-muted text-xs" style="text-transform: uppercase; letter-spacing: 0.08em;">Leadership Sync</p>
+          <p class="text-muted story-label-uppercase">Leadership Sync</p>
           <h3>Q4 Roadmap Planning</h3>
           <p class="text-muted">Monday, 2:00 PM • Conference Room Aurora</p>
         </div>
@@ -137,7 +172,7 @@ export const CodeEditorLayout = () => html`
     <div slot="left" class="stack-md">
       <h3>Code Editor</h3>
 
-      <pre style="padding: var(--spacing-3); border-radius: var(--radius-md); font-family: var(--font-family-mono); font-size: 0.875rem; overflow: auto; background: var(--surface-bg-secondary);"><code>function greet(name) {
+      <pre class="story-code-block"><code>function greet(name) {
   console.log('Hello, ' + name + '!');
 }
 
@@ -158,10 +193,10 @@ greet('World');</code></pre>
     <div slot="right" class="stack-md">
       <h3>Output Console</h3>
 
-      <div class="splitpanel-console stack-xs" style="padding: var(--spacing-3); border-radius: var(--radius-md); font-family: var(--font-family-mono);">
-        <div class="cmd">$ node script.js</div>
+      <div class="story-splitpanel-console stack-xs story-console">
+        <div class="story-cmd">$ node script.js</div>
         <div>Hello, World!</div>
-        <div class="meta">// Execution completed in 0.23s</div>
+        <div class="story-meta">// Execution completed in 0.23s</div>
       </div>
     </div>
   </pds-splitpanel>
@@ -176,19 +211,19 @@ export const DashboardLayout = () => html`
       <h3>Navigation</h3>
 
       <nav class="stack-sm">
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="house"></pds-icon>
           Dashboard
         </button>
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="bar-chart"></pds-icon>
           Analytics
         </button>
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="users"></pds-icon>
           Users
         </button>
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="gear"></pds-icon>
           Settings
         </button>
@@ -201,20 +236,20 @@ export const DashboardLayout = () => html`
       <div class="grid grid-auto-sm gap-md">
         <div>
           <h4>Total Users</h4>
-          <div class="splitpanel-stat text-primary">1,284</div>
-          <p class="text-muted text-sm">↑ 12% from last month</p>
+          <div class="story-splitpanel-stat text-primary">1,284</div>
+          <p class="text-muted story-label-sm">↑ 12% from last month</p>
         </div>
 
         <div>
           <h4>Revenue</h4>
-          <div class="splitpanel-stat text-secondary">$42.5K</div>
-          <p class="text-muted text-sm">↑ 8% from last month</p>
+          <div class="story-splitpanel-stat text-secondary">$42.5K</div>
+          <p class="text-muted story-label-sm">↑ 8% from last month</p>
         </div>
 
         <div>
           <h4>Active Now</h4>
-          <div class="splitpanel-stat text-accent">127</div>
-          <p class="text-muted text-sm">Current active users</p>
+          <div class="story-splitpanel-stat text-accent">127</div>
+          <p class="text-muted story-label-sm">Current active users</p>
         </div>
       </div>
 
@@ -222,13 +257,13 @@ export const DashboardLayout = () => html`
         <h3>Recent Activity</h3>
         <div class="stack-sm">
           ${Array.from({ length: 5 }, (_, i) => html`
-            <div class="flex items-center gap-md" style="padding: var(--spacing-2); border-radius: var(--radius-sm);">
+            <div class="flex items-center gap-md story-activity-item">
               <pds-icon icon="user"></pds-icon>
               <div class="grow stack-xs">
                 <strong>User ${i + 1}</strong>
-                <span class="text-muted text-sm">Completed an action</span>
+                <span class="text-muted story-label-sm">Completed an action</span>
               </div>
-              <span class="text-muted text-sm">${i + 1}h ago</span>
+              <span class="text-muted story-label-sm">${i + 1}h ago</span>
             </div>
           `)}
         </div>
@@ -249,7 +284,7 @@ export const StyledToggle = () => html`
     }
   </style>
 
-  <div class="alert alert-info" style="margin-bottom: var(--spacing-4);">
+  <div class="alert alert-info story-alert-margin">
     <div class="alert-icon">
       <pds-icon icon="info" class="icon-info" size="lg"></pds-icon>
     </div>
@@ -263,15 +298,15 @@ export const StyledToggle = () => html`
     <div slot="left" class="stack-md">
       <h3>Mobile Menu</h3>
       <nav class="stack-sm">
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="house"></pds-icon>
           Home
         </button>
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="user"></pds-icon>
           Profile
         </button>
-        <button class="btn-outline" style="justify-content: flex-start;">
+        <button class="btn-outline story-nav-btn">
           <pds-icon icon="gear"></pds-icon>
           Settings
         </button>
@@ -329,7 +364,7 @@ export const StyledSplitter = () => html`
       <div>
         <div class="alert-title">Styling the Splitter with ::part()</div>
         <p>The splitter bar can be fully customized using the <code>::part(splitter)</code> CSS selector. This allows you to style:</p>
-        <ul class="stack-xs" style="margin-top: var(--spacing-2);">
+        <ul class="stack-xs story-alert-list">
           <li><code>background-color</code> or <code>background</code> (for gradients)</li>
           <li><code>width</code> (horizontal) or <code>height</code> (vertical)</li>
           <li><code>:hover</code> state styling</li>

package/stories/components/PdsTabstrip.stories.js

@@ -20,18 +20,18 @@ if (typeof window !== 'undefined') {
 const tabstripStoryStyles = html`
   <style>
     /* Progress bar visualization - demo-specific */
-    .tabstrip-bar-track {
+    .story-tabstrip-bar-track {
       height: 8px;
       background: var(--surface-elevated);
       border-radius: var(--radius-full);
       overflow: hidden;
     }
-    .tabstrip-bar-fill {
+    .story-tabstrip-bar-fill {
       height: 100%;
       border-radius: inherit;
     }
     /* Large stat values - demo-specific typography */
-    .tabstrip-stat-value {
+    .story-tabstrip-stat-value {
       font-size: var(--font-size-4xl);
       font-weight: var(--font-weight-bold);
     }
@@ -185,8 +185,8 @@ export const Default = () => html`
                     <span>${source.label}</span>
                     <strong>${source.value}</strong>
                   </div>
-                  <div class="tabstrip-bar-track">
-                    <div class="tabstrip-bar-fill" style="width: ${source.width}; background: ${source.colorVar}"></div>
+                  <div class="story-tabstrip-bar-track">
+                    <div class="story-tabstrip-bar-fill" style="width: ${source.width}; background: ${source.colorVar}"></div>
                   </div>
                 </div>
               `
@@ -216,7 +216,7 @@ export const Default = () => html`
           <h4>General Settings</h4>
           <div class="stack-sm">
             <label>
-              <span>Product Name</span>
+              <span data-label>Product Name</span>
               <input
                 type="text"
                 value="My Awesome Product"
@@ -225,7 +225,7 @@ export const Default = () => html`
             </label>
 
             <label>
-              <span>Product Category</span>
+              <span data-label>Product Category</span>
               <select>
                 ${tabstripCategories.map(
                   (category) => html`<option>${category}</option>`

package/stories/enhancements/Accordion.stories.js

@@ -220,11 +220,11 @@ export const SingleExpandAccordion = () => html`
         <div class="card stack-md" role="region" aria-labelledby="set1">
           <form method="post" action="#">
             <label>
-              <span>Display Name</span>
+              <span data-label>Display Name</span>
               <input type="text" value="John Doe" placeholder="Enter your display name" />
             </label>
             <label>
-              <span>Email</span>
+              <span data-label>Email</span>
               <div class="input-icon">
                 <pds-icon icon="envelope"></pds-icon>
                 <input type="email" value="john@example.com" placeholder="your.email@example.com" />