@pure-ds/storybook 0.4.16 → 0.4.17

package/stories/enhancements/Dropdowns.stories.js

@@ -1,10 +1,13 @@
 import { html } from "lit";
 import { enhancementHeader } from './_enhancement-header.js';
 
-// Demo-specific styles (legitimate custom CSS for visual demos)
-const dropdownGlassDemoStyles = html`
+// Story-specific styles for dropdown demos
+const dropdownStoryStyles = html`
   <style>
-    .dropdown-story-glass-demo {
+    .story-dropdown-container {
+      height: 260px;
+    }
+    .story-glass-demo {
       position: relative;
       display: flex;
       justify-content: center;
@@ -13,10 +16,12 @@ const dropdownGlassDemoStyles = html`
       padding: var(--spacing-8);
       border-radius: var(--radius-xl);
       overflow: hidden;
-      background-image: var(--dropdown-demo-image);
       background-size: cover;
       background-position: center;
     }
+    .story-glass-demo-travel {
+      background-image: url('https://images.unsplash.com/photo-1517832207067-4db24a2ae47c?auto=format&fit=crop&w=1200&q=80');
+    }
   </style>
 `;
 
@@ -95,11 +100,12 @@ export const WithIcons = () => html`
 `;
 
 export const DropUp = () => html`
+  ${dropdownStoryStyles}
   ${enhancementHeader('dropdown', {
     selector: '[data-mode="up"]',
     description: ' Adds `data-mode="up"` to make the dropdown menu open upwards instead of downwards.'
   })}
-  <div class="flex justify-center items-end card" style="height: 260px;">
+  <div class="flex justify-center items-end card story-dropdown-container">
     <nav data-dropdown data-mode="up">
       <button class="btn-primary">Resources</button>
       <menu>
@@ -112,12 +118,9 @@ export const DropUp = () => html`
 `;
 
 export const BackgroundImageLiquidGlass = () => html`
-  ${dropdownGlassDemoStyles}
+  ${dropdownStoryStyles}
   ${enhancementHeader('dropdown')}
-  <section
-    class="dropdown-story-glass-demo"
-    style="--dropdown-demo-image: url('https://images.unsplash.com/photo-1517832207067-4db24a2ae47c?auto=format&fit=crop&w=1200&q=80');"
-  >
+  <section class="story-glass-demo story-glass-demo-travel">
     <div class="stack-md gap-md text-center max-w-sm">
       <div class="card liquid-glass stack-md">
         <h3>Plan Your Escape</h3>

package/stories/enhancements/RangeSliders.stories.js

@@ -21,7 +21,7 @@ export const StandardFloatingBubble = () => html`
       Default behavior: A floating bubble appears when you interact with the slider.
     </small>
     <label>
-      <span>Volume</span>
+      <span data-label>Volume</span>
       <input type="range" min="0" max="100" value="50">
     </label>
   </section>
@@ -39,19 +39,19 @@ export const MultipleRanges = () => html`
     }}"
   >
     <label>
-      <span>Brightness</span>
+      <span data-label>Brightness</span>
       <input type="range" name="brightness" min="0" max="100" value="75">
     </label>
     <label>
-      <span>Contrast</span>
+      <span data-label>Contrast</span>
       <input type="range" name="contrast" min="0" max="100" value="50">
     </label>
     <label>
-      <span>Saturation</span>
+      <span data-label>Saturation</span>
       <input type="range" name="saturation" min="0" max="100" value="60">
     </label>
     <label>
-      <span>Temperature</span>
+      <span data-label>Temperature</span>
       <input type="range" name="temperature" min="-100" max="100" value="0">
     </label>
     <button type="submit" class="btn-primary">Apply Settings</button>
@@ -68,11 +68,11 @@ export const CustomSteps = () => html`
     }}"
   >
     <label>
-      <span>Opacity (10% steps)</span>
+      <span data-label>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>
+      <span data-label>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">Apply Settings</button>
@@ -148,11 +148,11 @@ export const ComparisonView = () => html`
       </header>
       <div class="stack-md">
         <label>
