@pure-ds/storybook 0.7.46 → 0.7.53

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/styles/pds-components.css

@@ -1405,22 +1405,23 @@ a.btn-working {
 }
 
 .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
-.badge-primary { background-color: var(--color-primary-600); }
+.badge-primary { background-color: var(--color-primary-fill); }
 .badge-secondary { background-color: var(--color-secondary-600); }
-.badge-success { background-color: var(--color-success-600); }
-.badge-info { background-color: var(--color-info-600); }
-.badge-warning { background-color: var(--color-warning-600); }
-.badge-danger { background-color: var(--color-danger-600); }
+.badge-success { background-color: var(--color-success-fill); }
+.badge-info { background-color: var(--color-info-fill); }
+.badge-warning { background-color: var(--color-warning-fill); }
+.badge-danger { background-color: var(--color-danger-fill); }
 
 .badge-outline {
   background-color: transparent;
+  color: var(--color-text-secondary);
   border: var(--border-width-thin) solid currentColor;
-  &.badge-primary { color: var(--color-text-primary); }
-  &.badge-secondary { color: var(--color-secondary-600); }
-  &.badge-success { color: var(--color-success-600); }
-  &.badge-info { color: var(--color-info-600); }
-  &.badge-warning { color: var(--color-warning-600); }
-  &.badge-danger { color: var(--color-danger-600); }
+  &.badge-primary { color: var(--color-primary-text); }
+  &.badge-secondary { color: var(--color-text-secondary); }
+  &.badge-success { color: var(--color-success-text); }
+  &.badge-info { color: var(--color-info-text); }
+  &.badge-warning { color: var(--color-warning-text); }
+  &.badge-danger { color: var(--color-danger-text); }
 }
 
 .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }

package/public/assets/pds/styles/pds-components.css.js

@@ -1409,22 +1409,23 @@ a.btn-working {
 }
 
 .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
-.badge-primary { background-color: var(--color-primary-600); }
+.badge-primary { background-color: var(--color-primary-fill); }
 .badge-secondary { background-color: var(--color-secondary-600); }
-.badge-success { background-color: var(--color-success-600); }
-.badge-info { background-color: var(--color-info-600); }
-.badge-warning { background-color: var(--color-warning-600); }
-.badge-danger { background-color: var(--color-danger-600); }
+.badge-success { background-color: var(--color-success-fill); }
+.badge-info { background-color: var(--color-info-fill); }
+.badge-warning { background-color: var(--color-warning-fill); }
+.badge-danger { background-color: var(--color-danger-fill); }
 
 .badge-outline {
   background-color: transparent;
+  color: var(--color-text-secondary);
   border: var(--border-width-thin) solid currentColor;
-  &.badge-primary { color: var(--color-text-primary); }
-  &.badge-secondary { color: var(--color-secondary-600); }
-  &.badge-success { color: var(--color-success-600); }
-  &.badge-info { color: var(--color-info-600); }
-  &.badge-warning { color: var(--color-warning-600); }
-  &.badge-danger { color: var(--color-danger-600); }
+  &.badge-primary { color: var(--color-primary-text); }
+  &.badge-secondary { color: var(--color-text-secondary); }
+  &.badge-success { color: var(--color-success-text); }
+  &.badge-info { color: var(--color-info-text); }
+  &.badge-warning { color: var(--color-warning-text); }
+  &.badge-danger { color: var(--color-danger-text); }
 }
 
 .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }
@@ -3624,22 +3625,23 @@ a.btn-working {
 }
 
 .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
-.badge-primary { background-color: var(--color-primary-600); }
+.badge-primary { background-color: var(--color-primary-fill); }
 .badge-secondary { background-color: var(--color-secondary-600); }
-.badge-success { background-color: var(--color-success-600); }
-.badge-info { background-color: var(--color-info-600); }
-.badge-warning { background-color: var(--color-warning-600); }
-.badge-danger { background-color: var(--color-danger-600); }
+.badge-success { background-color: var(--color-success-fill); }
+.badge-info { background-color: var(--color-info-fill); }
+.badge-warning { background-color: var(--color-warning-fill); }
+.badge-danger { background-color: var(--color-danger-fill); }
 
 .badge-outline {
   background-color: transparent;
+  color: var(--color-text-secondary);
   border: var(--border-width-thin) solid currentColor;
-  &.badge-primary { color: var(--color-text-primary); }
-  &.badge-secondary { color: var(--color-secondary-600); }
-  &.badge-success { color: var(--color-success-600); }
-  &.badge-info { color: var(--color-info-600); }
-  &.badge-warning { color: var(--color-warning-600); }
-  &.badge-danger { color: var(--color-danger-600); }
+  &.badge-primary { color: var(--color-primary-text); }
+  &.badge-secondary { color: var(--color-text-secondary); }
+  &.badge-success { color: var(--color-success-text); }
+  &.badge-info { color: var(--color-info-text); }
+  &.badge-warning { color: var(--color-warning-text); }
+  &.badge-danger { color: var(--color-danger-text); }
 }
 
 .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }

