@pure-ds/core 0.4.16 → 0.4.18

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);
   }
 }
 
@@ -3045,11 +3044,20 @@ 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;
 }
 
@@ -3108,7 +3116,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 +3143,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); }
 }
 
@@ -4447,40 +4464,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 +4497,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: {