@pure-ds/core 0.4.15 → 0.4.17

package/public/assets/pds/components/pds-calendar.js

@@ -831,5 +831,5 @@ button.btn-xs {
       return html.toHTML();
     }
   }
-}
+
 customElements.define("pds-calendar", PdsCalendar);

package/public/assets/pds/custom-elements.json

@@ -39,12 +39,64 @@
         {
           "kind": "class",
           "description": "",
-          "name": "anonymous_0",
+          "name": "PdsCalendar",
+          "cssProperties": [
+            {
+              "description": "Calendar background color",
+              "name": "--surface-bg"
+            },
+            {
+              "description": "Border color for calendar elements",
+              "name": "--surface-border"
+            },
+            {
+              "description": "Secondary text color",
+              "name": "--surface-text-secondary"
+            },
+            {
+              "description": "Primary color for events and highlights",
+              "name": "--color-primary-500"
+            },
+            {
+              "description": "Warning event color",
+              "name": "--color-warning-500"
+            },
+            {
+              "description": "Danger event color",
+              "name": "--color-danger-500"
+            },
+            {
+              "description": "Info event color",
+              "name": "--color-info-500"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main container for the calendar",
+              "name": "calendar-container"
+            },
+            {
+              "description": "The header containing month name and navigation",
+              "name": "calendar-header"
+            },
+            {
+              "description": "The grid container for the calendar days",
+              "name": "calendar"
+            },
+            {
+              "description": "Individual day cells",
+              "name": "day"
+            },
+            {
+              "description": "Event items within days",
+              "name": "task"
+            }
+          ],
           "members": [
             {
               "kind": "field",
               "name": "date",
-              "description": "Gets the current date",
+              "description": "Gets or sets the current date being displayed",
               "parameters": [
                 {
                   "description": "Date string or Date object",
@@ -58,6 +110,9 @@
                 "type": {
                   "text": "Date"
                 }
+              },
+              "type": {
+                "text": "Date"
               }
             },
             {
@@ -78,11 +133,19 @@
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "description": "Dispatched after the calendar month is rendered with event fill capability",
+              "name": "pds-calendar#month-rendered"
             }
           ],
           "attributes": [
             {
-              "name": "date"
+              "name": "date",
+              "type": {
+                "text": "String"
+              },
+              "description": "The date to display (defaults to current date). Accepts any valid date string"
             }
           ],
           "superclass": {
@@ -105,7 +168,7 @@
           "kind": "custom-element-definition",
           "name": "pds-calendar",
           "declaration": {
-            "name": "anonymous_0",
+            "name": "PdsCalendar",
             "module": "public/assets/pds/components/pds-calendar.js"
           }
         }
@@ -118,7 +181,61 @@
         {
           "kind": "class",
           "description": "",
-          "name": "anonymous_0",
+          "name": "PdsDrawer",
+          "cssProperties": [
+            {
+              "description": "Animation duration (default: var(--transition-normal))",
+              "name": "--drawer-duration"
+            },
+            {
+              "description": "Animation easing function (default: var(--easing-emphasized))",
+              "name": "--drawer-easing"
+            },
+            {
+              "description": "Maximum height when position is top/bottom (default: 70vh)",
+              "name": "--drawer-max-height"
+            },
+            {
+              "description": "Minimum height when position is top/bottom (default: auto)",
+              "name": "--drawer-min-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The semi-transparent backdrop overlay",
+              "name": "backdrop"
+            },
+            {
+              "description": "The drawer panel container",
+              "name": "panel"
+            },
+            {
+              "description": "The drawer header section",
+              "name": "header"
+            },
+            {
+              "description": "The close button",
+              "name": "close-button"
+            },
+            {
+              "description": "The drag handle indicator",
+              "name": "grab-handle"
+            },
+            {
+              "description": "The drawer content section",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Header content for the drawer",
+              "name": "drawer-header"
+            },
+            {
+              "description": "Main content of the drawer",
+              "name": "drawer-content"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -310,6 +427,12 @@
               "default": "false"
             }
           ],
+          "events": [
+            {
+              "description": "Fired when the drawer opens or closes",
+              "name": "toggle"
+            }
+          ],
           "attributes": [
             {
               "name": "open",
@@ -368,7 +491,7 @@
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "pds-calendar",
+          "tagName": "pds-drawer",
           "customElement": true
         }
       ],
@@ -377,7 +500,7 @@
           "kind": "custom-element-definition",
           "name": "pds-drawer",
           "declaration": {
-            "name": "anonymous_0",
+            "name": "PdsDrawer",
             "module": "public/assets/pds/components/pds-drawer.js"
           }
         }
@@ -404,6 +527,18 @@
               "static": true,
               "default": "new Map()"
             },
+            {
+              "kind": "field",
+              "name": "externalIconCache",
+              "static": true,
+              "default": "new Map()"
+            },
+            {
+              "kind": "field",
+              "name": "externalIconPromises",
+              "static": true,
+              "default": "new Map()"
+            },
             {
               "kind": "field",
               "name": "instances",
@@ -421,6 +556,26 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "fetchExternalIcon",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "description": "The icon name (without .svg extension)",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Fetch an external SVG icon and cache it",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "ensureInlineSprite",
@@ -1174,6 +1329,14 @@
             {
               "description": "The scrollable container element",
               "name": "viewport"
+            },
+            {
+              "description": "The previous/left scroll navigation button",
+              "name": "prev"
+            },
+            {
+              "description": "The next/right scroll navigation button",
+              "name": "next"
             }
           ],
           "slots": [
@@ -1278,23 +1441,89 @@
         {
           "kind": "class",
           "description": "",
-          "name": "anonymous_0",
+          "name": "PdsSplitpanel",
+          "cssProperties": [
+            {
+              "description": "Width of the left panel in horizontal layout.",
+              "name": "--left-width"
+            },
+            {
+              "description": "Color of the splitter bar.",
+              "name": "--color-border"
+            },
+            {
+              "description": "Background color of the left panel in mobile view.",
+              "name": "--color-surface-base"
+            },
+            {
+              "description": "Transition duration for the mobile panel animation.",
+              "name": "--transition-fast"
+            },
+            {
+              "description": "Positioning spacing for the mobile toggle button.",
+              "name": "--spacing-4"
+            },
+            {
+              "description": "Padding for the mobile toggle button.",
+              "name": "--spacing-1"
+            },
+            {
+              "description": "Padding for the mobile toggle button.",
+              "name": "--spacing-2"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The mobile toggle button.",
+              "name": "toggle"
+            },
+            {
+              "description": "The draggable splitter bar between panels.",
+              "name": "splitter"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content for the left (or top) panel.",
+              "name": "left"
+            },
+            {
+              "description": "Content for the right (or bottom) panel.",
+              "name": "right"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "layout"
+              "name": "layout",
+              "type": {
+                "text": "String"
+              },
+              "description": "Gets or sets the layout direction."
             },
             {
               "kind": "field",
-              "name": "defaultSplit"
+              "name": "defaultSplit",
+              "type": {
+                "text": "String"
+              },
+              "description": "Gets or sets the default split size."
             },
             {
               "kind": "field",
-              "name": "breakpoint"
+              "name": "breakpoint",
+              "type": {
+                "text": "Number"
+              },
+              "description": "Gets or sets the mobile breakpoint."
             },
             {
               "kind": "field",
-              "name": "open"
+              "name": "open",
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Gets or sets the open state of the mobile panel."
             },
             {
               "kind": "method",
@@ -1396,22 +1625,38 @@
           ],
           "attributes": [
             {
-              "name": "layout"
+              "name": "layout",
+              "type": {
+                "text": "String"
+              },
+              "description": "The layout direction of the panels. Can be \"horizontal\" or \"vertical\". Defaults to \"horizontal\"."
             },
             {
-              "name": "defaultsplit"
+              "name": "defaultsplit",
+              "type": {
+                "text": "String"
+              },
+              "description": "The initial size of the primary (left/top) panel. Defaults to \"450px\"."
             },
             {
-              "name": "breakpoint"
+              "name": "breakpoint",
+              "type": {
+                "text": "Number"
+              },
+              "description": "The viewport width in pixels below which the component switches to mobile view. Defaults to 1024."
             },
             {
-              "name": "open"
+              "name": "open",
+              "type": {
+                "text": "Boolean"
+              },
+              "description": "Controls the visibility of the primary panel in mobile view."
             }
           ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "pds-calendar",
+          "tagName": "pds-splitpanel",
           "customElement": true
         }
       ],
@@ -1420,7 +1665,7 @@
           "kind": "custom-element-definition",
           "name": "pds-splitpanel",
           "declaration": {
-            "name": "anonymous_0",
+            "name": "PdsSplitpanel",
             "module": "public/assets/pds/components/pds-splitpanel.js"
           }
         }

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: {