@noirmd/previewer 2.1.5 → 2.1.7

package/dist/accordion.css

@@ -16,7 +16,7 @@
   transition: grid-template-rows 0.25s ease;
   border: 1px solid var(--nr-border);
   border-radius: var(--nr-radius-sm);
-  background: color-mix(in oklab, var(--nr-bg-secondary) 30%, transparent);
+  background: transparent;
 }
 
 .nr-accordion__item:has(> .nr-accordion__input:checked) {

package/dist/admonition.css

@@ -7,7 +7,6 @@
   margin-bottom: 1.5rem;
   border: 1px solid;
   padding: 1rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .nr-admonition--note {
@@ -37,7 +36,7 @@
 }
 
 .nr-admonition__title {
-  font-weight: 700;
+  font-weight: 600;
   font-size: 1rem;
   margin: 0 0 0.5rem;
   display: flex;
@@ -52,4 +51,14 @@
   font-size: 0.875rem;
   line-height: 1.625;
   opacity: 0.9;
+}
+
+/* Remove top margin on headings inside admonition */
+.nr-admonition__body .md-h1,
+.nr-admonition__body .md-h2,
+.nr-admonition__body .md-h3,
+.nr-admonition__body .md-h4,
+.nr-admonition__body .md-h5,
+.nr-admonition__body .md-h6 {
+  margin-top: 0;
 }

package/dist/base.css

@@ -24,7 +24,7 @@
 
 .md-h1 {
   font-size: 1.5rem;
-  font-weight: 800;
+  font-weight: 700;
   letter-spacing: -0.025em;
   line-height: 1.2;
   margin: 1.5rem 0 0.75rem;

package/dist/blockquote.css

@@ -5,7 +5,7 @@
 .nr-blockquote {
   margin: 1rem 0;
   padding: 0.5rem 1rem;
-  border-left: 4px solid rgba(14, 165, 233, 0.3);
+  border-left: 2px solid color-mix(in oklab, var(--nr-accent) 30%, transparent);
   color: var(--nr-text-secondary);
   font-style: italic;
   font-size: 0.875rem;

package/dist/button.css

@@ -17,22 +17,46 @@
   align-items: center;
   width: fit-content;
   padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
-  font-weight: 700;
+  border-radius: var(--nr-radius-sm);
+  font-weight: 500;
   font-size: 0.875rem;
   text-decoration: none;
   gap: 0.5rem;
-  transition: all 0.15s;
+  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
   border: 1px solid var(--nr-border);
-  background: color-mix(in srgb, var(--nr-bg) 5%, transparent);
+  background: transparent;
   color: var(--nr-text);
   cursor: pointer;
 }
 .nr-button:hover {
-  transform: scale(1.05);
   background: color-mix(in srgb, var(--nr-bg) 10%, transparent);
   color: var(--nr-text);
 }
-.nr-button:active {
-  transform: scale(0.95);
-}
+.nr-button:focus-visible {
+  outline: 2px solid var(--nr-ring);
+  outline-offset: 2px;
+}
+
+/* ── Theme color variants ───────────────────────────────── */
+
+.nr-button--primary,
+.nr-button--accent { background: var(--nr-accent); color: #fff; border-color: var(--nr-accent); }
+.nr-button--primary:hover,
+.nr-button--accent:hover { background: color-mix(in srgb, var(--nr-accent) 85%, #000); color: #fff; }
+
+.nr-button--secondary { background: var(--nr-secondary); color: #fff; border-color: var(--nr-secondary); }
+.nr-button--secondary:hover { background: color-mix(in srgb, var(--nr-secondary) 85%, #000); color: #fff; }
+
+.nr-button--info { background: var(--nr-info); color: #fff; border-color: var(--nr-info); }
+.nr-button--info:hover { background: color-mix(in srgb, var(--nr-info) 85%, #000); color: #fff; }
+
+.nr-button--success { background: var(--nr-success); color: #fff; border-color: var(--nr-success); }
+.nr-button--success:hover { background: color-mix(in srgb, var(--nr-success) 85%, #000); color: #fff; }
+
+.nr-button--warning { background: var(--nr-warning); color: #1f2937; border-color: var(--nr-warning); }
+.nr-button--warning:hover { background: color-mix(in srgb, var(--nr-warning) 85%, #000); color: #1f2937; }
+
+.nr-button--danger,
+.nr-button--error { background: var(--nr-danger); color: #fff; border-color: var(--nr-danger); }
+.nr-button--danger:hover,
+.nr-button--error:hover { background: color-mix(in srgb, var(--nr-danger) 85%, #000); color: #fff; }

package/dist/card.css

@@ -20,7 +20,7 @@
 .nr-card {
   display: flex;
   flex-direction: column;
-  border-radius: var(--nr-radius-lg);
+  border-radius: var(--nr-radius);
   border: 1px solid var(--nr-border);
   transition: all 0.2s;
   position: relative;
@@ -29,6 +29,7 @@
   flex: 1 1 18rem;
   max-width: 20rem;
   width: 100%;
+  background: var(--nr-bg);
 }
 
 .nr-card--interactive {
@@ -59,7 +60,7 @@
 .nr-card__gradient {
   position: absolute;
   inset: 0;
-  background: linear-gradient(to top, color-mix(in srgb, var(--nr-bg) 40%, transparent), transparent);
+  background: linear-gradient(to top, var(--nr-bg) 0%, transparent 60%);
 }
 
 .nr-card__body {
@@ -68,8 +69,6 @@
   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;
@@ -88,7 +87,7 @@
   width: 2.5rem;
   height: 2.5rem;
   font-size: 1.6em;
-  border-radius: 0.75rem;
+  border-radius: var(--nr-radius-sm);
   background: color-mix(in srgb, var(--nr-accent) 20%, transparent);
   display: flex;
   align-items: center;
@@ -99,7 +98,7 @@
 
 .nr-card__title {
   font-size: 1rem;
-  font-weight: 900;
+  font-weight: 600;
   letter-spacing: -0.025em;
   line-height: 1.25;
   margin: 0;
@@ -107,7 +106,7 @@
 
 .nr-card__description {
   font-size: 0.875rem;
-  opacity: 0.8;
+  color: var(--nr-text-secondary);
   line-height: 1.625;
   font-weight: 500;
 }
@@ -121,7 +120,11 @@
 }
 
 .nr-card__action {
-  margin-top: 1.5rem;
+  /* Pin the action to the bottom of the card so every card in a grid
+     shows its button at the same spot (bottom-right), no matter how
+     long the description is. `padding-top` keeps a minimum gap. */
+  margin-top: auto;
+  padding-top: 0.75rem;
   display: flex;
   justify-content: flex-end;
 }
@@ -129,21 +132,19 @@
 .nr-card__action-link {
   background: color-mix(in srgb, var(--nr-accent) 20%, transparent);
   padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
+  border-radius: var(--nr-radius-sm);
   display: flex;
   align-items: center;
   gap: 0.375rem;
   font-size: 0.625rem;
-  font-weight: 900;
+  font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  opacity: 0.5;
-  color: var(--nr-text);
+  color: var(--nr-text-secondary);
   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 {

package/dist/chat.css

@@ -55,7 +55,7 @@
   min-width: 2.5rem;
   padding: 0.5rem 1rem;
   border-radius: var(--nr-radius);
-  background: var(--nr-bg-secondary);
+  background: var(--nr-muted);
   color: var(--nr-text);
   font-size: 0.9rem;
 }

package/dist/codeblock.css

@@ -8,7 +8,7 @@
   border-radius: var(--nr-radius);
   border: 1px solid var(--nr-border);
   overflow: hidden;
-  background: rgba(30, 41, 59, 0.05);
+  background: color-mix(in oklab, var(--nr-bg-secondary) 30%, var(--nr-bg));
 }
 
 .nr-codeblock__header {
@@ -17,7 +17,7 @@
   gap: 0.5rem;
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--nr-border);
-  background: rgba(30, 41, 59, 0.1);
+  background: var(--nr-muted);
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
   font-size: 0.75rem;
   color: var(--nr-text-secondary);
@@ -48,12 +48,12 @@
   padding: 0.375rem;
   border-radius: var(--nr-radius-sm);
   border: none;
-  background: rgba(30, 41, 59, 0.2);
+  background: var(--nr-muted);
   color: var(--nr-text-secondary);
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
 }
 .nr-codeblock__copy:hover {
-  background: rgba(30, 41, 59, 0.4);
+  background: color-mix(in oklab, var(--nr-bg-secondary) 70%, var(--nr-bg));
   color: var(--nr-text);
 }

package/dist/details.css

@@ -12,18 +12,19 @@
 .nr-details__summary {
   cursor: pointer;
   padding: 1rem;
-  font-weight: 700;
+  font-weight: 600;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   list-style: none;
+  transition: background-color 0.15s;
 }
 .nr-details__summary::-webkit-details-marker {
   display: none;
 }
 .nr-details__summary:hover {
   color: var(--nr-accent);
-  transition: color 0.15s;
+  background: var(--nr-muted);
 }
 
 .nr-details__icon {

package/dist/index.cjs

@@ -11089,6 +11089,7 @@ function createModal(title) {
   header.appendChild(titleEl);
   const closeBtn = document.createElement("button");
   closeBtn.className = "nr-modal__close";
+  closeBtn.setAttribute("aria-label", "Close");
   closeBtn.appendChild(createIcon("close"));
   closeBtn.addEventListener("click", () => dialog.close());
   header.appendChild(closeBtn);
@@ -11370,6 +11371,18 @@ function openModal(dialog) {
   }
 }
 var IMG_RE = /!\[([^\]]*)\]\(([^)]+)\)/g;
+function applyAlignClass(el, baseClass, align) {
+  if (align === "center") {
+    el.classList.add(`${baseClass}--center`);
+  } else if (align === "right") {
+    el.classList.add(`${baseClass}--right`);
+  }
+}
+function resolveIcon(value, fallback) {
+  if (!value) return fallback;
+  if (value === "none" || value === "off") return null;
+  return value;
+}
 function parseIntProp(value, defaultValue) {
   if (!value) return defaultValue;
   const n = parseInt(value, 10);
@@ -11409,13 +11422,16 @@ var modalDirective = ({ props, renderSlot }) => {
   const label = props.label || props.title || "Open";
   const modalTitle = props.title || "Modal";
   const align = props.align || "left";
+  const iconName = resolveIcon(props.icon, "open_in_full");
   const wrapper = document.createElement("div");
-  wrapper.className = `nr-modal-trigger${align === "center" ? " nr-modal-trigger--center" : align === "right" ? " nr-modal-trigger--right" : ""}`;
+  wrapper.className = "nr-modal-trigger";
+  applyAlignClass(wrapper, "nr-modal-trigger", align);
   const btn = document.createElement("button");
-  btn.className = `nr-button nr-button--default`;
+  btn.className = "nr-button nr-button--default";
+  btn.setAttribute("aria-haspopup", "dialog");
+  applyColor(btn, props.color, "nr-button");
   applyBaseProps(btn, props);
-  const icon = props.icon || "open_in_new";
-  if (icon) btn.appendChild(createIcon(icon));
+  if (iconName) btn.appendChild(createIcon(iconName));
   btn.appendChild(document.createTextNode(label));
   const dialog = createModal(modalTitle);
   const body = dialog.querySelector(".nr-modal__body");
@@ -11436,20 +11452,21 @@ var modal_default = modalDirective;
 var buttonDirective = ({ props, renderSlot }) => {
   const url = props.url || props.href || "#";
   const label = props.label || props.title;
-  const icon = props.icon || "near_me";
+  const iconName = resolveIcon(props.icon, "touch_app");
   const target = props.target || "_blank";
-  const customClass = props.class || "";
   const align = props.align || "left";
   const wrapper = document.createElement("div");
-  wrapper.className = `nr-button-wrap${align === "center" ? " nr-button-wrap--center" : align === "right" ? " nr-button-wrap--right" : ""}`;
+  wrapper.className = "nr-button-wrap";
+  applyAlignClass(wrapper, "nr-button-wrap", align);
   if (label) {
     const a = document.createElement("a");
     a.href = url;
     a.target = target;
-    a.rel = "noopener noreferrer";
+    if (target === "_blank") a.rel = "noopener noreferrer";
     a.className = "nr-button nr-button--default";
+    applyColor(a, props.color, "nr-button");
     applyBaseProps(a, props);
-    a.appendChild(createIcon(icon));
+    if (iconName) a.appendChild(createIcon(iconName));
     a.appendChild(document.createTextNode(label));
     wrapper.appendChild(a);
     return wrapper;
@@ -11459,6 +11476,8 @@ var buttonDirective = ({ props, renderSlot }) => {
   if (links.length > 0) {
     links.forEach((link) => {
       link.classList.add("nr-button", "nr-button--default");
+      applyColor(link, props.color, "nr-button");
+      if (iconName) link.prepend(createIcon(iconName));
       applyBaseProps(link, props);
     });
     wrapper.appendChild(slotContent);
@@ -11466,10 +11485,11 @@ var buttonDirective = ({ props, renderSlot }) => {
     const a = document.createElement("a");
     a.href = url;
     a.target = target;
-    a.rel = "noopener noreferrer";
+    if (target === "_blank") a.rel = "noopener noreferrer";
     a.className = "nr-button nr-button--default";
+    applyColor(a, props.color, "nr-button");
     applyBaseProps(a, props);
-    a.appendChild(createIcon(icon));
+    if (iconName) a.appendChild(createIcon(iconName));
     a.appendChild(slotContent);
     wrapper.appendChild(a);
   }
@@ -12258,6 +12278,10 @@ var directiveRegistry = {
   modal: modal_default,
   button: button_default,
   // Layout / generic wrappers
+  // ⚠️ DEPRECATED — legacy only, kept for backward compatibility.
+  // Do NOT document these (`:::div`, `:::style`, `:::custom`, `:::raw`)
+  // in guides or llms.txt; use native HTML blocks instead.
+  // See ./wrapper.ts for details.
   div: wrapper_default,
   style: wrapper_default,
   custom: wrapper_default,