package/public/assets/pds/styles/pds-styles.css

@@ -2469,22 +2469,23 @@ a.btn-working {
 }
 
 .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
-.badge-primary { background-color: var(--color-primary-600); }
+.badge-primary { background-color: var(--color-primary-fill); }
 .badge-secondary { background-color: var(--color-secondary-600); }
-.badge-success { background-color: var(--color-success-600); }
-.badge-info { background-color: var(--color-info-600); }
-.badge-warning { background-color: var(--color-warning-600); }
-.badge-danger { background-color: var(--color-danger-600); }
+.badge-success { background-color: var(--color-success-fill); }
+.badge-info { background-color: var(--color-info-fill); }
+.badge-warning { background-color: var(--color-warning-fill); }
+.badge-danger { background-color: var(--color-danger-fill); }
 
 .badge-outline {
   background-color: transparent;
+  color: var(--color-text-secondary);
   border: var(--border-width-thin) solid currentColor;
-  &.badge-primary { color: var(--color-text-primary); }
-  &.badge-secondary { color: var(--color-secondary-600); }
-  &.badge-success { color: var(--color-success-600); }
-  &.badge-info { color: var(--color-info-600); }
-  &.badge-warning { color: var(--color-warning-600); }
-  &.badge-danger { color: var(--color-danger-600); }
+  &.badge-primary { color: var(--color-primary-text); }
+  &.badge-secondary { color: var(--color-text-secondary); }
+  &.badge-success { color: var(--color-success-text); }
+  &.badge-info { color: var(--color-info-text); }
+  &.badge-warning { color: var(--color-warning-text); }
+  &.badge-danger { color: var(--color-danger-text); }
 }
 
 .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }

package/public/assets/pds/styles/pds-styles.css.js

@@ -2473,22 +2473,23 @@ a.btn-working {
 }
 
 .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
-.badge-primary { background-color: var(--color-primary-600); }
+.badge-primary { background-color: var(--color-primary-fill); }
 .badge-secondary { background-color: var(--color-secondary-600); }
-.badge-success { background-color: var(--color-success-600); }
-.badge-info { background-color: var(--color-info-600); }
-.badge-warning { background-color: var(--color-warning-600); }
-.badge-danger { background-color: var(--color-danger-600); }
+.badge-success { background-color: var(--color-success-fill); }
+.badge-info { background-color: var(--color-info-fill); }
+.badge-warning { background-color: var(--color-warning-fill); }
+.badge-danger { background-color: var(--color-danger-fill); }
 
 .badge-outline {
   background-color: transparent;
+  color: var(--color-text-secondary);
   border: var(--border-width-thin) solid currentColor;
-  &.badge-primary { color: var(--color-text-primary); }
-  &.badge-secondary { color: var(--color-secondary-600); }
-  &.badge-success { color: var(--color-success-600); }
-  &.badge-info { color: var(--color-info-600); }
-  &.badge-warning { color: var(--color-warning-600); }
-  &.badge-danger { color: var(--color-danger-600); }
+  &.badge-primary { color: var(--color-primary-text); }
+  &.badge-secondary { color: var(--color-text-secondary); }
+  &.badge-success { color: var(--color-success-text); }
+  &.badge-info { color: var(--color-info-text); }
+  &.badge-warning { color: var(--color-warning-text); }
+  &.badge-danger { color: var(--color-danger-text); }
 }
 
 .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }
@@ -6469,22 +6470,23 @@ a.btn-working {
 }
 
 .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger { color: white; }
-.badge-primary { background-color: var(--color-primary-600); }
+.badge-primary { background-color: var(--color-primary-fill); }
 .badge-secondary { background-color: var(--color-secondary-600); }
-.badge-success { background-color: var(--color-success-600); }
-.badge-info { background-color: var(--color-info-600); }
-.badge-warning { background-color: var(--color-warning-600); }
-.badge-danger { background-color: var(--color-danger-600); }
+.badge-success { background-color: var(--color-success-fill); }
+.badge-info { background-color: var(--color-info-fill); }
+.badge-warning { background-color: var(--color-warning-fill); }
+.badge-danger { background-color: var(--color-danger-fill); }
 
 .badge-outline {
   background-color: transparent;
+  color: var(--color-text-secondary);
   border: var(--border-width-thin) solid currentColor;
-  &.badge-primary { color: var(--color-text-primary); }
-  &.badge-secondary { color: var(--color-secondary-600); }
-  &.badge-success { color: var(--color-success-600); }
-  &.badge-info { color: var(--color-info-600); }
-  &.badge-warning { color: var(--color-warning-600); }
-  &.badge-danger { color: var(--color-danger-600); }
+  &.badge-primary { color: var(--color-primary-text); }
+  &.badge-secondary { color: var(--color-text-secondary); }
+  &.badge-success { color: var(--color-success-text); }
+  &.badge-info { color: var(--color-info-text); }
+  &.badge-warning { color: var(--color-warning-text); }
+  &.badge-danger { color: var(--color-danger-text); }
 }
 
 .badge-sm { padding: 2px var(--spacing-1); font-size: 10px; }

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/src/js/app.js

