@pure-ds/core 0.4.16 → 0.4.18

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-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
     },