-          <span>Volume</span>
+          <span data-label>Volume</span>
           <input type="range" min="0" max="100" value="75">
         </label>
         <label>
-          <span>Brightness</span>
+          <span data-label>Brightness</span>
           <input type="range" min="0" max="100" value="50">
         </label>
       </div>

package/stories/enhancements/RequiredFields.stories.js

@@ -23,18 +23,18 @@ export const BasicRequired = () => html`
     }}"
   >
     <label>
-      <span>Full Name</span>
+      <span data-label>Full Name</span>
       <input type="text" required placeholder="John Doe">
     </label>
     <label>
-      <span>Email</span>
+      <span data-label>Email</span>
       <div class="input-icon">
         <pds-icon icon="envelope"></pds-icon>
         <input type="email" required placeholder="john@example.com">
       </div>
     </label>
     <label>
-      <span>Phone (optional)</span>
+      <span data-label>Phone (optional)</span>
       <div class="input-icon">
         <pds-icon icon="phone"></pds-icon>
         <input type="tel" placeholder="+1 (555) 123-4567">
@@ -55,21 +55,21 @@ export const MixedRequired = () => html`
     <fieldset>
       <legend>Account Information</legend>
       <label>
-        <span>Username</span>
+        <span data-label>Username</span>
         <div class="input-icon">
           <pds-icon icon="user"></pds-icon>
           <input type="text" required placeholder="username">
         </div>
       </label>
       <label>
-        <span>Password</span>
+        <span data-label>Password</span>
         <div class="input-icon">
           <pds-icon icon="lock"></pds-icon>
           <input type="password" required placeholder="••••••••">
         </div>
       </label>
       <label>
-        <span>Confirm Password</span>
+        <span data-label>Confirm Password</span>
         <div class="input-icon">
           <pds-icon icon="lock"></pds-icon>
           <input type="password" required placeholder="••••••••">
@@ -80,11 +80,11 @@ export const MixedRequired = () => html`
     <fieldset>
       <legend>Optional Details</legend>
       <label>
-        <span>Company</span>
+        <span data-label>Company</span>
         <input type="text" placeholder="Acme Corp">
       </label>
       <label>
-        <span>Website</span>
+        <span data-label>Website</span>
         <div class="input-icon">
           <pds-icon icon="globe"></pds-icon>
           <input type="url" placeholder="https://example.com">

package/stories/enhancements/Toggles.stories.js

@@ -1,39 +1,48 @@
-import { html } from 'lit';
-import { enhancementHeader } from './_enhancement-header.js';
+import { html } from "lit";
+import { enhancementHeader } from "./_enhancement-header.js";
 
 export default {
-  title: 'Enhancements/Toggles',
-  tags: ['toggle', 'switch', 'checkbox', 'forms', 'interaction'],
+  title: "Enhancements/Toggles",
+  tags: ["toggle", "switch", "checkbox", "forms", "interaction"],
   parameters: {
     options: {
-      selectedPanel: 'html-preview/panel'
+      selectedPanel: "html-preview/panel",
     },
     pds: {
-      tags: ['toggle', 'switch', 'checkbox', 'forms', 'interaction', 'data-toggle', 'enhancement']
-    }
-  }
+      tags: [
+        "toggle",
+        "switch",
+        "checkbox",
+        "forms",
+        "interaction",
+        "data-toggle",
+        "enhancement",
+      ],
+    },
+  },
 };
 
 export const BasicToggle = () => html`
-  ${enhancementHeader('toggle')}
+  ${enhancementHeader("toggle")}
+
   <label data-toggle>
+    <input type="checkbox" />
     <span data-label>Enable notifications</span>
-    <input type="checkbox">
   </label>
 `;
 
 export const PreChecked = () => html`
-  ${enhancementHeader('toggle')}
+  ${enhancementHeader("toggle")}
   <label data-toggle>
     <span data-label>Dark mode</span>
-    <input type="checkbox" checked>
+    <input type="checkbox" checked />
   </label>
 `;
 
 export const MultipleToggles = () => html`
