@noirmd/previewer 2.1.2 → 2.1.4

package/dist/vanilla.js

@@ -11979,6 +11979,22 @@ var hovergalleryDirective = ({ props, slots }) => {
 var hovergallery_default = hovergalleryDirective;
 
 // vanilla/directives/chat.ts
+var CHAT_THEME_TOKENS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "accent",
+  "neutral",
+  "info",
+  "success",
+  "warning",
+  "error"
+]);
+function isArbitraryColor(value) {
+  if (CHAT_THEME_TOKENS.has(value)) return false;
+  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
+  if (/^[a-zA-Z]+$/.test(value)) return true;
+  return false;
+}
 var chatItemDirective = ({ props, renderSlot }) => {
   const side = props.side === "end" ? "end" : "start";
   const wrap = document.createElement("div");
@@ -12009,8 +12025,14 @@ var chatItemDirective = ({ props, renderSlot }) => {
     avatar.appendChild(img);
     wrap.appendChild(avatar);
   }
+  const isThemeToken = CHAT_THEME_TOKENS.has(props.color || "");
+  const colorClass = isThemeToken ? ` nr-chat__bubble--${props.color}` : "";
   const bubble = document.createElement("div");
-  bubble.className = `nr-chat__bubble${props.color ? ` nr-chat__bubble--${props.color}` : ""}`;
+  bubble.className = `nr-chat__bubble${colorClass}`;
+  if (props.color && isArbitraryColor(props.color) && !isThemeToken) {
+    bubble.style.background = props.color;
+    bubble.style.color = "white";
+  }
   bubble.appendChild(renderSlot("default"));
   wrap.appendChild(bubble);
   if (props.footer) {
@@ -12132,15 +12154,32 @@ var richlistDirective = ({ props, renderSlot }) => {
 var richlist_default = richlistDirective;
 
 // vanilla/directives/stat.ts
+var STAT_THEME_TOKENS = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "warning",
+  "error"
+]);
+function isArbitraryColor2(value) {
+  if (STAT_THEME_TOKENS.has(value)) return false;
+  if (/^(#|rgb|hsl|oklch|oklab|lab|lch|color\()/i.test(value)) return true;
+  if (/^[a-zA-Z]+$/.test(value)) return true;
+  return false;
+}
 var statDirective = ({ props }) => {
-  const colorClass = props.color ? ` nr-stat--${props.color}` : "";
+  const isThemeToken = STAT_THEME_TOKENS.has(props.color || "");
+  const colorClass = isThemeToken ? ` nr-stat--${props.color}` : "";
   const stat = document.createElement("div");
   stat.className = `nr-stat${colorClass}`;
   if (props.class) stat.classList.add(...props.class.split(/\s+/).filter(Boolean));
   if (props.style) stat.setAttribute("style", props.style);
+  const useInlineColor = props.color && isArbitraryColor2(props.color) && !isThemeToken;
   if (props.icon) {
     const figure = document.createElement("div");
     figure.className = "nr-stat__figure";
+    if (useInlineColor) figure.style.color = props.color;
     figure.appendChild(createIcon(props.icon));
     stat.appendChild(figure);
   }
@@ -12153,6 +12192,7 @@ var statDirective = ({ props }) => {
   if (props.value) {
     const value = document.createElement("div");
     value.className = "nr-stat__value";
+    if (useInlineColor) value.style.color = props.color;
     value.textContent = props.value;
     stat.appendChild(value);
   }
@@ -12279,7 +12319,9 @@ function processElements(elements, ctx, allElements) {
         }
       } else {
         const grid = document.createElement("div");
-        grid.className = BATCHED_DIRECTIVES[cards[0].directiveType];
+        const gridClass = BATCHED_DIRECTIVES[cards[0].directiveType];
+        const align = cards[0].props?.align;
+        grid.className = align === "center" || align === "right" ? `${gridClass} ${gridClass}--${align}` : gridClass;
         for (const card of cards) {
           const rendered = renderElement(card, ctx, allElements);
           if (rendered) grid.appendChild(rendered);