@pure-ds/storybook 0.4.16 → 0.4.17

package/src/js/pds-core/pds-generator.js

@@ -1149,6 +1149,8 @@ export class Generator {
       mesh,
     ].join("");
 
+    // Dark mode selector only - .surface-inverse is handled separately in utilities
+    // to avoid inheriting the full dark palette (which would override --color-surface-inverse)
     return `html[data-theme="dark"] {\n${body}}\n`;
   }
 
@@ -1589,12 +1591,13 @@ html[data-theme="dark"] .liquid-glass {
 
 :where(blockquote) {
   margin: 0 0 var(--spacing-4) 0;
-  padding: var(--spacing-4) var(--spacing-6);
+  padding: var(--spacing-6) var(--spacing-8);
   border-left: 4px solid var(--color-primary-500);
-  background-color: var(--color-surface-subtle);
-  border-radius: var(--radius-md);
-  font-style: italic;
-  color: var(--color-text-secondary);
+  background-color: var(--color-surface-elevated);
+  border-radius: var(--radius-none);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-relaxed);
+  color: var(--color-text-primary);
   
   :where(p):last-child {
     margin-bottom: 0;
@@ -1602,14 +1605,10 @@ html[data-theme="dark"] .liquid-glass {
   
   :where(cite) {
     display: block;
-    margin-top: var(--spacing-2);
-    font-size: var(--font-size-sm);
+    margin-top: var(--spacing-4);
+    font-size: var(--font-size-base);
     font-style: normal;
-    color: var(--color-text-tertiary);
-    
-    &::before {
-      content: "— ";
-    }
+    color: var(--color-primary-500);
   }
 }
 
@@ -4447,40 +4446,27 @@ ${this.#generateBorderGradientUtilities()}
 }
 
 
-/* Inverse surface (dark) using PDS tokens; text/icons inherit currentColor */
+/* 
+ * SURFACE-INVERSE: Local Theme Context Flip
+ * 
+ * We can't simply add .surface-inverse to the dark mode selector because that would
+ * also apply the dark color PALETTE (grays, surfaces, etc.), which would override
+ * --color-surface-inverse itself. Instead, we duplicate only the SEMANTIC tokens.
+ * 
+ * Light theme .surface-inverse → dark semantic tokens
+ * Dark theme .surface-inverse  → light semantic tokens (flip back)
+ */
+
+/* Surface-inverse visual properties (shared, uses smart surface tokens) */
 .surface-inverse {
   background-color: var(--color-surface-inverse);
-  /* Ensure foregrounds inside use the correct smart-surface tokens */
   color: var(--surface-inverse-text);
-  --color-text-primary: var(--surface-inverse-text);
-  --color-text-secondary: var(--surface-inverse-text-secondary);
-  --color-text-muted: var(--surface-inverse-text-muted);
-  /* Ensure code/pre and other muted surfaces have contrast on inverse */
-  --color-surface-muted: rgba(255, 255, 255, 0.08);
-  /* Optional: adjust borders/shadows if utilities/components read these */
-  --color-border: var(--surface-inverse-border);
 
   pds-icon {
     color: var(--surface-inverse-icon);
   }
   
-  /* Default and secondary buttons on inverse - semi-transparent glass effect */
-  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
-  & .btn-secondary {
-    background-color: rgba(255, 255, 255, 0.12);
-    color: var(--surface-inverse-text);
-    border-color: rgba(255, 255, 255, 0.25);
-    
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-    
-    &:active {
-      background-color: rgba(255, 255, 255, 0.28);
-    }
-  }
-  
-  /* Ensure btn-primary stays vibrant on inverse */
+  /* btn-primary stays vibrant in any context */
   & .btn-primary {
     background-color: var(--color-primary-500);
     border-color: var(--color-primary-500);
@@ -4493,6 +4479,70 @@ ${this.#generateBorderGradientUtilities()}
   }
 }
 
+/* Light-mode inverse: apply dark semantic tokens */
+html:not([data-theme="dark"]) .surface-inverse {
+  --color-text-primary: var(--color-gray-100);
+  --color-text-secondary: var(--color-gray-300);
+  --color-text-muted: var(--color-gray-400);
+  --color-border: var(--color-gray-700);
+  --color-input-bg: var(--color-gray-800);
+  --color-input-disabled-bg: var(--color-gray-900);
+  --color-input-disabled-text: var(--color-gray-600);
+  --color-code-bg: var(--color-gray-800);
+  --color-surface-muted: rgba(255, 255, 255, 0.08);
+  
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & .btn-secondary {
+    background-color: rgba(255, 255, 255, 0.12);
+    color: var(--surface-inverse-text);
+    border-color: rgba(255, 255, 255, 0.25);
+    
+    &:hover { background-color: rgba(255, 255, 255, 0.2); }
+    &:active { background-color: rgba(255, 255, 255, 0.28); }
+  }
+  
+  & select {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: var(--surface-inverse-text);
+  }
+  
+  & a:not([class*="btn"]) {
+    color: var(--color-primary-300, #7dd3fc);
+  }
+}
+
+/* Dark-mode inverse: flip back to light semantic tokens */
+html[data-theme="dark"] .surface-inverse {
+  --color-text-primary: var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-muted: var(--color-gray-600);
+  --color-border: var(--color-gray-300);
+  --color-input-bg: var(--color-surface-base);
+  --color-input-disabled-bg: var(--color-gray-50);
+  --color-input-disabled-text: var(--color-gray-500);
+  --color-code-bg: var(--color-gray-100);
+  --color-surface-muted: var(--color-gray-100);
+  
+  & button:not(.btn-primary):not(.btn-outline):not(.btn-danger):not(.btn-success):not(.btn-warning),
+  & .btn-secondary {
+    background-color: rgba(0, 0, 0, 0.06);
+    color: var(--surface-inverse-text);
+    border-color: rgba(0, 0, 0, 0.15);
+    
+    &:hover { background-color: rgba(0, 0, 0, 0.1); }
+    &:active { background-color: rgba(0, 0, 0, 0.15); }
+  }
+  
+  & select {
+    background-color: #ffffff;
+    color: var(--surface-inverse-text);
+  }
+  
+  & a:not([class*="btn"]) {
+    color: var(--color-primary-600, #0284c7);
+  }
+}
+
 /* Shadow utilities */
 .shadow-sm {
   box-shadow: var(--shadow-sm);

package/src/js/pds-core/pds-ontology.js

@@ -380,7 +380,7 @@ export const ontology = {
   utilities: {
     text: {
       alignment: [".text-left", ".text-center", ".text-right"],
-      color: [".text-muted", ".text-primary", ".text-success", ".text-warning", ".text-danger", ".text-info"],
+      color: [".text-muted"],
       overflow: [".truncate"]
     },
     backdrop: {

package/stories/components/PdsCalendar.stories.js

@@ -173,7 +173,7 @@ export const EventTypes = {
     }, 0);
     
     return html`
-      <div class="flex flex-col gap-lg">
+      <div class="stack-lg">
         <pds-calendar id="event-types-calendar"></pds-calendar>
         
         <div class="card">
@@ -234,7 +234,7 @@ export const DynamicEvents = {
     }, 0);
     
     return html`
-      <div class="flex flex-col gap-lg">
+      <div class="stack-lg">
         <div class="card">
           <h3>Add Events Dynamically</h3>
           <div class="flex gap-md items-end">

package/stories/components/PdsDrawer.stories.js

@@ -61,7 +61,7 @@ export const Default = {
           <h2>Drawer from ${args.position}</h2>
         </div>
         
-        <div slot="drawer-content" class="flex flex-col gap-md">
+        <div slot="drawer-content" class="stack-md">
           <article class="card">
             <h4>About this Drawer</h4>
             <p>This drawer slides from the <strong>${args.position}</strong> edge of the screen. Drawers are perfect for:</p>
@@ -75,7 +75,7 @@ export const Default = {
 
           <article class="card surface-elevated">
             <h4>Quick Actions</h4>
-            <nav class="flex flex-col gap-sm">
+            <nav class="stack-sm">
               <button class="btn-outline">
                 <pds-icon icon="download"></pds-icon>
                 <span>Download Report</span>
@@ -145,12 +145,12 @@ export const AllPositions = () => {
         <pds-icon icon="list" size="lg"></pds-icon>
         <h2>Main Navigation</h2>
       </div>
-      <div slot="drawer-content" class="flex flex-col gap-md">
+      <div slot="drawer-content" class="stack-md">
         <p>
           <strong>Use case:</strong> Primary navigation menu for web applications
         </p>
         
-        <nav class="flex flex-col gap-sm">
+        <nav class="stack-sm">
           <button class="btn-outline">
             <pds-icon icon="house"></pds-icon>
             <span>Dashboard</span>
@@ -194,7 +194,7 @@ export const AllPositions = () => {
           <pds-icon icon="x" label="Close"></pds-icon>
         </button>
       </div>
-      <div slot="drawer-content" class="flex flex-col gap-md">
+      <div slot="drawer-content" class="stack-md">
         <p>
           <strong>Use case:</strong> Filters, detail panels, or property inspectors
         </p>
@@ -223,7 +223,7 @@ export const AllPositions = () => {
         
         <article class="card surface-elevated">
           <label>
-            <span>Sort By</span>
+            <span data-label>Sort By</span>
             <select>
               <option>Date Created (Newest)</option>
               <option>Date Created (Oldest)</option>
@@ -253,12 +253,12 @@ export const AllPositions = () => {
         <h2>Notifications</h2>
         <span class="badge badge-primary">3 new</span>
       </div>
-      <div slot="drawer-content" class="flex flex-col gap-md">
+      <div slot="drawer-content" class="stack-md">
         <p>
           <strong>Use case:</strong> Notification center or announcement banners
         </p>
         
-        <div class="flex flex-col gap-md">
+        <div class="stack-md">
           <article class="card surface-elevated">
             <div class="flex gap-md items-start">
               <div class="badge badge-success">
@@ -323,7 +323,7 @@ export const AllPositions = () => {
         <pds-icon icon="toolbox" size="lg"></pds-icon>
         <h2>Quick Actions</h2>
       </div>
-      <div slot="drawer-content" class="flex flex-col gap-md">
+      <div slot="drawer-content" class="stack-md">
         <p>
           <strong>Use case:</strong> Command palette, quick actions, or contextual toolbars
         </p>
@@ -390,7 +390,7 @@ export const NavigationDrawer = () => {
         <h2>Navigation</h2>
       </div>
       
-      <nav slot="drawer-content" class="flex flex-col gap-sm">
+      <nav slot="drawer-content" class="stack-sm">
         <button class="btn-outline">
           <pds-icon icon="house"></pds-icon>
           <span>Home</span>
@@ -458,19 +458,19 @@ export const SettingsDrawer = () => {
         <h2>Settings</h2>
       </div>
       
-      <div slot="drawer-content" class="flex flex-col gap-md">
+      <div slot="drawer-content" class="stack-md">
         <article class="card">
           <fieldset>
             <legend>Profile Settings</legend>
             <label>
-              <span>Username</span>
+              <span data-label>Username</span>
               <div class="input-icon">
                 <pds-icon icon="user"></pds-icon>
                 <input type="text" value="john_doe" placeholder="Enter your username">
               </div>
             </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">
@@ -555,7 +555,7 @@ export const DetailDrawer = () => {
         </button>
       </div>
       
-      <div slot="drawer-content" class="flex flex-col gap-md">
+      <div slot="drawer-content" class="stack-md">
         <div class="card border-gradient flex items-center justify-center">
           <pds-icon icon="image" size="xl"></pds-icon>
         </div>
@@ -579,7 +579,7 @@ export const DetailDrawer = () => {
 
         <article class="card surface-elevated">
           <h4>Recent Activity</h4>
-          <div class="flex flex-col gap-md">
+          <div class="stack-md">
             <div class="flex gap-sm">
               <pds-icon icon="check" class="icon-primary"></pds-icon>
               <div>

package/stories/components/PdsJsonform.stories.js

@@ -1927,3 +1927,81 @@ export const RootThreeColumnGrid = {
     `;
   }
 };
+
+export const EnumWithEnumNames = {
+  name: 'Enum with enumNames',
+  parameters: {
+    docs: {
+      description: {
+        story: `Use \`enumNames\` to provide human-friendly display labels for enum values.
+
+This is useful when you want to store technical values (like language codes or IDs) while showing user-friendly labels.
+
+\`\`\`javascript
+const schema = {
+  properties: {
+    language: {
+      type: 'string',
+      title: 'Language',
+      enum: ['en', 'es', 'fr', 'de', 'zh', 'ja'],           // Values stored
+      enumNames: ['English', 'Spanish', 'French', 'German', 'Chinese', 'Japanese']  // Labels shown
+    }
+  }
+};
+\`\`\`
+
+The \`enumNames\` array must match the length and order of the \`enum\` array. Works with select dropdowns, radio buttons, and checkbox groups.`
+      }
+    }
+  },
+  render: () => {
+    const schema = {
+      type: 'object',
+      title: 'Preferences',
+      properties: {
+        language: {
+          type: 'string',
+          title: 'Language',
+          enum: ['en', 'es', 'fr', 'de', 'zh', 'ja'],
+          enumNames: ['English', 'Spanish', 'French', 'German', 'Chinese', 'Japanese'],
+          default: 'en'
+        },
+        country: {
+          type: 'string',
+          title: 'Country',
+          enum: ['US', 'GB', 'CA', 'AU', 'DE', 'FR'],
+          enumNames: ['United States', 'United Kingdom', 'Canada', 'Australia', 'Germany', 'France']
+        },
+        priority: {
+          type: 'string',
+          title: 'Priority Level',
+          enum: ['p1', 'p2', 'p3', 'p4'],
+          enumNames: ['🔴 Critical', '🟠 High', '🟡 Medium', '🟢 Low'],
+          default: 'p3'
+        },
+        interests: {
+          type: 'array',
+          title: 'Interests (checkbox group)',
+          items: {
+            type: 'string',
+            enum: ['dev', 'design', 'pm', 'qa', 'devops'],
+            enumNames: ['Development', 'Design', 'Project Management', 'Quality Assurance', 'DevOps']
+          },
+          uniqueItems: true
+        }
+      }
+    };
+
+    const uiSchema = {
+      '/priority': { 'ui:widget': 'radio' }
+    };
+
+    return html`
+      <pds-jsonform
+        .jsonSchema=${schema}
+        .uiSchema=${uiSchema}
+        @pw:submit=${(e) => toastFormData(e.detail)}
+      ></pds-jsonform>
+    `;
+  }
+};

package/stories/components/PdsRichtext.stories.js

@@ -18,20 +18,7 @@ if (typeof window !== 'undefined') {
 
 // Minimal story-specific styles - only for demo-specific visuals not covered by PDS
 const richtextStoryStyles = html`
-  <style>
-    /* Avatar circle - demo-specific */
-    .richtext-avatar {
-      width: 3rem;
-      height: 3rem;
-      background: var(--color-primary);
-      border-radius: var(--radius-full);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-primary-contrast, #fff);
-      flex-shrink: 0;
-    }
-  </style>
+ 
 `;
 
 const bindToastForms = (selector) => {
@@ -125,7 +112,7 @@ export const InForm = () => {
     ${richtextStoryStyles}
     <form class="richtext-form max-w-md stack-md">
       <label>
-        <span>Blog Post Content</span>
+        <span data-label>Blog Post Content</span>
         <pds-richtext 
           name="blog-content"
           value="<h3>My Blog Post</h3><p>Write your content here...</p>"
@@ -214,7 +201,7 @@ export const CommentEditor = () => {
     <div class="max-w-md stack-md">
       <article class="card surface-elevated">
         <div class="flex gap-sm">
-          <div class="richtext-avatar">
+          <div class="story-richtext-avatar">
             <pds-icon icon="user"></pds-icon>
           </div>
           <div class="grow stack-sm">
@@ -259,7 +246,7 @@ export const MarkdownForm = () => {
     ${richtextStoryStyles}
     <form class="richtext-markdown-form max-w-md stack-md">
       <label>
-        <span>Release Notes (Markdown)</span>
+        <span data-label>Release Notes (Markdown)</span>
         <pds-richtext
           name="release-notes"
           format="markdown"