@noirmd/previewer 2.1.5 → 2.1.6

package/dist/button.css

@@ -35,4 +35,28 @@
 }
 .nr-button:active {
   transform: scale(0.95);
-}
+}
+
+/* ── 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/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);
   }