@@ -1,4 +1,4 @@
-import { PDS, msg, str } from "./pds";
+import { PDS, html, msg, str } from "./pds";
 import { config } from "../../pds.config.js";
 import pkg from "../../package.json";
 
@@ -15,12 +15,15 @@ const repoUrl = rawRepoUrl
 const homepageUrl = pkg.homepage || repoUrl;
 const issuesUrl = pkg.bugs?.url || "";
 
-document.body.innerHTML = /*html*/ `
+// ✅ Lit-like ergonomics: appendChild(DocumentFragment) with bindings
+document.body.appendChild(html`
 	<div class="container text-center">
 		<img src="/assets/img/pds-logo.svg" alt="PDS Logo" title="${msg("PDS Logo")}" width="64" height="64" />
 		<header class="container section">
-			<h1>${pkg.name} ${msg(str`version ${pkg.version}`)}</h1>
+			<h1 @click=${() => PDS.toast("Hallo")}>
+				${pkg.name} ${msg(str`version ${pkg.version}`)}
+			</h1>
 			<small class="text-muted">${msg(pkg.description)}</small>				
 		</header>
 	</div>
-`;
+`);

package/src/js/common/common.js

@@ -31,20 +31,48 @@ export function fragmentFromTemplateLike(templateLike) {
   const htmlParts = [];
 
   const propBindingPattern = /(\s)(\.[\w-]+)=\s*$/;
+  const eventBindingPattern = /(\s)(@[\w-]+)=\s*$/;
+  const booleanBindingPattern = /(\s)(\?[\w-]+)=\s*$/;
+  const attrBindingPattern = /(\s)([\w:-]+)=\s*$/;
 
   for (let i = 0; i < strings.length; i += 1) {
     let chunk = strings[i] ?? "";
-    const match = chunk.match(propBindingPattern);
-
-    if (match && i < values.length) {
-      const propToken = match[2];
-      const propName = propToken.slice(1);
+    if (i < values.length) {
       const marker = `pds-val-${i}`;
-      chunk = chunk.replace(
-        propBindingPattern,
-        `$1data-pds-prop="${propName}:${marker}"`
-      );
-      consumedValues.add(i);
+      const propMatch = chunk.match(propBindingPattern);
+      const eventMatch = chunk.match(eventBindingPattern);
+      const boolMatch = chunk.match(booleanBindingPattern);
+      const attrMatch = chunk.match(attrBindingPattern);
+
+      if (propMatch) {
+        const propName = propMatch[2].slice(1);
+        chunk = chunk.replace(
+          propBindingPattern,
+          `$1data-pds-bind-${i}="prop:${propName}:${marker}"`
+        );
+        consumedValues.add(i);
+      } else if (eventMatch) {
+        const eventName = eventMatch[2].slice(1);
+        chunk = chunk.replace(
+          eventBindingPattern,
+          `$1data-pds-bind-${i}="event:${eventName}:${marker}"`
+        );
+        consumedValues.add(i);
+      } else if (boolMatch) {
+        const attrName = boolMatch[2].slice(1);
+        chunk = chunk.replace(
+          booleanBindingPattern,
+          `$1data-pds-bind-${i}="boolean:${attrName}:${marker}"`
+        );
+        consumedValues.add(i);
+      } else if (attrMatch) {
+        const attrName = attrMatch[2];
+        chunk = chunk.replace(
+          attrBindingPattern,
+          `$1data-pds-bind-${i}="attr:${attrName}:${marker}"`
+        );
+        consumedValues.add(i);
+      }
     }
 
     htmlParts.push(chunk);
@@ -99,24 +127,93 @@ export function fragmentFromTemplateLike(templateLike) {
 
   const elements = tpl.content.querySelectorAll("*");
   elements.forEach((el) => {
-    const propAttr = el.getAttribute("data-pds-prop");
-    if (!propAttr) return;
-    const [propName, markerValue] = propAttr.split(":");
-    const index = Number(String(markerValue).replace("pds-val-", ""));
-    if (propName && Number.isInteger(index)) {
-      el[propName] = values[index];
-    }
-    el.removeAttribute("data-pds-prop");
+    [...el.attributes].forEach((attr) => {
+      if (!attr.name.startsWith("data-pds-bind-")) return;
+
+      const firstColon = attr.value.indexOf(":");
+      const lastColon = attr.value.lastIndexOf(":");
+      if (firstColon <= 0 || lastColon <= firstColon) {
+        el.removeAttribute(attr.name);
+        return;
+      }
+
+      const kind = attr.value.slice(0, firstColon);
+      const bindingName = attr.value.slice(firstColon + 1, lastColon);
+      const markerValue = attr.value.slice(lastColon + 1);
+      const index = Number(String(markerValue).replace("pds-val-", ""));
+      const value = values[index];
+
+      if (!bindingName || !Number.isInteger(index)) {
+        el.removeAttribute(attr.name);
+        return;
+      }
+
+      if (kind === "prop") {
+        el[bindingName] = value;
+      } else if (kind === "event") {
+        if (typeof value === "function" || (value && typeof value.handleEvent === "function")) {
+          el.addEventListener(bindingName, value);
+        }
+      } else if (kind === "boolean") {
+        if (value) {
+          el.setAttribute(bindingName, "");
+        } else {
+          el.removeAttribute(bindingName);
+        }
+      } else if (kind === "attr") {
+        if (value == null || value === false) {
+          el.removeAttribute(bindingName);
+        } else {
+          el.setAttribute(bindingName, String(value));
+        }
+      }
+
+      el.removeAttribute(attr.name);
+    });
   });
 
   return tpl.content;
 }
 
 /**
- * Parses an HTML string into a NodeList
- * @param {String} html
+ * Parses either an HTML string or tagged template into a DocumentFragment.
+ * Useful when you want direct appendChild(fragment) ergonomics.
+ * @param {string | TemplateStringsArray | {strings: string[], values: unknown[]}} html
+ * @param {...unknown} values
+ * @returns {DocumentFragment}
+ */
+export function parseFragment(html, ...values) {
+  const isTaggedTemplate =
+    Array.isArray(html) && Object.prototype.hasOwnProperty.call(html, "raw");
+
+  if (isTaggedTemplate) {
+    return fragmentFromTemplateLike({ strings: Array.from(html), values });
+  }
+
+  if (Array.isArray(html?.strings) && Array.isArray(html?.values)) {
+    return fragmentFromTemplateLike({ strings: html.strings, values: html.values });
+  }
+
+  const tpl = document.createElement("template");
+  tpl.innerHTML = String(html ?? "");
+  return tpl.content;
+}
+
+/**
+ * Parses either an HTML string or a tagged template into DOM nodes.
+ * 
+ * Supports two modes:
+ * 1. String mode: PDS.parse(htmlString) - returns NodeList, no binding support
+ *    Example: PDS.parse(`<button class="btn">Click</button>`)
+ * 
+ * 2. Tagged template mode: PDS.parse`...` - supports Lit-like bindings
+ *    Bindings: `.prop=${value}`, `@event=${handler}`, `?boolean=${flag}`, `attr=${value}`
+ *    Example: PDS.parse`<h1 @click=${handler}>...</h1>`
+ * 
+ * @param {string | TemplateStringsArray | {strings: string[], values: unknown[]}} html
+ * @param {...unknown} values
  * @returns {NodeListOf<ChildNode>}
  */
-export function parseHTML(html) {
-  return new DOMParser().parseFromString(html, "text/html").body.childNodes;
-}
+export function parseHTML(html, ...values) {
+  return parseFragment(html, ...values).childNodes;
+}

package/src/js/common/toast.js

@@ -28,6 +28,7 @@ async function ensureToaster() {
  * @param {string} message - The message to display
  * @param {Object} [options={}] - Toast configuration
  * @param {"information"|"success"|"warning"|"error"} [options.type="information"] - Toast type/severity
+ * @param {string} [options.title] - Optional heading override (falls back to type label when empty)
  * @param {number} [options.duration] - Duration in milliseconds (auto-calculated if not provided based on message length)
  * @param {boolean} [options.closable=true] - Whether the toast can be manually closed
  * @param {boolean} [options.persistent=false] - If true, toast won't auto-dismiss (requires manual close)
@@ -47,6 +48,13 @@ async function ensureToaster() {
  * });
  * 
  * @example
+ * // Custom title overrides type-derived heading
+ * await PDS.toast('Feature coming soon...', {
+ *   type: 'information',
+ *   title: 'Qogni'
+ * });
+ * 
+ * @example
  * // Persistent warning (must be manually closed)
  * await PDS.toast('This action cannot be undone', { 
  *   type: 'warning',