@pure-ds/storybook 0.4.16 → 0.4.19

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

@@ -23,7 +23,7 @@ export const presets = {
       darkMode: {
         background: "#0c1821",
         secondary: "#94a3b8",
-        primary: "#0891b2", // Tailwind cyan-600 as base - generates darker 600 shade
+        primary: "#0891b2", // cyan-600 as base - generates darker 600 shade
       },
     },
     typography: {
@@ -55,7 +55,7 @@ export const presets = {
       darkMode: {
         background: "#18181b",
         secondary: "#71717a",
-        primary: "#3b82f6", // Tailwind blue-500 - optimized mid-tone
+        primary: "#3b82f6", // blue-500 - optimized mid-tone
       },
     },
     typography: {
@@ -88,7 +88,7 @@ export const presets = {
       darkMode: {
         background: "#0f0a1a",
         secondary: "#818cf8",
-        primary: "#8b5cf6", // Tailwind violet-500 - optimized mid-tone
+        primary: "#8b5cf6", // violet-500 - optimized mid-tone
       },
     },
     typography: {
@@ -122,7 +122,7 @@ export const presets = {
       darkMode: {
         background: "#0a0a0a",
         secondary: "#a3a3a3",
-        primary: "#737373", // Tailwind gray-500 - optimized mid-tone
+        primary: "#737373", // gray-500 - optimized mid-tone
       },
     },
     typography: {
@@ -159,7 +159,7 @@ export const presets = {
         background: "#1a0f0a",
         secondary: "#c9a482",
         // Ensure sufficient contrast for primary-filled components with white text in dark mode
-        primary: "#f97316", // Tailwind orange-500 - optimized mid-tone
+        primary: "#f97316", // orange-500 - optimized mid-tone
       },
     },
     typography: {
@@ -190,7 +190,7 @@ export const presets = {
         background: "#1a0a1f",
         secondary: "#c4b5fd",
         // Deepen primary for dark mode to meet AA contrast with white text
-        primary: "#d946ef", // Tailwind fuchsia-500 - optimized mid-tone
+        primary: "#d946ef", // fuchsia-500 - optimized mid-tone
       },
     },
     typography: {
@@ -224,7 +224,7 @@ export const presets = {
       darkMode: {
         background: "#0a1410",
         secondary: "#a8a29e",
-        primary: "#10b981", // Tailwind emerald-500 - optimized mid-tone
+        primary: "#10b981", // emerald-500 - optimized mid-tone
       },
     },
     typography: {
@@ -254,7 +254,7 @@ export const presets = {
       darkMode: {
         background: "#1b0808",
         secondary: "#d1d5db",
-        primary: "#ef4444", // Tailwind red-500 - optimized mid-tone
+        primary: "#ef4444", // red-500 - optimized mid-tone
       },
     },
     typography: {
@@ -288,7 +288,7 @@ export const presets = {
         background: "#12100e",
         secondary: "#d1d5db",
         // Deepen primary in dark to keep white text AA-compliant
-        primary: "#f59e0b", // Tailwind amber-500 - optimized mid-tone
+        primary: "#f59e0b", // amber-500 - optimized mid-tone
       },
     },
     typography: {
@@ -323,7 +323,7 @@ export const presets = {
         // has strong contrast against the very-dark surface. The generator
         // will still pick appropriate darker fill shades for buttons so
         // white-on-fill contrast is preserved.
-        primary: "#9ca3af", // Tailwind gray-400 - optimized mid-tone
+        primary: "#9ca3af", // gray-400 - optimized mid-tone
       },
     },
     typography: {
@@ -361,7 +361,7 @@ export const presets = {
       darkMode: {
         background: "#1a1016",
         secondary: "#c4b5fd",
-        primary: "#ec4899", // Tailwind pink-500 - optimized mid-tone
+        primary: "#ec4899", // pink-500 - optimized mid-tone
       },
     },
     typography: {
@@ -401,7 +401,7 @@ export const presets = {
         // - outline/link contrast on dark surface, and
         // - sufficient button fill contrast against white text.
         // Cyan signal aligns with preset accent and produces high-contrast dark fills.
-        primary: "#06b6d4", // Tailwind cyan-500 - optimized mid-tone
+        primary: "#06b6d4", // cyan-500 - optimized mid-tone
       },
     },
     typography: {
@@ -437,7 +437,7 @@ export const presets = {
       darkMode: {
         background: "#0d130a",
         secondary: "#a3a3a3",
-        primary: "#84cc16", // Tailwind lime-500 - optimized mid-tone
+        primary: "#84cc16", // lime-500 - optimized mid-tone
       },
     },
     typography: {
@@ -845,7 +845,7 @@ presets.default = {
     darkMode: {
       background: "#16171a", // Custom dark mode background (cool blue-gray)
       secondary: "#8b9199", // Optional: custom dark grays (uses light secondary if omitted)
-      primary: "#06b6d4", // Tailwind cyan-500 - optimized mid-tone
+      primary: "#06b6d4", // cyan-500 - optimized mid-tone
       // accent: null,       // Optional: override accent color for dark mode
     },
 

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

@@ -1,4 +1,4 @@
-import { registry as pdsRegistry } from "./pds-registry.js";
+import { registry as pdsRegistry } from "./pds-registry.js";
 
 /**
  * Generator - A JS-config-first design system
@@ -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);
   }
 }
 
@@ -1811,10 +1810,8 @@ form {
 }
 
 fieldset {
-  margin: 0;
-  padding: var(--spacing-5);
+  margin: 0;  
   width: 100%;
-  background-color: color-mix(in oklab, var(--color-surface-subtle) 50%, transparent 50%);
   
   /* Unified styling for radio groups and checkbox groups */
   &[role="radiogroup"],
@@ -3045,15 +3042,24 @@ dialog[open]::backdrop {
   }
 }
 
+/* Dialog - constrain max height to 90vh, support custom maxHeight via CSS variable */
+dialog {
+  max-height: var(--dialog-max-height, 90vh);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* Prevent dialog itself from scrolling - let .dialog-body handle it */
+}
+
 /* Form structure - use flexbox instead of contents */
 dialog form {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex: 1;
+  min-height: 0; /* Allow flex child to shrink */
   margin: 0;
 }
 
-/* Dialog fields - to open pds-jsonform subforms */
+/* Dialog fields - to open pds-form subforms */
 .dialog-field {
     margin-top: var(--spacing-3);
 }
@@ -3108,7 +3114,8 @@ dialog {
   article,
   form > article,
   .dialog-body {
-    flex: 1;
+    flex: 1 1 auto;
+    min-height: 0; /* Critical: allow flex child to shrink and scroll */
     padding: var(--spacing-3) var(--spacing-6);
     overflow-y: auto;
     overflow-x: hidden;
@@ -3134,9 +3141,17 @@ dialog.dialog-lg { max-width: min(800px, calc(100vw - var(--spacing-8))); }
 dialog.dialog-xl { max-width: min(1200px, calc(100vw - var(--spacing-8))); }
 dialog.dialog-full { max-width: calc(100vw - var(--spacing-8)); max-height: calc(100vh - var(--spacing-8)); }
 
-/* Mobile responsiveness */
+/* Mobile responsiveness - maximize on mobile */
 @media (max-width: ${breakpoints.sm - 1}px) {
-  dialog { max-width: 100vw; max-height: 100vh; border-radius: 0; top: 50%; transform: translateY(-50%); margin: 0; }
+  dialog { 
+    max-width: 100vw; 
+    max-height: 100vh; 
+    --dialog-max-height: 100vh; /* Override custom maxHeight on mobile */
+    border-radius: 0; 
+    top: 50%; 
+    transform: translateY(-50%); 
+    margin: 0; 
+  }
   dialog header, dialog form > header, dialog article, dialog form > article, dialog footer, dialog form > footer { padding: var(--spacing-4); }
 }
 
@@ -4214,9 +4229,6 @@ nav[data-dropdown] {
 
   :where(fieldset) {
     border: none;
-    padding: var(--spacing-4);
-    margin: 0 0 var(--spacing-4) 0;
-    background-color: var(--color-surface-subtle);
   }
 
   :where(legend) {
@@ -4447,40 +4459,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 +4492,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

@@ -1,4 +1,4 @@
-// Pure Design System Ontology (PDS)
+// Pure Design System Ontology (PDS)
 // This file is the single source-of-truth metadata for primitives, components, tokens, themes and enhancements.
 // Used by PDS.query() for searching and correlating concepts.
 
@@ -223,10 +223,10 @@ export const ontology = {
       category: "feedback"
     },
     { 
-      id: "pds-jsonform", 
+      id: "pds-form", 
       name: "JSON Form", 
       description: "Auto-generated form from JSON Schema",
-      selectors: ["pds-jsonform"],
+      selectors: ["pds-form"],
       tags: ["form", "schema", "auto-generate"],
       category: "form"
     },
@@ -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: {
@@ -481,7 +481,7 @@ export const ontology = {
     form: {
       description: "Form inputs and controls",
       primitives: ["button", "fieldset", "label-field", "form"],
-      components: ["pds-upload", "pds-jsonform", "pds-richtext", "pds-calendar"]
+      components: ["pds-upload", "pds-form", "pds-richtext", "pds-calendar"]
     },
     layout: {
       description: "Page structure and content arrangement",
@@ -541,7 +541,7 @@ export const ontology = {
     content: ["text", "typography", "body", "article"],
     
     // Forms & Inputs
-    form: ["input", "field", "label", "button", "fieldset", "pds-jsonform", "pds-upload", "pds-richtext", "pds-calendar", "required", "validation", "submit"],
+    form: ["input", "field", "label", "button", "fieldset", "pds-form", "pds-upload", "pds-richtext", "pds-calendar", "required", "validation", "submit"],
     input: ["form", "field", "text", "label", "required", "validation"],
     field: ["form", "input", "label", "required"],
     button: ["btn", "interactive", "action", "submit", "form", "btn-primary", "btn-secondary", "btn-working"],

package/src/js/pds.d.ts

@@ -217,7 +217,7 @@ export class PDS extends EventTarget {
 
 export { PDS as default };
 
-// ===== pds-jsonform Types =====
+// ===== pds-form Types =====
 
 export interface JsonFormOptions {
   widgets?: {
@@ -358,7 +358,7 @@ export interface JsonFormEventMap {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'pds-jsonform': SchemaForm;
+    'pds-form': SchemaForm;
   }
 }
 

package/stories/GettingStarted.stories.js

@@ -7,6 +7,9 @@ export default {
   title: 'About PDS/Getting Started',
   parameters: {
     layout: 'fullscreen',
+    pds: {
+      tags: ['getting started', 'introduction', 'cli', 'npm', 'cdn', 'overview', 'guide', 'themes', 'dark mode', 'light mode']
+    },
     docs: {
       description: {
         component: 'Complete beginner guide: installation, philosophy, configuration, enhancements, components, and console API'

package/stories/WhatIsPDS.stories.js

@@ -7,6 +7,9 @@ export default {
   title: 'About PDS/What Is PDS',
   parameters: {
     layout: 'fullscreen',
+    pds: {
+      tags: ['what is pds', 'introduction', 'overview', 'design system', 'philosophy', 'progressive enhancements', 'web components', 'adoptedt stylesheets']
+    },
     docs: {
       description: {
         component: 'Learn about Pure Design System and its revolutionary approach to design systems'

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>