-  ${enhancementHeader('toggle')}
+  ${enhancementHeader("toggle")}
   <form
-    class="flex flex-col gap-sm toggle-story-form"
+    class="stack-sm toggle-story-form"
     @submit="${(event) => {
       event.preventDefault();
       toastFormData(new FormData(event.target));
@@ -41,26 +50,28 @@ export const MultipleToggles = () => html`
   >
     <label data-toggle>
       <span data-label>Email notifications</span>
-      <input type="checkbox" name="email" checked>
+      <input type="checkbox" name="email" checked />
     </label>
     <label data-toggle>
       <span data-label>Push notifications</span>
-      <input type="checkbox" name="push">
+      <input type="checkbox" name="push" />
     </label>
     <label data-toggle>
       <span data-label>SMS notifications</span>
-      <input type="checkbox" name="sms">
+      <input type="checkbox" name="sms" />
     </label>
     <label data-toggle>
       <span data-label>Weekly digest</span>
-      <input type="checkbox" name="digest" checked>
+      <input type="checkbox" name="digest" checked />
     </label>
-    <button type="submit" class="btn-primary toggle-story-form__button">Save Preferences</button>
+    <button type="submit" class="btn-primary toggle-story-form__button">
+      Save Preferences
+    </button>
   </form>
 `;
 
 export const TogglePositions = () => html`
-  ${enhancementHeader('toggle')}
+  ${enhancementHeader("toggle")}
   <div class="toggle-story-layout">
     <div>
       <h3>Toggle Position Variations</h3>
@@ -68,30 +79,30 @@ export const TogglePositions = () => html`
         Toggle knob position adapts based on label placement in DOM
       </p>
     </div>
-    <div class="flex flex-col gap-md">
+    <div class="stack-md">
       <section class="toggle-story-section">
         <h4 class="toggle-story-subheading">Label First (Knob on Right)</h4>
-        <div class="flex flex-col gap-sm">
+        <div class="stack-sm">
           <label data-toggle>
             <span data-label>Email notifications</span>
-            <input type="checkbox" checked>
+            <input type="checkbox" checked />
           </label>
           <label data-toggle>
             <span data-label>Push notifications</span>
-            <input type="checkbox">
+            <input type="checkbox" />
           </label>
         </div>
       </section>
 
       <section class="toggle-story-section">
         <h4 class="toggle-story-subheading">Label Last (Knob on Left)</h4>
-        <div class="flex flex-col gap-sm">
+        <div class="stack-sm">
           <label data-toggle>
-            <input type="checkbox" checked>
+            <input type="checkbox" checked />
             <span data-label>Dark mode enabled</span>
           </label>
           <label data-toggle>
-            <input type="checkbox">
+            <input type="checkbox" />
             <span data-label>Auto-save changes</span>
           </label>
         </div>
@@ -101,26 +112,24 @@ export const TogglePositions = () => html`
 `;
 
 export const InCard = () => html`
-  ${enhancementHeader('toggle')}
-  <article class="card toggle-story-card">
+  ${enhancementHeader("toggle")}
+  <article class="card toggle-story-card stack-md max-w-sm">
     <div>
       <h3>Privacy Settings</h3>
-      <p class="toggle-story-muted">
-        Control your privacy preferences
-      </p>
+      <p class="toggle-story-muted">Control your privacy preferences</p>
     </div>
-    <div class="flex flex-col gap-sm">
+    <div class="stack-sm">
       <label data-toggle>
+        <input type="checkbox" checked />
         <span data-label>Profile visibility</span>
-        <input type="checkbox" checked>
       </label>
       <label data-toggle>
+        <input type="checkbox" />
         <span data-label>Show online status</span>
-        <input type="checkbox">
       </label>
       <label data-toggle>
+        <input type="checkbox" checked />
         <span data-label>Allow message requests</span>
-        <input type="checkbox" checked>
       </label>
     </div>
   </article>

package/stories/enhancements/_enhancement-header.js

@@ -25,8 +25,8 @@ export const enhancementHeader = (key, extraInfo = {}) => {
 
   return html`
     <header>
