@noirmd/previewer 2.1.5 → 2.1.6

package/dist/vanilla.js

@@ -11048,6 +11048,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);
@@ -11329,6 +11330,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);
@@ -11368,13 +11381,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");
@@ -11395,20 +11411,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;
@@ -11418,6 +11435,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);
@@ -11425,10 +11444,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);
   }