@pure-ds/core 0.7.46 → 0.7.48

package/public/assets/pds/pds.css-data.json

@@ -1167,6 +1167,160 @@
         }
       ]
     },
+    {
+      "name": "--color-accentInteractive-light",
+      "description": "accentInteractive color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-accentInteractive-dark",
+      "description": "accentInteractive color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-surfaceAccent-light",
+      "description": "surfaceAccent color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-surfaceAccent-dark",
+      "description": "surfaceAccent color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-dangerInteractive-light",
+      "description": "dangerInteractive color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-dangerInteractive-dark",
+      "description": "dangerInteractive color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-successInteractive-light",
+      "description": "successInteractive color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-successInteractive-dark",
+      "description": "successInteractive color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-warningInteractive-light",
+      "description": "warningInteractive color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-warningInteractive-dark",
+      "description": "warningInteractive color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-infoInteractive-light",
+      "description": "infoInteractive color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-infoInteractive-dark",
+      "description": "infoInteractive color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-surfaceStatus-light",
+      "description": "surfaceStatus color scale - shade light",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
+    {
+      "name": "--color-surfaceStatus-dark",
+      "description": "surfaceStatus color scale - shade dark",
+      "syntax": "<color>",
+      "references": [
+        {
+          "name": "Value",
+          "url": "data:text/plain,%5Bobject%20Object%5D"
+        }
+      ]
+    },
     {
       "name": "--spacing-0",
       "description": "Spacing scale value 0",

package/public/assets/pds/vscode-custom-data.json

@@ -769,6 +769,36 @@
       "name": "pds-locale",
       "description": "Locale switcher component.\r\n\r\nThe component only persists canonical 5-letter locale tags (`xx-YY`),\r\nfor example `en-US` and `nl-NL`.",
       "attributes": [
+        {
+          "name": "name",
+          "description": "Form field name used during submit."
+        },
+        {
+          "name": "value",
+          "description": "Selected canonical locale tag (`xx-YY`)."
+        },
+        {
+          "name": "required",
+          "description": "Requires a locale value for validity.",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables interaction and omits form value.",
+          "valueSet": "v"
+        },
+        {
+          "name": "mode",
+          "description": "Label display mode. In `compact`, the UI shows 2-letter aliases and puts the full Intl language name in the `title` attribute. In `full`, it renders the full Intl language name as the visible label.",
+          "values": [
+            {
+              "name": "compact"
+            },
+            {
+              "name": "full"
+            }
+          ]
+        },
         {
           "name": "data-label",
           "description": "Accessible label for the locale radio group."

package/readme.md

@@ -1055,6 +1055,16 @@ Validates all presets during build and reports issues:
     [dark/btn-primary] (/colors/darkMode/primary)
 ```
 
+Build can also emit non-blocking identity warnings when a dark mode brand override drifts too far from the light mode hue:
+
+```
+⚠️ Preset identity warnings (non-blocking):
+
+— Travel Market
+  • Dark mode primary hue drifts 48.6deg from light primary...
+    [dark/identity-hue-primary] (/colors/darkMode/primary)
+```
+
 ### Manual Validation
 
 ```javascript
@@ -1081,6 +1091,10 @@ if (!result.ok) {
   //   }
   // ]
 }
+
+if (result.warnings?.length) {
+  console.table(result.warnings);
+}
 ```
 
 ### Batch Validation
@@ -1337,7 +1351,7 @@ Validate design for accessibility.
 import { validateDesign } from '@pure-ds/core/pds-core/pds-generator.js';
 
 const result = validateDesign(config, { minContrast: 4.5 });
-// Returns: { ok: boolean, issues: Array }
+// Returns: { ok: boolean, issues: Array, warnings: Array }
 ```
 
 ### PDS.adoptLayers(shadowRoot, layers, additionalSheets)

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

@@ -19,10 +19,10 @@ import { enums } from "./pds-enums.js";
  * @property {string} [secondary] - Drives neutral scale: --color-gray-50..900.
  * @property {string} [accent] - Drives accent scale: --color-accent-50..900.
  * @property {string} [background] - Drives surface shades: --color-surface-* and smart surfaces.
- * @property {string | null} [success] - Drives semantic success scale: --color-success-*.
- * @property {string | null} [warning] - Drives semantic warning scale: --color-warning-*.
- * @property {string | null} [danger] - Drives semantic danger scale: --color-danger-*.
- * @property {string | null} [info] - Drives semantic info scale: --color-info-*.
+ * @property {string | null} [success] - Drives semantic success scale and role tokens: --color-success-*, --color-success-fill/text/*, and --surface-*-success-text.
+ * @property {string | null} [warning] - Drives semantic warning scale and role tokens: --color-warning-*, --color-warning-fill/text/*, and --surface-*-warning-text.
+ * @property {string | null} [danger] - Drives semantic danger scale and role tokens: --color-danger-*, --color-danger-fill/text/*, and --surface-*-danger-text.
+ * @property {string | null} [info] - Drives semantic info scale and role tokens: --color-info-*, --color-info-fill/text/*, and --surface-*-info-text.
  * @property {number} [gradientStops] - Affects generated gradient scales.
  * @property {number} [elevationOpacity] - Affects smart surface shadows (opacity).
  * @property {PDSDarkModeColorsConfig} [darkMode] - Overrides dark mode palette generation.
@@ -407,19 +407,71 @@ const __DESIGN_CONFIG_SPEC__ = {
         },
         success: {
           type: ["string", "null"],
-          relations: { tokens: ["--color-success-*"] },
+          relations: {
+            tokens: [
+              "--color-success-*",
+              "--color-success-fill",
+              "--color-success-fill-hover",
+              "--color-success-fill-active",
+              "--color-success-text",
+              "--color-success-text-hover",
+              "--color-success-contrast",
+              "--color-success-display-*",
+              "--surface-*-success-text",
+              "--surface-*-success-text-hover",
+            ],
+          },
         },
         warning: {
           type: ["string", "null"],
-          relations: { tokens: ["--color-warning-*"] },
+          relations: {
+            tokens: [
+              "--color-warning-*",
+              "--color-warning-fill",
+              "--color-warning-fill-hover",
+              "--color-warning-fill-active",
+              "--color-warning-text",
+              "--color-warning-text-hover",
+              "--color-warning-contrast",
+              "--color-warning-display-*",
+              "--surface-*-warning-text",
+              "--surface-*-warning-text-hover",
+            ],
+          },
         },
         danger: {
           type: ["string", "null"],
-          relations: { tokens: ["--color-danger-*"] },
+          relations: {
+            tokens: [
+              "--color-danger-*",
+              "--color-danger-fill",
+              "--color-danger-fill-hover",
+              "--color-danger-fill-active",
+              "--color-danger-text",
+              "--color-danger-text-hover",
+              "--color-danger-contrast",
+              "--color-danger-display-*",
+              "--surface-*-danger-text",
+              "--surface-*-danger-text-hover",
+            ],
+          },
         },
         info: {
           type: ["string", "null"],
-          relations: { tokens: ["--color-info-*"] },
+          relations: {
+            tokens: [
+              "--color-info-*",
+              "--color-info-fill",
+              "--color-info-fill-hover",
+              "--color-info-fill-active",
+              "--color-info-text",
+              "--color-info-text-hover",
+              "--color-info-contrast",
+              "--color-info-display-*",
+              "--surface-*-info-text",
+              "--surface-*-info-text-hover",
+            ],
+          },
         },
         gradientStops: { type: "number" },
         elevationOpacity: {
@@ -1998,7 +2050,7 @@ export const presets = {
       darkMode: {
         background: "#1a1d21", // deep charcoal like WHOOP
         secondary: "#78909c",
-        primary: "#0a4ca4",
+        //primary: "#0a4ca4",
       },
     },
     typography: {
@@ -2106,7 +2158,8 @@ export const presets = {
       darkMode: {
         background: "#0f0f0f",
         secondary: "#8a8a8a",
-        primary: "#06c167", // Use bright green for dark mode buttons (was white)
+        primary: "#b1b1b1"
+        //primary: "#06c167", // Use bright green for dark mode buttons (was white)
       },
     },
     typography: {

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

@@ -555,6 +555,11 @@ function enhanceRange(elem) {
   if (hasRangeOutputClass) {
     const labelSpan = label.querySelector("span");
     if (labelSpan && !labelSpan.classList.contains("range-output-wrapper")) {
+      const explicitRangeLabel =
+        labelSpan.getAttribute("data-range-label") ||
+        label.getAttribute("data-range-label") ||
+        "";
+
       const wrapper = document.createElement("span");
       wrapper.className = "range-output-wrapper";
       wrapper.style.display = "flex";
@@ -562,7 +567,7 @@ function enhanceRange(elem) {
       wrapper.style.alignItems = "center";
 
       const textSpan = document.createElement("span");
-      textSpan.textContent = labelSpan.textContent;
+      textSpan.textContent = explicitRangeLabel || labelSpan.textContent;
       wrapper.appendChild(textSpan);
 
       const output = document.createElement("output");