-      <h2><code>${selector}</code></h2>
-      <p class="text-muted" style="margin: 0;">${info.description} ${extraInfo.description || ''}</p>
+      <h2>${selector}</h2>
+      <p class="text-muted">${info.description} ${extraInfo.description || ''}</p>
     </header>
   `;
 };

package/stories/foundations/Colors.stories.js

@@ -177,26 +177,26 @@ const getFallbackTextColor = (color, shade) =>
 
 const colorScaleStoryStyles = html`
   <style>
-    .color-scale-story-container {
+    .story-color-scale-story-container {
       padding: var(--spacing-8);
     }
-    .color-scale-container {
+    .story-color-scale-container {
       margin-bottom: var(--spacing-8);
     }
-    .color-scale-row {
+    .story-color-scale-row {
       display: flex;
       align-items: center;
       gap: var(--spacing-4);
     }
-    .color-scale-label {
+    .story-color-scale-label {
       width: 7.5rem;
       font-weight: 600;
     }
-    .color-scale-swatches {
+    .story-color-scale-swatches {
       display: flex;
       flex: 1;
     }
-    .color-scale-swatch {
+    .story-color-scale-swatch {
       flex: 1;
       min-height: 3.75rem;
       padding: var(--spacing-4);
@@ -206,7 +206,7 @@ const colorScaleStoryStyles = html`
       position: relative;
       z-index: 1;
     }
-    .color-scale-swatch--hover {
+    .story-color-scale-swatch--hover {
       transform: translateY(-0.25rem);
       z-index: 10;
       box-shadow: var(--shadow-md);
@@ -217,7 +217,7 @@ const colorScaleStoryStyles = html`
           .map((shade) => {
             const textColor = getFallbackTextColor(color, shade);
             return `
-              .color-scale-swatch[data-color="${color}"][data-shade="${shade}"] {
+              .story-color-scale-swatch[data-color="${color}"][data-shade="${shade}"] {
                 background: var(--color-${color}-${shade});
                 color: ${textColor};
               }
@@ -238,14 +238,14 @@ const handleSwatchHoverLeave = (event) => {
 };
 
 const renderColorScale = (colorName) => html`
-  <div class="color-scale-container">
-    <div class="color-scale-row">
-      <div class="color-scale-label">${colorName}</div>
-      <div class="color-scale-swatches">
+  <div class="story-color-scale-container">
+    <div class="story-color-scale-row">
+      <div class="story-color-scale-label">${colorName}</div>
+      <div class="story-color-scale-swatches">
         ${colorShades.map(
           (shade) => html`
             <div
-              class="color-scale-swatch"
+              class="story-color-scale-swatch"
               data-color=${colorName}
               data-shade=${shade}
               style=${`color: ${chooseReadableTextColor(colorName, shade, getFallbackTextColor(colorName, shade))}`}

package/stories/foundations/HTMLDefaults.stories.js

@@ -52,7 +52,7 @@ export const Overview = {
       </article>
 
       <article class="card">
-        <h2>Why <code>:where()</code>?</h2>
+        <h2>Why :where()?</h2>
         <p>
           All semantic element styles use the <code>:where()</code> pseudo-class, which has 
           <strong>zero specificity</strong>. This means:
@@ -246,11 +246,11 @@ export const TextElements = {
 
       <article class="card">
         <h3><code>&lt;blockquote&gt;</code></h3>
-        <p>Styled with a left border, subtle background, and optional citation.</p>
+        <p>Styled with a left border, elevated surface, and optional citation that matches the border color.</p>
         
         <blockquote>
-          <p>The browser is the framework. Every line of JavaScript you write is technical debt against the platform itself.</p>
-          <cite>Pure Web Manifesto</cite>
+          <p>The most important investment you can make is not in stocks, bonds, or real estate. The most important investment is in yourself—your skills, your knowledge, and your ability to adapt to changing market conditions. This has never been more relevant than in today's rapidly evolving financial landscape.</p>
+          <cite>Warren Buffett, CEO, Berkshire Hathaway</cite>
         </blockquote>
         
         <div class="code-blockquote"></div>