@noirmd/previewer 2.1.2 → 2.1.3

package/dist/card.css

@@ -1,143 +1,151 @@
-/* ============================================================
-   NoirMD Vanilla — Card
-   ============================================================ */
-
-.nr-card-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  margin: 1.5rem 0;
-}
-
-.nr-card {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-radius: var(--nr-radius-lg);
-  border: 1px solid var(--nr-border);
-  transition: all 0.2s;
-  position: relative;
-  overflow: hidden;
-  min-width: 18rem;
-  width: 18rem;
-  max-width: 20rem;
-}
-
-.nr-card--interactive {
-  cursor: pointer;
-  border-color: rgba(14, 165, 233, 0.1);
-}
-.nr-card--interactive:hover {
-  border-color: rgba(14, 165, 233, 0.5);
-}
-
-.nr-card__image {
-  width: 100%;
-  height: 160px;
-  overflow: hidden;
-  position: relative;
-}
-.nr-card__image--tall {
-  height: 240px;
-}
-
-.nr-card__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  margin: 0;
-}
-
-.nr-card__gradient {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, color-mix(in srgb, var(--nr-bg) 40%, transparent), transparent);
-}
-
-.nr-card__body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 1.5rem;
-  position: relative;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-}
-.nr-card__body--overlap {
-  margin-top: -2.5rem;
-  background: color-mix(in srgb, var(--nr-bg) 80%, transparent);
-  border-radius: 0.75rem 0.75rem 0 0;
-}
-
-.nr-card__header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.nr-card__icon-wrap {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 1.6em;
-  border-radius: 0.75rem;
-  background: rgba(14, 165, 233, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--nr-accent);
-}
-
-.nr-card__title {
-  font-size: 1rem;
-  font-weight: 900;
-  letter-spacing: -0.025em;
-  line-height: 1.25;
-  margin: 0;
-}
-
-.nr-card__description {
-  font-size: 0.875rem;
-  opacity: 0.8;
-  line-height: 1.625;
-  font-weight: 500;
-}
-
-.nr-card__content {
-  margin-top: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.nr-card__action {
-  margin-top: 1.5rem;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.nr-card__action-link {
-  background: rgba(14, 165, 233, 0.2);
-  padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.625rem;
-  font-weight: 900;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  opacity: 0.5;
-  color: var(--nr-text);
-  text-decoration: none;
-  transition: all 0.15s;
-}
-.nr-card:hover .nr-card__action-link {
-  opacity: 1;
-  color: var(--nr-accent);
-}
-.nr-card__action-link:hover {
-  background: rgba(14, 165, 233, 0.3);
+/* ============================================================
+   NoirMD Vanilla — Card
+   ============================================================ */
+
+.nr-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+/* ── Alignment variants ── */
+.nr-card-grid--center {
+  justify-items: center;
+}
+.nr-card-grid--right {
+  justify-items: end;
+}
+
+.nr-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: var(--nr-radius-lg);
+  border: 1px solid var(--nr-border);
+  transition: all 0.2s;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 20rem;
+  width: 100%;
+}
+
+.nr-card--interactive {
+  cursor: pointer;
+  border-color: rgba(14, 165, 233, 0.1);
+}
+.nr-card--interactive:hover {
+  border-color: rgba(14, 165, 233, 0.5);
+}
+
+.nr-card__image {
+  width: 100%;
+  height: 160px;
+  overflow: hidden;
+  position: relative;
+}
+.nr-card__image--tall {
+  height: 240px;
+}
+
+.nr-card__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  margin: 0;
+}
+
+.nr-card__gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, color-mix(in srgb, var(--nr-bg) 40%, transparent), transparent);
+}
+
+.nr-card__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1.5rem;
+  position: relative;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+.nr-card__body--overlap {
+  margin-top: -2.5rem;
+  background: color-mix(in srgb, var(--nr-bg) 80%, transparent);
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+.nr-card__header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.nr-card__icon-wrap {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.6em;
+  border-radius: 0.75rem;
+  background: rgba(14, 165, 233, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--nr-accent);
+}
+
+.nr-card__title {
+  font-size: 1rem;
+  font-weight: 900;
+  letter-spacing: -0.025em;
+  line-height: 1.25;
+  margin: 0;
+}
+
+.nr-card__description {
+  font-size: 0.875rem;
+  opacity: 0.8;
+  line-height: 1.625;
+  font-weight: 500;
+}
+
+.nr-card__content {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.nr-card__action {
+  margin-top: 1.5rem;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.nr-card__action-link {
+  background: rgba(14, 165, 233, 0.2);
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.625rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  opacity: 0.5;
+  color: var(--nr-text);
+  text-decoration: none;
+  transition: all 0.15s;
+}
+.nr-card:hover .nr-card__action-link {
+  opacity: 1;
+  color: var(--nr-accent);
+}
+.nr-card__action-link:hover {
+  background: rgba(14, 165, 233, 0.3);
 }

package/dist/index.cjs

@@ -12020,6 +12020,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");
@@ -12050,8 +12066,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) {
@@ -12173,15 +12195,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);
   }
@@ -12194,6 +12233,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);
   }
@@ -12320,7 +12360,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);